@charset "UTF-8";


body	{
	margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	color: #eaeaea;
	background:#f0efea;
}
	

/* サイト名 */
.site h1 a	{color: #000000;
	text-decoration: none}

.site h1	{margin: 0;
	font-size: 30px}



/* ナビゲーション */
 #globalnavi	{display:block;}
 #menu	 { display:none; }
 
 
 #globalnavi{
  margin: 0;
  padding: 0;
  width: 600px;
  height: 180px;
  float:right;
}

#globalnavi ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#globalnavi li{
  text-indent: -9999px;
  float:left;
  width: 60px;
  margin: 0;
  padding: 0;
}

#globalnavi a{
  display: block;
  width: 100%;
  height: 180px;
  background-image: url(img/menu.jpg);
  background-repeat: no-repeat;
  
}

#menu1 a{background-position: 0 0;}
#menu2 a{background-position: -60px 0;}
#menu3 a{background-position: -120px 0;}
#menu4 a{background-position: -180px 0;}
#menu5 a{background-position: -240px 0;}
#menu6 a{background-position: -300px 0;}
#menu7 a{background-position: -360px 0;}
#menu8 a{background-position: -420px 0;}
#menu9 a{background-position: -480px 0;}
#menu10 a{background-position: -540px 0;}

#globalnavi a:hover{
  background-image: url(img/menu.jpg);
  background-repeat: no-repeat;
}

#menu1 a:hover{background-position: 0 -180px;}
#menu2 a:hover{background-position: -60px -180px;}
#menu3 a:hover{background-position: -120px -180px;}
#menu4 a:hover{background-position: -180px -180px;}
#menu5 a:hover{background-position: -240px -180px;}
#menu6 a:hover{background-position: -300px -180px;}
#menu7 a:hover{background-position: -360px -180px;}
#menu8 a:hover{background-position: -420px -180px;}
#menu9 a:hover{background-position: -480px -180px;}
#menu10 a:hover{background-position: -540px -180px;}


/* ヘッダー画像 */
.topimg	{width: 100%;
	height: auto;
	vertical-align: bottom}


/* お知らせ */

.news		{ padding-left:40px;
			padding-right:40px}

	
	
.news h1	{margin-top: 0;
	margin-bottom: 5px;
	font-size: 18px;
	color: #666666}

.news ul	{margin: 0;
	padding: 0;
	list-style: none}

.news li a	{display: block;
	padding: 5px;
	border-bottom: dotted 2px #dddddd;
	color: #4d433e;
	font-size: 14px;
	text-decoration: none}

.news li a:hover	{background-color: #eeeeee;
					text-decoration: underline}

.news time	{color: #888888;
	font-weight: bold}

.news a:after	{content: "";
	display: block;
	clear: both}

.news time	{float: left;
	width: 60px}

.news .text	{float: none;
	width: auto;
	margin-left: 60px}

#pageTop  {color:#82BB73;
		text-align:right;
		font-size:14px;}
#pageTop a {
		text-decoration: none;}


			
/* 概要 */
.gaiyou a	{display: block;
	background-color: #f0efea;
	color: #4d433e;
	text-align: center;
	text-decoration: none;
	padding:2px}

.gaiyou a:hover	{opacity: 0.8;
				text-decoration: underline}

hr {
  border-width: 1px 0 0 0; /* 太さ */
  border-style: solid; /* 種類 */
  border-color: silver; /* 色 */
}


/* フッターロゴ */
.box7	{
		text-align:center;
	background-color: #dcd9d2;
	padding:20px}

/* フッター電話番号 強調 */
.box8 a[href^="tel:"] {
  font-size: 18px;
  font-weight: bold;
  color: #4b3621;
  text-decoration: none;
  }

.box8 a[href^="tel:"]:hover {
  text-decoration: underline;
}

/* 電話アイコン */
.tel-link {
  color: #4b3621;
  font-weight: bold;
  text-decoration: none;
}

/* コピーライト */
.copyright p	{
	color: #eaeaea;
	font-size: 14px}
	

address {
	font-style:normal;
	font-size: 14px}
	

 
	

