@charset "utf-8";
/*-------- 全ページのレイアウトcss --------*/

/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {	max-width: 100%; height: auto;}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {width:100%;}

/* モバイルレイアウト : 480 px およびそれ以下. */

/* --------------------------------------------------------
header
-------------------------------------------------------- */

#border{
	clear:both;
	width:100%;
	height:8px;
	background: -moz-linear-gradient(-45deg, rgba(255, 255, 77, 0.5), rgba(163, 217, 0, 0.5));
	background: -webkit-linear-gradient(-45deg, rgba(255, 255, 77, 0.5), rgba(163, 217, 0, 0.5));
	background: linear-gradient(-45deg, rgba(255, 255, 77, 0.5), rgba(163, 217, 0, 0.5));
}

header{ overflow:hidden;}

.headerTitle{}

h1{	width:82%;	display: inline; padding:0; margin:0 0 4%; clear: none; float: left;}

/* 労災保険 */
.rousai{
	clear:both;
	float:none;
	margin:0 auto 6%;
	padding: 3% 0;
	width:70%;
    border: #DC7E4B solid 1px;
    background: #FEF8EF;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#663300;
	font-size:1.2rem;
	text-align:center;
}


#pcHeaderWrap , #pcTel , nav,.pcNav{ display:none;}/*スマホ非表示*/

/*ドロワーボタン*/
nav.drawerNav , nav.drawer-nav{ display:block; z-index:1000;}

.drawer-menu li{
	padding:10px 0px 10px 20px;
	border-bottom:#036 solid 1px;
}

.drawer-menu a{
	color:#333333;
	text-decoration:none;
}

/* --------------------------------------------------------
ネット予約
-------------------------------------------------------- */
.spNet{	width:75%;	margin:0 auto 10%; text-align:center;}

/* --------------------------------------------------------
footer
-------------------------------------------------------- */

footer nav{ display:block; width:95%; margin:0 auto; overflow:hidden;}

