@charset "utf-8";

/*font-size: 14px;
 *font: x-small;
	line-height: 1.9;
	color: #666;*/


/*common上書き
------------------------------------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
#contents { padding-top: 10px;}
}


/*contnts
------------------------------------------------------------------------------------------------------------------------------------------------------ */
	h2.m-blue { display:block; width:100%; min-height:auto; margin:0 0 20px;	padding:5px 20px; background:url("http://purifier.takagi.co.jp/member/img/bg_blue2.gif"); text-align:left; font-weight:normal;}
	h3 { margin-bottom: 10px; border-bottom: solid 1px #666666;}
	h3 span { display: inline-block; margin-bottom: 5px; padding:3px 5px 1px; border-left: solid 3px #666666; color: #000; line-height: 1; font-weight: bold; font-size: 16px;}

@media only screen and (max-width: 767px) {
	h3 span { font-size: 14px;}
	h3 img { width: auto; height: 20px;}
}


/* Form
------------------------------------------------------------------------------------------------------------------------------------------------------ */
#FormArea01,
#FormArea02,
#FormArea03,
#FormArea04 { margin-top:20px;}

table.Style01 { width: 100%;	margin:5px 0 20px; border:#ccc 1px solid; line-height: 1.8;}
table.Style01 th { width:158px; padding:10px; border:#ccc 1px solid; background-color:#e7e9ec; text-align: left; font-size:93%;}
table.Style01 td { padding:10px; border:#ccc 1px solid; text-align: left;}
table.Style01.Form th { vertical-align:top;}
table.Style01 span.date { font-weight:bold;}
table.Style01 label { cursor:pointer;}

.Lead a { text-decoration: underline; color: #2651a8;}
span.requier { padding-left:10px; color:#c00;}
.nextArea { margin-top:1px; text-align:center;}
a.InlineImg { display: inline-block; margin-left: 7px; padding: 5px 10px 3px; background: #2651a8; border-radius: 5px; color: #fff; font-size: 12px;}

#name01,
#name02,
#kana01,
#kana02,
#name01_2,
#name02_2,
#kana01_2,
#kana02_2{ width:85px; ime-mode:active;}

#tel01,
#tel02,
#tel03,
#mob01,
#mob02,
#mob03,
#tel01_2,
#tel02_2,
#tel03_2,
#mob01_2,
#mob02_2,
#mob03_2{ width:85px; ime-mode:disabled;}

.ZipLineWrap {	margin-bottom: 5px;}
.ZipLineWrap .ZipLine { float:left;}
.ZipLineWrap #zip01,
.ZipLineWrap #zip01_2 { width:53px; ime-mode:disabled;}
.ZipLineWrap #zip02,
.ZipLineWrap #zip02_2 { width:75px; ime-mode:disabled;}

#add01,
#add02,
#add03,
#add01-2,
#add02-2,
#add03-2,
#company,
#company_kana{ width:455px; ime-mode:active;}

#mail,
#mail_r,
#mail_2,
#mail_r_2,
#number { width:235px; ime-mode:disabled;}

#msg { width:500px;}

.FormAgree { margin-top: 15px; text-align:center;}

@media only screen and (max-width: 767px) {
	table.Style01 th { width:30%;}
	
	.nextArea { margin:0 0 20px; text-align:center;}
	.nextArea img { width: 50%; height: auto;}
	.ex { font-size: 11px;}
	a.InlineImg { margin: 5px 0 0;}

	#name01,
	#name02,
	#kana01,
	#kana02,
	#name01_2,
	#name02_2,
	#kana01_2,
	#kana02_2{ width:35%; border: solid 1px #ccc; ime-mode:active;}

	#tel01,
	#tel02,
	#tel03,
	#mob01,
	#mob02,
	#mob03,
	#tel01_2,
	#tel02_2,
	#tel03_2,
	#mob01_2,
	#mob02_2,
	#mob03_2{ width:20%; border: solid 1px #ccc; ime-mode:disabled;}

	#zip01,
	#zip01_2 { width:20%; border: solid 1px #ccc; ime-mode:disabled;}
	#zip02,
	#zip02_2 { width:30%; border: solid 1px #ccc; ime-mode:disabled;}
	
	#add01,
	#add02,
	#add03,
	#add01-2,
	#add02-2,
	#add03-2,
	#company,
	#company_kana{ width:100%; border: solid 1px #ccc; ime-mode:active;}

	#mail,
	#mail_r,
	#mail_2,
	#mail_r_2,
	#number { width:100%; border: solid 1px #ccc; ime-mode:disabled;}

	#prefecture { border: solid 1px #ccc;}
	
	#msg { width:100%; border: solid 1px #ccc;}
}


/* FormArea02
------------------------------------------------------------------------------------------------------------------------------------------------------ */
#FormArea02 a { text-decoration: underline; color: #2651a8;}


/* FormArea04
------------------------------------------------------------------------------------------------------------------------------------------------------ */
#FormArea04 .Lead { text-align: center;}
#FormArea04 a { text-decoration: underline; color: #2651a8;}


/* contBtn
------------------------------------------------------------------------------------------------------------------------------------------------------ */
.contBtn { width: 390px; margin: 20px auto 0;}
.contBtn .FormBtn {	float: left;}
.contBtn .contInput {	float: right;}

@media only screen and (max-width: 767px) {
	.contBtn { width: 100%; margin: 10px auto 0;}
	.contBtn .FormBtn { width: 49%;}
	.contBtn .FormBtn input { width:100%; height: auto;}
	.contBtn .contInput { width:49%; height: auto;}
	.contBtn .contInput input { width:100%; height: auto;}
}


/* Thanks
------------------------------------------------------------------------------------------------------------------------------------------------------ */
#Thanks { margin:20px 0 150px;}


/* complete
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.comp {	padding: 100px 0;}
.compTxt {	text-align: center;	font-size:30px;}
.compMess { text-align: center;}
.compMessBtn {	display:block;	width: 30%;	margin:50px auto 0;	background:#00a0c9;	border-radius:5px;}
.compMessBtn a {	display:block;	text-align: center;	padding:15px 0;	text-decoration:none;	color:#fff;	font-weight: bold;}

@media only screen and (max-width: 767px) {
.comp {	padding:0;}
.compTxt {	line-height: 1.3;}
.compMessBtn {	width: 80%;	margin:20px auto 0;}
}


/*mordal
====================================================================================================*/
#Set_c { background: #fff;}
#Set_c .cstmrNmbr { border: solid 4px #F00; padding: 15px; margin:0 20px 20px;	position:relative;	font-weight: bold;	font-size: 15px;}
#Set_c .m-Cont .ph {	text-align: center;}
#Set_c .m-Cont img {	border: solid 1px #E5E5E5;}


/*

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

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{background:url(../../img/common/add_common/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:25px; height:25px; position:absolute; top:-25px; background:url(/img/common/add_common/controls.png) no-repeat 0 0;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}





/*ここからstyle.css*/
.btn_area { margin-top: 30px; text-align: center;}
.btn_area p { width: 300px; margin: 0 auto; padding: 0; border: 1px solid #4773B4; border-radius: 3.3rem; }
.btn_area p a { display: block; text-align: center; padding: 15px 5%; font-size: 16px; color: #4773B4; text-decoration: none; }
/* .btn_area p a span { display: block; background: url(../../img/common/icon_arrow06.png) right 45% no-repeat; } */
.btn_area p a:hover { color: #fff; background: #00a0c9; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;  border-radius: 3.3rem; }
/* .btn_area p a:hover span { background: url(../../img/common/icon_arrow06_wht.png) right 45% no-repeat; } */

.bg-color { background-color: #e7e9ec; width:50%; margin:19px auto;font-size:1.4rem;text-align: center;}
.p-mg {margin:2.5rem 0;font-size:1rem;}
.rbox {color:black; margin-top: 15px; padding: 10px; border-radius: 10px;}
.rbox .rbox-text{font-size: 1.7rem;}
.r-box.rbox-text-2{font-size: 1.7rem;}
span.img{width:50%;}

@media only screen and (max-width: 767px) {
/* .ttl img { width: 31%; height: auto; } */
.btn_area { width: 50%;margin: 15px auto;}
.btn_area p { width: 100%; }
.btn_area p a { padding: 10px 5%; font-size: 12px; }
.rbox .rbox-text{font-size: 1rem;}
.r-box.rbox-text-2{font-size: 0.8rem;}
}