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

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
}


html body {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width: 100%;
	background: #fff;
}

@font-face{ 
  font-family: 'mplus-1p-bold';
  src: url('https://mplus-webfonts.sourceforge.jp/mplus-1p-bold.eot');
  src: url('https://mplus-webfonts.sourceforge.jp/mplus-1p-bold.eot?#iefix') format('embedded-opentype'),
       url('https://mplus-webfonts.sourceforge.jp/mplus-1p-bold.woff') format('woff'),
       url('https://mplus-webfonts.sourceforge.jp/mplus-1p-bold.ttf') format('truetype');
}

/*
body {
    font-family: 'M+ 1p black';
}
*/


@media screen and (max-width: 740px) {
	html body {
		padding-bottom: 0!important;
		-webkit-text-size-adjust: 100%;
	}
}


.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

.cf:after {
    content:" ";
    display:block;
    clear:both;
}

.bsz {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.pc{display: block;}
.sp{display: none;}
@media screen and (max-width: 740px) {
.pc{display: none;}
.sp{display: block;}
}



/*******************/
/*#Container       */
/*******************/
#Container {
	width: 100%;
	background: 
		url(../images/main_bg.png) no-repeat center top,
		url(../images/footer_bg.png) no-repeat center bottom;
}
@media screen and (max-width: 740px) {
#Container {
	width: 100%;
	background:
		url(../images/main_bg_sp.png) no-repeat center top,
		url(../images/footer_bg_sp.png) no-repeat center bottom;
	background-size: 100% auto, 100% auto;
}
}




/*******************/
/*header           */
/*******************/
header {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
@media screen and (max-width: 740px) {
header {
	width: 100%;
}
}


header h1 {
	float: left;
	width: 497px;
	padding: 23px 0 0 0;
}
@media screen and (max-width: 740px) {
header h1 {
	float: none;
	width: 87.5%;
	margin: 0 auto;
	padding: 2em 0 0 0;
}
}

header h1 img{ width: 100%; }

#messageBtn {
	float: right;
	width: 354px;
	padding: 30px 0 0 0;
	display: block;
}
@media screen and (max-width: 740px) {
#messageBtn {
	float: none;
	width: 87.5%;
	margin: 0 auto;
	padding: 1.5em 0 0 0;
}
}

#messageBtn img { width: 100%; }


#navigatorList {
	clear: both;
	padding: 35px 0 0 0;
	width: 100%;
    font-family: 'mplus-1p-bold';
}
@media screen and (max-width: 740px) {
#navigatorList {
	padding: 2em 0 0 0;
}
}



#navigatorList ul {
	list-style: none;
	text-align: center;
}

#navigatorList li {
	display: inline-block;
	width: 140px;
	margin: 0 4px;
}
@media screen and (max-width: 740px) {
#navigatorList li {
	width: 28.3%;
	margin: 0 2.5% 0.5em 2.5%;
}
}



#navigatorList li img {
	width: 100%;
	vertical-align:bottom;
	margin-bottom: 5px
}

