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


/* モーダル設定
---------------------------------------------*/
.modal-window {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
line-height: 1.3;
display: none\9;
}
.modal-window:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.is-active.modal-window {
display: block\9;
}
.modal-window:target {
display: block\9;
}
.modal-window .modal-inner {
position: absolute;
top: 30px;
left: 50%;
z-index: 20;
margin-left: -300px;
width: 600px;
overflow-x: hidden;
border-radius: 5px;
background: #f7f4ef;
}
.modal-window .modal-close {
display: block;
text-indent: -100px;
overflow: hidden;
}
.modal-window .modal-close:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: #000;  
opacity: 0.3;
}
.modal-window .modal-close:after {
content: '\00d7';
position: absolute;
top: 40px;
left: 50%;
z-index: 20;
margin-left: 260px;
padding: 2px 8px;
font-size: 1.2em;
text-decoration: none;
text-indent: 0;
}
.modal-window {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}

/* ポップアップフォーム設定
---------------------------------------------*/
input, button, textarea, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.popupform {
	margin:30px 0;
	font-size:1em;
}
.popupform h2 {
	text-align:center;
	font-size:1.5em;
	letter-spacing:2px;
	margin-bottom:15px;
}
.popupform p {
	margin:0 auto;
	margin-bottom:15px;
	padding:0;
	line-height:1.5;
	width:90%;
}
.popupform table,
.popupform input[type="text"],
.popupform input[type="email"],
.popupform textarea{
	width:280px !important;
	font-size:0.95em !important;
}

.popupform table { 
	border-collapse:collapse;
	line-height:1.5;
	margin:0 auto;
}
.popupform table th {
	font-weight:bold;
	text-align:left;
	padding-bottom:5px;
}
.popupform table td {
	padding-bottom:5px;
}
.popupform input,
.popupform textarea{
	height: 36px;
	line-height: 36px;
	border:0;
	padding:0 8px;
	color:#333;
	background-color:#fff;
	margin-bottom:10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
/*セレクトボックス装飾*/
.popupform .radius{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.popupform .bg_select {
    @include border-radius(5px);
    background: #fff;
    position: relative;
    z-index: 10;
	width:295px;
    overflow: hidden;
	margin-bottom:10px;
}
.popupform select.select_box {
	font-size:0.95em; 
    padding:0 8px;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    width: 310px;
    display: block;
    height: 36px;
	line-height: 36px;
    color: #333;
    cursor: pointer;
    background: none;
    background-image: url(../images/common/select_arrow.png);
    background-position: 255px center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 15;
    vertical-align: middle;
    box-sizing: border-box;
    border: none;
    option {
        color: #333;
    }
    &::-ms-expand {
        display: none;
    }
}
.popupform select.select_box:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #333;
}
/*IE11で表示位置がズレるため修正*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .popupform select.select_box { width: 325px; }
}

/*チェックボックス*/
.checkbox {
  display: none;
}
.checkbox + .checkbox-icon { 
  position: relative;
  vertical-align: middle;
}
.checkbox + .checkbox-icon:before {
  content: "\f0c8";
  font-family: FontAwesome;
  color: #ccc;
  font-size: 22px;
}
.checkbox:checked + .checkbox-icon:before {
  content: "\f14a";
  color: #6b869c;
}

/*送信ボタン装飾*/
.popupform .submitArea{
	text-align:center;
	margin:15px 0;
}
.popupform input[type="submit"]{
	width:200px;
	height:50px;
	line-height:50px;
	text-align:center;
	background-color:#6b869c;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:0 auto;
	font-size:1.1em;
	color:#fff;
	border:none;
	cursor:pointer;
}
.popupform input[type="submit"]:hover{
	background-color:#51697c;
	color:#fff;
}


/* レスポンシブ設定
---------------------------------------------*/
@media screen and ( max-width:600px ) {
	.modal-window .modal-inner {
	margin-left: -160px;
	width: 320px;
	}
	.modal-window .modal-close:after {
	margin-left: 130px;
	}
	.popupform p {
	width:92%;
	font-size:0.9em;
	}
	.popupform input[type="submit"]{
	height:40px;
	line-height:40px;
	}
}