/* BOX8をバーの形にする */
/* BOX8をバーの形にする */
.box8 {
  padding-top: 20px;
  padding-bottom: 30px;
  background-color: #9e9997;}


/* ボックスの左右 */
.boxA, .box4, .box6, .box8
	{padding-left: 20px;
	padding-right: 20px}


/* ボックスの上下 */
.boxA	{padding-top: 20px;
	padding-bottom: 0px}

.box4	{padding-top: 20px;
	padding-bottom: 20px}

.box6	{padding-top: 20px}

.box6-1, .box6-2, .box6-3
	{
	padding: 30px 30px 30px 30px;
	}

.box9	{
	padding: 20px;
	color:#333333;
	background-color: #ffffff;
	
}
	
/* お寺紹介文（共通） */
.news .temple-text {
  color: #4b3621;
  background: #f8f6f2;
  padding: 12px 16px;
  border-left: 4px solid #9e9997;
  margin-bottom: 20px;
  line-height: 1.8;
}

/* アクセスページ用（共通でOK） */
.map {
  margin: 20px 0;
}

.map iframe {
  width: 100%;
  height: 400px;
  border: 0;
}

.box9 a[href^="tel:"] {
  color: #4b3621;
  font-weight: bold;
  text-decoration: none;
}

/* ########### 599px以下 ########### */
@media (max-width: 700px) {

   /* ヘッダー全体を基準にする */
  header {
    position: relative;
  }


  /* 写真の高さ調整 */
  .topimg {
    height: 200px;
    object-fit: cover;
  }

/* Googleマップ */
.map iframe {
    height: 300px;
  }

/* ナビゲーション */
#globalnavi		{display:none;}
#menu	{display:block;}


#menu ul	{margin: 0;
	padding: 0;
	list-style: none}

#menu li a	{display: block;
 padding: 14px 10px;   /* タップしやすく */
  color: #000000;
  font-size: 16px;      /* 文字サイズUP */
  text-decoration: none;
  line-height: 1.6;
 border-bottom: 1px solid #ddd;
}

#menu li a:hover	{background-color: #eeeeee}


#ham-menu {
    background-color: #b9d7be; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 10px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -200px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 200px; /*メニュー横幅*/
    z-index: 1000;
}

#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}

#menu-icon {
    background-color: #f0efea; /*アイコン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
   position: fixed;
  display: block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 34px;
  background-color: #f0efea;
  color: #333;
  border-radius: 0 0 0 10px;
  cursor: pointer;
  right: 0;
  top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
}

/* メニュー文字 */
#menu-icon span {
  display: block;
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
}

#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-200px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}

.news		{ padding-left:10px;
			padding-right:10px}


.box8-inner		{text-align:center}
}


/*電話アイコン*/
  .tel-link {
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    gap: 8px;
  }

  .tel-link .fa-phone {
    font-size: 22px;
  }


/* ########### 768px以上 ########### */
@media (min-width: 768px) {

/* BOX1とBOX2を横に並べる設定 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box1	{float: left;
	width: auto}

.box2	{float: right;
	width: auto}

/* BOX6-1、BOX6-2、BOX6-3を横に並べる設定 */
.box6:after	{content: "";
	display: block;
	clear: both}

.box6-1	{float: left;
	width: 33.3333%;
	padding-right: 10px;}

.box6-2	{float: left;
	width: 33.3333%;
	padding-left: 5px;
	padding-right: 5px}

.box6-3	{float: left;
	width: 33.3333%;
	padding-left: 10px}

.box6-1, .box6-2, .box6-3
	{-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}


.box8:after		{content:"";
				display:block;
				clear:both}
				
.box8-1		{float:left;
			width:50%;
			}

.box8-2		{float:left;
			width:50%;
			display: inline-block;
			text-align: right}
			
.box8-inner		{ padding-left:100px;
			padding-right:100px}	
.add { text-align: left; margin-left: auto; margin-right: 0px; width: 300px; } 
							

}

/* ########### 1190px以上 ########### */
@media (min-width: 1190px) {

/* 全体の横幅を固定 */
.box4, .boxA-inner, .box6
	{width: 1140px;
	margin-left: auto;
	margin-right: auto}

}