@charset "utf-8";

html, body {
	margin: 0;
	padding: 0;
	background: #fff;
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #555;
	letter-spacing: 1px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h2 {
  color: #555;
  border-bottom: dashed 2px #555;
/*
  color: #6594e0;
  border-bottom: dashed 2px #6594e0;
*/
        font-size: 20px;
    font-weight: 600;
      width:80%;
  margin: 0 auto 30px;
}

/*
h2 {
      font-size: 20px;
    font-weight: 600;
 position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  width:70%;
  margin: 0 auto 30px;
}

h2:before, h2:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}

h2:before {
  left: 7px;
}

h2:after {
  right: 7px;
}
*/

#wrapper {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background: #73b5e4;
}

#main {
	margin: 0 auto;
	width: 980px;
	height: 100%;
	background: #fff;
}

#main-img {
	margin: 30px auto 50px;
	width: 700px;
}

#tokuten {
	margin: 0 auto 80px;
	padding: 60px 50px 10px;
	width: 800px;
	background: rgba(255,250,152,0.6);
	border-radius: 28px;
}

.tokuten-ttl {
	margin: auto auto 10px;
	padding: 0 0 0 10px;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: -.6px;
}

.tokuten-txt {
	margin: 0 auto auto;
	padding: 0 20px;
	font-size: 16px;
	font-weight: bold;
}

.tokuten-caution {
	margin: 10px 0 0;
	padding: 0 20px;
	font-size: 12px;
	font-weight: bold;
	color: #666;
}

#tokuten-a, #tokuten-b, #tokuten-c {
	margin: 0 auto 60px;
	color: #333;
}

#tokuten-a-ttl {border-left: 10px solid #e62f82; color: #e62f82;}
#tokuten-b-ttl {border-left: 10px solid #108ccf; color: #108ccf;}
#tokuten-c-ttl {border-left: 10px solid #33b09e; color: #33b09e;}

.tokuten-btn {
	margin: 20px auto 0;
	padding: 20px 30px;
	width: 300px;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

#tokuten-a-btn {
	background: #e62f82;
	box-shadow: 2px 2px 0 1px #b3155d;
	-moz-box-shadow: 2px 2px 0 1px #b3155d;
	-webkit-box-shadow: 2px 2px 0 1px #b3155d;
}

#pre-tokuten-b-btn {
	display: block;
	background: #108ccf;
	box-shadow: 2px 2px 0 1px #035c8c;
	-moz-box-shadow: 2px 2px 0 1px #035c8c;
	-webkit-box-shadow: 2px 2px 0 1px #035c8c;
}

#pre-tokuten-b-btn {
	color: #fff;
}

#pre-tokuten-b-btn:hover {
	text-decoration: none;
}

#tokuten-b-btn {
	background: #999;
	color: #ccc;
	cursor: default !important;
	/*background: #108ccf;
	box-shadow: 2px 2px 0 1px #035c8c;
	-moz-box-shadow: 2px 2px 0 1px #035c8c;
	-webkit-box-shadow: 2px 2px 0 1px #035c8c;*/
}

#tokuten-c-btn {
	background: #33b09e;
	box-shadow: 2px 2px 0 1px #197366;
	-moz-box-shadow: 2px 2px 0 1px #197366;
	-webkit-box-shadow: 2px 2px 0 1px #197366;
}

#caution {
	margin: 0 auto;
	width: 600px;
	/*width: 840px;*/
        text-align: center;
}

#caution p {
	margin: 5px 0;
	font-size: 14px;
	font-weight: bold;
}

#caution p:nth-child(9), #caution p:nth-child(25) {
	margin: 0 0 30px;
}

.caution-ttl {
	margin: 0 0 10px !important;
	font-size: 16px !important;
}

#submit-btn {
	margin: 10px auto 20px;
	padding: 16px 0;
	width: 360px;
	border: none;
	font-size: 18px;
	font-weight: 600;
	outline: none;
	cursor: pointer;
}


/*--------------------
btn
--------------------*/
.btn-0 {
	display: block;
	margin: 0 auto 10px;
	padding: 15px 0;
	width: 300px;
	background: #f53f82;
/*
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
*/
	-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
	font-size: 16px;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
}

