/* -----------------------------------------------------------------------------
共通
----------------------------------------------------------------------------- */
@import "reset.css";

html {
    min-height: 100%;
}
body {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	font-style: normal;
	line-height:1.6;
	background:url(/images/common/bg.jpg) center top;
	background-size:100%;
	color:#333;
	-webkit-text-size-adjust: 100%;
}
a {
	text-decoration:none;
	color:#333;
}
a:hover {
	text-decoration:underline;
}
img {
	vertical-align:bottom;
}
/* ------------------------------------- clearfix
*/
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
.clr {
  clear: both;
}


/* -----------------------------------------------------------------------------
ヘッダー
----------------------------------------------------------------------------- */
header {
	background-color:#fff;
	padding:0px 20px;
}
.headerInner {
	width:940px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}
header h1 {
	width:142px;
	padding:22px 0;
}
header h1 img{
	width:100%
}
header nav {
}
header nav a {
	color:#333;
	text-decoration:none;
}
header nav a:hover {
	text-decoration:none;
}
header nav a span {
	display:block;
}


.localNav {
	position:absolute;
	top:30px;
	right:0px;
	font-weight:bold;
	font-size:0.75rem;
}
.localNav li{
	float:left;
	margin-left:2em;
}



/* -----------------------------------------------------------------------------
フッタ
----------------------------------------------------------------------------- */
footer {
	background:url(/images/common/bg_footer.png) center bottom repeat-x;
	padding-top:20px;
}
.address {
	margin-bottom:70px;
	text-align:center;
}
.address dl{
	display:flex;
	justify-content:center;
	align-items:center;
}
.address dt,
.address dd{
}
.address dt {
	font-size:1.43rem;
	margin-right:1em;
	white-space:nowrap;
	line-height:1.2;
}
.address dt small,
.address dd{
	font-size:0.8125rem;
	letter-spacing:0;
}
.address dd {
	text-align:left;
}
.footerEmail img {
	height:1em;
	vertical-align:middle;
}
.copy{
	font-size:0.8125rem;
	padding-bottom:1.5em;
	text-align:center;
	color:#fff;
}



/* -----------------------------------------------------------------------------
コンテンツ
----------------------------------------------------------------------------- */




/* -----------------------------------------------------------------------------
CONTACT
----------------------------------------------------------------------------- */
.contact {
	background-color:#c18842;
	font-size:0.875rem;
	color:#fff;
	padding-bottom:10px;
}
.contact .sectionHeader {
	width:800px;
	margin-left:auto;
	margin-right:auto;
}
.contact .sectionHeader h1 {
	background:url(/images/common/hr_fatline.png) center 80% repeat-x;
}
.contact .sectionHeader h1 img {
	border-left:solid 1.5rem #c18842;
	border-right:solid 1.5rem #c18842;
	background-color: #c18842;
}
.contact .sectionBody {
	width:800px;
	margin:auto;
}
.contact form {
	margin-bottom:2rem;
}
.contact form dl {
	display:table;
	margin-bottom:1em;
	width:100%;
}
.contact form dt ,
.contact form dd {
	display:table-cell;
	vertical-align:top;
}
.contact form dt {
	width:12em;
	padding:0.5em 0;
}
.contact form dt .optional,
.contact form dt .required{
	display:none;
}
.contact form .error_blank ,
.contact form .error_format {
	color:#fee;
}
.contact input[type="text"],
.contact input[type="tel"],
.contact input[type="email"],
.contact textarea {
	width:100%;
	width:calc(100% - 0.5em);
	border:none;
	background-color:#fff;
	padding:0.5em;
	font-size:0.875rem;
	margin-bottom:0.3em;
}
.contact input#postal {
	width:33%;
}
#form_submit {
	text-align:center;
	margin-top:2em;
}
#form_submit input[type="button"] {
	color:#333;
	background-color:#fff;
	border:none;
	line-height:1;
	padding:1em 0em;
	width:7em;
}
.contactTelephone {
	border:solid 2px #fff;
	padding:1rem;
	line-height:1;
	letter-spacing:0em;
	font-weight:bold;
}
.contactTelephone dl{
	display:table;
}
.contactTelephone dt,
.contactTelephone dd{
	display:table-cell;
	vertical-align:middle;
}
.contactTelephone dt{
	font-size:2.0rem;
	padding-right:1rem;
	border-right:solid 2px #fff;
	white-space:nowrap;
}
.contactTelephone dd{
	font-size:2.375rem;
	padding-left:1rem;
}
.contactTelephone dd span{
	font-size:1.125rem;
	display:inline-block;
	padding-left:1em;
	vertical-align:middle;
}

