@charset "utf-8";
	
/*
theme Name: WP hirofuji
Author:aplusb
Description: original theme
version： 1.0.0
*/

@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:300,400,500,700|Noto+Sans+JP:300,400,500,700&display=swap&subset=japanese');

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;/*16px*/
}

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


body {
  font-size:1.6rem;
  font-size: 16px;  /*サイト全体のフォントサイズを指定*/
  line-height: 1.6; /*行間の指定*/
  font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Avenir','Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';  /*フォントの指定*/
  color: #343434; /*フォントの色*/
  margin: 0;
  padding: 0;
  margin-top: 100px;/*ヘッダーと同じ高さのマージンを追加*/
}

/*　画面サイズが896pxまでははここを読み込む　*/
@media screen and (max-width: 896px) {
body {
  font-size:1.6rem;
  font-size: 16px;  /*サイト全体のフォントサイズを指定*/
  line-height: 1.6; /*行間の指定*/
  font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Avenir','Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';  /*フォントの指定*/
  color: #343434; /*フォントの色*/
  margin: 0;
  padding: 0;
  margin-top: 60px;/*ヘッダーと同じ高さのマージンを追加*/
}
}


/*見出しを全て太字で表示するように指定*/
	
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  border:0px solid #f98;
  font-family: 'M PLUS 1p', sans-serif;
	margin: 0;
	padding: 0;
}

h2 {
 font-size:3.2rem;
  font-size:32px;font-weight: 500;
  border:1px solid #f98;
  font-family: 'M PLUS 1p', sans-serif;
	margin: 0;
	padding: 0;
}

dl,dt,dd,ul,li{
	margin: 0;
	padding: 0;	
	}

ol,ul{
	list-style:none;
	}

	
/*画像の最大幅を画面のサイズの最大幅に設定*/
	
img {
  max-width: 100%;
  height: auto;	
}
	


/*----------------------------------------*/
/*ヘッダー*/
	
header {
  position: fixed;/*ヘッダーを固定*/
  z-index: 9999;/*一番前に表示されるように設定*/
  top: 0;/*画面一番上で固定*/
  width: 100%;/*ヘッダーが横幅いっぱいになるように指定*/
  background-color:#FFF;
  margin:0;
　padding:0;
  border-bottom:solid 1px #EEE;
}

.header-inner{ position: relative; }

.site-title {
  display: table;
  margin: 0;
　padding:0;
  width: 100%;
  height:100px;
}

#logo-img,
#logo,
#nav-drawer {
  display: table-cell;
  vertical-align: middle;
}

#logo-img {
  width: 100px;
  text-align: center;
  padding-top:5px;
}

#logo {
  text-align:left;
  font-size:2.8rem;
  font-size:28px;
  vertical-align: middle;
  line-height: 1.0; /*行間の指定*/
  font-family: 'Noto Sans JP', sans-serif;
  font-weight:bold;
  letter-spacing:-0.1em;
}

#logo span {
  font-size:1.4rem;
  font-size:14px;
  display:block;
  letter-spacing:0.05em;
  margin-bottom:5px;
}

/*anchor*/
#logo a:link,
#logo a:visited,
#logo a:hover,
#logo a:active { color: #000; text-decoration:none; }



/*---------------------------------------------------------*/
/*ハンバーガーメニュー*/
#nav-drawer  {
  width: 90px;
  border-left: 1px solid #eee; 
border-bottom: 1px solid #eee;
}


/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open {
  content:"*";
  display: block;
  max-width: 90px;
  height: 90px; 
}

#nav-open img{
  width: 100%;
  height: auto; 
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#header-nav {
 margin:15px auto;
 padding:5px 25px;
}

#header-nav li {
 font-size:1.4rem;
 font-size:14px;

}
#header-nav li a{
 display:block; border-bottom:1px dotted #589dd0;
 padding:10px;
}