#navigatorList li p {
	display: inline-block;
	padding: 5px 10px;
	font-size: 15px;
	background:
		-webkit-linear-gradient(45deg,  transparent 0, #fff 0),
		-webkit-linear-gradient(135deg, transparent 4px, #fff 0),
		-webkit-linear-gradient(225deg, transparent 0, #fff 0),
		-webkit-linear-gradient(315deg, transparent 4px, #fff 0);
	background:
		-o-linear-gradient(45deg,  transparent 0, #fff 0),
		-o-linear-gradient(135deg, transparent 4px, #fff 0),
		-o-linear-gradient(225deg, transparent 0, #fff 0),
		-o-linear-gradient(315deg, transparent 4px, #fff 0);
	background:
		linear-gradient(45deg,  transparent 0, #fff 0),
		linear-gradient(135deg, transparent 4px, #fff 0),
		linear-gradient(225deg, transparent 0, #fff 0),
		linear-gradient(315deg, transparent 4px, #fff 0);

	background-position: top right, top left, bottom left, bottom right;
	background-size: 60% 60%;
	background-repeat: no-repeat;
}

@media screen and (max-width: 740px) {
#navigatorList li p {
	font-size: calc(100vw / 33);
	padding: 0.4em 0.8em;
}
}


#snsArea {
	clear: both;
	box-sizing: border-box;
	text-align: right;
	padding: 30px 0 0 0;
}

#gigyaShare {
	display: inline-block;
	margin: 0 auto;
}
#gigyaShare > div {
	display: inline-block;
	padding-left: 12px;
}

#gigyaShare > img {
	display: inline-block;
	position: relative;
	margin: 0 !important;
	vertical-align: top;
}

#gigyaShare img { width: auto; }

@media screen and (max-width: 740px) {
#snsArea {
	width: 85%;
	padding: 1.5em 0 0 0;
	margin: 0 auto;
	text-align: center;
}
#gigyaShare { text-align: center; }
#gigyaShare > div { padding-left: 0; }
#gigyaShare > img { margin: 0 0 0.4em 0 !important; }
}



/*******************/
/*#main            */
/*******************/
#main {
	width: 960px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	overflow: hidden;
}
@media screen and (max-width: 740px) {
#main {
	width: 100%;
	padding: 20px 0 0 0;
}
}

#twTL, #jmeTL {
	width: 420px;
	box-sizing: border-box;
	border-radius: 6px;
	border: 1px solid #eee;
	background: #fff;
}

#twTL { float: left; }
#jmeTL {
	float: right;
	background: #fff;
	padding: 0 0 15px 0;
}

@media screen and (max-width: 740px) {
#twTL, #jmeTL {
	width: 87.5%;
	float: none;
	margin: 0 auto;
}
#twTL {
	margin: 4em auto;
}
}



#jmeTL h2 {
	padding: 15px 0 0 20px;
}
@media screen and (max-width: 740px) {
#jmeTL h2 {
	padding: 1.5em 0 0 1.5em;
}
}

#jmeTL h2 img {
	width: 140px;
	height: auto;
}
@media screen and (max-width: 740px) {
#jmeTL h2 img { width: 50%; }
}



#commentCaution {
	padding: 15px 0 0 20px;
	font-size: 12px;
	line-height: 1.5;
}
@media screen and (max-width: 740px) {
#commentCaution {
	padding: 1.5em 1.5em 0 1.5em;
	font-size: 12px;
}
}


#jmeTLBody {
	width: 380px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}

@media screen and (max-width: 740px) {
#jmeTLBody {
	width: 95%;
}

}

#gigyaComments {
    width: auto !important;
}




/*******************/
/*.messageBox      */
/*******************/




#formbox {
	width: 700px;
	background: #fff;
	padding: 40px 0 0 0;
	margin: 30px auto;
	border-radius: 6px;
}


@media screen and (max-width: 740px) {
#formbox {
	width: 95%;
	margin: 1em auto;
}
}

#mailForm {
	width: 600px;
	margin: 0 auto;
}
@media screen and (max-width: 740px) {
#mailForm {
	width: 90%;
	margin: 0 auto;
}
}


#mailForm .read {
	padding: 0 0 2em 0;
	font-size: 16px;
	line-height: 1.5;
}



#mailForm dl {
	padding:0 0 10px 0;
	clear:both;
}

#mailForm dt,
#mailForm dd {
	display:block;
	float:left;
}
@media screen and (max-width: 740px) {
	#mailForm dt,
	#mailForm dd {
		float: none;
	}
}

#mailForm dt {
	width:140px;
	font-weight:bold;
	font-size:12px;
}
@media screen and (max-width: 740px) {
	#mailForm dt {
		width: 90%;
		font-size: 16px;
		padding: 0 0 0.3em 0;
	}
}

#mailForm dd {
	width:450px;
}
@media screen and (max-width: 740px) {
	#mailForm dd {
		width: 92%;
	}
}

