@charset "utf-8";

/*----------------------------------------------------------------
 inside #contents
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 elements
----------------------------------------------------------------*/

/*-----------------------------------------------------
 headings
-----------------------------------------------------*/
#contents h3{ font-weight: bold; }


/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 container
-----------------------------------------------------*/
@media (min-width: 992px) {
#contents .container { max-width: 730px; }
}

/*-----------------------------------------------------
 section
-----------------------------------------------------*/
#contents .section{ padding: 2.5rem 0; }
@media (min-width: 992px) {
#contents .section{ padding: 9rem 0 4.5rem 0; }
}

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/* list
-----------------------------------------------------*/
#contents dl{ margin: 0 0 3rem 0; }
@media (min-width: 992px) {
#contents dl{ font-size: 1.4rem; }
}
/* table
-----------------------------------------------------*/
@media (max-width: 991px) {
#contents table,
#contents table tbody,
#contents table thead,
#contents table tr,
#contents table td,
#contents table th{ display: block; }

#contents table td{ padding: 0 0 2rem 0; }
}

@media (min-width: 992px) {
#contents table{
	margin				: 0 auto;
	width				: 100%;
	font-size			: 1.4rem;
}
#contents table th{
	width				: 15rem;
	text-align			: right;
	padding				: 0 2rem 2rem 0;
	vertical-align		: top;
}
#contents table td{
	padding				: 0 0 2rem 0;
	word-break			: break-all;
	word-wrap			: break-word;
}
}


/* title
-----------------------------------------------------*/
#contents .title{
	height				: 8rem;
	background-position	: center center;
	background-repeat	: no-repeat;
	background-size		: contain;
	text-align			: center;
	line-height			: 8rem;
	font-family			: 'Oswald',sans-serif;
	font-size			: 3rem;
	color				: #FFF;
}
@media (min-width: 992px) {
#contents .title{
	height				: 16rem;
	line-height			: 16rem;
	font-size			: 6rem;
}
}

/* title-copy
-----------------------------------------------------*/
#contents .title-copy{
	margin				: 0 0 1.25rem 0;
	text-align			: center;
	font-size			: 1.6rem;
}
@media (min-width: 992px) {
#contents .title-copy{
	margin				: 0 0 4rem 0;
	font-size			: 2rem;
}
}

#contents .title-copy:before{ content: "- "; }
#contents .title-copy:after{ content: " -"; }


/* contact
-----------------------------------------------------*/
#contents .contact{ text-align: center; }
#contents .contact>dl{
	display				: inline-block;
	margin				: 0;
	text-align			: left;
}
#contents .contact>dl strong{
	display				: inline-block;
	margin				: 1rem 0 0.5rem 0;
	font-weight			: normal;
	font-size			: 1.8rem;
}
#contents .contact>dl strong i{ margin: 0 0.5em 0 0; }
#contents .contact>dl strong a{
	color: #333;
}

@media (min-width: 992px) { #contents .contact>dl strong{ font-size: 2rem; } }


/* s-block
-----------------------------------------------------*/
#contents .s-block{
	padding				: 0.75rem;
	background-image	: url(../images/suisai_brown01.jpg);
	background-repeat	: repeat;
	background-position	: left top;
	line-height			: 1px;
}
#contents .s-block>.inner{
	padding				: 2rem;
	background			: #FFF;
	line-height			: 1.8;
}
#contents .s-block>.inner p:last-child{ margin-bottom: 0; }
@media (min-width: 992px) {
#contents .s-block{ padding: 1.5rem; }
#contents .s-block>.inner{ padding: 2.4rem; }
#contents .s-block.transparent>.inner{
	border				: 5px solid #FFF;
	padding				: 3rem;
}
}

