@charset "UTF-8";
@import url("grid.css");

/*** MPP <<== Assisi 2024 ****
 style.css
 2026.2.8  glass morphism
 2026.1.25 menu-bg to pink for preghiere
 2025.6.11 for Cantico
 2025/2/3   Remake for MPP BG-color
 2023/4/28
 2023/5/12  BG-color animation
 2024/1/6   standard BG
*********************/

:root { 
    --back-color: lightcyan;
    --back-color: mistyrose;
    --menubg-color: #ffccff;
    --base-color: black;
    --bg-color:   greenyellow;
    --border-color: chinese silver;
    --blue-color: blue; 
    --brown-color: brown; 
    --gray-color: gray;
    --hover-color: brown; 
    --link-color: dim gray;
    --rowbg-color: #e6e6fa;
    --pink-color:  mistyrose ; 
    --white-color: white;
}

html {
	background-color: var(--bg-color);
}



/*********** body BG-color CSS (org 12s) **********/

body {
  width: 100%;
  height: ;
  background-color: #87cefa;  /*** lightskyblue ***/
  animation: bggradient 18s infinite;
}

/****************/
/*** standard ***/

@keyframes bggradient {
  0%  { background-color: snow;      } 
  10% { background-color: deeppink;  } 
  20% { background-color: lavender;  } 
  40% { background-color: snow;      } 
  50% { background-color: palegreen;    } 
  70% { background-color: honeydew;     } 
  90% { background-color: lightskyblue; } 
  100% { background-color: snow;        } 
}

/*** end BG-color ***/


/***** X-mass green white red white green ****/
/***** 2023.12.2 ⇒　2024.1.6 

@keyframes bggradient {
  0%  { background-color: #228b22;  } 
  10% { background-color: #ffffff;  } 
  30% { background-color: #ffffff;  } 
  50% { background-color: #ff0000;  } 
  60% { background-color: #ffffff;  } 
  70% { background-color: #ffffff;  } 
  80% { background-color: #ffffff;  } 
  100% { background-color: #228b22; } 
}

****/
/*** end BG-color ***/



img {
	max-width: 100%;
	height: auto;
}



.table-bold{
	font-weight: bold;
}


a {
	display: inline-block;
	color: var(--base-color);
	text-decoration-line: underline;
}
a:hover { 
	color: var(--hover-color);
	font-weight :bold;
	background-color: var(--pink-color);
}
a img {
	margin-bottom: 0rem;
}
a img:hover {
	opacity: 0.8;
}
.blueback {
	background-color: var(--back-color);
	color: var(--white-color);
	padding: 1rem;
}
.underline {
	border-bottom: 3px solid var(--back-color);
	padding-bottom: 0.5rem;
}
.center {
	text-align: center;
}





/*** header *********************/
.head {
	display: flex;
       flex-direction: row;
       padding: 0 0 0 0;
}

.head h1 { 
	padding: 1rem 0;
}
.telbox {
	margin-left: auto;
	font-size: 3.0rem;
	padding: 0 0 0 0;
}

/*** menu ***********************/



nav ul {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	list-style: none;
	background-color: var(--menubg-color);
	margin-bottom: 0;
}
nav li {
	flex: 1 0 auto;
	margin-bottom: 0;
	border: 2px solid #fff;
}
nav li a {
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	color: var(--brown-color);
}
nav a:hover {
	background-color: var(--hover-color);   
	font-weight: bold;
	color: var(--white-color);
}
nav a {
	padding: 1rem 0;
	display: block;
}


/***** Googlemap RWD *********/
.gmap {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}

.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*** end Googlemap ***/

/***** YouTube RWD *********/
.youtube{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; 
}
/*** end YouTube ***/


/*** on the Mobile **************/
@media screen and (max-width: 768px){

/**********/
body {
	max-width:  100%;
	background-color: #FFFFFF; 
}

img {
	max-width: 100%;
	height: auto;
}



/**********/

.head {
	flex-direction: column;
	text-align: left;
	margin-bottom: 20px;
}
.telbox {
	margin-left: 0;
	text-align: center;
}

.head #open,#close  {
	position: absolute;
	top: 20px;
	right: 12px;
    }

nav ul {
	flex-direction: column;
}

nav li {
	padding-top: 0;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 0;
}


#open {
	display: block;
	background: url(../images/button.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	border: none;
	position: absolute;
	top: 20px;
	right: 12px;
}

#close  {
	display: block;
	background: url(../images/button2.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	border: none;
	position: absolute;
	top: 20px;
	right: 12px;
}


#navi {
	display: none;
}
}  /*** end of the Mobile *******/