#mailForm input.text {
	width:100%;
	font-size:12px;
	background-color:#fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 5px;
	box-sizing: border-box;
}
@media screen and (max-width: 740px) {
	#mailForm input.text {
		font-size: 16px;
}
}

#mailForm input.Short {
	width:50%;
	background-color:#fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 5px;
	box-sizing: border-box;
}

#mailForm textarea {
	width:100%;
	height:80px;
	font-size:14px;
	background-color:#fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 5px;
	box-sizing: border-box;
}

#mailForm h3 {
	color:#cf0010;
	clear:both;
}

#mailForm {
	padding:0 0 40px 0;
}

#mailForm p.agree {
	font-size:14px;
	padding:15px 0;
	line-height: 1.5;

}
@media screen and (max-width: 740px) {
	#mailForm p.agree {
		font-size: 14px;
		margin: 20px 0;
		padding: 0;
	}
}

#mailForm p.regist {
	font-size:10px;
	padding:0 0 15px 0;
}

#mailForm #formBtn {
	text-align:center;
}
@media screen and (max-width: 740px) {
	#mailForm #formBtn {
		width: 100%;
		text-align: center;
	}
}

#mailForm input.submit,
#mailForm input.reset {
	width:150px;
	height:30px;
	border:none;
	cursor:pointer;
}
@media screen and (max-width: 740px) {
	#mailForm input.submit,
	#mailForm input.reset {
		width: 70%;
		height: 50px;
		font-size: 18px;
		-webkit-appearance: none;
		-moz-appearance:none;
	}
}

#mailForm input.submit {
	background:#cf0010;
	color: #fff;
	margin-right: 20px;
	border: 1px solid #333;
}
@media screen and (max-width: 740px) {
	#mailForm input.submit {
		margin: 0 0 20px 0;
	}
}

#mailForm input.reset {
	background:#ccc;
	color: #666;
}

@media screen and (max-width: 740px) {
	#mailForm input,
	#mailForm textarea,
	#mailForm select {
		font-size: 16px;
	}
}



/*******************/
/*Thanks           */
/*******************/

#thanksContainer {
	width: 100%;
	background: 
		url(../images/main_bg.png) no-repeat center top,
		url(../images/footer_bg.png) no-repeat center bottom;
}
@media screen and (max-width: 740px) {
#thanksContainer {
	width: 100%;
	background:
		url(../images/main_bg_sp.png) no-repeat center top,
		url(../images/footer_bg_sp.png) no-repeat center bottom;
	background-size: 100% auto, 100% auto;
}
}

#thanks {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	box-sizing: border-box;
	padding: 20px 0 0 0;
	box-sizing: border-box;
	min-height: calc(100vh - 325px);
}
@media screen and (max-width: 740px) {
#thanks {
	width: 100%;
	padding: 20px 0 0 0;
	min-height: auto;
}
}

#mailForm .thanksRead {
	padding: 70px 0;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}


/*******************/
/*footer           */
/*******************/
footer {
	clear: both;
	width: 960px;
	margin: 0 auto;
	padding: 20px 0 50px 0;
	overflow: hidden;
}
@media screen and (max-width: 740px) {
footer {
	width: 93.75%;
	padding: 2em 0 3em 0;
	margin: 0 auto;
}
}

#homeBtn,#footerLogo { display: inline-block; }
#homeBtn { float: left; }
#footerLogo {
	margin: 16px 0 0 0;
	float: right;
}
#copyRight {
	clear: both;
	font-size: 12px;
	text-align: left;
	padding: 15px 0 0 0;
}

@media screen and (max-width: 740px) {
    /* overrides common styles */
    #commonFooter{
        width: 100%;
        position: static;
    }
    
    #commonFooterInner{
        padding: 15px 0;
        width: 100%;
        background-color: #282828;
        text-align: center;
    }
    #commonFooter li{
        display:inline-block !important;
        float: none;
    }
}

.comment_txt {
	padding: 5px 18px;
	line-height: 1.5;
}