@charset "utf-8";
	/*
	
	list7 c　来オール商品紹介　
	--------------------------------list-LP-CTA-image---------*/
@import url(lightbox.css);
@import url(style-plus.css);
@import url(style-plusplus.css);
@import url(style-photo.css);



/*Font Awesomeの読み込みtp_yakuba1/
---------------------------------------------list-simple----------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
/*メインコンテンツ内の「list2」ボックスlist-skills-to-be-acquired70
tp_breeder4

---------------------------------list-thumb-schedule----------*/
/*ボックス１個あたりの設定*/
.list-foodsns-banner {
	overflow: hidden;
	position: relative;
	width: 98%;		/*幅*/
	margin: 1%;	/*ボックス同士に空ける左右間のスペース*/
	margin-bottom: 2px;	/*ボックスの下に空ける上下間のスペース*/
}
.list-foodsns-banner a {
	display: block;text-decoration: none;overflow: hidden;
}
/*写真のマウスオン時*/
.list-foodsns-banner a:hover figure img {
	opacity: 0.7;	/*透明度*/}



	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
		/*ボックス１個あたりの設定*/
		.list-foodsns-banner {
			width: 90%;			/*幅*/
				/*margin-left: 3%;ボックス同士に空ける左右間のスペース*/
		}
}


/*list-kaiwaブロックショートケーキ１日単発講座でワンポイントアドバイスなど生徒が上達する様子tp_biz59_pink

---------------------------------------------------------------------------*/
.list-how-students-are-getting-better {margin: 10px;
	margin-bottom: 30px;	/*ボックス同士の上下間に空けるスペース*/
	padding: 20px;			/*ボックス内の余白*/
	background: rgba(255,255,255,0.5);		/*背景色*/
	color: #202124;			/*文字色*/
		position: relative;
}

.list-how-students-are-getting-better h4 {
	margin: 0;font-weight: bold; 
	color: #202124;	/*文字色*/
}
.list-how-students-are-getting-better h4 a {
	color: #777;	/**/
}

/*ボックス内のpタグ*/
.list-how-students-are-getting-better p {
	margin: 0;
	font-size: 0.8em;	/*文字サイズを80%に*/
}

/*list内のNEWマーク*/
.list-how-students-are-getting-better .new-how-students-are-getting-better {
	font-size: 0.9em;		/*文字サイズ*/
	background: #6b6351;	/*背景色*/
	color: #fff;			/**/
	width: 70px;			/*幅*/
	line-height: 70px;		/*高さ*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		/*テキストをセンタリング*/
	position: absolute;
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
	transform: rotate(-30deg);	/*回転。まっすぐ表示させたいならこの１行を削除。*/
}




/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {


    /*listブロック
    ---------------------------------------------------------------------------*/
    .list-how-students-are-getting-better {
        display: flex;					/*flexボックスを使う指定*/
        justify-content: space-between;	/*並びかたの種類の指定*/
    }
    
    /*ボックス内のfigure画像*/
    .list-how-students-are-getting-better figure {
        width: 30%;
        margin-right: 5%;
    }
    
    /*ボックス内のtextブロック*/
    .list-how-students-are-getting-better .text-how-students-are-getting-better {
        flex: 1;
        margin-right: 5%;
    }
    
    
    /*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
    
}





/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {
    .list-container-how-students-are-getting-better {
        display: flex;		/*flexボックスを使う指定*/
        flex-wrap: wrap;	/*折り返す指定*/
        justify-content: space-between;	/*並びかたの種類の指定*/
    }
    
    /*１個あたりのボックス設定*/
    .list-how-students-are-getting-better {
        flex-direction: column;			/*子要素を縦並びにする*/
        width: 29%;		/*幅。３列になります。*/
    }
    
    /*ボックス内のfigure画像*/
    .list-how-students-are-getting-better figure {
        width: 100%;
        margin-right: 0;
    }
    
    /*ボックス内のtextブロック*/
    .list-how-students-are-getting-better .text-how-students-are-getting-better {
        margin-right: 0;
    }
    
    /*ボックス内のh4タグ*/
    .list-how-students-are-getting-better h4 {
        margin: 10px 0;	/*上下、左右への余白*/
    }
  }

/*tp_hobby5メインコンテンツ内のショートケーキ大特訓！上達の様子
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-improving-after-special-training {
	overflow: hidden;
	position: relative;
	width: 22%;		/*幅*/
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	margin-left: 2.4%;	/*ボックス同士に空ける左右間のスペース*/
	font-size: 12px;	/*文字サイズ*/
	margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}
/*h4タグ*/
.list-improving-after-special-training h4 {line-height: 1.2;		/*行間*/
	height: 3.0em;	/*1.5高さ。レイアウトが崩れるのを防ぐ為、２行目以降は非表示になります。*/
}
/*写真のマウスオン時いらないとおもう*/
.list-improving-after-special-training a:hover figure img {
	opacity: 0.7;	/*透明度*/
}/*option1,option2共通*/
span.option1-improving-after-special-training, span.option2-improving-after-special-training {
	text-align: center;
	display: block;
	font-size: 10px;	/*文字サイズ*/
	width: 120px;		/*幅*/
	position: absolute;
	right: 0px;	/*ボックスに対して右から0pxの場所に配置*/
	top: 0px;	/*ボックスに対して上から0pxの場所に配置*/
	transform: rotate(45deg) translate(36px,-15px);	/*45度回転、右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
	color: #FFF;	/*文字色*/
	background: #ccc;	/*背景色*/
}
/*option1への追加設定*/
span.option1-improving-after-special-training {
	color: #FFF;		/*文字色*/
	background: #F00;	/*背景色*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-improving-after-special-training {
	width: 45%;			/*幅*/
	margin-left: 3%;	/*ボックス同士に空ける左右間のスペース*/
}}


/*tp_bussan2正方形listブロックlist26
---------------------------------------------------------------------------*/
.list-square-container {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
}

/*list-squareブロック
---------------------------------------------------------------------------*/
/*１個あたりのボックス設定*/
.list-square {position: relative;/*子要素でabsolute(絶対配置)を使うための指定*/	
	width: 33.3%;	/*幅*/
}

/*ボックス内のtextブロック*/
.list-square .text {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態*/
	color: #fff;					/*文字色*/
	padding: 10px 20px;				/*上下、左右へのボックス内の余白*/
}

/*ボックス内のh4タグとpタグ*/
.list-square h4,
.list-square p {
	margin: 0;
	font-size: 0.8em;	/*文字サイズを親要素の80%に*/
}

/*小さな端末では説明文は非表示に。表示させてしまうと画像がかなり隠れてしまう可能性があります。*/
.list-square p {
	display: none;
}

/*左上の丸いアイコン*/
.list-square .icon {
	display: flex;				/*flexボックスを使う指定*/
	justify-content: center;	/*並びかたの種類の指定*/
	align-items: center;		/*垂直揃えの指定。上下中央に配置されるように。*/
	font-size: 0.6em;		/*文字サイズ*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 60px;			/*幅*/
	height: 60px;			/*高さ*/
	line-height: 1.5;		/*行間*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		/*テキストをセンタリング*/
	position: absolute;		/*親のrelativeに対して絶対配置させる指示*/
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.3は色が30%出た状態。*/
}


/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {
	
/*list-squareブロック
---------------------------------------------------------------------------*/
/*小さな端末で非表示にした説明文を表示させる。*/
.list-square p {
	display: block;
}}
	
/*listブロック物産２成功と失敗の比較
---------------------------------------------------------------------------*/
.list-container-comparing-successes-and-failures {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
}

/*１個あたりのボックス設定*/
.list-comparing-successes-and-failures {
	position: relative;		/*子要素でabsolute(絶対配置)を使うための指定*/
	display: flex;				/*flexボックスを使う指定*/
	flex-direction: column;		/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin-bottom: 30px;	/*ボックス同士の上下間に空けるスペース*/
	padding: 20px;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
	width: 48%;				/*幅*/
	margin-right: 4%;	/*右側に空けるスペース*/
}

/*２の倍数のlistブロックへの追加設定*/
.list-comparing-successes-and-failures:nth-of-type(2n) {
	margin-right: 0;	/*右側の余白をなくす*/
}

/*ボックス内のfigure画像*/
.list-comparing-successes-and-failures figure {
	margin: -20px -20px 0;	/*上の.listで設定しているpadding分を相殺して画像をブロックいっぱいに出す*/
}

/*ボックス内のh4タグ*/
.list-comparing-successes-and-failures h4 {
	margin: 1em 0 0.5em;	/*上、左右、下への余白*/font-weight: 800;
}

/*ボックス内のtextブロック*/
.list-comparing-successes-and-failures .text {
	flex: 1;
}

/*ボックス内のpタグ*/
.list-comparing-successes-and-failures p {
	margin: 0;
	font-size: 0.8em;	/*文字サイズを80%に*/
}



/*左上の丸いアイコンdenai*/
.list-comparing-successes-and-failures .icon-successe {
	display: flex;				/*flexボックスを使う指定*/
	justify-content: center;	/*並びかたの種類の指定*/
	align-items: center;		/*垂直揃えの指定。上下中央に配置されるように。*/
	font-size: 0.6em;		/*文字サイズ*/
	background: #c30000;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 60px;			/*幅*/
	height: 60px;			/*高さ*/
	line-height: 1.5;		/*行間*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		/*テキストをセンタリング*/
	position: absolute;		/*親のrelativeに対して絶対配置させる指示*/
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.3は色が30%出た状態。*/
}
/*左上の丸いアイコンdekinai*/
.list-comparing-successes-and-failures .icon-failure {
	display: flex;				/*flexボックスを使う指定*/
	justify-content: center;	/*並びかたの種類の指定*/
	align-items: center;		/*垂直揃えの指定。上下中央に配置されるように。*/
	font-size: 0.6em;		/*文字サイズ*/
	background: #000;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 60px;			/*幅*/
	height: 60px;			/*高さ*/
	line-height: 1.5;		/*行間*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		
	position: absolute;		/*親のrelativeに対して絶対配置させる指示*/
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.3は色が30%出た状態。*/
}




/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	

	/*１個あたりのボックス設定*/
	.list-comparing-successes-and-failures {
		width: 42%;				/*sp幅45NG*/
		margin-right: 2%;	/*3右側に空けるスペース*/
	}
	}

/*レシピページよし関連講座へのナビページ（listブロック）料金ページの下で
---------------------------------------------------------------------------*/
.list-LP-CTA-image {
	display: flex;					/*flexボックスを使う指定*/
	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	margin-bottom: 30px;			/*ボックス同士の上下間の余白*/
	background: #000000;				/*背景色。*/color: #fff;	
	padding: 20px;					/*ボックス内の余白*/
	border-radius: 5px;				/*角を丸くする指定*/
	overflow: hidden;				/*はみ出た要素を非表示にする。画像の角が飛び出ないようにする為の指定です。*/
}

.list-LP-CTA-image {
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: stretch;			/*垂直揃えをデフォルトに戻す指定。*/
}

.list-LP-CTA-image figure {
	margin: -20px -20px 0;	/*画像周りの余白を埋める指定です*/
	width: auto;
}

.list-LP-CTA-image h4 {color: #fff4ee;	
	text-align: center;		/*テキストをセンタリング*/
	margin: 0.5rem 0 0 ;		/*h2の外側にとるスペース。上2、左右、下への順番。*/
	font-size: 26px;		/*1.2em文字サイズを120%に*/
	font-weight: 700;	/*hタグのデフォルトの太字を標準にする。太字がいいならこの１行を削除。*/
}
.list-LP-CTA-image p {
	margin: 0;
	font-size: 12px;	/*文字サイズを80%に。0.8*/line-height: 1.3;		/*行間*/
}



/*IE対策*/ .list-LP-CTA-image div {min-height: 0%;}


.btn-LP-CTA-image {
	text-align: center;	/*内容をセンタリング*/
}

/*ボタン*/
.btn-LP-CTA-image a {
	display: inline-block;text-decoration: none;border: none;
	color: #fff;			/*文字色*/
	border-radius: 3px;		/*角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 10px 20px;		/*上下、左右へのボタン内の余白*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: linear-gradient(#ffa800,#ff8400);/*背景グラデーション*/



	font-size: 1rem;}

/*ボタンのマウスオン時*/
.btn-LP-CTA-image a:hover {
	filter: brightness(1.2);	/*少しだけ明るくする*/
	cursor: pointer;
}

/*listブロック内でのボタン*/
.list-LP-CTA-image .btn-LP-CTA-image a {
	margin-bottom: 1px;	/*上にスペースを空ける*/
	display: block;		/*横幅いっぱいに広げる*/
}


/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {
.list-LP-CTA-image {
	width: 95%;	/*ボックスの幅*/
}
.list-LP-CTA-image p {
	margin: 0;
	font-size: 14px;	/*文字サイズを80%に。0.8*/
}
	}


/*list58サイドにいれる生徒さんの声３つくらいでやめる。関係ページへdt*/
/*受講生の声の要約のほう、PCで横３を１にしたい左に回り込み*/
.list-student-reviews-36 {
	position: relative;overflow: hidden;
	float: left;			
	font-size: 11px;		/*文字サイズ*/
	line-height: 1.5;		/*行間*/
	
	margin-left: 1.5%;		/*ボックスの左右間に空けるスペース*/
	margin-bottom: 10px;	/*ボックスの上下間に空けるスペース*/margin-top: 20px;	/*ボックスの上下間に空けるスペース*/
}
.list-student-reviews-36 a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 15px;	/*ボックス内の余白*/
	height: 240px;	/*高さ*/
	border: 1px solid #d0c175;	/*枠線の幅、線種、色*/
	}
/*マウスオン時。内側の影を消す設定。
	box-shadow: none;*/
.list-student-reviews-36 a:hover {
	box-shadow: 0px 0px 50px #fff4ee inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
}
/*ボックス内の矢印マーク設定*/
.list-student-reviews-36 a::before {
	content: "＜";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
	background: #fff4ee;	/*背景色*/
	color: #eea882;			/*文字色*/
	font-size: 20px;		/*文字サイズ*/
	line-height: 1;
	width: 65px;			/*幅。下の15pxと合計した数字がline-height(80px)になるようにする。*/
	padding-right: 15px;		/*左側へのボックス内余白。上の65pxと合計した数字がline-height(80px)になるようにする。*/
	line-height: 80px;		/*行間。上の２行の合計値と合うように。*/
	position: absolute;
	left: -40px;	/*ボックスの右から-40pxの場所に配置*/
	top: 32%;		/*ボックスの上から32%の場所に配置*/
	border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}


/*ボックス内のp(段落)タグ設定*/
.list-student-reviews-36 p {
	padding: 0px !important;
}
/*ボックス内のh4タグ設定*/
.list-student-reviews-36 h4 {
	padding: 0px;
	color: #202124;	/*文字色*/  font-weight: 800; font-size: 16px;		/*文字サイズ*/
}
/*画面幅1100px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1100px){

.list-student-reviews-36 a {
	height: 210px;	/*高さ*/
}}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
	.list-student-reviews-36 {
		float: none;
		width: auto;
		margin-left: 0;
	}
	.list-student-reviews-36 a {
		height: auto !important;
	}
	.list-student-reviews-36 figure {
		float: left;
		width: 30%;
		margin-right: 10px;
	}}


/*tpカフェ１５丸い写真商品メニューページの習得してもらうスキル　キッズ講座案内
---------------------------------------------------------------------------*/

.list-skills-to-be-acquired70 {
	position: relative;
	overflow: hidden;
	float: left;	/*左に回り込み*/
	width: 20%;		/*ボックスの幅*/
	margin: 0 2.5% 20px;	/*上、左右、下へのボックス内の余白*/
	height: 400px;			/*ボックスの高さ。*/
}
/*写真の設定*/
.list-skills-to-be-acquired70 figure img {
	display: block;
	border-radius: 50%;		/*円形にする設定。30pxなどにすると角丸になります。この行を削除すればそのままの画像が表示されます。*/
	margin-bottom: 10px;	/*画像の下に空けるスペース*/
}
/*写真の右上にある金額*/
.list-skills-to-be-acquired70 figure span {
	display: block;text-align: center;
	width: 60px;	/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする設定*/
	font-size: 12px;	/*文字サイズ*/
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	background: rgba(255,211,187,0.7);	/*背景色。0,0,0は黒の事で0.7は透明度70%の事。*/
	position: absolute;
	right: 5%;	/*listブロックに対して右から5%の場所に配置*/
	top: 2%;	/*listブロックに対して上から2%の場所に配置*/
}
/*ボックス内のh4見出し*/
.list-skills-to-be-acquired70 h4 {line-height: 1.5;	/*行間を少し狭くする*/
	text-align: center;	/*文字をセンタリング*/
	border-bottom: 2px dotted #fff;	/*下線の幅、線種、色*/
	margin-bottom: 10px;	/*見出しの下に空けるスペース*/
	font-size: 20px;		/*文字サイズ*/
	font-weight: 800; 
}
/*ボックス内の段落タグ*/
.list-skills-to-be-acquired70 p {
	padding: 0!important;
	line-height: 1.5;	/*行間を少し狭くする*/font-size: 17px;		
}



/*画面の「幅」が「820px以下」の場合の設定。この環境でメインメニューを折りたたむ。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:820px){
.list-skills-to-be-acquired70 {
	width: 40%;			/*ボックスの幅*/
	margin: 0 5% 20px;	/*上、左右、下へのボックス内の余白*/
	height: 400px;		/*ボックスの高さ。*/
}}


/*画面の「幅」が「420px以下」の場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:420px){
.list-skills-to-be-acquired70 {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	overflow: hidden;
}
/*写真の設定*/
.list-skills-to-be-acquired70 figure img {
	float: left;	/*左に回り込み*/
	width: 30%;		/*写真の幅*/
}
/*写真の右上にある金額*/
.list-skills-to-be-acquired70 figure span {
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	font-size: 10px;	/*文字サイズ*/
	left: 0%;	/*listブロックに対して左から0%の場所に配置*/
	top: 0%;	/*listブロックに対して上から0%の場所に配置*/
}
/*ボックス内のh4見出し*/
.list-skills-to-be-acquired70 h4, .list-skills-to-be-acquired70 p {
	text-align: left;	/*文字を左寄せ*/
	margin-left: 35%;	/*左に空けるスペース。上の写真の幅をみて調整して下さい。*/
	font-size: 13px;	/*文字サイズ*/
}}

/*tpbiz41PC２　調理科学の失敗例と解決方法-failure-examples-and-solutions-外枠なし、文字サイズよい
	---------------------------------------------------------------------------*/
	
	.list-failure-examples-and-solutions-61 {
		float: left;	/*左に回り込み*/
		width: 92%;		/*４６幅*/
		overflow: hidden;	/*ボックスから飛び出たらスクロールを出す設定auto。飛び出た部分を非表示にしたいならautoでなくにする。*/
	
		margin-left: 0.5%;	/*	２．５ボックス同士の左右間の余白*/
		margin-bottom: 20px;	/*ボックス同士の上下間の余白*/
		background: ;		/*#000背景色*/
		color: #202124;	/*文字色*/
		border: 1px solid #fff;	/*枠線の幅、線種、色*/
		border-radius: 3px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
		height: 530px;			/*430*/
				/*height: 230px;	高さ（下の「#main .list a」の高さと揃える）*/
		line-height: 1.4;
		position: relative;
	}
	.list-failure-examples-and-solutions-61 a {
		display: block;
		overflow: auto;
		text-decoration: none;
		color: #202124;	/*文字色（ボックスにリンク指定がされた場合に適用される）*/
	
		height: 630px;	/*高さ（上の「#main .list」の高さと揃える）*/
	}
	.list-failure-examples-and-solutions-61 a:hover {
		background: #ffd3bb;	/*マウスオン時の背景色*/
		color: #000;		/*マウスオン時の文字色*/
	}
	/*ボックスにリンク指定がされた場合に出る「→」マーク*/
	.list-failure-examples-and-solutions-61 a::before {
		content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
		position: absolute;
		right: 20px;	/*ボックスの右から20pxの場所に配置*/
		top: 20px;		/*ボックスの上から20pxの場所に配置*/
		background: #000;	/*背景色（古いブラウザ用）*/
		background: rgba(0,0,0,0.5);	/*rgb指定での背景色。「0,0,0」は黒の事で「0.5」が透明度50%の事。*/
		color: #fff;	/*文字色*/
		border: 1px solid #fff;	/*枠線の幅、線種、色*/
		border-radius: 4px;		/*角丸のサイズ*/
		width: 30px;		/*幅*/
		line-height: 30px;	/*高さ*/
		text-align: center;
	}
	 .list-failure-examples-and-solutions-61 a:hover::before {
		background: #000;	/*マウスオン時の「→」マークの背景色*/
	}
	/*ボックス内の画像設定140px*/
	.list-failure-examples-and-solutions-61 .img {
		width: 100%;
		height: 240px;
		object-fit: cover;
		padding-bottom: 10px;	/*画像下に空ける余白*/
	}
	/*ボックス内のh4（見出し）タグ設定detenai*/
	.list-failure-examples-and-solutions-61 h4 {
		font-weight: bold;	/*デフォルトの太字を標準にする設定*/
		font-size: 18px;
		margin-bottom: 5px;
		color: #6b6351;	/*文字色*/
		text-align: center;
		border-bottom: 2px dotted #6b6351;	/*下線の幅、線種、色*/
	}
	.list-failure-examples-and-solutions-61 p {
		font-size: 12px;	/*文字サイズを少し小さく*/
			margin-left : 10px ;
			margin-right : 10px ;	}
	
	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
	
		.list-failure-examples-and-solutions-61 {
		float: none;
		width: auto;
		margin-left: 0;
		height: auto;
	}
	.list-failure-examples-and-solutions-61 a {
		height: auto;
	}	}


/*
---------------------------------------------------------------------------*/
/*24節気listの色違い版で使用list25pc1SP1*/
.list-24sekki {	width: 99%;		/*ボックス幅*/
	border: 1px solid #ffd3bb;	/*枠線の幅、線種、色*/
	margin: 15px 2%;	/*ボックス間のスペース*/
	margin-bottom: 15px;	/*ボックス間のスペース*/
	position: relative;
	overflow: hidden;
	padding: 20px;	/*ボックス内の余白*/  background: #fff3e2;	/*背景色*/	/*背景色*/
}
.list-24sekki a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 20px;
	margin: -20px;	/*上のリンクなしの場合の余白をなくす為の設定*/
	background: #fff;		/*背景色*/
	
	color: #333;	/*文字色*/
}
/*「サービスのご案内」ページのボックス内の矢印マーク設定*/
.list-24sekki a::before {
	content: "→";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	background: rgba(255,244,238,0.5);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
	color: #fff;	/*文字色*/
	font-size: 80px;	/*文字サイズ*/
	line-height: 1;
	padding: 20px;	/*余白（文字と円の間にあける余白）*/
	position: absolute;
	right: -15px;	
	bottom: -25px;	/*ボックスに対して下から-25pxの場所に配置*/
	border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}
/*マウスオン時のボックス*/
.list-24sekki a:hover {
	background: #fffde7;	
}
/*マウスオン時の矢印マーク*/
.list-24sekki a:hover::before {
	background: #009603;	/*背景色*/
}
/*ボックス内の段落タグ設定*/
.list-24sekki p {
	padding: 0px;
	margin: auto;	/*左の写真とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
.list-24sekki figure img {
	float: none;		
	padding: 5px;		
	background: #fff;
	width: 100%;			
	height: auto;		/*写真の高さ*/
	border: 1px solid #ccc;	/*線の幅、線種、色*/
}

.list-24sekki h4 {
	font-size: 160%;	background: #ffd3bb;	
	color: #6b6351;		
	padding: 20px;		
	margin: auto;	
	margin-bottom: 10px; 
	border: dashed 2px #eea882;
    border-radius: 8px;
}


/*画面幅480px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-24sekki {width: 98%;	}
.list-24sekki p {
	margin-left: 0;
}
/*ボックス内の写真設定*/
.list-24sekki figure img {
	float: none;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
/*ボックス内のh4タグ設定*/
.list-24sekki h4 {
	margin-left: 0;
}}

/*list25居酒屋４list-cause-of-failure-and-solution　メニュー（menu.html）内の各ブロック失敗原因と解決策写真とh4の位置を逆にしてみて・・・
---------------------------------------------------------------------------*/
/*各ボックスの設定overflow: hidden;*/
.list-cause-of-failure-and-solution {
	position: relative;
	padding: 20px;			/*ボックス内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	margin-bottom: 20px;	/*ボックスの下に空けるスペース*/
	background: linear-gradient(#fff, #fff4ee);	/*背景グラデーション*/
	color: #333;	/*文字色*/
}
.list-cause-of-failure-and-solution a {
	color: #333;	/*リンクテキストの文字色*/
}
/*ボックス内の段落タグ設定*/
.list-cause-of-failure-and-solution p {
	padding: 0px;line-height: 1.2;	/*行間を少し狭くする*/
	margin-left: 35%;	/*左の写真とのバランスをとって設定して下さい*/
	border-bottom: 1px solid #ccc;	/*下側の線の幅、線種、色*/
}


.list-cause-of-failure-and-solution figure img {
	float: left;		/*画像を左へ回り込み*/
	width: 30%;			/*写真の幅*/
	background: #fff;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 5px;		/*余白。ここに上の行で設定した背景色が出ます。*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}


.list-cause-of-failure-and-solution h4 {
	background: #6b6351;	/*背景色*/color: #FFF;		
	margin-bottom: 0.5em;
	margin-left: 35%;			/*左の写真とのバランスをとって設定*/
	border-bottom: 1px solid #ccc;	/*下側の線の幅、線種、色*/
	font-size: 18px;	/*文字サイズ*/
}

/*上にタイトルとして
---------------------------------------------------------------------------*/
.list-cause-of-failure-and-solution span.option1-of-failure-and-solution {
	text-align: center;display: block;
	font-size: 10px;	/*文字サイズ*/
	width: 120px;		/*幅*/
	position: absolute;
	right: 0px;	/*ボックスに対して右から0pxの場所に配置*/
	top: 0px;	/*ボックスに対して上から0pxの場所に配置*/
	transform: rotate(45deg) translate(36px,-15px);	/*45度回転。右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
	color: #FFF;		/*文字色*/
	background: #6b6351;	/*背景色*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-cause-of-failure-and-solution {
	padding: 10px;			/*ボックス内の余白*/
	margin-bottom: 10px;	/*ボックスの下に空けるスペース*/
}
.list-cause-of-failure-and-solution figure img {
	padding: 0;
	border: none;
}
/*ボックス内のh4タグ設定*/
.list-cause-of-failure-and-solution h4 {
	font-size: 15px;	
}}



/*list42tp_esthe4_brownlist-rl-tate
---------------------------------------------------------------------------*/
/*１個あたりのボックスの指定。「コンパクトタイプ」「横長タイプ」共通に適用されます。*/
.list-course {
	display: flex;					/*flexボックスを使う指定*/
	align-items: center;			/*垂直揃えの指定。上下中央に配置されるように。*/
	margin:30px 10px;			/*ボックス同士の上下間の余白*/
	padding: 20px;					/*ボックス内の余白*/
	border-radius: 8px;				/*角を丸くする指定*/
	overflow: hidden;				/*はみ出た要素を非表示にする。画像の角が飛び出ないようにする為の指定です。*/


	box-shadow: 1px 2px 8px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.1は色が10%出た状態。*/
	background: rgba(255,255,255,0.4);	/*背景色。255,255,255は白の事で、0.4は色が40%出た状態。*/
			/*上下、左右へのボックス内の余白*/
	border: 1px solid #fff;				/*枠線の幅、線種、色*/


}

/*画像の指定。「コンパクトタイプ」「横長タイプ」共通に適用されます。*/
.list-course figure {
	width: 40%;			/*幅*/
	margin-right: 20px;	/*画像とテキストブロックの間にとる余白*/
}

/*h4タグの指定。「コンパクトタイプ」「横長タイプ」共通に適用されます。*/
.list-course h4 {
	margin: 10px 0;	font-size: 2.2em;	/*文字サイズを80%に。*/font-weight: 700;line-height: 1.2;		/*行間*/ 
}

/*pタグの指定。「コンパクトタイプ」「横長タイプ」共通に適用されます。*/
.list-course p {
	margin: 0;
	font-size: 0.8em;	/*文字サイズを80%に。*/
}

/*「コンパクトタイプ」のlistボックス全体を囲むボックス*/
.list-container {
	display: flex;					/*flexボックスを使う指定*/
	flex-wrap: wrap;				/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
}

/*「コンパクトタイプ」のlistボックス。１個あたりのボックスの指定です。*/
.list-container .list-course {
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: stretch;			/*垂直揃えをデフォルトに戻す指定。*/
}

/*「コンパクトタイプ」のfigure画像の上書き。*/
.list-container .list-course figure {
	margin: -20px -20px 0;	/*画像周りの余白を埋める指定です*/
	width: auto;
}

/*「コンパクトタイプ」のh4タグへの追加指定、もしくは上書き。*/
.list-container .list-course h4 {
	margin: 10px 0;			/*上下、左右へのh4の外側に空けるスペース*/
	font-size: 1.2em;		/*文字サイズを120%に*/
	font-weight: normal;	/*hタグのデフォルトの太字を標準にする。太字がいいならこの１行を削除。*/
}

/*IE対策*/
.list-container .list-course div {min-height: 0%;}


/*btnの設定
---------------------------------------------------------------------------*/
/*ボタンを囲むブロック*/
.btn-course {
	text-align: center;	/*内容をセンタリング*/
}

/*ボタン*/
.btn-course a,
.btn-course input {
	display: inline-block;text-decoration: none;border: none;
	color: #fff;			/*文字色*/
	border-radius: 3px;		/*角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 10px 20px;		/*上下、左右へのボタン内の余白*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: linear-gradient(#a99f85,#8a8066);/*背景グラデーション*/
	font-size: 1rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*ボタンのマウスオン時*/
.btn-course a:hover,
.btn-course input:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
	cursor: pointer;
}

/*listブロック内でのボタン*/
.list-course .btn-course a, .list-course .btn-course input {
	margin-top: 10px;	/*上にスペースを空ける*/
	display: block;		/*横幅いっぱいに広げる*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定list23
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {

/*コースページ（listブロック）
---------------------------------------------------------------------------*/
/*「コンパクトタイプ」のlistボックス全体を囲むボックス*/
.list-container {
	flex-direction: row;	/*子要素を横並びにする*/
}

/*「コンパクトタイプ」のlistボックス。１個あたりのボックスの指定です。*/
.list-container .list-course {
	width: 47%;	/*ボックスの幅４８で一列*/
}}
 
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){/*h4タグの指定。「コンパクトタイプ」「横長タイプ」共通に適用されます。*/
	.list-course h4 {
		margin: 0;	font-size: 1.2em;	/*文字サイズを2に。*/
	}
	}
/*コツポイントoven.htmlボックス
---------------------------------------------------------------------------*/
.list-techniques-and-points {
	color: #6b6351;
	overflow: hidden;
	border: 1px solid #6b6351;	/*枠線の幅、線種、色*/
	border-radius: 5px;		/*角丸のサイズ。直角がいいならこの１行を削除。*/
	padding: 20px;			/*ボックス内の余白*/
	margin-bottom: 20px;	/*ボックス同士（上下間）に空けるスペース*/
	background: rgba(255,255,255,0.6);	/*背景色。255,255,255は白のことで、0.1は色が10%出た状態のこと。*/
}
.list-techniques-and-points h4 {
    font-size: 1.8rem;    /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	clear: both;
	
	margin-bottom: 20px;
	padding: 20px 20px 20px 20px;	/*上、右、下、左への見出し内の余白*/
	color: #202124;		/*文字色*/
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	border-radius: 10px;	/*角丸のサイズ*/

}

/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {
	.list-techniques-and-points {
		margin-bottom: 40px;	/*ボックス同士（上下間）に空けるスペース*/
	}
	
	/*画像の設定（listブロック内にある１つ目の画像が対象）*/
	.list-techniques-and-points img:first-of-type {
		width: 30%;			/*画像の幅*/
		float: left;		/*画像を左に回り込みさせる*/
		margin-right: 20px;	/*画像と、右側のテキストとの間に空けるスペース*/
	}	}
	
/*-surigarasu-whiteブロックRelated article関連記事clinc4P分もｈ４ｐｃ4sp1
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.list-related-article {
	overflow: hidden;
	width: 23.4%;	/*22.4幅*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 1%;	/*上、右、下、左2へのボックスの外側に空けるスペース*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	padding: 1%;	/*2ボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}
.list-related-article a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の.listのpaddingを相殺するため。*/
	padding: 2%;	/*ボックス内の余白*/
	background: url(../images/arrow1.png) no-repeat right bottom / 40px;	/*リンク設定した際の右下の矢印マークの読み込み。right（右）、bottom（下）、40pxは画像の幅。*/
}
/*マウスオン時の設定*/
.list-related-article a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
/*h4（見出し）タグの設定行間せまくしたい*/
.list-related-article h4 {padding: 0 !important;
	color: #202124;		/*文字色*/line-height: 1.2;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-weight: bold; 	padding-top: 3px;	/*上の余白*/

	font-size: 80%;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	height: 4em;		/*高さ*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}
/*アイコンの共通設定（グレーで白地講座）*/
.list-related-article .icon-related-article {
	display: inline-block;
	padding: 0 10px;	/*上下、左右へのアイコン内の余白*/
	background: #ccc;	/*背景色。iconクラスだけ適用した場合に出る色です。*/
	color: #fff;		/*文字色*/
	font-size: 0.7em;	/*文字サイズを70%に。*/
}/*講座名*/
.list-related-article .url {
	display: block;
	font-size: 11px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	text-align: right;	/*テキストを右側に*/
}
 
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	/*ブロック１個あたりの設定*/
	.list-related-article {	
		margin: 0 0 0 0 !important;	/*margin-left : 0;上、右、下、左へのボックスの外側に空けるスペース*/
		width: auto;
		float: none;
		padding: 1px;	/*ボックス内の余白*/
	}
	.list-related-article figure {
		float: left;
		width: 48%;
		margin-right: 2%;
	}
	.list-related-article h4
	 {padding: 0 !important;
		font-size: 120%;	/*文字サイズ*/
		text-align: left;		/*文字を左追加*/
		height: auto;
	}
	
}




/*フランス食べ歩き/グラデよい・お菓子の型など教育コラム紫ラデュレ風spだとlist7の色違いお気に入りtp-biz35ｓｐ縦１PC横１
---------------------------------------------------------------------------*/
.list30 {

	background-color:hsla(0,0%,100%,1);
	background-image:
	radial-gradient(at 23% 13%, hsla(0,33%,89%,1) 0px, transparent 50%),
	radial-gradient(at 96% 4%, hsla(0,28%,77%,1) 0px, transparent 50%),
	radial-gradient(at 10% 66%, hsla(0,27%,85%,1) 0px, transparent 50%),
	radial-gradient(at 87% 90%, hsla(0,33%,94%,1) 0px, transparent 50%);


	border: 1px solid #a283b5;	
	margin-bottom: 15px;	


	-webkit-box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;	/*影の設定。右・下・ぼかし幅・色の設定, ＋内側への影を右・下・ぼかし幅・色を設定*/
	box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;			/*同上*/
	position: relative;
	overflow: hidden;color: #202124;		 

	padding: 3%;	/*ボックス内の余白*/
	text-decoration: none;
	display: block;
	overflow: hidden;
}

.list30 p {
	padding: 0px;	
	color: #be8a3a;	
}

.list30 figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 20%;		/*写真の幅*/
	background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 1%;			/*余白。ここに上の行で設定した背景色が出ます。*/
	border: 3px solid #CCC;	/*枠線の幅、線種、色*/
	margin-right: 1%;
}

.list30 h4 {
	font-weight: bold;	/*デフォルトの太字を標準にする設定*/
	font-size: 18px;
	margin-bottom: 5px;
	color: #6b6351;	/*文字色*/
	text-align: center;
	border-bottom: 2px dotted #6b6351;	/*下線の幅、線種、色*/
	
}
/*ボックス内のh4タグの１文字目への設定*/
.list30 h4::first-letter {
	border-left: 10px solid #000;	/*3左側の線の幅、線種、色*/
	padding-left: 5px;	/*10線と文字との余白*/
}
/*h4タグ直下に画像がある場合の段落タグ設定*/
.list30 h4 + figure ~ p {
	margin-left: 24%;	/*左側の写真幅とのバランスをとって設定*/
}
/*h4タグ直下に画像がある場合のtableタグ設定*/
.list30 h4 + figure ~ table {
	margin-left: 24%;	/*左側の写真幅とのバランスをとって設定*/
	width: 75%;			/*テーブル幅*/
}

/*box2内の日付*/
.list30 span.date {
	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	background: #a283b5;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 12px;		/*文字サイズ*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/
	transform: rotate(-20deg);	/*回転の角度*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	.list30 {
		float: none;
		width: auto;
		height: auto;
		margin: 0 0.3em;
		margin-bottom: 20px;
		padding: 5%;	/*ボックス内の余白*/	
		}
	.list30 p {margin-left: 0;	}
	.list30 figure img {
		float: none;
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		margin-bottom: 10px;
	}
	/*h4タグ直下に画像がある場合の段落タグ設定*/
	.list30 h4 + figure ~ p {
		margin-left: 0;
	}
	/*h4タグ直下に画像がある場合のtableタグ設定*/
	.list30 h4 + figure ~ table {
		margin-left: 0;
		width: 100%;
	}	}
 
/*cute2〇に●説明分ブロック（ マカロンメニューページで使っています）.photo-max
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.list-ingredients-for-osechi {
	overflow: hidden;position: relative;
	float: left;	/*左に回り込み*/
	width: 30%;		/*幅*/
	margin-left: 2%;
	margin-bottom: 30px;
	font-size: 10px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
}
/*画像*/
.list-ingredients-for-osechi figure {
	border-radius: 50%;	/*円形にする。*/
	overflow: hidden;
	margin-bottom: 10px;
}
/*h4タグ*/
.list-ingredients-for-osechi h4 {
	font-size: 13px;	/*文字サイズ*/
	height: 2em;		/*高さ１行分。冒頭のbody内のline-heightで「2」と指定しているので、この行の2emというのは１文字の高さの事になります。２行表示にしたいならこの行を「4em」にして下さい。*/
	overflow: hidden;	/*上のheightを超えた文字は非表示にする指定*/
}
/*段落タグ*/
.list-ingredients-for-osechi p {
	padding: 0;
	height: 2em;		/*高さ１行分。上のh4と同じ内容の設定です。*/
	overflow: hidden;	/*これもh4と同じです。*/
}
/*左上に配置している価格*/
.list-ingredients-for-osechi p.price-ingredients-for-osechi {
	text-align: center;
	position: absolute;
	left: 0px;	/*listブロックに対しての左からの配置場所指定*/
	top: 0px;	/*listブロックに対しての上からの配置場所指定*/
	background: #fff;	/*背景色*/
	color: #a283b5;		/*文字色*/
	width: 60px;		/*幅*/
	height: 60px;		/*高さ*/
	line-height: 60px;	/*行間*/
	border-radius: 50%;	/*円形にする指定*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-ingredients-for-osechi {
	float: none;	/*回り込みの解除*/
	width: 60%;		/*ボックスの幅*/
	margin: 0 auto 30px;
}
/*h4タグと段落タグ。１カラムになるので、文字数により切れてしまうのを解除。*/
.list-ingredients-for-osechi h4,
.list-ingredients-for-osechi p {
	height: auto;
	overflow: auto;
}	}
/*tp_beginner7_blackすりガラス風の黒ボックス-for-first-vistor初めてのお客様体験へ
---------------------------------------------------------------------------*/
.list-for-first-vistor {
	color: #FFFFFF;
	overflow: hidden;
	border-radius: 5px;		/*角丸のサイズ。直角がいいならこの１行を削除。*/
	padding: 20px;			/*ボックス内の余白*/
	margin-bottom: 20px;	/*ボックス同士（上下間）に空けるスペース*/
border: 1px solid #fff;						/*線の幅、線種、色（古いブラウザ用）*/
border: 1px solid rgba(255,255,255,0.3);	/*線の幅、線種、色。255,255,255は白の事で0.3は色が30%出た状態の事。*/
	
background: #000;				/*背景色（古いブラウザ用）*/
background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態の事。*/
}

/*list内のh4見出し*/
.list-for-first-vistor h4 {
    font-size: 1.2rem;    /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {
	.list-for-first-vistor {
		margin-bottom: 40px;	/*ボックス同士（上下間）に空けるスペース*/
	}
	
	/*画像の設定（listブロック内にある１つ目の画像が対象）*/
	.list-for-first-vistor img:first-of-type {
		width: 30%;			/*画像の幅*/
		float: left;		/*画像を左に回り込みさせる*/
		margin-right: 20px;	/*画像と、右側のテキストとの間に空けるスペース*/
	}	}
	
	
/*tp_beginner7_blackすりガラス風の黒ボックス
---------------------------------------------------------------------------*/
.list-surigarasu-black {
	color: #FFFFFF;
	overflow: hidden;
	border-radius: 5px;		/*角丸のサイズ。直角がいいならこの１行を削除。*/
	padding: 20px;			/*ボックス内の余白*/
	margin: 20px;	/*ボックス同士（上下間）に空けるスペース*/
border: 1px solid #fff;						/*線の幅、線種、色（古いブラウザ用）*/
border: 1px solid rgba(255,255,255,0.3);	/*線の幅、線種、色。255,255,255は白の事で0.3は色が30%出た状態の事。*/
	
background: #000;				/*背景色（古いブラウザ用）*/
background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態の事。*/
}

/*list内のh4見出し*/
.list-surigarasu-black h4 {line-height: 1.3;		/*行間*/
    font-size: 1.8rem;    /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {
	.list-surigarasu-black {
		margin: 40px;	/*ボックス同士（上下間）に空けるスペース*/
	}
	
	/*画像の設定（listブロック内にある１つ目の画像が対象）*/
	.list-surigarasu-black img:first-of-type {
		width: 30%;			/*画像の幅*/
		float: left;		/*画像を左に回り込みさせる*/
		margin-right: 20px;	/*画像と、右側のテキストとの間に空けるスペース*/
	}	}

/*tp_beginner7_blackすりガラス風の各ボックス
---------------------------------------------------------------------------*/
.list-surigarasu-white {
	color: #fff;
	overflow: hidden;
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 5px;		/*角丸のサイズ。直角がいいならこの１行を削除。*/
	padding: 20px;			/*ボックス内の余白*/
	margin-bottom: 20px;	/*ボックス同士（上下間）に空けるスペース*/
	background: rgba(255,255,255,0.1);	/*背景色。255,255,255は白のことで、0.1は色が10%出た状態のこと。*/
}
.list-surigarasu-white h4 {
    font-size: 1.8rem;    /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {
	.list-surigarasu-white {
		margin-bottom: 40px;	/*ボックス同士（上下間）に空けるスペース*/
	}
	
	/*画像の設定（listブロック内にある１つ目の画像が対象）*/
	.list-surigarasu-white img:first-of-type {
		width: 30%;			/*画像の幅*/
		float: left;		/*画像を左に回り込みさせる*/
		margin-right: 20px;	/*画像と、右側のテキストとの間に空けるスペース*/
	}	}
	


	
/*tp_beginner7_black白枠白ガラス白文字。黒地にボックス
---------------------------------------------------------------------------*/
.list-profile-episode {
	overflow: hidden;
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 5px;		/*角丸のサイズ。直角がいいならこの１行を削除。*/
	padding: 20px;			/*ボックス内の余白*/
	margin-bottom: 20px;	/*ボックス同士（上下間）に空けるスペース*/
		/*background: rgba(255,255,255,0.1);背景色。255,255,255は白のことで、0.1は色が10%出た状態のこと。*/

	color: #FFFFFF;
	background-color: rgba(211,223,222,0.50);
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);


}

/*list内のh4見出し*/
.list-profile-episode h4 {
    font-size: 1.2rem;    /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {
	.list-profile-episode {
		margin-bottom: 40px;	/*ボックス同士（上下間）に空けるスペース*/
	}
	
	/*画像の設定（listブロック内にある１つ目の画像が対象）*/
	.list-profile-episode img:first-of-type {
		width: 30%;			/*画像の幅*/
		float: left;		/*画像を左に回り込みさせる*/
		margin-right: 20px;	/*画像と、右側のテキストとの間に空けるスペース*/
	}	}
		
/*
---------------------------------------------------------------------------*/
/*おすすめ道具/パリのお店listの色違い版で使用list25pc1SP1メルマガページで講座一覧でつかってる*/
.list25 {	width: 99%;		/*ボックス幅*/
	border: 1px solid #ffd3bb;	/*枠線の幅、線種、色*/
	margin: 15px 2%;	/*ボックス間のスペース*/
	margin-bottom: 15px;	/*ボックス間のスペース*/
	position: relative;
	overflow: hidden;
	padding: 20px;	/*ボックス内の余白*/  background: #fff3e2;	/*背景色*/	/*背景色*/
}
.list25 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 20px;
	margin: -20px;	/*上のリンクなしの場合の余白をなくす為の設定*/
	background: #fff;		/*背景色*/
	
	color: #333;	/*文字色*/
}
/*「サービスのご案内」ページのボックス内の矢印マーク設定*/
.list25 a::before {
	content: "→";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	background: rgba(255,244,238,0.9);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
	color: #fff;	/*文字色*/
	font-size: 80px;	/*文字サイズ*/
	line-height: 1;
	padding: 20px;	/*余白（文字と円の間にあける余白）*/
	position: absolute;
	right: -15px;	
	bottom: -25px;	/*ボックスに対して下から-25pxの場所に配置*/
	border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}
/*マウスオン時のボックス*/
.list25 a:hover {
	background: #fffde7;	
}
/*マウスオン時の矢印マーク*/
.list25 a:hover::before {
	background: #eea882;	/*背景色*/
}
/*ボックス内の段落タグ設定*/
.list25 p {
	padding: 0px;
	margin: auto;	/*左の写真とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
.list25 figure img {
	float: none;		
	padding: 5px;		/*余白*/
	background: #fff;	/*背景色*/
	width: 100%;			/*写真の幅*/
	height: auto;		/*写真の高さ*/
	border: 1px solid #ccc;	/*線の幅、線種、色*/
}
/*ボックス内のh4タグ設定*/
.list25 h4 {
	font-size: 160%;
	color: #25301b ;		/*文字色*/
	border-bottom: dotted 2px #eea882;	/*下線の線種、幅、色*/
	margin: auto;	
	margin-bottom: 10px;
}
/*フランス国旗・ふきだしアイコンの位置-10 0*/
.list25 img.icon0 {
	position: absolute;
	top: -30px;
	right:-10px;	
}

/*画面幅480px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px){

.list25 {width: 98%;	}
.list25 p {
	margin-left: 0;
}
/*ボックス内の写真設定*/
.list25 figure img {
	float: none;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
/*ボックス内のh4タグ設定*/
.list25 h4 {	font-size: 160%;
	margin-left: 0;
}}


/*《一番使ってる》のリストボックをアレンジ。残す。PCでも横ⅰいちで文字制限なしになっている。
---------------------------------------------------------------------------*/

.list {
	
	width: 99%;	/*ボックスの幅*/
	border-radius: 3px;	/*角丸のサイズ*/
	-webkit-box-shadow: 0px 2px 5px #bcbcbc;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #bcbcbc;			/*同上*/
	background: #FFF1f1;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#FFF4ee, #fff1f1);	/*グラデーション*/
	background: linear-gradient(#FFF4ee, #fff1f1);			/*同上*/
	padding: 0.5%;	/*ボックス内の余白*/
	float: left;
	margin: 0px 0.5% 20px;
	border: 1px solid #CCC;
	position: relative;
}
/*ボックス内の段落タグ設定*/
.list p {
	padding: 0px;
	color: #be8a3a;	
	font-size: 16px;	/*文字サイズ*/
}
/*ボックス内のh4タグ設定*/
.list h4 {
	color: #6b6351;	/*文字色*/
	text-align: center;
	border-bottom: 2px dotted #6b6351;	/*下線の幅、線種、色*/
	margin-bottom: 5px;
	font-size: 18px;	/*文字サイズ*/
	font-weight: bold;	/*文字サイズ*/
}
/*ボックス内の写真*/
.list figure img {
	width: 620px;		/*画像幅*/
	object-fit: cover;	/* この一行を追加するだけ！ */	
	margin-bottom: 10px;
	margin: 0 auto;/* 画像を中央にしたくて試行錯誤！ */		
}
/*ふきだしアイコンの位置*/
.list img.icon0 {
	position: absolute;
	top: -10px;	/*ボックスに対して上から-10pxの位置に配置*/
	right: 0px;	/*ボックスに対して右から0pxの位置に配置*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list {
	float: none;
	width: auto;
	height: auto;
	margin: 0 0.3em;
	margin-bottom: 20px;
	padding: 5%;	/*ボックス内の余白*/
}/*ボックス内の写真*/
.list figure img {
	width: 340px;		/*画像幅*/
	object-fit: cover;	/* この一行を追加するだけ！ */	
	margin-bottom: 10px;
	margin: 0 auto;/* 画像を中央にしたくて試行錯誤！ */		
}
	.list h4 {
		font-size: 20px;	
	}	}




/*cafae17トップページの「講座案内」ブロックlistに見えない
---------------------------------------------------------------------------*/
/*写真とメニュー解説テキストを囲むブロック*/
.list-top2 {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	align-items: center;	/*垂直揃えの指定。上下中央に配置されるように。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin-bottom: 40px;	/*下に空けるスペース*/
}

/*list2ブロック内のh4タグ*/
.list-top2 h4 {
	margin: 0;
	font-size: 1.2rem;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	font-weight: normal;	/*hタグはデフォルトで太字なので、これを標準にする*/
	text-align: center;		/*テキストをセンタリング*/
}

/*写真下の小さなテキスト*/
.list-top2 figcaption {
	margin-top: 20px;	/*写真とテキストとの間に空けるスペース*/
	font-size: 0.7rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*list2ブロック内のfigureタグ。写真を囲むブロック。*/
.list-top2 figure {
	width: 90%;				/*幅*/
	text-align: center;		/*テキストをセンタリング*/
}

/*料理写真*/
.list-top2 figure img {
	padding: 10px;		/*写真の周りに少し余白を作って、より写真っぽく見せる*/
	background: #fff;	/*上の10pxとの間に出る色*/
	box-shadow: 0px 0px 50px 10px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、範囲。0,0,0は黒の事で0.1は色が10%出た状態の事。*/
	transform: rotate(-2deg);	/*左に少しだけ回転させる指定。回転させたくなければこの１行と、下の「.list2:nth-of-type(even) img」のブロックを削除。*/
}

/*偶数番目のimg画像*/
.list-top2:nth-of-type(even) img {
	transform: rotate(2deg);	/*回転を上と逆向きに。*/
}

/*list2内のtextブロック*/
.list-top2 .text {
	width: 100%;	/*幅*/
}

/*list2内のリストタグ*/
.list-top2 li {
	margin-bottom: 10px;	/*上下間にとるスペース*/
}

/*list2内のリストタグ内のspanタグ。文字サイズの小さい説明テキスト部分です。*/
.list-top2 li span {
	display: block;
	font-size: 0.7rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	opacity: 0.5;		/*透明度。0.5は色が50%出た状態の事。*/
}


/*---------------------------------------------------------------------------
ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {
/*トップページの「今週のランチ」ブロック
---------------------------------------------------------------------------*/
/*写真とメニュー解説テキストを囲むブロック*/
.list-top2 {
	flex-direction: row;	/*子要素を横並びにする*/
	margin-bottom: 100px;	/*下に空けるスペース*/
}

/*偶数番目のlist2ブロック*/
.list-top2:nth-of-type(even) {
	flex-direction: row-reverse;	/*配置を左右逆にする*/
}

/*list2ブロック内のfigureタグ。写真を囲むブロック。*/
.list-top2 figure {
	width: 48%;	/*幅*/
}

/*list2内のtextブロック*/
.list-top2 .text {
	width: 48%;	/*幅*/
}	}
	

/*tp111すりガラス風黒にのせる１２３メリット・混ぜ方のリストなどPC横４ｓｐ横長１
---------------------------------------------------------------------------*/
.list-123-surigarasu {
	position: relative;overflow: hidden;
	float: left;			/*左に回り込み*/
	font-size: 11px;		/*文字サイズ*/
	line-height: 1.5;		/*行間*/
	width: 23%;				/*ボックスの幅*/
	margin-left: 1.5%;		/*ボックスの左右間に空けるスペース*/
	margin-bottom: 20px;	/*ボックスの上下間に空けるスペース*/
}
.list-123-surigarasu a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 10px;	/*ボックス内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 0px 0px 50px #faf7d4 inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
}
/*マウスオン時。内側の影を消す設定。*/
.list-123-surigarasu a:hover {
	box-shadow: none;
	border: 1px solid #ff5293;	
}
/*ボックス内のh4タグ設定*/
.list-123-surigarasu h4 {
	font-size: 120%;		/*文字サイズ*/
	line-height: 1.5;	/*行間。1.5が１行分になります。*/
	height: 1.5em;		/*高さ1行。上の1.5が基準なので、1(行)を掛け算し、1.5em。emは文字サイズの単位。*/
	overflow: hidden;	/*上記を超える場合の文字を消す設定*/
	color: #202124;		/*文字色*/
}


/*ボックス内のh4タグ設定追加自己流*/
.list-123-surigarasu h4 span {
	font-size: 100%;		/*文字サイズ*/
	line-height: 1.5;	/*行間。1.5が１行分になります。*/
	height: 1.5em;		/*高さ1行。上の1.5が基準なので、1(行)を掛け算し、1.5em。emは文字サイズの単位。*/
	overflow: hidden;	/*上記を超える場合の文字を消す設定*/
	color: #eea882;		/*文字色*/
}


/*ボックス内のp(段落)タグ設定*/
.list-123-surigarasu p {
	padding: 0px !important;
	line-height: 1.5;	/*行間。1.5が１行分になります。*/
	height: 4.5em;		/*高さ3行。上の1.5が基準なので、3(行)を掛け算し、4.5em。emは文字サイズの単位。*/
	overflow: hidden;	/*上記を超える場合の文字を消す設定*/
}

/*「人気」「NEW」マーク
---------------------------------------------------------------------------*/
/*mark1,matk2共通設定*/
.mark1-123-surigarasu, .mark2-123-surigarasu {
	display: inline-block;position: absolute;
	left: 5px;			/*ボックス内の左から5pxの場所に配置*/
	top: 5px;			/*ボックス内の上から5pxの場所に配置*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	font-size: 9px;		/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #fff;		/*文字色*/
	border-radius: 50%;	/*角丸のサイズ*/
	transform: rotate(-30deg);	/*左に30度傾ける設定*/
}
/*mark1の背景色*/
.mark1-123-surigarasu {background: #df246f;}
/*mark2の背景色*/
.mark2-123-surigarasu {background: #249fdf;}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

.list-123-surigarasu {
	float: none;
	width: auto;
	margin-left: 0;
	font-size: 100%;
	line-height: normal;
}
.list-123-surigarasu figure {
	width: 25%;
	float: left;
	margin-right: 10px;
}

/*「人気」「NEW」マーク
---------------------------------------------------------------------------*/
/*mark1,matk2共通設定*/
.mark1-123-surigarasu, .mark2-123-surigarasu {
	left: auto;		/*左に配置すると顔に重なるのでこの行でリセットし、下の行で右側に再設定します。*/
	right: 5px;
	transform: none;	/*傾きをなしに。傾いたままがいいならこの１行削除。*/
}}


/*cute1　ワンポイントアドバイス簡易会話風につかう
list8ブロック
---------------------------------------------------------------------------*/
/*各ブロックごとの設定*/
.list-kaiwa {
	overflow: hidden;
	font-size: 90%;		/*文字サイズ*/
	margin: 30px;	/*-bottomブロックの下に空けるスペース*/
}
/*画像の設定*/
.list-kaiwa img {
	border-radius: 50%;	/*円形にする指定*/
	width: 20%;			/*画像の幅*/
	float: left;		/*画像を左に回り込み*/
	margin-left: 3%;	/*画像の右に空けるスペース*/
}

.list-kaiwa h4 {
	font-size: 140%;	/*文字サイズ*/line-height: 1.4;
}

.list-kaiwa p {
	padding: 0 !important;
	line-height: 2;
}

/*list69job3　listなのにボックス（こんなお悩みありませんか？レ点ブロック一列）
---------------------------------------------------------------------------*/
.list-re-konnaonayamiarimasenka {
	overflow: hidden;
	margin: 0px auto;	/*追加左右あけたい追加追加*/
}

.list-re-konnaonayamiarimasenka li {
		/*float: right;	left左に回り込み*/
	width: 75%;			/*幅*/
	line-height: 1.5;	/*行間*/
	margin: 0px auto 20px;	/*上、左右、下へのボックスの外側へ空けるスペース*/
}

.list-re-konnaonayamiarimasenka a {
	display: block;text-decoration: none;
	height: 85px;		/*ボックスの高さ*/
	overflow: hidden;	/*ボックスから飛び出た場合、非表示にする設定*/
	background: linear-gradient(#fff, #fff4ee);/*背景グラデーション*/
	border-radius: 10px;	/*角丸のサイズ*/
	box-shadow: 2px 2px 3px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒の事で0.1は10%色がついた状態の事。*/
	padding: 15px;	/*ボックス内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}
.list-re-konnaonayamiarimasenka a:hover {
	background: #fff;	/*背景色*/
	box-shadow: none;	/*ボックスの影をなくす設定*/
	position: relative;
	left: 1px;	/*現在地から右に1px移動する*/
	top: 1px;	/*現在地から下に1px移動する*/
}
.list-re-konnaonayamiarimasenka .img {
	height: 100%;	/*高さ*/
	float: left;	/*right右に回り込み*/
}

/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list-re-konnaonayamiarimasenka span {
	font-size: 28px;	/*文字サイズ*/
	color: #c30000;	
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){/*list2ボックス（トップページの「現在の求人」で使っている２列のブロック）
	---------------------------------------------------------------------------*/
	.list-re-konnaonayamiarimasenka a {	
		height: 80px;		/*ボックスの高さ*/
		padding: 5px 10px;	/*上下、左右へのボックス内の余白*/
	}
/*list2ボックス（トップページの「現在の求人」で使っている２列のブロック）
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	.list-re-konnaonayamiarimasenka li {
		width: 90%;	/*１列にする設定*/
		
	}

/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list-re-konnaonayamiarimasenka span {
	font-size: 18px;	font-weight: bold;
}	}


/*画面幅360px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:360px){

	/*list2ボックス（トップページの「現在の求人」で使っている２列のブロック）
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	.list-re-konnaonayamiarimasenka li {
		float: none;width: 90%;	/*１列にする設定*/
		margin: 0 2px  10px;	/*上、左右0、下に空けるボックスの外側の余白。*/
	}

	.list-re-konnaonayamiarimasenka li a {
		height: 70px;
	}
	/*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
	.list-re-konnaonayamiarimasenka .img {
		height: auto;	/*高さをリセット*/
		width: 15%;		/*幅の指定に変更*/
	}	}
	


/*fudousan15物件一覧ページの表あり。たすきあり。《年間スケジュール》《特徴》など写真に数字をいれて下に解説するブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list-123 {
	position: relative;overflow: hidden;
	margin-bottom: 20px;	
}
.list-123 a {
	text-decoration: none;display: block;overflow: hidden;
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	padding: 3%;	/*ボックス内の余白*/
	background: #fff;	/*背景色*/
}
.list-123 a:hover {
	border: 1px solid #999;	/*マウスオン時の枠線の幅、線種、色*/
}

/*ボックス内のh4タグ設定*/
.list-123 h4 {
	margin-bottom: 0.5em;
	color: #262f71;		/*文字色*/
	margin-left: 22%;	/*左側の写真幅とのバランスをとって設定*/
}
/*ボックス内のh4タグの１文字目への設定*/
.list-123 h4::first-letter {
	border-left: 3px solid #262f71;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	/*線と文字との余白*/
}

/*ボックス内のp(段落)タグ設定*/
.list-123 p {
	padding: 0px;
	margin: 8%;	/*-left左側の写真幅とのバランスをとって設定*/
}

/*ボックス内の写真設定*/
.list-123 figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 20%;		/*写真の幅*/
	margin-right: 2%;	/*写真の右側に空ける余白*/
}
/*マウスオン時のボックス内の写真設定*/
.list-123 a:hover figure img {
	opacity: 0.8;	/*透明度80%にする設定*/
}
/*一覧ページのボックス内のアイコン
（CMSの場合は管理ページの「オプション1」～のプルダウンと、setup.phpの「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
/*option1,option2共通*/
span.option1-123 , span.option2-123  {
	text-align: center;
	display: block;
	font-size: 10px;	/*文字サイズ*/
	line-height: 1.5;	/*帯の高さ*/
	width: 120px;		/*幅*/
	position: absolute;
	left: 0px;	/*ボックスに対してに左からの配置指定*/
	top: 0px;	/*ボックスに対しての上からの配置指定*/
	transform: rotate(-45deg) translate(-36px,-15px);	/*45度回転、移動の指定。*/
	color: #FFF;	/*文字色*/
	background: #999;	/*背景色*/
}
/*option1への追加設定*/
span.option1-123  {
	color: #FFF;		/*文字色*/
	background: #F00;	/*背景色*/
}
/*option3（試用版の場合は「キャンペーン」）*/
span.option3-123  {
	display: inline-block;line-height: 1;
	background: #ee6500;	/*背景色*/
	color: #fff;			/*文字色*/
	border-radius: 30px;	/*角丸の指定。大きめの数字であれば適当で構いません。*/
	padding: 3px 10px;		/*上下、左右への余白*/
	font-size: 12px;		/*文字サイズ*/
}
/*h2タグ内で使った場合のoption1とoption2とoption3*/
h2 span.option1-123 , h2 span.option2-123 , h2 span.option3-123  {
	width: auto;
	position: static;
	transform: none;
	display: inline-block;
	font-size: 15px;
	margin-left: 10px;
	padding: 0px 5px;
}

/*マウスオン時のボックス内の写真設定（※compactタイプへの追加設定）と、ボックスにoption2スタイルが指定された場合の画像の設定。*/
.list-123.option2-123 a:hover figure img,
.list-123.option2-123 figure img {
	opacity: 0.3 !important;
}
/*登録日情報（.date単体で使う場合のスタイルも下にあります。）*/
.list-123 .date-123 {
	display: block;
	font-size: 11px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	text-align: right;	/*テキストを右側に*/
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
}

/*一覧ページの各物件ボックス内のテーブル
---------------------------------------------------------------------------*/
.list-123 table {
	font-size: 12px;	/*文字サイズ*/
	width: 78%;			/*テーブル幅*/
	margin-bottom: 5px;
}
.list-123 table,
.list-123 table td,
.list-123 table th {
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
}
.list-123 table td,
.list-123 table th {
	padding: 1%;	/*テーブル内の余白*/
}
/*色のついた見出しブロック*/
.list-123 table th {
	width: 20%;		/*幅*/
	text-align: center;		/*文字をセンタリング*/
	font-weight: normal;	/*デフォルトの太字を標準にする設定*/
	background: #edf0f5;	/*背景色*/
}
/*白い説明用ブロック*/
.list-123 table td {
	width: 30%;	/*幅*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){/*一覧ページの各物件ボックス内のテーブル
	---------------------------------------------------------------------------*/
	.list-123 table {
		font-size: 12px;
		font-size: 2.93vw;
	}}



/*cafe16-benefit-copy-yokoずっと横巨大キャッチコピー。写真切り抜き
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-benefit-copy-yoko {
	position: relative;overflow: hidden;
	display: flex;
	align-items: center;
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	background: #fff;		/*背景色*/
	color: #999;			/*文字色*/
}

.list-benefit-copy-yoko h4 {
	font-size: 48px;
	line-height: 1;
	margin-bottom: 20px;
	color: #6b6351;	/*文字色*/border: 4px solid #fff4ee;	/*枠線の幅、線種、色*/
}
.list-benefit-copy-yoko h4 a {
	color: #7b6d55;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
.list-benefit-copy-yoko p {
	padding: 0;
}
/*ボックス内のfigure画像*/
.list-benefit-copy-yoko figure {
	float: right;	/*左に回り込み*/
	width: 50%;		/*幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-benefit-copy-yoko .text {
	float: right;	/*右に回り込み*/
	width: 40%;		/*幅*/
	margin: 5%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*list（商品メニュー用のブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-benefit-copy-yoko {
	display: block;
	padding: 20px;
}
/*ボックス内のh4（見出し）タグ*/
.list-benefit-copy-yoko h4 {
	font-size: 18px;
	margin-bottom: 0px;
}
/*ボックス内のfigure画像*/
.list-benefit-copy-yoko figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-benefit-copy-yoko .text {
	float: none;
	width: auto;
	margin: 0;
}}


/*メニューマーク　option1(おすすめ)と、option2(人気)
---------------------------------------------------------------------------*/
/*共通*/
.list-benefit-copy-yoko .option1-benefit-copy,.list-benefit-copy-yoko .option2-benefit-copy {
	text-align: center;display: block;
	font-size: 10px;	/*文字サイズ*/
	width: 120px;		/*幅*/
	position: absolute;
	right: 0px;	/*ボックスに対して右から0pxの場所に配置*/
	top: 0px;	/*ボックスに対して上から0pxの場所に配置*/
	transform: rotate(45deg) translate(36px,-15px);	/*45度回転。右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
}
/*option1(おすすめ)への追加指定*/
.list-benefit-copy-yoko .option1-benefit-copy {
	color: #FFF;		/*文字色*/
	background: #F00;	/*背景色*/
}
/*option2(人気)への追加指定*/
.list-benefit-copy-yoko .option2-benefit-copy {
	color: #FFF;		/*文字色*/
	background: #e68200;	/*背景色*/
}

/*cafe16メニューマーク　option3(10%OFF〜)の割引アイコン
---------------------------------------------------------------------------*/
.list-benefit-copy-yoko .option3-benefit-copy {
	text-align: center;display: block;
	font-size: 10px;	/*文字サイズ*/
	width: 60px;		/*幅*/
	height: 45px;		/*高さ。下のpadding-topの数字と合わせてwidthの値になるように。*/
	padding-top: 15px;	/*上に空ける余白。上のheightの数字と合わせてwidthの値になるように。*/
	line-height: 1.2;	/*行間*/
	border-radius: 50%;	/*角丸の指定。円形になります。*/
	position: absolute;
	left: 5px;	/*ボックスに対して左から5pxの場所に配置*/
	top: 5px;	/*ボックスに対して上から5pxの場所に配置*/
	color: #FFF;		/*文字色*/
	background: #F00;	/*背景色*/
	transform: rotate(-30deg);	/*-30度回転*/
}
/*１行目の文字サイズをすこし大きくする*/
.option3-benefit-copy::first-line {
	font-size: 16px;
	font-weight: bold;
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*メニューマーク　option11(10%OFF)〜の割引アイコン
---------------------------------------------------------------------------*/
.list-benefit-copy-yoko .option1-benefit-copy,.list-benefit-copy-yoko .option2-benefit-copy,.list-benefit-copy-yoko .option3-benefit-copy {
	width: 40px;		/*幅*/
	height: 33px;		/*高さ。下のpadding-topの数字と合わせてwidthの値になるように。*/
	padding-top: 7px;	/*上に空ける余白。上のheightの数字と合わせてwidthの値になるように。*/
}
/*１行目の文字サイズをすこし大きくする*/
.list-benefit-copy-yoko .option1-benefit-copy::first-line,
.list-benefit-copy-yoko .option2-benefit-copy::first-line,
.list-benefit-copy-yoko .option3-benefit-copy::first-line {
	font-size: 12px;
}}	




/*cafe16 list（商品メニュー用のブロック）各メリットの下にベネフィットをいれてあとおし。普通の文字サイズ
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-merit-hitokoto {
	position: relative;overflow: hidden;
	display: flex;
	align-items: center;
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	background: #fff;		/*背景色*/
	color: #999;			/*文字色*/
}
/*ボックス内のh4（見出し）タグ*/
.list-merit-hitokoto h4 {
	font-size: 24px;
	line-height: 1.5;
	margin-bottom: 20px;
	color: #7b6d55;	/*文字色*/
}
.list-merit-hitokoto h4 a {
	color: #7b6d55;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
.list-merit-hitokoto p {
	padding: 0;	border: 1px solid #000;	/* overflow: hidden;線の太さ・種類・色 */
}
/*ボックス内のfigure画像*/
 .list-merit-hitokoto figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-merit-hitokoto .text {
	float: right;	/*右に回り込み*/
	width: 60%;		/*幅*/
	margin: 5%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*list（商品メニュー用のブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-merit-hitokoto {
	display: block;
	padding: 20px;
}
/*ボックス内のh4（見出し）タグ*/
.list-merit-hitokoto h4 {
	font-size: 18px;
	margin-bottom: 0px;
}
/*ボックス内のfigure画像*/
.list-merit-hitokoto figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-merit-hitokoto .text {
	float: none;
	width: auto;
	margin: 0;
}}


/*cafe16色付きで巨大文字でベネフィット枠無し
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-benefit-copy {
	position: relative;overflow: hidden;
	display:block;
	align-items: center;
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	background: #fff;		/*背景色*/
	color: #999;			/*文字色*/
}

.list-benefit-copy h4 {
	font-size: 48px;
	line-height: 1.3;
	margin-bottom: 20px;
	color: #c30000;	/*文字色*/
}
.list-benefit-copy h4 a {
	color: #7b6d55;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
.list-benefit-copy p {
	padding: 0;
}
/*ボックス内のfigure画像くりぬきおすすめ*/
.list-benefit-copy figure {
	float: left;	/*左に回り込み*/
	width: 50%;		/*幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-benefit-copy .text {
	float: right;	/*右に回り込み*/
	width: 40%;		/*幅*/
	margin: 5%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*list（商品メニュー用のブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-benefit-copy {
	display: block;
	padding: 20px;
}
/*ボックス内のh4（見出し）タグ*/
.list-benefit-copy h4 {
	font-size: 28px;
	margin-bottom: 0px;
}
/*ボックス内のfigure画像*/
.list-benefit-copy figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-benefit-copy .text {
	float: none;
	width: auto;
	margin: 0;
}}




/*cafe16 黒地で黄色文字。大き目文字サイズ
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list-merit-hitokoto-kuro {
	position: relative;overflow: hidden;
	display: flex;
	align-items: center;
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	background: #000;		/*背景色*/
	color: #fff;			/*文字色黄色化オレンジにしたい*/
}
/*ボックス内のh4（見出し）タグ*/
#contents .list-merit-hitokoto-kuro h4 {
	font-size: 32px;
	line-height: 1.5;
	margin-bottom: 20px;
	color: #7b6d55;	/*文字色*/
}
.list-merit-hitokoto-kuro h4 a {
	color: #7b6d55;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
.list-merit-hitokoto-kuro p {
	padding: 0;	border: 1px solid #000;	/* overflow: hidden;線の太さ・種類・色 */
}
/*ボックス内のfigure画像*/
.list-merit-hitokoto-kuro figure {
	float: right;	/*左に回り込み*/
	width: 30%;		/*幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-merit-hitokoto-kuro .text {
	float: left;	/*右に回り込み*/
	width: 60%;		/*幅*/
	margin: 5%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*list（商品メニュー用のブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-merit-hitokoto-kuro {
	display: block;
	padding: 20px;
}
/*ボックス内のh4（見出し）タグ*/
.list-merit-hitokoto-kuro h4 {
	font-size: 18px;
	margin-bottom: 0px;
}
/*ボックス内のfigure画像*/
.list-merit-hitokoto-kuro figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-merit-hitokoto-kuro .text {
	float: none;
	width: auto;
	margin: 0;
}}




/*list2（クリニック３各症状ブロック）
---------------------------------------------------------------------------*/
/*各ブロックの設定*/
.list-mayumi-method {
	overflow: hidden;
	margin-bottom: 20px;
	padding: 2%;	/*ボックス内の余白*/
	border: 3px solid #ccc;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
}
/*ボックス内の右側のブロック*/
.list-mayumi-method .text {
	margin-left: 31%;	/*左に空けるスペース。下のfigureの幅を考慮して設定。*/
}
/*h4見出し*/
.list-mayumi-method h4 {
	font-size: 30px;	/*文字サイズ*/
	color: #6c5f49;		/*文字色*/
}
/*figure画像*/
.list-mayumi-method figure {
	width: 30%;		/*幅*/
	float: left;	/*左に回り込み*/
}
/*list2内のテーブルタグ*/
.list-mayumi-method table {
	font-size: 13px;	/*文字サイズ*/
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
}
/*list2内のテーブルタグ（行）*/
.list-mayumi-method table tr {
	border-top: 1px dashed #ccc;	/*各行の上の線の幅、線種、色*/
}
/*list2内のテーブルタグ（tdとth）*/
.list-mayumi-method table td, .list-mayumi-method table th {
	padding: 2px 5px;	/*上下、左右への余白*/
}
/*list2内のテーブルタグ（th見出し）*/
.list-mayumi-method table th {
	background: #eee;	/*背景色*/
	text-align: left;	/*テキストを左よせ*/
}

/*list1とlist2の段落タグ指定
---------------------------------------------------------------------------*/
.list-mayumi-method p {
	padding: 0 !important;
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	/*list2（施術メニューページの各症状ブロック）
	---------------------------------------------------------------------------*/
	/*ボックス内の右側のブロック*/
	.list-mayumi-method .text {
		margin-left: 0;
	}
	/*figure画像*/
	.list-mayumi-method figure {
		width: 50%;		/*幅*/
		float: none;
		display: block;
		margin: 0 auto;
	}
	/*h4見出し*/
	.list-mayumi-method h4 {
		font-size: 20px;	/*文字サイズ*/
	}}
/*スリム-strengths強み３つ料理
---------------------------------------------------------------------------*/
.list-slim-strengths {	
	border: 1px solid #eea882;	/* overflow: hidden;線の太さ・種類・色 */
	margin: 3px; /* 外側の余白 */
	padding: 4px; 
	position: relative;border-radius: 3px;	/*角丸のサイズ*/
	font-size: 18px;	
	line-height: 1.3;	
	background: #fff4ee;	
}

.list-slim-strengths a {
	display: block;text-decoration: none;overflow: hidden;
	padding: 8px 0;	
	border-bottom: 1px solid #fff4ee;	
}
.list-slim-strengths figure img {
	width: 12.5%;		
	float: left;
	padding: 2px;		
	margin-right: 5px;	
}

.list-slim-strengths h4 {
	font-size: 28px;
	font-weight: bold; 
	color: #6b6351;		
}


/*８つのナビGALLERYページtpsimple11をリスト３７に
	---------------------------------------------------------------------------*/
	.list-column-navi37 {
		float: left;	/*画像を左へ回り込み*/
		width: 92%;		/*幅*/height: 220px;
		margin: 0 0 15px 3%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
		font-size: 13px;	/*文字サイズ*/
		-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.8);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の小数点が透明度。*/
		box-shadow: 2px 2px 6px rgba(0,0,0,0.8);			/*同上*/
		border-radius: 10px;	/*角丸のサイズ*/
	}
	.list-column-navi37 a {
		padding:1% 9%;	/*ボックス内の余白*/
		border-radius: 10px;	/*角丸のサイズ*/
		text-decoration: none;
		display: block;
		overflow: hidden;
		background: #fff;	/*背景色*/
		color: #333;		/*文字色*/
		opacity: 1;		/*透明度の設定。0.8は80%の透明度という意味。*/
	}
	.list-column-navi37 a:hover,
	.list-column-navi37 a:active {
		opacity: 0.8;	/*透明度を100%にする設定*/
	}
	/*ボックス内の段落タグ設定*/
	.list-column-navi37 p {
		padding: 0px;
	}
	/*ボックス内の写真設定*/
	.list-column-navi37 figure img {
		width: 100%;		/*写真の幅*/height: 170px;object-fit: cover;	
	}
	/*ボックス内のh4タグ設定*/
	.list-column-navi37 h4 {
		color: #777684;		/*文字色*/
	}
	
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

	
/*GALLERYページ
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list-column-navi37 {height: 220px;
	width: 92%;	/*幅４７*/
	margin: 0 0 10px 2%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
}
.list-column-navi37 a {
	opacity: 1;	/*マウスオンができない端末向けに透明度を通常に戻す設定*/
}	}
	
	/*８つのナビGALLERYページtpsimple11をリスト３７に
---------------------------------------------------------------------------*/
.list-persona-navi37 {
	float: left;	
	width: 46%;		/*幅*/
	margin: 0 0 15px 3%;	
	font-size: 13px;	/*文字サイズ*/
	-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.8);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の小数点が透明度。*/
	box-shadow: 2px 2px 6px rgba(0,0,0,0.8);			/*同上*/
	border-radius: 10px;	/*角丸のサイズ*/
}
.list-persona-navi37 a {
	padding:2% 9%;	/*ボックス内の余白*/
	border-radius: 10px;	/*角丸のサイズ*/
	text-decoration: none;
	display: block;
	overflow: hidden;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	opacity: 1;		/*透明度の設定。0.8は80%の透明度という意味。*/
}
.list-persona-navi37 a:hover,
.list-persona-navi37 a:active {
	opacity: 0.8;	/*透明度を100%にする設定*/
}
/*ボックス内の段落タグ設定*/
.list-persona-navi37 p {
	padding: 0px;
}
/*ボックス内の写真設定*/
.list-persona-navi37 figure img {
	width: 100%;		/*写真の幅*/
}
/*ボックス内のh4タグ設定*/
.list-persona-navi37 h4 {
	color: #777684;		/*文字色*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-persona-navi37 {
width: 92%;	/*幅４７*/
margin: 0 0 3px 4%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
}
.list-persona-navi37 a {
opacity: 1;	/*マウスオンができない端末向けに透明度を通常に戻す設定*/
}}


/*list-campaignコスメ1（割引キャンペーンのお知らせ。終了はモノクロ。dateも上の1行目にいれたい）
---------------------------------------------------------------------------*/
.list-campaign {
	position: relative;
	overflow: hidden;
	transition: 0.5s;
	float: left;	/*左に回り込み*/
	width: 30%;/*ボックス幅*/
	margin: 140px 0 20px 2%;	/*上、右、下、左にとるボックスの外側へのスペース*/
	padding: 2%;	/*ボックス内の余白*/
	height: 320px;	/*ボックスの高さ*/
	border-right: 1px solid #ccc;	/*右側の線の幅、線種、色*/
	border-bottom: 1px solid #ccc;	/*下側の線の幅、線種、色*/
	font-size: 13px;	/*文字サイズ*/
	background: #fff4ee;	/*背景色*/
}
.list-campaign h4 {
	color: #6b6351;	/*文字色*/font-size: 18px; font-weight: bold; 
	margin-top: 10px;
}
/*ボックス内のp段落タグ*/
.list-campaign p {
	padding: 0;
	font-size: 15px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}
/*ボックス内のボタン（Moreボタン）*/
.list-campaign .btn-campaign {
	padding: 1px 10px;	/*上下、左右へのボックス内の余白*/
	border-radius: 4px;	/*角丸のサイズ*/
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	font-size: 11px;	/*文字サイズ*/
}
/*「SOLD」用の設定*/
.list-campaign.sold figure {
	opacity: 0.5;	/*画像の透明度を40%にする設定*/
}
.list-campaign .date-campaign {
	font-size: 18px; font-weight: bold; 
}
.list-campaign.sold .btn-campaign {
	display: none;	/*「More」ボタンを非表示にする設定*/
}
.list-campaign.sold h4,.list-campaign.sold p {
	color: #ccc;	/*h4とpタグの文字色を薄くする設定*/
}

/*ボタン（共通）
---------------------------------------------------------------------------*/
.btn-campaign {
	text-decoration: none;
	display: inline-block;
	background: #b39f88;	/*背景色*/
	color: #fff;			/*文字色*/
	padding: 5px 50px;		/*上下、左右へのボックス内の余白*/
	margin: 0 auto;
	text-align: center;
	border-radius: 50px;	/*角丸のサイズ*/
	border: 1px solid transparent;	/*枠線の幅、線種、色。transparentは透明。*/
	font-size: 18px;	/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くとる設定*/
}
/*マウスオン時*/
.btn-campaign:hover {
	background: #fff;	/*背景色*/
	color: #b39f88;		/*文字色*/
	border: 1px solid #b39f88;	/*枠線の幅、線種、色*/
}

/*Shoppingページで使っている「CHECK」「SOLD」マーク
---------------------------------------------------------------------------*/
/*共通*/
.option1-campaign, .option2-campaign {
	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	transform: rotate(-30deg);	/*左回転で30度傾ける設定*/
	font-size: 10px;	/*文字サイズ*/
	width: 60px;line-height: 60px;	/*幅と高さ。２つの数字は揃える。*/
	text-align: center;
	border-radius: 50%;	/*角丸のサイズ*/
}
/*option1設定*/
.option1-campaign {
	background: #ff9999;	/*背景色（古いブラウザ用）*/
	background: rgba(241,96,107,0.7);	/*背景色。左４つの数字はRGBの色指定。0.7は透明度70%の事。*/
	color :#fff;	/*文字色*/
}
/*option2設定*/
.option2-campaign {
	background: #ccc;
	color :#fff;
}
/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

/*box1（商品用のボックス。contents、main、subで使う場合の共通設定。）
---------------------------------------------------------------------------*/
.list-campaign {
	float: none;	/*回り込みの解除*/
	width: auto;	/*ボックス幅*/
	height: 140px;	/*ボックスの高さ*/
	margin: 20px 0 20px 0;	/*上、右、下、左にとるボックスの外側へのスペース*/
}
/*ボックス内のfigure画像*/
.list-campaign figure img {
	width: 30%;
	float: left;
	margin-right: 2%;
}
/*ボックス内のh4見出し*/
.list-campaign h4 {
	margin-top: 0px;
}}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*ボタン（共通）
---------------------------------------------------------------------------*/
.btn-campaign {
	padding: 5px 10px;
	font-size: 14px;
	letter-spacing: normal;
}	}


/*tpbiz４６ｓｐ横長１Pc横長２trial-lesson-menu.htmlにて講座
---------------------------------------------------------------------------*/
.list63 {
	position: relative;
	overflow: hidden;
	float: left;		/*左に回り込み*/
	border-radius: 8px;		
	padding: 1px;		/*ボックス内の余白*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin: 0 0.8% 0px;		/*上、左右、下20へのボックスの外に空けるスペース*/
	box-shadow: 0px 10px 40px rgba(0,0,0,0.2);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.2は透明度20%の事。*/
	-webkit-transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
	transition: 0.3s;			/*同上*/

	width: 48.4%;/*ボックス幅*/

} 
.list63 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	margin: 0 0px 0px 0;/*ボックス内の余白*/
	padding: 5px 12px 5px 12px;
	background-color: #f6f7f8;

}
.list63:hover {
	box-shadow: none !important;	/*ボックスの影をなくす設定*/	
	background:  #FFD4E1;	/*背景色（古いブラウザ用）*/
}
/*リンクを貼った際に出る「→」マーク*/
.list63 a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 30px;	/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
	background: #ccc;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.2);	/*背景グラデーション。0,0,0は黒の事で、0.3は透明度30%の事。*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ。50%にすると円になる。*/
}
/*マウスオン時の「→」マーク*/
.list63 a:hover::before {
	background: #e64b90;	/*背景色*/
}
/*ボックス内右側のテキストパーツ使わないないほうがよい*/
.list63 .text {
	font-size: 13px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
	height: 7.5em;		/*高さ*/
	overflow: hidden;	/*高さを超えると非表示になる*/
}	
.list63 h4 {
	font-size: 18px;
	padding: 0px;
	color: #e64b90;	/*文字色*/
	font-weight: bold; 
	margin-bottom:10px;
}

.list63 p {
	padding: 0px !important;
}

.list63 .img {
	float: left;	/*左に回り込み*/
	width: 118px;		/*幅*/
	height: 118px;		/*高さ*/
	object-fit: cover;
	margin-right: 10px;
	margin-bottom: 3px;
}
.list63 a:hover {
	background: #FFD4E1;	/*マウスオン時の背景色tuika*/
	color: #be8a3a;		/*マウスオン時の文字色*/
}

 .list63 {
	box-shadow: 0px 5px 10px rgba(0,0,0,0.1);	/*ボックスの影*/
}



/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){

.list63 {
float: none;		/*回り込みのリセット*/
width: auto;		/*ボックス幅*/
margin: 10px 0 20px;	/*上、左右、下へのボックスの外に空けるスペース*/
}
/*ボックス内の画像*/
.list63 .img {
width: 45%;		/*幅*/
height: auto;
}}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list63 {
margin: 0;
box-shadow: none !important;
border: none;
border-bottom: 1px solid #dcdcdc;	/*下線の幅、線種、色*/
margin: 0 1% 0;
}
/*１つ目のメニュー*/
.list63:first-of-type {
border-top: 1px solid #dcdcdc;
}
/*リンクを貼った際に出る「→」マーク*/
.list63 a::before {
right: 0px;	/*ボックスの右から0pxの場所に配置*/
width: 20px;	/*幅*/
line-height: 20px;	/*高さ*/
}
/*ボックス内のh4タグ設定*/
.list63 h4 {
font-size: 18px;
padding: 0px;
color: #6b6351;	/*文字色*/
font-weight: bold; 
margin-bottom:10px;
}
/*ボックス内のp(段落)タグ設定*/
.list63 p {
padding-right: 40px !important;
font-size: 10px !important;	/*文字サイズ*/
}}

/*-------------------
list14をlist-cutting-naviへ、ｓｐ３ｐｃ３写真のみ白おび文字切り方ナビ」	
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-cutting-navi {
	overflow: hidden;
	position: relative;
  width: 32%;		/*22幅*/
  height: 150px;object-fit: cover;
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	margin-left: 2.4%;	/*ボックス同士に空ける左右間のスペース*/
	font-size: 12px;	/*文字サイズ*/
	margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}
.list-cutting-navi a {
	display: block;text-decoration: none;overflow: hidden;
}
/*h4タグ*/
.list-cutting-navi h4 {
  position: absolute;
	top: 0px;	/*list2ボックスの上から0pxの場所に配置*/
	width: 100%;	/*幅*/
	height: 25px;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.7);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #6b6351;	/*文字色*/
  }
  
 
/*写真のマウスオン時*/
.list-cutting-navi a:hover figure img {
	opacity: 0.7;	/*透明度*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-cutting-navi {
	width: 30%;			/*45幅*/
	margin-left: 3%;	/*ボックス同士に空ける左右間のスペース*/
}}


/*list11サムネイルlightbox　tp-photo5 ライトボックス用
---------------------------------------------------------------------------*/
/*写真全体を囲むブロック*/
.photo-block {
	overflow: hidden;
	margin: 0 4px 20px;	/*上、左右４０、下へのボックスの外側に空けるスペース*/
	background: #ffffff;		/*背景色*/
}
/*画像*/
.list11 figure {
	width: 12.5%;			/*画像幅25%*/
	object-fit: cover;/*画像改良？追加*/
	float: left;		/*左に回り込み*/
	transition: 0.4s;	/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}
.list11 a figure {
	opacity: 0.6;		/*画像の透明度60%*/
}
/*マウスオン時の画像*/
.list11 a:hover figure {
	opacity: 1;		/*画像の色を100%出す*/
}
	

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){
/*Galleryページのサムネイル
タブレットなどの小さな端末ではマウスオンができないので、画像の色を100%出しておく設定です。
---------------------------------------------------------------------------*/
.list11 a figure {
	opacity: 1;
}}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*Galleryページのサムネイル
---------------------------------------------------------------------------*/

.list11 figure {
	width: 25%;			/*画像幅*/
	object-fit: cover;/*画像改良？追加*/
	float: left;		/*左に回り込み*/
	transition: 0.4s;	/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}

.photo-block {
	padding: 0 0 20px;	/*上、左右、下のボックス内の余白*/
}}



/*list42ボックスメディアのところ仕事目次tp-job2「現在の求人」
Sp1PC2に変更）
	---------------------------------------------------------------------------*/
	/*ヘビロテ中のナビ８リスト4列list37をｓｐ4ｐｃ8背低めでナビボタン風にでtpsimple11をリスト３７に
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	.list-lesson-navi37 {
		float: left;	/*画像を左へ回り込み*/
		width: 12%;		/*幅*/
		margin: 0 0 7.5px 0.5%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
		font-size: 10px;	/*文字サイズ*/
		-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.8);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の小数点が透明度。*/
		box-shadow: 2px 2px 6px rgba(0,0,0,0.8);			/*同上*/
		border-radius: 8px;	/*角丸のサイズ10*/
	}
	.list-lesson-navi37 a {
		padding: 8%;	/*ボックス内の余白*/
		border-radius: 10px;	/*角丸のサイズ*/
		text-decoration: none;
		display: block;
		overflow: hidden;
		background: #fff;	/*背景色*/
		color: #333;		/*文字色*/
		opacity: 0.8;		/*透明度の設定。0.8は80%の透明度という意味。*/
	}
	.list-lesson-navi37 a:hover,
	.list-lesson-navi37 a:active {
		opacity: 1;	/*透明度を100%にする設定*/
	}
	/*ボックス内の段落タグ設定*/
	.list-lesson-navi37 p {
		padding: 0px;
	}
	/*ボックス内の写真設定*/
	.list-lesson-navi37 figure img {
		width: 100%;		/*写真の幅*/
	}
	/*ボックス内のh4タグ設定*/
	.list-lesson-navi37 h4 {
		color: #777684;		/*文字色*/font-size: 17px;	/*文字サイズ*/
	}
	
	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
	.list-lesson-navi37 {
	
	width: 23.5%;	/*幅*/
	margin: 0 0 5px 1%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
	}/*ボックス内のh4タグ設定*/
	.list-lesson-navi37 h4 {font-size: 10px;	/*文字サイズ*/
	}
	.list-lesson-navi37 a {
	opacity: 1;	
	}	}


/*GALLERYページtpsimple11をリスト３７に
	---------------------------------------------------------------------------*/
	
	.list-profile-navi37 {
		float: left;	/*画像を左へ回り込み*/
		width: 46%;		/*幅*/height: 90px;		/*高さ*/
		margin: 0 0 15px 3%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
		font-size: 12px;	/*文字サイズ*/
		-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.8);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の小数点が透明度。*/
		box-shadow: 2px 2px 6px rgba(0,0,0,0.8);			/*同上*/
		border-radius: 10px;	/*角丸のサイズ*/
	}
	.list-profile-navi37 a {
		padding: 3%;	/*1ボックス内の余白*/
		border-radius: 10px;	/*角丸のサイズ*/
		text-decoration: none;
		display: block;
		overflow: hidden;
		background: #fff;	/*背景色*/
		color: #333;		/*文字色*/
		opacity: 0.8;		/*透明度の設定。0.8は80%の透明度という意味。*/
	}
	.list-profile-navi37 a:hover,
	.list-profile-navi37 a:active {
		opacity: 1;	/*透明度を100%にする設定*/
	}
	/*ボックス内の段落タグ設定*/
	.list-profile-navi37 p {
		padding: 0px;
	}
	/*ボックス内の写真設定*/
	.list-profile-navi37 figure img {
		width: 100%;		/*写真の幅*/height: 70px;object-fit: cover;	
	}
	/*ボックス内のh4タグ設定*/
	.list-profile-navi37 h4 {
		color: #6b6351;		/*文字色*/
	}
	
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-profile-navi37 {font-size: 12px;	/*文字サイズ*/
	width: 94%;	/*幅*/height: 70px;		/*高さ*/object-fit: cover;
	margin: 30px 0 30px 4%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
}
.list-profile-navi37 a {
	opacity: 1;
}	}

	/*lesson menuの生地やクリームへのリンクPC2*/
	.list42 {
		padding-bottom: 50px;
		overflow: hidden;	}
	
	.list42 li {
		float: left;	/*左に回り込み*/
				line-height: 1.5;	/*行間*/
		position: relative;
		
		width: 49%;		/*幅*/
		margin: 10px 0.5%;	}
	
	.list42 a {
		display: block;text-decoration: none;
		height: 100px;	/*ボックスの高さ80*/
		overflow: hidden;	/*ボックスから飛び出た場合、非表示にする設定*/
		background: #ffffff;	/*背景色（）*/
	
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
		box-shadow: 1px 1px 3px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、広げる幅、0,0,0は黒で0.2は透明度20%の事。*/
		/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
		


		border-radius: 6px;	/*角丸のサイズ*/
		padding: 15px;	/*ボックス内の余白*/
		color: #202124;	/*文字色*/font-size: 16px;	/*文字サイズ*/
	}
	/*マウスオン時*/
	.list42 a:hover {
		background: #f5f5f5;	/*背景色（古いブラウザ用）*/
		background: linear-gradient(#f5f5f5, #e2e2e2);/*背景グラデーション*/
		color: #e86a8e;	/*文字色*/
	}
	/*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
	.list42 .img {
		height: 100%;			/*高さ*/
		background: #fff;	/*背景色*/
		float: right;		/*右に回り込み*/
		border-radius: 3px;	/*角丸のサイズ*/
	}
	/*件数のテキスト。※list2内でspanタグで囲った場合。*/
	.list42 span {
		font-size: 24px;	/*文字サイズ*/
		position: absolute;
		bottom: 13px;	/*下から15pxの場所に配置*/
		left: 110px;	/*右から110pxの場所に配置*/
	}

	/*画面幅1000px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:1000px){
.list42 li {

	width: auto;		/*幅*/
	margin: 0 7px 10px;	/*上、左右3、下へのボックスの外側へ空けるスペース*/
}
.list42 a {
	height: auto;	/*ボックスの高さ*/
	padding: 10px;	/*ボックス内の余白*/
	font-size: 15px;	/*文字サイズ*/
}
/*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
.list42 .img {
	height: auto;
	width: 10%;
}
/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list42 span {
	font-size: 20px !important;/*文字サイズ*/
	font-weight: 700;	/*太字にする設定*/
	right: 20%;		/*右から20%の場所に配置*/
	bottom: 6px;	/*下から6pxの場所に配置*/
}
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){	
.list42 li {
	width: auto;		/*幅*/
	margin: 0 3px 10px;	/*上、左右、下へのボックスの外側へ空けるスペース*/
}
.list42 a {
	height: 80px;	/*ボックスの高さ80*/
	padding: 3px;	/*ボックス内の余白*/font-size: 12px;	/*文字サイズ*/
}

.list42 .img {
	height: auto;
	width: 10%;
}
/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list42 span {
	font-size: 17px;/*文字サイズ*/
	right: 12%;		/*右から20%の場所に配置*/
	bottom: 3px;	/*下から6pxの場所に配置*/
}}
/*cafe16listの写真をアレンジ（商品メニュー用のブロック）生徒さんの声1and２カラムで使用していくclasscontents
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-voice2 {
	position: relative;overflow: hidden;
	display: flex;
	align-items: center;
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/

	color: #999;			/*文字色	background: #fff;		/*背景色*/
}
/*ボックス内のh4（見出し）タグ*/
.list-voice2 h4 {
	font-size: 24px !important;
	line-height: 1.5;
	margin-bottom: 20px;
	color:#202124 ;	/*文字色*/   
	font-weight: 700;
}
.list-voice2 h4 a {
	color: #7b6d55;	/*文字色*/
}
/*ボックス内のh4（見出し）タグ*/
.list-voice2 h6 {
	font-size: 14px !important;
	line-height: 1.3;
	margin-bottom: 20px;
	color:#202124 ;	/*文字色*/   
	font-weight: 600;
}
/*ボックス内のp（段落）タグ*/
.list-voice2 p {
	padding: 0;
}
/*ボックス内のfigure画像img01 waku03 shadow-photo rotate01のrotate01*/
.list-voice2 figure {
	float: left;	/*左に回り込み*/
	width: 50%;		/*幅*/ 
	-moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
/*「class="text"」を指定したブロック。テキストブロック。*/
 .list-voice2 .text {
	float: right;	/*右に回り込み*/
	width: 40%;		/*幅*/
	margin: 5%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/

}
.list-voice2 .text {
	position: relative;/*saruwaka baloon2top*/
	display: inline-block;
	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #FFF;
	border: solid 3px #eea882;
	box-sizing: border-box;
	border-radius: 10px;
  }
  
.list-voice2 .text:before {
	content: "";
	position: absolute;
	top: -24px;
	left: 50%;
	margin-left: -15px;
	border: 12px solid transparent;
	border-bottom: 12px solid #FFF;
	z-index: 2;
  }
.list-voice2 .text:after {
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -17px;
	border: 14px solid transparent;
	border-bottom: 14px solid #eea882;
	z-index: 1;
  }
  
/*hotel5電話番号ボックス*/
.list-voice2 #box-voice-cta {
	text-align: center;	/*中身をセンタリング*/
	line-height: 1.2;	/*行間をデフォルトより少し狭くする。デフォルトは上のbodyにあります。*/
	float: right;		/*右に回り込み*/
	margin-top: 30px;	/*上に空けるスペース。上下間のバランスをここでとって下さい。*/
	border: 1px solid #666;	/*枠線の幅、線種、色*/
	background: #eea882;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#eea882, #ffd3bb);	/*背景グラデーション*/
	padding: 10px 40px;		/*上下、左右へのボックス内の余白*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる*/
}

/*list内のアイコン（シニア向け、ご家族向け、カップル向け）
---------------------------------------------------------------------------*/
/*アイコン全体を囲むボックス*/
ul.mark-sankakouza {
	margin-top: -20px;	/*ボックスの上にくっつける為の指定*/
	float: right;		/*ボックスを右側に配置する*/
}
/*アイコン１個あたりの設定*/
ul.mark-sankakouza li {
	line-height: 1;
	float: left;		/*左に回り込み*/
	background: #999;	/*デフォルトの背景色。グレー色。*/
	color: #202124;		/*文字色*/
	font-size: 12px;	/*文字サイズ*/
	padding: 5px 10px;	/*上下、左右へのアイコン内の余白*/
	margin-right: 5px;	/*アイコンの左右間に空けるスペース*/
	margin-bottom: 5px;	/*アイコンの上下間に空けるスペース*/
}
/*mark1（シニア向け）への追加設定*/
ul.mark-sankakouza .mark1-sankakouza {
	background: #eea882;	/*背景色*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-voice2 {
	display: block;
	padding: 20px;	
	margin: 0 2px 30px;	/*上、左右10、下へのボックスの外側に空けるスペース*/
}
.list-voice2 h4 {
	font-size: 18px;
	margin-bottom: 0px;
}
/*ボックス内のfigure画像*/
.list-voice2 figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-voice2 .text {
	float: none;
	width: auto;
	margin: 0;

}/*hotel5list内のアイコン（シニア向け、ご家族向け、カップル向け）
---------------------------------------------------------------------------*/
/*アイコン全体を囲むボックス*/
ul.mark-sankakouza {
	margin-top: -20px;	/*-10ボックスの上にくっつける為の指定*/
}
/*アイコン１個あたりの設定*/
ul.mark-sankakouza li {
	font-size: 10px;	/*文字サイズ*/
	padding: 2px 5px;	/*上下、左右へのアイコン内の余白*/
}}





/*ボックス１個あたりの設定overflow: hidden;*/
.list-crown-pc3sp3 {
	position: relative;

  width: 28%;		/*33幅*/
  height: 300px;
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	
	font-size: 32px;	
	padding: 10px 20px;			/*上下、左右30へのボタン内の余白*/
	margin: 2% 5px 20px;		/*上、左右、下へのボックスの外側への余白*/

background: ;	/*#fff背景色*/
}

.list-crown-pc3sp3 a {
	display: block;text-decoration: none;overflow: hidden;
}	

/*h4タグ*/
.list-crown-pc3sp3 h4 {
  position: absolute;
 left: 8%;
	top: 34%;	/* list2ボックスの上から20%の場所に配置*//*上にラベル風h4タグ*/
	width: 84%;	/*幅100*/
	height: 150px;
		/*background: #fff;背景色（古いブラウザ用）*/
		/*background: rgba(255,255,255,0.9);背景色。border: 4px solid #e99383;0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #6b6351;	/*文字色*/
	text-align: center;	/*内容をセンタリング*/ 
	font-weight: 600;	/*文字サイズ*/line-height: 1.0;/*追加して行間狭くしたい*/
	z-index: 20;font-size: 150%;		/*文字サイズ*/
	color: #e6b700;	/*文字色kouho b38e00 cca300 */
   }
   
  
  /*写真追加試行錯誤*/
  .list-crown-pc3sp3 figure img {
	width: 80%;			/*写真の幅95*/
	height: 300px;
	/*background: ;	#eea882�w�i�F*/
	object-fit: cover;
	}
 	
/*写真のマウスオン時*/
.list-crown-pc3sp3 a:hover figure img {
	opacity: 0.7;	/*透明度*/ 
     object-fit: cover;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-crown-pc3sp3 {
	position: relative;
  width: 32%;		/*33幅*/
  height: 60px;
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	font-size: 17px;	
    padding: 1px 0.1px;			/*上下、左右30へのボタン内の余白*/	
	margin: 1px;	/*20ボックス同士に空ける左右間のスペース*/margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}


/*h4タグ*/
.list-crown-pc3sp3 h4 {
    position: absolute;
   left: 8%;
      top: 49%;	/* list2ボックスの上から20%の場所に配置*//*上にラベル風h4タグ*/
      width: 84%;	/*幅100*/
      height: 150px;
          /*background: #fff;背景色（古いブラウザ用）*/
          /*background: rgba(255,255,255,0.9);背景色。border: 4px solid #e99383;0,0,0は黒の事で0.7は70%色がついた状態。*/
      color: #6b6351;	/*文字色*/
      text-align: center;	/*内容をセンタリング*/ 
      font-weight: 600;	/*文字サイズ*/line-height: 1.0;/*追加して行間狭くしたい*/
      z-index: 20;font-size: 150%;		/*文字サイズ*/
      color: #e6b700;	/*文字色kouho b38e00 cca300 */
     }
     
    
    /*写真追加試行錯誤*/
    .list-crown-pc3sp3 figure img {
      width: 75%;			/*写真の幅95*/
      height: 150px;
     
      } }
/*ボックス１個あたりの設定overflow: hidden;*/
.list-crown-pc3sp3 {
	position: relative;

  width: 29%;		/*33幅*/
  height: 300px;
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	
	font-size: 32px;	
	padding: 10px 20px;			/*上下、左右30へのボタン内の余白*/
	margin: 2% 5px 20px;		/*上、左右、下へのボックスの外側への余白*/

background: ;	/*#fff背景色*/
}

.list-crown-pc3sp3 a {
	display: block;text-decoration: none;overflow: hidden;
}	

/*h4タグ*/
.list-crown-pc3sp3 h4 {
  position: absolute;
 left: 8%;
	top: 34%;	/* list2ボックスの上から20%の場所に配置*//*上にラベル風h4タグ*/
	width: 84%;	/*幅100*/
	height: 150px;
		/*background: #fff;背景色（古いブラウザ用）*/
		/*background: rgba(255,255,255,0.9);背景色。border: 4px solid #e99383;0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #6b6351;	/*文字色*/
	text-align: center;	/*内容をセンタリング*/ 
	font-weight: 600;	/*文字サイズ*/line-height: 1.0;/*追加して行間狭くしたい*/
	z-index: 20;font-size: 150%;		/*文字サイズ*/
	color: #e6b700;	/*文字色kouho b38e00 cca300 */
   }
   
  
  /*写真追加試行錯誤*/
  .list-crown-pc3sp3 figure img {
	width: 80%;			/*写真の幅95*/
	height: 300px;
	/*background: ;	#eea882�w�i�F*/
	object-fit: cover;
	}
 	
/*写真のマウスオン時*/
.list-crown-pc3sp3 a:hover figure img {
	opacity: 0.7;	/*透明度*/ 
     object-fit: cover;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*メインコンテンツ内の「list32」ボックスbreeder4
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-crown-pc3sp3 {
		width: auto;
        padding: 10px 10px;			/*上下、左右30へのボタン内の余白*/	
	margin: 5px;	/*20ボックス同士に空ける左右間のスペース*/margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}}	/*終わり*/


/*ボックス（list）設定school3
---------------------------------------------------------------------------*/
.list-alsolove  {
	float: left;	/*左に回り込み*/
	width: 31%;		/*幅*/
	overflow: hidden;	/*ボックスから飛び出たらスクロールを出す設定。飛び出た部分を非表示にしたいならautoでなくhiddenにする。*/
	background: #fff4ee;	/*背景色*/
	color: #fff;		/*文字色*/
	margin-left: 1.5%;	/*ボックス同士の左右間の余白*/
	margin-bottom: 30px;	/*ボックス同士の上下間の余白*/
	border-radius: 6px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	height: 285px;			/*高さ（下の「.list a」の高さと揃える）*/
	line-height: 1.4;
	position: relative;	
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}

.list-alsolove a {
	display: block;
	overflow: hidden;	/*ボックスから飛び出たらスクロールを出す設定。飛び出た部分を非表示にしたいならautoでなくhiddenにする。*/
	text-decoration: none !important;
	height: 270px;	/*高さ（上の「.list」の高さと揃える）*/
	color: #202124;	/*文字色*/
}
.list-alsolove a:hover {
	background: #fff4ee;	
	color: #fff;		/*マウスオン時の文字色*/
}
/*ボックスにリンク指定がされた場合に出る「→」マーク*/
.list-alsolove a::before {
	content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
	position: absolute;
	left: 10px;	/*ボックスの右から20pxの場所に配置*/
	bottom: 15px;		/*ボックスの上から20pxの場所に配置*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);	/*rgb指定での背景色。「0,0,0」は黒の事で「0.5」が透明度50%の事。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 4px;		/*角丸のサイズ*/
	width: 30px;		/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
}

/*マウスオン時の「→」マーク　（※list2も共通）*/
.list-alsolove  a:hover::before {
	background: #000;	/*背景色*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
}
.list-alsolove .img {
	width: 100%;	/*画像の幅*/
	height: auto;	
	padding-bottom: 10px;	/*画像下に空ける余白*/
}
.list-alsolove  h4 {
	padding-left: 20px;font-size: 20px;	 font-weight: bold;
}
.list-alsolove p{
	font-size: 80%;	
}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
.list-alsolove {
	float: none;
	width: auto;
	margin-left: 0;
	height: auto;
}
.list-alsolove a {
	height: auto;
}}

	/*MENUページtpcafe13MENUスクエアでPC３、SP２ＳＰでの文字小さくしたいが・・きかない
	---------------------------------------------------------------------------*/
	.list27 {
		margin-bottom: 15px;	/*ボックスの下に空ける余白*/
		position: relative;
		overflow: hidden;
		background: #fff;	/*背景色*/
		padding: 3.5%;		/*ボックス内の余白*/
		color: #333;		/*文字色*/
	}
	/*コンパクトタイプのボックス追加設定*/
	.list27 {
		width: 30%;		/*compactタイプの幅23*/
		height: 420px;	/*compactタイプの高さ*/
		float: left;	/*ボックスを左に回り込み*/
		margin-left: 2.5%;	/*ボックス間の余白*/
	}
	/*ボックス内のh4タグ共通設定*/
	.list27 h4 {
		color: #8e7cce;	/*文字色*/
		background: url(https://creme-cremes.com/components/images/mark1.png) no-repeat left 5px/15px;	/*王冠マークの読み込み。最後の15pxはサイズ指定。マークを入れ替えた場合に上下がずれるなら5pxの数字をcenterか他の近い数字に変更してみる。*/
		padding-left: 18px;	/*王冠マークに文字が重ならないように幅を確保*/
		margin-left: 24%;	
	}
	/*コンパクトタイプのh4タグ追加設定*/
	.list27 h4 {
		margin-left: 0;
	}
	
	.list27 p {
		padding: 0px;
		margin-left: 24%;	
	}
	/*コンパクトタイプの段落タグ追加設定*/
	.list27 p {
		margin-left: 0;
		font-size: 12px;	/*compactタイプの文字サイズ*/
		line-height: 1.4;
		margin-bottom: 5px;
	}
	/*ボックス内の写真共通設定*/
	.list27 figure img {
		float: left;	/*画像を左へ回り込み（※横長タイプ用）*/
		width: 20%;		/*写真の幅（※横長タイプ用）*/
	}
	
	/*コンパクトタイプの写真追加設定*/
	.list27 figure img {
		float: none;
		width: auto;
		margin: 0;
	}
	

/*画面幅480px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	/*MENUページ
	---------------------------------------------------------------------------*/
	/*コンパクトタイプのボックス追加設定*/
	.list27 {
		width: 44%;height: 220px;	/*compactタイプの高さ*/
	}
	/*ボックス内のh4タグ設定*/
	.list27 h4 {
		margin-left: 0;
	}
	/*コンパクトタイプのh4タグ追加設定*/
	.list27 h4 {
		font-size: 11px;
		background: url(https://creme-cremes.com/components/images/mark1.png) no-repeat left 5px/10px;
		padding-left: 12px;
	}
	/*ボックス内の段落タグ設定*/
	.list27 p {
		margin-left: 0;
		font-size: 10x;	/*文字サイズ	小さくしたいが		*/
	}
	/*ボックス内の写真設定*/
	.list27 figure img {
		float: none;
		width: 100% !important;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}	}
		
/*レシピの新着に使用中「list6」*/
.list6 {
	position: relative;overflow: hidden;
	background: #ffffff;	
	margin-bottom: 20px;	}

.list6 a {	display: block;text-decoration: none;overflow: hidden;
	padding: 20px;	border: 1px solid #ccc;	}

.list6 a:hover {border: 1px solid #7348a8;	/*枠線の幅、線種、色*/
	background: #fae5d5;		/*背景色*/
}
.list6 figure img {
	width: 30%;			/*写真の幅*/
	height: 150px;
    object-fit: cover;
	float: left;		/*左に回り込み*/
	border-radius: 50%;	/*円形にくり抜く指定。通常通りに表示させたいならこの１行削除。*/
}
.list6 h4 {
	margin-left: 28%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
	color: #202124;		/*文字色*/
	font-weight: bold;
	text-align: center;
	font-size: 18px;	/*文字サイズ*/
	border-bottom: dashed 1px #e99383;	/*枠線の幅、線種、色*/
	margin-bottom: 10px;	/*下に空けるスペース*/
}

.list6 p {
	padding: 0 !important;
	margin-left: 35%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
    .list6 a {
		margin: 10px 2% 10px;		/*上0、左右、下20へのボックスの外に空けるスペース*/
        padding: 10px;    }
    
    .list6 h4 {
        font-size: 20px;    } 
	
	.list6 figure img {
		margin: 10px 2% 10px;		/*追加上0、左右、下20へのボックスの外に空けるスペース*/
		width: 30%;			/*写真の幅*/
		height: 100px;
		object-fit: cover;
		float: left;		/*左に回り込み*/
		border-radius: 50%;	/*円形にくり抜く指定。通常通りに表示させたいならこの１行削除。*/
	}	}


/*使用中。赤いボタンお問い合わせに。student.html著書紹介ｔｐbiz２９大きくPC２個ほぼ正方形SP1個写真にh4文字をオンしたい
---------------------------------------------------------------------------*/
.list32 {
	overflow: hidden;
	float: left;
	height: 590px;
	width: 47%;		
	line-height: 1.3;
	margin-left: 2%;
	margin-bottom: 20px;
}
/*ボックス内の段落タグ位置試行錯誤*/
.list32 p {
	top:20px;
	padding: 0px;
	font-size: 14px;	/*文字サイズ*/
}
/*ボックス内のh4タグ設定位置試行錯誤*/
.list32 h4 {top:10px;	font-weight: bold;
	color: #313131;	
}

.list32 figure {
	padding: 5px;	
	margin-bottom: 1px;	/*画像の下に少し余白を空ける設定*/
	border: 2px solid #ffd3bb;	
}
/*「もっと詳しく」ボタン設定*/
.list32 p.more {
	margin: 1px auto 0;/*10pxボタンの幅*/
	width: 100%;	
	text-align: center;	/*文字を中央に*/
}
.list32 p.more a {
	text-decoration: none;display: block;
	color: #FFF;	/*文字色*/
	background-color: #900000;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: linear-gradient(#b10000, #900000);	/*グラデーション*/
	font-size: 18px;	/*文字サイズ*/
	border-radius: 4px;	/*各丸のサイズ*/
	padding: 15px 0;		/*上下、左右へのボタン内の余白*/
}
.list32 p.more a:hover {
	background: #d30000;	/*マウスオン時の背景色*/
}


/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

.list32 {
	height: 340px;	/*ボックスの高さ*/
}}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list32 {
float: none;
height: auto;	/*ボックスの高さ*/
width: auto;		/*ボックスの幅*/
margin-left: 0;
}	}

/*list２８tp-biz53のリストをSPも PC横２　にした.[細長くバナー風に
---------------------------------------------------------------------------*/

.list28 {position: relative;
	float: left;	/*左に回り込み*/
	width: 50%;			/*幅*/
	height: 50px;		/*追加。写真の高さ低めに*/
	margin-left: 0%;	/*2.5左に空けるスペース*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: #fff;	/*背景色*/
}
.list28 a {
	display: block;
	text-decoration: none !important;
}
/*マウスオン時*/
.list28 a:hover {
	color: #fff;	/*文字色*/
}

.list28 a figure {
	opacity: 1;	/*リンクを指定した際は60%だけ色を出す。*/
}
.list28 a:hover figure {
	opacity: 0.6;		/*リンクを指定した際のマウスオン時に色を100%出す。*/
}
/*h4タグ*/
.list28 h4 {
	position: absolute;
	bottom: 20px;	/*下からの配置場所指定。0*/
	left: 0px;		/*左からの配置場所指定。*/
	width: 100%;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.4);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	text-align: center;	/*内容をセンタリング*/
	padding: 40px 0;	/*上下、左右への余白*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list28 h4 {
	padding: 10px 0;	

}}

/*---------------breeder4「list4」からPC8SP４企業ページ黒字白今真っ黒	
---------*/

.list-slimslim-photobanar {
	overflow: hidden;
	position: relative;
  width: 25%;		/*幅*/
  height: 55px;
  object-fit: cover;
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	margin: 0;	/*2.4ボックス同士に空ける左右間のスペース*/
	font-size: 12px;	/*文字サイズ*/
	
}
.list-slimslim-photobanar a {
	display: block;text-decoration: none;overflow: hidden;
}
/*h4タグ*/
.list-slimslim-photobanar h4 {
  position: absolute;
	top: 0px;	/*list2ボックスの上から0pxの場所に配置*/
	width: 100%;	/*幅*/
	height: 55px;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #fff;	/*文字色*/
  }
 
.list-slimslim-photobanar a:hover figure img {
	opacity: 0.7;	
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*メインコンテンツ内の「list32」ボックスbreeder4
---------------------------------------------------------------------------*/
.list-slimslim-photobanar {
	width: 50%;			
	margin: 0;	/*ボックス同士に空ける左右間のスペース*/
}}

/*list5 menu 最初0２０/0３メニューのページリンク。P不要、h4のspanに
---------------------------------------------------------------------------*/
.list5 {
	position: relative;
	overflow: hidden;
	float: left;		/*左に回り込み*/
	width: 47%;			/*ボックス幅*/
	padding: 1%;		/*ボックス内の余白*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	background: #fff;		/*背景色*/
	margin: 0 0.8% 20px;		/*上、左右、下へのボックスの外に空けるスペース*/
		-webkit-transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
	transition: 0.3s;			/*同上*/


	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
	

}
.list5 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 1%;	/*ボックス内の余白*/
	margin: -1%;
}
/*マウスオン時の背景色*/
.list5:hover {
	box-shadow: none !important;	/*ボックスの影をなくす設定*/
}
/*リンクを貼った際に出る「→」マーク*/
/*ボックスにリンク指定がされた場合に出る「→」マーク９と同じに*/
.list5 a::before {
	content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
	position: absolute;
	text-align: center;

	right: 40px;	/*ボックスに対して右から-15kara 25pxの場所に配置*/
		top: 65px;	/*ボックスに対して下bottomから-25kara35pxの場所に配置*/
	background: #eea882;	/*背景色（古いブラウザ用）*/
	background: rgba(238,168,130,0.4);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
		
	color: #fff;	/*文字色*/

/*「サービスのご案内」ページのボックス内の矢印マーク設定.list25 a::before*/

	width: 85px;		/*��*/
	line-height: 85px;	/*����*/

	font-size: 45px;	/*文字サイズ*/
	
	padding: 10px;	/*余白（文字と円の間にあける余白）*/
	position: absolute;
	border-radius: 50%;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}
/*マウスオン時の「→」マーク*/
.list5 a:hover::before {
	background: #ffd3bb;	/*背景色*/
}
/*ボックス内右側のテキストパーツ無効*/
.list5 .text {
	line-height: 1.5;	/*行間*/
	height: 7.5em;		/*高さ*/
	overflow: hidden;	/*高さを超えると非表示になる*/
	
}
	/*マウスオン時のボックス*/
	.list5 a:hover {
		background: #eea882;	/*背景色*/
	}
/*ボックス内のh4タグ設定*/
.list5 h4 {
	font-weight: 600;	/*デフォルトの太字を標準にする設定*/
	font-size: 19px;
	text-align: center;
	color: #202124;	/*文字色*/
	padding: 0px;
}
/*ボックス内のp(段落)タグ設定*/
.list5 h4 span {
	padding: 0px !important;
	font-size: 13px;	/*文字サイズ*/
	color: #7c7670;		/*文字色*/
	display: block;
	padding: 1px 0;	/*上下、左右へ余白*/
	
	
	font-weight: 400;	/*デフォルトの太字を標準にする設定*/
	
}
/*ボックス内の画像*/
.list5 .img {
	float: left;	/*左に回り込み*/
	width: 150px;		/*幅*/
	height: 150px;		/*高さ*/
	object-fit: cover;
	margin-right: 10px;
}

/*mainブロック内のボックス設定*/
.list5 {
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、広げる幅、0,0,0は黒で0.2は透明度20%の事。*/
	/*ボックスの影*/
}


	
	

/*「SOLD」用の設定tpコスメのきく？*/
.list5.sold figure {
	opacity: 0.4;	/*画像の透明度を40%にする設定*/
}
.list5.sold .btn {
	display: none;	/*「More」ボタンを非表示にする設定*/
}
.list5.sold h4,.contents .list.sold p {
	color: #ccc;	/*h4とpタグの文字色を薄くする設定*/
}

/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
	.list5 {
		float: none;		/*回り込みのリセット*/
		width: auto;		/*ボックス幅*/
		margin: 0 0 20px;	/*上、左右、下へのボックスの外に空けるスペース*/
	}
	/*ボックス内の画像*/
	.list5 .img {
		width: 20%;		/*幅*/
		height: auto;
	}
	
	}
	

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*Serviceページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list5 {
	margin: 0;
	box-shadow: none !important;
	border: none;
	background: #fff;		/*背景色*/
	border-bottom: 1px solid #dcdcdc;	/*下線の幅、線種、色*/
}

/*ボックス内の画像*/
.list5 .img {
	width: 150px;		/*幅20%*/
	height: auto;
}


/*１つ目のメニュー*/
.list5:first-of-type {
	border-top: 1px solid #dcdcdc;
}
/*リンクを貼った際に出る「→」マーク*/
.list5 a::before {
	right: 9px;	/*ボックスの右から0pxの場所に配置*/	
	top: 60px;	/*ボックスに対して下bottomから-25kara35pxの場所に配置*/
	width: 60px;	/*幅*/
	line-height: 60px;	/*高さ*/
}
/*ボックス内のp(段落)タグ設定*/
.list5 a p {
	padding-right: 40px !important;
}	}


	/*MENUページtp-biz44 list９PC横長、仕切り見出し的なのでBG黒くしてみた ----------------------*/
	
.list9 {
		background: #000;	
		position: relative;
		overflow: hidden;
		margin: 10px 2%;
		box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
		border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
	
	}

	/*画像の設定*//*画像imgの設定*/
	.list9 img.img {float: none;
		width: 75%;
		object-fit: cover;
	}
	
		.list9 h4 {
		font-weight: bold;	/*デフォルトの太字を標準にする設定*/
		font-size: 28px;
		text-align: center;color: #ffffff;	/*文字色*/
		
	}
	/*pタグの設定*/
	.list9 p {
		color: #fff;		/*文字色*/
		padding: 2% auto;	/*上、右、下、左への余白*/
			margin: 3%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
						/*float: left;右に回り込み*/
		width: 90%;		/*幅*/
	
	}
	
	.list9 a {
			text-decoration: none;
			display: block;
			overflow: hidden;
		}
	/*ボックスにリンク指定がされた場合に出る「→」マーク*/
	.list9 a::before {
		content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
		position: absolute;
		/*	right: 20px;ボックスの右から20pxの場所に配置*/
			/*top: 180px;	ボックスの上から20pxの場所に配置*/
		background: #ffd3bb;	/*背景色（古いブラウザ用）*/
		background: rgba(255,244,238,0.8);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
			
		color: #fff;	/*文字色*/
	
	/*「サービスのご案内」ページのボックス内の矢印マーク設定.list25 a::before*/
		font-size: 80px;	/*文字サイズ*/
		line-height: 1;
		padding: 20px;	/*余白（文字と円の間にあける余白）*/
		position: absolute;
		right: -15px;	/*ボックスに対して右から-15pxの場所に配置*/
		top: -25px;	/*ボックスに対して下bottomから-25pxの場所に配置*/
		border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
	}
	/*マウスオン時の「→」マーク前のまま*/
	.list9 a:hover::before {
		background: #ffd3bb;	/*背景色*/
		
	}
	/*マウスオン時のボックス*/
	.list9 a:hover {
		background: #eea882;	/*背景色*/
	}
	
	
	
	
	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
	/*margin-left: 0;ボックスにリンク指定がされた場合に出る「→」マーク*/
	.list9 a::before {
		content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
		position: absolute;
		/*	right: 20px;ボックスの右から20pxの場所に配置*/
			/*top: 180px;	ボックスの上から20pxの場所に配置*/
		background: #ffd3bb;	/*背景色（古いブラウザ用）*/
		background: rgba(255,244,238,0.4);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
			
		color: #fff;	/*文字色*/
	
	/*「サービスのご案内」ページのボックス内の矢印マーク設定.list25 a::before*/
		font-size: 80px;	/*文字サイズ*/
		line-height: 1;
		padding: 20px;	/*余白（文字と円の間にあける余白）*/
		position: absolute;
		right: -15px;	/*ボックスに対して右から-15pxの場所に配置*/
		top: -25px;	/*ボックスに対して下bottomから-25pxの場所に配置*/
		border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
	}
	
	
		.list9 img.img {
		float: none;
		width: 100%;
	}	.list9 h4 {
		font-weight: bold;	/*デフォルトの太字を標準にする設定*/
		font-size: 22px;
		text-align: center;color: #ffffff;	/*文字色*/
		
	}
	
	.list9 .text {
		padding: 2%;
		
	}	}

/*list21生徒さんの声のサムネ用3ｔｐクリニック４PC横３SP横長１修正必要かも
---------------------------------------------------------------------------*/
.list21 {
	overflow: hidden;
	width: 27.4%;	
	float: left;	
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	
	border-radius: 3px;	
}
.list21 a {
	text-decoration: none;
	display: block;overflow: hidden;	background: #fff;	
	margin: -2%;	
	padding: 2%;	/*ボックス内の余白*/
}
.list21 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
/*マウスオン時*/
.list21 a:hover::before {
	background: #ffd3bb;	/*背景色*/
	color: #fff;			/*文字色*/
}
/*ボックス内の矢印マーク設定*//*ボックスにリンク指定がされた場合に出る「→」マーク*/
.list21 a::before {
	content: "→";	
	
	right: 20px;	
	top: 180px;		
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	background: rgba(255,211,187,0.4);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
		
	color: #fff;	

/*「サービスのご案内」ページのボックス内の矢印マーク設定.list25 a::before*/
	font-size: 40px;	/*文字サイズ*/
	line-height: 1;
	padding: 20px;	/*余白（文字と円の間にあける余白）*/
	position: absolute;
	right: -15px;	/*ボックスに対して右から-15pxの場所に配置*/
	top: -25px;	/*ボックスに対して下bottomから-25pxの場所に配置*/
	border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}

.list21 h4 {
	font-size: 17px;	/*文字サイズ*/
	color: #cf2480;		/*文字色*/
	margin-left: 34%;	/*左の写真とのバランスをとって設定*/
}


/*p（段落）タグの設定*/
.list21 p {
	padding: 0 !important;
	line-height: 1.2;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 80%;		/*文字サイズを少し小さく*/
	color: #333;		/*文字色*/
	height: 3em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}
/*登録日情報（.date単体で使う場合のスタイルも下にあります。）*/
.list21 .date {
	display: block;
	font-size: 11px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	text-align: right;	/*テキストを右側に*/
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

.list21 {
	width: auto;
	float: none;
	margin-left : 0;
}
.list21 figure img {
	float: left;
	width: 40%;
	margin-right: 2%;
}
/*h4（見出し）とp(段落)タグの設定*/
.list21 h4, .list2 p {
	height: auto;
}	}

/*おしゃれ全面縦長細め写真SP２ラデュレ風に声で使用中
---------------------------------------------------------------------------*/

.list69 {
	border: 1px solid #bcbcbc;	/*枠線の幅、線種、色*/
	margin-bottom: 15px;	/*ボックスの下に空ける余白*/
	position: relative;
	overflow: hidden;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);	/*影の設定。右・下・ぼかし幅・色の設定。「0,0,0」はrgbでの「黒」を指し、「0.1」は透明度「10%」の事。*/
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);			/*同上*/

	width: 18%;	
	float: left;
	margin-left: 1.3%;
	font-size: 11px;	
	line-height: 1.2;
}
.list69 a {
	height: 260px;	
	padding: 3%;	
	text-decoration: none;
	display: block;
	overflow: hidden;
}
/*マウスオン時のボックス*/
.list69 a:hover {
	background: #f1f1f1;	
}

.list69 h4 {
	margin-bottom: 0.5em;
	color: #4f4f4f;		
	border-bottom: 1px solid #CCC;	
	border: none;
	font-size: 16px;	/*文字サイズ*/
}
.list69 h4::first-letter {
	border-left: 3px solid #4f4f4f;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	/*線と文字との余白*/
	padding: 0px;
	margin-left: 24%;	/*左側の写真幅とのバランスをとって設定*/
	margin: 0;
}
.list69 h4::first-letter {
	border: none;
	padding: 0;
}

.list69 figure img {	
	object-fit: cover;/*画像改良？*/
	
	
	background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 1%;			/*余白。ここに上の行で設定した背景色が出ます。*/
	
	margin-right: 1%;		/*写真の右側に空ける余白*/

	float: none;
	margin: 0;
	margin-bottom: 5px;
	border: none;
	height: 100%;
	
}

/*登録日情報*/
.list69 .date {
	display:block;
	font-size:11px;
	color:#999;
	text-align: right;
}

/*画面幅414px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:414px){
.list69 figure img {
	object-fit: cover;/*画像改良？*/
	padding: 0px;
	border: none;
	margin-right: 1.5%;		/*写真の右側に空ける余白*/
}
/*各ボックスの設定（※compactタイプへの追加設定）*/
.list69 {
	width: 47%;	/*幅*/
	margin-left: 2%;
}
.list69 a {
	height: 225px;	/*高さ*/
}}



.list2 {
	overflow: hidden;
	margin: 20px 50px !important;
	padding: 2%;	
	border-radius: 3px;
	border: 2px solid #668ad8;	
	color: #202124;		
	background: #fff;		
}

.list2 .text {
	margin-left: 31%;	
}

.list2 h4 {
	font-size: 30px;	
	color: #668ad8 ;	line-height: 1.2;	
}
/*figure画像*/
.list2 figure {
	width: 30%;		
	float: left;	
}
.list2 p {
	padding: 0 !important;
	font-size: 16px;	}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

.list2 {
	margin: 20px 10px !important;
}
.list2 .text {
	margin-left: 0;
}
.list2 figure {
	width: 85%;		/*50幅*/
	float: none;
	display: block;
	margin: 0 auto;
}

.list2 h4 {
	font-size: 20px;	/*文字サイズ*/
}	}



/*tp-biz44 list９PC横長、SPカード list9の色違いでPC写真巨大化おしゃれ秋の和食バタークリームのナビリンクで使っている
---------------------------------------------------------------------------*/
.list19 {
	background: #ffffff;	
	position: relative;
	overflow: hidden;
	box-shadow: 1px 1px 3px rgba(255,211,187,0.5);	/*影の設定。右へ、下へ、広げる幅、0,0,0は黒で0.2は透明度20%の事。*/
	margin-bottom: 20px;
}
.list19 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
}
.list19 img.img {
	float: left;
	width: 100%;
	object-fit: cover;
}
.list19 h4 {
	font-weight: bold;	
	font-size: 18px;
	text-align: center;color: #202124;	/*文字色*/
	
}
.list19 p {
	color: #7c7670;		/*文字色*/
	padding: 2% 60px 2% 2%;	/*上、右、下、左への余白*/
	margin-left: ;		/*27%左の画像とのバランスをとって設定*/
}
/*ボックスにリンク指定がされた場合に出る「→」マーク*/
.list19 a::before {
	content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
	position: absolute;
	right: 20px;	/*ボックスの右から20pxの場所に配置*/
	top: 180px;		/*ボックスの上から20pxの場所に配置*/
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	background: rgba(255,211,187,0.4);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
		
	color: #fff;	/*文字色*/

/*「サービスのご案内」ページのボックス内の矢印マーク設定.list25 a::before*/
	font-size: 80px;	/*文字サイズ*/
	line-height: 1;
	padding: 20px;	/*余白（文字と円の間にあける余白）*/
	position: absolute;
	right: -15px;	/*ボックスに対して右から-15pxの場所に配置*/
	top: -25px;	/*ボックスに対して下bottomから-25pxの場所に配置*/
	border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}
/*マウスオン時の「→」マーク前のまま*/
.list19 a:hover::before {
	background: #ffd3bb;	/*背景色*/
	
}
.list19 a:hover {
	background: #fffde7;	/*背景色*/
}

	
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list19 img.img {
	float: none;
	width: 100%;
}

.list19 .text {
	padding: 2%;
	margin-left: 0;
}}


/*タルトやマカロンやマカロン文章内リンクリンク関連記事につかってる1フランスコースの順番。コンパクト不要？不動産１４ページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list24 {
	position: relative;overflow: hidden;
	margin: 10px 2%;	/*ボックスの下に空ける余白*/
}
.list24 a {
	text-decoration: none;display: block;overflow: hidden;
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	padding: 3%;	/*ボックス内の余白*/
    background: transparent;	/*背景色を透明に*/
}

.list24 a:hover {
	background: #fff4ee;
	border: 1px solid #999;	
}

.list24 h4 {
	font-size: 19px;	/*文字サイズ*/
	margin-bottom: 0.5em;
	color: #202124;		/*文字色*/
	margin-left: 22%;	/*左側の写真幅とのバランスをとって設定*/
}
/*ボックス内のh4タグの１文字目への設定*/
.list24 h4::first-letter {
	border-left: 3px solid #202124;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	/*線と文字との余白*/
}
/*ボックス内のp(段落)タグ設定*/
.list24 p {
	padding: 0px;
	margin-left: 29%;	/*左側の写真幅とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
.list24 figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 27%;		/*写真の幅*/
	margin-right: 2%;	/*写真の右側に空ける余白*/
}
/*マウスオン時のボックス内の写真設定*/
.list24 a:hover figure img {
	opacity: 0.8;	/*透明度80%にする設定*/
}
/*ボックス内の写真設定（※compactタイプへの追加設定）*/
.list24.compact figure img {
	float: none;
	margin: 0;
	margin-bottom: 10px;
	border: none;
	width: auto;
	padding: 0;
}
/*マウスオン時のボックス内の写真設定（※compactタイプへの追加設定）と、ボックスにoption2スタイルが指定された場合の画像の設定。*/
.list24.option2 a:hover figure img,
.list24.option2 figure img {
	opacity: 0.3 !important;
}
/*登録日情報*/
.list24 .date {
	display: block;
	font-size: 11px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	text-align: right;	/*テキストを右側に*/
}

/*一覧ページの各物件ボックス内のテーブルrist24不動産１４
---------------------------------------------------------------------------*/
.list24 table {
	font-size: 12px;	/*文字サイズ*/
	width: 78%;			/*テーブル幅*/
	margin-bottom: 5px;
}
.list24 table,
.list24 table td,
.list24 table th {
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
}
.list24 table td,
.list24 table th {
	padding: 1%;	/*テーブル内の余白*/
}
/*色のついた見出しブロック*/
.list24 table th {
	width: 20%;		/*幅*/
	text-align: center;		/*文字をセンタリング*/
	font-weight: normal;	/*デフォルトの太字を標準にする設定*/
	background: #edf0f5;	/*背景色*/
}
/*白い説明用ブロック*/
.list24 table td {
	width: 30%;	/*幅*/
}


/*list-column（start1day書籍化講座で使っている３列ブロック）biz55ｈ４重なっていた
---------------------------------------------------------------------------*/
/*カラムブロック全体を囲むボックス*/
#contents .list-column-container {
	display: flex;
	justify-content: space-between;	/*中のブロックの横並びの揃え方*/
	flex-wrap: wrap;				/*中のブロックを自動で折り返す*/
	margin: 0 3%;					/*上下、左右へのボックスの外に空けるスペース*/
}

#contents .list-column {
	display: flex;
	flex-direction: column;			/*中のブロックを並べる向きの指定。これは縦に並べる意味。*/
	width: 32%;						
	margin-bottom: 20px;			
	background: #fff;				
	border-radius: 10px;			
	overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
	}
/*ボックス内のh4（見出し）タグline-height: 1;*/
#contents .list-column h4 {
	
	margin-bottom: 10px;	/*下のテキストとの間に空けるスペース*/
	font-size: 1.25rem;		/*文字サイズ。冒頭で指定しているフォントサイズの1.25倍です。*/
}
/*ボックス内のp（段落）タグ*/
#contents .list-column p {
	padding: 0;		/*余白のリセット*/
	font-size: 0.75rem;		/*文字サイズ*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-column .text {
	padding: 10%;			/*ブロック内の余白*/
	flex: 1 0 auto;
}
/*IEバグ対応*/
#contents .list-column figure {
	min-height: 0%;
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	#contents .list-column {
		width: 100%;
	}
	/*ボックス内のp（段落）タグ*/
	#contents .list-column p {
		padding: 0;		/*余白のリセット*/
		font-size: 14px;		/*文字サイズ*/
	}
}

/*list-shop10正方形ボックスsp4pc8料金の上
---------------------------------------------------------------------------*/
.list-shop10 {
	position: relative;
	width: 12%;		/*幅８*/
	margin: 0.2%;	/*外側に空けるスペース*/
	float: left;	/*左に回り込み*/
	background: #ffd3bb;	/*背景色*/
}
.list-shop10 img {
	opacity: 1;	/*透明度。50%色がついた状態。*/
}
/*マウスオン時の画像*/
.list-shop10 a img:hover {
	opacity: 0.5;		/*透明度。100%色がついた状態。*/
}
.list-shop10 span {
	position: absolute;
	bottom: 10px;		/*下から10pxの場所に配置*/
	left: 0px;			/*左から0pxの場所に配置*/
	width: 100%;		/*幅*/display: block;	/*デフォルトでは表示させる*/
	padding: 5px 5%;		/*余白*/
	font-size: 10px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.7);	/*背景色。0,0,0は黒のことで0.7は70%色がついた状態のこと。*/
	color: #202124;	/*文字色*/
}
.list-shop10:hover span {
	display: none;		/*非表示にしておく*/
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	.list-shop10 {
	position: relative;
	width: 25%;		/*４幅*/
	margin: 0%;	/*外側に空けるスペース*/
	float: left;	/*左に回り込み*/
	background: #000;	/*背景色*/
}}
/*でない？何につかう、ボックスの外側に空けるスペース*/
.list-3photo {
	overflow: hidden;
	position: relative;	
	width: 30%;		/*ボックス幅*/
	margin: 0 1.5% 40px;	
	
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	
	font-size: 12px;	/*文字サイズ*/
	margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}
.list-3photo a {
	display: block;text-decoration: none;overflow: hidden;
}
/*h4タグ*/
.list-3photo h4 {
	height: 1.5em;	/*高さ。レイアウトが崩れるのを防ぐ為、２行目以降は非表示になります。*/
}
/*写真のマウスオン時*/
.list-3photo a:hover figure img {
	opacity: 0.7;	/*透明度*/
}

/*スリムprofページ
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-slim {
	position: relative;overflow: hidden;
	font-size: 11px;	/*文字サイズを少し小さくする（デフォルトは最上段のbody内にあります）*/
	line-height: 1.3;	/*行間を少し狭くする（デフォルトは最上段のbody内にあります）*/
}
.list-slim a {
	display: block;text-decoration: none;overflow: hidden;
	padding: 8px 0;	/*上下、左右へのメニュー内の余白*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色	*/
}
/*写真*/
.list-slim figure img {
	width: 12.5%;		/*写真の幅*/
	float: left;	/*左に回り込み*/
	margin-right: 5px;	/*写真の右に空けるスペース*/
}


.list3 {
	position: relative;
	float: left;	/*左に回り込み*/
	width: 30%;		/*ボックス幅*/
	margin: 0 1.5% 40px;	/*上、左右、下へ、ボックスの外側に空けるスペース*/
	text-align: center;		/*内容を中央よせ*/
}
.list3 figure {
	margin-bottom: 10px;	/*画像の下に空けるスペース*/
}
.list3 img {
  height: 150px;
  object-fit: cover;
}
.list3 figure a:hover{
	opacity: 0.8;	/*マウスオン時。透明度80%にする。*/
}
/*ボックス内のh4（見出し）タグ*/
.list3 h4 {
	position: absolute;
	bottom: 30px;	/*list2ボックスの上から0pxの場所に配置*/
	height: 25px;
	width: 100%;	/*幅*/
	background: #ffffff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.1);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
  color: #ffffff;	/*文字色*/
    }

/*ボックス内のp（段落）タグ*/
.list3 p {
	padding: 0px !important;
}


/*物件一覧ページの各ブロックtp不動産１１のリストコンパクトをリスト３８に
---------------------------------------------------------------------------*/
.list-book-i-wrote {
	border: 1px solid #ffffff;	/*枠線の幅、線種、色*/
	margin-bottom: 15px;	/*ボックスの下に空ける余白*/
	position: relative;
	overflow: hidden;
	
}
/*各ボックスの設定（※compactタイプへの追加設定）*/
.list-book-i-wrote {
	width: 18%;	/*幅*/
	float: left;
	margin-left: 1.3%;
	font-size: 11px;	/*文字サイズ*/
	line-height: 1.2;
}
.list-book-i-wrote a {
	height: 220px;	
	padding: 3%;	/*ボックス内の余白*/
	text-decoration: none;
	display: block;
	overflow: hidden;
}
/*マウスオン時のボックス*/
.list-book-i-wrote a:hover {
	background: #f1f1f1;	/*背景色*/
}
/*ボックス内のh4タグ設定*/
.list-book-i-wrote h4 {
	margin-bottom: 0.5em;
	color: #4f4f4f;		/*文字色*/
	border-bottom: 1px solid #CCC;	/*下線の幅、線種、色*/

	border: none;
	font-size: 16px;	/*文字サイズ*/
}
/*ボックス内のh4タグの１文字目への設定*/
.list-book-i-wrote h4::first-letter {
	border-left: 3px solid #4f4f4f;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	/*線と文字との余白*/
}
/*ボックス内のh4タグの１文字目への設定（※compactタイプへの追加設定）*/
.list-book-i-wrote h4::first-letter {
	border: none;
	padding: 0;
}

/*ボックス内の段落タグ設定*/
.list-book-i-wrote p {
	padding: 0px;
	font-size: 11px;
	margin: 0;
}
/*ボックス内の写真設定*/
.list-book-i-wrote figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 20%;		/*写真の幅*/
	background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 1%;			/*余白。ここに上の行で設定した背景色が出ます。*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
	margin-right: 1%;		/*写真の右側に空ける余白*/
}/*ボックス内の写真設定（※compactタイプへの追加設定）*/
.list-book-i-wrote figure img {
	float: none;
	margin: 0;
	margin-bottom: 5px;
	border: none;
	width: auto;
	padding: 0;
}

/*登録日情報*/
.list-book-i-wrote .date {
	display:block;
	font-size:11px;
	color:#999;
	text-align: right;
}

/*画面幅414px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:414px){

/*物件一覧ページの各ブロック
---------------------------------------------------------------------------*/
/*ボックス内の写真設定*/
.list-book-i-wrote figure img {
	padding: 0px;
	border: none;
	margin-right: 1.5%;		/*写真の右側に空ける余白*/
}
/*各ボックスの設定（※compactタイプへの追加設定）*/
.list-book-i-wrote {
	width: 47%;	/*幅*/
	margin-left: 2%;
}
.list-book-i-wrote a {
	height: 185px;	/*高さ*/
}}

/*物件一覧ページの各ブロックtp不動産１１のリストコンパクトをリスト３８に
---------------------------------------------------------------------------*/
.list38 {
	border: 1px solid #ffffff;	/*枠線の幅、線種、色*/
	margin-bottom: 15px;	/*ボックスの下に空ける余白*/
	position: relative;
	overflow: hidden;
	
}
/*各ボックスの設定（※compactタイプへの追加設定）*/
.list38 {
	width: 18%;	/*幅*/
	float: left;
	margin-left: 1.3%;
	font-size: 11px;	/*文字サイズ*/
	line-height: 1.2;
}
.list38 a {
	height: 160px;	/*高さ*/

	padding: 3%;	/*ボックス内の余白*/
	text-decoration: none;
	display: block;
	overflow: hidden;
}
/*マウスオン時のボックス*/
.list38 a:hover {
	background: #f1f1f1;	/*背景色*/
}
/*ボックス内のh4タグ設定*/
.list38 h4 {
	margin-bottom: 0.5em;
	color: #4f4f4f;		/*文字色*/
	border-bottom: 1px solid #CCC;	/*下線の幅、線種、色*/

	border: none;
	font-size: 16px;	/*文字サイズ*/
}
/*ボックス内のh4タグの１文字目への設定*/
.list38 h4::first-letter {
	border-left: 3px solid #4f4f4f;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	/*線と文字との余白*/
}
/*ボックス内のh4タグの１文字目への設定（※compactタイプへの追加設定）*/
.list38 h4::first-letter {
	border: none;
	padding: 0;
}

/*ボックス内の段落タグ設定*/
.list38 p {
	padding: 0px;
	margin-left: 24%;	/*左側の写真幅とのバランスをとって設定*/
}
/*ボックス内の段落タグ設定（※compactタイプへの追加設定）*/
.list38 p {
	margin: 0;
}
/*ボックス内の写真設定*/
.list38 figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 20%;		/*写真の幅*/
	background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 1%;			/*余白。ここに上の行で設定した背景色が出ます。*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
	margin-right: 1%;		/*写真の右側に空ける余白*/
}/*ボックス内の写真設定（※compactタイプへの追加設定）*/
.list38 figure img {
	float: none;
	margin: 0;
	margin-bottom: 5px;
	border: none;
	width: auto;
	padding: 0;
}

/*登録日情報*/
.list38 .date {
	display:block;
	font-size:11px;
	color:#999;
	text-align: right;
}

/*画面幅414px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:414px){

/*物件一覧ページの各ブロック
---------------------------------------------------------------------------*/
/*ボックス内の写真設定*/
.list38 figure img {
	padding: 0px;
	border: none;
	margin-right: 1.5%;		/*写真の右側に空ける余白*/
}
/*各ボックスの設定（※compactタイプへの追加設定）*/
.list38 {
	width: 47%;	/*幅*/
	margin-left: 2%;
}
.list38 a {
	height: 170px;	/*高さ*/
}}

/*home3特徴を３ついれるPC3丸写真下があふれるのが悩み基礎かのMENU基礎科選べるメニュ透かしできれい
---------------------------------------------------------------------------*/
/*listブロック設定overflow: hidden;*/
.list23 {
	position: relative;
	margin: 0 0.5% 30px;	/*上、左右、下へのボックスの外に空けるスペース*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	padding: 4%;	/*ボックス内の余白*/
	float: left;	
	padding: 2%;	/*ボックス内の余白の上書き*/
	width: 31.5%;	/*幅３２．５*/
	height: 700px !important;/*６５０長い高さauto*/

	box-shadow: 1px 2px 8px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.1は色が10%出た状態。*/
	background: rgba(255,211,187,0.4);	/*背景色。255,255,255は白の事で、0.4は色が40%出た状態。*/
			/*上下、左右へのボックス内の余白*/
	border: 1px solid #ffd3bb;			
}
.list23 a {
	overflow: hidden;text-decoration: none;display: block;
}
.list23 h4 {
	padding: 0;border: none;
	font-size: 20px;font-weight: bold;	/*文字サイズ*/	
	color: #d5889a;		/*文字色*/
	line-height: 1.2em;
	
	margin-bottom: 0.5em;
}
.list23 p {
	margin: 10px !important;/*0*/
	padding: 0 !important;
	line-height: 1.8;
	
	font-size: 80%;
	
}
.list23 figure img {
	margin: 0 auto;	/*上、右、下、左への画像の外側にとるスペース*/
	width: 260px;			/*画像幅*/
	height: 250px;/*画像改良？*/
    object-fit: cover;/*画像改良？*/
	border-radius: 50%;	/*角丸のサイズ*/
}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	/*list23ブロック800ika
	---------------------------------------------------------------------------*/
	/*listブロック設定*/
	.list23 {
		margin: 4% !important;
		padding: 4% !important;
		float: none !important;
		width: auto !important;
		height: auto !important;
		box-shadow: none;
		border-top: 1px solid #ccc;
	}
	.list23:last-of-type {
		border-bottom: 1px solid #ccc;
		margin-bottom: 20px !important;
	}
	/*h4タグ設定*/
	.list23 h4 {
		font-size: 17px !important;
	}
	/*段落タグ設定*/
	.list23 p {
		font-size: 100% !important;
		line-height: 1.8 !important;
		height: auto !important;
	}
	/*figure画像の設定Pcより大きく*/
	.list23 figure img {
		margin: 0 auto;	/*上、右、下、左への画像の外側にとるスペース*/
		width: 300px;			/*画像幅*/
		height: 300px;/*画像改良？*/
		object-fit: cover;/*画像改良btn48？*/
		border-radius: 50%;	/*角丸のサイズ*/
	}}


/*おせち料理の買い物の品別ブロックtp^biz32お菓子講座のオーダーレッスンは消した
---------------------------------------------------------------------------*/
.list33 {
	position: relative;overflow:hidden ;
	margin: 10px 2%;
	padding: 20px;		
	border: 1px solid #dcdcdc;
	background: #fff4ee;	
	box-shadow: 0px 0px 0px 1px #fff inset;	/*内側の影。右・下・ぼかし幅・距離・色を設定*/
	color: #333;	/*文字色*/
}
.list33 a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 20px;	/*ボックス内の余白。ここを変更する際は、上の「#main .list」のpaddingの数字も合わせる。*/
	margin: -20px;	/*ボックス内の余白。ここを変更する際は、上の「#main .list」のpaddingの数字も合わせる。マイナス記号は外さないように。*/
	color: #7c7670;	/*文字色*/
}

.list33 a:hover {
	background: #fff4ee;	/*背景色*/
}
/*リンクを貼った際に出る「→」マーク*/
.list33 a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 50px;	/*幅*/
	line-height: 50px;	/*高さ*/
	text-align: center;
	background: #a49461;	/*背景色（古いブラウザ用）*/
	background: rgba(164,148,97,1.0);	/*背景グラデーション。0,0,0は黒の事で、0.3は透明度30%の事。*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ。50%にすると円になる。*/
}
/*マウスオン時の「→」マーク*/
.list33 a:hover::before {
	background: #a49461;	/*背景色*/
}
.list33 h4 {
	padding-left: 10px;	/*枠線とテキストとの間の余白*/
 	border-bottom: 1px solid #CCC;	/*下側の線の幅、線種、色*/
	border-left: 3px solid #de8799;	/*左側の線の幅、線種、色*/
	margin-bottom: 0.5em;
	color: #202124;	/*文字色*/font-size: 22px;	/*文字サイズ*/
}
/*ボックス内のp(段落)タグ設定*/
.list33 p {
	padding: 0px !important;
}
/*ボックス内の画像*/
.list33 figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*画像幅*/
	background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 1%;			/*余白。ここに上の行で設定した背景色が出ます。*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
	margin-right: 10px;
}
/*マウスオン時のボックス内の写真設定。ボックスにoption2スタイルが指定された場合の画像の設定。*/
.list33.option2 a:hover figure img,
.list33.option2 figure img {
	opacity: 0.3 !important;	/*半透明にする設定*/
}

/*一覧ページの各ボックス内のテーブルtp-biz32
---------------------------------------------------------------------------*/
.list33 table {
	font-size: 12px;	/*文字サイズ*/
	width: 63%;			/*テーブル幅*/
	margin-bottom: 5px;
	background: #fff;	/*背景色*/
}
.list33 table,
.list33 table td,
.list33 table th{
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}
.list33 table td,
.list33 table th{
	padding: 1%;	/*テーブル内の余白*/
}
.list33 table th{
	width: 20%;		/*幅*/
	text-align: center;		/*文字をセンタリング*/
	font-weight: normal;	/*デフォルトの太字を標準にする設定*/
	background: #fff4ee;	/*背景色*/
}
/*説明用ブロック*/
.list33 table td {
	width: 30%;	/*幅*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list33 {
	padding: 10px;
}
.list33 a {
	padding: 10px;
	margin: -10px;	
}

/*一覧ページの各ボックス内のテーブル
---------------------------------------------------------------------------*/
.list33 table {
	font-size: 10px;	/*文字サイズ*/
}}

/*list３３内のアイコン（シニア向け、ご家族向け、カップル向け）tp-yado4 上つきのタグ下になった
---------------------------------------------------------------------------*/
/*アイコン全体を囲むボックス*/
ul.mark-tag {
	margin-top: 2px;	/*ボックスの上にくっつける為の指定中にはいるにで２０から０にしたら下にきたので数字大きく４０から２０に。？*/
	float: right;		/*ボックスを右側に配置する*/
}
/*アイコン１個あたりの設定*/
ul.mark-tag li {
	line-height: 1;
	float: left;		/*左に回り込み*/
	background: #999;	/*デフォルトの背景色。グレー色。*/
	color: #fff;		/*文字色*/
	font-size: 12px;	/*文字サイズ*/
	padding: 5px 10px;	/*上下、左右へのアイコン内の余白*/
	margin-right: 5px;	/*アイコンの左右間に空けるスペース*/
	margin-bottom: 5px;	/*アイコンの上下間に空けるスペース*/
}
/*mark1（シニア向け）への追加設定*/
ul.mark-tag .mark1-tag {
	background: #604781;	/*背景色*/
}
/*mark2（ご家族向け）への追加設定*/
ul.mark-tag .mark2-tag {
	background: #626b47;	/*668d22背景色*/
}
/*mark3（カップル向け）への追加設定*/
ul.mark-tag .mark3-tag {
	background: #c8436f;	/*背景色*/
}
/*mark4（キャンペーン向け）への追加設定*/
ul.mark-tag .mark4-tag {
	background: #e38000;	/*背景色*/
}
/*パンレシピの背景パン写真MENUバナー風に使える。
サイドで縦にのび、メインで横に。写真違いの違うリストある。
---------------------------------------------------------------------------*/
/*ネオン風tp111ブラックピンクにシャドウ囲み*/
.list13 {
	clear: both;
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;
	text-align: center;	/*文字をセンタリング*/
	color: #60523f;		/*文字色*/

	border: 1px solid #ffd3bb;	/*枠線の幅、線種、色*/opacity: 1;	/*リンクを指定した際は60%だけ色を出す。*/
	box-shadow: 0px 0px 50px #ffd3bb inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
	
	background: #333;	/*背景色（古いブラウザ用）*/
	background: url(https://creme-cremes.com/img/siro6.jpg) no-repeat center center/cover;	/*背景画像の読み込み*/
	padding: 50px 0px;	/*上下、左右へのボックス内の余白*/
	color: #fff;	/*文字色*/
}

/*h4タグ*/
.list13 h4 {
	clear: both;
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #fff;		/*文字色*/

}

.list13 a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 10px;	/*ボックス内の余白*/
	
}
/*マウスオン時。内側の影を消す設定。*//*マウスオン時追加*/
.list13 a:hover {
	box-shadow: none;
	border: 1px solid #ff5293;	/*枠線の幅、線種、色*/
	color: #fff;	/*文字色*/opacity: 0.6;		/*リンクを指定した際のマウスオン時に色を100%出す。*/
}

/*h2タグのspan（装飾用）タグ*/
.list13 h4 span {
	display: block;
	font-size: 14px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	letter-spacing: 0.3em;	/*文字間隔を広くとる設定*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*h2,h3タグ*/

.list13 h4 {
	font-size: 20px;	/*文字サイズ*/
}
/*h2タグのspan（装飾用）タグ*/

.list13 h4 span {
	font-size: 10px;	/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
}}

/*料理list１２のMENUバナー風に使える。お気に入り。SP１PC横１　にしたバナーみたく見える。文字も大きいが‥目立つ。
サイドで縦にのび、メインで横に。写真違いの違うリストをつくりたい。
---------------------------------------------------------------------------*/
/*ネオン風tp111ブラックピンクにシャドウ囲み*/
.list12 {
	clear: both;
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #60523f;		/*文字色*/

	border: 1px solid #ffd3bb;	/*枠線の幅、線種、色*/opacity: 1;	/*リンクを指定した際は60%だけ色を出す。*/
	box-shadow: 0px 0px 50px #ffd3bb inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
	
	background: #333;	/*背景色（古いブラウザ用）*/
	background: url(https://creme-cremes.com/school/cooking/images/egg-gratin-min.jpg) no-repeat center center/cover;	/*背景画像の読み込み*/
	padding: 50px 0px;	/*上下、左右へのボックス内の余白*/
	color: #fff;	/*文字色*/
}

/*h4タグ*/
.list12 h4 {
	clear: both;
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #fff;		/*文字色*/

}

.list12 a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 10px;	/*ボックス内の余白*/
	
}
/*マウスオン時。内側の影を消す設定。*//*マウスオン時追加*/
.list12 a:hover {
	box-shadow: none;
	border: 1px solid #ff5293;	/*枠線の幅、線種、色*/
	color: #fff;	/*文字色*/opacity: 0.6;		/*リンクを指定した際のマウスオン時に色を100%出す。*/
}

/*h2タグのspan（装飾用）タグ*/
.list12 h4 span {
	display: block;
	font-size: 14px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	letter-spacing: 0.3em;	/*文字間隔を広くとる設定*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*h2,h3タグ*/

.list12 h4 {
	font-size: 20px;	/*文字サイズ*/
}
/*h2タグのspan（装飾用）タグ*/

.list12 h4 span {
	font-size: 10px;	/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
}}

/*お菓子list29のMENUバナー風に使える。お気に入り。list29ブロックSP１PC横１　にしたバナーみたく見える。文字も大きいが‥目立つ。
サイドで縦にのび、メインで横に。写真違いの違うリストをつくりたい。
---------------------------------------------------------------------------*/
/*ネオン風tp111ブラックピンクにシャドウ囲み*/
.list29 {
	clear: both;
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #60523f;		/*文字色*/

	border: 1px solid #ffd3bb;	/*枠線の幅、線種、色*/opacity: 1;	/*リンクを指定した際は60%だけ色を出す。*/
	box-shadow: 0px 0px 50px #ffd3bb inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
	
	background: #333;	/*背景色（古いブラウザ用）*/
	background: url(https://creme-cremes.com/school/sweets/images/mousse-au-lait-fraises2-min.jpg) no-repeat center center/cover;	/*背景画像の読み込み*/
	padding: 50px 0px;	/*上下、左右へのボックス内の余白*/
	color: #fff;	/*文字色*/
}

/*h4タグ*/
.list29 h4 {
	clear: both;
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #fff;		/*文字色*/

}

.list29 a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 10px;	/*ボックス内の余白*/
	
}
/*マウスオン時。内側の影を消す設定。*//*マウスオン時追加*/
.list29 a:hover {
	box-shadow: none;
	border: 1px solid #ff5293;	/*枠線の幅、線種、色*/
	color: #fff;	/*文字色*/opacity: 0.6;		/*リンクを指定した際のマウスオン時に色を100%出す。*/
}

/*h2タグのspan（装飾用）タグ*/
.list29 h4 span {
	display: block;
	font-size: 14px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	letter-spacing: 0.3em;	/*文字間隔を広くとる設定*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*h2,h3タグ*/

.list29 h4 {
	font-size: 20px;	/*文字サイズ*/
}
/*h2タグのspan（装飾用）タグ*/

.list29 h4 span {
	font-size: 10px;	/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
}}





/*tp-clinc5-list7ブロック横３ずっと
---------------------------------------------------------------------------*/
.list7 {
	overflow: hidden;
	width: 29.8%;	/*幅*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、広げる幅、0,0,0は黒で0.2は透明度20%の事。*/
	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 0;	/*ボックス内の余白2%*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
	background: #fff;	/*背景色*/
	
	line-height: 1.4;	/*行間を少し狭く。デフォルトの値は冒頭の「body」にあります。*/
	margin-left: 2.5%;	/*左に空けるボックスの外側へのスペース。左右間の余白になります。*/
	margin-bottom: 20px;	/*下に空けるボックスの外側へのスペース。上下間の余白になります。*/

}



.list7 a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の.listのpaddingを相殺するため。*/
	padding: 2%;	/*ボックス内の余白*/
	background: #fff url(https://creme-cremes.com/components/images/arrow1.png) no-repeat right bottom / 40px;	/*リンク設定した際の右下の矢印マークの読み込み。right（右）、bottom（下）、40pxは画像の幅。*/
}

/*マウスオン時の設定*/
/*マウスオン時の設定*//*マウスオン時のlistブロック*/
.list7 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
	background: #ffd3bb;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*list7ブロック内のh4タグとpタグ共通設定*/
.list7 h4, .list7 p {
	padding: 0 !important;
	margin: 0 !important;
}
/*h4（見出し）タグの設定*/
.list7 h4 {
	color: #6b6351;	/*文字色*/font-weight: bold;	/*デフォルトの太字を標準にする設定*/
	font-size: 16px !important;
	text-align: center;
	padding: 10px !important;	/*余白*/
	height: 2em;		/*高さ*/
		/*overflow: ;hidden高さを超えた場合に非表示にする*/
}

/*p（段落）タグの設定*/
.list7 p {
	padding: 0 10px 10px !important;	/*上、左右、下への余白*/
	
	line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 90%;		/*文字サイズを少し小さく*/
	color: #7c7670;		/*文字色*/
	text-align: center;	/*文字をセンタリング*/
	height: 3em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}/*ボックスにリンク指定がされた場合に出る「→」マーク*/
.list7 a::before {
	content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
	/*	right: 20px;ボックスの右から20pxの場所に配置*/
		/*top: 180px;	ボックスの上から20pxの場所に配置*/
	background: #ffd3bb;	
	background: rgba(255,244,238,0.8);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
		
	color: #fff;

/*「サービスのご案内」ページのボックス内の矢印マーク設定.list25 a::before*/
	font-size: 30px;	/*文字サイズ*/
	line-height: 1;
	padding: 20px;	/*余白（文字と円の間にあける余白）*/
	position: absolute;
	right: 2px;	
	bottom: 2px;	/*ボックスに対して下bottomから-25pxの場所に配置*/
	border-radius: 100px;	
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list7 {
	overflow: hidden;
	width: 29.8%;	/*幅*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
    border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/

	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、広げる幅、0,0,0は黒で0.2は透明度20%の事。*/
	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 0%;	/*ボックス内の余白2%*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}
.list7 a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の.listのpaddingを相殺するため。*/
	padding: 0.2%;	/*ボックス内の余白*/	/*ボックス内の余白*/
	background: url(https://creme-cremes.com/components/images/arrow1.png) no-repeat right bottom / 40px;	/*リンク設定した際の右下の矢印マークの読み込み。right（右）、bottom（下）、40pxは画像の幅。*/
}
/*マウスオン時の設定*/
.list7 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
/*h4（見出し）タグの設定*/
.list7 h4 {
	color: #6b6351;		/*文字色*/
	padding: 0 !important;
	font-size: 15px !important;	/*100%文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	height: 2em;		/*2高さ*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}

.list7 a::before {
	content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
	position: absolute;
	/*	right: 20px;ボックスの右から20pxの場所に配置*/
		/*top: 180px;	ボックスの上から20pxの場所に配置*/
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	background: rgba(255,244,238,0.8);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
		
	color: #ffd3bb;	/*fff文字色*/

/*「サービスのご案内」ページのボックス内の矢印マーク設定.list25 a::before*/
	font-size: 24px;	/*文字サイズ*/
	line-height: 1;
	padding: 13px;	
	position: absolute;
	right: 1px;	/*ボックスに対して右から5pxの場所に配置マイナス*/
	bottom: 4px;	/*7ボックスに対して下bottomから15pxの場所に配置マイナス*/
	border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}

.list7 p {
	padding: 0 !important;
	line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 90% !important;		/*文字サイズを少し小さく*/
	color: #7c7670;		/*文字色*/
	height: 1.5em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}	}

.list1 {
	position: relative;
	overflow: hidden;
	float: left;		/*左に回り込み*/
	font-size: 11px;	/*文字サイズ*/
	line-height: 1.5;
	width: 23%;		/*ボックスの幅*/
	margin-left: 1.25%;
	margin-bottom: 15px;
	border: 1px solid #ccc;	/*枠線の幅、線種、色。*/
}
.list1 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 15px;	/*ボックス内の余白*/
	height: 190px;	/*高さ*/
}
/*マウスオン時の背景色*/
.list1 a:hover {
	background: #f4f0e9;
}

.list1 p {
	padding: 0px !important;
}
/*ボックス内のh4タグ設定*/
.list1 h4 {
	padding: 0px;
	color: #5d4930;	/*文字色*/
}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
.list1 a {
	padding: 15px;
	height: 190px;
}}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
	.list1 {
		float: none; 
		width: auto;
		margin: 0;
		border: none;
		border-top: 1px solid #eee;
	}
	.list1:last-child {
		margin-bottom: 15px;
		border-bottom: 1px solid #eee;
	}
	.list1 a {
		padding: 10px !important;
		height: auto !important;
	}
	/*画像*/
	.list1 figure {
		float: left;	/*左に回り込み*/
		width: 15%;		/*画像幅*/
		object-fit: cover;/*画像改良？*/
		margin-right: 10px;
	}}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*Cast用の各ブロック
---------------------------------------------------------------------------*/
.list1 figure {
	width: 30%;	/*画像幅*/
}	
	
}



/*レシピのリンク横長。Pcだと写真のみ？？tp116Cast用の---------------------------------------------------------------------------*/
/*各キャストボックスの設定*/
.sub .list1 {
	text-decoration: none;
	float: none; 
	width: auto;
	margin: 0;
	border: none;
	border-top: 1px solid #eee;
}

.sub .list1 h4 {
	color: #202124;	/*文字色*/
	font-size: 18px;font-weight: 600;
	text-align: center;
}


.sub .list1 p {
	color: #202124;	/*リンク色？？文字色*/
	font-size: 13px;
	text-align: center;
}


.sub .list1:last-child {
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
}
.sub .list1 a {
	padding: 10px !important;
	height: auto !important;
}
/*画像*/
.sub .list1 figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*画像幅*/
	margin-right: 10px;
}


/*レシピ-r-indexのナビ風に上にラベル風SP１PC横２に変える。---------------------------------------------------------*/
/*メインコンテンツ内のbreeder4から。-------------------*/
/*ボックス１個あたりの設定overflow: hidden;*/
.list-crown-pc3sp1 {
	position: relative;

  width: 29%;		/*300幅*/
  height: 250px;
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	
	font-size: 32px;	
	padding: 10px 20px;			/*上下、左右30へのボタン内の余白*/
	margin: 2% 5px 20px;		/*上、左右、下へのボックスの外側への余白*/

background: ;	/*#fff背景色*/
}

.list-crown-pc3sp1 a {
	display: block;text-decoration: none;overflow: hidden;
}	

/*h4タグ*/
.list-crown-pc3sp1 h4 {
  position: absolute;
 left: 8%;
	top: 34%;	/* list2ボックスの上から20%の場所に配置*//*上にラベル風h4タグ*/
	width: 84%;	/*幅100*/
	height: 125px;
		/*background: #fff;背景色（古いブラウザ用）*/
		/*background: rgba(255,255,255,0.9);背景色。border: 4px solid #e99383;0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #6b6351;	/*文字色*/
	text-align: center;	/*内容をセンタリング*/ 
	font-weight: 600;	/*文字サイズ*/line-height: 1.0;/*追加して行間狭くしたい*/
	z-index: 20;font-size: 130%;		/*文字サイズ*/
	color: #e6b700;	/*文字色kouho b38e00 cca300 */
   }
   
  
  /*写真追加試行錯誤*/
  .list-crown-pc3sp1 figure img {
	width: 80%;			/*写真の幅95*/
	height: 250px;
	/*background: ;	#eea882�w�i�F*/
	object-fit: cover;
	}
 	
/*写真のマウスオン時*/
.list-crown-pc3sp1 a:hover figure img {
	opacity: 0.7;	/*透明度*/ 
     object-fit: cover;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*メインコンテンツ内の「list32」ボックスbreeder4
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-crown-pc3sp1 {
		float: none;
		width: auto;
        padding: 10px 10px;			/*上下、左右30へのボタン内の余白*/	
	margin: 5px;	/*20ボックス同士に空ける左右間のスペース*/margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}}	/*終わり*/



/*-------------------breeder4から。SP2PC4写真のみ白おび文字レシピリスト下ブログサイトへのリンクで使用「「「list4」	
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list4 {
	overflow: hidden;
	position: relative;
  width: 22%;		/*幅*/
  height: 120px;object-fit: cover;
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	margin-left: 2.4%;	/*ボックス同士に空ける左右間のスペース*/
	font-size: 12px;	/*文字サイズ*/
	margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}
.list4 a {
	display: block;text-decoration: none;overflow: hidden;
}
/*h4タグ*/
.list4 h4 {
  position: absolute;
	top: 0px;	/*list2ボックスの上から0pxの場所に配置*/
	width: 100%;	/*幅*/
	height: 25px;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.7);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #6b6351;	/*文字色*/
  }
  
 
/*写真のマウスオン時*/
.list4 a:hover figure img {
	opacity: 0.7;	/*透明度*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*メインコンテンツ内の「list32」ボックスbreeder4
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list4 {
	width: 45%;			/*幅*/
	margin-left: 3%;	/*ボックス同士に空ける左右間のスペース*/
}}




/*額縁用の各ブロックtp115横３PC,ｓｐ１よい。写真のみ*/
.list16 {
	position: relative;
	overflow: hidden;
	font-size: 11px;	/*文字サイズ*/
	line-height: 1.5;
	width: 31%;		/*ボックスの幅*/
	padding: 4%;	/*ボックス内の余白*/
	float: left;
	margin-left: 1.25%;
	margin-bottom: 15px;
	background: url(https://creme-cremes.com/components/images/framekokuban-min.png) no-repeat center center/100% 100%;	/*背景画像の読み込み*/
	border: 1px solid #ffffff;	/*枠線の幅、線種、色。古いブラウザだと背景画像は出ず、このラインだけ出ます。*/
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
}
.list16 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	height: 200px;	/*高さ*/
}
/*ボックス内のp(段落)タグ設定みえないみえる化*/
.list16 p {
    color: #ffffff;	/*文字色*/
	padding: 0px !important;
}
/*ボックス内のh4タグ設定*/
.list16 h4 {
	padding: 0px;
	color: #e99383;	/*文字色*/
}
/*h4タグとpタグのマウスオン時の文字色*/
.list16 a:hover h4,
.list16 a:hover p {
	color: #FFE900;
}
/*マウスオン時のボックス*/
.list16:hover {
	-webkit-box-shadow: 0px 0px 10px #FFE900;	/*外側に光る影の設定。10pxが広がる距離。*/
	box-shadow: 0px 0px 10px #FFE900;			/*同上*/

}









/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*トップページの「Today's Cast」ブロック800ika
---------------------------------------------------------------------------*/
/*「Today's Cast」ブロック内の各キャストボックスの設定*/
.list16 {
	width: 31%;	/*ボックスの幅*/
	padding: 5.2%;	/*ボックス内の余白*/
}
.list16 a {
	height: 200px;	/*錯誤中写真高さ*/
}}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){



/*各キャストボックスの設定tp115::480ika*/
.list16 {
	width: auto !important;	
	height: 330px;	/*高さ*/
	float: none !important;
	margin: 15px !important;
	background: url(https://creme-cremes.com/components/images/framekokuban-min.png) no-repeat center center/100% 100%;	/*横長画像の読み込み*/
	padding: 17% !important;
}
.list16 a {
	height: 200px;	/*写真錯誤中高さ*/
}
.list16 figure {
	float: center;
	width: 80%;
	margin: 0 5%;
}}


/*.list17（物産の３カラムボックスを1カラム。プロフィール用。写真を丸に）すりガラㇲ風
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list17 {
	position: relative;
border-radius: 8px;				/*角を丸くする指定*/
	width: 98%;		/*ボックスの幅*/
	float: left;		/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	padding: 3%;		/*ボックス内の余白*/
	padding-bottom: 75px;	/*下の余白だけ上書き*/
	margin: 0 0 2px 2%;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 1.5;	/*行間*/
	color: #666;		/*文字色*/
box-shadow: 1px 2px 8px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.1は色が10%出た状態。*/
background: rgba(255,255,255,0.4);	/*背景色。255,255,255は白の事で、0.4は色が40%出た状態。*/
		/*上下、左右へのボックス内の余白*/
border: 1px solid #fff;				/*枠線の幅、線種、色*/
}
/*box2内の日付*/
.list17 span.date {
	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	background: #7d6147;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 12px;		/*文字サイズ*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/
	transform: rotate(-20deg);	/*回転の角度*/
}
/*box2内のp(段落)タグ*/
.list17 p {
	padding: 0 !important;
	height: auto;	/*高さ。*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
	font-size: 14px;	/*文字サイズ*/
	text-align: center;	/*テキストを中央に**/margin-bottom: 15px;
}
/*段落タグにリンクが設定された場合の文字色*/
.list17 p a {
	color: #666;
}
/*figure画像の設定*/
.list17 figure img {
	margin: 0 0 4% 0;	/*上、右、下、左への画像の外側にとるスペース*/
	width: 300px;			/*画像幅*/
	height: 300px;/*画像改良？*/
    object-fit: cover;/*画像改良？*/
	border-radius: 50%;	/*角丸のサイズ*/
}

/*list17内のh4(見出し)タグ*/
.list17 h4 {
	color: #eea882;	/*文字色*/
	height: 1.5em;	/*高さ*/	font-size: 20px;	/*文字サイズ*/
	text-align: center;	/*テキストを中央に*
	overflow: hidden;	/*オーバーした分は非表示に。*/
}
/*box2内のfigure(画像)タグ*/
.list17 figure {
	margin-bottom: 5px;	/*下に空けるスペース*/
}
/*box1、box2のfigure写真共通設定
---------------------------------------------------------------------------*/
.list17 figure a:hover {
	opacity: 0.8;	/*マウスオン時に80%透明度にする*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*figure画像の設定*/
.list17 figure img {
	margin: 0 0 4% 0;	/*上、右、下、左への画像の外側にとるスペース*/
	width: 250px;			/*画像幅*/
	height: 250px;/*画像改良？*/
    object-fit: cover;/*画像改良？*/
	border-radius: 50%;	/*角丸のサイズ*/
}}


/*top横３PC　バナー風24.5ボックスの幅*/
.list-yokonaga1 {
	position: relative;
	width: 30%;		
	float: left;		/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	padding: 3%;		/*ボックス内の余白*/
	padding-bottom: 50px;	/*75下の余白だけ上書き*/
	background: #fff;		/*背景色*/
	border: 1px solid #eeeae2;	/*枠線の幅、線種、色*/
	margin: 0 0 20px 2%;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 1.5;	/*行間*/
	color: #666;		/*文字色*/
}
/*box2内の日付*/
.list-yokonaga1 span.date {
	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	background: #0b4613;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 12px;		/*文字サイズ*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/
	transform: rotate(-20deg);	/*回転の角度*/
}
/*box2内のp(段落)タグ*/
.list-yokonaga1 p {
	padding: 0 !important;
	height: 1.5em;		/*高さ4.5。*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
	font-size: 14px;	/*文字サイズ*/
	text-align: left;	/*文字を左よせ*/
}
/*段落タグにリンクが設定された場合の文字色*/
.list-yokonaga1 p a {
	color: #666;
}
/*box2内のh4(見出し)タグ*/
.list-yokonaga1 h4 {  
	background: rgba(165, 151, 118, 0.4);
	color: #6b6351;	
	height: 1.5em;	/*高さ*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
    top: 45px;	/*70 list2ボックスの上から0pxの場所に配置*//*上にラベル風h4タグ*/
}
/*box2内のfigure(画像)タグ*/
.list-yokonaga1 figure {
	margin-bottom: 5px;	/*下に空けるスペース*/
}
/*ボックス内の写真細長くしたいので追加*/
.list-yokonaga1 figure img {
	height: 120px;		/*画像幅*/	width: 100%;		/*ボタンの幅*/
	object-fit: cover;	/* この一行を追加するだけ！ */	
	margin-bottom: 10px;
	margin: 0 auto;/* 画像を中央にしたくて試行錯誤！ */		
}

/*box2内のbtn1。*/
.list-yokonaga1 p.btn-yokonaga1 {
	height: 120px;	
	position: absolute;
	top: 60px;	/*box2の下から30pxの場所に配置*/
	width: 80%;		/*ボタンの幅*/
}
.list-yokonaga1 p.btn-yokonaga1 a {
	display: block;
	padding: 5px 0;	/*上下、左右へのボタン内の余白*/
}

/*box1、box2のfigure写真共通設定
---------------------------------------------------------------------------*/
.list-yokonaga1 figure a:hover {
	opacity: 0.8;	/*マウスオン時に80%透明度にする*/
}

/*btn1
---------------------------------------------------------------------------*/
p.btn-yokonaga1 a {
	text-decoration: none;display: inline-block;
	border: 1px solid transparent;	/*枠線の幅、線種、色。transparentは透明の事。*/
    background: rgba(165, 151, 118, 0.4);
	color: #fff !important;	/*文字色*/
	border-radius: 3px;		
	padding: 25px 30px;		/*上5下、左右へのボタン内の余白*/
	text-align: center;		/*文字をセンタリング*/
}
/*マウスオン時*/
p.btn-yokonaga1 a:hover {
	border: 1px solid #0b4613;	/*枠線の幅、線種、色。*/
	background: #fff;			/*背景色*/
	color: #0b4613 !important;	/*文字色*/
}

/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
.list-yokonaga1 {
	width: auto;		/*ボックスの幅*/
	float: none;		/*左に回り込み*/
	padding: 3%;		/*余白の上書き*/
	margin: 0 0 20px 0;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 2;	/*行間*/
}
.list-yokonaga1 p {
	height: auto;	/*高さ。*/
	font-size: 100%;		/*文字サイズ*/
	margin-bottom: 15px;
}
.list-yokonaga1 h4 {
	height: auto;	/*高さ*/
}
/*box2内のbtn1*/
.list-yokonaga1 p.btn-yokonaga1 {
	position: static;
	width: 100%;		
}}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*box1とbox2
---------------------------------------------------------------------------*/
/*h4(見出し)タグ*/
.list-yokonaga1 h4 {
	font-size: 16px;	/*文字サイズ*/
}/*box2内のbtn1。本体の設定はこの下のブロックにあります。*/
.list-yokonaga1 p.btn-yokonaga1 {
	height: 120px;	
	position: absolute;
	top: 60px;	/*box2の下から30pxの場所に配置*/
	width: 100%;		/*ボタンの幅*/
}}
/*box2（３カラムボックス）物産１を写真横長に
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-yokonaga {
	position: relative;
	width: 30%;		/*24.5ボックスの幅*/
	float: left;		/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	padding: 3%;		/*ボックス内の余白*/
	padding-bottom: 75px;	/*下の余白だけ上書き*/
	background: #fff4ee;		/*背景色*/
	border: 1px solid #eeeae2;	/*枠線の幅、線種、色*/
	margin: 0 0 20px 2%;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 1.5;	/*行間*/
	color: #666;		/*文字色*/
}
/*box2内の日付*/
.list-yokonaga span.date {
	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	background: #6b6351;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 12px;		/*文字サイズ*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/
	transform: rotate(-20deg);	/*回転の角度*/
}
/*box2内のp(段落)タグ*/
.list-yokonaga p {
	padding: 0 !important;
	height: 1.3em;		/*高さ4.5。*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
	font-size: 14px;	/*文字サイズ*/
	text-align: left;	/*文字を左よせ*/
}
/*段落タグにリンクが設定された場合の文字色*/
.list-yokonaga p a {
	color: #666;
}
/*box2内のh4(見出し)タグ*/
.list-yokonaga h4 {
	color: #6b6351;	/*文字色*/
	height: 1.5em;	/*高さ*/
	overflow: hidden;	/*オーバーした分は非表示に。*/top: -180px;	/* list2ボックスの上から0pxの場所に配置*//*上にラベル風h4タグ*/
}
/*box2内のfigure(画像)タグ*/
.list-yokonaga figure {
	margin-bottom: 5px;	/*下に空けるスペース*/
}
/*ボックス内の写真細長くしたいので追加*/
.list-yokonaga figure img {
	height: 120px;		/*画像幅*/	width: 100%;		/*ボタンの幅*/
	object-fit: cover;	/* この一行を追加するだけ！ */	
	margin-bottom: 10px;
	margin: 0 auto;/* 画像を中央にしたくて試行錯誤！ */		
}

/*box2内のbtn1。本体の設定はこの下のブロックにあります。*/
.list-yokonaga p.btn-yokonaga {
	height: auto;
	position: absolute;
	bottom: 50px;	/*box2の下から30pxの場所に配置*/
	width: 80%;		/*ボタンの幅*/
}


.list-yokonaga p.btn-yokonaga a {
	display: block;
	padding: 5px 0;	/*上下、左右へのボタン内の余白*/
}

/*box1、box2のfigure写真共通設定
---------------------------------------------------------------------------*/
.list-yokonaga figure a:hover {
	opacity: 0.8;	/*マウスオン時に80%透明度にする*/
}

/*btn1
---------------------------------------------------------------------------*/
p.btn-yokonaga a {
	text-decoration: none;display: inline-block;
	border: 1px solid transparent;	/*枠線の幅、線種、色。transparentは透明の事。*/
	background: #6b6351;	/*背景色*/
	color: #fff !important;	/*文字色*/
	border-radius: 3px;		/*角丸のサイズ*/
	padding: 5px 30px;		/*上下、左右へのボタン内の余白*/
	text-align: center;		/*文字をセンタリング*/
}
/*マウスオン時*/
p.btn-yokonaga a:hover {
	border: 1px solid #0b4613;	/*枠線の幅、線種、色。*/
	background: #fff;			/*背景色*/
	color: #0b4613 !important;	/*文字色*/
}

/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){

/*box2（３カラムボックス）
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-yokonaga {
	width: auto;		/*ボックスの幅*/
	float: none;		/*左に回り込み*/
	padding: 3%;		/*余白の上書き*/
	margin: 0 0 20px 0;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 2;	/*行間*/
}
/*box2内のp(段落)タグ*/
.list-yokonaga p {	
	height: 0em;		/* auto高さ4.5。*/
	font-size: 100%;		/*文字サイズ*/
	margin-bottom: 15px;
}
/*box2内のh4(見出し)タグ*/
.list-yokonaga h4 {
	height: auto;	/*高さ*/
}
/*box2内のbtn1*/
.list-yokonaga p.btn-yokonaga {
	position: static;
	width: 99%;		/*ボタンの幅*/
}


}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*box1とbox2
---------------------------------------------------------------------------*/
/*h4(見出し)タグ*/
.list-yokonaga h4 {
	font-size: 16px;	/*文字サイズ*/
}
}

/*list-students-voice料理の声31製品紹介ページの各ブロック31      31     31１カラムように指定してみたきく？生徒さんの声
---------------------------------------------------------------------------*/
.list-students-voice {
	font-size: 14px;		/*文字サイズ*/
	
		border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	
		background: #fff4ee;		/*背景色*/
	position: relative;overflow: hidden;
	margin: 20px 200px;
	padding: 20px;		/*ボックス内の余白。ここを変更する際は、下の「.list a」のpaddingとmarginの数字も合わせる。marginの方はマイナス記号を忘れずに。*/
	border: 2px solid #dcdcdc;	/*枠線の幅、線種、色*/
	
}



.list-students-voice a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 20px;
	margin: -20px;
}
/*マウスオン時の背景色*/
.list-students-voice a:hover {
	background: #fff;
}
/*リンクを貼った際に出る「→」マーク*/
.list-students-voice a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 30px;	/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	background: rgba(255,211,187,0.4);	/*背景グラデーション。0,0,0は黒の事で、0.3は透明度30%の事。*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ。50%にすると円になる。*/
}
/*マウスオン時の「→」マーク*/
.list-students-voice a:hover::before {
	background: #665e4a;	/*背景色*/
}
/*ボックス内のh4タグ設定*/
.list-students-voice h4 {
	padding-left: 10px;	/*枠線とテキストとの間の余白*/
 	border-bottom: 1px solid #CCC;	/*下側の線の幅、線種、色*/
     font-size: 18px;
	margin-bottom: 0.5em;font-weight: bold;
	color: #665e4a;	/*文字色*/
}
/*ボックス内のp(段落)タグ設定*/
.list-students-voice p {
	padding: 0px !important;
	font-size: 13px !important;
	line-height: 1.6;
}

/*ボックス内の画像*/
.list-students-voice img {
	float: left;	/*左に回り込み*/
	
	background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 1%;			/*余白。ここに上の行で設定した背景色が出ます。*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
	margin-right: 10px;

    border-radius: 50%;	/*円形にする指定*/
	width: 20%;			/*画像の幅*/
	


}
/*登録日情報*/
.list-students-voice  .date {
	display: block;
	font-size: 11px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	text-align: left;	/*テキストを右側に*/
}

.option-students-voice {
	text-align: center;display: block;
	width: 300px;		/*幅*/
	position: absolute;
	right: 0px;	/*ボックスに対して右から0pxの場所に配置*/
	top: 0px;	/*ボックスに対して上から0pxの場所に配置*/
	transform: rotate(45deg) translate(93px,-45px);	/*45度回転。右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
	background: #8180c1;	/*背景色*/
	color: #fff;			/*文字色*/
	letter-spacing: 0.1em;	/*文字間隔をほんの少し広くとる*/
	box-shadow: -3px 3px 10px rgba(0,0,0,0.15);	/*ボックスの影。右へ、下へ、ぼかし幅、0.15は色が15%出た状態の事。*/
}


/*画面幅360px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

	/*製品紹介ページの各ブロックbiz27
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	.list-students-voice {
		padding: 10px;
		margin: 20px 20px !important;	/*追加PCでせばめたので*/
	}
	.list-students-voice  a {
		padding: 10px;
		margin: -10px;
	}
	/*ボックス内の画像*/
	.list-students-voice img {
		width: 30%;			/*画像の幅*/
	}
	
	}
/*「Today's Cast」ブロックｔｐ－１１５の6列を１０８のPC4列に変更。SPは横１
	---------------------------------------------------------------------------*/

	.list34 {

		position: relative;overflow: hidden;
		float: left;			/*左に回り込み*/
		font-size: 11px;		/*文字サイズ*/
		line-height: 1.5;		/*行間*/
		width: 23%;				/*ボックスの幅*/
		margin-left: 1.5%;		/*ボックスの左右間に空けるスペース*/
		margin-bottom: 20px;	/*ボックスの上下間に空けるスペース*/

		padding: 4%;	/*ボックス内の余白*/
				-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
		transition: 0.5s;			/*同上*/
	
		
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
		box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
		padding: 2%;	/*ボックス内の余白*/
		border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
	
	
	
	}
	.list34 a {
		text-decoration: none;
		display: block;
		overflow: hidden;
		height: 150px;	/*高さ*/
	}
	/*ボックス内のp(段落)タグ設定*/
	.list34 p {
		padding: 0px !important;
	}
	/*ボックス内のh4タグ設定*/
	.list34 h4 {
		padding: 0px;
		color: #202124;	/*文字色*/
		font-size: 17px;	/*文字１８サイズ*/
	}
	/*h4タグとpタグのマウスオン時の文字色*/
	.list34 a:hover h4,
	.list34 a:hover p {
		color: #FFE900;
	}
	/*マウスオン時のボックス*/
	.list34:hover {
		-webkit-box-shadow: 0px 0px 10px #FFE900;	/*外側に光る影の設定。10pxが広がる距離。*/
		box-shadow: 0px 0px 10px #FFE900;			/*同上*/
	
	}

	/*画面幅800px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:800px){
	
	/*トップページの「Today's Cast」ブロック
	---------------------------------------------------------------------------*/
	/*「Today's Cast」ブロック内の各キャストボックスの設定*/
	.list34 {
		width: 21%;	/*ボックスの幅*/
		padding: 5.2%;	/*ボックス内の余白*/
	}
	.list34 a {
		height: 230px;	/*高さ*/
	}
	}
	

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){


/*
---------------------------------------------------------------------------*/
.list34 {
	width: auto !important;
	float: none !important;
	
	margin: 0 2% 10px 2%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
	padding: 7% !important;
}
.list34 a {
	height: auto !important;
}/*ボックス内のh4タグ設定*/
.list34 h4 {
	
	font-size: 18px;	/*文字ｓｐように追加１８サイズ*/
}
.list34 figure {
	float: left;
	width: 40%;
	margin: 0 5%;
}

}
/*start-1day.html体験の流れ４リスト4列PCGALLERYページtpsimple11をリスト64
---------------------------------------------------------------------------*/
/*各ボックスの設定overflow: hidden;*/
.list64 {	
	position: relative;
	
	float: left;	/*画像を左へ回り込み*/
	width: 23.5%;		/*幅*/
	margin: 0 0 15px 1.5%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
	font-size: 12px;	/*文字サイズ*/
	-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.8);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の小数点が透明度。*/
	box-shadow: 2px 2px 6px rgba(0,0,0,0.8);			/*同上*/
	border-radius: 8px;	/*角丸のサイズ10*/
}
.list64 a {
	padding: 9%;	/*ボックス内の余白*/
	border-radius: 10px;	/*角丸のサイズ*/
	text-decoration: none;
	display: block;
	overflow: hidden;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	opacity: 0.8;		/*透明度の設定。0.8は80%の透明度という意味。*/
}
.list64 a:hover,
.list64 a:active {
	opacity: 1;	/*透明度を100%にする設定*/
}
/*ボックス内の段落タグ設定*/
.list64 p {
	padding: 0px;
}
/*ボックス内の写真設定*/
.list64 figure img {
	width: 100%;		/*写真の幅*/
}
/*ボックス内のh4タグ設定*/
.list64 h4 {
	color: #777684;		/*文字色*/
	 font-size: 12px;	/*文字サイズ*/ 
	margin-left : 10px ;
	margin-right : 10px ;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){


/*GALLERYページ
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list64 {
width: 47%;	/*幅*/
margin: 0 0 10px 2%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
}
.list64 a {
opacity: 1;	/*マウスオンができない端末向けに透明度を通常に戻す設定*/
}
}

/*ヘビロテ中のナビ８リスト4列tpsimple11をリスト３７に
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list37 {
	float: left;	/*画像を左へ回り込み*/
	width: 24%;		/*幅*/
	margin: 0 0 15px 1%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
	font-size: 12px;	/*文字サイズ*/
	-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.8);	/*影の設定。右・下・ぼかし幅・色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の小数点が透明度。*/
	box-shadow: 2px 2px 6px rgba(0,0,0,0.8);			/*同上*/
	border-radius: 8px;	/*角丸のサイズ10*/
}
.list37 a {
	padding: 8%;	/*ボックス内の余白*/
	border-radius: 10px;	/*角丸のサイズ*/
	text-decoration: none;
	display: block;
	overflow: hidden;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	opacity: 0.8;		/*透明度の設定。0.8は80%の透明度という意味。*/
}
.list37 a:hover,
.list37 a:active {
	opacity: 1;	/*透明度を100%にする設定*/
}
/*ボックス内の段落タグ設定*/
.list37 p {
	padding: 0px;
}
/*ボックス内の写真設定*/
.list37 figure img {
	width: 100%;		/*写真の幅*/
}
/*ボックス内のh4タグ設定*/
.list37 h4 {
	color: #777684;		/*文字色*/font-size: 17px;	/*文字サイズ*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){


/*GALLERYページ
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list37 {
width: 47%;	/*幅*/
margin: 0 0 10px 2%;	/*ボックスの外（上、右、下、左）へ空けるスペース*/
}
.list37 a {
opacity: 1;	/*マウスオンができない端末向けに透明度を通常に戻す設定*/
}
}




/*listインスタ風正方形画像ブロック全面写真白帯に変更spanをh4。本体なしsp3pc6ダンおちPC/ｓｐ５
---------------------------------------------------------------------------*/
.list-photo-gallery12 img {
	float: left;		/*左に回り込み*/
	width: 16.65%;			/*幅。４つあるので100%÷4個=25%です。3つに変えた*/
	
	animation-name: img;		/*アニメーションのキーフレームの名前。上の@keyframesの横の名前です。*/
	animation-duration: 0.5S;	/*アニメーション(上のkeyframe)を実行する時間。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
	position: relative;
	overflow: hidden;
	height: 120px;/*高さ100%*/
	object-fit: cover;

}


.list-photo-gallery12 img a {
	display: block;text-decoration: none;
	text-align: center;
	height: 120px;/*高さ100%*/
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒のことで、0.7は色が70%でた状態のこと。*/
}

/*メニュー名。テキストがあるボックス。透明にしておいた、。ずれているし・・サブでで表示？？*/
.list-photo-gallery12 h4 {
	display: block;
	position: absolute;
	left: 0px;		/*メニューに対して、左からの配置場所指定。*/
	bottom: 5%;	/*外したら上についたが左がこい３つかさなりメニューに対して、下からの配置場所指定。*/
	width: 100%;
	background: #ffffff;				/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.1);	/*背景色。0,0,0は黒のことで、0.5は色が50%でた状態のこと。*/
	padding: 30px 0;	/*上下、左右へのボックス内余白*/
}

/*テキストのマウスオン時*/
.list-photo-gallery12 h4 a:hover {
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*マウスオン時の設定*/
.list-photo-gallery12 img a:hover {
	background: transparent;	/*マウスオン時に#mainimgのbackground(#000の黒)を透明にする。暗く見える写真が本来の色で出ます。*/

}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	.list-photo-gallery12 img {
		width: 33.3%;			/*幅。４つあるので100%÷4個=25%です。3つに変えた*/
		height: 120px;/*高さ100%*/
		}}



/*１カラムあたりの設定biz55 3yoko*/
#contents .list-column {
	float: left;
	width: 32%;						/*ブロック幅*/	
    height: 300px;
	margin-bottom: 20px;			/*ブロックの下に空ける余白*/
	background: #ffd3bb;				/*背景色*/
	color: #6b6351;				/*文字色*/
	border-radius: 5px;				/*角丸の指定。ほんの少し角が丸くなります。*/
	overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
}
/*リンクテキストの文字色*/
#contents .list-column a {
	color: #6b6351;
}
/*ボックス内のh4（見出し）タグ*/
#contents .list-column h4 {
	margin-bottom: 20px;	/*下のテキストとの間に空けるスペース*/
	font-size: 140%;		/*文字サイズ*/
	color: #6b6351;	
}
/*ボックス内のp（段落）タグ*/
#contents .list-column p {
	padding: 0;		/*余白のリセット*/
}

/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-column .text {
	padding: 5%;			/*ブロック内の余白*/
	flex: 1 0 auto;
}
/*IEバグ対応*/
#contents .list-column figure {
	min-height: 0%;
}
/*ボックス内のボタン（共通）*/
.btn-column a {
	display: block;
	text-decoration: none;
	border: 1px solid #6b6351;		/*枠線の幅、線種、色*/
	text-align: center;			/*テキストをセンタリング*/
	padding: 10px 30px;			/*上下、左右へのボタン内の余白*/
	margin: 4px auto 0;		/*上40、左右、下へのボックスの外側への余白*/
}
/*ボタンのマウスオン時（共通）*/
.btn-column a:hover {
	background: #fff;	/*背景色*/
	color: #ff887f !important;		/*文字色*/
}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
/*list-column（トップページで使っている３列ブロック）
---------------------------------------------------------------------------*/
/*ボックス内のh4（見出し）タグ*/
#contents .list-column h4 {
	margin-bottom: 0px;
}
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){/*list（worksページで使っている横長ブロック）
---------------------------------------------------------------------------*/
/*ボックス内のボタン（共通）*/
.btn-column a {
	padding: 5px 10px;			/*上下、左右へのボタン内の余白*/
}
/*ボックス内のp（段落）タグ*/
#contents .list-column p {
	font-size: 14px;	/*文字サイズ*/	
}}

/*tp-clinic3  list2（施術メニューページの各症状ブロック）現状とか飾り付けの生徒の
---------------------------------------------------------------------------*/
/*各ブロックの設定*/
/*list12（飾り切り受講生）
---------------------------------------------------------------------------*/
/*各ブロックの設定*/
.list-kazarikiri-voice {
	overflow: hidden;
	margin: 20px 50px !important;
	padding: 2%;	/*ボックス内の余白*/
	border-radius: 3px;
	border: 2px solid #e99383;	/*枠線の幅、線種、色*/
	color: #202124;		/*文字色*/
	background: #fff;		/*背景色*/
}
/*ボックス内の右側のブロック*/
.list-kazarikiri-voice .text {
	margin-left: 31%;	/*左に空けるスペース。下のfigureの幅を考慮して設定。*/
}
/*h4見出し*/
.list-kazarikiri-voice h4 {
	font-size: 30px;	/*文字サイズ*/
	color: #ed8299 ;		/*文字色*/
}
/*figure画像*/
.list-kazarikiri-voice figure {
	width: 30%;		/*幅*/
	float: left;	/*左に回り込み*/
}


/*list1とlist2の段落タグ指定
---------------------------------------------------------------------------*/
.list-kazarikiri-voice p {
	padding: 0 !important;
	font-size: 16px;	/*文字サイズ*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

	/*全体の設定
	---------------------------------------------------------------------------*/
	
/*list2（施術メニューページの各症状ブロック）
---------------------------------------------------------------------------*/
/*各ブロックの設定*/
.list-kazarikiri-voice {
	
	margin: 20px 10px !important;
}/*ボックス内の右側のブロック*/
.list-kazarikiri-voice .text {
	margin-left: 0;
}
/*figure画像*/
.list-kazarikiri-voice figure {
	width: 85%;		/*50幅*/
	float: none;
	display: block;
	margin: 0 auto;
}
/*h4見出し*/
.list-kazarikiri-voice h4 {
	font-size: 20px;	/*文字サイズ*/
}	}
/*飾り切利専用前の《カフェ１１》のリストボックをアレンジ。残す。PCでも横ⅰいちで文字制限なしになっている。
スブロックこれ残すピンクのボックスでも重複している。こちらを読んでるが見出しは青い
---------------------------------------------------------------------------*/
.list-kazarikiri {
		/*height: ;ボックスの高さ*/
	width: 100%;	/*ボックスの幅*/
	border-radius: 3px;	/*角丸のサイズ*/
	-webkit-box-shadow: 0px 2px 5px #bcbcbc;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #bcbcbc;			/*同上*/
	background: #FFF1f1;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#FFF4ee, #fff1f1);	/*グラデーション*/
	background: linear-gradient(#FFF4ee, #fff1f1);			/*同上*/
	padding: 1%;	/*ボックス内の余白*/
	float: left;
	margin: 0px 0.5% 20px;
	border: 1px solid #CCC;
	position: relative;
}
/*ボックス内の段落タグ設定*/
.list-kazarikiri p {
	padding: 0px;
	color: #be8a3a;		/*文字色*/
	
	font-size: 16px;	/*文字サイズ*/
}
/*ボックス内のh4タグ設定*/
.list-kazarikiri h4 {
	color: #6b6351;	/*文字色*/
	text-align: center;
	border-bottom: 2px dotted #6b6351;	/*下線の幅、線種、色*/
	margin-bottom: 5px;
	font-size: 18px;	/*文字サイズ*/
	font-weight: bold;	/*文字サイズ*/
}
/*ボックス内の写真*/
.list-kazarikiri figure img {
	width: 320px;		/*画像幅*/
	object-fit: cover;	/* この一行を追加するだけ！ */	
	margin-bottom: 10px;
	margin: 0 auto;/* 画像を中央にしたくて試行錯誤！ */		
}
/*ふきだしアイコンの位置*/
.list-kazarikiri img.icon0 {
	position: absolute;
	top: -10px;	/*ボックスに対して上から-10pxの位置に配置*/
	right: 0px;	/*ボックスに対して右から0pxの位置に配置*/
}



/*前のリストボックスブロックここまで《メインのリストlist》
---------------------------------------------------------------------------*/
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	/*メインコンテンツ内の「list」カフェ１１のボックス４８０以下
		---------------------------------------------------------------------------*/
		/*menu内のブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list-kazarikiri {
	float: none;
	width: 98%;
	height: auto;
	margin: 0 0.3em;
	margin-bottom: 20px;
	padding: 5%;	/*ボックス内の余白*/
}
	.list-kazarikiri h4 {
		font-size: 20px;	
	}
}
	
	
/*（worksページで使っている横長ブロック）biz55左右になる
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-rl-tate-prof {
	position: relative;
	border-radius: 5px;				/*角丸の指定。ほんの少し角が丸くなります。*/
	overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
	display: flex;
	align-items: center;			/*中のブロックの縦並びの揃え方*/
	background: #000;		/*背景色*/
	color: #fff;			/*文字色*/
	margin: 0 3% 30px;		/*ボックスの下に空けるスペース。上、左右、下への順番。*/
}
/*リンクテキストの文字色*/
.list-rl-tate-prof a {
	color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
.list-rl-tate-prof h4 {
	margin-bottom: 20px;	/*下のテキストとの間に空けるスペース*/
	font-size: 140%;		/*文字サイズ*/
}
/*ボックス内のp（段落）タグ*/
#contents .list-rl-tate-prof p {
	padding: 0;		/*余白のリセット*/
}
/*ボックス内のfigure画像*/
.list-rl-tate-prof figure {
	width: 50%;		/*画像の幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-rl-tate-prof .text-rl-tate-prof {
	width: 40%;		/*ブロックの幅。下のpaddingの5%とも連動するので変更の際は注意して下さい。*/
	padding: 2% 5%;	/*上下、左右へのブロック内の余白*/
}

/*偶数目のブロックの設定（画像とテキストブロックが左右交互に入れ替わる設定です。全部同じむきがよければこのブロックを削除します。）*/
.list-rl-tate-prof:nth-of-type(even) .text-rl-tate-prof {
	order: 1;
}

/*装飾文字の設定（共通）*/
.list-rl-tate-prof::before {
	font-size: 18vw;
	line-height: 1;
	position: absolute;
	color: rgba(255,255,255,0.15);	/*文字色。255,255,255は白のことで、0.15は色が15%出た状態のこと。*/
	font-family: 'Tangerine', cursive;	/*冒頭で読み込んだGoogle Fontsを適用する指定*/
}
/*奇数番目のブロックの文字の配置場所指定*/
.list-rl-tate-prof:nth-of-type(odd)::before {
	left: -60px;
	top: -40px;
}
/*偶数番目のブロックの文字の配置場所指定*/
.list-rl-tate-prof:nth-of-type(even)::before {
	right: 0px;
	top: -40px;
}
/*１つ目ブロックに表示させるテキスト*/
.list-rl-tate-prof:nth-of-type(1)::before {
	content: "Works1";
}
/*２つ目ブロックに表示させるテキスト*/
.list-rl-tate-prof:nth-of-type(2)::before {
	content: "Works2";
}
/*３つ目ブロックに表示させるテキスト*/
.list-rl-tate-prof:nth-of-type(3)::before {
	content: "Works3";
}

/*ボックス内のボタン（共通）*/
.btn-rl-tate-prof a {
	display: block;
	text-decoration: none;
	border: 1px solid #fff;		/*枠線の幅、線種、色*/
	text-align: center;			/*テキストをセンタリング*/
	padding: 10px 30px;			/*上下、左右へのボタン内の余白*/
	margin: 40px auto 0;		/*上、左右、下へのボックスの外側への余白*/
}
/*ボタンのマウスオン時（共通）*/
.btn-rl-tate-prof a:hover {
	background: #fff;	/*背景色*/
	color: #000 !important;		/*文字色*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*list（worksページで使っている横長ブロック）
---------------------------------------------------------------------------*/
/*ボックス内のボタン（共通）*/
.btn-rl-tate-prof a {
	padding: 5px 10px;			/*上下、左右へのボタン内の余白*/
}


/*list（商品メニュー用のブロック）cafe16縦になる
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-rl-tate-prof  {
	display: block;
	padding: 20px;
}
/*ボックス内のh4（見出し）タグ*/
.list-rl-tate-prof  h4 {
	font-size: 18px;
	margin-bottom: 0px;
}
/*ボックス内のfigure画像*/
.list-rl-tate-prof  figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-rl-tate-prof  .text-rl-tate-prof  {
	float: none;
	width: auto;
	margin: 0;
}	}
	


	/*tp_biz55 右左list（worksページで使っている横長ブロック）
		---------------------------------------------------------------------------*/
		#contents .list-migi-hidari {
			position: relative;
			border-radius: 5px;				/*角丸の指定。ほんの少し角が丸くなります。*/
			overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
			display: flex;
			align-items: center;			/*中のブロックの縦並びの揃え方*/
			background: #000;		/*背景色*/
			color: #fff;			/*文字色*/
			margin: 0 3% 30px;		/*ボックスの下に空けるスペース。上、左右、下への順番。*/
		}
		#contents .list-migi-hidari a {
			color: #fff;
		}
		#contents .list-migi-hidari h4 {
			margin-bottom: 20px;	/*下のテキストとの間に空けるスペース*/
			font-size: 140%;		/*文字サイズ*/
		}
		#contents .list-migi-hidari p {
			padding: 0;		/*余白のリセット*/
		}
		/*ボックス内のfigure画像*/
		#contents .list-migi-hidari figure {
			width: 50%;		/*画像の幅*/
		}
		/*「class="text"」を指定したブロック。テキストブロック。*/
		#contents .list-migi-hidari .text-migi-hidari {
			width: 40%;		/*ブロックの幅。下のpaddingの5%とも連動するので変更の際は注意して下さい。*/
			padding: 2% 5%;	/*上下、左右へのブロック内の余白*/
		}
		
		/*偶数目のブロックの設定（画像とテキストブロックが左右交互に入れ替わる設定です。全部同じむきがよければこのブロックを削除します。）*/
		#contents .list-migi-hidari:nth-of-type(even) .text-migi-hidari {
			order: 1;
		}
		
		/*装飾文字の設定（共通）*/
		#contents .list-migi-hidari::before {
			font-size: 18vw;
			line-height: 1;
			position: absolute;
			color: rgba(255,255,255,0.15);	/*文字色。255,255,255は白のことで、0.15は色が15%出た状態のこと。*/
			font-family: 'Tangerine', cursive;	/*冒頭で読み込んだGoogle Fontsを適用する指定*/
		}
		/*奇数番目のブロックの文字の配置場所指定*/
		#contents .list-migi-hidari:nth-of-type(odd)::before {
			left: -60px;
			top: -40px;
		}
		/*偶数番目のブロックの文字の配置場所指定*/
		#contents .list-migi-hidari:nth-of-type(even)::before {
			right: 0px;
			top: -40px;
		}
		/*１つ目ブロックに表示させるテキスト*/
		#contents .list-migi-hidari:nth-of-type(1)::before {
			content: "Works1";
		}
		/*２つ目ブロックに表示させるテキスト*/
		#contents .list-migi-hidari:nth-of-type(2)::before {
			content: "Works2";
		}
		/*３つ目ブロックに表示させるテキスト*/
		#contents .list-migi-hidari:nth-of-type(3)::before {
			content: "Works3";
		}
		
		/*ボックス内のボタン（共通）*/
		.btn-migi-hidari a {
			display: block;
			text-decoration: none;
			border: 1px solid #fff;		/*枠線の幅、線種、色*/
			text-align: center;			/*テキストをセンタリング*/
			padding: 10px 30px;			/*上下、左右へのボタン内の余白*/
			margin: 40px auto 0;		/*上、左右、下へのボックスの外側への余白*/
		}
		/*ボタンのマウスオン時（共通）*/
		.btn-migi-hidari a:hover {
			background: #fff;	/*背景色*/
			color: #000 !important;		/*文字色*/
		}/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.btn-migi-hidari a {
	padding: 5px 10px;			/*上下、左右へのボタン内の余白*/
}}


/*list（worksページで使っている横長ブロック）biz55左右になる
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list-rl-tate {
	position: relative;
	border-radius: 5px;				/*角丸の指定。ほんの少し角が丸くなります。*/
	overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
	display: flex;
	align-items: center;			/*中のブロックの縦並びの揃え方*/
	background: #000;		/*背景色*/
	color: #fff;			/*文字色*/
	margin: 0 3% 30px;		/*ボックスの下に空けるスペース。上、左右、下への順番。*/
}
/*リンクテキストの文字色*/
.list-rl-tate a {
	color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
.list-rl-tate h4 {
	margin-bottom: 20px;	/*下のテキストとの間に空けるスペース*/
	font-size: 140%;		/*文字サイズ*/
}
/*ボックス内のp（段落）タグ*/
.list-rl-tate p {
	padding: 0;		/*余白のリセット*/
}
/*ボックス内のfigure画像*/
.list-rl-tate figure {
	width: 50%;		/*画像の幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-rl-tate .text-rl-tate {
	width: 40%;		/*ブロックの幅。下のpaddingの5%とも連動するので変更の際は注意して下さい。*/
	padding: 2% 5%;	/*上下、左右へのブロック内の余白*/
}

/*偶数目のブロックの設定（画像とテキストブロックが左右交互に入れ替わる設定です。全部同じむきがよければこのブロックを削除します。）*/
.list-rl-tate:nth-of-type(even) .text-rl-tate {
	order: 1;
}

/*装飾文字の設定（共通）*/
.list-rl-tate::before {
	font-size: 18vw;
	line-height: 1;
	position: absolute;
	color: rgba(255,255,255,0.15);	/*文字色。255,255,255は白のことで、0.15は色が15%出た状態のこと。*/
	font-family: 'Tangerine', cursive;	/*冒頭で読み込んだGoogle Fontsを適用する指定*/
}
/*奇数番目のブロックの文字の配置場所指定*/
.list-rl-tate:nth-of-type(odd)::before {
	left: -60px;
	top: -40px;
}
/*偶数番目のブロックの文字の配置場所指定*/
.list-rl-tate:nth-of-type(even)::before {
	right: 0px;
	top: -40px;
}
/*１つ目ブロックに表示させるテキスト*/
.list-rl-tate:nth-of-type(1)::before {
	content: "Works1";
}
/*２つ目ブロックに表示させるテキスト*/
.list-rl-tate:nth-of-type(2)::before {
	content: "Works2";
}
/*３つ目ブロックに表示させるテキスト*/
.list-rl-tate:nth-of-type(3)::before {
	content: "Works3";
}
.btn-rl-tate a {
	display: block;
	text-decoration: none;
	border: 1px solid #fff;		/*枠線の幅、線種、色*/
	text-align: center;			/*テキストをセンタリング*/
	padding: 10px 30px;			/*上下、左右へのボタン内の余白*/
	margin: 40px auto 0;		/*上、左右、下へのボックスの外側への余白*/
}
/*ボタンのマウスオン時（共通）*/
.btn-rl-tate a:hover {
	background: #fff;	/*背景色*/
	color: #000 !important;		/*文字色*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.btn-rl-tate a {
	padding: 5px 10px;			/*上下、左右へのボタン内の余白*/
}


/*list（商品メニュー用のブロック）cafe16縦になる
---------------------------------------------------------------------------*/
.list-rl-tate  {
	display: block;
	padding: 20px;
}
/*ボックス内のh4（見出し）タグ*/
.list-rl-tate  h4 {
	font-size: 18px;
	margin-bottom: 0px;
}
/*ボックス内のfigure画像*/
.list-rl-tate  figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-rl-tate  .text-rl-tate  {
	float: none;
	width: auto;
	margin: 0;
}	}
	


/*レシピ-r-indexのナビ風に上にラベル風SP１PC横２に変える。---------------------------------------------------------*/
/*メインコンテンツ内のbreeder4から。-------------------*/
/*ボックス１個あたりの設定overflow: hidden;*/
.list-r-indexbig {
	position: relative;

  width: 30%;		/*幅*/
  height: 420px;
 margin-left: 2%;	/*2.4ボックス同士に空ける左右間のスペース*/
	
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/

	
	
	margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
	margin-top: 20px;	/*ボックスの下に空ける上下間のスペース*/
	background: #fff;	/*背景色*/
}

.list-r-indexbig a {
	display: block;text-decoration: none;overflow: hidden;
}	

/*h4タグ*/
.list-r-indexbig h4 {
  position: absolute;
 left: 8%;
	top: 30px;	/*-18px list2ボックスの上から0pxの場所に配置*//*上にラベル風h4タグ*/
	width: 84%;	/*幅100*/
	height: 50px;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.6);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #6b6351;	/*文字色*/
	text-align: center;	/*内容をセンタリング*/ border: 4px solid #6b6351;
	font-weight: 600;	/*文字サイズ*/
    font-size: 17px;	/*文字サイズ*/ 
	z-index: 20;font-size: 26px;	/*文字サイズ*/
   }
   
  
  /*写真追加試行錯誤*/
  .list-r-indexbig figure img {
	width: 99%;		
	height: 420px;
	background: #eea882;	/*�w�i�F*/
	object-fit: cover;
	}
 	
/*写真のマウスオン時*/
.list-r-indexbig a:hover figure img {
	opacity: 0.7;	/*透明度*/ 
     object-fit: cover;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*メインコンテンツ内の「list32」ボックスbreeder4
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-r-indexbig {
		float: none;
		width: auto;	
	margin: 3%;	/*ボックス同士に空ける左右間のスペース*/margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}/*h4タグ*/
.list-r-indexbig h4 {
	position: absolute;
   left: 8%;
	  top: 44px;	/* list2ボックスの上から0pxの場所に配置*//*上にラベル風h4タグ*/
	  width: 84%;	/*幅100*/
	  height: 50px;
	  background: #fff;	/*背景色（古いブラウザ用）*/
	  background: rgba(255,255,255,0.9);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
	  color: #6b6351;	/*文字色*/
	  text-align: center;	/*内容をセンタリング*/
	  font-size: 24px;	/*文字サイズ*/ 
	  border: 4px solid #6b6351;
	  font-weight: 600;	/*文字サイズ*/
	  z-index: 20;
	 }}	/*終わり*/


/*breede4をPC1SP１に変更これリストに見えないのでH４が下にでるので改良するh4に色つけるとか。つけるとか。
---------------------------------------------------------------------------*/
.list-photo-gallery {
	overflow: hidden;
	position: relative;
	width: 85%;		/*幅22で４だったので半分に*/
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	/*margin-left: %;	2.4ボックス同士に空ける左右間のスペース*/
	font-size: 12px;	/*文字サイズ*/
	margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
   
} 
.list-photo-gallery img {
	height: 240px;/*高さ100%*/
	object-fit: cover;

}

.list-photo-gallery a {
	display: block;text-decoration: none;overflow: hidden;
}
/*h4タグ*/
.list-photo-gallery h4 {
	height: 1.5em;	/*高さ。レイアウトが崩れるのを防ぐ為、２行目以降は非表示になります。*/

	display: block;
	position: absolute;
	left: 0px;		/*メニューに対して、左からの配置場所指定。*/
	bottom: -15%;	/*外したら上についたが左がこい３つかさなりメニューに対して、下からの配置場所指定。*/
	width: 100%;
	background: #ffffff;				/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.1);	/*背景色。0,0,0は黒のことで、0.5は色が50%でた状態のこと。*/
	padding: 0px 0;	/*30上下、左右へのボックス内余白*/
}


/*写真のマウスオン時*/
.list-photo-gallery a:hover figure img {
	opacity: 0.7;	/*透明度*/
  
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*メインコンテンツ内の「list2」ボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-photo-gallery {
	width: 100%;			/*幅45で2だったので倍*/
	margin: 0%;	/*3ボックス同士に空ける左右間のスペース*/
}	}

/*ボックスの設定*/
#contents .list-about {
		/*background: #fff4ee;背景色*/
	position: relative;overflow: hidden;
	display: flex;
	align-items: center;
	margin: 0 0px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/

    padding: 0px;
}
/*ボックス内のh4（見出し）タグｈ３type７*/
#contents .list-about h4 {
	clear: both;
  color: #eea882;	/* 吹き出し文字色 */
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/
	border-bottom: 1px solid #eea882;	/*下線の幅、線種、色*/
	padding: 0 20px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents .list-about h4 a {
	color: #000;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
#contents .list-about p {
    font-size: 14px;	/*文字サイズ*/
	padding: 0;
}
/*ボックス内のfigure画像/*/
#contents .list-about figure img  {
	float: none;	/*left左に回り込み*/
	margin: 5px auto;		/*ボックス間の余白*
	width: 250px;			/*画像幅*/
	height: 250px;/*画像改良？*/
    object-fit: cover;/*画像改良？*/
	border-radius: 50%;	/*角丸のサイズ*/margin: 10px;
}


/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-about .text {
	float: right;	/*右に回り込み*/
	width: 80%;		/*幅*/
	margin: 10%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/

/*list（商品メニュー用のブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list-about {
	display: block;
	padding: 10px;
}
/*ボックス内のh4（見出し）タグ*/
/*ボックス内のfigure画像*/
#contents .list-about figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-about .text {
	float: none;
	width: auto;
	margin: 0;
}

}


/*listカフェ１６（レシピの特徴のブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list-rundown {
	background: #fff4ee;	/*align-items: center;背景色左寄せしたい*/
	position: relative;overflow: hidden;
	display: flex;
	
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;
    padding: 10px;
}
/*ボックス内のh4（見出し）タグｈ３type７*/
#contents .list-rundown h4 {
	clear: both;
  color: #eea882;	/* 吹き出し文字色 */
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/
	border-bottom: 1px solid #eea882;	/*下線の幅、線種、色*/
	padding: 0 20px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents .list-rundown h4 a {
	color: #000;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
#contents .list-rundown p {
    font-size: 14px;	/*文字サイズ*/float: left;
	padding: 2px 0;
}
/*ボックス内のfigure画像*/
#contents .list-rundown figure img  {
	float: left;	/*左に回り込み*/
	width: 250px;			/*画像幅*/
	height: 250px;/*画像改良？*/
    object-fit: cover;/*画像改良？*/
	border-radius: 50%;	/*角丸のサイズ*/margin: 10px;
}


/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-rundown .text {
	float: right;	/*右に回り込み*/
	width: 80%;		/*幅*/
	margin: 10%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/

/*list（商品メニュー用のブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list-rundown {
	display: block;
	padding: 10px;
}
/*ボックス内のh4（見出し）タグ*/
/*ボックス内のfigure画像*/
#contents .list-rundown figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-rundown .text {
	float: none;
	width: auto;
	margin: 0;
}/*ボックス内のp（段落）タグ*/
#contents .list-rundown p {
 text-align: center;	/*文字を中央に追加*/  
}}


/*	クリニック３list1（トップページの「こんなお悩みありませんか？」のブロックずっと３つに変更）
---------------------------------------------------------------------------*/
/*各ブロックの設定*/
.list-yield12 {
	overflow: hidden;
	width:  30%;		/*ブロック幅２０*/
	float: left;	/*左に回り込み*/
	margin-left: 1%;	/*ボックスの外側(左側)に空けるスペース*/
	padding: 2%;		/*ボックス内の余白*/
}
/*h4見出し*/
.list-yield12 h4 {
	font-size: 11px;	/*３０文字サイズ*/font-weight: 600;
	text-align: center;	/*文字を中央に*/
	color: #6c5f49;		/*文字色*/
}
/*h4見出し*/
.list-yield12  h4 span {
	font-size: 12px;	/*３０文字サイズ*/display: block;
	text-align: center;	/*文字を中央に*/
	color: #6c5f49;		/*文字色*/
}
.list-yield12 figure {
	display: block;
	border-radius: 50%;	/*角丸のサイズ。50%にすると円形になる。*/
	background: #fff;	/*背景色*/
	padding: 2px;		/*余白*/float: left;	/*左に回り込み*/
	
}
.list-yield12 figure img {
	border-radius: 50%;	/*角丸のサイズ。50%にすると円形になる。*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  .list-yield12  {
	  position: relative;overflow: hidden;	
      width:  70%;		/*ブロック幅２０*/
	 /* background: #ffffff;	�w�i�F*/
	  margin-bottom: 2px;	/*ボックスの外（下）に空けるスペース*/float: none;
	  width: auto;
  }
  .list-yield12 a {
	  display: inline-block;text-decoration: none;overflow: hidden;
	  padding: 20px;	/*ボックス内の余白*/
	  border: 1px solid #ccc;	/*枠線の幅、線種、色*/
  }
  /*マウスオン時*/
  .list-yield12 a:hover {
	  border: 1px solid #7348a8;	/*枠線の幅、線種、色*/
	  background: #fae5d5;		/*背景色*/
  }
  
  
  /*写真*/
  .list-yield12 figure img {
	  width: 30%;			/*写真の幅*/
	  height: 15px;
	  background: #eea882;	/*�w�i�F*/
	  object-fit: cover;
	  float: left;		/*左に回り込み*/
	  border-radius: 50%;	/*円形にくり抜く指定。通常通りに表示させたいならこの１行削除。*/
  }
  /*h4タグ*/
  .list-yield12 h4 {
	  margin-left: 28%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
	  color: #202124;		/*文字色*/
	  font-weight: bold;
	  text-align: center;
	  font-size: 10px;	/*文字サイズ*/
	  border-bottom: dashed 1px #e99383;	/*枠線の幅、線種、色*/
	  margin-bottom: 10px;	/*下に空けるスペース*/
  }
  /*段落(p)タグ*/
  .list-yield12 h4 span {
	  padding: 0 !important;  font-size: 9px;	/*文字サイズ*/
	  display: inline-block;
	  margin-left: 28%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
  } }
/*クリニック３list1（トップページの「こんなお悩みありませんか？」のブロックずっと３つに変更）
---------------------------------------------------------------------------*/
/*各ブロックの設定*/
.list-yield2 {
	overflow: hidden;
	width:  31%;		/*ブロック幅２０*/
	float: left;	/*左に回り込み*/
	margin-left: 1%;	/*ボックスの外側(左側)に空けるスペース*/
	padding: 0%;		/*ボックス内の余白*/
}
/*h4見出し*/
.list-yield2 h4 {
	font-size: 11px;	/*３０文字サイズ*/
	text-align: center;	/*文字を中央に*/
	color: #6c5f49;		/*文字色*/
}
/*h4見出し*/
.list-yield2 p {
	font-size: 12px;	/*３０文字サイズ*/
	text-align: center;	/*文字を中央に*/
	color: #6c5f49;		/*文字色*/
}

/*aタグにclass="btn"をつけた場合。トップページの「こんなお悩みありませんか？」ブロック内のボタンで使用。
---------------------------------------------------------------------------*/
a.btn-yield2 {
	display: block;text-decoration: none;
	text-align: center;	/*テキストを中央に*/
	background: #6c5f49;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#6c5f49, #4d4434);/*背景グラデーション*/
	color: #fff;	/*文字色*/
	box-shadow: 2px 3px 2px rgba(0,0,0,0.2);	/*影。右へ、下へ、ぼかす範囲。0,0,0は黒の事で0.2は透明度20%の事*/
	border-radius: 3px;	/*角丸のサイズ*/
	padding: 10px 0;	/*上下、左右への余白*/
	font-size: 13px;	/*文字サイズ*/
}
/*マウスオン時*/
a:hover.btn-yield2 {
	background: #fff;	/*背景色*/
	color: #6c5f49;		/*文字色*/
}



/*クリニック３list1（トップページの「こんなお悩みありませんか？」のブロックずっと３つに変更）
---------------------------------------------------------------------------*/
/*各ブロックの設定*/
.list-yield1 {
	overflow: hidden;
	width:  30%;		/*ブロック幅２０*/
	float: left;	/*左に回り込み*/
	margin-left: 1%;	/*ボックスの外側(左側)に空けるスペース*/
	padding: 2%;		/*ボックス内の余白*/
}
/*h4見出し*/
.list-yield1 h4 {
	font-size: 11px;	/*３０文字サイズ*/
	text-align: center;	/*文字を中央に*/
	color: #6c5f49;		/*文字色*/
}
/*h4見出し*/
.list-yield1 p {
	font-size: 11px;	/*３０文字サイズ*/
	text-align: center;	/*文字を中央に*/
	color: #6c5f49;		/*文字色*/
}
/*figure画像*/
.list-yield1 figure {
	border-radius: 50%;	/*角丸のサイズ。50%にすると円形になる。*/
	background: #fff;	/*背景色*/
	padding: 20px;		/* float: left;余白*/
   
	display: inline-block;
	
}
.list-yield1 figure img {
	border-radius: 50%;	/*角丸のサイズ。50%にすると円形になる。*/
}





/*レシピ-r-indexのナビ風に上にラベル風PC３SP２。メインコンテンツ内の横２個ならびにしたい「list4」ボックスplusにも同じものを記載----------------------------------------------------------*/
/*メインコンテンツ内のbreeder4から。「list4の変形」	
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定overflow: hidden;*/
.list-r-index {
	
	position: relative;
  width: 30%;		/*幅*/
  height: 420px;
 margin-left: 2%;	/*2.4ボックス同士に空ける左右間のスペース*/
	
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
font-size: 14px;	/*文字サイズ*/
	margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
	margin-top: 20px;	/*ボックスの下に空ける上下間のスペース*/
	background: #fff;	/*背景色*/
}

.list-r-index a {
	display: block;text-decoration: none;overflow: hidden;
}	

/*h4タグ*/
.list-r-index h4 {
  position: absolute;
 left: 8%;
	top: -18px;	/* list2ボックスの上から0pxの場所に配置*//*上にラベル風h4タグ*/
	width: 84%;	
	height: 50px;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.9);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #6b6351;	/*文字色*/
	text-align: center;	/*内容をセンタリング*/ border: 4px solid #e99383;
	font-weight: 600;	
	z-index: 20;
   }
   
  
  /*写真追加試行錯誤*/
  .list-r-index figure img {
	width: 99%;			/*写真の幅*/
	height: 220px;
	background: #eea882;	/*�w�i�F*/
	object-fit: cover;
	}
 	
/*写真のマウスオン時*/
.list-r-index a:hover figure img {
	opacity: 0.7;	/*透明度*/ 
     object-fit: cover;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*メインコンテンツ内の「list32」ボックスbreeder4
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-r-index {
	width: 45%;			/*幅*/
	margin-left: 3%;	/*ボックス同士に空ける左右間のスペース*/
}}	/*終わり*/

	

/*メインコンテンツ内の「list6」レシピ下でハッシュタグうながすボックスtpブリーダー４ここからlist6-------------*//*メインコンテンツ内の「list６」ボックス
---------------------------------------------------------------------------*/
.list-instagram-share {
	position: relative;overflow: hidden;
	background: #ffffff;	/*�w�i�F*/
	margin-bottom: 20px;	/*ボックスの外（下）に空けるスペース*/
}
.list-instagram-share a {
	display: block;text-decoration: none;overflow: hidden;
	padding: 20px;	/*ボックス内の余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}
/*マウスオン時*/
.list-instagram-share a:hover {
	border: 1px solid #7348a8;	/*枠線の幅、線種、色*/
	background: #fae5d5;		/*背景色*/
}
.list-instagram-share figure img {
	width: 30%;			/*写真の幅*/
	height: 150px;
	background: #eea882;	/*�w�i�F*/
    object-fit: cover;
	float: left;		/*左に回り込み*/
	border-radius: 50%;	/*円形にくり抜く指定。通常通りに表示させたいならこの１行削除。*/
}
/*h4タグ*/
.list-instagram-share h4 {
	margin-left: 28%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
	color: #202124;		/*文字色*/
	font-weight: bold;
	text-align: center;
	font-size: 14px;	/*文字サイズ*/
	border-bottom: dashed 1px #e99383;	/*枠線の幅、線種、色*/
	margin-bottom: 10px;	/*下に空けるスペース*/
}
/*段落(p)タグ*/
.list-instagram-share p {
	padding: 0 !important;  font-size: 12px;	/*文字サイズ*/
	margin-left: 28%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
    /*メインコンテンツ内の「list6」ボックス480以下
    ---------------------------------------------------------------------------*/
   .list-instagram-share a {
		margin: 10px 2% 10px;		/*上0、左右、下20へのボックスの外に空けるスペース*/
        padding: 10px;	/*ボックス内の余白*/
    }
    /*h4タグ*/
    .list-instagram-share h4 {
        font-size: 20px;	/*文字サイズ*/
        
    } /*段落(p)タグ*/
	.list-instagram-share p {
		padding: 0 !important;  
        font-size: 8px !important;	/*文字サイズ*/
		margin-left: 32%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
	}
	
	/*写真*/
	.list-instagram-share figure img {
		margin: 10px 2% 10px;		/*追加上0、左右、下20へのボックスの外に空けるスペース*/
		width: 30%;			/*写真の幅*/
		height: 100px;
		object-fit: cover;
		/*	float: left;	左に回り込み*/
		border-radius: 50%;	/*円形にくり抜く指定。通常通りに表示させたいならこの１行削除。*/
	}	}
	






	/*バナー的に使うCast用の各ブロックtp-113アレンジずっと横長２/*写真大きくメニュー
		---------------------------------------------------------------------------*/
		.list43 {
			position: relative;overflow: hidden;
			float: left;			/*左に回り込み*/
			font-size: 11px;		/*文字サイズ*/
			line-height: 1.5;		/*行間*/
			width: 48%;				/*47ボックスの幅２３*/
			margin-left: 1%;		/*1.5ボックスの左右間に空けるスペース*/
			margin-bottom: 20px;	/*ボックスの上下間に空けるスペース*/
		}
		.list43  a {
			text-decoration: none;display: block;overflow: hidden;
			padding: 1px;	/*ボックス内の余白10*/
			border: 1px solid #fff4ee;	/*枠線の幅、線種、色*/
			box-shadow: 0px 0px 50px #fff4ee inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
		}
		.list43  figure {
			width: 40%;
			float: left;
			margin-right: 10px;
		}
		/*マウスオン時。内側の影を消す設定。*/
		.list43  a:hover {
			box-shadow: none;	/*ボックスの影を消す指定*/
			border: 1px solid #ffc321;	/*枠線の幅、線種、色*/
		}
		/*ボックス内のh4タグ設定*/
		.list43  h4 {
			line-height: 1.5;	/*行間。1.5が１行分になります。*/
				font-size: 14px;	/*16文字サイズ*/
				font-weight: bold;	/*文字サイズ*/
				color: #202124;		
					/*padding-right: ;背景画像の分だけ余白300pxをとる*/
				height: 3.0em;		/*高さ1行。上の1.5が基準なので、1(行)を掛け算し、1.5em。emは文字サイズの単位。*/
			overflow: hidden;	/*上記を超える場合の文字を消す設定*/
		}
		/*ボックス内のp(段落)タグ設定10px左右追加*/
		.list43  p {
			padding: 0 10px !important;
			line-height: 0.5;	/*行間。1.5が１行分になります。*/
			height: 0.5em;		/*高さ3行。上の1.5が基準なので、3(行)を掛け算し、4.5em。emは文字サイズの単位。*/
			overflow: hidden;	/*上記を超える場合の文字を消す設定*/ font-size: 8px;	/*文字サイズ*/
		}
		
		


/*額縁用の各ブロックtp115横ｐｃ４ｓｐ２
---------------------------------------------------------------------------*/

.list74 {
	position: relative;
	overflow: hidden;
	font-size: 11px;	/*文字サイズ*/
	line-height: 1.5;
	width: 22%;		/*ボックスの幅*/
	padding: 4%;	/*ボックス内の余白*/
	float: left;
text-align: center;	/*内容をセンタリング*/
margin-left: 2.4%;	/*ボックス同士に空ける左右間のスペース*/
	margin-bottom: 1px;/*ボックス15の余白*/
	background: url(https://creme-cremes.com/components/images/framekokuban-min.png) no-repeat center center/100% 100%;	/*背景画像の読み込み*/
	border: 1px solid #ffffff;	/*枠線の幅、線種、色。古いブラウザだと背景画像は出ず、このラインだけ出ます。*/
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
}
.list74 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	height: 120px;	/*高さ*/
}
/*写真のマウスオン時*/
.list74 a:hover figure img {
	opacity: 0.7;	/*透明度*/
}
/*ボックス内のp(段落)タグ設定*/
.list74 p {
    color: #ffffff;	/*文字色*/
	padding: 0px !important;
}
.list74 h4 {
	padding: 0px;
	color: #e99383;
}
.list74 a:hover h4,
.list74 a:hover p {
	color: #FFE900;
}

.list74:hover {
	-webkit-box-shadow: 0px 0px 10px #FFE900;	/*外側に光る影の設定。10pxが広がる距離。*/
	box-shadow: 0px 0px 10px #FFE900;			/*同上*/

}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*各キャストボックスの設定tp115::480ika*/
.list74 {
	
	height: 150px;	
	float: lefr !important;
	
	width: 50%!important;
	margin-left: 0 !important;
	background: url(https://creme-cremes.com/components/images/framekokuban-min.png) no-repeat center center/100% 100%;	/*横長画像の読み込み*/
	padding: 10% !important;
}
.list74 a {
	height: auto !important;
}
.list74 figure {
	float: center;
	width: 80%;
	margin: 0 5%;
}}




/*Cast用の各ブロックtp113　SP1PC4
---------------------------------------------------------------------------*/
/*各キャストボックスの設定*/
.list73 {
	position: relative;overflow: hidden;
	float: left;			/*左に回り込み*/
	font-size: 11px;		/*文字サイズ*/
	line-height: 1.5;		/*行間*/
	width: 23%;				/*ボックスの幅*/
	margin-left: 1.5%;		/*ボックスの左右間に空けるスペース*/
	margin-bottom: 20px;	/*ボックスの上下間に空けるスペース*/
}
.list73 a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 10px;	/*ボックス内の余白*/
	border: 1px solid ;	/*#f06aa6枠線の幅、線種、色*ボックスの影#e70067。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
	box-shadow: 0px 0px 50px inset;	}
.list73 a:hover {
	box-shadow: none;	/*ボックスの影を消す指定*/
	border: 1px solid #ffc321;	/*枠線の幅、線種、色*/
}
/*ボックス内のh4タグ設定*/
.list73 h4 {font-size: 11px;		/*文字サイズ*/
	line-height: 1.5;	/*行間。1.5が１行分になります。*/
	height:4.5em;		/*高さ1行。上の1.5が基準なので、1(行)を掛け算し、1.5em。emは文字サイズの単位。*/
	overflow: hidden;	/*上記を超える場合の文字を消す設定*/
}
/*ボックス内のp(段落)タグ設定*/
.list73 p {
	padding: 0px !important;
	line-height: 1.5;	/*行間。1.5が１行分になります。*/
	height:  4.5em;		/*高さ3行。上の1.5が基準なので、3(行)を掛け算し、4.5em。emは文字サイズの単位。*/
	overflow: hidden;	/*上記を超える場合の文字を消す設定*/
}



/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

/*Cast用の各ブロック
---------------------------------------------------------------------------*/
/*各キャストボックスの設定*/
.list73 {
	float: none;
	width: auto;
	margin-left: 0;
	font-size: 100%;
	line-height: normal;
}
.list73 figure {
	width: 25%;
	float: left;
	margin-right: 10px;
}}



	/*72R,72Lの順で使う。表が2列3段あり比較に使う。tpbiz４０ｓｐも横のまま。
	---------------------------------------------------------------------------*/
	/*ボックスの設定*/
	.list72R {
		margin-bottom: 15px;	/*ボックス間のスペース*/
		position: relative;
		overflow: hidden;
		float: left;	/*左に回り込み*/
		width: 86%;		/*幅46*/
		padding: 2.5%;	/*ボックス内の余白*/
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
		background: #fff;	/*背景色*/
		-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.1が透明度。*/
		box-shadow: 1px 1px 2px rgba(0,0,0,0.1);			/*同上*/
	}
	.list72R a {
		background: #fff;	/*背景色*/
		display: block;
		text-decoration: none;
		overflow: hidden;
		margin: -2.5%;
		padding: 2.5%;
	}
	/*ボックス内の段落タグ設定*/
	.list72R p {
		padding: 0px;
		margin-left: 34%;	/*左の写真とのバランスをとって設定*/
	}
	/*ボックス内の写真設定*/
	.list72R figure img {
		float: left;		/*画像を左へ回り込み*/
		width: 45%;			/*写真の幅*/
		height: auto;		/*写真の高さ*/
		margin-right: 4%;
	}
	/*ボックス内のh4タグ設定*/
	.list72R h4 {
		font-size: 14px;	/*文字サイズ*/
		color: #cf2480;		/*文字色*/
		margin-left: 34%;	/*左の写真とのバランスをとって設定*/
	}
	/*ボックス内の矢印マーク設定*/
	.list72R a::before {
		content: "＜";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
		background: #e6e6e6;	/*背景色*/
		color: #ccc;			/*文字色*/
		font-size: 20px;		/*文字サイズ*/
		line-height: 1;
		width: 65px;			/*幅。下の15pxと合計した数字がline-height(80px)になるようにする。*/
		padding-right: 15px;		/*左側へのボックス内余白。上の65pxと合計した数字がline-height(80px)になるようにする。*/
		line-height: 80px;		/*行間。上の２行の合計値と合うように。*/
		position: absolute;
		left: -40px;	/*ボックスの右から-40pxの場所に配置*/
		top: 32%;		/*ボックスの上から32%の場所に配置*/
		border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
	}
	/*マウスオン時*/
	.list72R a:hover::before {
		background: #474346;	/*背景色*/
		color: #fff;			/*文字色*/
	}
	
	
	

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*メインコンテンツ内のボックス（list）設定
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定float: none;*/
.list72R {
	
	width: auto;
	margin-right: 0;
	height: auto;
}
.list72R a {
	height: auto;
}
	
	}

/*list21の左右反転版。リスト２０、２１の順でペアで使うtpbiz４０ｓｐも横のまま。ブレイクポイントなしで。
---------------------------------------------------------------------------*/
/*ボックスの設定*/
	/*21L,21の順で使う。記事下のリンク用。tpbiz４０ｓｐも横のまま。ブレイクポイントなしで。
	---------------------------------------------------------------------------*/
	/*ボックスの設定*/
	.list72L {
		margin-bottom: 15px;	/*ボックス間のスペース*/
		position: relative;
		overflow: hidden;
		float: right;	/*migi回り込み*/
		width: 86%;		/*幅46*/
		padding: 2.5%;	/*ボックス内の余白*/
		background: #fff;	/*背景色*/
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
		-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.1が透明度。*/
		box-shadow: 1px 1px 2px rgba(0,0,0,0.1);			/*同上*/
	}
	.list72L a {
		background: #fff;	/*背景色*/
		display: block;
		text-decoration: none;
		overflow: hidden;
		margin: -2.5%;
		padding: 2.5%;
	}
	/*ボックス内の段落タグ設定*/
	.list72L p {
		padding: 0px;
		margin-right: 34%;	/*左の写真とのバランスをとって設定*/
	}
	/*ボックス内の写真設定*/
	.list72L figure img {
		float: right;		/*画像を左へ回り込み*/
		width: 45%;			/*写真の幅*/
		height: auto;		/*写真の高さ*/
		margin-left: 4%;
	}
	/*ボックス内のh4タグ設定*/
	.list72L h4 {
		font-size: 14px;	/*文字サイズ*/
		color: #cf2480;		/*文字色*/
		margin-right: 34%;	/*左の写真とのバランスをとって設定*/
	}
	/*きかず。上にでる。ボックス内の矢印マーク設定*/
	.list72L a::before {
		content: "＞";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
		background: #e6e6e6;	/*背景色*/
		color: #ccc;			/*文字色*/
		font-size: 20px;		/*文字サイズ*/
		line-height: 1;
		width: 65px;			/*幅。下の15pxと合計した数字がline-height(80px)になるようにする。*/
		padding-left: 15px;		/*左側へのボックス内余白。上の65pxと合計した数字がline-height(80px)になるようにする。*/
		line-height: 80px;		/*行間。上の２行の合計値と合うように。*/
		position: absolute;
		right: -40px;	/*ボックスの右から-40pxの場所に配置*/
		top: 32%;		/*ボックスの上から32%の場所に配置*/
		border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
	}
	/*マウスオン時*/
	.list72L a:hover::before {
		background: #474346;	/*背景色*/
		color: #fff;			/*文字色*/
	}
	

	
	
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*メインコンテンツ内のボックス（list）設定
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定float: none*/
.list72L {
	width: auto;
	margin-left: 0;
	height: auto;
}
.list72L a {
	height: auto;
}}





/*list10R 10L（）
---------------------------------------------------------------------------*/
/*list（商品メニュー用のブロック）tpカフェ１６設定テキスト分はいる
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.list10L {
	position: relative;overflow: hidden;
	display: flex;
	align-items: center;  
	padding: 10px;	/*ボックス内の余白*/
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;
}
/*ボックス内のh4（見出し）タグ*/
.list10L h4 {

	line-height: 1.5;
	margin-bottom: 20px;
	color: #000;	/*文字色*/ 
	font-size: 20px;
    font-weight: bold;
}
.list10L h4 a {
	color: #000;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
.list10L p {
	padding: 0;	font-size: 12px;	/*文字サイズ*/
}
/*ボックス内のfigure画像*/
.list10L figure {	
	float: left;	/*左に回り込み*/
	width: 50%;		/*幅*/
	}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list10L .text {
	float: right;	/*右に回り込み*/
	width: 40%;		/*幅*/
	margin: 5%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list10L {
	display: block;
	padding: 20px;
}
.list10L h4 {
	font-size: 18px;
	margin-bottom: 0px;
}

.list10L figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}

.list10L .text {
	float: none;
	width: auto;
	margin: 0;
}}


/*tpcafe16list（レシピでの1カラムCTA商品メニュー用のブロック）全部みれる
---------------------------------------------------------------------------*/

/*list（商品メニュー用のブロック）tpカフェ１６設定テキスト分はいる
---------------------------------------------------------------------------*/
/*ボックスの設定overflow: hidden;*/
.list-LP {
	position: relative;
	display: flex;
	align-items: center;  
	padding: 10px;	/*ボックス内の余白*/
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;
}

.list-LP h4 {

	line-height: 1.5;
	margin-bottom: 20px;
	color: #000;	/*文字色*/ 
	font-size: 20px;
    font-weight: bold;
}
.list-LP h4 a {
	color: #000;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
.list-LP p {
	padding: 0;	font-size: 12px;	/*文字サイズ*/
}
.list-LP figure {	
	float: left;	/*左に回り込み*/
	width: 50%;		/*幅*/
	}
.list-LP .text {
	float: right;	/*右に回り込み*/
	width: 40%;		/*幅*/
	margin: 5%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-LP {
	display: block;
	padding: 20px;
}

.list-LP h4 {
	font-size: 18px;
	margin-bottom: 0px;
}
.list-LP figure {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.list-LP .text {
	float: none;
	width: auto;
	margin: 0;
}

	}

/*tpスクール３ボックス（list）設定ｐｃ３start-1day.html外枠なし
	---------------------------------------------------------------------------*/
	.list62 {
		float: left;	/*左に回り込み*/
		width: 31%;		/*幅*/
		overflow: hidden;	/*ボックスから飛び出たらスクロールを出す設定auto。飛び出た部分を非表示にしたいならautoでなくにする。*/
		background: fff4ee;	/*#000背景色*/
		color: #202124;		/*文字色*/
		margin-left: 1.5%;	/*ボックス同士の左右間の余白*/
		margin-bottom: 30px;	/*ボックス同士の上下間の余白*/
		border-radius: 6px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
		height: 650px;			/*高さ（下の「.list a」の高さと揃える）*/
		line-height: 1.4;
		position: relative;
	
	}
	.list62 a {
		display: block;
		overflow: auto;
		text-decoration: none;
		height: 520px;	/*高さ（上の「.list」の高さと揃える）*/
		color: #202124;	/*文字色*/
	}
	.list62 a:hover {
		background: #b71600;	/*マウスオン時の背景色*/
		color: #fff;			/*マウスオン時の文字色*/
	}
	/*ボックスにリンク指定がされた場合に出る「→」マーク　（※list2も共通）*/
	
	.list62 a::before {
		content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
		position: absolute;
		right: 20px;	/*ボックスの右から20pxの場所に配置*/
		top: 20px;		/*ボックスの上から20pxの場所に配置*/
		background: #000;	/*背景色（古いブラウザ用）*/
		background: rgba(0,0,0,0.5);	/*rgb指定での背景色。「0,0,0」は黒の事で「0.5」が透明度50%の事。*/
		color: #fff;	/*文字色*/
		border: 1px solid #fff;	/*枠線の幅、線種、色*/
		border-radius: 4px;		/*角丸のサイズ*/
		width: 30px;		/*幅*/
		line-height: 30px;	/*高さ*/
		text-align: center;
		-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
		transition: 0.5s;			/*同上*/
	}
	/*マウスオン時の「→」マーク　（※list2も共通）*/
	
	.list62 a:hover::before {
		background: #000;	/*背景色*/
		width: 40px;		/*幅*/
		line-height: 40px;	/*高さ*/
	}
	/*ボックス内の画像設定*/
	.list62 .img {
		width: 100%;	/*画像の幅*/
		height: 260px;	/*画像の高さ*/
		padding-bottom: 10px;	/*画像下に空ける余白*/
	}
	/*ボックス内のh4（見出し）タグ設定　（※list2も共通）*/
	
	.list62 h4 {
		padding-left: 20px;
		
				/*文字サイズ*/font-weight: bold;	/*デフォルトの太字を標準にする設定*/
	
		font-family: 'ヒラギノ明朝 ProN W3','游明朝','YuMincho','Hiragino Mincho ProN','HG明朝E','ＭＳＰ明朝','ＭＳ明朝','serif';
		font-size: 18px;
		color: #555;	/*文字色*/
	}
	.list62 p {
		 margin-top : 10px ;
		margin-left : 2px ;
		margin-right : 2px ;
		margin-bottom : 20px ;
		font-size: 14px;
	}
	/*画面幅800px以下の設定
	-----------------------------------------------------------------------------------------*/
	@media screen and (max-width:800px){
			.list62 {
			float: none;
			width: auto;
			margin-left: 0;
			height: auto;
		}
		.list62 a {
			height: auto;
		}	}

/*料理の特徴ポイントcafe13のコンパクトをｓｐ横２PC横４
（２列並びの料理特徴ポイントボックス）
---------------------------------------------------------------------------*/
.list14 {
	margin-bottom: 15px;	/*ボックスの下に空ける余白*/
	position: relative;
	overflow: hidden;	
	background: rgba(255,255,255,0.8);	/*背景色。255,255,255は白のことで、0.1は色が10%出た状態のこと。*/
	padding: 1.5%;		/*３．５ボックス内の余白*/
	color: #333;		/*文字色*/

		width: 23%;		/*compactタイプの幅*/
		height: 350px;	/*compactタイプの高さ*/
		float: left;	/*ボックスを左に回り込み*/
		margin-left: 1.3%;/*ボックス間の余白*/

}
.list14 a {
	text-decoration: none;display: block;overflow: hidden;
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	padding: 1%;	/*ボックス内の余白３*/

	height: 350px;	/*高さ*/
	border: none;
	padding: 0;
}
.list14 a:hover {
	border: 1px solid #999;	/*マウスオン時の枠線の幅、線種、色*/
}
/*ボックス内のh4タグ設定*/
.list14 h4 {
	background: url(https://creme-cremes.com/components/images/images/mark1.png) no-repeat left 5px/15px;	/*王冠マークの読み込み。最後の15pxはサイズ指定。マークを入れ替えた場合に上下がずれるなら5pxの数字をcenterか他の近い数字に変更してみる。*/
	padding-left: 18px;	/*王冠マークに文字が重ならないように幅を確保*/
	margin-left: 0;	/*画像とのバランスをとって設定（※横長タイプ用）*/
	line-height: 1.2;/*追加して行間狭くしたい*/
	color: #202124;		/*文字色*/font-weight: bold;
	font-size: 16px;	/*１１compactタイプの文字サイズ*/
}
/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list14 h4 span {
	display: block;
	font-size: 9px;	/*文字サイズ*/
	color: #c30000;		/*文字色*/
}
.list14 p {
	padding: 0px;
	
	margin-left: 0;
	font-size: 13px;	/*１１compactタイプの文字サイズ*/
	line-height: 1.4;
	margin-bottom: 5px;
}
.list14 a:hover figure img {
	opacity: 0.8;	
}
.list14 figure img {
	float: none;
	margin: 0;
	margin-bottom: 20px !important;
	border: none;
	width: auto;
	padding: 0;
}

/*マウスオン時のボックス内の写真設定（※compactタイプへの追加設定）と、ボックスにoption2スタイルが指定された場合の画像の設定。*/
.list14.option2 a:hover figure img,
.list14.option2 figure img {
	opacity: 0.3 !important;
}
/*登録日情報*/
.list14 .date {
	display: block;
	font-size: 11px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	text-align: right;	/*テキストを右側に*/
}



.list14 p {
	font-size: 12px;	/*文字サイズ*/line-height: 1.2;	/*行間を狭くする*/padding: 0.5%;		/*ボックス内の余白*/
}
/*画面幅480px以下の設定横２ｓｐにアレンンジ
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list14 {
	overflow: hidden;	height: 250px;	/*compactタイプの高さ*/
}

/*各ボックスの設定*/
.list14  {width: 48%;   
}
.list14 h4 {
	background: url(https://creme-cremes.com/components/images/mark1.png) no-repeat left 5px/10px;
	padding-left: 12px;
	margin-left: 0;font-size: 18px !important;line-height: 1.2;/*追加して行間狭くしたい*/
}
.list14 p {
	margin-left: 0;padding: 0.5%;	
	font-size: 11px !important;
}
/*ボックス内の画像。※imgタグにclass="img"をつけた場合。きいてない*/
.list14 .img {
	border-radius: 50%;	/*角丸のサイズ*/
	float: none;
	width: 100% !important;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}}


/*おしゃれレッスンでつくりませんかで使用  <p></p>あると楕円の写真にかぶるtp物産１写真photoを３列ｓｐで１
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list68 {
	position: relative;
	float: left;	/*左に回り込み*/
	width: 30%;	/*幅３３．３*/
	
}
.list68 a:hover img {
	opacity: 0.8;	/*マウスオン時に80%の透明度にする*/
}
.list68 img {
	border-radius: 50%;	/*角丸のサイズ*/
	}
/*photoボックス内の段落(p)タグ*/
.list68 h4 {
	padding: 5px 0 !important;	/*上下、左右への段落タグ内の余白*/
	position: absolute;
	bottom: 0px;	/*photoボックスの下から0pxの場所に配置*/
	width: 100%;	/*幅*/
	background: #111;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は50%色がついた状態のこと*/
	color: #fff;	/*文字色*/
	text-align: center;	/*文字をセンタリング*/
	font-size: 80%;
}
/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
/*box2（３カラムボックス）
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list68 {
	width: auto;		/*ボックスの幅*/
	float: none;		/*左に回り込み*/
	padding: 3%;		/*余白の上書き*/
	margin: 0 0 20px 0;		/*上、右、下、左へのボックスの外に空けるスペース*/
	border-radius: 50%;	/*角丸のサイズ*/
	line-height: 2;	/*行間*/
}
/*box2内のp(段落)タグ*/
.list68 h4 {
	height: auto;	/*高さ。*/
	font-size: 100%;		/*文字サイズ*/
	margin-bottom: 15px;
}
/*box2内のh4(見出し)タグ*/
.list68  {
	height: auto;	/*高さ*/
}}



/*tp-cute1  listブロック24節気寒熱食材
---------------------------------------------------------------------------*/
.list71 {
	overflow: hidden;
	font-size: 90%;		/*文字サイズ*/
	margin-bottom: 30px;	/*ブロックの下に空けるスペース*/
}

.list71.thumb {
	width: 23%;			/*画像幅*/
	margin: 0 1% 30px;
	padding-top: 1%;
	float: left;		/*画像を左に回り込み*/
	text-align: center;
}
/*画像の設定*/
.list71 img {
	border-radius: 50%;	/*円形にする指定*/
	width: 20%;			/*画像の幅*/
	float: left;		/*画像を左に回り込み*/
	margin-right: 3%;	/*画像の右に空けるスペース*/
}
/*画像の設定（サムネイルタイプへの追加指定）*/
.list71.thumb img {
	margin: 0;
	float: none;
	width: 60%;		/*画像の幅*/
}
/*マウスオン事*/
.list71 a:hover img {
	transition: 0.5s;
	opacity: 0.7;	/*透明度。70%色が出た状態。*/
}
/*マウスオン事（サムネイルタイプへの追加指定）*/
.list71.thumb a:hover img {
	transform: scale(1.05);	/*ほんの少し画像を大きくする指定*/
}
/*h4タグ*/
.list71 h4 {
	font-size: 140%;	/*文字サイズ*/
}
/*h4タグ（サムネイルタイプへの追加指定）*/
.list71.thumb h4 {
	font-size: 100%;	/*文字サイズ*/
}
/*p(段落)タグ*/
.list71 p {
	padding: 0 !important;
	line-height: 2;
}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
/*listブロック
---------------------------------------------------------------------------*/
/*画像の設定（サムネイルタイプへの追加指定）*/
.list71.thumb img {
	width: 90%;		/*画像の幅*/
}

}



	



/*コンテンツ内のボックス（list）設定biz42。。の解決法solutionボックス（list）設定横３を２に変える。
---------------------------------------------------------------------------*/
.list-solution {
	float: left;	/*左に回り込み*/
	width: 45%;		/*幅30*/
	overflow: auto;/*高さこれでバーがでる???*/
	background: #fff;	/*背景色*/
	margin-left: 2.5%;	/*ボックス同士の左右間の余白*/
	margin-bottom: 20px;	/*ボックス同士の上下間の余白*/
	padding: 15px 15px;
	border: 1px solid #e99383;	/*枠線の幅、線種、色*/
	border-radius: 6px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	
	height: 380px;			/*高さ280でバー出たので伸ばす（下の「.list a」の高さと揃える）*/
	line-height: 1.4;
	position: relative;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 0px 0px 3px rgba(0,0,0,0.3);			/*同上*/
}

.list-solution h4 {
	padding-left: 5px;
	padding-bottom: 15px;
	margin: 20px;
	text-align: center;	/*テキストを中央に*/
	font-size: 21px;	/*文字サイズ*/
}

.list-solution h4 span {
	display: block;
	margin: 20px;
	font-size: 26px;	/*文字サイズ*/
	color: #e99383;		/*文字色*/
	letter-spacing: 0.3em;	/*文字間隔を広くとる設定*/
}
.list-solution p {
	
	font-size: 12px;	/*文字サイズを少し小さく*/
	text-align: center;	/*テキストを中央に*/
}




/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	/*コンテンツ内のボックス（list）設定
	---------------------------------------------------------------------------*/
	/*ボックス１個あたりの設定*/
	
	/*コンテンツ内
	---------------------------------------------------------------------------*/
	/*ボックス１個あたりの設定*/
	.list-solution {
		float: none;
		width: auto;		/*幅*/
		margin: 20px 20px;
		height: auto;		/*高さこれでバーがでる*/
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		margin: 0px 3px 15px;
	}
	
	/*ボックス内の画像設定*/
	.list-solution .img {
		float: none;
		width: 100%;
		height: 40px;	/*画像の高さ*/
		margin-right: 0px;
		padding-bottom: 0;
	}
	/*ボックス内のp（段落）タグ設定*/
	.list-solution p {
		margin-left: 0%;
	}
}
	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
	.list-solution {
		margin: 20px 20px;
	
	}
	
	.list-solution .img {
		float: none;
		width: 100%;
		height: 40px;	/*画像の高さ*/
		margin: 10px 30px;
	}
	/*ボックス内のp（段落）タグ設定*/
	.list-solution p {
		margin-left: 0;
	}	
		}
	


/*講座内容のボックスlist47
---------------------------------------------------------------------------*/
.list8 {
	position: relative;
	overflow: hidden;
	padding: 40px;		/*ボックス内の余白*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	margin: 50px 0 70px 0;		
	box-shadow: 2px 2px 10px rgba(0,0,0,0.15);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.15は透明度15%の事。*/
	background: #ffffff;
}
/*ボックス内のh4タグ設定*/
.list8 h4 {
	font-size: 26px;	/*文字サイズ*/
	color: #e99383;		/*文字色*/
}
/*ボックス内のh4タグ設定*/
.list8 h4 span{
	font-size: 16px;	/*文字サイズ*/
	color: #e99383;		/*文字色*/
}

.list8 h4 a {
	color: #de0707;	/*リンクテキストの文字色*/
}
.list8 p {
	padding: 0px 0px 10px !important;	/*上、左右、下への余白*/
}


/*講座の紹介のボックス
---------------------------------------------------------------------------*/
/*アイコン共通*/
.list8 .icon {
	display: inline-block;
	margin: 2px;
	font-size: 12px;	/*文字サイズ*/
	padding: 0 5px;		/*ボックス内の余白*/
	border-radius: 4px;	/*角丸のサイズ*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	background: #eee;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#fff, #eee);	/*グラデーション*/
}

/*画面幅４８０px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list8 {	
	width: auto;		/*ボックスの幅*/
	float: none;		/*左に回り込み*/
	padding: 3%;		/*余白の上書き*/
	margin: 0 2% 20px 2%;		/*上、右、下、左へのボックスの外に空けるスペース*/
	
}
.list8 h4 {
		font-size: 24px;
	}	}



/*tpカフェ１５丸い写真商品VOICEに
---------------------------------------------------------------------------*/

.list70 {
	position: relative;
	overflow: hidden;
	float: left;	/*左に回り込み*/
	width: 20%;		/*ボックスの幅*/
	margin: 0 2.5% 20px;	/*上、左右、下へのボックス内の余白*/
	height: 370px;			/*ボックスの高さ。*/
}
.list70 figure img {
	display: block;
	border-radius: 50%;		/*円形にする設定。30pxなどにすると角丸になります。この行を削除すればそのままの画像が表示されます。*/
	margin-bottom: 10px;	/*画像の下に空けるスペース*/
}
/*写真の右上にある金額*/
.list70 figure span {
	display: block;text-align: center;
	width: 60px;	/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする設定*/
	font-size: 12px;	/*文字サイズ*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒の事で0.7は透明度70%の事。*/
	position: absolute;
	right: 5%;	/*listブロックに対して右から5%の場所に配置*/
	top: 2%;	/*listブロックに対して上から2%の場所に配置*/
}
/*ボックス内のh4見出し*/
.list70 h4 {
	text-align: center;	/*文字をセンタリング*/
	border-bottom: 2px dotted #fff;	/*下線の幅、線種、色*/
	margin-bottom: 10px;	/*見出しの下に空けるスペース*/
	font-size: 20px;		/*文字サイズ*/
}
/*ボックス内の段落タグ*/
.list70 p {
	padding: 0!important;
	line-height: 1.5;	/*行間を少し狭くする*/
}



/*画面の「幅」が「820px以下」の場合の設定。この環境でメインメニューを折りたたむ。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:820px){

/*商品メニューページの設定（menu.html）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list70 {
	width: 40%;			/*ボックスの幅*/
	margin: 0 5% 20px;	/*上、左右、下へのボックス内の余白*/
	height: 400px;		/*ボックスの高さ。*/
}


}


/*画面の「幅」が「420px以下」の場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:420px){

/*商品メニューページの設定（menu.html）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list70 {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	overflow: hidden;
}
/*写真の設定*/
.list70 figure img {
	float: left;	/*左に回り込み*/
	width: 30%;		/*写真の幅*/
}
/*写真の右上にある金額*/
.list70 figure span {
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	font-size: 10px;	/*文字サイズ*/
	left: 0%;	/*listブロックに対して左から0%の場所に配置*/
	top: 0%;	/*listブロックに対して上から0%の場所に配置*/
}
/*ボックス内のh4見出し*/
.list70 h4, .list70 p {
	text-align: left;	/*文字を左寄せ*/
	margin-left: 35%;	/*左に空けるスペース。上の写真の幅をみて調整して下さい。*/
}


}




.onphoto {
/*h2タグ*/
	clear: both;margin-bottom: 20px;
	padding: 10px 20px;	/*上下、左右への見出し内の余白*/
	border-bottom: 5px solid #e99383;		/*下線の幅、線種、色の設定*/
	background: #fff url("https://creme-cremes.com/components/images/framekokuban-min.png") no-repeat center center;	/*背景色、背景画像の読み込み、リピートしない＆中央＆上下中央に表示*/
	color: #fff;		/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	text-align: center;
} 

/*/*写真の上にテキスト１つ１列設定bussan1-brawn写真を１つ並べたレイアウトここまで/*設定*//*アイキャッチ用-------------*/
	


/*tpcafe9の.list5sp横長ＰＣ横３イメージポップ右肩リスト５
---------------------------------------------------------------------------*/
.list10 {
	height: 450px;	/*ボックスの高さ*/
	width: 98%;	/*ボックスの幅*/
	border-radius: 3px;	/*角丸のサイズ*/
	-webkit-box-shadow: 0px 2px 5px #bcbcbc;	/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
	box-shadow: 0px 2px 5px #bcbcbc;			/*同上*/
	background: #FFF;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-linear-gradient(#fbf9f1, #fbf9f1);	/*グラデーション*/
	background: linear-gradient(#fbf9f1, #fbf9f1);			/*同上*/
	padding: 2%;	/*ボックス内の余白*/
	float: center;
	margin: 0px 2% 20px;
	border: 1px solid #CCC;
	position: relative;
}
/*ボックス内の段落タグ設定*/
.list10 p {
	padding: 0px;
	color: #be8a3a;		/*文字色*/
	font-size: 16px;	/*文字サイズ*/
}
/*ボックス内のh4タグ設定*/
.list10 h4 {
	color: #e99383;	/*文字色*/	
	font-size: 18px;	/*文字サイズ*/
	border-bottom: 2px dotted #e99383;	/*下線の幅、線種、色*/
	margin-bottom: 15px;
}
/*ボックス内の写真*/
.list10 figure img {
	margin-bottom: 10px;
	width: 320px;		/*画像幅*/
	object-fit: cover; /* この一行を追加するだけ！ */
}

/*ふきだしアイコンの位置*/
.list10 img.icon {
	position: absolute;
	top: -10px;	/*ボックスに対して上から-10pxの位置に配置*/
	right: 0px;	/*ボックスに対して右から0pxの位置に配置*/
}


.list10 {
	width: 98%;	/*ボックスの幅*/
}

/*各ボックスの設定*/
.list10 {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	margin-bottom: 20px;
	padding: 5%;	/*ボックス内の余白*/
}

/*box-media（３カラムボックス）
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.box-media {
	background: #fff4ee;		/*背景色*/
	color: #65513f;		/*laduree文字色*/
	padding: 0.2em 0.5em;
	margin: 2em 1em;
	box-shadow: 0px 0px 0px 10px #fae5d5;
	border: dashed 2px #e99383;
	border-radius: 8px;
  }
.box-media .genre {
	position: absolute;
	right: -20px;	/*右から-10pxの場所に配置*/
	top: -20px;		/*上から-10pxの場所に配置*/
	background: #e99383;	/*背景色*/
	color: #fff;			/*文字色*/
	font-weight: 700;
	font-size: 18px;		/*文字サイズ*/
	width: 75px;			/*幅*/
	height: 75px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/
	padding: 14.5px 0;transform: rotate(-20deg);	/*回転の角度*/
}
.box-media .year {
font-size: 12px;
text-transform: uppercase;
}



.box-media .category {
position: absolute;
top: 34px;
left: 10px;
padding: 5px 15px;
height: 34px;
text-transform: uppercase;
color: #ffffff;
border-radius: 3px 3px 0 0;
background: #e99383;
}

/*box2内のp(段落)タグ*/
.box-media p {
	padding: 0 !important;
	
	font-size: 14px;	/*文字サイズ*/
	text-align: left;	/*文字を左よせ*/

	margin: 0; 
	padding: 0;
  }

/*段落タグにリンクが設定された場合の文字色*/
.box-media p a {
	color: #666;
	font-size: 16px;	/*文字サイズ*/
}
/*box2内のh4(見出し)タグ*/
.box-media h4 {
	color: #7d6147;	/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	
}

.box-media .genre {
margin: 0 16px 0 0;
}



/*メインコンテンツ内の「list11」ボックス
---------------------------------------------------------------------------*/
.box-marudai {
	position: relative;
	width: 100%;		/*ボックスの幅*/
	float: center;		/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	padding: 3%;		/*ボックス内の余白*/
	padding-bottom: 75px;	/*下の余白だけ上書き*/
	background: #fff;		/*背景色*/
	border: 1px solid #eeeae2;	/*枠線の幅、線種、色*/
	margin: 0 0 20px 0;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 1.5;	/*行間*/
	color: #666;		/*文字色*/
}
/*box2内の日付*/
.box-marudai span.date {
	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	background: #e99383;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 12px;		/*文字サイズ*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/
	transform: rotate(-20deg);	/*回転の角度*/
}
.box-marudai p {
	padding: 0 !important;
	height: 4.5em;		/*高さ。*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
	font-size: 14px;	/*文字サイズ*/
	text-align: left;	/*文字を左よせ*/
}
/*段落タグにリンクが設定された場合の文字色*/
.box-marudai p a {
	color: #666;
}
/*box2内のh4(見出し)タグ*/
.box-marudai h4 {
	color: #7d6147;	/*文字色*/
	font-size: 26px;	/*文字サイズ*/
	height: 1.5em;	/*高さ*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
}

/*box2内のfigure(画像)タグ*/
.box-marudai figure img {	
    display: block;
    width: 300px;			/*幅*/
	height: 300px;		/*高さ*/
	left: 50%;	/*左から-10pxの場所に配置*/
	top: 50%;		/*上から-10pxの場所に配置*/
	border-radius: 50%;		/*円形にする*/
	margin-bottom: 5px;	/*下に空けるスペース*/
}/*写真の設定*/




/*box2内のbtn1。本体の設定はこの下のブロックにあります。*/
.box-marudai p.btn-marudai {
	height: auto;
	position: absolute;
	bottom: 30px;	/*box2の下から30pxの場所に配置*/
	width: 80%;		/*ボタンの幅*/
}
.box-marudai p.btn-marudai a {
	display: block;
	padding: 5px 0;	/*上下、左右へのボタン内の余白*/
}

/*box1、box2のfigure写真共通設定
---------------------------------------------------------------------------*/
.box-marudai figure a:hover {
	opacity: 0.8;	/*マウスオン時に80%透明度にする*/
}

/*btn1
---------------------------------------------------------------------------*/
p.btn-marudai a {
	text-decoration: none;display: inline-block;
	border: 1px solid transparent;	/*枠線の幅、線種、色。transparentは透明の事。*/
	background: #e99383;	/*背景色*/
	color: #fff !important;	/*文字色*/
	border-radius: 3px;		/*角丸のサイズ*/
	padding: 5px 30px;		/*上下、左右へのボタン内の余白*/
	text-align: center;		/*文字をセンタリング*/
}
/*マウスオン時*/
p.btn-marudai a:hover {
	border: 1px solid #7d6147;	/*枠線の幅、線種、色。*/
	background: #fff;			/*背景色*/
	color: #7d6147 !important;	/*文字色*/
}

/*トップページの上部の３つのふきだしメニュー
---------------------------------------------------------------------------*/

.list-link {
	overflow: hidden;
	background: #fff;	/*背景色*/
	margin:20px 20px;	/*ボックス同士の上下間の余白*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 6px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	position: relative;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 0px 0px 3px rgba(0,0,0,0.3);			/*同上*/
}
.list-link a {
	overflow: hidden;
	display: block;
	text-decoration: none;
}
/*ボックス１個あたりの設定（※３カラム時）*/
.list-link .c3 {
	float: left;	/*左に回り込み*/
	width: 31%;		/*幅*/
	margin-left: 1.5%;	/*ボックス同士の左右間の余白*/
	height: 230px;			/*高さ（下の「.list.c3 a」の高さと揃える）*/
	line-height: 1.4;
}
.list-link.c3 a {
	height: 230px;	/*高さ（上の「.list.c3」の高さと揃える）*/
}
/*マウスオン時設定*/
.list-link a:hover {
	background: #000;	/*マウスオン時の背景色*/
	color: #fff;		/*マウスオン時の文字色*/
}
/*ボックスにリンク指定がされた場合に出る「→」マーク*/
.list-link a::before {
	content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
	position: absolute;
	right: 20px;	/*ボックスの右から20pxの場所に配置*/
	top: 20px;		/*ボックスの上から20pxの場所に配置*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);	/*rgb指定での背景色。「0,0,0」は黒の事で「0.5」が透明度50%の事。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 4px;		/*角丸のサイズ*/
	width: 30px;		/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
}
.list-link a:hover::before {
	background: #000;	/*マウスオン時の「→」マークの背景色*/
}
/*ボックス内の画像設定*/
.list-link .img {
	width: 30%;	/*画像の幅*/
	float: left;
	margin-right: 10px;
}
/*ボックス内の画像設定（※３カラム時）*/
.list-link.c3 .img {
	width: 100%;	/*画像の幅*/
}
/*ボックス内のh4（見出し）タグ設定*/
.list-link h4 {
	padding: 5px 10px;
	font-size: 16px;	/*文字サイズ*/
}
/*ボックス内のp（段落）タグ設定*/
.list-link p {
	padding: 0px 10px;
	font-size: 12px;	/*文字サイズを少し小さく*/
}



/*Galleryページのライトボックスサムネイル480ika
---------------------------------------------------------------------------*/
/*写真全体を囲むブロック*/
.photo-block {
	padding: 0 0 20px;	/*上、左右、下のボックス内の余白*/
}


 

/*写真の上にテキスト３つ２列設定bussan1-brawn
---------------------------------------------------------------------------*/
/*写真を３列に並べたレイアウト
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.photo3 {
	position: relative;
	float: left;	/*左に回り込み*/
	width: 33.3%;	/*幅*/
}
.photo3 a:hover img {
	opacity: 0.8;	/*マウスオン時に80%の透明度にする*/
}
/*photoボックス内の段落(p)タグ*/
.photo3 p {
	padding: 5px 0 !important;	/*上下、左右への段落タグ内の余白*/
	position: absolute;
	bottom: 0px;	/*photoボックスの下から0pxの場所に配置*/
	width: 100%;	/*幅*/
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.7);	/*背景色。0,0,0は黒の事で0.5は50%色がついた状態のこと*/
	color: #be8a3a;	/*文字色*/
	text-align: center;	/*文字をセンタリング*/
	font-size: 80%;
} 




/*	画像と文字を重ねるアレンジ設定saruwaka
---------------------------------------------------------------------------*/
/* 全体の枠 */
.example-onphoto {
  position: relative;
  }

/* 重ねる文字 */
.example-onphoto p {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
   margin:0;
   padding: 15px;
   color: #fff;
     
}
.example-onphoto img {
  width: 100%;
  }




/*list15ボックス（声ＶＯＩＣＥのボックス）もっと可愛くしたい
---------------------------------------------------------------------------*/
.list15  {
    height: auto;		/*ボックスの高さ*/
    padding: 2px 2px;
    overflow: hidden;	/*ボックスから飛び出た場合、非表示にする設定*/

    border-radius: 5px;	/*角丸のサイズ*/
	background: #ffffff;	/*背景*/
	
    border-top: solid 6px #ffd3bb;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
	float: center;		/*左に回り込み*/
	width: 95%;			/*幅*/
	line-height: 1.5;	/*行間*/
	text-align: center;	/*テキストを中央に*/
	margin: 0px 3% 20px;	/*上、左右、下へのボックスの外側へ空けるスペース*/
}


.list15 h4 {
   height: 100px;		/*高さ*/
   font-size: 24px;
    background: #fff1f1;
    padding: 4px;
    text-align: right;
    color: #e99383;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 1px; 
}


/*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
.list15 h4 .img {
   position: absolute;
	z-index: 1;
	left: 35%;
	display: block;
	width: 80px;
	max-width: 100%;
	height: 80px;
	
	border-radius: 50%;
	object-fit: cover;
}
/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list15 h4 span {
	display: block;
	font-size: 14px;	/*文字サイズ*/
	font-weight: normal;
	color: #202124;		/*文字色*/
}


.list15 h5 {
   height: 100px;		/*高さ*/
   font-size: 18px;
   
    padding: 4px;
    text-align: center;
    color: #e99383;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 1px; 
}



/*サブコンテンツ内のlistボックスメインとは見え方全く違う横
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.sub .list {
	position: relative;overflow: hidden;
	margin: 0 0;
	background: #ffffff;		/*背景色*/
	font-size: 11px;	/*文字サイズを少し小さくする（デフォルトは最上段のbody内にあります）*/
	line-height: 1.3;	/*行間を少し狭くする（デフォルトは最上段のbody内にあります）*/
}
.sub .list a {
	display: block;text-decoration: none;overflow: hidden;
	padding: 8px 0;	/*上下、左右へのメニュー内の余白*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色	*/
}
/*写真*/
.sub .list figure img {
	width: 30%;		/*写真の幅*/
	height: 100px;
    object-fit: cover;
	float: left;	/*左に回り込み*/
	margin-right: 5px;	/*写真の右に空けるスペース*/
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
    /*subコンテンツ内のおすすめ一覧ブロック８００以下
    ---------------------------------------------------------------------------*/
    /*ボックス内の写真設定*/
    .sub .list figure img {
        width: 20%;		/*写真の幅*/
    }
    
    /*sub,sideコンテンツ内のおすすめ一覧ブロック
    ---------------------------------------------------------------------------*/
    /*ボックス内の写真設定*/
    .sub .list6 figure img {
        width: 20%;		/*写真の幅*/
    }
    }
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
    /*subコンテンツ内のおすすめ一覧ブロック８００以下
    ---------------------------------------------------------------------------*/
    /*ボックス内の写真設定*/
    .sub .list figure img {
        width: 20%;		/*写真の幅*/
    }
     .sub .list6 figure img {
        width: 20%;		/*写真の幅*/
    }    }

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

    /*mainコンテンツ（中央のブロック）480以下
    ---------------------------------------------------------------------------*/
    /*mainコンテンツのh3onphotoタグ設定*/
    #main h3 .onphoto {
        font-size: 14px;	/*文字サイズ*/
    }   }
	
	
/*画像幅*/
/*Cast用の各ブロック116のをPC横４ｓｐ1そのままlist1をアレンジして写真●でｓｐで下文字に2019/09list24不動産不動産
---------------------------------------------------------------------------*/
#contents .sub .list24 {
	position: relative;overflow: hidden;
	font-size: 11px;	/*文字サイズ*/
	line-height: 1.2;	/*行間を狭くする*/
}
#contents .sub .list24 a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 10px;	/*ボックス内の余白*/
	border-top: 1px solid #dcdcdc;	/*上の線の幅、線種、色*/
	background: #fff;	/*背景色*/
}
/*最後ボックスの設定*/
#contents .sub .list24:last-of-type a {
	border-bottom: 1px solid #dcdcdc;	/*上の線の幅、線種、色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
}
/*最後ボックスの設定。box内では下に空けるスペースをなくす。*/
#contents .sub .box .list24:last-of-type a {
	margin-bottom: 0px;	/*下に空けるスペース*/
}
/*ボックス内のh4タグ設定*/
#contents .sub .list24 h4 {
	font-size: 13px;
	margin-bottom: 3px;
}
/*ボックス内のp(段落)タグ設定*/
#contents .sub .list24 p {
	padding: 0;
}
/*ボックス内の写真設定*/
#contents .sub .list24 figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 25%;		/*写真の幅*/
	margin-right: 5px;	/*写真の右側に空ける余白*/
}



/*box2（３カラムボックス）tp物産１１のbox2をladuree風にしたい。枠をみせず。
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.box3 {
	position: relative;
	width: 24.5%;		/*ボックスの幅*/
	float: left;		/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	padding: 3%;		/*ボックス内の余白*/
	padding-bottom: 75px;	/*下の余白だけ上書き*/
	margin: 0 auto;		/*上、右、下、左へのボックスの外に0 0 20px 2%空けるスペース*/
	line-height: 1.5;	/*行間*/
	color: #7c7670;		/*文字色*/
}
/*box2内の日付*/
.box3 span.date {
	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	background: #7d6147;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 12px;		/*文字サイズ*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/
	transform: rotate(-20deg);	/*回転の角度*/
}
/*box2内のp(段落)タグ*/
.box3 p {
	padding: 0 !important;
	height: 4.5em;		/*高さ。*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
	font-size: 14px;	/*文字サイズ*/
	text-align: left;	/*文字を左よせ*/
}
/*段落タグにリンクが設定された場合の文字色*/
.box3 p a {
	color: #666;
}
/*box2内のh4(見出し)タグ*/
.box3 h4 {
	color: #ed8299;	/*文字色*/
	height: 1.5em;	/*高さ*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
}
/*box2内のfigure(画像)タグ*/
.box3 figure {
	margin-bottom: 5px;	/*下に空けるスペース*/
	width: 300px;			/*画像幅*/
	height: 300px;/*画像改良？*/
    object-fit: cover;/*画像改良？*/
	
}
/*box2内のbtn1。本体の設定はこの下のブロックにあります。*/
.box3 p.btn-box3 {
	height: auto;
	position: absolute;
	bottom: 30px;	/*box2の下から30pxの場所に配置*/
	width: 80%;		/*ボタンの幅*/
}
.box3 p.btn-box3 a {
	display: block;
	padding: 5px 0;	/*上下、左右へのボタン内の余白*/
}

/*box1、box2のfigure写真共通設定
---------------------------------------------------------------------------*/
.box3 figure a:hover {
	opacity: 0.8;	/*マウスオン時に80%透明度にする*/
}

/*btn1
---------------------------------------------------------------------------*/
p.btn-box3 a {
	text-decoration: none;display: inline-block;
	border: 1px solid transparent;	/*枠線の幅、線種、色。transparentは透明の事。*/
	background: #7d6147;	/*背景色*/
	color: #fff !important;	/*文字色*/
	border-radius: 3px;		/*角丸のサイズ*/
	padding: 5px 30px;		/*上下、左右へのボタン内の余白*/
	text-align: center;		/*文字をセンタリング*/
}
/*マウスオン時*/
p.btn-box3 a:hover {
	border: 1px solid #7d6147;	/*枠線の幅、線種、色。*/
	background: #fff;			/*背景色*/
	color: #7d6147 !important;	/*文字色*/
}


/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
.box3 {
	width: auto;		/*ボックスの幅*/
	float: none;		/*左に回り込み*/
	padding: 3%;		/*余白の上書き*/
	margin: 0 0 20px 0;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 2;	/*行間*/
}
/*box2内のp(段落)タグ*/
.box3 p {
	height: auto;	/*高さ。*/
	font-size: 100%;		/*文字サイズ*/
	margin-bottom: 15px;
}
/*box2内のh4(見出し)タグ*/
.box3 h4 {
	height: auto;	/*高さ*/
}
/*box2内のbtn1*/
.box3 p.btn-box3 {
	position: static;
	width: 99%;		/*ボタンの幅*/
}}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.box3 h4 {
	font-size: 16px;	
}}


	
/*box2（３カラムボックス）tp物産１１のbox2をladuree風にしたい。枠をみせず。こちらは写真丸バージョン
---------------------------------------------------------------------------*/

.box4 {
	position: relative;
	width: 24.5%;		/*ボックスの幅*/
	float: left;		/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	padding: 3%;		/*ボックス内の余白*/
	padding-bottom: 75px;	/*下の余白だけ上書き*/
	margin: 0 0;		/*上、右、下、左へのボックスの外に空ける0 0 20px 2%スペース*/
	line-height: 1.5;	/*行間*/
	color: #7c7670;		/*文字色*/
}
/*box2内の日付*/
.box4 span.date {
	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	background: #7d6147;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 12px;		/*文字サイズ*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/
	transform: rotate(-20deg);	/*回転の角度*/
}
.box4 p {
	padding: 0 !important;
	height: 4.5em;		/*高さ。*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
	font-size: 14px;	/*文字サイズ*/
	text-align: left;	/*文字を左よせ*/
}
.box4 p a {
	color: #666;
}
.box4 h4 {
	color: #7d6147;	/*文字色*/
	height: 1.5em;	/*高さ*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
}
.box4 figure {
	margin-bottom: 5px;	/*下に空けるスペース*/
	width: 300px;			/*画像幅*/
	height: 300px;/*画像改良？*/
    object-fit: cover;/*画像改良？*/
	border-radius: 50%;		/*円形にする*/
}
/*box2内のbtn1。本体の設定はこの下のブロックにあります。*/
.box4 p.btn-box4 {
	height: auto;
	position: absolute;
	bottom: 30px;	/*box2の下から30pxの場所に配置*/
	width: 80%;		/*ボタンの幅*/
}
.box4 p.btn-box4 a {
	display: block;
	padding: 5px 0;	/*上下、左右へのボタン内の余白*/
}

.box4 figure a:hover {
	opacity: 0.8;	/*マウスオン時に80%透明度にする*/
}
p.btn-box4 a {
	text-decoration: none;display: inline-block;
	border: 1px solid transparent;	/*枠線の幅、線種、色。transparentは透明の事。*/
	background: #7d6147;	/*背景色*/
	color: #fff !important;	/*文字色*/
	border-radius: 3px;		/*角丸のサイズ*/
	padding: 5px 30px;		/*上下、左右へのボタン内の余白*/
	text-align: center;		/*文字をセンタリング*/
}
/*マウスオン時*/
p.btn-box4 a:hover {
	border: 1px solid #7d6147;	/*枠線の幅、線種、色。*/
	background: #fff;			/*背景色*/
	color: #7d6147 !important;	/*文字色*/
}


/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
/*box2（３カラムボックス）
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.box4 {
	width: auto;		/*ボックスの幅*/
	float: none;		/*左に回り込み*/
	padding: 3%;		/*余白の上書き*/
	margin: 0 0 20px 0;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 2;	/*行間*/
}
/*box2内のp(段落)タグ*/
.box4 p {
	height: auto;	/*高さ。*/
	font-size: 100%;		/*文字サイズ*/
	margin-bottom: 15px;
}
.box4 h4 {
	height: auto;	/*高さ*/
}
.box4 p.btn-box4 {
	position: static;
	width: 99%;		/*ボタンの幅*/
	margin: 0 auto;		/*上、右、下、左ボックスの外に空けるスペース*/
}}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*box1とbox2
---------------------------------------------------------------------------*/
/*h4(見出し)タグ*/
.box4 h4 {
	font-size: 18px;	/*文字サイズ*/
}}


/*横３ｐｃ横長１tp-108gold
---------------------------------------------------------------------------*/

.list36-feature-event {
	position: relative;overflow: hidden;
	float: left;			/*左に回り込み*/
	font-size: 11px;		/*文字サイズ*/
	line-height: 1.5;		/*行間*/
	width: 30%;				/*ボックスの幅*/
	margin-left: 1.5%;		/*ボックスの左右間に空けるスペース*/
	margin-bottom: 20px;	/*ボックスの上下間に空けるスペース*/
}
.list36-feature-event a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 15px;	/*ボックス内の余白*/
	height: 240px;	/*高さ*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 0px 0px 50px #fff3e2 inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
}
/*マウスオン時。内側の影を消す設定。*/
.list36-feature-event a:hover {
	box-shadow: none;
}

.list36-feature-event p {
	font-size: 10px;		/*文字サイズ*/
	padding: 0px !important;
}
/*ボックス内のh4タグ設定*/
.list36-feature-event h4 {
	padding: 0px;
	color: #202124;	/*文字色*/
}
/*画面幅1100px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1100px){
.list36-feature-event a {
	
	height: 210px;	/*高さ*/
}}


/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

	.list36-feature-event {
		float: none;
		width: auto;
		margin: 1px 3px;
	}
	.list36-feature-event a {
		height: auto !important;
	}/*ボックス内のh4タグ設定*/
.list36-feature-event h4 {
		font-size: 16px;		/*文字サイズ*/font-weight: 700;	
}
	.list36-feature-event figure {
		float: left;
		width: 30%;
		margin-right: 10px;
	}	}
	
	/*「人気」「NEW」マーク
	---------------------------------------------------------------------------*/
	/*mark1,matk2共通設定*/
	.mark100, .mark200 {
		left: auto;transform: rotate(0deg);
		top: -8px;		/*ボックス内の上から-8pxの場所に配置*/
		right: -5px;	/*ボックス内の右から-5pxの場所に配置*/
	}
	

/*生徒さんの声の目次に使用中。リスト４９左置き＆リスト５０右おきでペアで使ってServiceページの各ブロックtp-biz46そのままでリスト５０ PCで横２．Spで横長１になる。
カラム２の記事下において右と左の関連記事へのボックスリンクとするのでリスト４９はリスト５０の反転になる。
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list50R-students-taking-this-lesson {
	position: relative;
	overflow: hidden;
	float: left;		/*左に回り込み*/
	width: 46%;			/*ボックス幅*/
	padding: 1%;		/*ボックス内の余白*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin: 0 0.8% 20px;		/*上、左右、下へのボックスの外に空けるスペース*/
	box-shadow: 0px 10px 40px rgba(0,0,0,0.2);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.2は透明度20%の事。*/
	-webkit-transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
	transition: 0.3s;			/*同上*/
}
.list50R-students-taking-this-lesson  a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 1%;	
	margin: -1%;
}
.list50R-students-taking-this-lesson :hover {
	box-shadow: none !important;	/*ボックスの影をなくす設定*/
}
/*リンクを貼った際に出る「→」マーク*/
.list50R-students-taking-this-lesson  a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 40px;	/*幅*/
	line-height: 40px;	/*高さ*/
	text-align: center;
	background: #ccc;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.2);	/*背景グラデーション。0,0,0は黒の事で、0.3は透明度30%の事。*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ。50%にすると円になる。*/
}
/*マウスオン時の「→」マーク*/
.list50R-students-taking-this-lesson  a:hover::before {
	background: #766038;	/*背景色*/
}
/*ボックス内右側のテキストパーツ*/
.list50R-students-taking-this-lesson  .text {
	font-size: 13px;	/*文字サイズ*/
	line-height: 1.1;	/*行間1.5*/
	height: 7.5em;		/*高さ*/
	overflow: hidden;	/*高さを超えると非表示になる*/
}

/*ボックス内のh4タグ設定*/
.list50R-students-taking-this-lesson  h4 {
	font-size: 18px;font-weight: bold;	/*デフォルトの太字を標準にする設定*/
	padding: 0px;
	color: #766038;	/*文字色*/
}
/*ボックス内のp(段落)タグ設定*/
.list50R-students-taking-this-lesson  p {
	padding: 0px !important;font-size: 13px;
}
/*ボックス内の画像*/
.list50R-students-taking-this-lesson  .img {
	float: left;	/*左に回り込み*/
	width: 200px;		/*幅*/
	height: 200px;		/*高さ*/
	margin-right: 10px;
}

/*mainブロック内のボックス設定*/
.list50R-students-taking-this-lesson  {
	box-shadow: 0px 5px 10px rgba(0,0,0,0.1);	/*ボックスの影*/
}



/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
	.list50R-students-taking-this-lesson  {
		float: none;		/*回り込みのリセット*/
		width: auto;		/*ボックス幅*/
		margin: 0 0 20px;	/*上、左右、下へのボックスの外に空けるスペース*/
	}
	/*ボックス内の画像*/
	.list50R-students-taking-this-lesson  .img {
		width: 20%;		/*幅*/
		height: auto;
	}
	
	}
	


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

	/*設定
	---------------------------------------------------------------------------*/
	/*Serviceページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list50R-students-taking-this-lesson {
	margin: 0 8px 20px;		/*上、左右、下へのボックスの外に空けるスペース*/
	box-shadow: none !important;
	border: none;
	border-bottom: 1px solid #dcdcdc;	/*下線の幅、線種、色*/
}
/*１つ目のメニュー*/
.list50R-students-taking-this-lesson:first-of-type {
	border-top: 1px solid #dcdcdc;
}
/*リンクを貼った際に出る「→」マーク*/
.list50R-students-taking-this-lesson a::before {
	right: 0px;	/*ボックスの右から0pxの場所に配置*/
	width: 20px;	/*幅*/
	line-height: 20px;	/*高さ*/
}
/*ボックス内のp(段落)タグ設定*/
.list50R-students-taking-this-lesson a p {
	padding-right: 40px !important;
}
	}
		


	
/*生徒さんの声の目次に使用中。tp-biz46そのままでリスト５０ PCで横２．Spで横長１になる。リスト４９左置き＆リスト５０右おきでペアで使って
カラム２の記事下において右と左の関連記事へのボックスリンクとするのでリスト４９はリスト５０の反転になる。
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list49L-students-taking-this-lesson {
	position: relative;
	overflow: hidden;
	float: left;		/*左に回り込み*/
	width: 46%;			/*ボックス幅*/
	padding: 1%;		/*ボックス内の余白*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin: 0 0.8% 20px;		/*上、左右、下へのボックスの外に空けるスペース*/
	box-shadow: 0px 10px 40px rgba(0,0,0,0.2);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.2は透明度20%の事。*/
	-webkit-transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
	transition: 0.3s;			/*同上*/
}
.list49L-students-taking-this-lesson a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 1%;	/*ボックス内の余白*/
	margin: -1%;
}
/*マウスオン時の背景色*/
.list49L-students-taking-this-lesson:hover {
	box-shadow: none !important;	/*ボックスの影をなくす設定*/
}
/*リンクを貼った際に出る「→」マーク*/
.list49L-students-taking-this-lesson a::before {
	content: "←";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;
	position: absolute;
	left: 10px;	/*ボックスのright右から10pxの場所に配置hidarinisita*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 40px;	/*幅*/
	line-height: 40px;	/*高さ*/
	text-align: center;
	background: #ccc;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.2);	/*背景グラデーション。0,0,0は黒の事で、0.3は透明度30%の事。*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ。50%にすると円になる。*/
}
/*マウスオン時の「→」マーク*/
.list49L-students-taking-this-lesson  a:hover::before {
	background: #766038;	/*背景色*/
}
/*ボックス内右側のテキストパーツ*/
.list49L-students-taking-this-lesson .text {
	font-size: 13px;	/*文字サイズ*/
	line-height: 1.1;	/*行間１．５*/
	height: 7.5em;		/*高さ*/
	overflow: hidden;	/*高さを超えると非表示になる*/
}

/*ボックス内のh4タグ設定*/
.list49L-students-taking-this-lesson h4 {
	font-size: 18px;font-weight: bold;	/*デフォルトの太字を標準にする設定*/
	padding: 0px;
	color: #766038;	/*文字色*/
}
/*ボックス内のp(段落)タグ設定*/
.list49L-students-taking-this-lesson p {
	padding: 0px !important;font-size: 13px;
}
/*ボックス内の画像*/
.list49L-students-taking-this-lesson .img {
	float: right;	/*左に回り込み右に変更*/
	width: 200px;		/*幅*/
	height: 200px;		/*高さ*/
	margin-right: 10px;
}

/*mainブロック内のボックス設定*/
.list49L-students-taking-this-lesson  {
	box-shadow: 0px 5px 10px rgba(0,0,0,0.1);	/*ボックスの影*/
}



/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){

.list49L-students-taking-this-lesson  {
		float: none;		/*回り込みのリセット*/
		width: auto;		/*ボックス幅*/
		margin: 0 0 20px;	/*上、左右、下へのボックスの外に空けるスペース*/
	}
	/*ボックス内の画像*/
	.list49L-students-taking-this-lesson  .img {
		width: 20%;		/*幅*/
		height: auto;
	}	}
	


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

.list49L-students-taking-this-lesson {
	margin: 0 8px 20px;		/*追加上、左右、下へのボックスの外に空けるスペース*/
	
	box-shadow: none !important;
	border: none;
	border-bottom: 1px solid #dcdcdc;	/*下線の幅、線種、色*/
}
/*１つ目のメニュー*/
.list49L-students-taking-this-lesson:first-of-type {
	border-top: 1px solid #dcdcdc;
}
/*リンクを貼った際に出る「→」マーク*/
.list49L-students-taking-this-lesson a::before {
	right: 0px;	/*ボックスの右から0pxの場所に配置*/
	width: 20px;	/*幅*/
	line-height: 20px;	/*高さ*/
}
/*ボックス内のp(段落)タグ設定*/
.list49L-students-taking-this-lesson a p {
	padding-right: 40px !important;
}
	}
		

/*サービス紹介ページの各ブロックbiz34のリスト。biz４０のホーバー時。Spで縦長。PCで横。表いり。
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.main .list22 {
	border: 1px solid #bcbcbc;	/*枠線の幅、線種、色*/
	margin-bottom: 15px;	/*ボックスの下に空ける余白*/
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: -webkit-linear-gradient(#FFF, #ebebeb);	/*グラデーション*/
	background: linear-gradient(#FFF, #ebebeb);			/*同上*/
	-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.2), 0px 0px 1px 1px #FFF inset;	/*影の設定。右・下・ぼかし幅・色(0,0,0は黒、0.2は透明度20%の事)の設定, ＋内側への影を右・下・ぼかし幅・色を設定*/
	box-shadow: 0px 2px 5px rgba(0,0,0,0.2), 0px 0px 1px 1px #FFF inset;			/*同上*/
	position: relative;
	overflow: hidden;
	border-radius: 8px;	/*角丸のサイズ*/
}
.main .list22 a {
	padding: 3%;	/*ボックス内の余白*/
	text-decoration: none;
	display: block;
	overflow: hidden;
}




/*ボックス内の矢印マーク設定tpbiz40より追加*/
.main section.list22 a::before {
	content: "→";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
	background: #e6e6e6;	/*背景色*/
	color: #ccc;			/*文字色*/
	font-size: 20px;		/*文字サイズ*/
	line-height: 1;
	width: 65px;			/*幅。下の15pxと合計した数字がline-height(80px)になるようにする。*/
	padding-left: 15px;		/*左側へのボックス内余白。上の65pxと合計した数字がline-height(80px)になるようにする。*/
	line-height: 80px;		/*行間。上の２行の合計値と合うように。*/
	position: absolute;
	right: -40px;	/*ボックスの右から-40pxの場所に配置*/
	top: 32%;		/*ボックスの上から32%の場所に配置*/
	border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}
/*マウスオン時*//*マウスオン時のボックス*/
.main section.list22 a:hover::before {
	background: #cf2480;	/*背景色*/
	color: #fff;			/*文字色*/
}
/*ボックス内の段落タグ設定*/
.main .list22 p {
	padding: 0px;
}
/*ボックス内の写真設定*/
.main .list22 figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 24%;		/*写真の幅*/
	background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	padding: 1%;			/*余白。ここに上の行で設定した背景色が出ます。*/
	border: 1px solid #CCC;	/*枠線の幅、線種、色*/
	margin-right: 1%;
}
/*ボックス内のh4タグ設定*/
.main .list22 h4 {
	margin-bottom: 15px;font-size: 20px;	/*文字サイズ*/
	color: #d52f4e;		/*文字色*/
	border-bottom: 1px solid #CCC;	/*下線の幅、線種、色*/
}
/*ボックス内のh4タグの１文字目への設定*/
.main .list22 h4::first-letter {
	border-left: 3px solid #d52f4e;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	/*線と文字との余白*/
}
/*h4タグ直下に画像がある場合の段落タグ設定*/
.main .list22 h4 + figure ~ p {
	margin-left: 28%;	/*左側の写真幅とのバランスをとって設定*/
}
.main .list22 h4 + figure ~ table {
	margin-left: 28%;	/*左側の写真幅とのバランスをとって設定*/
	width: 71%;			/*テーブル幅*/
}

.main .list22 table {
	font-size: 12px;	/*文字サイズ*/
	background: #FFF;	/*背景色*/
	width: 100%;		/*テーブル幅*/
	margin-bottom: 5px;
}
.main .list22 table,
.main .list22 table td,
.main .list22 table th{
	border: 1px solid #bcbcbc;	/*枠線の幅、線種、色*/
}
.main .list22 table td,
.main .list22 table th{
	padding: 1%;	/*テーブル内の余白*/
}
/*色のついた見出しブロック*/
.main .list22 table th{
	width: 18%;		/*幅*/
	text-align: center;		/*文字をセンタリング*/
	font-weight: normal;	/*デフォルトの太字を標準にする設定*/
	background: #e6e2db;	/*背景色*/
}
/*白い説明用ブロック*/
.main .list22 table td {
	width: 30%;	/*幅*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	.main .list22 p {
		margin-left: 0 !important;
	}
	/*ボックス内の写真設定*/
	.main .list22 figure img {
		float: none;
		margin-right: 0;
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		margin-bottom: 10px;
	}
	/*ボックス内のtable*/
	.main .list22 table {
		margin-left: 0 !important;
		width: 100% !important;
	}}


/*レシピページの上に料理・お菓子へのCTAPC4,SP２写真のみ。下に文字。
---------------------------------------------------------------------------*/
/**/
.list47 {
	overflow: hidden;
	position: relative;
	width: 22%;		
	float: left;	
	text-align: center;	
	margin-left: 2.4%;	/*ボックス同士に空ける左右間のスペース*/
	font-size: 12px;	/*文字サイズ*/
	margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}
.list47 a {
	display: block;text-decoration: none;overflow: hidden;
}
/*h4タグ*/
.list47 h4 {
	height: 1.5em;	/*高さ。レイアウトが崩れるのを防ぐ為、２行目以降は非表示になります。*/
}
/*写真のマウスオン時*/
.list47 a:hover figure img {
	opacity: 0.7;	/*透明度*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list47 {
	width: 45%;			/*幅*/
	margin-left: 3%;	/*ボックス同士に空ける左右間のスペース*/
}}



/*リスト４５手動スライダー用各ブロックtp-biz46よりリスト５からアレンジ 2020/01/08
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list45 {
	position: relative;
	overflow: hidden;
	float: left;		/*左に回り込み*/
	width: 220px;
	height: 240px; 
	overflow-y: hidden;
    border: 1px solid #ddd;
    background: #fff;/*ボックス幅*/ 
	
	padding: 1%;		/*ボックス内の余白*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin-right: 10px;		/*上、左右、下へのボックスの外に空けるスペース*/
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、広げる幅、0,0,0は黒で0.2は透明度20%の事。*/
	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.2は透明度20%の事。*/
	-webkit-transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
	transition: 0.3s;			/*同上*/
}
.list45 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 1%;	/*ボックス内の余白*/
	margin: -1%;
}
/*マウスオン時の背景色*/
.list45:hover {
	box-shadow: none !important;	/*ボックスの影をなくす設定*/
}
/*リンクを貼った際に出る「→」マーク*/
.list45 a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 25px;	/*文字サイズ*/
	display: block;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 40px;	/*幅*/
	line-height: 40px;	/*高さ*/
	text-align: center;
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	background: rgba(255,211,187,0.8);	/*背景グラデーション。0,0,0は黒の事で、0.3は透明度30%の事。*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ。50%にすると円になる。*/
}
/*マウスオン時の「→」マーク*/
.list45 a:hover::before {
	background: #e64b90;	/*背景色*/
}
/*ボックス内右側のテキストパーツ無効*/
.list45 .text {
	line-height: 1.5;	/*行間*/
	height: 7.5em;		/*高さ*/
	overflow: hidden;	/*高さを超えると非表示になる*/
	
}

/*ボックス内のh4タグ設定*/
.list45 h4 {
	font-weight: bold;	/*デフォルトの太字を標準にする設定*/
	font-size: 12px;
	text-align: center;
	color: #484848;	/*文字色*/

    line-height: 1.4;
    margin-bottom: 0;


	padding: 0px;
}
/*ボックス内のp(段落)タグ設定*/
.list45 p {
	padding: 0px !important;
	font-size: 13px;	/*文字サイズ*/
	color: #7c7670;		/*文字色*/
	
}
/*ボックス内の画像*/
.list45 .img {
	float: left;	/*左に回り込み*/
	width: 300px;		/*幅*/
	height: 158px;		/*高さ*/
	object-fit: cover;
	margin: 0px;


}
/*mainブロック内のボックス設定*/
.list45 {
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、広げる幅、0,0,0は黒で0.2は透明度20%の事。*/
	/*ボックスの影*/
}



/*listブロック tp-クリニック５ ポンひろスライダーにいれるとグーグルみたいになる。縦長にもなる。横３弱。
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.list44 {
	overflow: hidden;
	width: 40%;	/*幅26.4で３つぴったり。スライダー用に大きく。*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	/*ボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
	background: #fff;	/*背景色*/
}
.list44 a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の.listのpaddingを相殺するため。*/
	padding: 2%;	/*ボックス内の余白*/
	background: #fff url(https://creme-cremes.com/components/images/arrow1.png) no-repeat right bottom / 40px;	/*リンク設定した際の右下の矢印マークの読み込み。right（右）、bottom（下）、40pxは画像の幅。*/
}
/*マウスオン時の設定*/
.list44 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
/*h4（見出し）タグの設定*/
.list44 h4 {
	color: #74634b;		/*文字色*/
	font-size: 120%;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	height: 2em;		/*高さ*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}
/*p（段落）タグの設定*/
.list44 p {
	padding: 0 !important;
	line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 90%;		/*文字サイズを少し小さく*/
	color: #333;		/*文字色*/
	height: 6em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*listブロック
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.list44 {
	overflow: hidden;
	width: 40%;	/*幅26.4*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	/*ボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}
.list44 a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の.listのpaddingを相殺するため。*/
	padding: 2%;	/*ボックス内の余白*/
	background: url(https://creme-cremes.com/components/images/arrow1.png) no-repeat right bottom / 40px;	/*リンク設定した際の右下の矢印マークの読み込み。right（右）、bottom（下）、40pxは画像の幅。*/
}
/*マウスオン時の設定*/
.list44 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
/*h4（見出し）タグの設定*/
.list44 h4 {
	color: #74634b;		/*文字色*/
	font-size: 120%;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	height: 2em;		/*高さ*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}
/*p（段落）タグの設定*/
.list44 p {
	padding: 0 !important;
	line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 90%;		/*文字サイズを少し小さく*/
	color: #333;		/*文字色*/
	height: 6em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}}
	
/*tpコスメ１そのまま。PCで横４（になっていない。下のがきいている）
SPで１saidebarのように横長１になる。
---------------------------------------------------------------------------*/
/*list48（講座一覧の上の目次風につかうボックス。
---------------------------------------------------------------------------*/
#contents .list48 {
	position: relative;
	overflow: hidden;
	transition: 0.5s;
	float: left;	/*左に回り込み*/
	width: 21%;	/*ボックス幅*/
	margin: 0 2% 20px 2%;	/*上、右、下、左にとるボックスの外側へのスペース*/
	padding: 2%;	/*ボックス内の余白*/
	height: 340px;	/*ボックスの高さ*/
	border-right: 1px solid #ccc;	/*右側の線の幅、線種、色*/
	border-bottom: 1px solid #ccc;	/*下側の線の幅、線種、色*/
	font-size: 13px;	/*文字サイズ*/
	background: #fff4ee;	/*背景色*/
}
/*ボックス内のh4見出し*/
#contents .list48 h4 {
	color: #202124;	/*文字色*/
	font-weight: bold;	/*デフォルトの太字を標準にする設定*/
	font-size: 18px;
	
	margin-top: 10px;
}
/*ボックス内のp段落タグ*/
#contents .list48 p {
	color: #b39f88;	/*文字色*/
	padding: 0;
	font-size: 12px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
	padding: 0;
	
}
/*ボックス内のボタン（Moreボタン）*/
#contents .list48 .btn48 {
	padding: 1px 10px;	/*上下、左右へのボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ*/
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	font-size: 11px;	/*文字サイズ*/
}
/*「SOLD」用の設定*/
#contents .list48.sold figure {
	opacity: 0.4;	/*画像の透明度を40%にする設定*/
}
#contents .list48.sold .btn48 {
	display: none;	/*「More」ボタンを非表示にする設定*/
}
#contents .list48.sold h4,#contents .list48.sold p {
	color: #ccc;	/*h4とpタグの文字色を薄くする設定*/
}

#contents .main .list48 {
	height: 320px;	/*mainブロック内（※２カラム時という事）で使う場合のボックスの高さ。*/
}

#contents .sub .list48 {
	float: none;
	width: auto;
	height: auto;
	margin :0;
	padding: 0;
	background: transparent;
	border: none;
	line-height: 1.5;
	padding: 10px;
}
#contents .sub .list48 a {
	display: block;
	text-decoration: none;
	border: 2px solid transparent;
	overflow: hidden;
	padding: 10px;
	margin: -10px;
}
/*マウスオン時のボーダー設定*/
#contents .sub .list48 a:hover {
	border: 2px solid #d76593;
}
/*奇数番目のボックス*/
#contents .sub .list48:nth-child(even) {
	background: #f7f7f7;	/*背景色*/
}
/*figure画像設定*/
#contents .sub .list48 figure img {
	float: left;	/*左よせ*/
	width: 20%;		/*画像幅*/
}
/*h4見出し*/
#contents .sub .list48 h4 {
	margin-top: 0;
}
/*h4とpタグ*/
#contents .sub .list48 h4, #contents .sub .list48 p {
	margin-left: 25%;	/*figure画像の幅に合わせて調整する*/
}
/*ボタン（共通）
---------------------------------------------------------------------------*/
.btn48 {
	text-decoration: none;
	display: inline-block;
	background: #eea882;	/*背景色*/
	color: #fff;			/*文字色*/
	padding: 5px 50px;		/*上下、左右へのボックス内の余白*/
	margin: 0 auto;
	text-align: center;
	border-radius: 50px;	/*角丸のサイズ*/
	border: 1px solid transparent;	/*枠線の幅、線種、色。transparentは透明。*/
	font-size: 18px;	/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くとる設定*/
}
/*マウスオン時*/
.btn48:hover {
	background: #fff;	/*背景色*/
	color: #d76593;		/*文字色*/
	border: 1px solid #d76593;	/*枠線の幅、線種、色*/
}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
#contents .list48 {
	float: none;	/*回り込みの解除*/
	width: auto;	/*ボックス幅*/
	height: auto !important;	/*ボックスの高さ*/
	margin: 0 2% 20px 2%;	/*上、右、下、左にとるボックスの外側へのスペース*/
}

#contents .list48 figure img {
	width: 30%;
	float: left;
	margin-right: 2%;
}

#contents .list48 h4 {
	margin-top: 0px;
}}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	/*ボタン（共通）
	---------------------------------------------------------------------------*/
	.btn48 {
		padding: 5px 10px;
		font-size: 14px;
		letter-spacing: normal;
	}
}



/*額縁用の各ブロックtp115　リスト１６の文字サイズ変更。PC３、SP１
---------------------------------------------------------------------------*/
.list39 {
	position: relative;
	overflow: hidden;
	font-size: 16px;	/*文字サイズ*/
	line-height: 1.5;
	width: 31%;		/*ボックスの幅*/
	padding: 4%;	/*ボックス内の余白*/
	float: left;
	margin-left: 1.25%;
	margin-bottom: 15px;
	background: url(https://creme-cremes.com/components/images/framekokuban-min.png) no-repeat center center/100% 100%;	/*背景画像の読み込み*/
	border: 1px solid #ffffff;	/*枠線の幅、線種、色。古いブラウザだと背景画像は出ず、このラインだけ出ます。*/
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
}
.list39 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	height: 200px;	/*高さ*/
}
.list39 p {
    color: #ffffff;	/*文字色*/
	padding: 0px !important;
}
/*ボックス内のh4タグ設定*/
.list39 h4 {
	padding: 0px;
	color: #e99383;	/*文字色*/
}
/*h4タグとpタグのマウスオン時の文字色*/
.list39 a:hover h4,
.list39 a:hover p {
	color: #FFE900;
}
/*マウスオン時のボックス*/
.list39:hover {
	-webkit-box-shadow: 0px 0px 10px #FFE900;	/*外側に光る影の設定。10pxが広がる距離。*/
	box-shadow: 0px 0px 10px #FFE900;			/*同上*/

}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	/*トップページの「Today's Cast」ブロック800ika
	---------------------------------------------------------------------------*/
	/*「Today's Cast」ブロック内の各キャストボックスの設定*/
	.list39 {
		width: 31%;	/*ボックスの幅*/
		padding: 5.2%;	/*ボックス内の余白*/
	}
	.list39 a {
		height: 330px;	/*高さ*/
	}	}
	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){

/*各キャストボックスの設定tp115::480ika*/
.list39 {
	width: auto !important;	
	height: 330px;	/*高さ*/
	float: none !important;
	margin-left: 0 !important;
	background: url(https://creme-cremes.com/components/images/framekokuban-min.png) no-repeat center center/100% 100%;	/*横長画像の読み込み*/
	padding: 17% !important;
}
.list39 a {
	height: auto !important;
}
.list39 figure {
	float: center;
	width: 80%;
	margin: 0 5%;
}}	

	/*バナーとして使うCast用の各ブロックtp-111
	---------------------------------------------------------------------------*/
	/*各キャストボックスの設定*/
	.list41 {
		position: relative;overflow: hidden;
		float: left;			/*左に回り込み*/
		font-size: 11px;		/*文字サイズ*/
		line-height: 1.5;		/*行間*/
		width: 23%;				/*ボックスの幅*/
		margin-left: 1.5%;		/*ボックスの左右間に空けるスペース*/
		margin-bottom: 20px;	/*ボックスの上下間に空けるスペース*/
	}
	.list41 a {
		text-decoration: none;display: block;overflow: hidden;
		padding: 10px;	/*ボックス内の余白*/
		border: 2px solid #ffffff;	/*枠線の幅、線種、色*/
		box-shadow: 0px 0px 50px #ffffff inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
	}
	/*マウスオン時。内側の影を消す設定。*/
	.list41 a:hover {
		box-shadow: none;
		border: 1px solid #ff5293;	/*枠線の幅、線種、色*/
	}
	/*ボックス内のh4タグ設定*/
	.list41 h4 {
		line-height: 1.5;	/*行間。1.5が１行分になります。*/
		height: 1.5em;		/*高さ1行。上の1.5が基準なので、1(行)を掛け算し、1.5em。emは文字サイズの単位。*/
		overflow: hidden;	/*上記を超える場合の文字を消す設定*/
		color: #ff5293;		/*文字色*/
		font-size: 33px;	/*文字サイズ*/
		
	}
	/*ボックス内のp(段落)タグ設定*/
	.list41 p {
		padding: 0px !important;
		line-height: 1.5;	/*行間。1.5が１行分になります。*/
		height: 4.5em;		/*高さ3行。上の1.5が基準なので、3(行)を掛け算し、4.5em。emは文字サイズの単位。*/
		overflow: hidden;	/*上記を超える場合の文字を消す設定*/ font-size: 12px;	/*文字サイズ*/
	}
	/*画面幅600px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:600px){/*Cast用の各ブロック
		---------------------------------------------------------------------------*/
		/*各キャストボックスの設定*/
		.list41 {
			float: none;
			width: auto;
			margin-left: 0;
			font-size: 100%;
			line-height: normal;
		}
		.list41 figure {
			width: 25%;
			float: left;
			margin-right: 10px;
		}}
	
	
	

	/*21R,21Lの順で使う。記事下のリンク用。tpbiz４０ｓｐも横のまま。ブレイクポイントなしで。
	---------------------------------------------------------------------------*/
	/*ボックスの設定*/
	.list21R {
		margin-bottom: 15px;	/*ボックス間のスペース*/
		position: relative;
		overflow: hidden;
		float: left;	/*左に回り込み*/
		width: 43%;		/*幅46*/
		padding: 2.5%;	/*ボックス内の余白*/
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
		background: #fff;	/*背景色*/
		-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.1が透明度。*/
		box-shadow: 1px 1px 2px rgba(0,0,0,0.1);			/*同上*/
	}
	.list21R a {
		background: #fff;	/*背景色*/
		display: block;
		text-decoration: none;
		overflow: hidden;
		margin: -2.5%;
		padding: 2.5%;
	}
	/*ボックス内の段落タグ設定*/
	.list21R p {
		padding: 0px;
		margin-left: 34%;	/*左の写真とのバランスをとって設定*/
	}
	/*ボックス内の写真設定*/
	.list21R figure img {
		float: left;		/*画像を左へ回り込み*/
		width: 30%;			/*写真の幅*/
		height: auto;		/*写真の高さ*/
		margin-right: 4%;
	}
	/*ボックス内のh4タグ設定*/
	.list21R h4 {
		font-size: 14px;	/*文字サイズ*/
		color: #cf2480;		/*文字色*/
		margin-left: 34%;	/*左の写真とのバランスをとって設定*/
	}
	/*ボックス内の矢印マーク設定*/
	.list21R a::before {
		content: "＜";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
		background: #e6e6e6;	/*背景色*/
		color: #ccc;			/*文字色*/
		font-size: 20px;		/*文字サイズ*/
		line-height: 1;
		width: 65px;			/*幅。下の15pxと合計した数字がline-height(80px)になるようにする。*/
		padding-right: 15px;		/*左側へのボックス内余白。上の65pxと合計した数字がline-height(80px)になるようにする。*/
		line-height: 80px;		/*行間。上の２行の合計値と合うように。*/
		position: absolute;
		left: -40px;	/*ボックスの右から-40pxの場所に配置*/
		top: 32%;		/*ボックスの上から32%の場所に配置*/
		border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
	}
	/*マウスオン時*/
	.list21R a:hover::before {
		background: #474346;	/*背景色*/
		color: #fff;			/*文字色*/
	}
	

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*メインコンテンツ内のボックス（list）設定
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定float: none;*/
.list21R {
	
	width: auto;
	margin-right: 0;
	height: auto;
}
.list21R a {
	height: auto;
}	}

/*list21の左右反転版。リスト２０、２１の順でペアで使うtpbiz４０ｓｐも横のまま。ブレイクポイントなしで。
---------------------------------------------------------------------------*/

	/*21L,21の順で使う。記事下のリンク用。tpbiz４０ｓｐも横のまま。ブレイクポイントなしで。
	---------------------------------------------------------------------------*/
	/*ボックスの設定*/
	.list21L {
		margin-bottom: 15px;	/*ボックス間のスペース*/
		position: relative;
		overflow: hidden;
		float: right;	/*migi回り込み*/
		width: 43%;		/*幅46*/
		padding: 2.5%;	/*ボックス内の余白*/
		background: #fff;	/*背景色*/
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
		-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.1が透明度。*/
		box-shadow: 1px 1px 2px rgba(0,0,0,0.1);			/*同上*/
	}
	.list21L a {
		background: #fff;	display: block;		text-decoration: none;	overflow: hidden;
		margin: -2.5%;		padding: 2.5%;	}
	.list21L p {	padding: 0px;		margin-right: 34%;	}
	.list21L figure img {
		float: right;		/*画像を左へ回り込み*/
		width: 30%;			/*写真の幅*/
		height: auto;		/*写真の高さ*/
		margin-left: 4%;
	}
	.list21L h4 {
		font-size: 14px;	/*文字サイズ*/
		color: #cf2480;		/*文字色*/
		margin-right: 34%;	/*左の写真とのバランスをとって設定*/
	}
	/*きかず。上にでる。ボックス内の矢印マーク設定*/
	.list21L a::before {
		content: "＞";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
		background: #e6e6e6;	/*背景色*/
		color: #ccc;			/*文字色*/
		font-size: 20px;		/*文字サイズ*/
		line-height: 1;
		width: 65px;			/*幅。下の15pxと合計した数字がline-height(80px)になるようにする。*/
		padding-left: 15px;		/*左側へのボックス内余白。上の65pxと合計した数字がline-height(80px)になるようにする。*/
		line-height: 80px;		/*行間。上の２行の合計値と合うように。*/
		position: absolute;
		right: -40px;	/*ボックスの右から-40pxの場所に配置*/
		top: 32%;		/*ボックスの上から32%の場所に配置*/
		border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
	}
	/*マウスオン時*/
	.list21L a:hover::before {
		background: #474346;	/*背景色*/
		color: #fff;			/*文字色*/
	}
	
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*メインコンテンツ内のボックス（list）設定
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定float: none*/
.list21L {
	width: auto;
	margin-left: 0;
	height: auto;
}
.list21L a {
	height: auto;
}}


/*box2（３カラムボックス）tp物産そのまま２０２０・３
---------------------------------------------------------------------------*/

.box2 {
	position: relative;
	width: 24.5%;		/*ボックスの幅*/
	float: left;		/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	padding: 3%;		/*ボックス内の余白*/
	padding-bottom: 75px;	/*下の余白だけ上書き*/
	background: #fff;		/*背景色*/
	border: 1px solid #eeeae2;	/*枠線の幅、線種、色*/
	margin: 0 0 20px 2%;		/*上、右、下、左へのボックスの外に空けるスペース*/
	line-height: 1.5;	/*行間*/
	color: #202124;		/*文字色*/
	border-radius: 10px;/*角の丸み*/
}
/*box2内の日付*/
.box2 span.date {
	position: absolute;
	left: -10px;	top: -10px;		background: #7d6147;	color: #fff;	font-size: 12px;	
	width: 50px;			
	line-height: 50px;		border-radius: 50%;	text-align: center;	transform: rotate(-20deg);	/*回転の角度*/
}
/*box2内のp(段落)タグ*/
.box2 p {
	padding: 0 !important;
	height: 4.5em;		/*高さ。*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
	font-size: 14px;	/*文字サイズ*/
	text-align: left;	/*文字を左よせ*/ 

}
/*段落タグにリンクが設定された場合の文字色*/
.box2 p a {
	color: #666;
}
/*box2内のh4(見出し)タグ*/
.box2 h4 {
	font-weight: bold;
	color: #7d6147;	/*文字色*/
	height: 1.5em;	/*高さ*/
	overflow: hidden;	/*オーバーした分は非表示に。*/
}
/*box2内のfigure(画像)タグ*/
.box2 figure {
	margin-bottom: 5px;	/*下に空けるスペース*/
}
/*box2内のbtn1。本体の設定はこの下のブロックにあります。*/
.box2 p.btn6 {
	height: auto;
	position: absolute;
	bottom: 30px;	/*box2の下から30pxの場所に配置*/
	width: 80%;		/*ボタンの幅*/
}
.box2 p.btn6 a {
	display: block;
	padding: 5px 0;	/*上下、左右へのボタン内の余白*/
}

.box2 figure a:hover {
	opacity: 0.8;	/*マウスオン時に80%透明度にする*/
}

p.btn6 a {
	text-decoration: none;display: inline-block;
	border: 1px solid transparent;	/*枠線の幅、線種、色。transparentは透明の事。*/
	background: #7d6147;	/*背景色*/
	color: #fff !important;	/*文字色*/
	border-radius: 3px;		/*角丸のサイズ*/
	padding: 5px 30px;		/*上下、左右へのボタン内の余白*/
	text-align: center;		/*文字をセンタリング*/
}
/*マウスオン時*/
p.btn6 a:hover {
	border: 1px solid #7d6147;	/*枠線の幅、線種、色。*/
	background: #fff;			/*背景色*/
	color: #7d6147 !important;	/*文字色*/
}

/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
	.box2 {
		width: auto;		/*ボックスの幅*/
		float: none;		/*左に回り込み*/
		padding: 3%;		/*余白の上書き*/
		margin: 0 0 20px 0;		/*上、右、下、左へのボックスの外に空けるスペース*/
		line-height: 2;	/*行間*/
	}
	/*box2内のp(段落)タグ*/
	.box2 p {
		height: auto;	/*高さ。*/
		font-size: 100%;		/*文字サイズ*/
		margin-bottom: 15px;
	}
	/*box2内のh4(見出し)タグ*/
	.box2 h4 {
		height: auto;	/*高さ*/
	}
	/*box2内のbtn1*/
	.box2 p.btn6 {
		position: static;
		width: 99%;		/*ボタンの幅*/
	}}



.sub .list6 {
	position: relative;overflow: hidden;
	background: #ffffff;		/*背景色*/
	font-size: 11px;	/*文字サイズを少し小さくする（デフォルトは最上段のbody内にあります）*/
	line-height: 1.3;	/*行間を少し狭くする（デフォルトは最上段のbody内にあります）*/
}
.sub .list6 a {
	display: block;text-decoration: none;overflow: hidden;
	padding: 8px 0;	/*上下、左右へのメニュー内の余白*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色	*/
}
/*h4見出しタグの設定*/
.sub .list6 h4 {
	color: #202124;	/*文字色*/
	font-size: 18px;font-weight: bold;
	text-align: center;
}


/*写真*/
.sub .list6 figure img {
	width: 25%;		/*写真の幅*/
	float: left;	/*左に回り込み*/
	margin-right: 5px;	/*写真の右に空けるスペース*/
}

@media screen and (max-width:800px){
	.sub .list6 figure img {
		width: 20%;		/*�ʐ^�̕�*/
	}	}


	
/*生徒さんの声の最初ブロックtp-clinic5横３ずっとをbiz53風に縦長全面写真白帯に変更spanをh4。本体なし
---------------------------------------------------------------------------*/
.list51 img {
	float: left;		
	width: 16.65%;			/*幅。４つあるので100%÷4個=25%です。６つに変えた*/
	animation-name: img;		/*アニメーションのキーフレームの名前。上の@keyframesの横の名前です。*/
	animation-duration: 0.5S;	/*アニメーション(上のkeyframe)を実行する時間。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
	position: relative;
	overflow: hidden;
	height: 360px;/*２４０高さ100%*/
	object-fit: cover;
}


.list51 img a {
	display: block;text-decoration: none;
	text-align: center;
	height: 100%;
	background: rgba(0,0,0,0.7);	
}

/*メニュー名。テキストがあるボックス。透明にしておいた、。ずれているし・・サブでで表示？？*/
.list51 h4 {
	display: block;
	position: absolute;
	left: 0px;		/*メニューに対して、左からの配置場所指定。*/
	bottom: 5%;	/*外したら上についたが左がこい３つかさなりメニューに対して、下からの配置場所指定。*/
	width: 100%;
	background: #ffffff;				/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.1);	/*背景色。0,0,0は黒のことで、0.5は色が50%でた状態のこと。*/
	padding: 30px 0;	/*上下、左右へのボックス内余白*/
}

/*テキストのマウスオン時*/
.list51 h4 a:hover {
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*マウスオン時の設定*/
.list51 img a:hover {
	background: transparent;	/*マウスオン時に#mainimgのbackground(#000の黒)を透明にする。暗く見える写真が本来の色で出ます。*/

}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list51 img {
		width: 33.3%;height: 240px;/*２４０高さ100%*/		
}}

	/*「講座の得られるもの」学べるスキル研究家の下/混ぜ方の説明でtp-biz40クリスマスとバレンタインのお菓子教室毎ねん追加
	---------------------------------------------------------------------------*/
	/*ボックスの設定*/
	.list26 {
		margin-bottom: 15px;	/*overflow: hidden;ボックス間のスペース*/
		position: relative;
		overflow: hidden !important;
		padding: 2.5%;	/*ボックス内の余白*/
		background: #fff;	/*背景色*/
		-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.1が透明度。*/
		box-shadow: 1px 1px 2px rgba(0,0,0,0.1);			/*同上*/
	}
	.list26 a {
		background: #fff;	/*背景色*/
		display: block;
		text-decoration: none;
		overflow: hidden !important;
		margin: -2.5%;
		padding: 2.5%;
	}
	/*ボックス内の段落タグ設定*/
	.list26 p {
		padding: 0px;
		margin-left: 34%;	/*左の写真とのバランスをとって設定*/
	}
	/*ボックス内の写真設定*/
	.list26 figure img {
		float: left;		/*画像を左へ回り込み*/
		width: 40%;			/*写真の幅*/
		height: auto;		/*写真の高さ*/
		margin-right: 4%;
	}
	/*ボックス内のh4タグ設定*/
	.list26 h4 {font-weight: bold;
		font-size: 23px;	/*文字サイズ*/
		color: #cf2480;		/*文字色*/
		margin-left: 34%;	/*左の写真とのバランスをとって設定*/
	}
/*ボックス内のh4タグ設定追加自己流*/
.list26 h4 span {
	font-size: 13x;	/*文字サイズ*/
	color: #cf2480;		/*文字色*/
	margin-left: 34%;	/*左の写真とのバランスをとって設定*/
}
	
	/*ボックス内の矢印マーク設定*/
	.list26 a::before {
		content: "→";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
		background: #e6e6e6;	/*背景色*/
		color: #ccc;			/*文字色*/
		font-size: 70px;		/*文字サイズ*/
		line-height: 1;
		width: 9px;			/*幅。下の15pxと合計した数字がline-height(80px)になるようにする。*/
		padding-left: 15px;		/*左側へのボックス内余白。上の65pxと合計した数字がline-height(80px)になるようにする。*/
		line-height: 95px;		/*行間。上の２行の合計値と合うように。*/
		position: absolute;
		right: -30px;	/*ボックスの右から-40pxの場所に配置*/
		top: 32%;		/*ボックスの上から32%の場所に配置*/
		border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
	}
	/*マウスオン時*/
	.list26 a:hover::before {
		background: #cf2480;	/*背景色*/
		color: #fff;			/*文字色*/
	}
	/*コンパクトタイプのボックス用　追加設定*/
	.list26.compact {
		width: 23.5%;		/*compactタイプの幅*/
		float: left;		/*ボックスを左に回り込み*/
		height: 260px;		/*compactタイプの高さ*/
		margin-left: 3.5%;	/*ボックス間の余白*/
		overflow: hidden !important;
	}
	.list26.compact a {
		height: 100%;
	}

	/*コンパクトタイプのh4タグ追加設定*/
	.list26.compact h4 {
		margin-left: 0;
		font-size: 13px;
	}
	/*コンパクトタイプの段落タグ追加設定*/
	.list26.compact p {
		margin-left: 0;
		font-size: 11px;
		line-height: 1.4;
		margin-bottom: 5px;
	}
	.list26.compact figure img {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
	}
	.list26 table {
		font-size: 12px;	/*文字サイズ*/
		background: #FFF;	/*背景色*/
		width: 65%;
		margin-bottom: 5px;
	}
.list26 table,
	.list26 table td,
	.list26 table th{
		border: 1px solid #bcbcbc;	/*枠線の幅、線種、色*/
	}
.list26 table td,
.list26 table th{
		padding: 1%;	/*テーブル内の余白*/
	}
	.list26 table th{
		width: 18%;		/*幅*/
		text-align: center;		/*文字をセンタリング*/
		font-weight: normal;	/*デフォルトの太字を標準にする設定*/
		background: #dfe0c8;	/*背景色*/
	}
	/*白い説明用ブロック*/
	.list26 table td {
		width: 31%;	/*幅*/
	}

	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
		.list26 p {font-size: 14px;	/*文字サイズ*/
			margin-left: 0;line-height: 1.3;		/*追加まちがっているかも行間。上の２行の合計値と合うように。*/
		}
		/*ボックス内の写真設定*/
		.list26 figure img {
			float: none;
			width: 100%;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
		}
		/*ボックス内のh4タグ設定*/
		.list26 h4 {font-weight: bold;
			margin-left: 0;	font-size: 20px;
		}


		/*コンパクトタイプのボックス追加設定*/
		.list26.compact {
			width: 100% !important;
			float: none;
			height: auto;
			margin-left: 0;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			padding: 10%;
		}
	
		.list26 table {
			width: 100%;
		}	}

/*メディアの各記事紹介ページの各ブロックtp-cool７ずっと横１
---------------------------------------------------------------------------*/

.list52 {
	position: relative;
	padding: 20px 60px;		/*ボックス内の余白overflow: hidden;。ここを変更する際は、下の「.list a」のpaddingとmarginの数字も合わせる。marginの方はマイナス記号を忘れずに。*/
	/*border: 1px solid #fff;	-top上の線の幅、線種、色ｃｃｃ*/
}
.list52 a {
	text-decoration: none;display: block;
	padding: 20px;	/*変更する場合は、上の「#main .list」のoverflow: hidden;paddingの説明を読んで下さい。*/
	margin: -20px;	/*変更する場合は、上の「#main .list」のpaddingの説明を読んで下さい。*/
}
/*マウスオン時の背景色*/
.list52 a:hover {
	background: #eee;	/*背景色*/
}
/*リンクを貼った際に出る「→」マーク*/
.list52 a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;text-align: center;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 30px;	/*幅*/
	line-height: 30px;	/*高さ*/
	background: #0b24c2;	/*背景色*/
	color: #fff;	/*文字色*/
}
/*マウスオン時の「→」マーク*/
.list52 a:hover::before {
	background: #576edd;	/*背景色*/
}
/*ボックス内のh4タグ設定*/
.list52 h4 {
	border-left: 3px solid #ffd3bb;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	
	margin-bottom: 1.5em;	/*0.5下に少しスペースを空ける*/
	margin-left: 32%;	/*左側に空けるスペース。下の画像の幅を変更する場合はここも調整して下さい。*/
	font-weight: 700;
	font-size: 26px;
	padding: 0px;
	color: #eea882;	/*文字色*/
}

.list52 p {
	padding: 0px !important;
	margin-left: 34%;	/*左側に空けるスペース。下の画像の幅を変更する場合はここも調整して下さい。*/

	font-size: 13px;	/*文字サイズ*/
	line-height: 1.5;	/*行間
	height: auto;
	overflow: auto;バーが縦横でちゃう*/
	

}
.list52 figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*画像の幅*/
	height: auto;	/*高さ*/

	margin-right: 10px;
}
/*最後ボックスの設定*/
.list52:last-of-type, .main .list52:last-of-type {
	border-bottom: 1px solid #ccc;	
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	.list52 {
		padding: 20px;		/*ボックス内の余白overflow: hidden;。ここを変更する際は、下の「.list a」のpaddingとmarginの数字も合わせる。marginの方はマイナス記号を忘れずに。*/
		border: 1px solid #fff;	/*-top上の線の幅、線種、色ｃｃｃ*/
	}
.list52 h4 {
	line-height: 1.2;	/*行間*/
	font-size: 22px;
}
.list52 p {
	padding: 0px !important;
	margin: 2%;	/*左側に空けるスペース。*/
	font-size: 12px!important;	/*文字サイズ*/
	line-height: 1.4;	/*行間
	height: auto;
	overflow: auto;バーが縦横でちゃう*/

}}


/*tp-home4の四角でうえに飛び出た。ダロワイヨ風）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
 .list-dalloyau-fr{
	position: relative;
	float: auto;	/*左に回り込み*/
	width: 100%;		/*ボックス幅*/
	margin: 0 0% 40px;	/*上、左右、下へ、ボックスの外側に空けるスペース*/
	text-align: center;		/*内容を中央よせ*/
}
/*ボックス内の画像*/
.list-dalloyau-fr figure {
	width: 100%;		/*ボックス幅*/
		/*margin-bottom: -20px;画像の下に空けるスペース*/
}
.list-dalloyau-fr figure a:hover{
	opacity: 0.8;	/*マウスオン時。透明度80%にする。*/
}
/*ボックス内のh4（見出し）タグ*/
.list-dalloyau-fr h4 {
	position: absolute;
	bottom: 0px;	/*list2ボックスの上から0pxの場所に配置*/

	width: 80%;	/*幅*/
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,1.0);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #202124;	/*margin-top: 40px; 文字色*/

      margin-left: 10%; 
      margin-right: 10%;
	
    padding: 15% 3% 25%;		
     
     
    margin-bottom: -40px;	/*下に空けるボックスの外側への余白*/
    font-size: 220%;		/*文字サイズ*/
    text-align: center;		/*文字を中央に*/
    line-height: 1.5;		/*行間を基準より少し狭くする*/
}
.list-dalloyau-fr h4 span { /*h2タグ内のspanタグ（英語の飾り文字）*/
	  display: block;
	  font-size: 40%;	/*文字サイズ*/
	  color: #c30000;	/*文字色*/
	  letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
	
}

/*.list-dalloyau-fr p {
	padding: 10px !important;
} /*Serviceページの各ブロックbiz46ｓｐでも横並びsp出は写真のみ？？これはこれででも指定していないはず不思議」
---------------------------------------------------------------------------*/
/*どこでつかっている？各ボックスの設定*/
.list53 {
	position: relative;
	overflow: hidden;
	float: left;		/*左に回り込み*/
	width: 46%;	/*幅*//*ボックス幅46*/
	padding: 1%;		/*ボックス内の余白*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin: 0 0.8% 20px;		/*上、左右、下へのボックスの外に空けるスペース*/
	-webkit-transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
	transition: 0.3s;			/*同上*/
}
.list53 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 1%;	/*ボックス内の余白*/
	margin: -1%;
}
/*マウスオン時の背景色*/
.list53:hover {
	box-shadow: none !important;	/*ボックスの影をなくす設定*/
}
/*リンクを貼った際に出る「→」マーク*/
.list53 a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 30px;	/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
	background: #333;	/*背景色（古いブラウザ用）*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ。50%にすると円になる。*/
}
/*マウスオン時の「→」マーク*/
.list53 a:hover::before {
	background: #f6a72a;	/*背景色*/
}
/*ボックス内右側のテキストパーツ*/
.list53 .text53 {
	font-size: 13px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
	height: 7.5em;		/*高さ*/
	overflow: hidden;	/*高さを超えると非表示になる*/
}
/*ボックス内のh4タグ設定*/
.list53 h4 {
	font-size: 16px;
	padding: 0px;
	color: #f6a72a;	/*文字色*/
}
.list53 p {
	padding: 0px !important;
}

.list53 .img53 {
	float: left;	/*左に回り込み*/
	width: 160px;		/*幅*/
	height: 160px;		/*高さ*/
	margin-right: 10px;
}

/*画面幅480px以下の設定しいていないのにspで画像しか出ない不思議リスト５３
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){}
/*クリニック３の最初の丸いlist1（トップページの「こんなお悩みありませんか？」のブロック）
---------------------------------------------------------------------------*/

.list54 {
	overflow: hidden;
	width: 20%;		/*ブロック幅*/
	float: left;	/*左に回り込み*/
	margin-left: 1%;	/*ボックスの外側(左側)に空けるスペース*/
	padding: 2%;		/*ボックス内の余白*/
}
/*h4見出し*/
.list54 h4 {
	font-size: 30px;	/*文字サイズ*/
	text-align: center;	/*文字を中央に*/
	color: #2c3c63;		/*文字色*/
}
/*figure画像*/
.list54 figure {
	border-radius: 50%;	/*角丸のサイズ。50%にすると円形になる。*/
	background: #fff;	/*背景色*/
	padding: 20px;		/*余白*/
	box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.2);	/*影。右へ、下へ、ぼかす範囲、広げる範囲。0,0,0は黒の事で0.2は透明度20%の事*/
}

.list54 p {
	padding: 0 !important;
}



/*aタグにclass="btn"をつけた場合。トップページの「こんなお悩みありませんか？」ブロック内のボタンで使用。
---------------------------------------------------------------------------*/
a.btn54 {
	display: block;text-decoration: none;
	text-align: center;	/*テキストを中央に*/
	background: #2c3c63;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#2c3c63, #1a233a);/*背景グラデーション*/
	color: #fff;	/*文字色*/
	box-shadow: 2px 3px 2px rgba(0,0,0,0.2);	/*影。右へ、下へ、ぼかす範囲。0,0,0は黒の事で0.2は透明度20%の事*/
	border-radius: 3px;	/*角丸のサイズ*/
	padding: 10px 0;	/*上下、左右への余白*/
	font-size: 13px;	/*文字サイズ*/
}
/*マウスオン時*/
a:hover.btn54 {
	background: #fff;	/*背景色*/
	color: #2c3c63;		/*文字色*/
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	/*list1（トップページの「こんなお悩みありませんか？」のブロック）
	---------------------------------------------------------------------------*/
	/*各ブロックの設定*/
	.list54 {
		width: 44%;		
	}
	
	.list54 h4 {
		font-size: 20px;	
	}}

 

/*tpbiz54 list（トップページやServiceページで使っている横長ブロック）
---------------------------------------------------------------------------*/
.list55 {
	position: relative;overflow: hidden;
	display: flex;
	align-items: center;
	background: #000;	
	color: #fff;		
	margin-bottom: 1px;	/*ボックス同士に空けるスペース*/
}
/*リンクテキストの文字色*/
.list55 a {
	color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
.list55 h4 {
	margin-bottom: 10px;	/*下のテキストとの間に空けるスペース*/
	font-size: 140%;		/*文字サイズ*/font-weight: bold;	/*デフォルトの太字を標準にする設定*/
}
/*ボックス内のp（段落）タグ*/
.list55 p {
	padding: 0;		/*余白のリセット*/
}
/*ボックス内のfigure画像*/
.list55 figure {
	float: left;	/*左に回り込み*/
	width: 30%;		/*画像の幅*/
}
.list55 .text {
	float: right;	/*右に回り込み*/
	width: 64%;		/*幅*/
	margin: 3%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}
.btn55 a {
	display: block;text-decoration: none;
	background: #695e4d url(https://creme-cremes.com/components/images/arrow4.png) no-repeat 95% center / 15px;	/*背景色、アイコン画像の読み込み。95%は左からの配置場所、最後の15pxは画像幅。*/
	color: #fff;	/*文字色*/
	max-width: 360px;	/*最大幅300。画面幅が狭くなった場合、小さく縮小されていきます。*/
	text-align: center;	/*テキストをセンタリング*/
	padding: 5px 30px;	/*上下、左右へのボタン内の余白*/
	margin: 20px auto 0;	/*上、左右、下へのボタンの外側への余白*/
}
.btn55 a:hover {
	position: relative;
	left: 1px;
	top: 1px;
}

/*tpbiz41PC２メインコンテンツ内のボックス（list）設定写真ｓｐ細いｐｃでカーソル理論
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list57 {
	float: left;	/*左に回り込み*/
	width: 46%;		/*幅*/
	overflow: hidden;	/*ボックスから飛び出たらスクロールを出す設定auto。飛び出た部分を非表示にしたいならautoでなくにする。*/

	margin-left: 2.5%;	/*	ボックス同士の左右間の余白*/
	margin-bottom: 20px;	/*ボックス同士の上下間の余白*/
	background: #000;		/*背景色*/
	color: #fff;	/*文字色*/
	border: 1px solid #000;	/*枠線の幅、線種、色*/
	border-radius: 6px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	height: 350px;			/*(CMS専用)*/
			/*height: 230px;	高さ（下の「#main .list a」の高さと揃える）*/
	line-height: 1.4;
	position: relative;
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は透明度20%の事。*/
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);			/*同上*/
}
.list57 a {
	display: block;
	/*overflow: auto;ボックスから飛び出たらスクロールを出す設定auto。飛び出た部分を非表示にしたいならautoでなくにする。*/
	text-decoration: none;
	color: #fff;	/*文字色（ボックスにリンク指定がされた場合に適用される）*/

	height: 230px;	/*高さ（上の「#main .list」の高さと揃える）*/
}
.list57 a:hover {
	background: #fff;	/*マウスオン時の背景色*/
	color: #000;		/*マウスオン時の文字色*/
}
/*ボックスにリンク指定がされた場合に出る「→」マーク*/
.list57 a::before {
	content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
	position: absolute;
	right: 20px;	/*ボックスの右から20pxの場所に配置*/
	top: 20px;		/*ボックスの上から20pxの場所に配置*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);	/*rgb指定での背景色。「0,0,0」は黒の事で「0.5」が透明度50%の事。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 4px;		/*角丸のサイズ*/
	width: 30px;		/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
}
 .list57 a:hover::before {
	background: #000;	/*マウスオン時の「→」マークの背景色*/
}
/*ボックス内の画像設定*/
.list57 .img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	padding-bottom: 10px;	/*画像下に空ける余白*/
}
/*ボックス内のh4（見出し）タグ設定*/
.list57 h4 {
	padding-left: 15px;
	padding-bottom: 5px;
	color: #fff4ee;	/*文字色*/
	font-size: 140%;	/*文字サイズ*/font-weight: bold;	/*デフォルトの太字を標準にする設定*/
}
.list57 p {
	font-size: 12px;	/*文字サイズを少し小さく*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list57 {
	float: none;
	width: auto;
	margin-left: 0;
	height: auto;
}
.list57 a {
	height: auto;
}

}


/*tpスクール３ボックス（list）設定ｐｃ３理論
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list56 {
	float: left;	/*左に回り込み*/
	width: 31%;		/*幅*/
	overflow: hidden;	/*ボックスから飛び出たらスクロールを出す設定auto。飛び出た部分を非表示にしたいならautoでなくにする。*/
	background: #000;	/*背景色*/
	color: #ffffff;		/*文字色*/
	margin-left: 1.5%;	/*ボックス同士の左右間の余白*/
	margin-bottom: 30px;	/*ボックス同士の上下間の余白*/
	border-radius: 6px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
	height: 300px;			/*高さ（下の「.list a」の高さと揃える）*/
	line-height: 1.4;
	position: relative;
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は透明度20%の事。*/
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);			/*同上*/
}
.list56 a {
	display: block;
	overflow: auto;
	text-decoration: none;
	height: 300px;	/*高さ（上の「.list」の高さと揃える）*/
	color: #fff;	/*文字色*/
}
.list56 a:hover {
	background: #b71600;	/*マウスオン時の背景色*/
	color: #fff;			/*マウスオン時の文字色*/
}
/*ボックスにリンク指定がされた場合に出る「→」マーク　（※list2も共通）*/

.list56 a::before {
	content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
	position: absolute;
	right: 20px;	/*ボックスの右から20pxの場所に配置*/
	top: 20px;		/*ボックスの上から20pxの場所に配置*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);	/*rgb指定での背景色。「0,0,0」は黒の事で「0.5」が透明度50%の事。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 4px;		/*角丸のサイズ*/
	width: 30px;		/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
}
/*マウスオン時の「→」マーク　（※list2も共通）*/

.list56 a:hover::before {
	background: #000;	/*背景色*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
}
/*ボックス内の画像設定*/
.list56 .img {
	width: 100%;	/*画像の幅*/
	height: auto;	/*画像の高さ*/
	padding-bottom: 10px;	/*画像下に空ける余白*/
}
.list56 h4 {
	padding-left: 20px;
	color: #fff4ee;	/*文字色*/
	font-size: 140%;		/*文字サイズ*/font-weight: bold;	/*デフォルトの太字を標準にする設定*/
}
.list56 p {
	font-size: 80%;	/*文字サイズを少し小さく*/
}




/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	.list56 {
		float: none;
		width: auto;
		margin-left: 0;
		height: auto;
	}
	.list56 a {
		height: auto;
	}
	
}

/*tpsimple12ヘッダー（写真の説明用ロゴが入った最上段のブロック）上手になっていく様子ショートケーキ１日単発講座
---------------------------------------------------------------------------*/

.list-figcaption {
	position: relative;
	overflow: hidden;
	background: #fff;	/*背景色*/
	padding: 3.5%;		/*ボックス内の余白*/
	border: 1px solid #e0e0e0;	/*枠線の幅線種、色*/
	border-radius: 10px;	/*角丸のサイズ*/
	margin-bottom: 15px;	/*ボックスの下に空ける余白*/
}
.list-figcaption h4 {text-align: center;	/*テキストを中央に*/
	color: #000;	/*文字色*/
	margin-left: 0;
	font-size: 14px;	/*compactタイプの文字サイズ*/
	font-weight: 600;	/*デフォルトの太字を標準にする設定*/
}
/*ボックス内の段落タグ共通設定*/
.list-figcaption p {
	padding: 0px;
	margin-left: 0;	/*画像とのバランスをとって設定（※横長タイプ用）*/

	font-size: 12px;	/*compactタイプの文字サイズ*/
	line-height: 1.4;
	margin-bottom: 5px;
}

.list-figcaption figure img {
	float: none;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list-figcaption {
	
	margin:2% 5px;	/*ボックスの下に空ける余白*/
}
.list-figcaption p {
	padding: 0px;
	margin-left: 0;	/*画像とのバランスをとって設定（※横長タイプ用）*/

	font-size: 13px;	/*compactタイプの文字サイズ*/
	line-height: 1.4;
	margin-bottom: 5px;
}}

/*Galleryページtpsimple12コンパクトリスト写真の説明*/
.list-figcaption-compact {
	width: 18%;	/*幅*		/*compactタイプの幅23*/
	height: 320px;	/*compactタイプの高さ*/
	float: left;	/*ボックスを左に回り込み*/
	margin-right: 2.5%;	/*ボックス間の余白*/
}
/*コンパクトタイプのh4タグ追加設定*/
.list-figcaption-compact h4 {text-align: center;	/*テキストを中央に*/
	margin-left: 0;
	font-weight: 600;	/*デフォルトの太字を標準にする設定*/
}
/*コンパクトタイプの段落タグ追加設定*/
.list-figcaption-compact p {
	margin-left: 0;
	font-size: 11px;	/*compactタイプの文字サイズ*/
	line-height: 1.4;
	margin-bottom: 5px;
}
/*コンパクトタイプの写真追加設定*/
.list-figcaption-compact figure img {
	float: none;
	width: auto;
	margin: 0;
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*コンパクトタイプのボックス追加設定*/
.list-figcaption-compact {
	width: 45%;		/*compactタイプの幅23列から2列にしたい*/
	height: 320px;	/*compactタイプの高さ*/
	float: left;	/*ボックスを左に回り込み*/
	margin-right: 2.5%;	/*ボックス間の余白*/
}
/*コンパクトタイプのh4タグ追加設定*/
.list-figcaption-compact h4 {line-height: 1.4;

}

	/*コンパクトタイプの段落タグ追加設定*/
	.list-figcaption-compact p {
		margin: 5px;
		font-size: 10px !important;	/*line-height: 1.4;compactタイプの文字サイズ*/
		margin-bottom: 5px;
	}
}


/*biz29PC横２SPスクエア１start.html内の各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list58 {
	position: relative;
	overflow: hidden;
	float: left;
	height: 730px;	/*ボックスの高さ*/
	width: 47%;		/*ボックスの幅*/
	line-height: 1.6;padding : 10px ;
	margin-left: 2%;
	margin-bottom: 20px;
	margin-top: 20px;
	background: #fff4ee;	
}
/*ボックス内の段落タグ設定*/
.list58 p {
	padding-top : 10px ;
    padding-left : 20px ;
    padding-right : 20px ;
    padding-bottom : 20px ;
    font-size: 14px;

}
/*ボックス内のh4タグ設定*/
.list58 h4 {
	color: #313131;	/*文字色*/ 
	font-size: 20px;
    font-weight: bold;
}
/*写真の設定*/
.list58 figure {
	padding: 5px;	/*写真と枠線との余白設定*/
	margin-bottom: 5px;	/*画像の下に少し余白を空ける設定*/
	border: 1px solid #CCC;	/*画像の枠線の幅、線種、色*/
}


/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

	.list58 {
		height: 340px;	/*ボックスの高さ*/
	}	}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.list58 {
	float: none;
	height: auto;	/*ボックスの高さ*/
	width: auto;		/*ボックスの幅*/
	margin-left: 0;
}	}
		
		/*list２８ブロック（works.htmlで使用）tp-biz53のリストをSPも PC横２　にした.[細長くバナー風に
		---------------------------------------------------------------------------*/
	
		.list28 {position: relative;
			float: left;	/*左に回り込み*/
			width: 50%;			/*幅*/
			height: 50px;		/*追加。写真の高さ低めに*/
			margin-left: 0%;	/*2.5左に空けるスペース*/
			margin-bottom: 20px;	/*下に空けるスペース*/
			background: #fff;	/*背景色*/
		}
		.list28 a {
			display: block;
			text-decoration: none;
		}
		/*マウスオン時*/
		.list28 a:hover {
			color: #fff;	/*文字色*/
		}
		
		/*figure画像*/
		.list28 a figure {
			opacity: 1;	/*リンクを指定した際は60%だけ色を出す。*/
		}
		/*マウスオン時のfigure画像*/
		.list28 a:hover figure {
			opacity: 0.6;		/*リンクを指定した際のマウスオン時に色を100%出す。*/
		}
		/*h4タグ*/
		.list28 h4 {
			position: absolute;
			bottom: 0px;	/*0px下からの配置場所指定。*/
			left: 0px;		/*左からの配置場所指定。*/
			width: 100%;
			background: #fff;	/*背景色（古いブラウザ用）*/

			background: rgba(255,255,255,0.3);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
			text-align: center;	/*内容をセンタリング*/
			padding: 0px 0;	/*40上下、左右への余白*/
		}
		
		
		/*画面幅480px以下の設定
		------------------------------------------------------------------------------------------------------------------------------------------------------*/
		@media screen and (max-width:480px){
		.list28 h4 {
			padding: 0px 0;	/*１０上下、左右への余白*/
			
		}}
		
		
		
		
		/*画像*/
		/*ビズ46　ABC風にPC横長２SPで写真オンの横２
/*Serviceページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定使っている？*/
.list59 {
	position: relative;
	overflow: hidden;
	float: left;		/*左に回り込み*/
	width: 40%;			/*ボックス幅*/
	padding: 1%;		/*ボックス内の余白*/
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	margin: 0 0.8% 20px;		/*上、左右、下へのボックスの外に空けるスペース*/
	
}
.list59 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 1%;	/*ボックス内の余白*/
	margin: -1%;
}
.list59:hover {
	box-shadow: none !important;	/*ボックスの影をなくす設定*/
}
/*リンクを貼った際に出る「→」マーク*/
.list59 a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
	width: 30px;	/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
	background: #ccc;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.2);	/*背景グラデーション。0,0,0は黒の事で、0.3は透明度30%の事。*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ。50%にすると円になる。*/
}
/*マウスオン時の「→」マーク*/
.list59 a:hover::before {
	background: #766038;	/*背景色*/
}
/*ボックス内右側のテキストパーツ*/
.list59 .text {
	font-size: 13px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
	height: 7.5em;		/*高さ*/
	overflow: hidden;	/*高さを超えると非表示になる*/
}

/*ボックス内のh4タグ設定*/
.list59 h4 {
	font-size: 18px;
	padding: 0px;
	color: #766038;	/*文字色*/
}
/*ボックス内のp(段落)タグ設定*/
.list59 p {
	padding: 0px !important;
}
/*ボックス内の画像*/
.list59 .img {
	float: left;	/*左に回り込み*/
	width: 130px;		/*幅*/
	height: 140px;		/*高さ*/
	margin-right: 10px;
}
/*各ボックスの設定（商品ボックス１カラム時）*/

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*リスト28のアレンジ￥
*/
.list59 {position: relative;
	float: left;	/*左に回り込み*/
	width: 40%;			/*幅*/
	height: 150px;		/*追加。写真の高さ低めに*/

	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	line-height: 1.5;		/*行間をすこし狭く。デフォルトは冒頭のbody内にあります。*/
	font-size: 30px;		/*文字サイズ*/
	text-shadow: 1px 1px #000;	/*テキストの影。右に、下に、色。*/
}


.list59 a {
	display: block;
	text-decoration: none;
	padding: 3px;	
	background: rgba(0,0,0,0.4);	
	color: #fff;	/*文字色*/
	border:2px solid rgba(0,0,0,0.2);	/*枠線の幅、線種、色。*/
}




/*マウスオン時*/
.list59 a:hover {
	color: #fff;	/*文字色*/
	background: transparent;	/*上で指定したbackgroundを透明にする。つまり、下で読み込んでいる写真が鮮明に出ます。*/
}
/*figure画像*/
.list59 a figure {
	opacity: 1;	/*リンクを指定した際は60%だけ色を出す。*/
}
/*マウスオン時のfigure画像*/
.list59 a:hover figure {
	opacity: 0.6;		/*リンクを指定した際のマウスオン時に色を100%出す。*/
}
/*h4タグ*/
.list59 h4 {
	position: absolute;
	top: 0px;	/*0px下からの配置場所指定。*/
	left: 0px;		/*左からの配置場所指定。*/
	width: 100%;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.3);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	text-align: center;	/*内容をセンタリング*/
	padding: 0px 0;	/*40上下、左右への余白*/color: #fff;	/*文字色*/
} .list59 p {display: none;}
    .list59 p span {display: none;}
    /*リンクを貼った際に出る「→」マーク*/
    .list59 a::before {display: none;}
	}	
	/*hoby5メインコンテンツ内の「list2」ボックス
	---------------------------------------------------------------------------*/
	.list60 {
		overflow: hidden;	position: relative;
		width: 22%;	float: left;	
		text-align: center;	
		margin-left: 2.4%;	
		font-size: 12px;	
		margin-bottom: 20px;	
	}
.list60 a {
		display: block;text-decoration: none;overflow: hidden;
	}

	.list60 h4 {	position: absolute;
		top: 0px;	/*0px下からの配置場所指定。*/
		left: 0px;		/*左からの配置場所指定。*/
		width: 100%;
		background: #fff;	/*背景色（古いブラウザ用）*/
		background: rgba(255,255,255,0.3);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
		text-align: center;	/*内容をセンタリング*/
		padding: 0px 0;	/*40上下、左右への余白*/color: #fff;	/*文字色*/
		
		height: 1.5em;	/*高さ。レイアウトが崩れるのを防ぐ為、２行目以降は非表示になります。*/
	}
	/*写真のマウスオン時*/
	 .list60 a:hover figure img {
		opacity: 0.7;	/*透明度*/
	}
	
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*メインコンテンツ内の「list2」ボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list60 {
	width: 45%;			/*幅*/
	margin-left: 3%;	/*ボックス同士に空ける左右間のスペース*/
}

	}
	
	/*tpbiz41PC２講座ツ内のstart-1day.html外枠なし、文字サイズよい
	---------------------------------------------------------------------------*/
	
	.list61 {
		float: left;	/*左に回り込み*/
		width: 48%;		/*４６幅*/
		overflow: hidden;	/*ボックスから飛び出たらスクロールを出す設定auto。飛び出た部分を非表示にしたいならautoでなくにする。*/
	
		margin-left: 0.5%;	/*	２．５ボックス同士の左右間の余白*/
		margin-bottom: 20px;	/*ボックス同士の上下間の余白*/
		background: ;		/*#000背景色*/
		color: #202124;	/*文字色*/
		border: 1px solid #fff;	/*枠線の幅、線種、色*/
		border-radius: 3px;		/*角丸のサイズ。この行削除すれば通常の長方形になる。*/
		height: 530px;			/*430*/
				/*height: 230px;	高さ（下の「#main .list a」の高さと揃える）*/
		line-height: 1.4;
		position: relative;
	}
	.list61 a {
		display: block;
		overflow: auto;
		text-decoration: none;
		color: #202124;	/*文字色（ボックスにリンク指定がされた場合に適用される）*/
	
		height: 630px;	/*高さ（上の「#main .list」の高さと揃える）*/
	}
	.list61 a:hover {
		background: #ffd3bb;	/*マウスオン時の背景色*/
		color: #000;		/*マウスオン時の文字色*/
	}
	/*ボックスにリンク指定がされた場合に出る「→」マーク*/
	.list61 a::before {
		content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
		position: absolute;
		right: 20px;	/*ボックスの右から20pxの場所に配置*/
		top: 20px;		/*ボックスの上から20pxの場所に配置*/
		background: #000;	/*背景色（古いブラウザ用）*/
		background: rgba(0,0,0,0.5);	/*rgb指定での背景色。「0,0,0」は黒の事で「0.5」が透明度50%の事。*/
		color: #fff;	/*文字色*/
		border: 1px solid #fff;	/*枠線の幅、線種、色*/
		border-radius: 4px;		/*角丸のサイズ*/
		width: 30px;		/*幅*/
		line-height: 30px;	/*高さ*/
		text-align: center;
	}
	 .list61 a:hover::before {
		background: #000;	/*マウスオン時の「→」マークの背景色*/
	}
	/*ボックス内の画像設定140px*/
	.list61 .img {
		width: 100%;
		height: 240px;
		object-fit: cover;
		padding-bottom: 10px;	/*画像下に空ける余白*/
	}
	/*ボックス内のh4（見出し）タグ設定detenai*/
	.list61 h4 {
		font-weight: bold;	/*デフォルトの太字を標準にする設定*/
		font-size: 18px;
		margin-bottom: 5px;
		color: #6b6351;	/*文字色*/
		text-align: center;
		border-bottom: 2px dotted #6b6351;	/*下線の幅、線種、色*/
	}
	.list61 p {
		font-size: 12px;	/*文字サイズを少し小さく*/
			margin-left : 10px ;
			margin-right : 10px ;	}
	
	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
	
		.list61 {
		float: none;
		width: auto;
		margin-left: 0;
		height: auto;
	}
	.list61 a {
		height: auto;
	}	}
	
/*「list６５」ボックスｓｐ写真のみＰＣ横２
---------------------------------------------------------------------------*/

.list65 {
	position: relative;overflow: hidden;
	margin-bottom: 20px;	/*ボックスの下に空ける余白*/
}
.list65 a {
	text-decoration: none;display: block;overflow: hidden;
	border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
	padding: 3%;	/*ボックス内の余白*/
	background: #fff;	/*背景色*/
}
.list65 a:hover {
	border: 1px solid #999;	/*マウスオン時の枠線の幅、線種、色*/
}

.list65 h4 {
	margin-bottom: 0.5em;
	color: #62b685;		/*文字色*/
	margin-left: 22%;	/*左側の写真幅とのバランスをとって設定*/
}
/*ボックス内のh4タグの１文字目への設定*/
.list65 h4::first-letter {
	border-left: 3px solid #62b685;	/*左側の線の幅、線種、色*/
	padding-left: 10px;	/*線と文字との余白*/
}

.list65 p {
	padding: 0px;
	margin-left: 22%;	/*左側の写真幅とのバランスをとって設定*/
}

.list65 figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 40%;		/*写真の幅*/
	margin-right: 2%;	/*写真の右側に空ける余白*/
}
/*マウスオン時のボックス内の写真設定*/
.list65 a:hover figure img {
	opacity: 0.8;	/*透明度80%にする設定*/
}

/*画面幅480px以下の設定ｓｐ写真のみ
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	.list65 {
	width: 45%;			/*幅*/
	margin-left: 3%;	/*ボックス同士に空ける左右間のスペース*/
	
	overflow: hidden;
	position: relative;
	
	float: left;	/*左に回り込み*/
	text-align: center;	/*内容をセンタリング*/
	
	font-size: 12px;	/*文字サイズ*/
	margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
}
.list65 a {
	display: block;text-decoration: none;overflow: hidden;
}
/*h4タグ*/
.list65 h4 {	position: absolute;
	top: 0px;	/*0px下からの配置場所指定。*/
	left: 0px;		/*左からの配置場所指定。*/
	width: 100%;
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.3);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	text-align: center;	/*内容をセンタリング*/
	padding: 0px 0;	/*40上下、左右への余白*/color: #fff;	/*文字色*/
	
	height: 1.5em;	/*高さ。レイアウトが崩れるのを防ぐ為、２行目以降は非表示になります。*/
}
/*写真のマウスオン時*/
 .list65 a:hover figure img {
	opacity: 0.7;	/*透明度*/
}}


	

/*2列にしたいclear: both;job2　ｈ２　タイプ１のタイプをリストして牡丹タグこれにネオン風tp111ブラックピンクにシャドウ囲み*/
.list67 {
		float: left;	/*tuika左に回り込み*/
		width: 40%;		/*42NG.tuika幅30*/
	
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #60523f;		/*文字色*/

	border: 1px solid #ffd3bb;	/*枠線の幅、線種、色*/opacity: 1;	/*リンクを指定した際は60%だけ色を出す。*/
	box-shadow: 0px 0px 50px #ffd3bb inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/
	
	background: #333;	/*背景色（古いブラウザ用）*/
	background: url(https://creme-cremes.com/img/z5.jpg) no-repeat center center/cover;	/*背景画像の読み込み*/
	padding: 50px 0px;	/*上下、左右へのボックス内の余白*/
	color: #fff;	/*文字色*/
}

.list67 h4 {
	clear: both;
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #fff;		/*文字色*/

}

.list67 a {
	text-decoration: none;display: block;overflow: hidden;
	padding: 10px;	/*ボックス内の余白*/
	
}
.list67 a:hover {
	box-shadow: none;
	border: 1px solid #ff5293;	/*枠線の幅、線種、色*/
	color: #fff;	/*文字色*/opacity: 0.6;		/*リンクを指定した際のマウスオン時に色を100%出す。*/
}

.list67 h4 span {
	display: block;
	font-size: 14px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	letter-spacing: 0.3em;	/*文字間隔を広くとる設定*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	.list67 {
		float: none;
		width: auto;				
	}
.list67 h4 {
	font-size: 20px;	
}
.list67 h4 span {
	font-size: 10px;	
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
}}

/*biz55 list（おススメ道具など楽天room風worksページで使っている横長ブロック）list61
---------------------------------------------------------------------------*/
/*ボックスの設定list-recommended菓子写真ｐｃ大ｓPすごくよい
　*/
#contents .list-recommended {
	position: relative;
	border-radius: 5px;				/*角丸の指定。ほんの少し角が丸くなります。*/
	overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
	display: flex;
	align-items: center;			/*中のブロックの縦並びの揃え方*/
	background: #000;		/*背景色*/
	color: #fff;			/*文字色*/
	margin: 0 3% 30px;		/*ボックスの下に空けるスペース。上、左右、下への順番。*/
	border: 1px solid rgba(255,255,255,0.5);			/*枠線の幅、線種、色。255,255,255は白の事で0.5は色が50%出た状態の事。*/
}
/*リンクテキストの文字色*/
#contents .list-recommended a {
	color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
#contents .list-recommended h4 {
	margin-bottom: 20px;	/*下のテキストとの間に空けるスペース*/
	font-size: 140%;		/*文字サイズ*/
}
/*ボックス内のp（段落）タグ*/
#contents .list-recommended p {
	padding: 0;		/*余白のリセット*/
}

#contents .list-recommended figure {
	width: 50%;		
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-recommended .text {
	width: 40%;		/*ブロックの幅。下のpaddingの5%とも連動するので変更の際は注意して下さい。*/
	padding: 2% 5%;	/*上下、左右へのブロック内の余白*/
}

/*偶数目のブロックの設定（画像とテキストブロックが左右交互に入れ替わる設定です。全部同じむきがよければこのブロックを削除します。）*/
#contents .list-recommended:nth-of-type(even) .text {
	order: 1;
}

/*装飾文字の設定（共通）*/
#contents .list-recommended::before {
	font-size: 18vw;
	line-height: 1;
	position: absolute;
	color: rgba(255,255,255,0.15);	/*文字色。255,255,255は白のことで、0.15は色が15%出た状態のこと。*/
	
}
/*奇数番目のブロックの文字の配置場所指定*/
#contents .list-recommended:nth-of-type(odd)::before {
	left: -60px;
	top: -40px;
}
/*偶数番目のブロックの文字の配置場所指定*/
#contents .list-recommended:nth-of-type(even)::before {
	right: 0px;
	top: -40px;
}
/*１つ目ブロックに表示させるテキスト*/
#contents .list-recommended:nth-of-type(1)::before {
	content: "Works1";
}
/*２つ目ブロックに表示させるテキスト*/
#contents .list-recommended:nth-of-type(2)::before {
	content: "Works2";
}
/*３つ目ブロックに表示させるテキスト*/
#contents .list-recommended:nth-of-type(3)::before {
	content: "Works3";
}

/*ボックス内のボタン（共通）*/
.btn1-recommended a {
	display: block;
	text-decoration: none;
	border: 1px solid #fff;		/*枠線の幅、線種、色*/
	text-align: center;			/*テキストをセンタリング*/
	padding: 10px 30px;			/*上下、左右へのボタン内の余白*/
	margin: 40px auto 0;		/*上、左右、下へのボックスの外側への余白*/
}
/*ボタンのマウスオン時（共通）*/
.btn1-recommended a:hover {
	background: #fff;	/*背景色*/
	color: #000 !important;		/*文字色*/
}



/*愛用王冠アイコン*/
.list-recommended .icon-aiyou1 {
	width: 40px;		/*幅*/
	height: 40px;		/*高さ*/
	position: absolute;	/*親のrelativeに対して絶対配置させる指示*/
	right: 3px;			/*listブロックに対して右からの配置場所の指定*/
	top: 3px;			/*listブロックに対して上からの配置場所の指定*/
}
/*愛用文字アイコン*/
.list-recommended .icon-aiyou2 {
	width: 40px;		/*幅*/
	height: 40px;		/*高さ*/
	position: absolute;	/*親のrelativeに対して絶対配置させる指示*/
	right: 3px;			/*listブロックに対して右からの配置場所の指定*/
	bottom: 3px;			/*listブロックに対して上からの配置場所の指定*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	#contents .list-recommended {			/*flex-direction: column;中のブロックを並べる向きの指定。これは縦に並べる意味。*/
		padding: 0;		/*余白のリセット*/			
	}
#contents .list-recommended h4 {
	margin-bottom: 20px;font-weight: bold;	
	font-size: 140%;		
}

#contents .list-recommended p {
	font-size: 14px;			
		
}/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-recommended .text {
	width: 65%;		/*ブロックの幅。下のpaddingの5%とも連動するので変更の際は注意して下さい。*/
	padding: 2% 0%;	/*上下、左右へのブロック内の余白*/
}
	#contents .list-recommended figure {
		width: 35%;			
	}	}
/*biz55list-column（トップページで使っている３列ブロック）
---------------------------------------------------------------------------*/
/*カラムブロック全体を囲むボックス*/
#contents .list-column-container-recommended {
	display: flex;
	justify-content: space-between;	/*中のブロックの横並びの揃え方*/
	flex-wrap: wrap;				/*中のブロックを自動で折り返す*/
	margin: 0 3%;
}
/*１カラムあたりの設定*/
#contents .list-column-recommended {
	display: flex;
	flex-direction: column;			/*中のブロックを並べる向きの指定。これは縦に並べる意味。*/
	width: 32%;						/*ブロック幅*/
	margin-bottom: 20px;			/*ブロックの下に空ける余白*/
	background: #000;				/*背景色*/
	color: #fff;					/*文字色*/
	border-radius: 5px;				/*角丸の指定。ほんの少し角が丸くなります。*/
	overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
	border: 1px solid rgba(255,255,255,0.5);			/*枠線の幅、線種、色。255,255,255は白の事で0.5は色が50%出た状態の事。*/
}
/*リンクテキストの文字色*/
#contents .list-column-recommended a {
	color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
#contents .list-column-recommended h4 {
	margin-bottom: 20px;	/*下のテキストとの間に空けるスペース*/
	font-size: 130%;		/*文字サイズ*/
}
/*ボックス内のp（段落）タグ*/
#contents .list-column-recommended p {
	padding: 0;		/*余白のリセット*/font-size: 60%;	
}

/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-column-recommended .text {
	padding: 3%;			/*ブロック内の余白*/
	flex: 1 0 auto;
}
/*IEバグ対応*/
#contents .list-column-recommended figure {
	min-height: 0%;
}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
/*list-column（トップページで使っている３列ブロック）
---------------------------------------------------------------------------*/
/*ボックス内のh4（見出し）タグ*/
#contents .list-column-recommended h4 {
	margin-bottom: 0px;
}}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*list（worksページで使っている横長ブロック）
---------------------------------------------------------------------------*/
/*ボックス内のボタン（共通）*/
.btn1-recommended a {
	padding: 5px 10px;			/*上下、左右へのボタン内の余白*/
}}




/*tp_haken1求人一覧ページ（ist2　横長ブロックタイプ）こねないパンの配合カード2023・5
---------------------------------------------------------------------------*/
/**/
.list-ingredients-and-proportions {
	display: flex;	/*flexボックスを使う指定*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 25px 0;	/*上下、左右へのボックス内の余白*/
}

.list-ingredients-and-proportions div {
	flex: 1;
}

/*１つ目のボックスにのみ上に線を入れる*/
.list-ingredients-and-proportions:nth-of-type(1) {
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*ボックス内のfigure画像*/
.list-ingredients-and-proportions figure {
	width: 20%;			/*画像の幅*/
	margin-right: 20px;	/*画像の右側に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-ingredients-and-proportions h4 {
	margin: 0;				/*デフォルトマージンを一旦リセット*/
	margin-bottom: 10px;	/*下に少し余白を作る*/
	color: #ee5e4f;			/*文字色*/font-size: 1.8em;
	font-weight: 700;
}

.list-ingredients-and-proportions h4 a {
	color: #ee5e4f;			/*リンクテキストの文字色*/
}

.list-ingredients-and-proportions h4 a:hover {
	color: #333;			/*マウスオン時の文字色*/
}

/*ボックス内のpタグ*/
.list-ingredients-and-proportions p {
	margin: 0;
	font-size: 0.7em;		/*文字サイズを70%に。*/
}

/*icon-no-knead-breadパンのレシピ条件
---------------------------------------------------------------------------*/
.icon-no-knead-bread {
	display: inline-block;
	margin: 1px;
	line-height: 1.5;
	padding: 0px 10px;
	border: 1px solid #999;
	color: #999;
	font-weight: normal;
	font-size: 0.8em;
}

/*求人一覧ページのlistボックス内の情報詳細欄（tableっぽく見える所）
---------------------------------------------------------------------------*/
/*ボックス全体*/
.list-ingredients-and-proportions dl.line {
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	font-size: 0.7em;	/*文字サイズを70%に。*/
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*左右のボックス*/
.list-ingredients-and-proportions dl.line dt, .list-ingredients-and-proportions dl.line dd {
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 0 5px;					/*上下、左右へのボックス内の余白*/
}

/*左のボックス*/
.list-ingredients-and-proportions dl.line dt {
	width: 8em;				/*幅。8文字(em)分。*/
	background: #f0f0f0;	/*背景色*/
}
/*右のボックス*/
.list-ingredients-and-proportions dl.line dd {
	width: calc(100% - 8em);	/*「8em」は上の「dl.line dt」のwidthの値です。*/
}

/*list2ブロック内でのline設定*/
.list-ingredients-and-proportions dl.line dt:nth-of-type(1), .list-ingredients-and-proportions dl.line dd:nth-of-type(1),
.list-ingredients-and-proportions dl.line dt:nth-of-type(2), .list-ingredients-and-proportions dl.line dd:nth-of-type(2) {
	border-top: none;
}



/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {/*求人一覧ページ（ist2　横長ブロックタイプ）
	---------------------------------------------------------------------------*/
	/*list2ボックス。１個あたりのボックスの指定です。*/
	.list-ingredients-and-proportions  {
		padding-left: 10px;	/*ボックス内の左側にだけ余白を作る*/
	}
	
	
	/*求人一覧ページのlistボックス内の情報詳細欄（tableっぽく見える所）
	---------------------------------------------------------------------------*/
	/*list2ブロック内でのline設定*/
	.list-ingredients-and-proportions dl.line dd {
		width: calc(50% - 8em - 10px);	/*大きな端末向けの再設定。２列にしたいので、100%でなく半分の50%から引いています。*/
		margin-right: 10px;				/*２列になった際の間のスペース*/
	}
	
	.list-ingredients-and-proportions dl.line {border-top: none;}
	
	.list-ingredients-and-proportions dl.line dt:nth-of-type(1), .list-ingredients-and-proportions dl.line dd:nth-of-type(1),
	.list-ingredients-and-proportions dl.line dt:nth-of-type(2), .list-ingredients-and-proportions dl.line dd:nth-of-type(2) {
		border-top: 1px solid #ccc;
	}
	
}


/*受講したパン>Kさんが、レッスンで作ったパンは、この3品・・・全部お持ち帰り
---------------------------------------------------------------------------*/
.list-container-c3-circle {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}

/*１個あたりのボックス設定*/
.list-c3-circle {
	flex-direction: column;			/*子要素を縦並びにする*/
	
	margin-bottom: 0px;	/*ボックス同士の上下間に空けるスペース*/
	padding: 0px;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	color: #999;			/*文字色*/
	position: relative;
	flex-direction: column;			/*子要素を縦並びにする*/
	width: 31%;		/*幅。３列になります。*/
    display: flex;					/*flexボックスを使う指定*/
    justify-content: space-between;	/*並びかたの種類の指定*/
}
/*ボックス内のfigure画像*/
.list-c3-circle figure.circle {border-radius: 50%;	/*円形にする。画像が長方形だと正円になりません。*/
	width: 100%;overflow: hidden;	/*円形から飛び出ている部分を非表示に*/
	margin-right: 0;
}
/*ボックス内のtextブロック*/
.list-c3-circle .text-c3-circle {
	flex: 1;
}

.list-c3-circle h4 .h4-c3-circle {
	margin: 0;
	color: #eda700;	/*文字色*/
	font-size: 0.9em;	/*文字サイズを80%に*/
}
.list-c3-circle h4 .h4-c3-circle a {
	color: #eda700;	/*リンクテキストの文字色*/
}

/*ボックス内のpタグ*/
.list-c3-circle p {
	margin: 0;
	font-size: 0.5em;	/*文字サイズを80%に*/
	line-height: 1.2;	/*行間を少し狭くする*/
}





/*.listブロック共通tp_yakuba1縦にスクロールできるbox
---------------------------------------------------------------------------*/
.list-yakuba1 {
	position: relative;	/*子要素のアイコンを絶対配置する為の設定*/
}

/*ボックス内のアイコン*/
.list-yakuba1 .list-icon {
	font-size: 0.6rem;		/*文字サイズ*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		/*テキストをセンタリング*/
	position: absolute;		/*親のブロックのrelative（この場合は.list）に対して絶対配置する*/
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
}

/*figure画像*/
.list-yakuba1 figure {
	margin-bottom: 2rem;	/*下に空けるスペース。２文字分。*/
}


/*３列タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-grid .list-yakuba1 {
	margin-bottom: 30px;	/*ボックス同士の上下間に空けるスペース*/
	padding: 20px;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*dl（下のdtとddを囲むブロック）*/
.list-grid .list-yakuba1 dl {
	height: 10em;	/*高さ*/
	overflow: auto;	/*高さを超えるコンテンツである場合に、自動でスクロールバーを出す*/
}

/*dt（タイトル、日付が入っている所）*/
.list-grid .list-yakuba1 dl dt {
	color: #333;		/*文字色*/
	font-weight: bold;	/*太字にする*/
}

/*dd（サンプルテキストが入っている所）*/
.list-grid .list-yakuba1 dl dd {
	margin-bottom: 0.5em;	/*下に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-grid .list-yakuba1 h4 {
	margin: 0;
	padding: 1rem;	/*余白。１文字分。*/
}

/*ボックス内のh4タグ内のiタグ（アイコンの事）*/
.list-grid .list-yakuba1 h4 i {
	transform: scale(1.5);	/*デフォルトの1.5倍に*/
	margin-right: 1rem;		/*右側に空けるスペース。テキストとアイコンの隙間部分です。*/
}

/*タイトルの背景色バリエーション（共通）*/
.bg-color1 {
	color: #fff;	/*文字色*/
	margin-bottom: 1rem !important;	/*下に空けるスペース*/background: #eea882;	/*背景色*/
}
.bg-color1 a {
	display: block;
	color: inherit;
}

/*ボックス内のpタグ*/
.list-grid .list-yakuba1 p {
	margin: 0;
}

/*ボックス内のfigure画像*/
.list-grid .list-yakuba1 figure {
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*listブロック全体を囲むブロック*/
	.list-grid {
		display: flex;		/*flexボックスを使う指定*/
		flex-wrap: wrap;	/*折り返す指定*/
	}

	/*１個あたりのボックス設定*/
	.list-grid .list-yakuba1 {
		width: 32%;			/*幅。３列になります。*/
		margin-right: 2%;	/*右側へのマージン。ボックス同士の左右の余白です。*/
	}
	
/*1カラムにしたい場合*/
.list-grid.c1-yakuba1 .list-yakuba1  {
	width: 100%;
	margin-right: 0;
}
/*1カラムにしたい場合のdl（dtとddを囲むブロック）*/
.list-grid.c1-yakuba1 .list-yakuba1 dl {
	height: auto;
}
	/*3の倍数目のボックスの右側のマージンをなくす*/
	.list-grid .list-yakuba1:nth-of-type(3n) {
		margin-right: 0;
	}

	/*ボックス内のtextブロック*/
	.list-grid .list-yakuba1 .text {
		flex: 1;
	}

	}/*画面幅900px以上の追加指定ここまで*/


/*btnの設定（「btn1」と「btn2」）
---------------------------------------------------------------------------*/
/*ボタン共通*/
a.btn1-yakuba1 {
	display: inline-block;text-decoration: none;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0.3rem 2rem;	/*上下、左右へのボタン内の余白*/
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%出た状態。*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*iタグ共通（アイコンの事）*/
a.btn1-yakuba1 i {
	margin-left: 20px;
}

/*btn1の追加指定*/
a.btn1-yakuba1 {
	background: #fff;	/*背景色*/
	color: #444;		/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*btn1内のiタグ（アイコンの事）*/
a.btn1-yakuba1 i {
	color: #13baa8;	/*文字色*/
}



/*３列タイプのボックス（grid）/tp_petshop1
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-grid-recipe-developmemt .list-recipe-developmemt  {
	position: relative;
	margin-bottom: 2rem;	/*ボックス同士の上下間に空けるスペース*/
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
    display: grid;			/*gridを使う指定*/
    grid-template-rows: auto auto 1fr auto;		/*list内の上から３番目のブロック(.text)だけ伸ばし、他は自動。*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のh4*/
.list-grid-recipe-developmemt  .list-recipe-developmemt h4 {
	font-weight: bold;	/*太字にする*/
	margin: 0;
	color: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
	grid-row: 2 / 3;				/*高さのスタートと終了点。これは２番目に配置する意味。*/
}

/*リンクテキスト*/
.list-grid-recipe-developmemt  .list-recipe-developmemt h4 a {
	color: inherit;
}

/*金額*/
.list-grid-recipe-developmemt  .list-recipe-developmemt .price-recipe-developmemt  {
	display: block;
	font-weight: bold;	/*太字に*/
}

/*アイコン*/
.list-grid-recipe-developmemt  .list-recipe-developmemt .icon-recipe-developmemt  {
	display: inline-block;
	border-radius: 30px;	/*角を丸くする指定。ある程度大きければ適当でいいです。*/
	padding: 0 0.6rem;		/*アイコン内の余白。上下、左右への指定。*/
	font-size: 0.7em;		/*文字サイズを80%に*/
	background: #eee;		/*アイコンの基本の背景色*/
	color: #000;			/*文字色*/
}

/*「女の子」アイコンの背景色*/
.list-grid-recipe-developmemt  .list-recipe-developmemt .female {
	background: #fbd7d2;
}

/*「男の子」アイコンの背景色*/
.list-grid-recipe-developmemt .list-recipe-developmemt .male {
	background: #c7e4fc;
}

/*「動画」アイコンの設定*/
.list-grid-recipe-developmemt .list-recipe-developmemt .movie::before {
	display: inline-block;
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f03d";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*右側に空けるスペース。テキストとの間の余白調整です。*/
	opacity: 0.3;			/*色を30%だけ出す*/
}

/*ボックス内のp*/
.list-recipe-developmemt p {margin: 0;}

/*ボックス内のtext*/
.list-grid-recipe-developmemt  .list-recipe-developmemt .text p {
	font-size: 0.8em;	/*文字サイズを親要素の80%に*/
	line-height: 1.5;	/*行間を少し狭く*/
	grid-row: 3 / 4;	/*高さのスタートと終了点。これは３番目に配置する意味。*/
}

/*ボックス内のfigure*/
.list-grid-recipe-developmemt  .list-recipe-developmemt figure {
	margin: -1rem -1rem 1rem;	/*１つ目と２つ目は、.list-grid .listで指定しているpaddngを打ち消す為（枠一杯にする）、最後の数字は画像の下に空けるスペース。*/
	grid-row: 1 / 2;			/*高さのスタートと終了点。これは１番目に配置する意味。*/
}

/*figureのマウスオン時に少し明るくする*/
.list-grid-recipe-developmemt  .list-recipe-developmemt figure a:hover {
	filter: brightness(1.2);
}

/*ボタン*/
.list-grid-recipe-developmemt .btn-recipe-developmemt {
	grid-row: 4 / 5;	/*高さのスタートと終了点。これは４番目に配置する意味。*/
}
.list-grid-recipe-developmemt .btn-recipe-developmemt a {/*でないテキストをセンタリング*/
	display: block;text-decoration: none;
	text-align: center;		
	background-color: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、色。var以降は色の指定ですが、css冒頭で指定しているprimary-colorを読み込みます*/
	color: #fff;			/*文字色*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
}

/*マウスオン時のボタン*/
.list-grid-recipe-developmemt .btn-recipe-developmemt a:hover {
	background: #fff;				/*背景色*/
	color: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
}

/*このテンプレートでは、左上の「NEW」アイコンで使っています*/
.list-recipe-developmemt .icon-point-recipe-developmemt  {
	position: absolute;	/*listブロックに対して絶対配置する*/
	left: -8px;			/*左からの配置場所指定。マイナスがついているので、本来とは逆向きに移動します。つまりボックスの外側に飛び出ます。*/
	top: -8px;			/*左からの配置場所指定。マイナスがついているので、本来とは逆向きに移動します。つまりボックスの外側に飛び出ます。*/
	background: #ee2d2d;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.7rem;		/*文字サイズ0.7倍*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 50%;		/*円形にする*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*listブロック全体を囲むブロック*/
	.list-grid-recipe-developmemt {
		display: grid;		/*gridを使う指定*/
		gap: 2rem 1rem;		/*上下、左右へのマージン的な指定*/
		grid-template-columns: repeat(3, 1fr);	/*３列にする指定。４列にしたければrepeat(4, 1fr)とする。*/
	}

	/*ボックス１個あたり*/
	.list-grid-grid-recipe-developmemt .list-recipe-developmemt {
		margin-bottom: 0;	/*ボックス同士の上下間に空けるスペースをリセット*/
	}
	
	}/*追加指定ここまで*/

/*生徒さんの声お菓子で使用  <p></p>あると楕円の写真にかぶるtp物産１写真photoを１列ｓｐで１
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list18 {
	position: relative;
	float: none;	/*左に回り込み*/
	width: 90%;	/*幅３３．３*/
	
}
.list18 a:hover img {
	opacity: 0.8;	/*マウスオン時に80%の透明度にする*/
}
.list18 img {
	border-radius: 50%;	/*角丸のサイズ*/
	}
/*photoボックス内の段落(p)タグ*/
.list18 h4 {
	padding: 5px 0 !important;	/*上下、左右への段落タグ内の余白*/
	position: absolute;
	bottom: 0px;	/*photoボックスの下から0pxの場所に配置*/
	width: 100%;	/*幅*/
	background: #111;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は50%色がついた状態のこと*/
	color: #fff;	/*文字色*/
	text-align: center;	/*文字をセンタリング*/
	font-size: 80%;
}
/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
/*box2（３カラムボックス）
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list18 {
	width: auto;		/*ボックスの幅*/
	float: none;		/*左に回り込み*/
	padding: 3%;		/*余白の上書き*/
	margin: 0 0 20px 0;		/*上、右、下、左へのボックスの外に空けるスペース*/
	border-radius: 50%;	/*角丸のサイズ*/
	line-height: 2;	/*行間*/
}
/*box2内のp(段落)タグ*/
.list18 h4 {
	height: auto;	/*高さ。*/
	font-size: 100%;		/*文字サイズ*/
	margin-bottom: 15px;
}
/*box2内のh4(見出し)タグ*/
.list18  {
	height: auto;	/*高さ*/
}}


/*２列並びのバナー風ブロック-artist1
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-banner-artist1 .list-artist1 {
    display: grid;			/*gridを使う指定*/
    place-items: center;	/*天地左右の中央に中身を配置する*/
    position: relative;		/*h4を重ねる為の指定*/
	border-radius:100px 100px 100px 100px;	/*角を丸くする指定。左上、右上、右下、左下の順番。この行を削除すれば通常の長方形になります。*/
	overflow: hidden;
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {
	
	/*listブロックを囲む外側のボックス*/
	.list-banner-artist1 {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。3列にしたければrepeat(3, 1fr)とする。*/
		gap: 2rem;		/*マージン的な指定*/
	}
	
	/*ボックス１個あたりの設定*/
	.list-banner-artist1 .list-artist1 {
		margin-bottom: 0;
	}

	}/*追加指定ここまで*/


/*ボックス内のh4*/
.list-banner-artist1 .list-artist1 h4 {
	position: absolute;z-index: 1;
	font-weight: normal;
	text-align: center;
	color: #fff;			/*文字色*/
	font-size: 2rem;		/*文字サイズ。２倍。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
}

/*ボックス内のh4内のspan（小さな文字）*/
.list-banner-artist1 .list-artist1 h4 span {
	display: block;
	font-size: 0.4em;	/*文字サイズ。親要素の40%。*/
}

/*画像*/
.list-banner-artist1 .list-artist1 figure {
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-banner-artist1 .list-artist1:hover figure {
	transform: scale(1.1);	/*1.1倍に拡大*/
}


/*３列タイプのボックス（grid）tp_petshop1
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-grid-point .list-point {
	position: relative;
	margin-bottom: 2rem;	/*ボックス同士の上下間に空けるスペース*/
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
    display: grid;			/*gridを使う指定*/
    grid-template-rows: auto 1fr auto;		/*list内の上から2番目のブロック(.text)だけ伸ばし、他は自動。*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のh4*/
.list-grid-point .list-point h4 {font-weight: bold;	/*太字に*/
	margin: 0;
	display: inline-block;
	border-radius: 30px;	/*角を丸くする指定。ある程度大きければ適当でいいです。*/
	padding: 0 0.6rem;		/*アイコン内の余白。上下、左右への指定。*/
	font-size: 1.1em;		/*文字サイズを80%に*/
	background: #fff4ee;		/*アイコンの基本の背景色*/
	color: #202124;			/*文字色*/
}

/*金額*/
.list-grid-point .list-point .price-point {
	display: block;
	font-weight: bold;	/*太字に*/
}


/*ボックス内のp*/
.list-point p {margin: 0;}

/*ボックス内のtext*/
.list-grid-point .list-point .text p {
	font-size: 0.8em;	/*文字サイズを親要素の80%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure*/
.list-grid-point .list-point figure {
	margin: -1rem -1rem 1rem;	/*１つ目と２つ目は、.list-grid .listで指定しているpaddngを打ち消す為（枠一杯にする）、最後の数字は画像の下に空けるスペース。*/
}

/*このテンプレートでは、左上の「NEW」アイコンで使っています*/
.list-point .icon-point {
	position: absolute;	/*listブロックに対して絶対配置する*/
	left: 50%;			/*-8px左からの配置場所指定。マイナスがついているので、本来とは逆向きに移動します。つまりボックスの外側に飛び出ます。*/
	bottom: -8px;			/*左からの配置場所指定。マイナスがついているので、本来とは逆向きに移動します。つまりボックスの外側に飛び出ます。*/
	background: #eea882;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.7rem;		/*文字サイズ0.7倍*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 50%;		/*円形にする*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*listブロック全体を囲むブロック*/
	.list-grid-point {
		display: grid;		/*gridを使う指定*/
		gap: 2rem 1rem;		/*上下、左右へのマージン的な指定*/
		grid-template-columns: repeat(3, 1fr);	/*３列にする指定。４列にしたければrepeat(4, 1fr)とする。*/
	}

	/*ボックス１個あたり*/
	.list-grid-point .list-point {
		margin-bottom: 0;	/*ボックス同士の上下間に空けるスペースをリセット*/
	}
	
	}/*追加指定ここまで*/

	
/*list-square（portfolioのlightboxで使っています）tp_artist1調理実習の風景すき間ありの４つ正方形
---------------------------------------------------------------------------*/
/*listブロックを囲む外側のボックス*/
.list-square-cooking-training {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
}

/*ボックス１個あたりの設定*/
.list-square-cooking-training .list-cooking-training {
	position: relative;
	overflow: hidden;
	height: 0;				/*正方形にトリミングする為の指定なので変更しないで下さい*/
	width: 23%;				/*幅*/
	padding-top: 23%;		/*正方形にトリミングする為の指定です。上のwidthの数値と合わせておけばOK。*/
	border-radius: 10px;	/*角を丸くする指定。通常の四角形がよければこの１行削除。*/
	margin: 1%;				/*ボックス同士に空けるスペース*/
	box-shadow: 2px 2px 3px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*以下も画像を正方形にトリミングする為の指定なので変更しない。*/
.list-square-cooking-training .list-cooking-training a {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.list-square-cooking-training .list-cooking-training img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-square-cooking-training .list-cooking-training img:hover {
	transform: scale(1.1);	/*1.1倍に拡大*/
	filter: contrast(1.3);	/*コントラストを1.3倍*/
}


/*listブロック/tp_clinic4/t　sweets.htmlで単発講座
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.list35 {
	overflow: hidden;background: #fff4ee;	/*背景色*/
	width: 27.4%;	/*幅*/
	float: left;	/*左に回り込み*/
	margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	/*ボックス内の余白*/
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}

.list35 a {
	text-decoration: none;
	display: block;
	overflow: hidden;
}
/*ボックスにリンク指定がされた場合に出る「→」マーク*/
.list35 a::before {
content: "→";	/*absoluteこの文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
position:  relative;
/*	right: 20px;ボックスの右から20pxの場所に配置*/
	/*top: 180px;	ボックスの上から20pxの場所に配置*/
background: #eea882;	/*背景色（古いブラウザ用）*/
background: rgba(238,168,130,0.9);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
color: #fff;	/*文字色*/

/*「サービスのご案内」ページのボックス内の矢印マーク設定.list25 a::before*/
font-size: 50px;	/*文字サイズ*/
line-height: 1;
padding: 5px;	/*余白（文字と円の間にあける余白）*/
right: -15px;	/*ボックスに対して右から-15pxの場所に配置*/
top: -25px;	/*ボックスに対して下bottomから-25pxの場所に配置*/
border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}
/*マウスオン時の「→」マーク前のまま*/
.list35 a:hover::before {
background: #ffd3bb;	/*背景色*/

}
/*マウスオン時のボックス*/
.list35 a:hover {
background: #eea882;	/*背景色*/
}


/*マウスオン時の設定*/
.list35 a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
/*h4（見出し）タグの設定*/
.list35 h4 {  color: #6b6351;	/*文字色*/font-weight: bold;	/*太字にする設定*/
	color: #6d5238;		/*文字色*/
	font-size: 120%;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	height: 2em;		/*高さ*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}
/*p（段落）タグの設定*/
.list35 p {
	padding: 0 !important;
	line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 90%;		/*文字サイズを少し小さく*/
	color: #333;		/*文字色*/
	height: 6em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/}



	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){/*listブロック
		---------------------------------------------------------------------------*/
		/*ブロック１個あたりの設定*/
		.list35 {
			width: auto;
			float: none;
			margin-left : 0;
		}
		.list35 figure {
			float: left;
			width: 40%;
			margin-right: 2%;
		}
		/*h4（見出し）とp(段落)タグの設定*/
		.list35 h4, .list35 p {
			height: auto;
		}
		/*margin-left: 0;ボックスにリンク指定がされた場合に出る「→」マーク*/
		.list35 a::before {
		content: "→";	/*この文字を出す。他の文字に変えても可だが機種依存文字は化けるので使わない。*/
			/*	right: 20px;ボックスの右から20pxの場所に配置*/
			/*top: 180px;	ボックスの上から20pxの場所に配置*/
		background: #ffd3bb;	/*背景色（古いブラウザ用）*/
		background: rgba(255,244,238,0.4);	/*色(rgba)の設定。rgba値は左３つが色指定(この場合#009603のrga値)で最後の小数点が透明度。*/
			
		color: #fff;	/*文字色*/
		
		/*「サービスのご案内」ページのボックス内の矢印マーク設定.list25 a::before*/
		font-size: 80px;	/*文字サイズ*/
		line-height: 1;
		padding: 20px;	/*余白（文字と円の間にあける余白）*/
		right: -15px;	/*ボックスに対して右から-15pxの場所に配置*/
		top: -25px;	/*ボックスに対して下bottomから-25pxの場所に配置*/
		border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
}}

		
				

/*色変え用の各ブロックnasi1  7
---------------------------------------------------------------------------*/
/*tp_fudosan16/スライダー１個あたりのボックス*/
.list-neon {
	width: 49%;				/*ボックスの幅*/
	margin-bottom: 15px;	/*ボックス同士の上下間の余白*/
	margin-right: 2%;		/*（2022/09/22更新）*/
	padding: 2px;			/*ボックス内の余白*/
	position: relative;font-size: 11px;		/*文字サイズ*/	line-height: 1.3;		/*行間*/
	overflow: hidden;
	transition: 0.3s;		/*アニメーションにかける時間。0.3秒。*/

}

/*list-neonへの追加指定。5made*/

.list-neon a {
	text-decoration: none;display: block;overflow: hidden;color: #fff;	/*文字色*/
	padding: 3px;	/*ボックス内の余白*/
border: 1px solid #ccc;	/*tp_111枠線の幅、線種、色*/
	box-shadow: 0px 0px 50px #faf7d4 inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/

		}

	.list-neon.neon1 a {border: 1px solid #c84df0;	/*枠線の幅、線種、色*/
							box-shadow: 0px 0px 50px #ae00e7 inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/}
	
.list-neon.neon2 a {border: 1px solid #fff;	/*tp_108_blue枠線の幅、線種、色*/
	box-shadow: 0px 0px 50px #fff4ee inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/}


.list-neon.neon3 a {border: 1px solid #ffffff;	/*枠線の幅、線種、色*/
				box-shadow: 0px 0px 50px #ffffff inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/}	
		

	

		.list-neon.neon4 a {border: 1px solid #b50001;	/*枠線の幅、線種、色*/
			box-shadow: 0px 0px 50px #b50001 inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/}	
			
			.list-neon.neon5 a {border: 1px solid #f06aa6;	/*枠線の幅、線種、色*/
					box-shadow: 0px 0px 50px #e70067 inset;	/*ボックスの影。右へ、下へ、広げる幅、色。insestは影を内側に向ける意味。*/}
					



		

/*偶数のボックスの右側マージンをなくす（2022/09/22更新）*/
.list-neon:nth-of-type(even) {
	margin-right: 0;
}

/*マウスオン時にボックスの影を少し濃くする*/
.list-neon:hover {
	box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}






/*「人気」「NEW」マーク/tp_113/でない
---------------------------------------------------------------------------*/
/*mark1,matk2共通設定*/
.option1-neon, .option2-neon {z-index: 101;
	display: inline-block;position: absolute;
	left: 5px;			/*ボックス内の左から5pxの場所に配置*/
	top: 5px;			/*ボックス内の上から5pxの場所に配置*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	font-size: 9px;		/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	color: #202124;		/*文字色*/
	border-radius: 50%;	/*角丸のサイズ*/
	transform: rotate(-30deg);	/*左に30度傾ける設定*/
}
/*mark1の背景色*/
.option1-neon { background: #fff4ee;}
/*mark2の背景色*/
.option2-neon {background: #ffffff;}



/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){/*「人気」「NEW」マーク
	---------------------------------------------------------------------------*/
	/*mark1,matk2共通設定*/
	/*mark1,matk2共通設定*/
	.option1-neon, .option2-neon {
		left: auto;		/*左に配置すると顔に重なるのでこの行でリセットし、下の行で右側に再設定します。*/
		right: 5px;
		transform: none;	/*傾きをなしに。傾いたままがいいならこの１行削除。*/
	}}

/*pickupスライドショーコーナー（slickを使用）
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むボックス*/
.pickup-heat3 {
	position: relative;
	display: flex;			/*flexボックスを使う指定*/
}

/*マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.pickup-heat3 .list-neon:hover figure {
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/*１個あたりのボックス*/
.pickup-heat3 .slick-slide {
	margin: 5px !important;
	width: auto;
}

/*ボックス内のh4タグ*/
.pickup-heat3 .list-neon h4 {font-size: 14px !important;	/*文字サイズ*/
	display: -webkit-box;color: #ffffff;		/*文字色*/
	overflow: hidden;margin: 2px 0;		/*上下、左右に空けるスペース*/
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;	/*表示させたい行数。変更する際は、下２行のIE対策も変更して下さい。*/
    line-height: 1.2em;		/*IE対策。行間。１行あたりの高さの事。1.5文字分。*/
    height: 3.0em;			/*IE対策。高さ。slick内で高さを統一できなかったので、応急措置でheightのみ指定。*/
}




/*ボックス内のpタグの最大の高さ。
max-heightにするとslick内で高さを統一できなかったので、応急措置でheightのみ指定。
3行分を確保したかったので、1.5emの3倍で本来なら「4.5em」なのですが、
なぜか画面幅によってほんの少しテキストのかけらが見えてしまったので「4.4em」にしました。*/
.pickup-heat3 .list-neon p {
    
	margin: 0!important;	/*「main p」のマージンをリセットする*/
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;	/*表示させたい行数。変更する際は、下の「IE対策」の「height」も変更して下さい。*/
	font-size: 11px !important;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
    line-height: 1.2em;		/*IE対策。行間。１行あたりの高さの事。1.5文字分。*/
    max-height: 3.6em;		/*IE対策。最大の高さ。1.5emの3倍の4.5emになっているので、3行分という事。*/
}

/*ボックス内の画像*/
.pickup-heat3 .list-neon img {
	object-fit: cover;	/*トリミングのタイプ*/
	height: 70px;		/*画像の高さ。下の方で数カ所再設定があります。*/
	width: 100%;		/*画像の幅*/
	font-family: 'object-fit: cover;';	/*IE対策*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅480px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:480px) {
.pickup-heat3 .list-neon img {
	height: 120px;		/*画像の高さ*/
}

/*ボックス内のh4タグ*/
.pickup-heat3 .list-neon h4 {font-size: 17px;	/*文字サイズ*/
	
}}

/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {
.pickup-heat3 .list-neon img {
	height: 160px;		/*画像の高さ*/
}}



/*---------------------------------------------------------------------------
ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {

		.list-neon {
		width: 23%;				/*ボックスの幅*/
		margin-bottom: 25px;	/*ボックス同士の上下間の余白*/
		margin-right: 2.66%;	/*（2022/09/22更新）*/
	}
	/*偶数のボックスの右側マージンを再指定。これがないと小さな端末のマージン0が引き継がれてレイアウトが崩れます。（2022/09/22更新）*/
	.list-neon:nth-of-type(even) {
		margin-right: 2.66%;	/*※下の指定より先に記載する*/
	}
	/*4の倍数のボックスの右側マージンをなくす（2022/09/22更新）*/
	.list-neon:nth-of-type(4n) {
		margin-right: 0;
	}/*pickupスライドショーコーナー（slickを使用）
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むボックス*/
.pickup-heat3 {
	padding: 20px;		/*ボックス内の余白*/
}

/*１個あたりのボックス*/
.pickup-heat3 .slick-slide {
	margin: 10px !important;
}

/*ボックス内の画像*/
.pickup-heat3 .list-neon img {
	height: 100px;		/*画像の高さ*/
}}

/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) {
.pickup-heat3 .list-neon img {
	height: 150px;		/*画像の高さ*/
}}


/*listブロックtp_cute1　次回の予告ポスタbox-student
---------------------------------------------------------------------------*/
.list-thumb-schedule {
  overflow: hidden;
  font-size: 90%;	
  width: 30%;			/*画像幅*/
  margin: 0 1% 30px;
  padding-top: 1%;
  float: left;		/*画像を左に回り込み*/
  text-align: center;
}

.list-thumb-schedule img {
	margin: 0;
  float: none;
  width: 85%;		/*画像の幅*/
}
/*マウスオン事*/
.list-thumb-schedule a:hover img 
 {transition: 0.5s;
  transform: scale(1.25);	/*ほんの少し画像を大きくする指定1.05*/opacity: 0.7;	/*透明度。70%色が出た状態。*/
}
/*h4タグ*/
.list-thumb-schedule h4 {
  width: 100%;

	background: linear-gradient(#b7926f, #9e7a58);/*背景グラデーション。#b7926fからcss冒頭のprimary-colorへかけて色が変化。*/
	color: #fff;		/*文字色*/
	padding: 1rem 3rem;	/*ボタン内の余白。上下、左右へ。*/
	font-size: 1.3rem;	/*文字サイズを130%*/
	border-radius: 5px;	/*角を少しだけ丸くする*/

}


/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){/*listブロック
  ---------------------------------------------------------------------------*/
  .list-thumb-schedule img {
	width: 90%;		/*画像の幅*/
  }
.list-thumb-schedule h4 {
  width: 100%;	/*文字色*/
	padding: 0.1rem 0.3rem;	/*ボタン内の余白。上下、左右へ。*/

}
  }

 /*料・菓子でおすすめとしてbox2（３カラムボックス）tp物産１ボックス２おススメ用カード風pなしスクエアでSP1PC横３。２０２０・３
  ---------------------------------------------------------------------------*/
  /*ボックス１個あたりの設定*/
  .list20 {
	  position: relative;
	  width: 31%;		/*ボックスの幅30*/height: 450px;/*試行錯誤とりあえず*/
	  float: left;		
	  text-align: center;	/*内容をセンタリング*/
	  padding: 3%;		/*ボックス内の余白*/
	  background: #fff;		/*背景色*/
	  border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	  margin: 0 0 20px 1%;		/*上、右、下、左へのボックスの外に空けるスペース*/
	  line-height: 1.5;	/*行間*/
	  color: #202124;		/*文字色*/
  }
  /*box2内の日付*/
  .list20 span.date {
	  position: absolute;
	  left: -1px;	/*左から-10pxの場所に配置*/
	  top: -1px;		/*上から-10pxの場所に配置*/
	  background: #be8a3a;	/*背景色*/
	  color: #fff;			/*文字色*/
	  font-size: 12px;		/*文字サイズ*/
	  width: 70px;			/*幅*/
	  line-height: 70px;		/*高さ*/
	  border-radius: 50%;		/*円形にする*/
	  text-align: center;		/*文字をセンタリング*/
	  transform: rotate(-20deg);	/*回転の角度*/
  }
  
  .list20 h4 {
		  /*	width: ;幅80%*/
	  height: auto;
	  /*text-align: ;	文字を左よせ*/
	  padding: 0 !important;
	  color: #202124;	/*文字色*/
			  /*height: ;高さ4.5em。*/
	  overflow: hidden;	/*オーバーした分は非表示に。*/
	  font-size: 22px;	/*文字サイズ*/
	  font-weight: 700;	/*デフォルトの太字を標準にする設定*/
  }
  /*box2内のfigure(画像)タグ*/
  .list20 figure {
	  margin-bottom: 5px;	/*下に空けるスペース*/
  }
  
  .list20 h4 span {
	  display: block;
	  padding: 1px 0;	/*上下、左右へのボタン内の余白*/
	  color: #eea882;
	  font-size: 14px;	/*文字サイズ*/
	  font-weight: 600;	/*デフォルトの太字を標準にする設定*/
  }
  /*box1、box2のfigure写真共通設定
  ---------------------------------------------------------------------------*/
  .list20 figure a:hover {
	  opacity: 0.5;	/*マウスオン時に80%透明度にする*/
  }
  /*画面幅７００px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:700px){/*box2（３カラムボックス）
	  ---------------------------------------------------------------------------*/
	  /*ボックス１個あたりの設定*/
	  .list20 {
		  width: auto;		/*ボックスの幅*/
		  float: none;		/*左に回り込み*/
		  padding: 3%;		/*余白の上書き*/
		  margin: 0 2% 20px 2%;		/*上、右、下、左へのボックスの外に空けるスペース*/
		  line-height: 2;	/*行間*/
	  }
	  
	  .list20 h4 {
		  height: auto;	/*高さ*/
		  font-size: 20px;
		  padding: 10px;
		  color: #202124;	/*文字色*/margin-bottom: 15px;
		  font-weight: 600;	
	  }}
  
		
/*stock-sun風関連記事のボックス　分中にいれる」*/
.look-related-article {display: inline-block;width: 90%;border: 1px solid #202124;padding: 5px 20px;border-radius: 5px;margin: 5px 0;}
.list6-related-article {
	position: relative;overflow: hidden;
	background: #ffffff;	
	margin-bottom: 20px;	
	display: block;text-decoration: none;
	padding: 20px;	border: 1px solid #ccc;	}

.list6-related-article figure img {
	width: 30%;			/*写真の幅*/
	height: 150px;
    object-fit: cover;
	float: left;		/*左に回り込み*/
	
}
.list6-related-article h4 {
	margin-left: 28%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
	color: #202124;		/*文字色*/
	font-weight: bold;
	text-align: center;
	font-size: 18px;	/*文字サイズ*/
	border-bottom: dashed 1px #e99383;	/*枠線の幅、線種、色*/
	margin-bottom: 10px;	/*下に空けるスペース*/
}

.list6-related-article p {
	padding: 0 !important;
	margin-left: 35%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
}


/*btnの設定
---------------------------------------------------------------------------*/
/*ボタンを囲むブロック*/
.btn-related-article {
	text-align: center;	/*内容をセンタリング*/
}

/*ボタン*/
.btn-related-article a {margin-top: 10px;	/*上にスペースを空ける*/
	display: block;text-decoration: none;border: none;
	color: #fff;			/*文字色*/
	border-radius: 5px;		/*角丸のサイズ。ほんの少しだけ角が丸くなります。*/
	padding: 5px 10px;		/*上下、左右へのボタン内の余白*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: linear-gradient(#747474,#414141);/*背景グラデーション*/
	font-size: 1rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*ボタンのマウスオン時*/
.btn-related-article a:hover {
	filter: brightness(1.2);	/*少しだけ明るくする*/
	cursor: pointer;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
    .list6-related-article  {
		margin: 10px 2% 10px;		/*上0、左右、下20へのボックスの外に空けるスペース*/
        padding: 10px;    }
    
    .list6-related-article h4 {
        font-size: 20px;    } 

		.list6-related-article p.btn-related-article {
			padding: 0 !important;
			margin-left: 35%;	/*左に空けるスペース。写真(figure)のwidth指定とバランスをとって指定する。*/
		}
	
	.list6-related-article figure img {
		margin: 10px 2% 10px;		/*追加上0、左右、下20へのボックスの外に空けるスペース*/
		width: 30%;			/*写真の幅*/
		height: 100px;
		object-fit: cover;
		float: left;		/*左に回り込み*/
		border-radius: 50%;	/*円形にくり抜く指定。通常通りに表示させたいならこの１行削除。*/
	}	}
	
	/*listブロックtp_gym1あなたにあうレッスンはどれ？-which-lesson-suits-you（3カラム）
	---------------------------------------------------------------------------*/
			/*カラムブロック全体を囲むボックス*/
		#contents .list-container-which-lesson-suits-you {
			display: flex;
			justify-content: space-between;	/*中のブロックの横並びの揃え方*/
			flex-wrap: wrap;				/*中のブロックを自動で折り返す*/
			margin: 0 3%;
		}
		/*１カラムあたりの設定*/
		#contents .list-which-lesson-suits-you {
			display: flex;
			flex-direction: column;			/*中のブロックを並べる向きの指定。これは縦に並べる意味。*/
			width: 32%;						/*ブロック幅*/
			margin-bottom: 20px;			/*ブロックの下に空ける余白*/
			background:  #fff4ee;				/*背景色*/
			color: #202124;					/*文字色*/
			border-radius: 5px;				/*角丸の指定。ほんの少し角が丸くなります。*/
			overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
		}
		/*リンクテキストの文字色*/
		#contents .list-which-lesson-suits-you a {
			color: #1a0dab;
		}
		/*ボックス内のh4（見出し）タグ*/
		#contents .list-which-lesson-suits-you h4 {	color: #eea882;	/*文字色*/
			margin-bottom: 20px;	/*下のテキストとの間に空けるスペース*/
			font-size: 140%;		/*文字サイズ*/
		}
		/*ボックス内のp（段落）タグ*/
		#contents .list-which-lesson-suits-you p {
			padding: 0;		/*余白のリセット*/margin: 0;
			font-size: 0.8em;	/*文字サイズを80%に*/
			line-height: 1.5;	/*行間を少し狭くする*/
		}
		
		/*「class="text"」を指定したブロック。テキストブロック。*/
		#contents .list-which-lesson-suits-you .text {
			padding: 5%;			/*ブロック内の余白*/
			flex: 1 0 auto;
		}
		/*IEバグ対応*/
		#contents .list-which-lesson-suits-you figure {
			min-height: 0%;}
	/*スタッフ紹介用。画像を円形にくり抜く。*/
	.list-which-lesson-suits-you figure.circle {
		border-radius: 50%;	/*円形にする。画像が長方形だと正円になりません。*/
		overflow: hidden;	/*円形から飛び出ている部分を非表示に*/
	}
	

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){/*list-column（トップページで使っている３列ブロック）
	---------------------------------------------------------------------------*/
	/*ボックス内のh4（見出し）タグ*/
	#contents .list-which-lesson-suits-you h4 {
		margin-bottom: 0px;font-size: 14px;
	}
}


/*foods9 list23の黒何-column（下部のおすすめ講座３列ブロック）list63
---------------------------------------------------------------------------*/
/*カラムブロック全体を囲むボックス*/
.list-column-container {
	display: flex;
	justify-content: space-between;	/*中のブロックの横並びの揃え方*/
	flex-wrap: wrap;				/*中のブロックを自動で折り返す*/
	margin: 0 3%;					/*上下、左右へのボックスの外に空けるスペース*/
}
/*listブロック設定overflow: hidden;*/
.list-column-recommended-next-lesson {border-radius: 10px;				/*角丸の指定。ほんの少し角が丸くなります。*/
display: flex;
	flex-direction: column;			/*中のブロックを並べる向きの指定。これは縦に並べる意味。*/
	margin: 0 0.5% 30px;	/*上、左右、下へのボックスの外に空けるスペース*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	padding: 4%;	/*ボックス内の余白*/
	
	padding: 2%;	/*ボックス内の余白の上書き*/
	width: 31.5%;	/*幅３２．５*/
	height: 700px !important;/*６５０長い高さauto*/

	
	background: #111;				/*背景色*/
	color: #e8e4df;					/*文字色*/
	
	overflow: hidden;				/*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);	/*ボックスの影。右へ、下へ、ぼかし幅の順番。0,0,0は黒の事で0.3は色が30%出た状態の事。*/


}
.list-column-recommended-next-lesson a {
	overflow: hidden;text-decoration: none;display: block;
}
.list-column-recommended-next-lesson h4 {
	padding: 0;border: none;
	font-size: 20px;font-weight: bold;	/*文字サイズ*/	
	color: #d5889a;		/*文字色*/
	line-height: 1.2em;
	
	margin-bottom: 0.5em;
}
.list-column-recommended-next-lesson p {
	margin: 10px !important;/*0*/
	padding: 0 !important;
	line-height: 1.8;
	
	font-size: 80%;
	
}
.list-column-recommended-next-lesson figure img {
	margin: 0 auto;	/*上、右、下、左への画像の外側にとるスペース*/
	width: 260px;			/*画像幅*/
	height: 250px;/*画像改良？*/
    object-fit: cover;/*画像改良？*/
	border-radius: 50%;	/*角丸のサイズ*/
}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	/*list23ブロック800ika
	---------------------------------------------------------------------------*/
	/*listブロック設定*/
	.list-column-recommended-next-lesson  {
		margin: 4% !important;
		padding: 4% !important;
		float: none !important;
		width: auto !important;
		height: auto !important;
		box-shadow: none;
		border-top: 1px solid #ccc;
	}
	.list-column-recommended-next-lesson :last-of-type {
		border-bottom: 1px solid #ccc;
		margin-bottom: 20px !important;
	}
	/*h4タグ設定*/
	.list-column-recommended-next-lesson h4 {
		font-size: 17px !important;
	}
	/*段落タグ設定*/
	.list-column-recommended-next-lesson p {
		font-size: 100% !important;
		line-height: 1.8 !important;
		height: auto !important;
	}
	/*figure画像の設定Pcより大きく*/
	.list-column-recommended-next-lesson figure img {
		margin: 0 auto;	/*上、右、下、左への画像の外側にとるスペース*/
		width: 300px;			/*画像幅*/
		height: 300px;/*画像改良？*/
		object-fit: cover;/*画像改良btn48？*/
		border-radius: 50%;	/*角丸のサイズ*/
	}}

/*listブロック/tp_bussan2/
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック（※.list-squareでも使用しています）*/
.list-container-voice {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
}
/*list-squareブロック
---------------------------------------------------------------------------*/
/*１個あたりのボックス設定*/
.list-square-voice {
	width: 99.9%;	/*幅*/
}

/*ボックス内のtextブロック*/
.list-square-voice .text {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態*/
	color: #fff;					/*文字色*/
	padding: 10px 20px;				/*上下、左右へのボックス内の余白*/
}

/*ボックス内のh4タグとpタグ*/
.list-square-voice h4 {
	margin: 0;color: #fff4ee;	font-weight: bold;
	font-size: 0.9em;	/*文字サイズを親要素の80%に*/
}

/*ボックス内のh4タグとpタグ*/
.list-square-voice p {
	margin: 0;
	font-size: 0.8em;	/*文字サイズを親要素の80%に*/
}
/*小さな端末では説明文は非表示に。.list-square-voice p {
	display: none;
}表示させてしまうと画像がかなり隠れてしまう可能性があります。*/



/*list,list2,list-squareの共通設定
---------------------------------------------------------------------------*/
.list-square-voice {
	position: relative;		/*子要素でabsolute(絶対配置)を使うための指定*/
}

/*左上の丸いアイコンでない*/
.list-square-voice.icon-voice {
	display: flex;				/*flexボックスを使う指定*/
	justify-content: center;	/*並びかたの種類の指定*/
	align-items: center;		/*垂直揃えの指定。上下中央に配置されるように。*/
	font-size: 0.6em;		/*文字サイズ*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 60px;			/*幅*/
	height: 60px;			/*高さ*/
	line-height: 1.5;		/*行間*/
	border-radius: 50%;		/*角丸のサイズ。円形になります。*/
	text-align: center;		/*テキストをセンタリング*/
	position: absolute;		/*親のrelativeに対して絶対配置させる指示*/
	left: -10px;			/*listブロックに対して左からの配置場所の指定*/
	top: -10px;				/*listブロックに対して上からの配置場所の指定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.3は色が30%出た状態。*/
}



/*価格*/
.list-square-voice h4 .navi-link {
	background: #e1e1e1;	/*背景色*/
	font-weight: normal;	/*h要素のデフォルトの太字を標準にする*/
	border-radius: 100px;	/*角を丸くする指定。大きければ適当でOK。*/
	padding: 0.3rem 1rem;	/*価格内の余白。上下、左右へ。*/
	margin-left: 1rem;		/*左側に1文字分のスペースを空ける。メニュータイトルとの隙間の調整です。*/
	font-size: 0.8rem;		/*文字サイズを80%に*/
}


/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {

	/*list-squareブロック
	---------------------------------------------------------------------------*/
	/*小さな端末で非表示にした説明文を表示させる。*/
	.list-square-voice p {
		display: block;
	}
	/*list-squareブロック
	---------------------------------------------------------------------------*/
	/*１個あたりのボックス設定*/
	.list-square-voice {
		width: 33.3%;	/*幅*/
	}

}



/*メニューのご紹介ページの各ボックス/tp_beginner8/t
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-simple {
	text-align: center;	/*中身をセンタリング*/
	max-width: 700px;		/*ボックスの幅*/
	margin: 0 auto 4rem;	/*ボックスの外側にとるスペース。上、左右、下。*/
}

/*ボックス内のh3*/
.list-simple h3 {
	margin: 0;line-height: 1.4;
}

/*ボックス内のp*/
.list-simple p {
	margin: 0;
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.4;
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	/*ボックス内のh3*/
.list-simple h3 {font-size: 1.2rem;	/*文字サイズを85%に*/font-weight: 600;
	
}
}
	



/*tp_cafe18左側にh2見出し、右側にメニュー写真が並ぶタイプのブロック設定
---------------------------------------------------------------------------*/
/*type1の見出し*/
h2.cafe18 {
	margin: 0; padding: 0; border: none;
	font-family: Caveat;	/*フォント種類。css冒頭で指定しているheading-fontを読み込みます*/
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

h2.cafe18 span {
	display: block;
	font-size: 1rem;
	text-align: right;	/*テキストを右寄せ*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*type1の見出し*/
	h2.cafe18 {
		width: 20vw;	/*幅*/
		flex: 0 0 auto;
		line-height: 1;
		transform: rotate(-10deg);	/*少しだけ傾ける*/
		margin-right: 2rem;			/*右側へのスペース*/
		font-size: 4rem;			/*文字サイズ。４倍。*/
	}
h2.cafe18 span {
		margin-top: 2rem;	/*上に２文字分のスペース*/
	}

	}/*追加指定ここまで*/

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {
	}/*追加指定ここまで*/

	/*ブロック全体*/
	.list-side-title-cafe18 {
		display: flex;	/*横並びに*/
		justify-content: center;	/*中央に寄せる*/
		align-items: flex-start;	/*上に寄せる*/
		gap: 3%;					/*ブロック同士のマージン的な要素。*/padding: 1.2em;	/*余白*/
	}



	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {	}/*追加指定ここまで*/

	/*ブロック内にある、全ての写真ブロックを囲むボックス*/
	.list-side-title-cafe18 .list-menu-cafe18 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);	/*２列にする。３列がいいなら、(3, 1fr)とすればOKです。*/
		gap: 2rem;	/*写真ブロック同士に空けるマージン的な要素。*/
	}




/*list（メニュー写真や説明が入ったボックス一個あたり）
---------------------------------------------------------------------------*/
/*list内の全ての要素のマージンを一旦リセット*/
.list-cafe18 * {
	margin: 0;
}

/*ボックス１個あたり*/
.list-cafe18 {
	position: relative;
    display: flex;
	flex-direction: column;
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	color: #999;			/*文字色*/
	margin-bottom: 3%;
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {	}/*追加指定ここまで*/


	/*ボックス１個あたり*/
	.list-cafe18 {
		margin-bottom: 0;
	}


/*ブロック内のh4*/
.list-cafe18 h4 {
	color: #555;	/*文字色*/
}

/*価格*/
.list-cafe18 h4 .price-cafe18 {
	background: #eea882;	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: #fff;	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
	border-radius: 100px;	/*角を丸くする指定。大きければ適当でOK。*/
	padding: 0.3rem 1rem;	/*価格内の余白。上下、左右へ。*/
	margin-left: 1rem;		/*左側に1文字分のスペースを空ける。メニュータイトルとの隙間の調整です。*/
	font-size: 0.8rem;		/*文字サイズを80%に*/
}

/*ブロック内のp要素*/
.list-cafe18 p {
	margin: 0;padding: 0;
	font-size: 12px;	/*文字サイズを85%に*/
	line-height: 1.3;	/*行間を少し狭く*/
}

/*アイコン*/
.list-cafe18 .newicon-cafe18 {
	position: absolute;
	left: -5px;	/*左からの配置場所。マイナスがついているので本来の向きとは逆に移動する。*/
	top: -10px;	/*上からの配置場所。マイナスがついているので本来の向きとは逆に移動する。*/
	background: #eea882;	/*背景色。css冒頭で指定しているsecondary-colorを読み込みます*/
	color: #fff;	/*文字色。css冒頭で指定しているsecondary-text-colorを読み込みます*/
	font-size: 0.7rem;	/*文字サイズ。70%。*/
	width: 5em;			/*アイコンの幅。4文字分。*/
	line-height: 5em;	/*行間ですが、高さとして使っています。上のwidthと揃えれば正円になります。*/
	border-radius: 50%;	/*円形にする指定。*/
	text-align: center;	/*テキストをセンタリング*/
}

/*ボックス内のfigure画像*/
.list-cafe18 figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}
/*list-free（レイアウトフリー用）/tp_pop1/
---------------------------------------------------------------------------*/
/*.list-free * {margin: 0;padding: 0;}*/

/*list-freeボックス*/
.list-free {
	display: flex;			/*直接の子要素を横並びに*/
    flex-direction: column;	/*一旦縦並びにしておく*/
	margin-bottom: 10vw;	/*ボックスの下（外側）に空けるスペース*/
	gap: 5vw;				/*子要素同士に空けるマージン的な要素。画面幅100%＝100vwです。*/
}

/*bg1,bg2背景の中にある最後のlist-freeの下マージンをなくす*/
.bg-kodawari .list-free:last-of-type {
	margin-bottom: 0;
}

/*テキストブロック*/
.list-free .text {
    align-self: flex-start;
	flex: 1;
}

/*h3見出し*/
.list-free h3 {
	margin-top: 0;
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
	font-size: 1.5rem;		/*文字サイズを150%に*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	position: relative;	/*カギカッコを絶対配置する為に必要な指定*/
}

/*bg1背景上でのh3*/
.bg-kodawari .list-free h3 {
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

/*縦書きスタイル*/
.list-free .vertical-text {margin: auto;}
.list-free .vertical-text::before,
.list-free .vertical-text::after {
	content: "";
	position: absolute;
	width: 20px;	/*カギカッコの幅。お好みで。*/
	height: 50px;	/*カギカッコの高さ。お好みで。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
}

/*bg1背景上で枠線の色のみ変更*/
.bg-kodawari .list-free .vertical-text::before,
.bg-kodawari .list-free .vertical-text::after {
	border-color: var(--primary-inverse-color);	/*枠線の幅、線種、varは色の事でcss冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

.list-free .vertical-text::before {
	top: -15px;		/*テキストからの距離。お好みで。*/
	left: -15px;	/*テキストからの距離。お好みで。*/
	border-right: none;		/*右の線は消す*/
	border-bottom: none;	/*下の線は消す*/
}

.list-free .vertical-text::after {
	bottom: -15px;	/*テキストからの距離。お好みで。*/
	right: -15px;	/*テキストからの距離。お好みで。*/
	border-left: none;	/*左の線は消す*/
	border-top: none;	/*上の線は消す*/
}

/*画像ブロック*/
.list-free .image {
	position: relative;
}
.list-free .image img {
	box-shadow: 0px 10px 40px rgba(255,255,255,0.1);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.1は色が10%出た状態。。*/
	margin-bottom: 1rem;	/*画像の下に空けるマージン。２枚以上画像を配置した場合に間のスペースになります。*/
}


/*画像の上にポイントアイコンを置いた場合の設定*/
.list-free .image.order3 .point {
	position: absolute;
	left: -20px;
	top: -20px;
}
.list-free .image.order1 .point {
	position: absolute;
	right: -20px;
	top: -20px;
}

/*画像ブロック内のdivタグ。テキストを囲むブロックです。*/
.list-free .image > div {
	font-size: 0.7rem;	/*文字サイズを70%*/
	padding: 1rem 2rem;	/*上下、左右への余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*list-freeボックス*/
	.list-free {
		flex-direction: row;		/*縦並びから横並びにする*/
		align-items: flex-start;	/*中のボックス類を上に寄せる*/
	}
	
	.list-free .vertical-text {
		writing-mode: vertical-rl;	/*縦書きの指定。*/
		text-orientation: upright;	/*文字の向き*/
		padding: 1rem 0.5rem;	/*上下、左右へのh3内の余白*/
	}
	
	/*画像ブロックが３番目（右側）になった場合に画面右側いっぱいまで広げる*/
	.list-free .image.order3 {
		margin-right: calc(-1 * var(--global-space));
	}
	.list-free .image.order3 img {
		border-radius: 30px 0px 0px 30px;	/*角丸の指定。左上、右上、右下、左下への順番。*/
	}
	
	/*画像ブロックが１番目（左側）になった場合に画面左側いっぱいまで広げる*/
	.list-free .image.order1 {
		margin-left: calc(-1 * var(--global-space));
	}
	.list-free .image.order1 img {
		border-radius: 0px 30px 30px 0px;	/*角丸の指定。左上、右上、右下、左下への順番。*/
	}

	/*その他（汎用向け）お好みでもっと追加して使ってもOK*/
	.list-free .w1 {width: 30%;}
	.list-free .w2 {width: 50%;}
	.list-free .order1 {order: 1;}
	.list-free .order2 {order: 2;}
	.list-free .order3 {order: 3;}
	.list-free .align-self-start {align-self: flex-start;}
	.list-free .align-self-center {align-self: center;}
	.list-free .align-self-end {align-self: flex-end;}

	}/*追加指定ここまで*/

/*pointアイコン
---------------------------------------------------------------------------*/
/*pointブロック全体*/
.point-kodawari {
	order: -1;
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	width: 20vw;	/*幅*/
	height: 20vw;	/*高さ*/
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.8rem;		/*文字サイズを80%*/
	letter-spacing: 0.1em;	/*文字間隔をほんの少し広く*/
	line-height: 1.2;		/*行間を狭く*/
	position: relative;
	background: url("https://template-party.com/template/tp_pop1/tp_pop1_orange/images/bg1.svg") no-repeat center center / 100%;	/*アイコンの背景画像の読み込み。幅を100%に。*/
}


/*テキストブロック*/
.point-kodawari span {
	position: relative;z-index: 1;
}
/*大きな文字（1や2などの数字に使用）*/
.point-kodawari span span {
	display: block;
	font-size: 2rem;	/*文字サイズを２倍*/
}
	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*pointブロック*/
	.point-kodawari {
		width: 10vw;	/*幅を変更*/
		height: 10vw;	/*高さを変更*/
	}
	
	}/*追加設定ここまで*/


/*アクセス・日程・メール飲食店メニューページ/tp_foods10/
---------------------------------------------------------------------------*/
/*ブロック内にある、全ての写真ブロックを囲むボックス*/
/*ボックス１個あたり*/
.list-access-time {border: 1px solid #eea882;	
	position: relative;
	background: #fff4ee;		/*背景色*/
	color: #a5873d;			/*文字色*/
	overflow: hidden;
	width: 47%;		/*ブロック幅*/
	float: left;	/*左に回り込み*/
	margin-left: 1%;	/*ボックスの外側(左側)に空けるスペース*/
	padding: 1%;		/*ボックス内の余白*/
}


/*価格*/
.list-access-time h4 {
	background: #ffd3bb;	/*背景色*/color: #a5873d;	line-height: 1.5;		
	font-weight: 600;	/*h要素のデフォルトの太字を標準にする*/
	font-size: 1.8rem;	/*文字サイズを85%に*/
}

/*ブロック内のp要素*/
.list-access-time p {font-weight: 550;
	margin: 0;padding: 0;
	font-size: 1.2rem;		/*文字サイズを80%に*/
	line-height: 1.8;	/*行間を少し狭く*/
}


/*ボックス内のfigure画像*/
.list-access-time figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}


/*３列タイプのボックス（grid）tp_petshop1***こんなことまで身につく*****
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-grid-step-cooking .list-step-cooking {
	position: relative;
	margin: 1px;	/*2ボックス同士の上下間に空けるスペース*/
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff4ee;		/*背景色*/
    display: grid;			/*gridを使う指定*/
    grid-template-rows: auto 1fr auto;		/*list内の上から2番目のブロック(.text)だけ伸ばし、他は自動。*/
	border: 1px solid  #a5873d;			/*枠線の幅、線種、色。255,255,255は白の事で0.5は色が50%出た状態の事。*/
	
}

/*ボックス内のh4*/
.list-grid-step-cooking .list-step-cooking h4 {	font-size: 18px;	
	margin: 0;background: #ffffffff;text-align: center;		/*文字をセンタリング*/
	color: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
}

/*リンクテキスト*/
.list-grid-step-cooking .list-step-cooking h4 a {
	color: inherit;
}

/*金額*/
.list-grid-step-cooking .list-step-cooking .price-step-cooking {
	display: block;text-align: center;		/*文字をセンタリング*/
	font-weight: bold;	/*太字に*/font-size: 23px;
}

/*アイコン*/
.list-grid-step-cooking .list-step-cooking .icon-step-cooking {
	display: inline-block;
	border-radius: 30px;	/*詳しく知る角を丸くする指定。ある程度大きければ適当でいいです。*/
	padding: 0 0.6rem;		/*アイコン内の余白。上下、左右への指定。*/
	font-size: 0.7em;		/*文字サイズを80%に*/
	background: #eee;		/*アイコンの基本の背景色*/
	color: #000;			/*文字色*/
}



/*ボックス内のp*/
.list-step-cooking p {margin: 0;}

/*ボックス内のtext*/
.list-grid-step-cooking .list-step-cooking .text p {
	font-size: 0.8em;	/*文字サイズを親要素の80%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure*/
.list-grid-step-cooking .list-step-cooking figure {
	margin: -1rem -1rem 1rem;	/*１つ目と２つ目は、.list-grid .listで指定しているpaddngを打ち消す為（枠一杯にする）、最後の数字は画像の下に空けるスペース。*/
}


/*このテンプレートでは、左上の「NEW」アイコンで使っています*/
.list-step-cooking .icon-point-step-cooking {
	position: absolute;	/*listブロックに対して絶対配置する*/
	left: -8px;			/*左からの配置場所指定。マイナスがついているので、本来とは逆向きに移動します。つまりボックスの外側に飛び出ます。*/
	top: -8px;			/*左からの配置場所指定。マイナスがついているので、本来とは逆向きに移動します。つまりボックスの外側に飛び出ます。*/
	background: #a5873d;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.5rem;		/*文字サイズ0.7倍*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 50%;		/*円形にする*/
}




.list-grid-step-cooking .btn-step-cooking a {
	display: block;text-decoration: none;
	text-align: center;		/*テキストをセンタリング*/
	background: #eea882;	/*背景色*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、色。var以降は色の指定ですが、css冒頭で指定しているprimary-colorを読み込みます*/
	color: #fff;			/*文字色*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
}

/*マウスオン時のボタン*/
.list-grid-step-cooking .btn-step-cooking a:hover {
	background: #fff;				/*背景色*/
	color: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
}









	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*listブロック全体を囲むブロック*/
	.list-grid-step-cooking {
		display: grid;		/*gridを使う指定*/
		gap: 2rem 1rem;		/*上下、左右へのマージン的な指定*/
		grid-template-columns: repeat(3, 1fr);	/*３列にする指定。４列にしたければrepeat(4, 1fr)とする。*/
	}

/*金額*/
.list-grid-step-cooking .list-step-cooking .price-step-cooking {
	display: block;text-align: center;		/*文字をセンタリング*/
	font-weight: bold;	/*太字に*/font-size: 21px;
}

	/*ボックス１個あたり*/
	.list-grid-step-cooking .list-step-cooking {
		margin: 0;	/*ボックス同士の上下間に空けるスペースをリセット*/
	}	}/*追加指定ここまで*/
	

	   /*listブロックtp_clinic5
	   ---------------------------------------------------------------------------*/
	   .list-satisfaction01 {
		   overflow: hidden;
		   width: 28%;	/*幅*/
		   float: left;	/*左に回り込み*/
		   margin: 0 0 20px 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
		   padding: 2%;	/*ボックス内の余白*/
		  }
	 
	   /*h4（見出し）タグの設定*/
	   .list-satisfaction01 h4 {
		   color: #ffffff;		/*文字色*/
		   font-size: 80%;	/*文字サイズ*/
		   text-align: center;	/*文字をセンタリング*/
		   font-weight: 600;
		   overflow: hidden;	/*高さを超えた場合に非表示にする*/ padding: 0 !important;
		   line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/		  
		   height: 3em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	   }
	  	
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){/*listブロック
	---------------------------------------------------------------------------*/
	.list-satisfaction01 {
		overflow: hidden;
		width: 26.4%;	/*幅*/
		float: left;	/*左に回り込み*/
		margin: 0 0 0 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
		padding: 2%;	/*ボックス内の余白*/
		border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
	}

	/*h4（見出し）タグの設定*/
	.list-satisfaction01 h4 {
		color: #ffffff;	/*文字色*/
		
		font-size: 90%;	/*文字サイズ*/
		text-align: center;	/*文字をセンタリング*/
		overflow: hidden;	/*高さを超えた場合に非表示にする*/
		padding: 0 !important;
		line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
		height: 3em;		/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	}	}




	/*ボックス１個あたりの設定overflow: hidden;*/
	.list-satisfaction02 {
		position: relative;
	  width: 28%;		/*32NG幅*/
	  height: 290px;
		float: left;	/*左に回り込み*/
		text-align: center;	
		font-size: 31px;	
		padding: 10px 20px;			/*上下、左右30へのボタン内の余白*/
		margin: 2% 5px 20px;		/*上、左右、下へのボックスの外側への余白*/
	}
	
	
	/*h4タグ*/
	.list-satisfaction02 h4 {
	  position: absolute;
	 left: 8%;
		top: 34%;	/* list2ボックスの上から20%の場所に配置*//*上にラベル風h4タグ*/
		width: 84%;	/*幅100*/
		height: 150px;
			/*background: #fff;背景色（古いブラウザ用）*/
			/*background: rgba(255,255,255,0.9);背景色。border: 4px solid #e99383;0,0,0は黒の事で0.7は70%色がついた状態。*/
			color: #ffffff;		/*文字色*/
			
		text-align: center;	/*内容をセンタリング*/ 
		font-weight: 600;	/*文字サイズ*/line-height: 1.0;/*追加して行間狭くしたい*/
		z-index: 20;font-size: 150%;		/*文字サイズ*/
			/*文字color: #e6b700;色kouho b38e00 cca300 */
	   }
	   
	  
	  /*写真追加試行錯誤*/
	  .list-satisfaction02 figure img {
		width: 80%;			/*写真の幅95*/
		height: 300px;
		/*background: ;	#eea882�w�i�F*/
		object-fit: cover;
		}
	
	
	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
	.list-satisfaction02 {
		position: relative;
	  width: 32%;		/*33幅*/
	  height: 100px;
		float: left;	
		text-align: center;	/*内容をセンタリング*/
		font-size: 16px;	
		padding: 1px 0.1px;			/*上下、左右30へのボタン内の余白*/	
		margin: 1px;	/*20ボックス同士に空ける左右間のスペース*/margin-bottom: 20px;	/*ボックスの下に空ける上下間のスペース*/
	}
	
	
	/*h4タグ*/
	.list-satisfaction02 h4 {
		position: absolute;
	   left: 8%;
		  top: 30%;	/* list2ボックスの上から20%の場所に配置*//*上にラベル風h4タグ*/
		  width: 84%;	/*幅100*/
		  height: 100px;
		color: #ffffff;	/*文字色*/
		  text-align: center;	/*内容をセンタリング*/ 
		  font-weight: 600;	/*文字サイズ*/line-height: 1.0;/*追加して行間狭くしたい*/
		  z-index: 20;font-size: 120%;		/*文字サイズ*/
		  color: #e6b700;	/*文字色kouho b38e00 cca300 */
		 }
		 
		
		/*写真追加試行錯誤*/
		.list-satisfaction02 figure img {
		  width: 75%;			/*写真の幅95*/
		  height: 100px;
		 
		  } }





		   /*list1（コースのご案内コーナー）tp_lp1
		   ---------------------------------------------------------------------------*/
		   /*冒頭の大きなロゴの飾り*/
		   .logo-kazari {
			   background: url("https://template-party.com/template/tp_lp1/tp_lp1_esthe/images/logo_kazari.svg") no-repeat left top / 70%;	/*ロゴ画像の読み込み。左上に配置し、幅は70%。*/
		   }
		   
		   /*１枚目の写真*/
		   .list1-annai.image1 {
			   background: url("https://creme-cremes.com/img/kkkkk5.jpg") no-repeat center center / cover;
		   }
		   
		   /*2枚目の写真*/
		   .list1-annai.image2 {
			   background: url("https://okasikyousitu.com/images/opera5-min.jpg") no-repeat center center / cover;
		   } 
		    /*3枚目の写真*/
		   .list1-annai.image3 {
			   background: url("https://creme-cremes.com/img/z174.jpg") no-repeat center center / cover;
		   }
		   
		 
		   
		   /*４枚目の写真*/
		   .list1-annai.image4 {
			   background: url("https://creme-cremes.com/school/sweets/images/tiramisu16-min.jpg") no-repeat center center / cover;
		   }
		   

   
		   /*４枚目の写真*/
		   .list1-annai.image5 {
			background: url("https://creme-cremes.com/school/sweets/images/strawberry-quilfaitbon-style-tiara-tart1-min.jpg") no-repeat center center / cover;
		}
		
   /*１枚目の写真*/
   .list1-annai.image6 {
	background: url("https://creme-cremes.com/school/sweets/images/strawberry-quilfaitbon-style-tiara-tart1-min.jpg") no-repeat center center / cover;
}

/*2枚目の写真*/
.list1-annai.image7 {
	background: url("https://okasikyousitu.com/images/opera5-min.jpg") no-repeat center center / cover;
} 
 /*3枚目の写真*/
.list1-annai.image8 {
	background: url("https://template-party.com/template/tp_lp1/tp_lp1_wedding/images/2.jpg") no-repeat center center / cover;
}


   /*１枚目の写真*/
   .list1-annai.image9 {
	background: url("https://creme-cremes.com/school/sweets/images/strawberry-quilfaitbon-style-tiara-tart1-min.jpg") no-repeat center center / cover;
}

/*2枚目の写真*/
.list1-annai.image10 {
	background: url("https://creme-cremes.com/img/dec17.jpg") no-repeat center center / cover;
} 
 /*3枚目の写真*/
.list1-annai.image11 {
	background: url("https://creme-cremes.com/school/sweets/images/print-cookie-18-min.jpg") no-repeat center center / cover;
}

   /*１枚目の写真*/
   .list1-annai.image12 {
	background: url("https://creme-cremes.com/school/cooking/images/pane-chicken21-min.jpg") no-repeat center center / cover;
}

/*2枚目の写真*/
.list1-annai.image13 {
	background: url("https://okasikyousitu.com/images/opera5-min.jpg") no-repeat center center / cover;
} 
 /*3枚目の写真*/
.list1-annai.image14 {
	background: url("https://template-party.com/template/tp_lp1/tp_lp1_wedding/images/2.jpg") no-repeat center center / cover;
}

   /*１枚目の写真*/
   .list1-annai.image15 {
	background: url("https://creme-cremes.com/school/sweets/images/strawberry-quilfaitbon-style-tiara-tart1-min.jpg") no-repeat center center / cover;
}



		   /*ボックス１個あたり*/
		   .list1-annai {
			   padding:  8vw;	/*ボックス内の余白。冒頭のspace-largeを読み込みます。*/
			   position: relative;
			   overflow-x: hidden;
			   margin-bottom: 1vw;	/*下に空けるスペース。ボックス同士の隙間です。*/
		   }
		   
		   /*マウスオン用のアニメーション*/
		   .list1-annai::before {
			   content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
			   background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
			   transition: transform 0.5s 0.1s;	/*アニメーションの速度（0.5秒）と待機時間（0.1秒）。*/
		   }
		   .list1-annai:hover::before {
			   transform: translateX(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
		   }
		   
		   /*テキストブロック*/
		   .list1-annai .text {
			   position: relative;z-index: 1;
			   font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
	
			   width: 80%;		/*幅*/
			   height: 100%;
			   color: #fff;	/*文字色*/
			   text-shadow: 1px 1px 2px rgba(0,0,0,0.3);	/*テキストの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.3は色が30%出た状態。*/
		   }
		   
			   /*画面幅600px以上の追加指定*/
			   @media screen and (min-width:600px) {
		   
			   /*テキストブロック*/
			   .list1-annai .text {
				   width: 40%;		/*幅*/
			   }
		   
			   }/*追加指定ここまで*/
		   
		   
		   /*テキストの配置場所を入れ替えたい場合のスタイル。*/
		   .list1-annai .text.reverse {
			   margin-left: auto;
		   }
		   
		   /*list1内のh3見出し*/
		   .list1-annai h3 {
			   margin: 0;padding: 0;
			   font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
			   position: relative;
			   font-size: 2rem;		/*文字サイズを200%*/
			   letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
			   line-height: 1.2;		/*行間を狭くする*/
		   }
		   
		   /*list1内のh3見出し内の１文字目の大きな文字*/
		   .list1-annai h3 .large {
			   font-size: 7rem;	/*文字サイズを7倍*/
		   }
		   
		   /*見出しの右上にある英語の小さな文字*/
		   .list1-annai h3 span:not(.large) {
			   font-size: 1.2rem;	/*文字サイズを標準に戻す*/
			   opacity: 0.9;		/*透明度50%*/
			   position: absolute;
			   right: 0px;	/*右からの配置場所*/
			   top: 3px;	/*0上からの配置場所*/color: #fff4ee;	/*文字色*/
		   }
		   
		   /*ボタン
---------------------------------------------------------------------------*/
/*btn1、btn2共通*/
.btn2-annai a {
	display: block;text-decoration: none;
	padding: 0.8rem 2rem;	/*上下、左右へのボタン内の余白*/
	margin-top: 2rem;		/*ボタンの上に2文字分のスペースを空ける*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 10px 30px rgba(0,0,0,0.1);	/*ボタンの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.1は色が10%出た状態*/
}
/*マウスオン時（btn1、btn2共通）*/
.btn2-annai a:hover {
	letter-spacing: 0.2rem;	/*文字間隔を少し広げる*/
	box-shadow: none;		/*ボタンの影を消す*/
}

/*btn2への追加設定*/
.btn2-annai a {
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
/*list1内のbtn2の設定。マウスオン時にボタンの背景色を追加。*/
.btn2-annai a {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
}



/*list-c2（お問い合わせ、ご予約）tp_lp1/
---------------------------------------------------------------------------*/

.padding0 {
	padding: 0 !important;
}

.list-c2-Contact-Reserve > a {
    text-decoration: none;
    display: block;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*２つのボックスを囲むボックス*/
	.list-c2-Contact-Reserve{
		display: flex;	/*横並びにする*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-c2-Contact-Reserve .list-Contact-Reserve {
	text-align: center;
	position: relative;
	overflow-y: hidden;
	color: #fff;		/*文字色*/
	text-shadow: 0px 0px 10px rgba(0,0,0,0.6);	/*テキストの影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.6は色が出た状態。*/
	padding: 5rem 2rem;	/*上下、左右へのボックス内の余白*/
	margin: 1rem 0;		/*上下、左右へのマージン*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	.list-c2-Contact-Reserve > * {
		flex: 1;
	}
	.list-c2-Contact-Reserve.list-Contact-Reserve {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list-c2-Contact-Reserve > a .list-Contact-Reserve {
		height: 100%;
	}

	}/*追加指定ここまで*/


/*左側ボックスの背景*/
.list-c2-Contact-Reserve .list-Contact-Reserve.image1 {
	background: url("https://template-party.com/template/tp_lp1/tp_lp1_wedding/images/2.jpg") no-repeat center center / cover;
}
/*右側ボックスの背景*/
.list-c2-Contact-Reserve .list-Contact-Reserve.image2 {
	background: url("https://creme-cremes.com/components/images/bg-Contact-Reserve-sweets-min.jpg") no-repeat center center / cover;
}

/*h4見出し*/
.list-c2-Contact-Reserve h4 {
	font-weight: 200;	/*細字にする*/
	line-height: 1.2;	/*行間を狭く*/
	font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
}

/*h4見出し内のメインテキスト（main-text）*/
.list-c2-Contact-Reserve h4 .main-text {
	display: block;
	font-size: 3rem !important;		/*文字サイズ。3倍。*/
	padding-top: 1.5rem;	/*上に空ける余白*/
	padding-bottom: 3rem;	/*下に空ける余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	.list-c2-Contact-Reserve h4 .main-text {
		font-size: 4rem !important;	/*文字サイズ。4倍。*/
	}

	}/*追加指定ここまで*/


/*h4見出し内のサブテキスト（sub-text）*/
.list-c2-Contact-Reserve h4 .sub-text {
	position: relative;
	padding: 0 5rem;	/*上下、左右への余白設定ですが、両サイドのラインの配置にも影響します。お好みで。*/
}
/*h4見出し内のサブテキストの左右のライン*/
.sub-text::before {left: 0;}
.sub-text::after {right: 0;}
.list-c2-Contact-Reserve h4 .sub-text::before,.list-c2-Contact-Reserve h4 .sub-text::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 2rem;	/*線の長さ*/
	border-top: 1px solid #fff;	/*ラインの幅、線種、色*/
}

/*見出しの下の説明テキスト*/
.list-c2-Contact-Reserve .list-Contact-Reserve .text {
	position: relative;z-index: 1;
	font-size: 0.85rem !important;	/*文字サイズ85%*/
}

/*マウスオン用のアニメーション*/
.list-c2-Contact-Reserve .list-Contact-Reserve::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.list-c2-Contact-Reserve .list-Contact-Reserve:hover::before {
	transform: translateY(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*list-yoko-scroll（お客様の声）tp_lp1
---------------------------------------------------------------------------*/
.list-yoko-scroll-koe * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.list-yoko-scroll-koe {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	/* Firefox用 */
	scroll-snap-type: x mandatory; /* スナップスクロールを有効にする */
	margin-right: calc(-1 * var(--space-large));	/*右マージンをなくす為にネガティブマージンで相殺*/
	padding-bottom: 3vw;	/*下に空ける余白*/
}
.list-yoko-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge用 */
}

/*ブロック内の１個あたり*/
.list-yoko-scroll-koe .list-koe {
	width: 60%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding: 1rem;		/*ブロック内の余白。1文字分。*/
	position: relative;
	display: flex;
	flex-direction: column;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック内の１個あたり*/
	.list-yoko-scroll-koe .list-koe {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
		padding: 2rem;		/*ブロック内の余白。２文字分。*/
	}

	}/*追加指定ここまで*/


/*テキストブロックが高さを目一杯とる指定*/
.list-yoko-scroll-koe .list-koe .text {
	flex: 1;
}

/*ブロックのカギカッコ（共通）*/
.list-yoko-scroll-koe .list-koe::before,.list-yoko-scroll-koe .list-koe::after {
	content: "";
	position: absolute;
	width: 30px;	/*カギカッコの幅。お好みで。*/
	height: 10px;	/*カギカッコの高さ。お好みで。*/
	border: 0.5px solid var(--primary-inverse-color);	/*線の幅、線種、varは色のことで冒頭のprimary-inverse-colorを読み込みます。*/
}

/*左上のカギカッコへの追加指示*/
.list-yoko-scroll-koe .list-koe::before {
	left: 0px;	/*左からの配置場所*/
	top: 0px;	/*上からの配置場所*/
	border-right: none;		/*右の線を消す*/
	border-bottom: none;	/*下の線を消す*/
}

/*右上のカギカッコへの追加指示*/
.list-yoko-scroll-koe .list-koe::after {
	right: 0px;		/*右からの配置場所*/
	bottom: 0px;	/*下からの配置場所*/
	border-top: none;	/*上の線を消す*/
	border-left: none;	/*左の線を消す*/
}

/*faq内のh4見出し（「とても満足です。」のところ）*/
.list-yoko-scroll-koe h4 {
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
}

/*faq内のp段落（「とても満足です。」の下のテキスト）*/
.list-yoko-scroll-koe p {
	font-size: 0.9rem;	/*文字サイズを90%に*/
}

/*お客様の名前*/
.list-yoko-scroll-koe .name {
	text-align: right;	/*右に寄せる*/
}

/*お客様の写真*/
.list-yoko-scroll-koe .name img {
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	object-fit: cover;
	object-position: center;
	border-radius: 50%;	/*円形にする。この１行を削除すれば正方形になります。*/
	margin-left: 20px;	/*写真の左に空けるスペース*/
}

/*tp_fashion1 list-grid1　jｓ必要必要
---------------------------------------------------------------------------*/
/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1-orderlesson .list-orderlesson * {
	margin: 0;padding: 0;
}

/*listブロック全体を囲むブロック*/
.list-grid1-orderlesson,
.list-grid1-orderlesson a {
	color: #fff4ee;	/*文字色*/
}

.list-grid1-orderlesson a:hover {
	color: inherit;
}

/*ボックス１個あたり*/
.list-grid1-orderlesson.list-orderlesson {
	text-align: center;		/*テキストをセンタリングする*/
	margin-bottom: 2vw;
}

/*テキストブロック*/
.list-grid1-orderlesson .text2 {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;margin: 10px auto;
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒のことで0.7は色が70%出た状態。*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1-orderlesson {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 2vw;	/*ブロックの間に空けるマージン的な指定*/
	}

	/*ボックス１個あたり*/
	.list-grid1-orderlesson .list-orderlesson {
		margin-bottom: 0;	/*下マージンをリセット*/
	}

	}/*追加指定ここまで*/


/*list-grid1（静止画から動画にチェンジするボックス）※変更不要
---------------------------------------------------------------------------*/
.list-grid1-orderlesson .image-container {
	width: 100%;
	height: 0;
	padding-top: 100%;
	position: relative;
}
.list-grid1-orderlesson .image-container img,
.list-grid1-orderlesson .image-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.list-grid1-orderlesson .image-container video {
	display: none;
}

/*list-grid1/tp_biz62/
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-grid1-nintei {
	display: grid;
	color: var(--text-color);	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
}

/*ボックス１個あたり*/
.list-grid1-nintei .list-nintei {
    display: grid;
}

/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1-nintei .list-nintei * {
	margin: 0;padding: 0;
}

/*ボックス内のp要素*/
.list-grid1-nintei .list-nintei p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1-nintei {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1-nintei {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid1-nintei .list-nintei {
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のfigure画像*/
.list-grid1-nintei .list-nintei figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}


/*ボタン（btnと、btn-border-radius）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn-nintei a,
.btn-border-radius a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: var(--primary-color) !important;	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-text-color) !important;	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
	padding: 0.5rem !important;		/*ボタン内の余白*/
	margin-top: 1rem !important;
}

/*ボタン共通（マウスオン時に少し明るくする）*/
.btn-nintei a:hover,
.btn-border-radius a:hover {
	filter: brightness(1.2);
}

/*btn-border-radiusの上書き*/
.btn-border-radius a {
	display: inline-block;
	padding: 0.5rem 2rem !important;	/*ボタン内の余白*/
	border-radius: 100px;	/*角丸の指定。適当に大きければOK。*/
	background: #6b6351 !important;
	color: #fff !important;
}

/*３列タイプのボックス（grid）tp_petshop1うんちく系
	---------------------------------------------------------------------------*/
	/*ボックス１個あたり*/
	.list-grid-study-content .list-study-content {
		position: relative;margin: 2rem ;
		padding: 1rem;			/*ボックス内の余白*/
		background: #fff4ee;		/*背景色*/
		display: grid;			/*gridを使う指定*/
		grid-template-rows: auto 1fr auto;		/*list内の上から2番目のブロック(.text)だけ伸ばし、他は自動。*/
		box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
	}
	
	/*ボックス内のh4*/
	.list-grid-study-content .list-study-content h4 {
		margin: 0;
		color: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
	}
	
	
	/*金額*/
	.list-grid-study-content .list-study-content .price-study-content {
		display: block;
		font-weight: bold;	/*太字に*/
	}
	
	/*アイコン*/
	.list-grid-study-content .list-study-content .icon-study-content {
		display: inline-block;
		/*border-radius: 30px;	角を丸くする指定。ある程度大きければ適当でいいです。*/
		padding: 0 0.6rem;		/*アイコン内の余白。上下、左右への指定。*/
		font-size: 0.7em;		/*文字サイズを80%に*/
		background: #eee;		/*アイコンの基本の背景色*/
		color: #000;			/*文字色*/
	}
	
	
	/*ボックス内のp*/
	.list-study-content p {margin: 0;}
	
	/*ボックス内のtext*/
	.list-grid-study-content .list-study-content .text p {
		font-size: 0.8em;	/*文字サイズを親要素の80%に*/
		line-height: 1.5;	/*行間を少し狭く*/
	}
	
	/*ボックス内のfigure*/
	.list-grid-study-content .list-study-content figure {
		margin: -1rem -1rem 1rem;	/*１つ目と２つ目は、.list-grid .listで指定しているpaddngを打ち消す為（枠一杯にする）、最後の数字は画像の下に空けるスペース。*/
	}
	
	
	/*このテンプレートでは、左上の「NEW」アイコンで使っています*/
	.list-study-content .icon-point-study-content {
		position: absolute;	/*listブロックに対して絶対配置する*/
		left: 10%;			/*-8px左からの配置場所指定。マイナスがついているので、本来とは逆向きに移動します。つまりボックスの外側に飛び出ます。*/
		top: -8px;			/*左からの配置場所指定。マイナスがついているので、本来とは逆向きに移動します。つまりボックスの外側に飛び出ます。*/
		background: #eea882;	/*背景色*/
		color: #fff;			/*文字色*/
		font-size: 0.7rem;		/*文字サイズ0.7倍*/
		width: 80%;			/*幅*/
		line-height: 50px;		
		text-align: center;		/*文字をセンタリング*/
			/*	border-radius: 50%;円形にする*/
	}
	
		/*画面幅600px以上の追加指定*/
		@media screen and (min-width:600px) {
	
		
	
		/*ボックス１個あたり*/
		.list-grid-study-content .list-study-content {
			margin-bottom: 0;	/*ボックス同士の上下間に空けるスペースをリセット*/
		}
		
		}/*追加指定ここまで*/


		
	
/*生徒さんの声の最初ブロックtp-clinic5横３ずっとをbiz53風に縦長全面写真白帯に変更spanをh4。本体なし@@@@@@@@@@@@@@@@@@
---------------------------------------------------------------------------*/
.list-order-menu-student img {
	float: left;		
	position: relative;
	overflow: hidden;
	height: 360px;/*２４０高さ100%*/
	object-fit: cover;
}


.list-order-menu-student img a {
	text-align: center;
	height: 100%;	
}

/*listブロック（works.htmlで使用）
---------------------------------------------------------------------------*/
/*各ボックスの指定*/
.list-order-menu-student {
	position: relative;
	float: left;	/*左に回り込み*/
	width: 30%;		/*幅*/
	margin-left: 2.5%;	/*左に空けるスペース*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: #000;	/*背景色*/
}
.list-order-menu-student a {
	display: block;
	text-decoration: none;
}
/*マウスオン時*/
.list-order-menu-student a:hover {
	color: #fff;	/*文字色*/
}
/*リンクを指定した際に右上に出る「→」*/
.list-order-menu-student a::after {
	content: "→";	/*この文字を出力します。変更してもかまいませんが機種依存文字は使わないで下さい。*/
	position: absolute;
	right: 10px;	/*右からの配置場所指定*/
	top: 10px;		/*上からの配置場所指定*/
	font-size: 12px;	/*文字サイズ*/
	line-height: 30px;	/*行間。下のwidthと揃えて下さい。*/
	width: 30px;		/*幅。上のline-heightと揃えて下さい。*/
	border-radius: 50%;	/*角丸の指定。円形になります。*/
	background: #ccc;	/*背景色*/
	color: #000;		/*文字色*/
	text-align: center;
}
/*figure画像*/
.list-order-menu-student a figure {
	opacity: 0.6;	/*リンクを指定した際は60%だけ色を出す。*/
}
/*マウスオン時のfigure画像*/
.list-order-menu-student a:hover figure {
	opacity: 1;		/*リンクを指定した際のマウスオン時に色を100%出す。*/
}
/*h4タグ*/
.list-order-menu-student h4 {
	position: absolute;
	bottom: 0px;	/*下からの配置場所指定。*/
	left: 0px;		/*左からの配置場所指定。*/
	width: 100%;
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	text-align: center;	/*内容をセンタリング*/
	padding: 10px 0;	/*上下、左右への余白*/}


	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){/*listブロック（works.htmlで使用）
		---------------------------------------------------------------------------*/
		/*リンクを指定した際に右上に出る「→」*/
		.list-order-menu-student a::after {
			right: 2px;			/*右からの配置場所指定*/
			top: 2px;			/*上からの配置場所指定*/
			line-height: 20px;	/*行間。下のwidthと揃えて下さい。*/
			width: 20px;		/*幅。上のline-heightと揃えて下さい。*/
		}
		/*h4タグ*/
		.list-order-menu-student h4 {
			padding: 0;
		}
	
}

/*sectionの両サイドの余白を相殺するスタイルtp_lp2
---------------------------------------------------------------------------*/
.margin-lr0 {
	margin: 0 calc(-1 * var(--content-space));
}

/*「1dayレッスンって？」ブロックtp_lp2
---------------------------------------------------------------------------*/
.list-yoko-scroll-about-lesson * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.list-yoko-scroll-about-lesson {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	/* Firefox用 */
	scroll-snap-type: x mandatory; /* スナップスクロールを有効にする */
}
.list-yoko-scroll-about-lesson::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge用 */
}

/*ブロック内の１個あたり*/
.list-yoko-scroll-about-lesson .list-about-lesson {
	width: 80%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding: 0 2rem;		/*ブロック内の余白。上下は0（ゼロ）、左右に2文字分。*/
	position: relative;
	display: flex;
	flex-direction: column;border: 1px solid #fff4ee;	/*枠線の幅、線種、色*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック内の１個あたり*/
	.list-yoko-scroll-about-lesson .list-about-lesson {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	}

	}/*追加指定ここまで*/


/*画像*/
.list-yoko-scroll-about-lesson figure {
	width: 100px;		/*幅。お好みで。*/
		/*border-radius: 50%;円形にする*/
	overflow: hidden;
	margin: 0 auto 1rem;
}

/*h4見出し*/
.list-yoko-scroll-about-lesson h4 {color: #e146a1;
	text-align: center;	/*中央に配置*/
}

/*テキストブロック*/
.list-yoko-scroll-about-lesson .text {
	flex: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.5;	/*行間*/
}

/*「kidsレッスンって？」ブロックtp_lp2希望全面写真で文字上ののせ試作中
---------------------------------------------------------------------------*/
.list-yoko-scroll-about-lesson2 * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.list-yoko-scroll-about-lesson2 {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	/* Firefox用 */
	scroll-snap-type: x mandatory; /* スナップスクロールを有効にする */
}
.list-yoko-scroll-about-lesson2::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge用 */
}

/*ブロック内の１個あたり*/
.list-yoko-scroll-about-lesson2 .list-about-lesson2 {
	width: 85%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding: 0 2rem;		/*ブロック内の余白。上下は0（ゼロ）、左右に2文字分。*/
	position: relative;
	display: flex;height: 200px;	
	flex-direction: column;border: 1px solid #fff4ee;	/*枠線の幅、線種、色*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック内の１個あたり*/
	.list-yoko-scroll-about-lesson2 .list-about-lesson2 {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	}

	}/*追加指定ここまで*/


/*画像*/
.list-yoko-scroll-about-lesson2 figure {
	height: 100%;		/*幅。お好みで。*/
			/*width: 100px;幅。お好みで。*/
		/*border-radius: 50%;円形にする*/
	overflow: hidden;
	margin: 0 auto 1rem;
}

/*h4見出し画像の上にのせたい*/
.list-yoko-scroll-about-lesson2 h4 {
	text-align: center;	/*中央に配置*/font-size: 1.85rem;color: #e146a1;	background: rgba(255,255,255,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/

}

/*テキストブロック画像の上にのせたい*/
.list-yoko-scroll-about-lesson2 .text {
	flex: 1;
	font-size: 0.85rem;	/*文字サイズ85%*
	*背景色*/background: rgba(255,255,255,0.85);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	line-height: 1.2;	/*行間*/
}
/*「1dayレッスンランキング横スクロールtp_lp2
---------------------------------------------------------------------------*/
.list-yoko-scroll-about-lesson3 * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.list-yoko-scroll-about-lesson3 {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	/* Firefox用 */
	scroll-snap-type: x mandatory; /* スナップスクロールを有効にする */
}
.list-yoko-scroll-about-lesson3::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge用 */
}

/*ブロック内の１個あたり*/
.list-yoko-scroll-about-lesson3 .list-about-lesson3 {
	width: 55%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding: 0 2rem;		/*ブロック内の余白。上下は0（ゼロ）、左右に2文字分。*/
	position: relative;
	display: flex;
	flex-direction: column;border: 1px solid #fff4ee;	/*枠線の幅、線種、色*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック内の１個あたり*/
	.list-yoko-scroll-about-lesson3 .list-about-lesson3 {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	}

	}/*追加指定ここまで*/


/*画像*/
.list-yoko-scroll-about-lesson3 figure {
	width: 100px;		/*幅。お好みで。*/
		/*border-radius: 50%;円形にする*/
	overflow: hidden;
	margin: 0 auto 1rem;
}

/*h4見出し*/
.list-yoko-scroll-about-lesson3 h4 {color: #e146a1;
	text-align: center;	/*中央に配置*/
}

/*テキストブロック*/
.list-yoko-scroll-about-lesson3 .text {
	flex: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.5;	/*行間*/
}
/*お申込みまでの流れのブロック当日分のと似ているようにつくりたい１個あたり*/
.list-normal1-steps-for-taking-custom-lessons .list-steps-for-taking-custom-lessons {
	background: #fff url("https://template-party.com/template/tp_biz63/tp_biz63_red2/images/bg-dot.png") no-repeat right bottom / 200px;
	color: #323232;	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 3rem;
	margin-bottom: 2rem;

background: #fff4ee;
    border: dashed 4px #be8a3a;/*点線*/	
	border-radius: 10px;		/*角丸のサイズ。この１行を削除すれば角のとれた長方形になります。*/
	position: relative;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック１個あたり*/
	.list-normal1-steps-for-taking-custom-lessons .list-steps-for-taking-custom-lessons {
		display: flex;
		gap: 2rem;	/*画像とテキストの間のスペース。２文字分。画像がない場合はこれは適用されません。*/
	}
	
	}/*追加指定ここまで*/


/*画像ブロック*/
.list-normal1-steps-for-taking-custom-lessons figure {
	width: 30%;	/*幅*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*画像の下マージンのリセット*/
	.list-normal1-steps-for-taking-custom-lessons figure {
		margin-bottom: 0;
	}

	}/*追加指定ここまで*/


/*h4見出し*/
.list-normal1-steps-for-taking-custom-lessons h4 {
	font-size: 1.2rem;	/*文字サイズ200%*/
	line-height: 1.5;	/*行間*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	.list-normal1-steps-for-taking-custom-lessons h4 {
		font-size: 2rem;	/*文字サイズ200%*/
		line-height: 1.8;	/*行間*/
	}

	}/*追加指定ここまで*/


/*h4内にアイコンを配置した場合（制作の流れの見出し左のアイコン）*/
.list-normal1-steps-for-taking-custom-lessons.flow-steps-for-taking-custom-lessons h4 i {
	margin-right: 1rem;	/*アイコンとテキストとの間の余白*/
}

/*名前*/
.list-normal1-steps-for-taking-custom-lessons .name {
	text-align: right;	/*右寄せ*/
	margin-top: 1rem;	/*上に空けるスペース*/
}

/*制作の流れで使用しているブロック間の「▼」の矢印*/
.list-normal1-steps-for-taking-custom-lessons.flow-steps-for-taking-custom-lessons .list-steps-for-taking-custom-lessons::after {
	content: "▼";	/*このテキストを出力します*/
	position: absolute;
	left: 50%;		/*左からの配置場所。厳密ではありませんが、文字が小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。マイナスがつくので本来の場所とは逆向きに移動。*/
	transform: scaleX(1.5);	/*横幅を150%に*/
	opacity: 0.5;			/*透明度。色が50%出た状態。*/
}

/*最後のボックスだけ下矢印を出さない*/
.list-normal1-steps-for-taking-custom-lessons.flow-steps-for-taking-custom-lessons .list-steps-for-taking-custom-lessons:last-child::after {
	content: none;
}


/*サブコンテンツ内の一覧ブロックtp_shop9sweets.html受講実績一覧ページ
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list-sub-voice {
	position: relative;
	overflow: hidden;
	font-size: 11px;	/*文字サイズ*/
	line-height: 1.2;	/*行間を狭くする*/
}
.list-sub-voice a {
	text-decoration: none;
	display: block;
	overflow: hidden;
	padding: 10px;	/*ボックス内の余白*/
	border-bottom: 1px solid #fff;	/*上の線の幅、線種、色*/
	background: #000;	/*背景色*/color: #FFF;	/*文字色*/
}
/*一番上のボックスへの追加設定*/
.list-sub-voice:first-of-type a {
	border-top: 1px solid #fff;	/*上の線の幅、線種、色*/
}
/*一番下のボックスへの追加設定*/
.list-sub-voice:last-of-type a {
	margin-bottom: 20px;	/*ブロックの下に空けるスペース*/
}
/*マウスオン時*/
.list-sub-voice a:hover {
	background: #fff;
}
/*ボックス内のh4タグ設定*/
.list-sub-voice h4 {font-size: 16px;	/*文字サイズ*/
	color: #b6aa77;		/*文字色*/
}
/*ボックス内の写真設定*/
.list-sub-voice figure img {
	float: left;	/*画像を左へ回り込み*/
	width: 20%;		/*写真の幅*/
	margin-right: 5px;	/*写真の右側に空ける余白*/
}
/*h2直下のlistボックスの上の線を消す設定*/
#sub h2+.list-sub-voice:first-of-type a {
	border-top: none;
}


/*リンクを貼った際に出る「→」マーク*/
.list-sub-voice a::before {
	content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
	font-size: 12px;	/*文字サイズ*/
	display: block;
	position: absolute;
	right: 10px;	/*ボックスの右から10pxの場所に配置*/
	bottom: 10px;	/*ボックスの下から20pxの場所に配置*/
	width: 30px;	/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
	background: #eea882;	/*背景色（古いブラウザ用）*/
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ。50%にすると円になる。*/
}
/*sweets.html受講実績一覧ページのボックス）
---------------------------------------------------------------------------*/
/*option1,option2共通*/
.list-sub-voice span.option1,  .list-sub-voice span.option2 {
	text-align: center;
	display: block;
	font-size: 10px;	/*文字サイズ*/
	width: 100px;		/*幅*/
	position: absolute;
	right: 0px;	/*ボックスに対して右から0pxの場所に配置*/
	top: 0px;	/*ボックスに対して上から0pxの場所に配置*/
	transform: rotate(45deg) translate(32px,-9px);	/**/
	color: #FFF;	/*文字色*/
	background: #666;	/*背景色*/
}
/*option1への追加設定*/
.list-sub-voice span.option1 {
	color: #FFF;		/*文字色*/
	background: #F00;	/*背景色*/
}

/*FAQ失敗解決ページlist69job3　listなのにボックス（こんなお悩みありませんか？レ点ブロック一列）
---------------------------------------------------------------------------*/
.list-re-konnaonayamiarimasenka-wakunasi {
	overflow: hidden;
	margin: 0px auto;	/*追加左右あけたい追加追加*/
}

.list-re-konnaonayamiarimasenka-wakunasi li {
		/*float: right;	left左に回り込み*/
	width: 95%;			/*幅*/
	line-height: 1.1;	/*行間*/
	margin: 0px auto 20px;	/*上、左右、下へのボックスの外側へ空けるスペース*/
}

.list-re-konnaonayamiarimasenka-wakunasi a {
	display: block;text-decoration: none;
	height: 65px;		/*ボックスの高さ*/ 
	overflow: hidden;	/*ボックスから飛び出た場合、非表示にする設定*/
	background: #fff;/*背景グラデーション*/
	border-radius: 10px;	/*角丸のサイズ*/
	padding: 5px;	/*ボックス内の余白*/
	border: 1px solid #8f8dc9;	/*枠線の幅、線種、色*/
}
.list-re-konnaonayamiarimasenka-wakunasi a:hover {
	background: #fff;	/*背景色*/
	box-shadow: none;	/*ボックスの影をなくす設定*/
	position: relative;
	left: 1px;	/*現在地から右に1px移動する*/
	top: 1px;	/*現在地から下に1px移動する*/
}
.list-re-konnaonayamiarimasenka-wakunasi .img {
	height: 100%;	/*高さ*/
	float: left;	/*right右に回り込み*/
}

/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list-re-konnaonayamiarimasenka-wakunasi span {
	font-size: 28px;	/*文字サイズ*/
	color: #c30000;	
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){/*list2ボックス（トップページの「現在の求人」で使っている２列のブロック）
	---------------------------------------------------------------------------*/
	.list-re-konnaonayamiarimasenka-wakunasi a {	
		height: 60px;		/*ボックスの高さ*/
		padding: 5px 10px;	/*上下、左右へのボックス内の余白*/
	}
/*list2ボックス（トップページの「現在の求人」で使っている２列のブロック）
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	.list-re-konnaonayamiarimasenka-wakunasi li {
		width: 90%;	/*１列にする設定*/
		
	}

/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.list-re-konnaonayamiarimasenka-wakunasi span {
	font-size: 18px;	font-weight: bold;
}	}


/*画面幅360px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:360px){

	/*list2ボックス（トップページの「現在の求人」で使っている２列のブロック）
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	.list-re-konnaonayamiarimasenka-wakunasi li {
		float: none;width: 90%;	/*１列にする設定*/
		margin: 0 2px  10px;	/*上、左右0、下に空けるボックスの外側の余白。*/
	}

	.list-re-konnaonayamiarimasenka-wakunasi li a {
		height: 60px;
	}
	/*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
	.list-re-konnaonayamiarimasenka-wakunasi .img {
		height: auto;	/*高さをリセット*/
		width: 15%;		/*幅の指定に変更*/
	}	}


/*list2（service.htmlで利用している各ボックス）/tp_home4
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list2tp_home4 {
	position: relative;
	float: left;	/*左に回り込み*/
	width: 30%;		/*ボックス幅*/
	margin: 0 1.5% 40px;	/*上、左右、下へ、ボックスの外側に空けるスペース*/
	text-align: center;		/*内容を中央よせ*/
}
/*ボックス内の画像*/
.list2tp_home4 figure {
	margin-bottom: 20px;	/*画像の下に空けるスペース*/
}
.list2tp_home4 figure a:hover{
	opacity: 0.8;	/*マウスオン時。透明度80%にする。*/
}
/*ボックス内のh4（見出し）タグ*/
.list2tp_home4 h4 {
	position: absolute;
	top: 0px;	/*list2ボックスの上から0pxの場所に配置*/
	width: 100%;	/*幅*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #fff;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
.list2tp_home4 p {
	padding: 0px !important;}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*list2（service.htmlで利用している各ボックス）
---------------------------------------------------------------------------*/
/*ボックス内のh4（見出し）タグ*/
.list2tp_home4 h4 {
	display: none;	/*スペースが狭くなって見出しの下に画像が隠れてしまうので、見出しを非表示にする。*/
}

}