footer nav a{color:#333333; text-decoration:none;}
footer nav a:visited{color:#333333;}

.footerNavWrap	{
	color:#333333;
	font-size:15px;
	text-align:center;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.footerNavWrap li{	width: 30%;	padding: 2% 1.5% 1%;}
li.underLineLi{ border-bottom: 3px solid  #E4F5A3;}/*該当ページのみ下線をつける*/

address{ display:block; width:90%; margin:0 auto;  padding:8% 0; text-align:center;}
address p { text-align:left; font-style:normal;}
address .addPc img{	width: 70%;}

small{
	display:block;
  margin-bottom: 20vw;
	padding:3% 0;
	text-align:center;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: -moz-linear-gradient(-45deg, rgba(255, 255, 77, 0.5), rgba(163, 217, 0, 0.5));
	background: -webkit-linear-gradient(-45deg, rgba(255, 255, 77, 0.5), rgba(163, 217, 0, 0.5));
	background: linear-gradient(-45deg, rgba(255, 255, 77, 0.5), rgba(163, 217, 0, 0.5));
}

/* --------------------------------------------------------
pagetop
-------------------------------------------------------- */

#page-top {
    position: fixed;
    bottom: 3vw;
    right: 3vw;
    margin: 0;
    font-size: 77%;
}
#page-top img{ width: 60px;}

/* --------------------------------------------------------
施設基準
-------------------------------------------------------- */
.banner{
	text-align: center;
	padding: 0 0 5%;
}
/* --------------------------------------------------------
Instagram
-------------------------------------------------------- */
.Instagram_side{
	display:none;
}

/* --------------------------------------------------------
モーダルウィンドウ
-------------------------------------------------------- */
/*infoエリアをはじめは非表示*/
#info, #modal02{	display: none;}

/* ご意見・ご要望 */
.goiken .goiken-btn{
  position: fixed;
  bottom: 3vw;
  left: 3vw;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 15px 0;
  width: 70%;
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-size: 1.0rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  background-color: #FF9326;
  border-radius: 100px;
  box-sizing: border-box;
}

.goiken-content{
  margin: 0 auto;
  padding: 5%;
  max-width: 500px;
  a img{
    margin: 20px auto 0;
    display: block;
  }
}

.modaal-container{ max-height: 85vh;	border: #85b200 solid 3px;	overflow-y: auto;}
.modaal-container::-webkit-scrollbar-thumb {
  background: #ff8095;
  border-radius: 5px;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container h2{
	color:#618200;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:1.2rem;
	font-weight:normal;
	text-align:center;
	line-height:2rem;
	margin:0 0 1rem;
	padding:0;
  span{
    display: inline-block;
  }
}
.modaal-container h3{	margin:0 0 1rem;	padding:0.5em;	color:#FFF;	font-size:1.1rem;	text-align:center;	line-height:2rem; background:#618200;}
.modaal-container p{	margin:1em 0;	padding:0;	font-size: 1rem;	line-height: 1.8rem;}
.modaal-container ul{	margin:1rem 0;	padding: 0 0 0 1rem;	font-size: 1rem;	line-height: 1.8rem;}
.modaal-container li{	margin:0;	padding:0;}
	.modaal-container li::marker{	color:#618200;}
.modaal-container ol{
	margin:0.5rem 0;
	padding:0;
	list-style:none;
	padding-left: 1.3em;
	color:#d73700;
	text-indent: -1.3em;
	font-size:1rem;
	line-height: 1.8rem;
}

/* 閉じるボタン */
.modaal-close:after,
.modaal-close:before{	background:#85b200;}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{	background:#618200;}

/* タブレットレイアウト : 768 px～。モバイルレイアウトからスタイルを継承。 */

@media print, screen and (min-width: 768px) {

body{  min-width:1200px;}

/* --------------------------------------------------------
header
-------------------------------------------------------- */

header{
	width:95%;
	margin:0 auto;
	min-width:1200px;/*改行されないようにする*/
}

.headerTitle{
	clear: none;
    float: left;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

h1{ display:block; width:560px; margin:0; padding:25px 0;}

/* 労災保険 */
.rousai{
    margin: 0 0 0 50px;
    padding: 20px 30px;
	width: auto;
	font-size:25px;
}
/* スクエア対応 */
@media print, screen and (max-width: 1630px) {
	.headerTitle{display: inline;}
	.rousai{ margin:20px auto; padding:10px 0; width:250px; font-size:20px;}
}

nav.drawerNav{display:none}/*スマホのみ表示*/

#pcHeaderWrap{
	display:block;
	width:625px;
	float:right;
}

#pcTel{
	display:block;
	width:325px;
	float:right;
}

nav.pcNav{
	display:block;
	clear:both;
	float:right;
	padding:2% 0;
}
nav.pcNav ul{	display:flex;}

/* --------------------------------------------------------
ネット予約
-------------------------------------------------------- */
.spNet{	display:none;}
.pcNet{
	margin:8px 0 0;
	width:250px;
	float:left;
}
/* --------------------------------------------------------
footer
-------------------------------------------------------- */

footer{ clear:both; overflow:hidden; padding: 1% 0;}

footer nav{ width:850px; margin:0 auto; padding: 0;}
footer nav a:visited{ color:#000;}
footer nav a:hover{
	color:#42912B;
	-webkit-transition: 0.8s;/*ゆっくりと変わる*/
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}

.footerNavWrap	{	font-size:20px;    flex-wrap: nowrap;}
.footerNavWrap li{	width:auto;	padding: 2% 0 0.5%;}
li.underLineLi{ border-bottom: 3px solid  #E4F5A3;}/*該当ページのみ下線をつける*/

footer address{
	width:980px;
	margin:0 auto;
	padding:3% 0 2%;
	overflow:hidden;
}

footer address img:nth-of-type(1){ display:block; float:left; width:420px;}
.addPc{ width:500px; float:right;}
.addPc img:nth-of-type(1){ width:375px;}
.addPc p{ clear:both;}

small{  margin-bottom: 0; padding:0.5% 0; font-size:15px;}

/* ページトップ */
#page-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    margin: 0;
    font-size: 100%;
}

/* 施設基準 */
.banner{
	text-align: center;
	padding: 50px 0 0;
}

.banner a:hover{
	opacity: .5;
}
/* --------------------------------------------------------
Instagram
-------------------------------------------------------- */
.Instagram_side{
	display:block;
	position: fixed;
	top:250px;
  right: 0;
  bottom: auto;
  left: auto;
  z-index: 3;
	background-color: #FFF;
  border: 2px solid;
	border-image: linear-gradient(#E73AB5, #F7D046, #6A1FF5) 1;
	border-right: none;
	padding: 10px;
	  width: 90px;
		box-sizing: border-box;
}
.Instagram_side img{
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
.Instagram_side a{
	text-decoration: none;
	transform: none;
}
.Instagram_side a:hover{
	transform: none;
	 opacity: 1;
}
.Instagram_side p{
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		margin: 10px 0 0;
}

/* --------------------------------------------------------
モーダルウィンドウ
-------------------------------------------------------- */

.goiken .goiken-btn{
  position: fixed;
  top:380px;
  right: 0;
  bottom: auto;
  left: auto;
  z-index: 3;
  display: block;
  margin: 0;
  padding: 20px 30px;
  width: 90px;
  color: #663300;
  writing-mode: vertical-rl;
  background-color: #FFF2E6;
  border: #FF9326 2px solid;
  border-right: none;
  border-radius: 0;
}

.goiken-content{
  margin: 0 auto;
  padding: 60px 0;
  max-width: 500px;
  a img{
    margin: 20px auto 0;
    display: block;
  }
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{	max-width: 980px;}
.modaal-container h2{	font-size:24px;	margin:0 0 15px;	padding:0;}
.modaal-container h3{	font-size:18px;	padding:5px 0;}
.modaal-container p{	margin:0;	padding:0;	font-size: 15px;	line-height: 28px;}
.modaal-container ul{	margin:0 0 10px;	padding: 0 0 0 30px;	font-size: 15px;	line-height: 28px;}
.modaal-container li{	margin:0;	padding:0;}
.modaal-container ol{	margin:5px 0;	padding:0 0 0 30px;	font-size:15px;	line-height: 28px;}

}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {}