@charset "UTF-8";

html {
	font-size:62.5%;
	-webkit-text-size-adjust: 100%
}
body {
    padding: 0px;
    margin: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 300px;
    font-size: 1.5em;
	line-height: 23px;
	letter-spacing: 0.1em;
	text-align: center;
	color: white;
	font-family: 'M PLUS 1p','Segoe Script','Snell Roundhand',sans-serif;
    background-color: rgb(255, 255, 255);
}

a:link { color:#000000; text-decoration:none }
a:visited { color:#000000; text-decoration:none }
a:hover { color:#000000; text-decoration:none }
a:active { color:#000000; text-decoration:none }

h3{
	font-size:2.5rem;
	font-family: 'M PLUS 1p','Segoe Script','Snell Roundhand',sans-serif;
	letter-spacing: 0.1em;
}

.main-contents{
  	background-image: url(../img/susukino_bg.jpg);
  	background-repeat: no-repeat;
  	background-size: 100%;
  	background-position: center center;
  	background-attachment: fixed;
}


.top-box{
	padding: 50px;
	width: 650px;
	height: 900px;
	margin-right: auto;
	margin-left : auto;
}

.top-box img{
	padding-top: 200px;
}

.main-box{
	padding: 60px;
	width: 1000px;
	margin-right: auto;
	margin-left : auto;
	background-color:rgba(0,0,0,0.75);
}

.message-box{
	padding-top: 10px;
	padding-bottom: 50px;
	width: 650px;
	margin-right: auto;
	margin-left : auto;
}

.message-h3{
	color: #FF3399;
	padding-bottom: 30px;
}

.item-box{
	padding-top: 10px;
	padding-bottom: 50px;
	width: 850px;
	margin-right: auto;
	margin-left : auto;
}

.item{
	padding: 30px 60px;
	width: 800px;
	margin-right: auto;
	margin-left : auto;
	margin-bottom: 50px;
	background-color: #222222;
}

.contact-us-h {
	padding-top: 250px;
	/* padding-bottom: 25px; */
	text-align: center;
}

.contact-us {
	padding-top: 60px;
	/* padding-bottom: 25px; */
	text-align: center;
}

.contact-box {
	position: relative;
	width: 500px;
	margin-right: auto;
	margin-left : auto;
}


.contact-box input[type=text] {
	font: 1.0em 'M PLUS 1p';
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	padding: 0.3em;
	transition: 0.3s;
	border: 1px solid #2B2B2B;
	outline: none;
}

.contact-box input[type=text]:focus {
	border-color: #da3c41;
}

.contact-box input[type=text] {
	padding-left: 20px;
}

.contact-box textarea {
	font: 1.0em 'M PLUS 1p';
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	padding: 0.3em;
	transition: 0.3s;
	border: 1px solid #2B2B2B;
	outline: none;
}

.contact-box textarea:focus {
	border-color: #da3c41;
}

.contact-box textarea {
	padding-left: 20px;
}

.contact-box input[type=submit] {
	font: 1.0em 'M PLUS 1p';
	letter-spacing: 0.15em;
	box-sizing: border-box;
	width: 25%;
	margin: 18px 0;
	padding: 10px 30px;
	transition: 0.3s;
	border: 1px solid #2B2B2B;
	outline: none;
	background-color: #ffffff;
}

.contact-box input[type=submit]:hover{
	color: #ffffff;
	background-color: #FF3399;
}

@media screen and (max-width: 480px){
	.contact-box input[type=submit]{
		padding: 10px 20px;
	}
}

.contact-link {
	font: 1.5em 'M PLUS 1p';
	letter-spacing: 0.15em;
	box-sizing: border-box;
	width: 25%;
	margin-top: 100px;
	padding: 10px 30px;
	transition: 0.3s;
	border: 1px solid #2B2B2B;
	outline: none;
	background-color: #ffffff;
}

.contact-link:link { color:#2B2B2B; text-decoration:none }
.contact-link:visited { color:#2B2B2B; text-decoration:none }
.contact-link:hover{
	color: #ffffff;
	background-color: #FF3399;
	text-decoration: none;
}
.contact-link:active { color:#2B2B2B; text-decoration:none }

*, *::before, *::after {
  box-sizing:border-box;
}
.clearfix::after {
  content:'';
  display:block;
  clear:both;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
	.main-contents{
		margin: 0px;
		padding: 0px;
  		background-position: top;
	}
}

@media screen and (max-width: 1024px) {
	.main-contents{
		margin: 0px;
		padding: 0px;
  		background-position: top;
	}

	.top-box{
		margin-top: 0px;
		padding: 0px;
		width: 50%;
		height: 250px;
		margin-right: auto;
		margin-left: auto;
	}

	.top-box img{
		padding-top: 80px;
	}
	.contact-us-h {
		padding-top: 50px;
	}

	.contact-link{
		font: 1.0em 'M PLUS 1p';
		margin-top: 10px;
		width: 10%;
	}

	.main-box{
		padding: 20px;
		width: 100%;
		background-color: #222222;
	}

	.message-box{
		width: 95%;
	}

	.message-h3{
		line-height: 1.5em;
	}

	.item-box{
		width: 95%;
	}

	.item{
		padding: 10px 15px;
		width: 90%;
		margin-bottom: 30px;
		background-color: #333333;
	}

	.contact-us {
		padding-top: 30px;
	}

	.contact-box{
		width: 450px;
	}

}

@media screen and (max-width: 480px){
	body{
		font-size:1.5rem;
	}

	h3{
		font-size:1.5rem;
	}

	.contact-us{
		padding-top: 30px;
	}

	.contact-box{
		width: 350px;
	}
}