#header-nav li a:before{
 content:"*";
 margin-right:10px; border:1px dotted #589dd0;
}


/*　画面サイズが896pxまでははここを読み込む　*/
@media screen and (max-width: 896px) {

.site-title {
  display: table;
  margin: 0;
　padding:0;
  width: 100%;
  height:60px;
  -webkit-box-sizing: border-box;	
  -moz-box-sizing: border-box;	
  box-sizing: border-box;
}

#logo-img,
#logo,
#nav-drawer {
  display: table-cell;
  vertical-align: middle;
}

#logo-img {
  width:60px;
  text-align: center;
  padding-top:8px;
}

#logo-img img{
  width: 80%;
  height:auto;
}

#logo {
  text-align:left;
  font-size:1.8rem;
  font-size:18px;
  vertical-align: middle;
  line-height: 1.0; /*行間の指定*/
  font-family: 'Noto Sans JP', sans-serif;
  font-weight:bold;
  letter-spacing:-0.1em;
}

#logo span {
  font-size:1.1rem;
  font-size:11px;
  display:block;
  letter-spacing:0.05em;
  margin-bottom:5px;
}

/*ハンバーガーメニュー*/
#nav-drawer  {
  width: 60px;
  border-left: 1px solid #eee; 
  border-bottom: 1px solid #eee;
}

/*ハンバーガーアイコン*/
#nav-open {
  content:"*";
  display: block;
  max-width: 60px;
  height: 60px; 
}

#nav-open img{
  width: 100%;
  height: auto; 
}

}


/*----------------------------*/
/* 予約案内エリア */
.reserve-btn {
  position:fixed;
  top:15px;right:100px; 
  display: table;
  table-layout: fixed;
  text-align: center;
  margin:0;
  padding:0;
  border:0px solid #589dd0;
}

.c-reserve-btn {
  display:none;
}

/*　画面サイズが896pxまでははここを読み込む　*/
@media screen and (max-width: 1023px) {
.reserve-btn{
  display:none;}

.c-reserve-btn {
  width:100%;
  height:58px;
  position:fixed;
  z-index: 9999;
  bottom:0;
  left:0; 
  display: table;
  table-layout: fixed;
  text-align: center;
  margin:0;
  padding:0;
background-color:#FFF;  border-top:solid 1px #EEE;
}

}

.reserve-btn li {
  display: table-cell;
  vertical-align: middle;
  border-right: 6px solid #FFF;
}

.c-reserve-btn li {
  display: table-cell;
  vertical-align: middle;
  border-right: 4px solid #FFF;
}

.c-reserve-btn li:first-child {
   width: 205px;
}

#tel-btn {
  content:"*";
  display: block;
  width: 238px;
  height: 70px; 
  background:url(img/btn_tel.gif) no-repeat center center;
  background-size: 100% auto;/**//**/
}

#mail-btn,
#line-btn,
#map-btn{
 color: #fff;
 font-size:1.0rem;
 font-size:10px;
 width:68px;
 text-decoration:none;
    display:block;
    text-align:center;
    margin:0;
    padding:12px 0px ;
}

#c-tel-btn {
  content:"*";
  display: block;
  width: 200px;
  height: 50px;
  background:url(img/btn_tel.gif) no-repeat center center;
  background-size: 95% auto;/**//**/
}

#c-mail-btn,
#c-line-btn,
#c-map-btn{
 color: #fff;
 font-size:1.0rem;
 font-size:10px;
 /*width:40px;*/
 text-decoration:none;
    display:block;
    text-align:center;
    margin:0;
    padding:6px 0px ;
}


#mail-btn,#c-mail-btn{ background-color:#589dd0; }
#line-btn,#c-line-btn{ background-color:#85c400; }/**/
#map-btn,#c-map-btn{ background-color:#fcb906; }/**/

#mail-btn:hover,#c-mail-btn:hover{ background-color:#246fa7; }
#line-btn:hover,#c-line-btn:hover{ background-color:#67b700; }/**/
#map-btn:hover,#c-map-btn:hover{ background-color:#fc9706; }/**/




