@charset "UTF-8";
html{
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  background-color:#f7f7f7;
  width:100%;
  color:#666;
  font-size:13px;
  line-height:1.7;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
h1,h2,h3,h4,ul,ol,li,dl,dt,dd,p {
	padding: 0;
	margin: 0;
}	
img {
	border:0;
	margin: 0;
	padding: 0;	
}
.clear {clear:both;}
hr {}
ul {
	list-style-type: none;	
	}
a:link { color: #666; text-decoration: none}
a:visited { color: #666; text-decoration: none}
a:hover { color: #999; text-decoration: none}

a img.linkimg{
background:none!important;
}
 
a:hover img.linkimg{
opacity:0.85;
filter:alpha(opacity=85);
-ms-filter: "alpha( opacity=85 )";
background:none!important;
}

.sp { display:none;}

@media screen and (max-width:750px){
  body {
      width:100%;
      font-size:14px;
      background-color: #595757;
  }
  .sp { display:block;}
  .pc { display:none;}
}


/*------------------
clearfix
-------------------*/
.clearfix:after {
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
	}
/*---
IE用
-----*/
.clearfix {
	display:inline-block;
	}
/*MacIE \*/
   * html .clearfix {height: 1em;}
   .clearfix {display: block;}
/*  */

/*-----------------------------------------------
テンプレートレイアウト
-----------------------------------------------*/

/*------------------
コンテンツベース
-------------------*/
#container {
	background: #fff;
    width:100%;
	background:url(../img/share/wrap.jpg) #FFF repeat-x;
	margin:0;
	padding:0;
    z-index: 0;
    position: relative;
}

#content {
	width: 900px;
	margin: 0 auto;
	text-align:center;
	padding:0;
}
#content-inner-top,
#content-inner {
	clear:both;
	width:820px;
	margin:0 auto;
	text-align:left;
	padding:20px 0 37px 0;
}
@media screen and (max-width:750px){
  #container { background-image: none;}
  #content { width: 100%; overflow: hidden;}
  #content-inner-top { width: 100%; padding: 65px 0 0 0;}
  #content-inner { width: 90%; padding: 65px 0 0 0;}
}
/*------------------
header
-------------------*/
#header {
    width:820px;
	height:123px;
	margin: 0 auto;
	text-align:left;
	padding:0;
	}
h1 {
	float:left;
	width:125px;
	height:80px;
}
h1 img { width: 125px; height: auto; padding: 16px 0;}
h2 {
	float:left;
	width:695px;
	text-align:right;
	font-weight:normal;
	font-size:12px;
	padding-top:30px;
}

@media screen and (max-width:750px){
  #header {
      width:100%;
      position:fixed;
      background: #fff;
      min-width: inherit;
      height:65px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      z-index:10;
  }
  #header h1 { width:100%; height: auto; padding:10px 20px;}
  #header h1 img { width:120px; height: auto; padding: 0; /*z-index:100;*/}


  /* スマホ用ナビ */
  header {
      display:table;
      width:100%;
      position:fixed;
      /*z-index:10;*/
  }
  header:after {content:''}
  header ul li a {color:inherit; display:block}
  header ul li:after {content:''}
  header ul li:last-child {border-bottom:none;margin-bottom:30px;}
  .nav-content {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
    -webkit-overflow-scrolling:touch; 
  }

  /* ハンバーガーメニュー */
  #navToggle {
      display:blok;
      position:absolute;
      right:20px;
      top:19px;
      width:30px;
      height:55px;
      cursor:pointer;
      z-index:100;}
  #navToggle div {position:relative}
  #navToggle span {
      display:block;
      position:absolute;
      width:100%;
      border-bottom:solid 3px #3B2911;
      -webkit-transition: .35s ease-in-out;
      -moz-transition: .35s ease-in-out;
      transition: .35s ease-in-out}
  #navToggle span:nth-child(1) {top:0}
  #navToggle span:nth-child(2) {top:11px}
  #navToggle span:nth-child(3) {top:22px}

  /* メニューの動き */
  #navToggle {display:block;}
  .openNav #navToggle span {
      border-bottom:solid 3px #FFF;
  }
  .openNav #navToggle span:nth-child(1) {
      top: 11px;
      -webkit-transform:rotate(-45deg);
      -moz-transform:rotate(-45deg);
      transform:rotate(-45deg);
  }
  .openNav #navToggle span:nth-child(2),
  .openNav #navToggle span:nth-child(3) {
      top: 11px;
      -webkit-transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      transform:rotate(45deg);
  }
  #head-bg {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0px;
      background: #000;
      /*z-index: 10;*/
      opacity:0;
      display: none;
      margin-top:0;
      overflow-y: scroll;
      background: rgba(0,0,0,0.8);
  }
  
}

