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

/* ------------------------------------------------------------------------------
force-creative.jp
------------------------------------------------------------------------------ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* LinkColor */
a:link {
color: #00F;
}

a:visited {
color: #600;
}

a:hover {
color: #090;
}

a:focus {
color: #090;
}

a:active {
color: #FF0;
}

/*TableStyle*/
table {
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-collapse: collapse;
border-spacing: 0;
}

table th {
padding: 5px;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
background: #FAFAFA;
}

table td {
padding: 5px;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

/* RoundBox */
.roundBox {
width: 500px;
background: url(none) repeat-y left top;
}

.roundCap {
font-size: 0%;
line-height: 0;
}

/* Note */
.note {
text-indent: -1em;
margin-left: 1em;
}

/* ClearFix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cb {
	clear: both;
}


/* ------------------------------------------------------------------------------
Template
------------------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
/* タブレット横+PC用 */
#wrap {
	text-align:center;
	width:100%;
}
h1,h2,h3,h4 {
	padding:0px;
	margin:0px;
}
#header {
	background-color:#095BAB;
	width:100%;
}
.headLogo {
	width:100%;
	max-width:960px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}
.brand img {
	width:100%;
	height:auto;
}
.footer {
	border-top:#095BAB 15px solid;
	width:100%;
	padding-top:18px;
}
.copyright {
	text-align:center;
	font-size:10px;
	margin-bottom:75px;
}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
/* タブレット縦用 */
#wrap {
	text-align:center;
	overflow: hidden;
	width:100%;
}
h1,h2,h3,h4 {
	padding:0px;
	margin:0px;
}
#header {
	background-color:#095BAB;
	width:100%;
}
.headLogo {
	width:100%;
	text-align:left;
	margin-left:0.2em
}
.headLogo img {
	width:200px;
	height:auto;
}
.brand img {
	width:100%;
	height:auto;
}
.footer {
	border-top:#095BAB 15px solid;
	width:100%;
	padding-top:18px;
}
.copyright {
	font-size:10px;
	margin-bottom:75px;
}
}

@media screen and (min-width: 321px) and (max-width: 480px)  {
/* スマートフォン横用 */
#wrap {
	text-align:center;
	overflow: hidden;
	width:100%;
}
h1,h2,h3,h4 {
	padding:0px;
	margin:0px;
}
#header {
	background-color:#095BAB;
	width:100%;
}
.headLogo {
	width:100%;
	text-align:left;
	margin-left:0.2em
}
.headLogo img {
	width:200px;
	height:auto;
}
.brand {
	width:100%;
	overflow:hidden;
}
.brand img {
	width:120%;
	height:auto;
	margin-left:-10%;
}
.footer {
	border-top:#095BAB 15px solid;
	width:100%;
	padding-top:18px;
}
.copyright {
	font-size:10px;
	margin-bottom:40px;
}
}

@media screen and (max-width: 320px)  {
/* スマートフォン縦用 */
#wrap {
	text-align:center;
	overflow: hidden;
	width:100%;
}
h1,h2,h3,h4 {
	padding:0px;
	margin:0px;
}
#header {
	background-color:#095BAB;
	width:100%;
}
.headLogo {
	width:100%;
	text-align:left;
	margin-left:0.2em
}
.headLogo img {
	width:200px;
	height:auto;
}
.brand {
	width:100%;
	overflow:hidden;
}
.brand img {
	width:120%;
	height:auto;
	margin-left:-10%;
}
.footer {
	border-top:#095BAB 15px solid;
	width:100%;
	padding-top:18px;
}
.copyright {
	font-size:10px;
	margin-bottom:40px;
}
}