@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* CSS Document */
/*====================================================================

common.css

=====================================================================*/
/* ========================================
 * foundation
 ======================================= */
/* html5reset-1.6.1.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, address, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
	margin : 0;
	padding : 0;
	border : 0;
	outline : 0;
	font-size : 100%;
	vertical-align : baseline;
	background : transparent;
	border-collapse : collapse;
	/* added */
	-webkit-text-size-adjust : none;
	/* added */
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
	display : block;
}

address{
	font-style : normal;
}

nav ul{
	list-style : none;
}

ul li{
	list-style : none;
}

/* added */
ol li{
	list-style : none;
}

/* added */
blockquote, q{
	quotes : none;
}

blockquote:before, blockquote:after, q:before, q:after{
	content : "";
	content : none;
}

a{
	margin : 0;
	padding : 0;
	font-size : 100%;
	vertical-align : middle;
	background : transparent;
}

/* change colours to suit your needs */
ins{
	background-color : #ff9;
	color : #000;
	text-decoration : none;
}

/* change colours to suit your needs */
mark{
	background-color : #ff9;
	color : #000;
	font-style : italic;
	font-weight : bold;
}

del{
	text-decoration : line-through;
}

abbr[title], dfn[title]{
	border-bottom : 1px dotted;
	cursor : help;
}

table{
	border-collapse : collapse;
	border-spacing : 0;
}

/* change border colour to suit your needs */
hr{
	display : block;
	height : 1px;
	border : 0;
	border-top : 1px solid #ccc;
	margin : 1em 0;
	padding : 0;
}

input, select{
	vertical-align : middle;
}

/*--------------------------------------------------------------------/
	format
/--------------------------------------------------------------------*/
*, *:before, *:after{
	box-sizing : border-box;
}

img{
	max-width : 100%;
	vertical-align : middle;
}

/*--------------------------------------------------------------------/
	body
/--------------------------------------------------------------------*/
html{
	font-size : 16px;
}

body{
	font-size : 14px;
	font-size : .875rem;
	line-height : 1.57143;
	letter-spacing : 1px;
	font-family : Verdana, "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	color : #000;
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing : grayscale;
}

section:after, article:after{
	content : "";
	clear : both;
	display : block;
}

/* a
----------------------------------------------------------------*/
a{
	color : #000;
}

/*:link, :visited{
	text-decoration : underline;
}*/