/*------------------
menu
-------------------*/
#menu {
	clear:both;
	height:80px;
	margin:0;
	padding:0;
}
#menu li {
	float:left;
	width:164px;
	margin:0;
	padding:0;
}
#menu li img { vertical-align:bottom;}
.pankuzu { margin-bottom:48px;}

@media screen and (max-width:750px){
  #header #menu { width:100%; margin-right:0; margin-top:70px; text-align:center;}
  #header #menu li {
      margin:15px 0px;
      padding:0;
      float:none;
      font-size:17px;
      letter-spacing: 1px;
      color:#FFF;
  }
  #header #menu a:link { color:#fff;}
  #header #menu a:visited { color:#fff;}
  #header #menu a:hover { color:#fff;}
  #menu li { width: 100%;}
  .pankuzu { margin: 10px 0 30px; font-size: 12px;}
}


/*------------------
footer
-------------------*/
#footer {
	clear:both;		
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border-top: #c0bfc0 1px solid;
	height:53px;
    font-size:11px;
	}
#footer-inner {
	width:820px;
	margin:0 auto;
}
#pagetop {
	float:right;
	/*margin-top:17px;*/
    font-family: Times New Roman;
    font-size: 15px;
}
/*#pagetop a { color: #fff;}*/

/*　丸arrowボタン　*/
.round_arrow {
  position: relative;
  padding-left: 27px;
}
.round_arrow::before { /* 背景の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 16px; /* 横幅 */
  height: 16px; /* 高さ */
  border-radius: 50%; /* 角の丸み */
  background: #B2B2B2;
}
.round_arrow::after { /* くの字の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(25%) rotate(-45deg);
}
#footer p {
	float:left;
	margin-top:17px;
}
@media screen and (max-width:750px){
  #footer { height: auto; text-align: center; color: #fff;}
  #footer-inner { width: 90%; padding: 5px 0;}
  #pagetop a { color: #fff;}
  #pagetop { float: none; font-size: 16px;}
  .round_arrow::before { left: -55px; right: 0;}
  .round_arrow::after { left: -55px; right: 0;}
  #footer p { float: none; margin-top:8px; z-index: -1;}
}

/*-----------------------------------------------
トップページ
-----------------------------------------------*/

#top-info {
	float:left;
	width:406px;
	padding-top:335px;
}
#top-info li {
	background: url(../img/share/point.jpg) no-repeat left center;
	background-position: 0 8px;
	padding-left:15px;
	margin-bottom:2px;
}
#top-p {
	float:right;
	width:414px;
}
.top-info-title { font-family: Times New Roman; font-size: 21px; letter-spacing: 0.5px; margin-bottom:15px;}

@media screen and (max-width:750px){
  #top-info { float: none; width: 90%; margin: 0 auto; padding: 30px 0 50px;}
  #top-p { float: none; width: 100%; height: 400px; overflow: hidden; background-color: #010400; text-align: center;}
  #top-p img { width: auto; height: 450px;}
  .top-info-title { font-size: 23px; margin-bottom:15px;}
}

/*-----------------------------------------------
About
-----------------------------------------------*/

.about-p {
	float:left;
	width:270px;
}
.about-t {
	float:left;
	width:550px;
	margin-bottom:63px;
}
.about-t img { margin:20px 0 59px 0;}
.about-table {
	clear:both;
	width:100%;
	border-collapse: collapse;
	border: #c0bfc0 1px solid;
}
.about-table th {
	background-color:#f2f2f2;
	width:215px;
	padding:8px 20px;
	border-collapse: collapse;
	border:#c0bfc0 1px solid;
}
.about-table td {
	padding:8px 20px;
	border-collapse: collapse;
	border:#c0bfc0 1px solid;
}
.access { margin:70px 0 65px;}
.map {
	float:left;
	width:590px;
	margin-top:40px;
}
.jimusyo {
	float:left;
	width:230px;
	margin-top:40px;
}
.jimusyo img { margin-top:20px;}

@media screen and (max-width:750px){
  .about-p { float: none; width: 100%; /*text-align: center;*/ margin-bottom: 20px;}
  .about-p img { width: 180px; height: auto;}
  .about-t { float: none; width: 100%; margin-bottom: 30px;}
  .about-t img { width: 130px; height: auto; margin:10px 0 30px 0;}
  .about-table th { width: 30%;}
  .access { margin:40px 0 50px;}
  .map { float: none; width: 100%; margin-top:30px;}
  .map iframe { width: 100%;}
  .jimusyo { float: none; width: 100%; margin-top:30px;}
}

/*-----------------------------------------------
Flow
-----------------------------------------------*/

