@charset "utf-8";
/* CSS Document */

/*/////////////////共通css/////////////////////*/

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}

html {
	font-size: 62.5%;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	background-color: #fdebcd;
	color: #5A4A3F;
}

a {
	text-decoration:none;
}

.mb{
	display: none;
}

.mbs {
	display: none;
}



/*ヘッダー--------------------------
*/
ul,ol {
	list-style: none inside;
}

header {
	display:flex;
	justify-content: space-between;
	align-content: center;
	background-color: #772051;
/*	background:linear-gradient(to bottom, rgba(171,221,247,1) 80%,rgba(0,0,0,0));*/
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	height: 70px;
	flex-wrap: wrap;
}

header a {
	color:white;
	font-weight: bold;
}

.header_title {
	height: 40px;
	margin: auto 20px;
	display: flex;
	align-items: center;
}

#gNav {
	display: flex;
	margin: auto 15px auto 0;
}

#gNav ul {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: auto 0;
	width: 400px;
}

#gNav ul li {
	word-wrap: break-word;
	font-size: 1.4rem;
}

#gNav ul li a:hover{
	opacity: 60%;
}

input#open{
	display: none;/*大画面では非表示*/
}




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



#wrapper {
	/*background-size: contain;*/
	font-size: 1.4rem;
	line-height: 1.5em;
	/*padding-top: 10px;*/
	/*background-repeat: repeat;*/
}

.top{
	text-align: center;
}

h1 {
  font-size: 3.5rem;
  line-height: 1.3em;
  letter-spacing: 0.05em;
  margin: 3em 0 0;
  text-align: center;
  font-family: "Zen Antique", sans-serif; 
  color: #772051; /* ブランドカラー */
  font-weight: 400;
}

.bold {
	font-weight: bold;
}

.small {
	font-size: 2.4rem;
}

h2 {
  font-size: 1.8rem;
  line-height: 2em;
  letter-spacing: 0.05em;
  margin: 1em 0 1em;
  display: inline-block;
  padding-bottom: 0.3em;
  font-family: "Noto Sans JP", sans-serif;
  color: #5b4a3f;
  font-weight: normal;
}

h3 {
	margin:0 0 20px;
	font-size: 2.0rem;
}

.orange {
	color: #CD5B22;
}

.springred{
	color: #EA5034;
}

.red {
	color: #c01734;
}

.yokoku {
	color: red;
}

.big1 {
	font-size: 3.4rem;
	font-family: "HGP明朝E", "HGP明朝B";
}

.top p {
	font-size: 1.4rem;
}

.small2 {
	font-size: 1.4rem;
	padding: 0;
}

.red2 {
	color: #005377;
	font-weight: bold;
}

.green {
	color:green;
}

.big {
	font-size: 2.2rem;
}

.red3 {
	color: #FF0004;
}

.brown {
	color: #2e0a00;
}

.syuuryou{
	color:red;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.5rem;
	text-align: center;
	
}

/*フッター
---------------------------------------------*/
#footer{
	margin: 0 20px;
}

/* お問い合わせ先
---------------------------------------------*/
.otoiawasesaki {
	margin: 130px auto 0;
	text-align: left;
	padding: 0 10px;
	line-height: 1.7em;
}

.otoiawase {
	margin: 0 auto;
	width: 600px;
}

.otoiawasetitle {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  margin: 10px 0;
  font-weight: bold;
}
.otoiawasetitle:before, .otoiawasetitle:after {
  border-top: 2px solid;
  content: "";
  width: 225px; /* 線の長さ */
}

.otoiawasetitle:before {
  margin-right: 1em; /* 文字の右隣 */
}

.otoiawasetitle:after {
  margin-left: 1em; /* 文字の左隣 */
}

.normal {
	font-size: 1.6rem;
}

.top5 {
	margin-top: 10px;
}

.top10 {
		margin-top: 10px;
}

.top15 {
	margin-top: 15px;
}

.otoiawasekikaku dl {
	padding: 0 0 0 15px;
}

.otoiawasegh {
	margin: 10px 0 20px 0;
}

.otoiawasegh dl {
	padding: 0 0 0 15px;
}


/*コロナ
---------------------------------------------*/
.korona {
	margin: 0;
}

.korona dt{
    background-color: #00867d;
    padding: 5px 5px;
	margin: 15px auto 5px;
	text-align: center;
	width: 600px;
	color: white;
}

.korona dd {
	margin:0 auto;
	width: 600px;
}

.korona dl {
	padding-bottom: 20px;
	text-align: left;
}

.koronadl dd {
	font-size: 1.4rem;
	padding: 0 20px;
}


/*バナー
---------------------------------------------*/
.bunner img {
	width: 180px;
	margin: 10px 10px
}

.bunner {
	display: flex;
	justify-content: center;
	max-width: 480px;
	margin: 10px auto;
	flex-wrap: wrap;
}


.copylight {
	text-align: center;
}

/*TOPへ戻る
----------------------------------------------*/
#footer{
position: relative;
z-index: 2;
}

/*リンクの形状*/
#page-top a{
	transition:all 0.3s;
}

#page-top a:hover{
	opacity: 0.5;
}

#page-top img {
	width: 50px;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	/*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
	opacity: 0;
	transform: translateY(100px);
  }
	
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  opacity: 1;
	transform: translateY(0);
  }
  to {
  opacity: 1;
	transform: translateY(100px);
  }
}




/*フェードイン--------------------------
*/

.fadein {
  opacity : 0;
  transform : translate(0, 50px);
  transition:all 0.5s;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}




/* モバイル版
================================================ */
@media (max-width : 654px ){
   /* #wrapper {
	background-image: url("../images/haikeimb.png");
	}*/
}

@media (max-width : 800px ){
	.header_title {
		height: 35px;
	}
}


@media (max-width : 654px ){
	
	/* ハンバーガーメニュー */
	#open {
		display: none;
	}

	#toggle {
		position:fixed;
		top: 0;
		right: 10px;
		width: 50px;
		height: 50px;
		background: #E95034;
		z-index: 1000;
		cursor: pointer;
	}

	#toggle span,
	#toggle span::before,/*beforeとafterは:が2つ*/
	#toggle span::after {
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		width:40px;
		height: 4px;
		background: #fff;
		transform: translate(-50%,-50%);
		border-radius: 2px;/*ラインを角丸にする*/
		transition: all 0.3s;/*0.3秒間でこの処理をする*/
	}

	#toggle span::before,
	#toggle span::after {
		width: 100%;
		height: 100%;
		content: "";
	}

	#toggle span::before {
		margin-top: -12px;
	}

	#toggle span::after {
		margin-top: 12px;
	}

	#open:checked ~ #toggle span {
		background: rgba(122,43,8,1.00);
	}

	#open:checked ~ #toggle span::before,
	#open:checked ~ #toggle span::after {
		margin: -2px 0 0 -20px;
	}

	#open:checked ~ #toggle span::before {
		transform: rotate(-45deg);/*要素を回転する*/
	}

	#open:checked ~ #toggle span::after {
		transform: rotate(45deg);/*要素を回転する*/
	}

	#gNav {
		position: fixed;
		left: 100%;
		top: 0;
		width: 100%;
		height: 100%;
		background: #E95034;
		transition: all 0.5s;
		padding-top: 20px;
	}

	
	#open:checked ~ #gNav {
		left: 0;
	}
	
	#gNav .logo_nav,
	#gNav .oubo_nav{
		display: block;
	}
		
	#gNav ul {
		display: block;
		width: 80%;
		margin: 0 auto;
	}

	#gNav ul li {
		border-bottom: 2px solid #fff;
		text-align: center
	}

	#gNav ul li:first-child {
		border-top: 2px solid #fff;
	}

	#gNav ul li a {
		line-height: 50px;
		text-align: center;
	}

	
	
	
	/*タブ
	ーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*	.tab , #hoteltab {
	background-image: url(../images/ghhaikeipc.png);
	background-size: contain;
	}
	
	
	.tab{
		display: flex;
		flex-wrap: wrap;
	}
	
	.tab li a{
		display: block;
		background:#ddd;
		margin:0 2px;
		padding:10px 20px;
	}*/
	
	/*liにactiveクラスがついた時の形状*/
	/*.tab li.active a{
		background:#fff;
	}*/


	/*エリアの表示非表示と形状*/
/*	.area {
		display: none;はじめは非表示
		opacity: 0;
		background: #fff;
		padding:50px 20px;
	}*/

	/*areaにis-activeというクラスがついた時の形状*/
/*	.area.is-active {
		display: block;
		animation-name: displayAnime;ふわっと表示させるためのアニメーション
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}*/

/*	@keyframes displayAnime{
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}*/





		
	/*お問い合わせ
	ーーーーーーーーーーーーーーーーーーーーーーーーー*/
	.otoiawase {
		width: 100%;
		margin: 0 auto;
	}
	
	.otoiawasetitle:before, .otoiawasetitle:after {
	  width: 100px; /* 線の長さ */
	}
	
	.otoiawasesaki dd {
		width: 100%;
	}

	
	/*コロナについて
	ーーーーーーーーーーーーーーーーーーーーーーーーー*/
	.korona dd, .korona dt {
	width: 100%;

	}
	
	/*バナー
	---------------------------------------------*/
	.bunner img {
		width: 150px;
		margin: 7px 7px
	}
}

@media (max-width : 560px ){
	h1 {
		font-size: 2.5rem;
	}
	
	h2 {
		font-size: 1.6rem;
		line-height: 4rem;
		}
}


@media (max-width : 427px ){
/*	#wrapper {
		background-image: url("../images/haikeimb.png");
	}*/
	
	
	.pc {
		display: none;
	}
	
	.mb {
		display: block;
	}
	
	
	h1 {
		font-size: 2rem;
		margin-bottom: 10px;
	}
	
	.small {
		font-size: 1.8rem;
	}

	h2 {
		font-size: 1.4rem;
		line-height: 2.4rem;
	}

	h3 {
		font-size: 1.6rem;
	}

	.big1 {
		font-size: 2.6rem;
	}

	.top p {
		font-size: 1.4rem;
	}
	
	
	/*お問い合わせ
	ーーーーーーーーーーーーーーーーーーーーーーーーー*/
	.otoiawase {
    width: 100%;
	}

	.otoiawasetitle:before, .otoiawasetitle:after {
		width: 25vw; /* 線の長さ */
	}
	
	
	/*コロナ
	ーーーーーーーーーーーーーーーーーーーーーーーーー*/
	.koronadl dd, .koronadl dt {
	    width: 100%;
	}
	

	/*バナー
	---------------------------------------------*/
	.bunner img {
		width: 130px;
		margin: 7px 7px
	}
}

@media (max-width : 275px ){
	.pc {
		display: none;
	}
	
	.mb {
		display: none;
	}
	
	.mbs {
		display: block;
	}
	
    .button img {
        width: 80px;
    }
	
	/*バナー
	---------------------------------------------*/
	.bunner img {
		width: 120px;
		margin: 7px 7px
	}
	
	}