:hover, :active{
	text-decoration : none;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?lsdl13');
  src:  url('../fonts/icomoon.eot?lsdl13#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?lsdl13') format('truetype'),
    url('../fonts/icomoon.woff?lsdl13') format('woff'),
    url('../fonts/icomoon.svg?lsdl13#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family : "icomoon" !important;
	speak : none;
	font-style : normal;
	font-weight : normal;
	font-variant : normal;
	text-transform : none;
	line-height : 1;
	/* Enable Ligatures ================ */
	letter-spacing : 0;
	-webkit-font-feature-settings : "liga";
	    -ms-font-feature-settings : "liga" 1;
	        font-feature-settings : "liga";
	-webkit-font-variant-ligatures : discretionary-ligatures;
	        font-variant-ligatures : discretionary-ligatures;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing : grayscale;
}

.icon-right:before {
	content: "\e901";
	position: absolute;
}
.and-more  .icon-right:before {
	font-size: 16px;
	right: 10px;
	top: 40%;
}
.icon-mail:before {
	content: "\e90a";
}
.icon-tel:before {
	content: "\e902";
}
#ttl-right .icon-tel:before {
	top: 4px;
}
.icon-room:before {
	content: "\e900";
	float: right;
	position: relative;
	top: 6px;
}
.icon-info:before {
	content: "\e90b";
}
.icon-map:before {
	content: "\e90c";
}
.icon-info:before,
.icon-map:before {
	color: #ff9100;
	margin-right: 15px;
	position: relative;
	top: 2px;
}
.icon-top:before {
	content: "\e909";
	color: #ffa42c;
	display: block;
}
/*--------------------------------------------------------------------/
	header
/--------------------------------------------------------------------*/
header {
	background:#fff;
	width: 100%;
}
h1 {
	color: #b5b5b5;
	font-size: 10px;
	font-weight: normal;
	letter-spacing: -0.02em;
}
#hd-ttl {
	margin: 0 auto;
	overflow: hidden;
}
#ttl-left a {
	display: block;
}
#ttl-right dl {
	letter-spacing: -0.4em;
	overflow: hidden;
}
#ttl-right dt::before {
	border-top: solid 1px #c6c6c6;
	content: "";
	height: 1px;
	display: block;
	position: absolute;
	top: 15px;
	z-index: 1;
}
#ttl-right dt {
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 5px 0 0;
	text-align: center;
}
#ttl-right dt .txt-bg {
	font-family : Noto Sans Japanese;
	background: #fff;
	padding: 0 15px;
	position: relative;
	z-index: 5;
}
#ttl-right dt .txt-color {
	color: #ff9100;
}
#ttl-right dd {
	display: inline-block;
	letter-spacing: normal;
}
#ttl-right .tel {
	font-weight: 700;
}
.tel a {
	text-decoration: none;
}
#ttl-right .contact {
	background-color: #ff9100;
	vertical-align: top;
}
#ttl-right .contact a {
	color: #fff;
	display: block;
	font-weight: bold;
	letter-spacing: 0.1em;
	position: relative;
	text-decoration: none;
}
/*--------------------------------------------------------------------/
	nav global
/--------------------------------------------------------------------*/
nav {
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
}
/*--------------------------------------------------------------------/
	Under Contact
/--------------------------------------------------------------------*/
#contact {
	background-image: url(../img/contact.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border: 3px solid #ffa42c;
	text-align: center;
}
#contact h2 {
	background-color: #fff;
	padding: 15px;
}
#contact p {
	font-weight: bold;
}
#contact .underline {
	background: linear-gradient(transparent 70%, #ffff66 60%);
	color: #ff4200;
}
#contact ul {
	margin: 0 auto 15px;
	overflow: hidden;
}
#contact .tel {
	font-weight: 600;
}
#contact .contact a {
	background-color: #ff9100;
	color: #fff;
    display: block;
    font-weight: bold;
    position: relative;
    text-decoration: none;
}
/*--------------------------------------------------------------------/
	Under nav
/--------------------------------------------------------------------*/
#under-nav {
	border-top: 3px solid #f6f6f6;
}
#under-nav a {
	position: relative;
	text-decoration: none;
}
/*--------------------------------------------------------------------/
	footer
/--------------------------------------------------------------------*/
footer{
	background-color: #f7f7f7;
	text-align: center;
	padding: 0 0 30px;
}
footer dl {
	padding: 25px 0 0;
	letter-spacing: -0.4em;
}
footer dt {
	letter-spacing: 1px;
}
footer .company {
	font-size: 20px;
	font-weight: bold;
	line-height: 22px;
	margin: 0 0 10px;
}
footer dd {
	display: inline-block;
	letter-spacing: 1px;
	margin-right: 5px;
}
footer dd:nth-child(3) {
	margin-right: 20px;
}
footer .contact::after {
	content: "：";
	left: -4px;
	position: relative;
}
#pagetop a {
	font-weight: bold;
	position: fixed;
	text-decoration: none;
	z-index: 40;
}

/*--------------------------------------------------------------------/
	print css
/--------------------------------------------------------------------*/
@media print, screen and (min-width: 641px)
	and (max-width: 1079px){
	/*====================================================================/
	/*------------------タブレットスタイル----------------
	/====================================================================*/
	.icon-nav06:before,
	.icon-nav05:before,
	.icon-nav04:before,
	.icon-nav03:before,
	.icon-nav02:before,
	.icon-nav01:before {
		display: block;
		margin: -35px 0 0;
	}
	#contact .icon-tel:before {
		top: 0;
	}
	#contact .icon-tel:before {
		font-size: 25px;
	}
	#ttl-right .icon-mail:before {
		left: 12px;
		top: 5px;
	}
	#contact .icon-mail:before {
		left: 40px;
		top: 10px;
	}
	#under-nav .icon-right:before {
		font-size: 10px;
		left: 0;
		line-height: 12px;
		top: 0.1rem;
	}
	html{
		width : 100%;
	}
	header {
		min-width: 750px;
	}
	#ttl-left {
		margin-left: 10px;
	}
	#ttl-left img {
		width: 87%;
	}
	#ttl-right {
		position: relative;
	}
	#ttl-right dl {
		position: absolute;
		right: 20px;
	}
	#ttl-right dt::before {
		width: 380px;
	}
	#ttl-right .tel {
		font-size: 24px;
	}
	#ttl-right .contact {
		margin: 7px 0 0 10px;
	}
	#ttl-right .contact a {
		font-size: 15px;
		padding: 2px 10px 2px 36px;
	}
	#pc-nav {
		width: 100%;
	}
	#pc-nav li {
		width: 16.66%;
	}
	#pc-nav li a {
		font-size: 13px;
	}
	#main-contents {
		margin: 169px 0 0;
	}
	#contact {
		margin: 40px;
	}
	#contact p {
		font-size: 15px;
	}
	#contact h2 {
		font-size: 22px;
		line-height: 22px;
		margin: 25px 40px 20px;
	}
	#contact .tel {
		font-size: 30px;
	}
	#contact .contact a {
		font-size: 16px;
		margin: 10px 5px 5px 20px;
		padding: 5px 30px 5px 70px;
	}
	#contact ul {
		width: 520px;
	}
	#under-nav {
		text-align: center;
	}
	#under-nav ul {
		display: inline-block;
		min-width: 690px;
	}
	#under-nav a {
		font-size: 12px;
	}
	#under-nav li {
		margin-right: 2%;
	}
	#pagetop a {
		bottom: 40px;
		right: 20px;
	}
}

