@charset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Asap:500,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');

* 									{ margin: 0px;padding: 0px; }
body							  	{ font-family: 'Noto Sans Japanese', sans-serif; text-align:left; color:#000000;  background-color:#fff; margin: 0px;padding: 0px; }h1,h2,h3,h4,h5,h6,ul,ol,li ,div		{ margin: 0px;padding: 0px; }
p 									{ font-size: 12px;line-height:1.4em; color: #000000; }
ul,ol,li						    { list-style:none; }
a									{ text-decoration: none; color:#222;display: block; }
a:hover 							{ text-decoration: none; opacity:0.7; }
address							{ font-style:normal; }
img 								{ border: none; display:inline-block;}
.clr 								{ font-size: 1px;line-height: -1px;margin: 0px;padding: 0px;clear: both;height: 1px; }
dl,dt,dd							{ margin:0; padding:0; }
.clearfix:after 				{  content: ".";  /* 新しい要素を作る */  display: block;  /* ブロックレベル要素に */  clear: both;  height: 0;  visibility: hidden;}
.clearfix 						{  min-height: 1px;}
* html .clearfix 				{  height: 1px;  }





/* container
========================================================== */
#container									{ width: 100%; margin:0 auto; padding:0; }

/* contents
========================================================== */
#contents	 								{ width:100%; min-width: 1280px; margin: 0 auto; padding:0; }



/* main
========================================================== */
#main { text-align:center; margin-bottom:24px; position:relative; }


/* list
========================================================== */
ul { overflow:hidden; display:block; margin-bottom:25px; }
ul li { float:left; margin-right:10px; }
ul li:last-child { margin-right:0px; }

ul li.gold { border:4px solid #f5d218; }
ul li.silver { border:4px solid #c9c9c9; }
ul li.big { width:262px; height:510px; position:relative; }
ul li.big .icon-rank { position:absolute; top:8px; left:10px; }
ul li.big .icon-r-side { position:absolute; top:17px; right:10px; }
ul li.big .icon-new { position:absolute; top:70px; right:12px; }
ul li.big .server { margin:72px auto 0; text-align: center;}
ul li.big .server img {margin:0 auto 10px;}
ul li.big .server-name p { font-family: 'Montserrat', sans-serif; width:186px; text-align:center; margin:0 auto; font-size:24px;font-weight: 600;line-height: 1;}
ul li.big .server-name span { font-size:10px; text-align:center; width:186px;margin:0 auto; display:block; }
ul li.big .server-text { font-size:12px;text-align:center; width:186px;margin:5px auto 0; display:block; color:#666666; }
ul li.big .icon-free { text-align:center; margin:20px auto 0;} 
ul li.big .btn-big { text-align:center; width:186px;margin:0px auto 30px;display:block; color:#FFF; background-color:#3d9ad7; border-radius:4px; font-size:16px; height:50px; line-height:50px; }

ul li.small { width:171px; height:486px; margin-top:30px; position:relative; border:1px solid #eee; }
ul li.small .icon-rank { position:absolute; top:8px; left:4px; }
ul li.small .icon-rental-free { position:absolute; top: 80px; left: 27px; }
ul li.small .icon-r-side { position:absolute; top:12px; right:4px; }
ul li.small .icon-new { position:absolute; top:75px; right:35px; }
ul li.small .server { margin:98px auto 0; text-align: center;}
ul li.small .server img {margin:0 auto 10px;}
ul li.small .server-name p { font-family: 'Montserrat', sans-serif; width:186px; text-align:center; margin:0 auto; font-size:20px;font-weight: 600;line-height: 1;}
ul li.small .server-name span { font-size:10px; text-align:center; width:186px;margin:0 auto; display:block; }
ul li.small .server-text { line-height: 1.4em; font-size:12px;text-align:center; width:186px;margin:5px auto 0; display:block; color:#666666; }
ul li.small .icon-free { text-align:center; margin:20px auto 0;} 
ul li.small .btn-small { text-align:center; width:150px;margin:0px auto;display:block; color:#FFF; background-color:#3d9ad7; border-radius:4px; font-size:13px; height:42px; line-height:42px; }



/*------------------------------
// サーバー一覧箇所
------------------------------*/
.server {
  width: 100%;
  background: #e0f6f8;
  padding: 48px 0 ;
  position: relative;
}
.server p.read { width:1100px; font-size:14px; font-weight:400; letter-spacing: 0.2em;line-height: 1.6em; margin: 0 auto 24px; text-align: center; color: #666666;}
 .server span.main-text { font-size:36px; font-weight: 700; line-height: 1.4em; letter-spacing: 0.1em; text-align: center; color: #222;}
 
.server .arrow {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  z-index: 0;
}
.server .server-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 0;
  position: relative;
}
.server .server-inner h3 {
  text-align: center;
  padding: 50px 0 40px 0;
}
.server .server-inner .server-icon {
  position: absolute;
  top: -15px;
  left: -22px;
}
.server .server-inner .server-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.server .server-inner .item {
  position: relative;
  background: #fff;
  display: flex;
  justify-content: center;
  padding: 30px;
}
.server .server-inner .item[data-type=big] {
  width: 100%;
  margin-bottom: 40px;
}
.server .server-inner .item[data-type=big] .item-server {
  margin-right: 64px;
}
.server .server-inner .item[data-type=big] .item-txt-img {
  margin-bottom: 34px;
}
.server .server-inner .item[data-type=big] .server-btn {
  position: relative;
  display: inline-block;
}
.server .server-inner .item[data-type=big] .server-btn .campaign-btn-arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  z-index: 2;
}
.server .server-inner .item[data-type=big] .server-btn a.campaign-btn {
  position: relative;
  background: #3d9ad7;
  min-width: 330px;
  min-height: 72px;
  padding: 20px 50px 20px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  font-size: 20px;
  z-index: 1;
  box-sizing: border-box;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */
}
.server .server-inner .item[data-type=big] .server-btn a.campaign-btn:hover {
  background: #3d9ad7;
}
.server .server-inner .item[data-type=big] .server-btn a.campaign-btn span {
  margin: auto;
  top: 0;
  bottom: 0;
  right: 15px;
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  padding: 0;
}
.server .server-inner .item[data-type=big] .server-btn a.campaign-btn span img {
  vertical-align: top;
}
.server .server-inner .item[data-type=small] {
  flex-direction: column;
}
.server .server-inner .item[data-type=small] {
  margin-bottom: 40px;
}
.server .server-inner .item[data-type=small]:nth-of-type(4) {
  margin-bottom: 0;
}
.server .server-inner .item[data-type=small]:nth-of-type(5) {
  margin-bottom: 0;
}
.server .server-inner .item[data-type=small] .item-server {
  margin-bottom: 34px;
}
.server .server-inner .item[data-type=small] .server-btn {
  position: relative;
  display: inline-block;
}
.server .server-inner .item[data-type=small] .server-btn .campaign-btn-arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  z-index: 2;
}
.server .server-inner .item[data-type=small] .server-btn a.campaign-btn {
  position: relative;
  background: #3d9ad7;
  min-width: 265px;
  min-height: 72px;
  padding: 20px 50px 20px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  font-size: 20px;
  z-index: 1;
  box-sizing: border-box;
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; /* easeOutQuint */
}
.server .server-inner .item[data-type=small] .server-btn a.campaign-btn:hover {
  background: #3d9ad7;
}
.server .server-inner .item[data-type=small] .server-btn a.campaign-btn span {
  margin: auto;
  top: 0;
  bottom: 0;
  right: 15px;
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  padding: 0;
}
.server .server-inner .item[data-type=small] .server-btn a.campaign-btn span img {
  vertical-align: top;
}





/* check
========================================================== */
#check { text-align:center; width: 600px; margin: 30px auto 50px; }
#check p.read { padding-top: 15px; display: inline-block;font-size:24px; font-weight:bold; letter-spacing:0;line-height: 1.2em; background: linear-gradient(transparent 90%, #fff773 0%); }
#check img { float:left; }


/* footer
========================================================== */
#footer 									{ width:100%; background-color:#363636; padding:20px 0; }
#footer #footer-inner				{ width:1100px; margin:0 auto; }
#footer p 								{ color:#FFFFFF; }
#footer a 								{ color:#FFFFFF;display: inline-block; }
#footer a:hover						{ color:#FFFFFF; }
#footer .menu						{ float:left; }
#footer .copy							{ float:right; }