/* transparent --------------------------------------*/
#contents .s-block.transparent>.inner{
	background			: transparent;
	border				: 4px solid #FFF;
	padding				: 1rem;
}
@media (min-width: 992px) {
#contents .s-block.transparent>.inner{
	border				: 5px solid #FFF;
	padding				: 3rem;
}
}
/* pop
---------------------------------*/
#contents .s-block .pop{
	margin				: 0 0 0.5rem 0;
	text-align			: center;
	line-height			: 1;
	font-family			: 'Oswald',sans-serif;
	font-weight			: 200;
	font-size			: 1.5rem;
}
@media (min-width: 992px) {
#contents .s-block .pop{
	margin				: 0 0 1rem 0;
	font-size			: 2.8rem;
}
}

/* wide-block
-----------------------------------------------------*/
#contents .wide-block{
	padding				: 12.5rem 0 3rem 0;
	background-repeat	: no-repeat;
	background-size		: 100%;
	background-position	: center top;
}
#contents .wide-block .inner{
	margin				: 0.8rem 0;
	box-shadow			: 0 0 0.8rem rgba(0,0,0,0.3);
	padding				: 2rem;
	background			: #FFF;
}

@media (min-width: 992px) {
#contents .wide-block{
	padding				: 4.2rem 0;
	background-size		: cover;
}
#contents .wide-block .inner{
	margin				: 0.8rem 0;
	padding				: 3rem;
}
}

/* button
-----------------------------------------------------*/
#contents .button{
	display				: block;
	position			: relative;
	margin				: 0 auto;
	box-shadow			: 0 2px 5px rgba(0,0,0,0.5);
	border-bottom		: 3px solid #b04545;
	max-width			: 48rem;
	padding				: 0.7rem 0;
	background			: #de5757;
	text-decoration		: none;
	text-align			: center;
	font-size			: 1.7rem;
	font-weight			: bold;
	color				: #FFF;
}
#contents .button:hover{ top: 2px; }
#contents .button>i{
	position			: absolute;
	right				: 1.5rem;
	top					: 50%;
	transform			: translateY(-50%);
	font-size			: 2.4rem;
}
@media (min-width: 992px) {
#contents .button{
	border-bottom		: 6px solid #b04545;
	padding				: 1rem 0;
	font-size			: 2.4rem;
}
}
/* catch
-----------------------------------------------------*/
#contents .catch{
	margin				: 3rem 0;
	text-align			: center;
	font-size			: 2rem;
	font-weight			: bold;
}
@media (min-width: 992px) {
#contents .catch{
	margin				: 5rem 0;
	font-size			: 3rem;
}
}
/* contact-block
-----------------------------------------------------*/
#contents .contact-block{
	position			: relative;
	padding				: 4rem 0 3rem 0;
}
#contents .contact-block:before{
	content				: "◆";
	display				: block;
	position			: absolute;
	top					: -10rem;
	left				: 50%;
	transform			: translateX(-50%) scale(1 ,0.2);
	font-size			: 20rem;
	line-height			: 1;
	color				: #FFF;
}
@media (min-width: 992px) {
#contents .contact-block{ padding: 7rem 0; }
#contents .contact-block:before{
	top					: -20rem;
	font-size			: 40rem;
}
}

/*----------------------------------------------------------------
 switch
----------------------------------------------------------------*/
#switch{ padding: 0 1.5rem; }
#switch .button{
	margin				: 5rem auto;
	box-shadow			: 0 2px 5px rgba(0,0,0,0.5)!important;
	width				: 100%;
	border				: 0;
	border-bottom		: 3px solid #a0a0a0!important;
	background			: #cccccc;
	color				: #333;
}

@media (min-width: 992px) {
#switch .button{ border-bottom: 3px solid #a0a0a0!important; }
}

/* company
-----------------------------------------------------*/
#contents .company>dl a{
	text-decoration: none;
	color: #4288ce;
}
#contents .company>dl a:visited{
	color: #DDA0DD;
}
#contents .company>dl a:hover{
	text-decoration: underline;
}