@media print, screen and (min-width: 1080px){
	/*====================================================================/
	/*-------------------PCスタイル-------------------
	/====================================================================*/
	.icon-nav06:before,
	.icon-nav05:before,
	.icon-nav04:before,
	.icon-nav03:before,
	.icon-nav02:before,
	.icon-nav01:before {
		left: 4.5rem;
		position: absolute;
		top: 1rem;
	}
	#contact .icon-tel:before {
		top: 2px;
	}
	#contact .icon-tel:before {
		font-size: 30px;
	}
	#ttl-right .icon-mail:before {
		left: 30px;
		top: 10px;
	}
	#contact .icon-mail:before {
		left: 50px;
		top: 13px;
	}
	#under-nav .icon-right:before {
		font-size: 12px;
		left: 0;
		line-height: 14px;
		top: 0.1rem;
	}
	.ie #under-nav .icon-right:before {
		top: 0;
	}
	html{
		width : 100%;
	}
	#hd-ttl {
		height: 85px;
		width: 1080px;
	}
	#ttl-right {
		margin-left:620px;
	}
	#ttl-right dt::before {
		width: 460px;
	}
	#ttl-right .tel {
		font-size: 28px;
	}
	#ttl-right .contact {
		margin: 10px 0 0 10px;
	}
	#ttl-right .contact a {
		font-size: 15px;
		padding: 5px 30px 5px 56px;
		width: 185px;
	}
	#pc-nav {
		margin: 0 auto;
		width: 1080px;
	}
	#pc-nav li {
		width: 180px;
	}
	#pc-nav li a {
		font-size: 15px;
	}
	#main-contents {
		margin: 176px 0 0;
	}
	.content-area .inner {
		margin: 0 auto;
		width: 1080px;
	}
	.content-area .split {
		display: inline-block;
		letter-spacing: normal;
		vertical-align: top;
		width: 520px;
	}
	#gas h2 {
		margin: 0 0 17px;
	}
	#contact {
		margin: 70px auto 50px;
	}
	#contact h2 {
		font-size: 25px;
		line-height: 25px;
		margin: 25px auto 20px;
		width: 700px;
	}
	#contact p {
		font-size: 20px;
	}
	#contact .tel {
		font-size: 40px;
	}
	#contact .contact a {
		font-size: 20px;
		margin: 15px 10px 10px 30px;
		padding: 5px 40px 5px 80px;
	}
	#contact ul {
		width: 658px;
	}
	#under-nav li {
		width: 14%;
	}
	.chrome #under-nav a {
		line-height: 16px;
	}
	#pagetop a {
		bottom: 50px;
		right: 50px;
	}
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #under-nav .icon-right::before { top: 0 } /* IE11 */
}
@media only screen and (min-width: 641px){
	/*====================================================================/
	/*------------------PCタブレット共通スタイル---------
	/====================================================================*/
	.icon-nav06:before {
		content: "\e905";
	}
	.icon-nav05:before {
		content: "\e904";
	}
	.icon-nav04:before {
		content: "\e903";
	}
	.icon-nav03:before {
		content: "\e908";
	}
	.icon-nav02:before {
		content: "\e907";
	}
	.icon-nav01:before {
		content: "\e906";
	}
	.icon-nav06:before,
	.icon-nav05:before,
	.icon-nav04:before,
	.icon-nav03:before,
	.icon-nav02:before,
	.icon-nav01:before {
		color: #ff9100;
		font-size: 2.1rem;
	}
	.icon-tel:before {
		color: #ff9100;
		display: inline-block;
		padding: 10px 5px 10px 2px;
		position: relative;
	}
	.icon-mail:before {
		font-size: 18px;
		position: absolute;
	}
	.icon-top:before {
		font-size: 55px;
	}
	#ttl-left {
		float: left;
	}
	html{
		width : 100%;
	}
	header {
		position: fixed;
		top: 0;
		z-index: 100;
	}
	#hd-ttl {
		padding: 0 0 15px;
	}
	#sp-nav,
	#close {
		display: none;
	}
	#pc-nav {
		overflow: hidden;
	}
	#pc-nav li {
		float: left;
		height: 90px;
		position: relative;
		text-align: center;
	}
	#pc-nav li:hover {
		background-color: #fff5e8;
	}
	#pc-nav li a {
		border-left: 1px solid #ededed;
		display: block;
		margin: 15px 0;
		padding: 38px 0 0;
		text-align: center;
		text-decoration: none;
	}
	#pc-nav li:nth-child(6) a {
		border-right: 1px solid #ededed;
	}
	h1 {
		margin: 5px 0 15px;
	}
	
	#contact p .br {
		display: block;
	}
	#contact img {
		display: inline-block;
		margin: 5px 0;
	}
	#contact li {
		float: left;
	}
	#under-nav {
		padding: 30px 0;
	}
	#under-nav ul {
		overflow: hidden;
	}
	#under-nav li {
		float: left;
		text-align: center;
	}
	#under-nav a {
		display: inline-block;
		line-height: 14px;
		padding-left: 10px;
	}
	#under-nav a:hover {
		text-decoration: underline;
	}
	footer .contact {
		display: inline-block;
	}
	footer .company span {
		margin-left: 20px;
	}
	#pagetop a {
		font-size: 10px;
	}
}

