@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	font-family:'?q???M?m?p?S Pro W3','Hiragino Kaku Gothic Pro','???C???I',Meiryo,'?l?r ?o?S?V?b?N',sans-serif;
	text-align:left;
	line-height:1.7;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
	background: #fff;
}

.clear{
	clear:both;
}

/* basic_style */
.container {width:1300px;margin: 0 auto;}
h2 { text-align:center; margin:50px 0; }
h3 {color:#08A597;font-size:140%;}
.section span { background-color:#FFFF00;}
.section b { font-size:180%; }
a:hover { opacity: 0.7 ; }

/* apply */
.apply {text-align:center; margin:60px 0;}

/* mainvisual */
#link a { display:block; text-decoration:none; font-size:80%; padding:5px 0; }
#MainVisual { background-color:#08A597; width:100%; color:#FFFFFF; text-shadow:2px 2px 1px #000000; }
#MainVisual .container { background-image:url('img/MainvisualImage.jpg'); background-repeat:no-repeat; background-position:right; padding: 30px 0 30px 0; }
#MainVisual span { font-size:230%; }
#topic { width:50%; padding:10px; border:1px solid #FFFFFF; border-radius:50px; text-shadow:1px 1px 1px #000000; margin-bottom:20px; font-size:150%; font-weight:bold; text-align:center;}

/* intro */
#intro p { background-color:#EEEEEE; padding:20px; }
#campaign { text-align:center; margin-top:50px; }
#campaign p { display:inline; width:31.1%; float:left; margin-right:1%; height:80px; text-align:center; padding:10px; font-size:150%; }

/* feature */
#feature_intro { height:auto; text-align:center; padding-bottom:50px ; }
#feature_section1 , #feature_section2 , #feature_section3 , #feature_section4  { height:350px; padding:50px 0; }
#feature_section1 , #feature_section3 { width:100%; background-color:#EEEEEE; }
#feature h3 , #feature p { width:50%; }
#feature_section1 .container { background-image:url('img/image1.jpg'); background-repeat:no-repeat; background-position:right; height:100%; }
#feature_section2 .container { background-image:url('img/image2.jpg'); background-repeat:no-repeat; background-position:right; height:100%; }
#feature_section3 .container { background-image:url('img/image3.jpg'); background-repeat:no-repeat; background-position:right; height:100%; }
#feature_section4 .container { background-image:url('img/image4.jpg'); background-repeat:no-repeat; background-position:right; height:100%; }

/* kakomon */
#tangengenre , #kakomonenshu { width:46%; float:left; padding:50px 2%; height:250px; }
#tangengenre { background-color:#EEEEEE; }
#kakomonenshu { background-image:url('img/kakomon_bg.jpg'); background-repeat:no-repeat; }
#tangengenre { background-image:url('img/tangen_bg.png'); background-repeat:no-repeat; background-position:right; }

/* catchcopy */
#catchcopy { background-color:#EEEEEE; text-align:center; font-size:150%; font-weight:bold; padding:30px 0; margin:50px auto; }

/* copyright */
#copyright { background-color:#08A597; width:100%; color:#FFFFFF; text-align:center; font-size:80%; padding:10px 0; }

/* day */
#day { text-align:center; background-color:#EEEEEE; padding-top:1px; }

/* year */
#year { text-align:center; }

/* guide */
#guide { text-align:center; background-color:#EEEEEE; padding-top:1px; }

/* smartphone */
@media only screen and (max-width: 768px) {
  img {width:95%;}
  .container { width:100%; }
  #topic { width:90%; margin:10px auto; font-size:100%; }
  #MainVisual h1 {font-size:150%; text-align:center; }
  #MainVisual h1 span {font-size:150%; text-align:center; }
  h2 {font-size:120%;}
  #campaign p { display:block; width:90%; margin:3%; float:none; }
  #campaign p:nth-of-type(3) {margin-right:0; }
  #feature h3 , #feature p { width:95%; margin:0 auto; }
  #feature > div { height:auto; }
  .section b { font-size:150%; }
  #tangengenre, #kakomonenshu { width:96%;float:none;height:100%; }
  #catchcopy { font-size:100%;}
  .apply img {margin-bottom:10px;}
  #feature_section1 .container { background-image:url('img/image1.jpg'); background-repeat:no-repeat; background-position:bottom; padding-bottom:60%; background-size:90%; }
  #feature_section2 .container { background-image:url('img/image2.jpg'); background-repeat:no-repeat; background-position:bottom; padding-bottom:60%; background-size:90%; }
  #feature_section3 .container { background-image:url('img/image3.jpg'); background-repeat:no-repeat; background-position:bottom; padding-bottom:60%; background-size:90%; }
  #feature_section4 .container { background-image:url('img/image4.jpg'); background-repeat:no-repeat; background-position:bottom; padding-bottom:60%; background-size:90%; }
}