﻿


html {
/*	box-sizing: border-box;		フレキシブル対応のため、margin,paddingの合計をボックスの値に含める*/
	scroll-behavior: smooth;
}

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

*/

body {
/*	color:#707F5F;	*/
/*	line-height:150%;	*/

	color: #8A5F2E;
	text-align:center;	
	
	margin:auto;
	padding:auto;	
	width:100%;

	background:#ffffff;	
	background-image: url(../image/wallppr079.gif);
	background-repeat: repeat; 
	border:dashed 0px #00aa88;
	}
	

/* ---------- ページでの大枠として使用 ---------- */
.border000 {
	height: 100%;
	margin: auto;
	padding: auto;	 
	border: outset 0px #adffff;     
	background-color: #FFEEDB;	
	}
@media screen and (min-width: 768px) {
	.border000 {
		width: 80%;
		max-width: 1200px;
	}
}


/* ---------- inline ---------- */
.inblo {
	display: inline-block;  
	vertical-align: top;   
	border:dashed 0px #055000;
	}
	
	


/* ------------------------<< 全ページ共通設定 >>------------------------ */
/* ---------- リスト ---------- */
ul {
   margin: 0px ;               /* 外側の余白 */
   padding: auto;              /* 内側の余白 */
}


/* ---------- パンくずリスト ---------- */
.pankuzu {
   font-size: 0.8em;
   text-decoration: none;	   /* リンクの下線を消す */
   text-align: left;        
   margin: 10px;               /* 外側の余白 */
   padding: 0px;               /* 内側の余白 */
}

/* ---------- コピーライト ---------- */
.cright {	
	clear:both;
	width: 10%;
	min-width:300px;
	margin:auto;
	font-size:0.7rem;
	text-align:center;
	line-height:100%;
	padding: 0px 0px 0px 00px;		 
	border:dashed 0px #000000;
	}

/* ---------- トップへスクロール ---------- */
#page-top {
	bottom: 20px;
	right: 5%;
	position: fixed;
	font-size: 77%;
}


/* --------- home-pageのみで使用 --------- */
/* -----紫-- --- */
.bg_purple {       
	background-color: #DEDBFF;
	padding: 10px;   
	}

/* -----ピンク-- home only --- */
.bg_pink {       
	background-color: #FFDBEB;		/* #ffdddd; #FFDBEB;*/
	padding: 10px;   
	}

/* -----薄い茶-- home only --- */
.bg_cha {       
	background-color: #ccbfaf;
	padding: 10px;   
	}

/* -----リンク文字----- */
.menulink { 
	font-size:1.0rem;
	font-weight:bold;  
	border:dashed 0px #000000;
	}

/*
.menulink a{ 
	text-decoration: none;
	color: #0000ff;
}
*/




/* ----------------------------<< ドロップダウンメニュー >>---------------------------- */
/*	参考ページ： */
/*	https://allabout.co.jp/gm/gc/23911/		*/
/*	https://www.colordic.org/colorscheme/ffeedb	*/
/* ---------------------------------------------------- */
/* -------------------- */
/* ▼サイトタイトルバーの装飾 */
/* -------------------- */
.sitetitle{
   font-size: 1.5em;
   line-height: 60px;         /* サイトタイトルのリンクの高さ(40px) */
   margin: 0px;               /* サイトタイトルバー外側の余白(ゼロ) */
   padding: 0px;              /* サイトタイトルバー内側の余白(左に15px) */
   background-color: #998f84; /* サイトタイトルバーの背景色(焦げ茶) */
   background-color: #FFDBEB; /* メニューバーの背景色(ピンク) */
}
.sitetitle a{
   font-size: 1.2em;
   text-decoration: none;		/* リンクの下線を消す */
   color: #000;
}
/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 20px 0px 20px;  /* メニューバー内側の余白(左に15px) */
   background-color: #DEDBFF; /* サイトタイトルバーの背景色(紫) */
   background-color: #ccbfaf; /* メニューバーの背景色(薄い茶) */
   text-align: center;         /* メインメニューの配置 */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */

ul.ddmenu li {
   width: 100px;			/* メニュー項目の横幅(120px) */
   display: inline-block;  	/* ★1:横並びに配置する */
   list-style-type: none;  	/* ★2:リストの先頭記号を消す */
   position: relative;     	/* ★3:サブメニュー表示の基準位置にする */
   background-color: #ccbfaf; /* メニュー項目の背景色() */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
   color: #969696;            /* メニュー項目の文字色() グレーアウトさせるため*/
}