/*-----------------------------------*/
/*ページ設定*/

.container,
.contents,
.contents-wide,
.contents-top {
background-color: #FFF;
border:2px solid #c98; }

#sidebar{background-color: #aefffc; }

/*------------------------*/
/*コンテンツのサイズ指定*/

	
.container {
  width: 100%;
  margin:25px auto 0;
  padding: 0;
  text-align:center;
  border:1px solid #008;
}


.yoyakucheck {
  position: fixed;/*ヘッダーを固定*/
  z-index: 9999;/*一番前に表示されるように設定*/
  top: 30%;
  right:0;
  width: 80px;
  /*height: 250px;ヘッダーが横幅いっぱいになるように指定*/
  text-align: center;
  background-color: #e84577;
  margin:0;
　padding:0;  border:solid 0px #000;    border-radius:10px 0px 0px 10px;
}

.yoyakucheck span {
  color:#FFF;
font-size:1.8rem;
font-size:18px;
  text-align: left;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  display: inline-block;
  padding: 35px 0;
  box-sizing: border-box;
}

/*　画面サイズが896pxまでははここを読み込む　*/
@media screen and (max-width: 1023px) {
.yoyakucheck {
  display:none;
}

}

#caselist-info,
#service-info,
#concept-info,
#voice-info,
#reserve-info {
  width: 100%;
  margin:0 auto;
  padding: 20px 0;
  text-align:center;
  border:0px solid #009080;
} 

/*----------------------------*/	 
/*main-img*/

#main-img{
    position: relative;
    padding-bottom:110px;
    border:2px solid #800ce5;
}


/*　画面サイズが896pxまでははここを読み込む　*/
@media screen and (max-width: 896px) {
.object-fit-img {
	width: 100%;
	min-height: 400px;
    object-fit: cover;  object-position: 35% 100%

 }
}

/*　画面サイズが897pxからはここを読み込む　*/
@media screen and (min-width: 897px) {
.object-fit-img {
	width: 100%;
	min-height: 650px;
    object-fit: cover;  object-position:10% 100%
 }
 }


.ekiten-no1{
position: absolute;/**/
left: 0;
right: 0;
bottom: 0;
margin: auto;
	padding: 0;
    border:1px solid #0c80e5;/*line-height: 1.0; 行間の指定*/
}

.ekiten-no1-copy{
 font-size:2.0rem;
font-size:20px;
margin: 0;
	padding: 0;
    border:1px solid #0c80e5;
}
/*--------------------------------------*/
/*各エリアの背景色とサイズ指定*/

#caselist-info, #reserve-info { background-color: #336699; } 
#service-info { background-color:#c1d1e0; }
#concept-info { background-color:#8ecbde;}
#voice-info { background-color:#e5e5e5;}

.policy-container,
.caselist-container,
.service-container,
.concept-container{
  max-width: 1120px;
  margin:20px auto;
  padding: 0;
  display:flex;
  flex-wrap: wrap;
  border:0px solid #f00;
  justify-content: space-between;
  align-items: stretch;
}


.policy-container > div,
.caselist-container > li,
.service-container > li,
.concept-container > div {
  border:0px solid #0f0;
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
  box-sizing: border-box;
  margin:15px auto;
}

.caselist-container > li,
.concept-container > div {
  border-radius:10px; /*角丸*/
  background-color:#FFF; /*背景色*/
}


.caselist-container > li{
  width:350px;
  padding-bottom:8px;
}

.concept-container > div{
  width:540px;
}


.case-img { /*親div*/
  position: relative; /*相対配置*/
  text-align:center; /*pタグ内で更に中央寄せ*/
  }

