/**/
*{
	box-sizing: border-box;
}
body {
	background: #dbeab9;
}
a{
	color: #808c65;
	transition: all ease 0.7s;
}a:focus, a:hover {
    color: #677151;
    text-decoration: underline;
}
.btn {
    background: #96a96d;
    border-color: #8ea06a;
    color: #ffffff;
    transition: all ease 0.6s;
}section a.btn {
	min-width: 197px;
}.btn:hover,.btn:focus {
	outline: 0;
	opacity: 0.9;
	background: #798858;
	border-color: #5d6946;
}
.btn.orange{
	background: #eeb761;
	border-color: #d8a557;
}

/* form */
:placeholder-shown,::-webkit-input-placeholder{ color: #ccc; font-style: italic;}
:-moz-placeholder,::-moz-placeholder{ color: #ccc; opacity: 1; font-style: italic;}
:-ms-input-placeholder{ color: #ccc; opacity: 1; font-style: italic;}

form {
	max-width: 650px;
	margin-right: auto;
	margin-left: auto;
}
.submitBtn{
	width: 100%;
    max-width: 320px;
    background: #cbd6b4;
    color: white;
    padding: 10px;
}.submitBtn:hover , .submitBtn:focus {
	color: #fff;
}


textarea:focus, input:focus, select:focus , .form-control:focus{
    outline: 0;
    border: 1px solid #c6ccb9;
    box-shadow: 0 0 3px #cbd7b4 !important;
    border-radius: 3px;
}

input.text, textarea, select {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #eee;
    background: #fff;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}select{
	padding-right: 1.5em;
}select::-ms-expand {
	display: none;

}
.selectWrap {
	display: inline-block;
	width: 100%;
	height: 100%;
    position: relative;	
}.selectWrap:after {
	content: '▼';
	position: absolute;
	top: 5px;
	right: 3px;
	color: #ccc;
	padding: 10px;
	font-size: 0.8em;
	pointer-events: none;
}

button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus {
	outline: 0;
	border: 1px solid #eee;
	border: 1px solid #a8b78c;
}


label {
	text-align: left;
    display: inline-block;
    width: 100%;
    padding: 10px 5px 0px 5px;
}.has-error label {
    color: inherit !important;
}.has-error label:before {

}
/* position */

.centeringY{
	width: 98%;
	position: absolute;
	top: 50%;
	left: 1%;
	transform: translateY(-50%);
}

/**/
#app {
    background: url(../img/topcover.jpg) no-repeat top center !important;
    background-size: contain !important;
}
#app>section{
    min-height: 500px;
    background: #fefefe;
    position: relative;
    font-size: 16px;
}#app>section#summary1.only {
	background: #fff;
}

#app>section:nth-child(2n+1) {
    background: #dbeab9;
}#app>section.last {
    background: #fafef0 !important;
}

#app>section h3 {
    margin: 20px auto ;
    font-weight: bold;
}

#app>section > div{
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 10px;
    min-height: 500px;
    position: relative;
}
#app>section:nth-child(2n) > div {
    padding: 90px 10px;
    
}
#app>section>i.secDeco{
	display: block;
    width: 100%;
    position: absolute;
    height: 27px;
    z-index: 10;
}
#app>section>i.topDeco {
    top: -27px;
    left: 0;
    background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #dbeab9 50.5%) no-repeat top left/100% 100%;
}#app>section>i.topDeco2 {
    top: -27px;
    right: 0;
    background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #c5d3a6 50.5%) no-repeat top left/100% 100%;
    z-index: 1;
}

#app>section>i.bottomDeco {
    bottom: -27px;
    left: 0;
    background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #dbeab9 50.5%) no-repeat top left/104% 106%;
}
#app>section>i.bottomDeco2 {
    bottom: -27px;
    right: 0;
    background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #c5d2a8 50.5%) no-repeat top left/100% 100%;
    z-index: 1;
    height: 27px;
}
#app>section>i.topDeco.last{
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #fafef0 50.5%) no-repeat top left/100% 100%;
}

/**/
#app{
	background: rgba(188,202,136,0.40);
}

.navbar-default {
    background: none;
    border: none;
    margin-bottom: 0;
}

.navbar-header{
	background: #dbeab9;
	text-align: center;
	text-align: center;
	padding: 7px 28px 6px;
	border-radius: 0 0 10px 10px;
}

