/* 基本スタイル */
html {
  height: 100%;
}
body {
    font-family: Arial, sans-serif;
    background: #fef4f4;
    margin: 0;
    padding: 0;
	height: 100%;
  }
header {
    background: #f6bfbc;
    padding: 0.1em 0;
    text-align: center;
    width: 100%;
}
header nav ul {
    list-style: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 10px;
}
main{
    text-align: center;
}
/*view_phptps.php 用*/
#p1{
	font-size:large;
	font-weight:bold;
   }
#p2{
	font-size:x-small
   }
#p3{
	font-size:medium
   }
   
   
footer{
    background: #f6bfbc;
    color: #fff;
    text-align: center;
	position: sticky;
	top: 100vh;
	width: 100%;
	}
#maintitle{
    color: #640125;
    font-weight:bold;
    text-shadow:1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff;
}
.photo {
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    display: block;
    /* align-items: stretch; */
    text-align: center;
    }
.photo img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    }
/* スマホ表示（デフォルト）の場合に改行する */
.responsive-break { white-space: normal; }

a:link { color: #302833; }
a:visited { color: #8f2e14; }
a{
    line-height: 1;
    display: block;
    border-radius: 25px;
    margin: 1rem;
    padding: 10px;
    border: 1px solid #ddd;
    text-decoration: none;
    /*color: inherit;*/
    text-align: center;
	padding: 1.65rem 2rem;
	color: #e60033;
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px; }
	
button{
	border: none; 
	border-radius: 15px;
	padding: 10px 15px;
	margin: 30px 10px; 
	background-color: #f6bfbc; 
	color: white; 
	text-align: center;
	text-decoration: none; 
	font-size: 1rem; 
	font-weight:bold;
  	}
  	
  	
/* タブレット（横幅が768px以上の場合） */
@media (min-width: 768px) {   /*768*/
    header {
        text-align: left;
        padding: 1rem 2rem;
    }

    header nav ul {
        //display: flex;
        justify-content: flex-end;
    }
    
	//view_phptps.php 用
	.p1{
		font-weight:bold;
	   }
	.p2{
		font-size:x-small
	   }
	.p3{
		font-size:medium
	   }
	.photo {
	    margin-top: 20px;
	    border: 1px solid #ddd;
	    padding: 10px;
	    }
	.photo img {
	    max-width: 500px;
	    max-height: 500px;
	    }
	/* タブレットでは改行しない */
	.responsive-break { white-space: nowrap; }
}


/* パソコン（横幅が1024px以上の場合） */
@media (min-width: 1024px) {
    header nav ul li {
        margin: 0 20px;
        }
	//view_phptps.php 用
	.p1{
		font-weight:bold;
	   }
	.p2{
		font-size:x-small
	   }
	.p3{
		font-size:medium
	   }
	.photo {
	    margin-top: 20px;
	    border: 1px solid #ddd;
	    padding: 10px;
	    }
	.photo img {
	    max-width: 700px;
	    max-height: 700px;*/
	    }
	/* パソコンは改行しない */
	.responsive-break { white-space: nowrap; }
   
}








/* view_album.php向け */

h1{color:#ffd900;}
h2{color:#1f3134;}


/* 項目 */
.base{
	background-color: transparent;
	background-image: 
		linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc),
		linear-gradient(45deg, #f9dbdc 25%, transparent 25%, transparent 75%, #f9dbdc 75%, #f9dbdc);
}
.header{
		  background-size: 60px 60px;
		  background-position: 0 0, 30px 30px;

}
.album-item {
			border: 1px solid gray;
			margin: 1rem;
			padding: 10px;
			display: flex;
			vertical-align: top;
			border-radius: 25px;
		   /* box-shadow: 5px 5px 5px 0px gray;*/
			
		  /*市松模様はっきり
		  padding: 1.65rem 2rem;
		  color: #e5004f;
		  background-size: 40px 40px;
		  background-position: 0 0, 20px 20px;*/
		  }
.shurui{
       font-size:small;
       }
.hiduke{
       font-size:small
	   }
.gyoujinaiyou{
       font-size:large;
       font-weight:bold;
       padding-left:10px;
	   }


	   
	   
/*種類ごとの背景色設定*/
	.sadou{background-color:#cee4ae;}		/*茶道*/
	.tougei{background-color:#f0cfa0;}	/*陶芸*/
	.craft{background-color:#c1e4e9;}		/*クラフト*/
	.art{background-color:#d8e698;}		/*ＡＲＴ*/
	.music{background-color:#f7bd8f;}		/*ＭＵＳＩＣ*/
	.dance{background-color:#a0d8ef;}		/*ＤＡＮＣＥ*/
	.project{background-color:#dbd0e6;}	/*ＰＲＯＪＥＣＴ*/
	.cooking{background-color:#eebbcb;}	/*ＣＯＯＫＩＮＧ*/

/*index.htmlのタイトルの背景色設定*/
    .nanohana_index{background-color:#f2f2b0;}
    .cosmos_index{background-color:#fff;}