﻿@charset "utf-8";
/*---------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------*/
/* 【CssTempleInfoPart01】                                                                              */
/*------------------------------------------------------------------------------------------------------*/
/*  【機能】                                                                                            */
/*    CssTempleInfoPart01では、「h1-h6」と「Table Class1」と「BClass2-4」のみを記述し、                 */
/*    それ以外の記述は、 「CssTempleInfoCommon.css」の中に記述する。                                    */
/*  【変更履歴は、すべてCssTempleInfoCommon.cssの中に書く】                                             */
/*                                                                                                      */
/*------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/
/*【PC用とスマホ用の共通の設定】サイト全体への適用
/*---------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------*/
/* TableClass1 Tableクラス(寺院の説明Tableなどで使用)                        */
/*---------------------------------------------------------------------------*/
.TableClass1 table{
	/* margin 上、右、下、左 */
	margin: 3px 3px 3px 3px;
	 margin: 3px 6px 3px 6px;
	/* border までが幅と高さになるため、width 100%と合わせるとPageの幅に自動的になり位置がずれない。 */
	box-sizing: border-box;
	width: 90%;
	width: calc(100% - 12px) ;
	border-collapse: collapse;
  
}

.TableClass1 table tr{
  border-bottom: solid 2px white;
}

.TableClass1 table tr:last-child{
  border-bottom: none;
}

.TableClass1 table th{
  position: relative;
  text-align: left;
  width: 30%;
  width: 28%;

  background-color: #52c2d0;
  background-color: #88F;
  color: white;

  padding: 10px 0;
  padding: 4px 0;
  


}

.TableClass1 table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #52c2d0;
  border-left: 10px solid #88F;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.TableClass1 table td{
  text-align: left;
  width: 72%;
  width: 75%;
  
  background-color: #eee;
  background-color: #EEF;

  padding: 10px 0;
  padding: 4px 0;
  /*padding 上、右、下、左*/
  padding: 4px 4px 4px 15px;/* Add 19/06/19 */
}


/*---------------------------------------------------------------------------*/
/* 【ボタンの定義】BClass1,BClass2,BClass3                                   */
/*---------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------*/
/* BClass1ボタンクラス                                                       */
/* 【注意点】                                                                */
/*   「CssTempleInfoPart01」だけ水色のシンプルなボタンにし、                 */
/*   「CssTempleInfoPart02」はボタンを定義せず単純なリンクにする。           */
/* 【使用場所】                                                              */
/*   1.「H1」タイトルのすぐ下のボタン                                        */
/*---------------------------------------------------------------------------*/
.BClass1 {
  border: 1px solid #15aeec;
  background-color: #49c0f0;
  background-color: #5ce;
  background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
  background-image: -webkit-linear-gradient(top, #5ce, #3be);
  background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
  background-image: linear-gradient(to bottom, #5ce, #3be);
  border-radius: 4px;
  color: #fff;
/*  line-height: 50px;*/
/*  line-height: 30px;*/
  line-height: 1.9;
  -webkit-transition: none;
  transition: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.BClass1:hover {
  border:1px solid #1090c3;
  border:1px solid #19c;
  color: #000;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
  background-color: #1ab0ec;
  background-color: #2be;
  background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
  background-image: -webkit-linear-gradient(top, #2be, #29c);
  background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
  background-image: linear-gradient(to bottom, #2be, #29c);
}

.BClass1:active,.BClass1_Push {
  background: #1a92c2;
  background: #29c;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
  color: #1679a1;
  color: #000;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

/*---------------------------------------------------------------------------*/
/* BClass2ボタンクラス                                                       */
/* 【注意点】                                                                */
/*   「CssTempleInfoCommon」で全てに共通のボタンとして定義。                 */
/* 【使用場所】                                                              */
/*   1.一般的に押すボタンはすべてこのボタン。                                */
/*---------------------------------------------------------------------------*/
/*     http://cssdeck.com/labs/push-the-buttons                              */
/*---------------------------------------------------------------------------*/
/* ★★ ここでは定義しない ★★                                              */
/*---------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------*/
/* BClass3ボタンクラス                                                       */
/* 【注意点】                                                                */
/*   「CssTempleInfoPart01」と「CssTempleInfoPart02」で別のボタンを定義。    */
/* 【使用場所】                                                              */
/*   1.寺院一覧表の寺院選択(詳細)ボタン                                      */
/*   2.トップページの都道府県選択ボタン                                      */
/*---------------------------------------------------------------------------*/
/* https://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html */
/*----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/
/* 【.BClass3削除】【ClassCssStyle.cs作成のため】 2021/10/03                 */
/* 【.BClass3削除】【ClassCssStyle.cs作成のため】 2021/10/03                 */
/* 【.BClass3削除】【ClassCssStyle.cs作成のため】 2021/10/03                 */
/* 【.BClass3Big削除】【ClassCssStyle.cs作成のため】2021/10/03               */
/* 【.BClass3Big削除】【ClassCssStyle.cs作成のため】2021/10/03               */
/* 【.BClass3Big削除】【ClassCssStyle.cs作成のため】2021/10/03               */
/*---------------------------------------------------------------------------*/




/*----------------------------------------------------------------------------*/
/* BClass4は市町村一覧表のソート順ボタン                                      */
/* https://css-tricks.com/examples/ButtonMaker/#                              */
/*----------------------------------------------------------------------------*/

.BClass4,.BClass4_Push {
   border-top: 1px solid #96d1f8;
   background: #97d9b6;
   background: -webkit-gradient(linear, left top, left bottom, from(#08400c), to(#97d9b6));
   background: -webkit-linear-gradient(top, #08400c, #97d9b6);
   background: -moz-linear-gradient(top, #08400c, #97d9b6);
   background: -ms-linear-gradient(top, #08400c, #97d9b6);
   background: -o-linear-gradient(top, #08400c, #97d9b6);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 17px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.BClass4:hover {
   border-top-color: #0e5732;
   background: #0e5732;
   color: #ccc;
   }
.BClass4:active,.BClass4_Push {
   border-top-color: #0c3d07;
   background: #0c3d07;
   background: #070;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
   color: #000;
   text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
   }

/*---------------------------------------------------------------------------*/
/* BClassArrowボタンクラス                                                       */
/*----------------------------------------------------------------------------*/
/* ★★ ここでは定義しない ★★                                              */
/*---------------------------------------------------------------------------*/


/*【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】*/
/*【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】*/
/*【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】*/
/*---------------------------------------------------------------------------*/
/*【スマホ用の設定】スクリーン・サイズが640pixel以下の場合*/
/*---------------------------------------------------------------------------*/
/*570pxの理由は、Xpedia ZやGalaxy 4Sが360px × 568pxのため、横でもスマホ用にするため。*/
@media screen and (max-width: 640px) {

/*---------------------------------------------------------------------------*/
/* TableClass1 Tableクラス(寺院の説明Tableなどで使用)【スマホ用だけの設定】  */
/*---------------------------------------------------------------------------*/
.TableClass1 table{
	/* margin 上、右、下、左 */
	margin: 3px 0px 3px 0px;
	width: calc(100% - 0px) ;
  
}



}