@media screen and (max-width: 640px){
	/*====================================================================/
	/*------------------スマホのみスタイル----------------
	/====================================================================*/
	#sp-nav .icon-tel:before,
	#sp-nav .icon-mail:before {
		color: #fff;
		display: block;
		font-size: 22px;
	}
	#contact .icon-tel:before,
	#contact .icon-mail:before {
		font-size: 14px;
		margin: 5px 5px 0;
	}
	#contact .icon-tel:before {
		color: #ff9100;
	}
	#under-nav .icon-right:before {
		left: 20px;
		top: 10px;
	}
	.icon-top:before {
		font-size: 45px;
	}
	html{
		width : 100%;
	}
	#wrapper {
		background-color: #fff;
	}
	#hd-ttl {
		padding: 0 0 10px;
	}
	#ttl-left {
		letter-spacing: -0.4em;
		padding: 50px 10px 0;
	}
	h1 {
		margin: 0 0 10px;
	}
	#ttl-left img {
		display: block;
		max-width: 272px;
		margin: 0 auto;
	}
	#ttl-right {
		display: none;
	}
	#close {
		background-color: #eee;
		cursor: pointer;
		display: block;
		padding: 10px;
	}
	#sp-nav {
		background-color: #ff9100;
		overflow: hidden;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}
	#menu {
		cursor: pointer;
		font-weight: bold;
		padding: 10px;
	}
	#sp-nav li {
		border-right: 1px solid #fff;
		color: #fff;
		float: left;
		text-align: center;
		width: 33.33%;
	}
	#sp-nav li:last-child {
		border-right: none;
	}
	#sp-nav a {
		display: block;
		padding: 10px;
		text-decoration: none;
	}
	#sp-nav a:hover {
		text-decoration: none;
	}
	#pc-nav {
		background-color: #fff;
		border-right: 1px solid #f6f6f6;
		height: 100%;
		left: 0;
		opacity: 0;
		padding: 50px 0 0;
		position: fixed;
		top: 0;
		width: 0;
		z-index: -1;
		transition-duration: .2s;
		-moz-transition-duration: .2s;
		-webkit-transition-duration: .2s;
		-o-transition-duration: .2s;
		-ms-transition-duration: .2s;
	}
	#pc-nav a {
		/*border-bottom: 1px solid #f6f6f6;*/
		border-bottom: 1px solid #eee;
		display: block;
		padding: 10px;
		text-decoration: none;
	}
	#pc-nav.action {
		background-color: #fffbed;
		opacity: 1;
		width: 250px;
		z-index: 50;
	}
	#contact {
		margin: 20px;
	}
	#contact h2 {
		font-size: 18px;
		margin: 10px;
		padding: 5px;
	}
	#contact p {
		margin: 10px;
	}
	#contact h2 .br {
		display: block;
	}
	#contact img {
		display: block;
		margin: 5px auto;
		max-width: 330px;
		width: 90%;
	}
	#contact li {
		font-size: 20px;
	}
	#contact .contact a {
		margin: 0 auto;
		padding: 5px;
		width: 200px;
	}
	#contact .underline {
		display: inline-block;
	}
	#under-nav a {
		border-bottom: 1px solid #f6f6f6;
		display: block;
		padding: 5px 20px 5px 35px;
	}
	#under-nav li:last-child a {
		border-bottom: none;
	}
	#under-nav a:hover {
		background-color: #f6f6f6;
	}
	footer .company span {
		margin-left: 10px;
	}
	.copy {
		font-size: 10px;
		margin: 30px 0 0;
	}
	#pagetop a {
		bottom: 10px;
		font-size: 8px;
		letter-spacing: -0.05em;
		right: 10px;
	}
}

@media print{
	header {
		display : none;
	}
	nav {
		display : none;
	}
	footer {
		display : none;
	}
}