.navbar-nav li {
    background: #42463a;
    color: #eee;
}.navbar-nav li.first{
	border-radius: 5px 0 0 5px;
	padding-left: 15px;
}.navbar-nav li.last{
	border-radius: 0 5px 5px 0;
	padding-right: 15px;
}.navbar-nav li.dropdown.member {
    margin-left: 5px;
    border-radius: 4px;
}.navbar-nav li.dropdown.member>a {
    
}.navbar-nav li.dropdown.member.open>a{
	background: none;
	color: inherit;
}
.navbar-nav li.dropdown.member .dropdown-menu li{
	background: inherit;
    color: #333 !important;
}.navbar-nav li.dropdown.member .dropdown-menu li a{
	color: inherit;
}

.navbar-default .navbar-nav li a {
	color: #ccc;
	padding: 5px 12px;
	font-size: 0.85em;
	transition: all ease 0.7s;
}.navbar-default .navbar-nav li a:focus, .navbar-default .navbar-nav li a:hover {
	color: #eee;
}

.navbar-nav.navbar-right {
    margin-top: 20px;
    margin-right: 0;
}

li.loginBtn , li.registerBtn {
    margin-left: 10px;
    background: none;
    padding: 0 !important;
}li.loginBtn>a , li.registerBtn>a {
	color: white !important;
	background: #df861e;
	margin-top: 1px;
	padding: 3px 10px !important;
	font-size: 0.8em !important;
	transition: all ease 0.5s;
	border: 1px solid #df861e;
} li.registerBtn>a:hover , li.registerBtn>a:focus {
	background: #df861f !important;
	border-color: #d69f64;
}
li.registerBtn {
	margin-left: 10px;
}li.loginBtn>a{
	background: #dfc11e;
	border: 1px solid #dfc11e;
}li.loginBtn>a:hover , li.loginBtn>a:focus {
	background: #dfc11f !important;
	border-color: #ecd450;
}

/* */
.navbar-default .navbar-toggle {
    border-color: #b9c798;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #8e9a70;
}.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #ccdca9;
}
a.navbar-brand {
    margin-left: 0 !important;
    padding: 0;
    float: none;
}

img.logoImg {
    width: 54px;
    
}
.appName{
	font-size: 0.4em;
    display: block;
    margin-top: -4px;
    width: 54px;
    text-align: center;
}
/**/
.fulldiv{
    text-align: center;
    padding-left: 10px !important;
    padding-right: 10px !important;
    position: relative;
}.fulldiv h3 {
    margin: 1em 0 2em;
}.fulldiv h4 {
    max-width: 600px;
    margin: 1em auto; 
}
.fullDivInner {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: 0px;
    transform: translateY(-50%);
    padding-bottom: 17px;
}

.ldiv{
    padding: 10px;
}
.rdiv{
    padding: 10px;
}

/* pagehead */
#pagehead{
    border-bottom: 5px solid #bcc59d;
    position: relative;
    max-width: auto;
    text-align: center;
    min-height: 266px !important;
    background: none !important;
}#pagehead .fulldiv {
    padding: 40px 22px !important;
    min-height: 236px;
    max-width: none;
    
}
#pagehead .fulldiv * {
    font-weight: bold;
    color: white;
    text-shadow: 0 0px 17px #0e1303; 
        text-shadow: 0px 1px 6px #0e1303;   
}

.moreBtnTopWrap{
    padding: 0;
    margin: 0;
    position: absolute;
    width: 60px;
    height: 60px;
    overflow: hidden;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,50%);
    border-radius: 50%;
    text-align: center;
    z-index: 100;
}.moreBtnTopWrap>a{
    width: 100%;
    height: 100%;
    background: #bcc59d;
    transform: rotate(-90deg);
    color: #dbeab9;
    display: block;
    text-align: center;
    padding-right: 15px;
    cursor: pointer;
}.moreBtnTopWrap>a:hover{
    text-decoration: none;

}
.moreBtnTopWrap>a>i{
    font-style: normal;
    display: inline-block;
    position: relative;
    left: -2px;
    top: 8px;
    font-size: 30px;
}


/**/

footer{
	margin-top: 20px;
	padding: 20px 10px 5px;
	background: #dbeab9;
	border-top: 3px solid #80905d;
}
footer li {
	list-style: none;
}
footer .row{
	max-width: 970px;
	margin: 0 auto;
}
footer .row>div{
	
}
footer .row .company{
	
}
footer .row .links1{
	
}
footer .row .links2{
	
}

.footLogo h6{
	margin: 4px auto 6px;
}
.footLogoImg{

}
footer .row>div>ul{
	text-align: left;
    border-left: 1px solid #c8d6a8;
    min-height: 11em;
    padding: 10px 10px 10px 19px;
}

.copyright {
    font-size: 0.8em;
    margin-top: 17px;
}

/* overlay */
.overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  background: rgba(242, 247, 230, 0.41);
}
.overlay>.fa-spinner {
    display: inline-block;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.5em;
    color: #d0d6d8;
}