/*** on the tablet 
@media screen and (min-width: 560px) and (max-width; 768px ) 
{

BODY{
   	margin: 0  auto;
   	width: 100%;
   	width: 768px;
}

img {
	max-width: 100%;
	height: auto;
}



#wrap {
	width: 768px;
}



#open,#close {
	display: none !important;
}

#navi {
	display: block !important;
}
}  /*** end ***********/



/*** on the PC ******************/
@media screen and (min-width: 769px){

/***********
BODY{
   	margin: 0  auto;
   	width: 100%;
   	width: 1100px;
}

img {
	max-width: 100%;
	height: auto;
}




#wrap {
	width: 1100px;
}
**********/


#open,#close {
	display: none !important;
}

#navi {
	display: block !important;
}
}  /*** end of the PC ***********/



/*** main images *****************/
.mainimg img {
	width: 100vw;
}

main {
	margin: 5rem 0 5rem 0;  /** up R down L **/
}

.news h2 {
	background-color: var(--white-color);
	color: var(--base-color);
	padding: 1rem;
}
.news li {
	list-style-type: none;
	border-bottom: 1px solid var(--border-color);
	padding: 0.5rem 0;
}


/*** footer ********************/
footer {
	background-color: var(--white-color);
	padding: 5rem 0;
	color: var(--base-color);
}
footer h5 {
	border-bottom: 2px solid var(--base-color);
}

/*** copyright ******************/
.copyright {
	text-align: center;
	padding: 1rem 0;
	background-color: var(--back-color);
}
.copyright a {
	color: var(--base-color);
	text-decoration: none;
	display: inline-block;
}


/*** page TOP button ************/
#pagetop {
	position: fixed;
	bottom: 15px;
	right: 15px;
}
#pagetop a {
	display: block;
	background: var(--blue-color);
	color: var(--white-color);
	width: 50px;
	padding: 10px 5px;
	text-align: center;
}
#pagetop a:hover {
	background: var(--blue-color);
}

/*** bread crumb ****************/
.breadcrumb {
	margin: 0 0 1em 0;
	padding: 0;	
}
.breadcrumb li {
	list-style-type: none;
}
.breadcrumb li a {
	display: inline-block;
	color: var(--link-color);
}


/**** glass morphism ****/
/**** 2026.2.8 **********/

/* =========================================
   GLASSMORPHISM EXTENSION
   追記専用（既存コード変更不要）
========================================= */

/* ===== 背景を上品な固定グラデーションへ ===== */
body.glass {
/***
  animation: none; /* 既存のBGアニメ停止 */
  
  background:
    linear-gradient(135deg,#e9eef5,#fdf7ff,#e6f0ff);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ===== 汎用ガラスカード ===== */
.glass-card,
.container,
.row > .col,
blockquote,
table {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.12);
  padding: 1.8rem;
}

/* tableは内側だけ透明に */
table {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* ===== ヘッダー ===== */
header {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(22px);
}

/* ===== ガラスナビゲーション（メイン目玉） ===== */
.menu nav ul {
  background: rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(20px);
  border-radius: 50px;
  padding: 6px;
  gap: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}

.menu nav li {
  border: none;
}

.menu nav a {
  border-radius: 40px;
  padding: 14px 0;
  transition: .35s;
}

.menu nav a:hover {
  background: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

/* ===== Splide スライダーもガラス化 ===== */
.splide {
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}

/* ===== リンクの高級感 ===== */
a {
  text-decoration: none;
}

a:hover {
  background: rgba(255,255,255,.45);
  border-radius: 6px;
}

/* ===== フッター ===== */
.copyright {
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(12px);
}

/* ===== TOPボタン ===== */
#pagetop a {
  backdrop-filter: blur(12px);
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
}

/* ===== モバイル最適化 ===== */
@media (max-width:768px){

  .container,
  .row > .col,
  blockquote {
    padding: 1.2rem;
    border-radius: 16px;
  }

  .menu nav ul {
    border-radius: 16px;
  }
}

/**** ****/
/* =========================
   ホバーを元デザインへ戻す
========================= */

.menu nav a:hover{
  background-color: var(--hover-color) !important; /* 茶色 */
  color: var(--white-color) !important;
  transform: none !important;
  backdrop-filter: none !important;
}

/* =========================
   BGアニメ復元
========================= */

body.glass{
  animation: bggradient 18s infinite !important;
}


.glass-table{
  border-collapse: collapse;
  border: 2px solid rgba(0,0,0,.4);
}

.glass-table th,
.glass-table td{
  border: 1px solid rgba(0,0,0,.3);
}