.btn-0:hover {
	color: #fff;
	text-decoration: none;
	background: -moz-linear-gradient( center top, #ff7ead 5%, #f53f82 100% );
	background: -ms-linear-gradient( top, #ff7ead 5%, #f53f82 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7ead', endColorstr='#f53f82');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff7ead), color-stop(100%,#f53f82 ) );
	background-color: #ff7ead;
}

.btn-1 {
	display: block;
	margin: 0 auto 10px;
	padding: 15px 0;
	width: 300px;
	background: #F0F0F0;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
	font-size: 16px;
	color: #111;
	text-align: center;
	letter-spacing: 1px;
}

.btn-1:hover {
	color: #565656;
	text-decoration: none;
	background: -moz-linear-gradient( center top, #EEE 5%, #DFDFDF 100% );
	background: -ms-linear-gradient( top, #EEE 5%, #DFDFDF 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEE', endColorstr='#DFDFDF');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #EEE), color-stop(100%,#DFDFDF ) );
	background-color: #D5D5D5;
}

a{
	color: #555;
	/*color: #f04885;*/
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.app {
}

.app .app-inner {
    padding:2% 0 5%;
    text-align:center;
}

.app .app-inner p {
    font-weight:600;
}

.app .app-inner ul {
    list-style:none;
}

.app .app-inner ul li {
    display:inline-block;
    width:38%;
    marign:2%;
    padding:1%;
}

.app .app-inner ul li img {
    width:100%;
}

footer {
    background-color:#ccc;
    padding:8px 0;
    color:#000;
    text-align:center;
    width:100%;
    font-size:0.9em;
}

.menu {
  padding-top:20px;
}

.menu-box {
  padding:10px 0;
}

.menu-btn {
  position: relative;
  display: inline-block;
  text-decoration: none;
  width: 90%;
}

.btn-flat-logo {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 0em;
  text-decoration: none;
  color: #FFF;
  background: #00bcd4;
  transition: .4s;
  /*width: 360px;*/
   width: 90%;
    font-size: 1.2em;
}

.btn-flat-logo:hover {
  background: #1ec7bb;
}

.btn-map-to-top {
    width: 90%;
    margin: 10px auto 30px;
    display: block;
    text-align: center;
}

.pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}

.pagetop img {
    width:100px;
}

.maptop {
    position: fixed;
    bottom: 20px;
    left: 20px;
    cursor: pointer;
}

.maptop img {
    width:100px;
}

.mt10 { margin-top:10px; }
.mt20 { margin-top:20px; }
.mt30 { margin-top:30px; }
.mt40 { margin-top:40px; }


/****************************************
 *
 *
 *
****************************************/

.start {
	/*background: #FFF;*/
        background-color: #f9f8f4;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 100%;
	/*width: 280px;*/
}
.start img {
        width: 100%;
}

/*--------------------------------------------------

@max-width 768px

--------------------------------------------------*/
@media screen and (max-width: 768px) {

	html, body {
		line-height: 1.7;
	}
	
	#wrapper {
		width: 100%;
		margin: 0 auto;
		background: #fff;
	}
	
	header {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	header a img {
		width: 100%;
		vertical-align: bottom;
	}
	
	#main {
		margin: 0 auto;
		width: 100%;
	}
	
	#main-img {
		margin: 5% auto;
		width: 90%;
	}
	
	#tokuten {
		margin: 0 auto 12%;
		padding: 9% 6% 1%;
		width: 90%;
    	border-radius: 8px;
		box-sizing: border-box;
	}
	
	#tokuten-a, #tokuten-b, #tokuten-c {
		margin: 0 auto 14%;
	}
	
	.tokuten-ttl {
		font-size: 18px;
		line-height: 1.4em;
	}
	
	.tokuten-txt {
		font-size: 14px;
	}
	
	.tokuten-btn {
		margin: 20px auto 0;
		padding: 5% 7%;
		width: 100%;
		border-radius: 8px;
		box-sizing: border-box;
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		text-align: center;
		cursor: pointer;
	}
	
	#pre-tokuten-b-btn {
		display: block;
		background: #108ccf;
		box-shadow: 2px 2px 0 1px #035c8c;
		-moz-box-shadow: 2px 2px 0 1px #035c8c;
		-webkit-box-shadow: 2px 2px 0 1px #035c8c;
	}
	
	#caution {
		margin: 10% auto 0;
		width: 90%;
	}
	
	#caution p {
		margin: 0;
		font-size: 12px;
		font-weight: bold;
	}
	
	#caution p:nth-child(9), #caution p:nth-child(25) {
		margin: 0 0 30px;
	}
	
	.caution-ttl {
		margin: 0 0 1% !important;
		font-size: 14px !important;
	}

        .caution-ttl a {
                color: #f04885;
        }
	
	
	/*------------------
	@form
	-------------------*/
	#form-container {
		width: 100%;
	}
	
	.form-elem-block {
		width: 92%;
		padding: 0 4% 5px;
	}
	
	.txt {
		padding: 0;
		width: 100%;
		text-align: left;
		/* font-weight: normal; */
		float: none;
		font-size: 16px;
	}
	
	.txt2 {
		text-align: left;
		/* font-weight: normal; */
		float: none;
		padding: 0;
		width: 100%;
		font-size: 15px;
	}
	
	.formtype-1 {
		margin: 0 0 10px;
	}
	
	.input-form {
		width: 92%;
		padding: 10px 4%;
	}
	
	.formtype-2 {
		padding: 5px 0 15px;
	}
	
	
	/*------------------
	@footer
	-------------------*/
	#footer{
		width: 60%;
		padding: 10px 5%;
		margin:0 auto;
	}
	
	.txt-block{
		width:90%;
		margin:0 auto;
		padding:10px 0;
	}
	
	.btn-0{
		padding:12px;
		width:85%;
		letter-spacing:0;
		color: #FFFFFF;
		font-size: 16px;
		display: block;
		margin: 0 auto 10px;
		text-align: center;
		background: #f53f82;
/*
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		-khtml-border-radius: 6px;
*/
		-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
		-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
		box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
	}
	
	.btn-1 {
		width: 90%;
		padding: 15px 0;
		font-size: 14px;
	}
	
	#submit-btn {
		margin: 10px auto;
		width: 90%;
		padding: 12px 5%;
		font-size: 18px;
		outline: none;
		cursor: pointer;
		color: #ffffff;
		letter-spacing: 1px;
		text-decoration: none;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-weight: 600;
		background: -moz-linear-gradient( center top, #f53f82 5%, #f53f82 100% );
		background: -ms-linear-gradient( top, #f53f82 5%, #f53f82 100% );
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f53f82', endColorstr='#f53f82');
		background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #f53f82), color-stop(100%, #f53f82) );
		background-color: #f53f82;
		text-shadow: 1px 1px 0px #A5000D;
		border: 1px solid #f53f82;
/*
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		-khtml-border-radius: 6px;
*/
	}
	
	span.vanadium-invalid {
		float: none;
		margin: 0 0 16px;
		font-size: 12px;
		line-height: 1.3;
	}

}