.case-img h4 {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  font-size: 1.8rem; /*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  width:350px;
  bottom:10px;
  left:0;
  margin:0;
  padding:0;

  }

.case-img img,
.policy-img img {
  width: 100%;
  height:auto;
  }

.copy-area {
  margin:10px 15px;
  padding:0;
  border:0px solid #0f0;
  text-align:left;
  font-size:1.4rem;
  font-size:14px;
  }

.copy-area-center {
  margin:10px 15px;
  padding:0;
  border:0px solid #0f0;
  font-size:1.4rem;
  font-size:14px;
  }


/*--------------------------------------------*/
/*　画面サイズが896pxまでははここを読み込む　*/

@media screen and (max-width: 896px) {
.policy-container,
.caselist-container,
.service-container,
.concept-container{
  max-width:98%;
  margin:20px auto;
  padding: 0;
  display:flex;
  flex-direction: column;
  border:0px solid #f00;
  justify-content: space-between;
  align-items: stretch;/**/
}

.caselist-container > li{
  width:330px;
  padding-bottom:8px;
}

.concept-container > div{
  width:330px;
}

.case-img h4 {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  font-size: 1.8rem; /*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
  width:330px;
  bottom:10px;
  left:0;
  margin:0;
  padding:0;

  }

}



/*policyの文章と写真*/

.item {
  display: flex;
  flex-wrap: nowrap;
　width:1120px;
}

.item:nth-child(odd) {
  flex-direction: row-reverse;
}

.policy-img {
  width: 45%; 
  border:1px solid #C00;  padding:20px;
}

.policy-text {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  text-align:left;
  padding:20px;
  justify-content: center;
  align-content: center;
  align-items: center;  border:3px solid #09F;
}

/*　画面サイズが896pxまでははここを読み込む　*/
@media screen and (max-width: 896px) {
.item {
  display: flex;
  flex-direction: column;
　width:90%;
}

.item:nth-child(odd) {
   flex-direction: column;
}

.policy-img {
  width: 90%; 
  border:1px solid #C00;  padding:20px;
}

.policy-text {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex: 1;
  text-align:left;
  padding:20px;
  justify-content: center;
  align-content: center;
  align-items: center;  border:3px solid #09F;
}
}

/*--------------------------*/
/*table*/

table{
  /*width: 100%;*/
  border-collapse:separate;
  border-spacing: 0;
}

table th,table td{
  text-align: center;
  width: 11%;
  padding: 15px 0;
}

table th{
  color:white;
  background: linear-gradient(#829ebc,#225588);
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
}

table td{
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:1px solid #a8b7c5;
}

table td:last-child{
  border-right: 1px solid #a8b7c5;
}


/*-------------------------------*/
/*フッターの上に境界線を引く*/
	
footer {
  border: solid 5px #00F;
  text-align:center;
}

.footer-inner{ border:1px solid #095; }




/*-------------------------------*/
/* footerの予約案内3列*/

.reserve-container{
  /*border:2px solid #f8c900;*/
  margin:25px auto;
  padding: 0;
  display: table;
  width: 100%;
}

.reserve-container > div{
  border:0px solid #f800c9;/* */
  margin:0 auto;
  padding: 12px 20px;
  width: 33.3%;
  display: table-cell;
  font-size:1.3rem;
  font-size:13px;/*  */
  color:#FFF;
}

/*　画面サイズが896pxまでははここを読み込む　*/
@media screen and (max-width: 896px) {
.reserve-container > div{
  border:1px solid #f800c9;
  margin:0px auto;
  padding: 15px 10px;
  display: block;
  width: 100%;  -webkit-box-sizing: border-box;	
  -moz-box-sizing: border-box;	
  box-sizing: border-box;
}
}

.reserve-container .case-tel{ background-color:#4885b8; }
.reserve-container .case-mail{ background-color:#589dd0; } 
.reserve-container .case-line{ background-color:#4aa834; } 

/*電話とメールのタイトル*/
.reserve-container .case-tel h4,
.reserve-container .case-mail h4{
  border-bottom:2px solid #FFF;
  margin:0 auto;
  padding: 8px;
  font-size:2.0rem;
  font-size:20px;
 /* font-weight:normal;*/
  white-space: nowrap
}

/*line予約タイトル*/
.reserve-container .case-line h4{
  margin:0 auto;
  padding:8px 0 8px 65px;
  font-size:2.2rem;
  font-size:22px;
  line-height: 1.2;
　text-align:left;
  color:#FF0;
  display:block;
  max-width:280px;
  background: url(img/icon_line.png) no-repeat left center/20%;
  -webkit-box-sizing: border-box;	
  -moz-box-sizing: border-box;	
  box-sizing: border-box;
　white-space: nowrap;
}

.icon {
    padding-right : 8px;
}

.telno {
  font-size:3.0rem;
  font-size:30px;
  font-weight:bold;
}


.reserve-container .case-line ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  margin:15px auto 0;
  padding:0.5em;
  text-align:left;
  max-width:290px;
  border:1px solid #F89;
  /*background: #f5faff;*/
}
.reserve-container .case-line ol li {
  position: relative;
  padding-left: 25px;
  line-height: 1.5em;
  padding: 0.2em 0.2em 0.2em 25px;
}

.reserve-container .case-line ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #FF0;
  color: #4aa834;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 13px;
  border-radius: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  line-height: 22px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


#more-btn,
#more-btn-mail,
#more-btn-line {
    width:240px;
    font-size:1.8rem;
    font-size:18px;
    /*font-weight:bold;*/
    text-decoration:none;
    display:block;
    text-align:center;
    margin:15px auto;
    padding:8px 15px ;
    border-radius:50px;
}

#more-btn {
    color:#fff;
    background-color:#fda100;
}

#more-btn-mail {
    color:#336699;
    background-color:#FFF;
}

#more-btn-line {
    color:#4aa834;
    background-color:#FFF;
}


/*anchor*/
#more-btn:link { color: #FFF; text-decoration:none; }
#more-btn:visited { color: #FFF; text-decoration:none; }
#more-btn:hover { color: #000;  text-decoration:none; }
#more-btn:active { color: #009;  text-decoration:none; }

/*anchor*/
#more-btn:link { color: #FFF; text-decoration:none; }
#more-btn:visited { color: #FFF; text-decoration:none; }
#more-btn:hover { color: #000;  text-decoration:none; }
#more-btn:active { color: #009;  text-decoration:none; }


.copyrights{
	width:100%;
    height:36px;
    margin-top:20px;
    padding-top:15px;
    text-align:center;
    color:#FFF;
		font-size:1.1rem;
font-size:11px;

    background-color:#000000;
    border-top:4px solid #ac9444;
	}
	 


/* Pagetop-btn

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;background: #DDDDDD;
}*/

/*#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 40px;text-align:center;padding-top:10px;
  text-decoration: none;
color:#666666;
}*/



/*anchor*/
a:link { color: #3366CC; text-decoration:none; }
a:visited { color: #006699; text-decoration:none; }
a:hover,#navi a:hover { color: #ac9444;  text-decoration:none; }
a:active { color: #009944;  text-decoration:none; }


/*image_alpha*/
a:hover img {
	-moz-opacity:0.75;
	opacity:0.75;/*mozilla*/
	filter: alpha(opacity=75);/*IE*/
	-ms-filter: alpha(opacity=75);
    }


@media (min-width: 768px) {
	
  /*コンテンツとサイドバーを横に並べる*/
	
  .container:after {
	
    display: block;
	
    clear: both;
	
    content: '';
	
  }
	
  .contents {
    float: left;	
    width: 780px;
	border:1px solid #009900;
	margin-right:50px;
  }
	
  #sidebar {
	
    float: right;
	
    width: 280px;	border:0px solid #0FF900;
	
  }
	
}

.contents, #sidebar {
  margin: 60px 0;
	}