@charset "utf-8";

/***************************************************************************
Media Queries
****************************************************************************/

/*iPad (mini含む) w768px 1024px*/
@media only screen and (max-width: 768px) {
}
/*iPad 以下 w767px*/
@media only screen and (max-width: 767px) {
}
/*iPhone4			w320px x h480px*/
/*iPhone5			w320px x h568px*/
/*iPhone6/7			w375px x h667px*/
/*iPhone6/7(Plus)	w414px x h736px*/
@media only screen and (max-width: 414px) {
}

/***************************************************************************
共通
****************************************************************************/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;				/*スマートフォンの横向き時に文字が大きくなるのを防ぐ none指定は避ける*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);	/*タップしたときに反転を防ぐ*/
}
.sp {
	display: none;
}
.main-form input,.main-form select{
    vertical-align:middle;
}
.main-form input[type*="text"],.main-form textarea {
	-webkit-appearance: none;			/*iPhoneでオリジナルのinput*/
	border-radius: 0px;
}
.main-form input[type="radio"] {
	margin-right: 5px;
}


/***************************************************************************
ヘッダー
****************************************************************************/

#GlobalHeader div.global-header-inline {
	height: 57px;
	overflow: hidden;
	width: auto;
	max-width: 960px;
}
@media only screen and (max-width: 1000px) {
#GlobalHeader div.global-header-inline {
	max-width: 96%;
}
}
@media only screen and (max-width: 414px) {
#GlobalHeader p.logo {
	width: 50%;
	padding-top: 10px;
}
#GlobalHeader p.logo img {
	width: 100%;
	height: auto;
}
}

/***************************************************************************
フォントサイズ コントロール
****************************************************************************/

#GlobalHeader dl.font{
	top: 10px;
	right: 0px;
	border-left: none;
}

/***************************************************************************
ページCSS
****************************************************************************/

#contact {
	background-color: #fff;
}
#main {
	width: auto;
	max-width: 960px;
}
@media only screen and (max-width: 767px) {
#main {
	padding-top: 3vmin;
}
}

/***************************************************************************
タイトル
****************************************************************************/

#main h2 {
	text-align: center;
}
@media only screen and (max-width: 767px) {
#main h2 {
	font-weight: bold;
	font-size: 17px;
}
}

/***************************************************************************
flow
****************************************************************************/

#main ol.flow {
	display: table;
	max-width: 625px;
	margin: 0px auto 3vmin auto;
}
#main ol.flow li {
	width: 28.8%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#main ol.flow li img {
	max-width: 100%;
	height: auto;
}
#main ol.flow .step_arrow {
	width: 6.8% !important;
}
p.title_text {
	margin-bottom: 3vmin;
}
@media only screen and (max-width: 1000px) {
p.title_text {
	padding: 0px 2% 0px 2%;
}
}
@media only screen and (max-width: 660px) {
#main ol.flow {
	max-width: 96%;
}
}

/***************************************************************************
table
****************************************************************************/

.main-form {
	margin: 0px auto 4vmin auto;
}
.main-form th,.main-form td {
	padding: 10px 15px 10px 15px;
}
.main-form th {
	width: 200px;
	color: #FFFFFF;
	background-color: #0061BF;
	border-bottom: 1px solid #FFFFFF;
}
.main-form td {
	border-bottom: 1px solid #CCCCCC;
}
.main-form ul.float {
	overflow: hidden;
}
.main-form .float li {
	float: left;
	margin-right: 10px;
	padding: 5px 0px 5px 0px;
white-space: nowrap;
}
.main-form .name .subject {
	display: inline-block;
	width: 3em;
	margin-left: 1em;
}
.main-form .name .subject:first-child {
	margin-left: 0em;
}
.main-form .address .subject {
	display: inline-block;
	width: 11em;
}

@media only screen and (max-width: 1000px) {
.main-form {
	max-width: 96%;
}
}
@media only screen and (max-width: 865px) {
.main-form th,.main-form td {
	display: block;
	width: 100%;
}
.main-form td {
	padding: 20px 15px 20px 15px;
}
}
@media only screen and (max-width: 768px) {
.main-form th {
	font-weight: bold;
}
.main-form .subject {
	font-weight: bold;
}
}
@media only screen and (max-width: 767px) {
.main-form .float li {
	float: none;
}
}
@media only screen and (max-width: 640px) {
.birthday .sp {
	display: block;
}
.hope_time .sp {
	display: block;
}
.main-form .address .subject {
	width: 100%;
	display: block;
	margin-bottom: 5px;
}
.main-form .e_mail .sp {
	display: block;
}
}
@media only screen and (max-width: 530px) {
.main-form .name .subject {
	margin-left: 0em;
}
.main-form .name .sp {
	display: block;
}
}

.main-form .w_s {
	width: 80px;
}
.main-form .w_m {
	width: 200px;
}
.main-form .w_l {
	width: 350px;
}
.main-form textarea {
	width: 100% !important;
}
@media only screen and (max-width: 640px) {
.main-form .w_l {
	width: 100%;
}
}

/***************************************************************************
privacy_txt
****************************************************************************/

.privacy_txt {
	text-align: center;
	margin-bottom: 3vmin;
}

/***************************************************************************
submit
****************************************************************************/

.submit {
	text-align: center;
	margin-bottom: 5vmin;
}
.submit input {
	display: inline-block;
	cursor: pointer;
	-webkit-appearance: none;			/*iPhoneでオリジナルのinput*/
	padding: 10px 0px 10px 0px;
	border-radius: 5px;
	font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	font-size: 16px;
	letter-spacing: 0.1em;
	width: 240px;
}
.submit input:hover {
	opacity: 0.9;
}
.submit input[type*="submit"] {
	background-color: #3A72CF;
	color: #FFFFFF;
	border: 1px solid #386FCC;
}
.submit input[type*="button"] {
	background-color: #D4D0C8;
	border: 1px solid #BBBBB9;
}
@media only screen and (max-width: 768px) {
.submit input {
	font-weight: bold;
}
}
@media only screen and (max-width: 490px) {
.submit input {
	margin-top: 5vmin;
}
.submit input:first-child {
	margin-top: 0vmin;
}
}

/***************************************************************************
thanks
****************************************************************************/

.thanks_txt {
	padding: 15px 3% 30px 3%;
}
.thanks_ttl {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
}

/***************************************************************************
フッター
****************************************************************************/

#Copy address {
	width: auto;
	max-width: 960px;
}
#Copy address img {
	vertical-align: middle;
}
@media only screen and (max-width: 768px) {
#Copy address {
	text-align: center;
}
}