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

/*** MPP <<== Assisi 2024 ****
 style.css
 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);
}