/* -----------------------------------------------------------------------------
THANKS
----------------------------------------------------------------------------- */
.thanks {
	width:90%;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding:100px 0;
	font-size:0.875rem;
}
.thanks h1 {
	font-size:2.0rem;
	margin-bottom:1em;
}
.thanks p {
	margin-bottom:3em;
}
.thanks .contactTelephone {
	border:solid 2px #333;
}
.thanks  .contactTelephone dt{
	border-right:solid 2px #333;
}
/* -----------------------------------------------------------------------------
COLORBOX
----------------------------------------------------------------------------- */
/*
    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;  -webkit-transform: translate3d(0,0,0);}
#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 repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:100px; height:100px; background-color:#fff;}
    #cboxTopRight{width:100px; height:100px; background-color:#fff;}
    #cboxBottomLeft{width:100px; height:50px; background-color:#fff;}
    #cboxBottomRight{width:100px; height:50px; background-color:#fff;}
    #cboxMiddleLeft{width:100px; background-color:#fff;}
    #cboxMiddleRight{width:100px; background-color:#fff;}
    #cboxTopCenter{height:100px; background-color:#fff;}
    #cboxBottomCenter{height:50px; background-color:#fff;}
    #cboxContent{background:#fff; ;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:5rem;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:left; width:100%; color:#333;font-size:0.875rem;line-height:1.33}
        #cboxCurrent{height:0px;visibility:hidden;}
        #cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;}

        /* 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; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; top:50%; left:-80px; background:url(../images/common/arrow_left.svg) no-repeat; width:20px; height:36px; text-indent:-9999px;}
        #cboxNext{position:absolute; top:50%; right:-80px; background:url(../images/common/arrow_right.svg) no-repeat; width:20px; height:36px; text-indent:-9999px;}
        #cboxPrevious:hover,
        #cboxNext:hover{opacity:0.5;}
        #cboxClose{height:0px;visibility:hidden; text-indent:-9999px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/* -----------------------------------------------------------------------------
中間
----------------------------------------------------------------------------- */
@media screen and (max-width: 980px)  {
/* ----------------------------------------------------------------------------- ヘッダ */
	.headerInner {
		width:100%;
	}
/* ----------------------------------------------------------------------------- フッタ */
	.address {
		padding:0 20px;
		text-align:left;
	}
	.address dt{
		line-height:1;
	}
	.address dt small{
		font-size:0.5rem;
	}
	.copy{
		font-size:0.7rem;
		padding-bottom:2em;
	}

/* ----------------------------------------------------------------------------- CONTACT */
	.contact .sectionHeader {
		width:90%;
	}
	.contact .sectionBody {
		width:90%;
	}

}
/* -----------------------------------------------------------------------------
中間 ココマデ
----------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------------
中間
----------------------------------------------------------------------------- */
@media screen and (max-width: 980px) and (orientation: landscape) {

/* -----------------------------------------------------------------------------
COLORBOX
----------------------------------------------------------------------------- */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
	    #cboxTopLeft{width:10vw; height:3vw;}
	    #cboxTopRight{width:10vw; height:3vw; }
	    #cboxBottomLeft{width:10vw; height:2vw; }
	    #cboxBottomRight{width:10vw; height:2vw; }
	    #cboxMiddleLeft{width:10vw; }
	    #cboxMiddleRight{width:10vw; }
	    #cboxTopCenter{height:3vw; }
	    #cboxBottomCenter{height:2vw; }
	    #cboxContent{background:#fff; ;}
	        .cboxIframe{background:#fff;}
	        #cboxError{padding:5vw; border:1px solid #ccc;}
	        #cboxLoadedContent{margin-bottom:5rem;}
	        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
	        #cboxPrevious{position:absolute; top:50%; left:-8vw; background-size:100%; width:2vw; height:3.6vw;}
	        #cboxNext{position:absolute; top:50%; right:-8vw; background-size:100%; width:2vw; height:3.6vw;}
}

@media screen and (min-width: 641px)  {
	.disp_sp {
		display:none;
	}
}
/* -----------------------------------------------------------------------------
モバイル
----------------------------------------------------------------------------- */
@media screen and (max-width: 640px)  {
	.disp_pc {
		display:none;
	}
	html {
		font-size:3.6vw;
	}
	header h1 {
		width:23vw;
		padding:3.5vw 0;
	}

/* ***************************************************************************** ヘッダ
*/
	header {
		padding:0;
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		z-index:1000;
	}
	.headerInner {
		width:90%;
		padding:0 5%;
	}
	.mainvisual {
		padding-top:13.5vw; //ヘッダのスペースを担保
	}

/* ***************************************************************************** SPMENU
*/
	#btn_spmenu {
		display:block;
		background-color:#fff;
		border:solid 1px #fff;
		width:6.6vw;
		height:6.6vw;
		position:absolute;
		top:3vw;
		right:5.3vw;
		z-index:200;
		cursor:pointer;
	}
	.icon-animation {
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
	}
	.icon-animation span {
		width: 6.6vw;
		height: 3px;
		display: block;
		background: #666;
		position: absolute;
		left: 50%;
		top: calc(50% - 1.5px);
		margin-left: -3.3vw; 
	}
	.icon-animation span {
		-webkit-transition: all 0.3s;
		transition: all 0.3s; 
	}
	.icon-animation .top {
		-webkit-transform: translateY(-2.3vw) scale(1);
		-ms-transform: translateY(-2.3vw) scale(1);
		transform: translateY(-2.3vw) scale(1); 
	}
	.icon-animation .middle {
		background: none;
		position: relative; 
	}
	.icon-animation .middle:before, .icon-animation .middle:after {
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		content: "";
		width: 6.6vw;
		height: 3px;
		background: #666;
		display: block;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	    position: absolute; 
	   }

	.icon-animation .bottom {
		-webkit-transform: translateY(2.3vw) scale(1);
		-ms-transform: translateY(2.3vw) scale(1);
		transform: translateY(2.3vw) scale(1); 
	}

	body.spmenu_opened .icon-animation .top {
		-webkit-transform: translateY(0px) scale(0);
		-ms-transform: translateY(0px) scale(0);
		transform: translateY(0px) scale(0); 
	}

	body.spmenu_opened .icon-animation .bottom {
		-webkit-transform: translateY(0px) scale(0);
		-ms-transform: translateY(0px) scale(0);
		transform: translateY(0px) scale(0); 
	}

	body.spmenu_opened .icon-animation .middle:before {
		-webkit-transform: rotate(45deg) scaleX(1.4142);;
		-ms-transform: rotate(45deg) scaleX(1.4142);;
		transform: rotate(45deg) scaleX(1.4142);; 
	}

	body.spmenu_opened .icon-animation .middle:after {
		-webkit-transform: rotate(-45deg) scaleX(1.4142);
		-ms-transform: rotate(-45deg) scaleX(1.4142);
		transform: rotate(-45deg) scaleX(1.4142); 
	}
	.globalNav{
		position:absolute;
		top:13.5vw;
		left:0vw;
		z-index:1000;
		background-color:rgba(255,255,255,0.9);
		width:100%;
		height:0vh;
		overflow:hidden;
		font-weight:bold;
		font-size:1.25rem;
		transition-property:height;
		transition-duration:0.5s;
	}
	.globalNav ul:not(.globalNav_submenu){
		padding:5%;
	}
	.globalNav a {
		display:block;
		padding:0.25em;
	}
	.globalNav_submenu {
		font-size:1.0rem;
		font-weight:normal;
		padding-left:1em;
		padding:0 5% 0% 5%;
	}
	body.spmenu_opened .globalNav {
		height:110vh;
	}


/* ----------------------------------------------------------------------------- CONTACT */
	.contact {
		font-size: 1rem;
		padding-bottom:2rem;
	}
	.contact .sectionHeader,
	.contact .sectionBody {
		width:90%;
	}
	.contact .sectionHeader h1 img {
		width:40%;
	}
	.contact form dl {
		display:block;
		margin-bottom:1em;
		width:100%;
	}
	.contact form dt ,
	.contact form dd {
		display:block;
	}
	.contact form dt {
		width:100%;
	}
	.contactTelephone dt{
		font-size:1.35rem;
		white-space:nowrap;
	}
	.contactTelephone dd{
		font-size:1.5rem;
		padding-left:1rem;
		text-align:center;
	}
	.contactTelephone dd span{
		font-size:0.9rem;
		display:block;
		padding-left:0em;
		margin-top:0.5em;
	}
	#form_submit input[type="button"] {
		font-size:3.5vw;
	}

/* -----------------------------------------------------------------------------
COLORBOX
----------------------------------------------------------------------------- */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
	    #cboxTopLeft{width:10vw; height:10vw;}
	    #cboxTopRight{width:10vw; height:10vw; }
	    #cboxBottomLeft{width:10vw; height:5vw; }
	    #cboxBottomRight{width:10vw; height:5vw; }
	    #cboxMiddleLeft{width:10vw; }
	    #cboxMiddleRight{width:10vw; }
	    #cboxTopCenter{height:10vw; }
	    #cboxBottomCenter{height:5vw; }
	    #cboxContent{background:#fff; ;}
	        .cboxIframe{background:#fff;}
	        #cboxError{padding:5vw; border:1px solid #ccc;}
	        #cboxLoadedContent{margin-bottom:5rem;}
	        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
	        #cboxPrevious{position:absolute; top:50%; left:-8vw; background-size:100%; width:4vw; height:7.2vw;}
	        #cboxNext{position:absolute; top:50%; right:-8vw; background-size:100%; width:4vw; height:7.2vw;}

}
/* -----------------------------------------------------------------------------
モバイル ココマデ
----------------------------------------------------------------------------- */