.current {
	border-bottom: 5px solid #DD004B;
}


/* リンク装飾 */
ul.ddmenu a {
   color: #202020;            /* メニュー項目の文字色() #665f58; */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   display: block;            /* ★4:項目内全域をリンク可能にする */
}
ul.ddmenu a:hover {
   background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
   background-color: #DEDBFF; /* メニュー項目にマウスが載ったときの背景色(淡い紫) */
   color: #dd0000;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
   color: #222222;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}


/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu ul {
   display: none;       /* ★1:標準では非表示にする */
   margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
   position: absolute;  /* ★4:絶対配置にする */
}

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.ddmenu li:hover ul {
   display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
}



/* -------------------------------- */
/* ▼ページ内サブメニューバーの装飾 */
/* -------------------------------- */
ul.submenu {
   margin: 0px;
   padding: 0px 30px;
   background-color: #FFDBEB; /* メニューバーの背景色(薄いピンク) */
}


ul.submenu li {
   width: 100px;			/* メニュー項目の横幅() */
   display: inline-block;  	/* ★1:横並びに配置する */
   list-style-type: none;  	/* ★2:リストの先頭記号を消す */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   line-height: 30px;         /* メニュー項目のリンクの高さ(x) */
/*   color: #969696;             メニュー項目の文字色() グレーアウトさせるため*/
}







/* ------------------------<< 記事の設定 >>------------------------ */
/* ---------- 記事タイトル ---------- */
.subtitle { 
	font-size:1.1rem;
	font-weight:bold;   
	min-width: 30%; 
	border:dashed 0px #000000;
	background-color: #FFEEDB;
	}
.subtitle a{
	text-decoration: none;		/*	下線を消す	*/
	color: #0000ff;
}


/* ---------- 記事の枠 ---------- */
.contentL {
	display: inline-block;
	margin: 5px;	  
	padding: 0px 20px 10px 20px;	
	width: 80%;
	min-width: 300px;
	max-width: 1200px;
	}





/* ------------------------<< 文字や色の設定 >>------------------------ */

/* ---------- 小文字 ---------- */
.textsmall {
	font-size:0.7rem; 
	line-height:120%;    
	}

/* ---------- 中文字 ---------- */
.textsmall2 {
	font-size:0.9rem; 
	line-height:130%;    
	}

/* ---------- 大文字 ---------- */
.textlarge {
	font-size:1.3rem;     
	}

/* ---------- 文字赤色 ---------- */
.textred {
	color: red;     
	}

/* ---------- クリア ---------- */
.clr {
	clear:both;     
	}


	
	
/* --------- 背景色 --------- */
/* -----白バック----- */
.bg_shiro {       
	background-color: #ffffff;
	}



/* -----右寄せ・左寄せ----- */
.float-right {       
	
   float:right;
	}

.float-left {       
	
   float:left;
	}

/* -----角丸----- */
.kadomaru20 {       
	border-radius: 20px; 
	}

/* -----インデント----- */
.yohaku01 {
/*	text-align:left;	*/
	padding: 0px 20px 10px 20px;	
	border: dashed 0px #00ffff;    
	}
/* ---B&W--- */
.bun02 {	
	text-align:left;
	padding: 0px 20px 0px 20px;	
	border: dashed 0px #00ffff;    
	}
	
	
/* ---TOP--- */
.bun03 {	
	padding-top:    10px;  /* 上だけ指定 */
	padding-bottom: 10px;  /* 下だけ指定 */
/* 	padding-left:   15px;  左だけ指定 */
/* 	padding-right:  15px;  右だけ指定 */
	}

.text-center {
	text-align: center;
	}

.text-right {
	text-align: right;
	}

.text-left {
	text-align: left;
	}

/* -----幅----- */
.wd10 {
	width: 15%;
	}
.wd20 {
	width: 20%;
	}
.wd30 {
	width: 30%;
	min-width: 260px;
	}
.wd35 {
	width: 35%;
	min-width: 260px;
	}
.wd40 {
	width: 40%;
	min-width: 260px;
	}
.wd45 {
	width: 45%;
	min-width: 300px;
	}
.wd50 {
	width: 50%;
	min-width: 300px;
	}
.wd60 {
	width: 60%;
	min-width: 300px;
	}
.wd80 {
	width: 80%;
	min-width: 300px;
	max-width: 1200px;
	}
.wd90 {
	width: 90%;
	min-width: 300px;
	max-width: 1200px;
	}
.wd100 {
	width: 100%;
	min-width: 300px;
	max-width: 1200px;
	}


/* ------------------------<< 枠の色 >>------------------------ */

/* -----オレンジ----- */
.border_or {
	border: outset 5px #ffc472;	 /* orange */
	}
/* -----空色----- */
.border_sky {
	border: outset 5px #dbecff;	 /* sky */
	}
/* -----ピンク----- */
.border_pink {
	border: outset 5px #e080df;  	/* pink */  
	}

/* -----黒----- */
.border_bk {
	border: outset 1px #000000;  	/* black */  
	}








/* ----------<< ギャラリー old version で使用中 >>---------- */
.border102 {
	display: inline-block;
	width: 30%;
	min-width:280px;
	height: 200px;
	margin: 10px 10px 10px 10px;	
	border-radius: 10px 10px 10px 10px;            
	background-color: #ffffff;
	}
/* ----------<< ギャラリー old version で使用中 >>---------- */


/* ----------<< ギャラリー >>---------- */

/* ギャラリーリスト */
.listG {	
	width:250px;
	margin:auto;
	text-align:left;
	line-height:150%;
	padding: 0px 0px 0px 00px;		 
	border:dashed 0px #000000;
	}


/* ヴェネチア */
.article001 {
	width:70%;
	line-height:150%;
	margin:auto;
	border: dashed 0px #00ffff;    
	}





/* ----------<< クラフト  アバウト コンタクト>>---------- */
.border200 {
	display: inline-block;
/*	vertical-align:  middle;*/
	text-align:left;
	height:100%;
	width:40%;
/*	max-width: 400px; */
	min-width: 300px; 
	margin: 5px 0px 5px 0px;	
	padding: 10px;
	}




/* ------------<< 個展のページ >>------------ */
/* 夢の散歩↓ */
.article2 {
	width:80%;
	max-width: 700px;
	min-width: 294px; 
	line-height:150%;
	margin:auto;
	border: dashed 0px #000000;    
	}


/* 動物園・海辺の花↓ */
.article3 {
	display: inline-block;
	vertical-align:  middle;
	width:40%; 
	min-width: 280px; 
	margin: 10px 10px 30px 10px;	
	padding: 10px;  

	}
	


/* ----------<<　問合せフォーム　>>---------- */
table.CF_table{
	text-align:left;
	width:80%;
	min-width:360px;
	max-width:800px;
	margin: auto;
	border: 3px solid #a56535;
}



table.CF_table tr{
	border: 2px solid #a56535;
	padding: 3px;
}


table.CF_table td{
	padding: 5px;
}


/*入力欄*/
.CF_table input, .CF_table textarea {
	width:90%;
	padding: 5px 3px 5px 1px;
	margin: auto;
}

/*「必須」文字*/
.CF_req{
	font-size:.9rem;
	padding: 3px;
	background: #f79034;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right: 10px;
}

/*「任意」文字*/
.CF_unreq{
	font-size:.9rem;
	padding: 3px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right: 10px;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF_table th{
	width:30%;/*横幅*/
	text-align:left;
	background-color:#ebedf5;/*ブルーグレー*/
	}
}







/* -------------------------- << 個展の覚え書き >>-------------------------- */

dl.procbox {
	text-align:left;
	line-height: 130%;
	margin: 0px 20px 20px 20px;

	border:solid 0px #aaa;
	background-color: #fff;

	}


dl.procbox dt	{
	font-weight: bold;        	/* 太字にする */
	padding: auto; 
	margin-top: 5px; 
	margin-bottom: 5px; 
	border:solid 0px #00a;
	}

dl.procbox dd	{
	padding: auto; 
	margin-left: 20px; 
	margin-bottom: 30px; 
	border:solid 0px #f00;
	}


/* --------------------*/
ul.kazari {
   margin: 0px;  
   padding: 0px 0px 0px 0px; 
} 

ul.kazari li{
   list-style-type: disc;
   margin: 00px  00px 00px 30px; 
}