/****************/
@media only screen and (min-width : 993px) {
	footer{
		margin-top: 95px;
		padding-top: 44px;
		/* position: fixed; */
		/* width: 100%; */
		/* left:  0; */
		/* bottom: 0; */
	}

	#app {
		background-size: contain ;
	}
}


@media (min-width: 768px){}
	.navbar-header {
	     box-shadow: none; 
	}
}



/*==========  非モバイル・ファーストの場合  ==========*/
 
/* Lサイズ、ワイドスクリーン : Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

body #app {
    background-size: 100% !important;
}

}



/* Mサイズ、デスクトップ : Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

body #app {
	background-size: 112% !important;
}
.container {
    max-width: 763px !important;
}


}
 
/* Sサイズ、タブレット : Small Devices, Tablets */
@media only screen and (max-width : 767px) {

	body #app {
	    background-size: 100% !important;
	}

	h1 { font-size: 1.35em; }
	h2 { font-size: 1.25em; }
	h3 { font-size: 1.15em; }

	/**/

	#app>section>i.topDeco {
	    /* height: 12px; */
	    /* top: -12px; */
	}
	#app>section>i.bottomDeco {
	    /* height: 12px; */
	    /* bottom: -12px; */
	}
	/**/
	#app-navbar-collapse {
	    position: absolute;
	    width: 100%;
	}
	.nav.navbar-nav{
		display: none;
	}
	.nav.navbar-nav.navbar-right {
		display: block;
		margin: 0 -15px;
	}
	.navbar-header{
		padding: 10px 3px 10px 17px;
		border-radius: 0;
	}

	.navbar-nav li {
	}.navbar-nav li.first{
		border-radius: 0;
		padding-left: 0;
	}.navbar-nav li.last{
		border-radius: 0;
	}
	.navbar-nav li.dropdown.member {
	    margin-left: 0px;
	    border-radius: 0px;
	}.navbar-nav li.dropdown.member>a {
	    
	}.navbar-nav li.dropdown.member.open>a{
		background: inherit;
		color: inherit;
	}
	.navbar-nav li.dropdown.member .dropdown-menu li{
		background: #555;
    	color: #ccc !important;
	}.navbar-nav li.dropdown.member .dropdown-menu li a{
		color: inherit;
	}
	img.logoImg {
	    margin-top: -2px;
	    margin-left: 4.5px;
	    width: 45px;
	}
	.appName {
		margin-top: -4px;
		position: absolute;
	}
	.navbar-nav > li > a {
		color: #fff !important;
		padding: 16px 10px !important;
	}
	li.loginBtn , li.registerBtn {
	    margin-left: 0px;
	    text-align: left;
	}li.loginBtn>a , li.registerBtn>a {
	    display: inline-block;
	    margin: 0;
	    border-radius: 0;
	    text-align: left;
	    border: none;
	    width: 100%;
	    
	    background: #4c5044;
	    border-top: 1px solid #41443a;
	} li.registerBtn>a:hover , li.registerBtn>a:focus {
		
	}
	li.registerBtn {
		
	}li.loginBtn>a{
		
	}li.loginBtn>a:hover , li.loginBtn>a:focus {
		
	}

	/**/
	body #pagehead {
		background: url(../img/topcover.jpg) no-repeat top center !important;
	    background-size: 100% !important;
	    min-height: 230px !important;
	}

	#pagehead .fulldiv{
		background: rgba(115,142,83,0.70);
	    min-height: 230px !important;
	}
	.fullDivInner {
		margin-top: -6px;
	    background: none;
	    padding: 0px 10px;
	}
	.moreBtnTopWrap {
		width: 44px;
		height: 44px;
		bottom:-7px;
	}.moreBtnTopWrap>a>i{
		left: -3px;
    	top: -1px;
		
	}
	/* footer */
	footer .row>div>ul {
	    text-align: center;
	    border: none;
	    background: #e4f1c8;
	    margin: 4px 0;
	    padding: 10px 5px;
	    min-height: 67px;
	    line-height: 32px;
	}
	
	/***/
	#page-privacypolicy #pagehead, #page-agreement #pagehead{
		padding-top:0;
	}

}
 
/* XSサイズ : Extra Small Devices, Phones */  
@media only screen and (max-width : 480px) {
 	body #pagehead {
	    background-size: 150% !important;
	    
	}
	.navbar {
		margin-bottom: 0 !important;
	}

}
 
/* カスタム, iPhone Retinaディスプレイ */ 
@media only screen and (max-width : 320px) {
    body #pagehead {
	    background-size: 150% !important;
	}
}


/***** 効果 *****/
.bgBlur:before{
	content: '';
  background: inherit;/*.bgImageで設定した背景画像を継承する*/
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;/*重なり順序を一番下にしておく*/
}