.flow { margin-bottom:30px;}
.flow .flow-title {
/*font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;*/
font-size: 18px;
margin: 0 25px;
border-bottom:  2px dotted;
font-weight: bold;
}
.flow .flow-title span { font-family: Times New Roman; padding-right: 15px; font-size: 30px; font-weight: normal;}
.flow ul {
	padding-bottom: 35px;
	margin-top: 26px;
	clear:both;
}
.arrow {
	background: url(../img/flow/arrow.jpg) no-repeat bottom center;
}
.arrow2 { text-align: center; margin: 30px 0 50px;}
.flow ul li { float:left; margin-top:27px;}
.flow ul li img { margin: 0 28px 0 70px;}
.flow-t { width:474px;}
.flow-tl {
	margin-top:26px;
	clear:both;
    background-color: #E4E4E4;
    padding: 20px;
    text-align: center;
    font-size: 15px;
    color: #424040;
    font-weight: bold;
}
.flow-tl span { font-weight: normal; font-size: 13px; padding-left: 20px;}
.red { color:#F00;}

@media screen and (max-width:750px){
.flow  { width: 100%;}
.arrow2 { margin: 30px 0 30px;}
.flow .flow-title { margin: 0 0 30px;}
.flow ul { padding-bottom: 40px; margin-top: 20px;}
.flow ul li { float: none; text-align: center; margin: 0 0 15px 0;}
.flow ul li img { margin: 0; width: 80%; height: auto;}
.flow ul li.flow-t { width: 80%; margin: 0 auto; text-align: left !important;}
.flow-tl { margin-top:0; text-align: left;}
.flow-tl span { display: block; padding-left: 0;}
}

/*-----------------------------------------------
Contact
-----------------------------------------------*/

.contact,.contact-error { margin-bottom:50px;}
.contact table { margin:36px auto 0;}
.contact table th {
	background-color:#808080;
	color:#FFF;
	text-align:left;
	font-weight:bold;
	padding:18px 23px;
	margin:5px;
}
.contact table td {
	background-color:#f5f5f5;
	padding:15px 20px;
}
.contact table, th ,td {
	border:2px solid #FFF;
	border-collapse: separate;
}
.kome { margin-left:20px;}
.btn { margin-top:60px; text-align:center;}
.btn p { margin-bottom:30px;}
.privacy {
	margin:70px 0 0;
	padding:24px 30px;
	background-color:#f6f6f6;
	line-height:1.9;
	border:#c0bfc0 1px solid;
}
.contact-thanx {
	text-align:center;
}
.contact-thanx p,.contact-error p {
	text-align:center;
	font-weight:bold;
	font-size:16px;
	margin-bottom:20px;
}
.reception { margin-left: 10px; vertical-align: 18px;}
.sub-title {
    font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #424040;
    border-bottom: 1px solid #595757;
    border-left: 8px solid #595757;
    padding: 0 0 5px 15px;
    margin: 77px 0 27px;
}
.btn input { width: 195px;}
.btn span img { width: 195px;}
@media screen and (max-width:750px){
  .contact table { width: 100%;}
  .contact table th { padding:10px 20px;}
  .contact table td { padding:25px 20px;}
  .contact table th,
  .contact table td { display: block; /*width: 100%;*/ margin: 0;}
  .confirm table th,
  .confirm table td { width: 85%;}
  .contact table, th ,td { border: none;}
  .btn { margin-top:40px;}
  .privacy { margin: 40px 0 0; padding: 20px 25px;}
  .privacy img { width: 100%; max-width: 313px; }
  .reception { display: block; margin-left: 35px; margin-bottom: 20px;}
  .sub-title { margin: 50px 0 27px;}
  .contact input { font-size: 16px; padding: 5px; -webkit-appearance : none; border-radius : 3px; border: 1px solid #A5A5A5;}
  .contact textarea { width: 95% !important; font-size: 16px !important; padding: 5px; -webkit-appearance : none; border-radius : 3px; border: 1px solid #A5A5A5;}
  .btn input { padding: 0; border: 0; width: 195px;}
  .btn img { width: 195px;}
  .btn span { display: block; margin-top: 20px;}
  .btn span img { margin-left: 0 !important;}
}


/*-----------------------
paddingとmargin
------------------------*/
.mgtop_77 { margin-top: 77px;}
.mgtop_30 { margin-top: 30px;}
.mgbtm_15 { margin-bottom: 15px;}
.mgbtm_17 { margin-bottom: 17px;}
.mgbtm_20 { margin-bottom: 20px;}
.mgbtm_27 { margin-bottom: 27px;}
.mgleft_20 { margin-left: 20px;}
.sptop_30 {padding-top: 30px;}