@charset "utf-8";

@import url(https://creme-cremes.com/components/2019creme/css/slide-slick.css);
@import url("https://creme-cremes.com/components/2019creme/css/style-inview.css");




/*Google Fontsの読み込みtp_gallery2
-----------------------------------------------------faq-causes-and-solutions------------bg-slideup----------*/
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Homemade+Apple&family=Sawarabi+Mincho&display=swap');

/*Font Awesomeの読み込みtp_gallery2
-----------------------------------------------btn4----faq-fee------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");



    
/*cute1option1（productページのブロックの右上に斜めに配置している帯
	 -------------------------------------ta1------------*/
	 .box-student .option-student {
		text-align: center;display: block;
		width: 300px;		/*幅*/
		position: absolute;
		right: 0px;	
		top: 0px;	
		transform: rotate(45deg) translate(93px,-45px);	/*45度回転。右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
		background: #eea882;	
		color: #fff;			/*文字色*/
		letter-spacing: 0.1em;	/*文字間隔をほんの少し広くとる*/
		box-shadow: -3px 3px 10px rgba(0,0,0,0.15);	/*ボックスの影。右へ、下へ、ぼかし幅、0.15は色が15%出た状態の事。*/
	}
/*cute1box1指定（角丸のボックス）
-------------------------------------------------------------h2-catch-copy--------------*/
.box-student {
   overflow: hidden;
   position: relative;
   padding: 20px 40px;	
   border-radius: 30px;	
   margin-bottom: 30px;	
   background: #fff;		
   border: 3px dashed #eea882;	
}

.box-student h3 {
	color: #74634b;		
	font-size: 120%;	
	text-align: center;	/*文字をセンタリング*/
	height: 2em;		/*高さ*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}
/*p（段落）タグの設定*/
.box-student p {
	padding: 0 !important;
	/*line-height: 1.5;	行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 90%;		/*文字サイズを少し小さく*/
	color: #333;		/*文字色*/
			/*height: 6em;高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}
/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
.box-student {
   padding: 50px 5px 10px 5px ;		/*上下、左右へのボックス内の余白*/
   margin: 10px 0px;	
   border-radius: 20px;	/*角丸のサイズ*/
}	}
		


/*ページャーmb30 ta3box-student
---------------------------------------------------------------------------*/
.pager {
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: center;
	color: #999;	/*文字色type8*/
}
.pager a {
	display: inline-block;text-decoration: none;
	margin-bottom: 5px;
	padding: 0 10px;	/*上下、左右へのボタン内の余白*/
	border: 1px solid #eea882;	/*枠線の幅、線種、色*/
	background: #eea882;		/*背景色*/
	color: #fff;				/*文字色*/
}

/*リンクのマウスオン時*/
.pager a:hover {
	background: #fff;	/*背景色*/
	color: #eea882;		/*文字色*/
}

/*リンクのないボタン*/
.pager span {
	display: inline-block;
	margin-bottom: 5px;
	padding: 0 10px;		/*上下、左右へのボタン内の余白*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	background: #6b6351;		/*背景色*/
	color: #bbbbbb;			/*文字色*/
}




/*ゴールド額縁用.list16のアレンジ各ブロックtp115横３PC,ｓｐ１よい。news黒板に文字にta8*/
/*フッター内のh2タグfood9*/
#contents h2.type5 {
	position: relative; color: #ffffff;display: inline-block; text-align: enter;	/*ta8文字を左寄せ*/
	overflow: hidden;
	font-size: 1.8rem;	/*文字サイズ*/
	line-height: 1.3;
	width: 90%;		/*ボックスの幅*/
	padding: 3%;	/*ボックス内の余白*/
	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;			/*同上*/
	text-decoration: none;
}

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

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

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


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*各キャストボックスの設定tp115::480ika*/
#contents h2.type5  {
	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;
}}

/*レシピでおすすめレシピtype13の余白多め版*/
#contents h2.type4 {
	background: url(https://creme-cremes.com/components/images/bg1-lace.png) no-repeat right center, -webkit-gradient(linear, left top, left bottom, from(#6b6351), to(#6b6351));	
	background: url(https://creme-cremes.com/components/images/bg1-lace.png) no-repeat right center, -webkit-linear-gradient(#6b6351, #6b6351);	
	background: url(https://creme-cremes.com/components/images/bg1-lace.png) no-repeat right center, linear-gradient(#6b6351, #6b6351);		
 	clear: both;
  position: relative;
  padding: 50px 0px;	/*上下、左右へのボックス内の余白*/
  margin: 2em 0;
  background-color: #6b6351;
  color: #ffffff;
  font-weight: bold;
  }
  
  #contents h2.type4 :after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #6b6351;
    width: 0;
    height: 0;
  }

  #contents h2.type4 span {
    text-align: center;		/**/ 
   	display: block;
	font-size: 16px;	/*12文字サイズ*/color: #eea882;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
#contents h2.type4 {
	margin-bottom: 20px;	/*下に空けるスペース*/
	font-size: 22px;		/*文字サイズ*/
	letter-spacing: -0.1em;	/*-0.1em文字間隔をデフォルトにする*/
}
#contents h2.type4 span {
	display: block;
	font-size: 16px;	/*12文字サイズ*/
 	letter-spacing: -0.1em;	/*文字間隔をデフォルトにする*/
}}



/*レシピでおすすめレシピtype5*/
#contents h2.type13 {
	background: url(https://creme-cremes.com/components/images/bg1-lace.png) no-repeat right center, -webkit-gradient(linear, left top, left bottom, from(#6b6351), to(#6b6351));	
	background: url(https://creme-cremes.com/components/images/bg1-lace.png) no-repeat right center, -webkit-linear-gradient(#6b6351, #6b6351);	
	background: url(https://creme-cremes.com/components/images/bg1-lace.png) no-repeat right center, linear-gradient(#6b6351, #6b6351);		
 	clear: both;
  position: relative;
  padding: 0.5em 0.7em;
  margin: 2em 0;
  background-color: #6b6351;
  color: #ffffff;
  font-weight: bold;
  }
  
  #contents h2.type13 :after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #6b6351;
    width: 0;
    height: 0;
  }

  #contents h2.type13 span {
    text-align: center;		/**/ 
   	display: block;
	font-size: 20px;	/*12文字サイズ*/color: #ffd3bb;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
#contents h2.type13 {
	margin-bottom: 20px;	/*下に空けるスペース*/
	font-size: 24px;		/*文字サイズ*/
	letter-spacing: -0.1em;	/*文字間隔をデフォルトにする*/
}
#contents h2.type13 span {
	display: block;
	font-size: 20px;	/*12文字サイズ*/
  color: #ffd3bb;	letter-spacing: -0.1em;	/*文字間隔をデフォルトにする*/
}}




/*bg-cta ryouri 飾り切のCTAブロックmail-maga*/
.bg9 { color: #fff;	
  background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta1-min.jpg);	/*背景色、背景画像の読み込み。※古いブラウザ用。*/
  background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta1-min.jpg) center / cover;	/*背景色、背景画像の読み込み。*/
 
}
/*cafe16 ctaシャドーつきtype8*/
.bg9 h2.bg9-cta {
clear: both;
margin-bottom: 20px;	/*下に空けるスペース*/
text-align: center;		/*テキストのセンタリング*/
font-size: 48px !important;		/*文字サイズ*/
letter-spacing: 0.1em;	/*文字間隔を少し広くとる指定*/
line-height: 1.4;		/*行間を少し狭くする。デフォルトは冒頭のbody内にあります。*/
text-shadow: 2px 2px 0px rgba(255,255,255,0.3);	/*テキストの影。右へ、下へ、広げる幅、0,0,0は黒の事で0.3は色が30%出た状態。*/
}
.bg9 h2.bg9-cta span {
display: block;
font-size: 13px;	
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.bg9 h2.bg9-cta {
font-size: 24px !important;		/*文字サイズ*/
letter-spacing: normal;
}}





/*fee	開閉ボックス全体*/
/*エステ４FAQボックスをFEE専用にした*/
.faq-fee {
	padding: 0 10px;	/*btn9上下、左右へのボックス内の余白*/
}
/*質問*/
.faq-fee dt {font-weight: bold;	color :#202124;margin: 1.5px 0;border: 1px solid #ddd;	/* 線の太さ・種類・色 */
	border-radius: 1px;	/*枠を角丸にする指定*/
	margin-bottom: 2px;	/*下に空けるスペース*/
	background: linear-gradient(#fff4ee, #ffe4d5);/*背景グラデーション*/
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
	text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 20px 1em 20px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（beforeをかえたけど右にいかない）*/
.faq-fee dt::after {
	
	content: "+";		/*\f059使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	padding-left: 4em;		/*アイコンとテキストの間の余白*/
	color: #a99f85;			/*文字色*/
}

.faq-fee dd {
	background: #fff4ee;
	padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

.faq-fee dt span {text-indent: 0;}


/*kids6年間スケジュール上部の横並びの「月」メニューdt
---------------------------------------------------------------------------*/
.inline-menu {
	text-align: center;
	margin-bottom: 50px;	/*下に空けるスペース*/
}

.inline-menu li {
	display: inline-block;	/*横並びにする*/
	margin-bottom: 10px;	/*メニューが２段以上になった場合の、上下の間に空けるスペース*/
}

.inline-menu li a {
	display: block;text-decoration: none;
	padding: 0 10px;			/*上下、左右へのメニュー内の余白*/
	background: #fff;			/*背景色*/
	border: 3px solid #eea882;	/*枠線の幅、線種、色*/
	border-radius: 3px;			/*角丸のサイズ*/
}

/*マウスオン時*/
.inline-menu li a:hover {
	background: #eea882;
	color: #fff;
}


/*type14h2タグ特大文字でシャドーつきmenubar-photogallery*/
#contents h2.lp3 {
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/color: #ffffff;	/* 吹き出し文字色 */

	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents h2.lp3 span {
  color: #202124;	/* type14吹き出し文字色 */

}

/*h2タグ上下せん*/
#contents h2.lp2 {
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 24px;	/*文字サイズ*/color: #ffffff;	/* 吹き出し文字色 */
	border-top: 1px solid #ffffff;	/*下線の幅、線種、色*/
	border-bottom: 1px solid #ffffff;	/*下線の幅、線種、色*/
	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}


/*s最初に講座名*/
#contents h2.lp1 { background: #fff4ee;
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/color: #202124;	/* 吹き出し文字色 */
	border: 1px solid #202124;	/*下線の幅、線種、色*/
	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents h2.lp1 span {
  color: #202124;	/* type14吹き出し文字色 */

}



  


/*bgＣＴＡパン*/
.bg-no-knead-bread {	background: #fff4ee url(https://creme-cremes.com/components/images/bg-cta9-min.jpg);	/*bg-cta7-min.jpg、マカロン背景、背景画像の読み込み。※古いブラウザ用。*/
	background: #fff4ee url(https://creme-cremes.com/components/images/bg-cta9-min.jpg) center / cover;	/*背bg-access景色、背景画像の読み込み。*/
  color: #202124;			/*文字色*/
  }
.bg-no-knead-bread h2.img {
background: #6b6351 !important;
}

  
    /*質問biz57*/
.faq dt {
	border-radius: 10px;	/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/  background: linear-gradient(#394a29, #25301b);	/*背景グラデーション*/ 
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
	text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
	border: 1px solid #e4e2d7;		/*枠線の幅、線種、色*/
	color: #fff;		 font-weight: bold;					/*文字色*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f059";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #fff;			/*アイコンの色*/
	padding-right: 1em;		
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

.faq dt span {text-indent: 0;}

    /*回答前の*/
    .faq dd {
      padding-left: 30px;		/*背景アイコンに重ならないよう左に余白を作る*/
      margin-bottom: 20px;	/*ボックスの下側（外側）に空けるスペース*/
      padding-bottom: 20px;	/*ボックス内の下側に空けるスペース*/
      border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
      background: url(https://oryourikyousitu.com/components/images/faq_a.png) no-repeat left top / 30px;	/*「A」アイコン*/
    } 
      
   
  

#contents h4 span {
	display: block;
	font-size: 16px;		/*文字サイズfaq*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定*/
	padding-left: 3px;		/*左に空ける余白*/
	padding-bottom: 10px;	/*下に空ける余白*/
}
/*cute1 box1指定（section全体が角丸のボックス）食性寒涼平温date-up
---------------------------------------------------------------------------*/
.box1section-netufood {
	overflow: hidden;position: relative;
	padding: 20px 40px;		/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #FF6565;		/*背景色*/
} 

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
.box1section-netufood {
	padding: 10px 20px;		/*上下、左右へのボックス内の余白*/
	border-radius: 20px;	/*角丸のサイズ*/
}  }

/*cute1 box1指定（section全体が角丸のボックス）
---------------------------------------------------------------------------*/
.box1section-onfood {
	overflow: hidden;position: relative;
	padding: 20px 40px;		/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #FFCCCC;		/*背景色*/
} 

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
.box1section-onfood {
	padding: 10px 20px;		/*上下、左右へのボックス内の余白*/
	border-radius: 20px;	/*角丸のサイズ*/
}  }


/*cute1 box1指定（section全体が角丸のボックス）type4
---------------------------------------------------------------------------*/
.box1section-heifood {
	overflow: hidden;position: relative;
	padding: 20px 40px;		/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #FFFFCC;		/*背景色*/
} 

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
.box1section-heifood {
	padding: 10px 20px;		/*上下、左右へのボックス内の余白*/
	border-radius: 20px;	/*角丸のサイズ*/
}  }

/*cute1 box1指定（section全体が角丸のボックス）
---------------------------------------------------------------------------*/
.box1section-ryoufood {
	overflow: hidden;position: relative;
	padding: 20px 40px;		/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #CCFFF2;		/*背景色*/
} 

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
.box1section-ryoufood {
	padding: 10px 20px;		/*上下、左右へのボックス内の余白*/
	border-radius: 20px;	/*角丸のサイズ*/
}  }

/*cute1 box1指定（section全体が角丸のボックス）
---------------------------------------------------------------------------*/
.box1section-kanfood {
	overflow: hidden;position: relative;
	padding: 20px 40px;		/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #00FFBF;		/*背景色*/
} 

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
.box1section-kanfood {
	padding: 10px 20px;		/*上下、左右へのボックス内の余白*/
	border-radius: 20px;	/*角丸のサイズ*/
}  }


  

/*sitemap　clinic4フッターメニューta8
---------------------------------------------------------------------------*/
/*ボックス全体*/
#menu-sitemap {
	clear: both;overflow: hidden;
	font-size: 80%;	/*文字サイズを少し小さく*/
	margin-left: -1%;
	padding: 20px 0;
}
/*１列分の設定*/
#menu-sitemap ul {
	float: left;	/*左に回り込み*/
	width: 31%;		/*今回は3 ４列24作ったので、下のmarginを含めて25%になるよう指定。５列にするならこの行は19%にする。*/
	margin-left: 1%;
}
/*メニュー１個あたりの設定*/
#menu-sitemap ul li {
	padding: 0 10px;	/*上下、左右への余白*/
}
/*見出し*/
#menu-sitemap li.title {
	font-weight: bold;	/*太字にする*/
	background: rgba(0,0,0,0.3);	/*背景色*/
	border-radius: 2px;	/*角丸のサイズ*/
}
/*リンクテキスト*/
#menu-sitemap a {
	text-decoration: none;
	opacity: 0.6;	/*透明度。70%色がでた状態の事。*/
}
/*マウスオン時*/
#menu-sitemap a:hover {
	opacity: 1;	/*透明度。100%色がでた状態の事。*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*１列分の設定*/
#menu-sitemap ul {
	float: left;	/*左に回り込み*/
	width: 48%;		/*今回は２列。*/
	margin-left: 2%;
}}


/*type14h2タグ特大文字でシャドーつきmada*/
#contents h2.lp3 {
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/color: #6b6351;	/* 吹き出し文字色 */

	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents h2.lp3 span {
  color: #202124;	/* type14吹き出し文字色 */

}

/*h2タグ上下せん*/
#contents h2.lp2 {
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 24px;	/*文字サイズ*/color: #6b6351;	/* 吹き出し文字色 */
	border-top: 1px solid #6b6351;	/*下線の幅、線種、色*/
	border-bottom: 1px solid #6b6351;	/*下線の幅、線種、色*/
	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}

/*type2り1*/
#contents h2.lp1 {  
  position: relative;
  padding: 0.5em 0.7em;
  margin: 2em 2px;
  background: #fff4ee;
  color: #202124;
  font-weight: bold;
  }
  
 

  /*type2アイコンmenubar-side（正社員、アルバイト、パート、未経験可、など）tpjob2　step box 
---------------------------------------------------------------------------*/
.icon-key {
	display: inline-block;
	margin: 2px;
	font-size: 12px;	
	padding: 0 5px;		
  color: #202124 !important;	/*文字色*/
	border-radius: 4px;	/*角丸のサイズ*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	background: #eee;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#fff, #eee);	/*グラデーション*/
}
.icon-key a {text-decoration: none;}

.icon8 {
	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);	/*グラデーション*/
}
.icon8 a {text-decoration: none;}
/*アイコン色付き（正社員）*/
.icon8.color1 {
	border: 1px solid #de0707;	/*枠線の幅、線種、色*/
	background: #ff0808;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#ff0808, #de0707);	/*グラデーション*/
	color: #fff !important;	/*文字色*/
}
/*アイコン色付き（アルバイト）*/
.icon8.color2 {
	border: 1px solid #161995;	/*枠線の幅、線種、色*/
	background: #2b2ebc;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#2b2ebc, #161995);	/*グラデーション*/
	color: #fff;	/*文字色*/
}



.icon {
	display: inline-block;
	margin: 2px;
	font-size: 12px;	/*list8にもアイコンあるきいてる？*/
	padding: 0 5px;		/*ボックス内の余白*/
	border-radius: 4px;	/*角丸のサイズ*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}
.icon a {text-decoration: none;}
/*アイコン色付き（正社員）これでない白字になる*/
.icon.color1 {
	border: 1px solid #de0707;
	background: #ff0808;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#ff0808, #de0707);	/*グラデーション*/
	color: #fff !important;	/*文字色*/
}
.icon.color2 {
	border: 1px solid #161995;	/*枠線の幅、線種、色*/
	background: #2b2ebc;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#2b2ebc, #161995);	/*グラデーション*/
	color: #fff;	/*文字色*/
}



/*job2アイコン（正社員）icon*/
.icon-techniques-to-learn {
	display: inline-block;
	margin: 2px;
	font-size: 12px;	/*文字サイズ*/
	padding: 0 5px;		/*ボックス内の余白*/
	border-radius: 4px;	/*角丸のサイズ*/
  border: 1px solid #60523f;	/*枠線の幅、線種、色*/
	background: #76654e;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#76654e, #60523f);	/*グラデーション*/
	color: #fff !important;	/*文字色*/
}
.icon-techniques-to-learn a {text-decoration: none;}/*リンク色なし*/

/*job4求人一覧ページの「申込み用オレンジ。PCで横長」orangeボタンmenu-2-index
---------------------------------------------------------------------------*/
a.btn11 {
	display: block;text-decoration: none;
	background: #fe7200;	/*背景色（古いブラウザ用）*/
	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/

	background: linear-gradient(#ffa800,#ff8400);/*背景グラデーション*/
	padding: 30px 20px;	/*上下、左右へのボタン内の余白*/ margin: 2em auto;
  width: 90%;				/*ボタンの幅*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 10px;	/*角を丸くする指定*/
	line-height: 1.5;		/*行間。デフォルトより少し狭くする。*/
	letter-spacing: 0.4em;	/*文字間隔を少し広くとる*/
	transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/

  box-shadow: 10px 20px 40px rgba(0,0,0,0.4);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.4は色が40%出た状態。*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);	/*テキストの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
}

a:hover.btn11 {transform: scale(1.05);		/*105%に拡大する*/
	filter: brightness(1.2);	/*少しだけ明るくする*/
	box-shadow: none;
	background: #fff;	
	color: #fae5d5;		
}
a.btn11:before {	/* 追加。アフターなら語尾？*/
  position: absolute;
  top: 50%;
  left: 12px;
  content: '';
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

/*spanタグ。大きな文字の指定です。*/
.btn11 span {
	display: block;		/*改行させる為*/
	font-size: 2.2rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}


/*job4の緑「申込み用。PCで横長」
---------------------------------------------------------------------------*/
a.btn12 {
	display: block;text-decoration: none;
	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/
  background: #4f9610;	/*背景色（古いブラウザ用）*/
  background: linear-gradient(#65bd16,#4f9610);/*背景グラデーション*/
  padding: 30px 20px;	/*上下、左右へのボタン内の余白*/
  width: 90%;				/*ボタンの幅*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 10px;	/*角を丸くする指定*/
	line-height: 1.5;		/*行間。デフォルトより少し狭くする。*/
	letter-spacing: 0.4em;	/*文字間隔を少し広くとる*/
	transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/

  box-shadow: 10px 20px 40px rgba(0,0,0,0.4);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.4は色が40%出た状態。*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);	/*テキストの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
}

a:hover.btn12 {transform: scale(1.05);		/*105%に拡大する*/
	filter: brightness(1.2);	/*少しだけ明るくする*/
	box-shadow: none;
	background: #fff;	
	color: #fae5d5;		
}
a.btn12:before {	/* 追加。アフターなら語尾？*/
  position: absolute;
  top: 50%;
  left: 12px;
  content: '';
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

/*spanタグ。大きな文字の指定です。*/
.btn12 span {
	display: block;		/*改行させる為*/
	font-size: 2.2rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	}


/*job4のred「申込み用。PCで横長」
---------------------------------------------------------------------------*/
a.btn13 {
	display: block;text-decoration: none;
	 background: #9f0000;	/*背景色*/
	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/
	
	background: linear-gradient(#db0202,#9f0000);/*背景グラデーション*/
	padding: 10px 20px;	/*上下、左右へのボタン内の余白*/
  width: 90%;				/*ボタンの幅*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 10px;	/*角を丸くする指定*/
	line-height: 1.5;		/*行間。デフォルトより少し狭くする。*/
	letter-spacing: 0.4em;	/*文字間隔を少し広くとる*/
	transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/

  box-shadow: 10px 20px 40px rgba(0,0,0,0.4);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.4は色が40%出た状態。*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);	/*テキストの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/

}
/*job4のgreen02「申込み用。PCで横長」
---------------------------------------------------------------------------*/
a.btn14 {
	display: block;text-decoration: none;
  background: #57a581;	/*背景色*/
	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/
  background: linear-gradient(#6dc99f,#57a581);/*背景グラデーション*/
	padding: 10px 20px;	/*上下、左右へのボタン内の余白*/
  width: 90%;				/*ボタンの幅*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 10px;	/*角を丸くする指定*/
	line-height: 1.5;		/*行間。デフォルトより少し狭くする。*/
	letter-spacing: 0.4em;	/*文字間隔を少し広くとる*/
	transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/

  box-shadow: 10px 20px 40px rgba(0,0,0,0.4);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.4は色が40%出た状態。*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);	/*テキストの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/

}/*job4のbrown「申込み用。PCで横長」
---------------------------------------------------------------------------*/
a.btn15 {
	display: block;text-decoration: none;
  background: #695725;	/*背景色*/
	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/	
  background: linear-gradient(#87733b,#695725);/*背景グラデーション*/
 
	padding: 10px 20px;	/*上下、左右へのボタン内の余白*/
  width: 90%;				/*ボタンの幅*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 10px;	/*角を丸くする指定*/
	line-height: 1.5;		/*行間。デフォルトより少し狭くする。*/
	letter-spacing: 0.4em;	/*文字間隔を少し広くとる*/
	transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/

  box-shadow: 10px 20px 40px rgba(0,0,0,0.4);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.4は色が40%出た状態。*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);	/*テキストの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/

}/*job4のgray「申込み用。PCで横長」
---------------------------------------------------------------------------*/
a.btn16 {
	display: block;text-decoration: none;
  background: #646464;	/*背景色*/
	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/	
  background: linear-gradient(#8a8a8a,#646464);/*背景グラデーション*/
	padding: 10px 20px;	/*上下、左右へのボタン内の余白*/
  width: 90%;				/*ボタンの幅*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 10px;	/*角を丸くする指定*/
	line-height: 1.5;		/*行間。デフォルトより少し狭くする。*/
	letter-spacing: 0.4em;	/*文字間隔を少し広くとる*/
	transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/

  box-shadow: 10px 20px 40px rgba(0,0,0,0.4);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.4は色が40%出た状態。*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);	/*テキストの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/

}
/*job4のskyblue「申込み用。PCで横長」
---------------------------------------------------------------------------*/
a.btn17 {
	display: block;text-decoration: none;
background: #13a7d8;	/*背景色*/
	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/background: linear-gradient(#2dc4f6,#13a7d8);/*背景グラデーション*/	
	padding: 10px 20px;	/*上下、左右へのボタン内の余白*/
  width: 90%;				/*ボタンの幅*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 10px;	/*角を丸くする指定*/
	line-height: 1.5;		/*行間。デフォルトより少し狭くする。*/
	letter-spacing: 0.4em;	/*文字間隔を少し広くとる*/
	transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/

  box-shadow: 10px 20px 40px rgba(0,0,0,0.4);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.4は色が40%出た状態。*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);	/*テキストの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/

}

/*h2タグtype14h3.type5*/
#contents h3.type3 {
	border: 1px solid #000;	/* 内側の線の太さ・種類・色 */
	color: #202124;	margin: 20px 20px;
	padding: 10px; 
	position: relative;
	z-index: 0;
}

#contents h3.type3:before {
	border: 2px solid #000;	/* 外側の線の太さ・種類・色 */
	content: '';
	display: block;
	position: absolute;
	top: -8px;
	bottom: -8px;
	left: -8px;
	right: -8px;
	z-index: -1;
} 


/*CTA上下せん*/
#contents h3.type4 {
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/color: #fff;	/* 吹き出し文字色 */
	border-top: 1px solid #fff;	/*下線の幅、線種、色*/
	border-bottom: 1px solid #fff;	/*下線の幅、線種、色*/
	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents h3.type4 span {
	display: block;
	font-size: 16px;		/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定*/
	padding-left: 3px;		/*左に空ける余白*/
	padding-bottom: 10px;	/*下に空ける余白*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  #contents h3.type4 {
    font-size: 24px;	
    letter-spacing: normal;	/*文字間隔をデフォルトにする*/
  }}


/*116sub,sideコンテンツ内のレースつきをマカロンに設定type6pop-hukidasi*/
#contents h3.type6 {
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	background-image: url(https://creme-cremes.com/components/images/bg_lace.png);
	background-size: auto 50px;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 40px;	margin-bottom: 20px;
}

#contents h3.type10 {
	clear: both;
	margin-bottom: 15px;
	padding-left: 7px;	/*左に空ける余白*/
	font-size: 16px;	/*文字サイズ*/
}
/*h3タグの左のアクセントライン*/
#contents h3.type10::first-letter {
	border-left: 3px solid #000;	/*左側の線の幅、線種、色*/
	padding-left: 10px;		/*ラインと文字との間の余白*/
}
/*cta白文字*/
#contents h3.type9 {
  padding: 0.5em;
  color: #fff;/*文字色*/
   border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/

}

/*前後にラインCTAでも*/
#contents h3.type8W {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

#contents h3.type8W:before, #contents h3.type8W:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 3px;
  background-color: white ;
}

#contents h3.type8W:before {
  left:0;
}
#contents h3.type8W:after {
  right: 0;
}


#contents h3.type11 {/*真珠可愛い*/
	clear: both !important;
	font-size: 48px !important;	
	color: #fff;	
	margin: 20px 30px;	

	margin-bottom: 20px !important;
	padding: 10px 15px !important;
	
	border-radius: 5px !important;	
	
	letter-spacing: o.1em !important;	/*0.2em 文字間隔を少し広くとる設定*/
	text-align: center !important;	/*文字をセンタリング*/
	background: url(https://creme-cremes.com/components/images/line1-mae.png) repeat-x center bottom;	/*真珠j*/
	background: url(https://creme-cremes.com/components/images/line1-ame.png) repeat-x center bottom/auto 12px;	/*�����p�̔w�i�摜*/
}

	/*point skill下に空けるスペース*/
#contents h2.type14  {
	clear: both;
	margin-bottom: 50px;
	font-size: 2.25rem;		/*文字サイズ。冒頭で指定しているフォントサイズの2.25倍です。*/
	text-align: center;		/*文字をセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少し広めにとる指定。通常がいいならこの１行削除。*/
}

#contents h2.type14  span {
	display: block;white-space: nowrap;
	font-size: 0.875rem;	/*文字サイズ。冒頭で指定しているフォントサイズの0.875倍です。*/
	background: #fff4ee;/*背景色*/border-top: 3px solid #eea882;	/*上の線の幅、線種、色*/
	padding: 15px 20px 0;	/*上、左右、下への余白*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  #contents h2.type14 { 
       margin-bottom: 30px;
    
    font-weight: 700;
  }  }


/*サイトマップfood9「テキストメニュー」設定menu3-sideta1
---------------------------------------------------------------------------*/
/*メニュータイトル*/
.plr3p {padding-left: 3% !important;padding-right: 3% !important;}
dl.text-menu dt {
	 background: rgba(0,0,0,0.1);				/*背景色*/
	 border-radius: 5px;			/*角丸の指定。この行削除すれば通常の長方形になります。*/
	 padding: 5px 10px;				/*上下、左右への余白*/
	 text-align: center;			/*テキストをセンタリング*/
}
dl.text-menu dd + dt {
	margin-top: 10px;
}
/*メニュー名*/
dl.text-menu dd {
	overflow: hidden;
	margin: 0px 20px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
/*金額*/
dl.text-menu dd .classification {
	float: right;	/*右に回り込み*/
}

/*tp-clinic5/box（ただのボックス）
---------------------------------------------------------------------------*/
/*box*/
.box {
	overflow: hidden;
	border: 3px solid #6b6351;	/*枠線の幅、線種、色*/
	padding: 20px;				/*ボックス内の余白*/
	border-radius: 10px;		/*角丸のサイズ。この１行を削除すれば角のとれた長方形になります。*/
	margin: 20px　20px;		/*ボックスの3%下に空けるスペース*/
	background: #fff;			/*背景色*/
}
/*box内のh4タグ*/
.box h4 {
	color: #6b6351;		/*文字色*/
	font-size: 130%;	/*文字サイズ*/
}
/*box内のpタグ*/
.box p {
	padding: 0 !important;
}
/*box内のfrとflスタイルのリセット*/
.box .fr,.box .fl {margin-bottom: 0;}
/*tp クリニック３診療のご案内ページの「診療までの流れ」のステップブロック↓つき（info.html）
---------------------------------------------------------------------------*/
.step {border: 3px solid  #be8a3a;	/*枠線の幅、線種、色*/
	border-radius: 10px;		/*角丸のサイズ。この１行を削除すれば角のとれた長方形になります。*/

	overflow: hidden;
	padding: 20px 20px 120px;	/*上、左右、下へのボックス内の余白*/
	margin-bottom: 20px 20px;
	background: url(https://creme-cremes.com/components/images/arrow-step.png) no-repeat center bottom/-200px;	/*でていない？？プラスだと中にでたので。プラスは何かにつかえそマイナスにしてみる背景の矢印画像の読み込み。りピーとせず、中央下部に配置。幅は200px。*/
}
.step h4 {
	color: #be8a3a;		/*文字色*/
	font-size: 30px;	/*文字サイズ*/
}
.step h4 span {
	display: inline-block;
	background: #be8a3a;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ（行間）*/
	border-radius: 50%;		/*角丸のサイズ。50%にすると円形になる。*/
	text-align: center;		/*文字を中央に*/
	margin-right: 20px;		/*右側に空けるスペース*/
}
/*段落タグ*/
.step p {
	padding: 0 !important;
}
/*最後のステップボックス*/
.step:last-child {
	background: none;	/*背景を消す*/
	padding-bottom: 0;	/*下の余白を消す*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.step {
	padding: 10px 10px 60px;	/*上、左右、下へのボックス内の余白*/
	margin-bottom: 10px;
	background: url(https://creme-cremes.com/components/images/arrow-step.png) no-repeat center bottom/-100px;	/*detenai背景の矢印画像の読み込み。りピーとせず、中央下部に配置。幅は200px。*/
}
/*h4見出し*/
.step h4 {
	font-size: 24px;	/*文字サイズ*/
}
/*h4見出しのspanタグ。見出し冒頭の番号。*/
.step h4 span {
	width: 30px;			/*幅*/
	line-height: 30px;		/*高さ（行間）*/
	margin-right: 10px;		/*右側に空けるスペース*/
}  }


/*レシピh2タグの設定*/
#contents article h2 {
	clear: both;
	margin: 20px 20px;
	padding: 15px 20px;	/*上下、左右への余白*/
	font-size: 20px;	/*文字サイズ*/
	background: #e97495 url(https://creme-cremes.com/components/images/icon-spoonfork.png) no-repeat right bottom;	/*背景色と背景画像（古いブラウザ用）*/
  background: url(https://creme-cremes.com/components/images/icon-spoonfork.png) no-repeat right bottom, linear-gradient(#fffaf0, #e3d5c2 49%, #d6cdb2 50%, #c2b69e);	/*背景グラデーション*/
	color: #202124;
	text-shadow: 0px -1px 1px #e97495;	/*テキストの影。右へ、下へ(マイナスなので上に向かう)、広げる幅、色。*/
	border: 1px solid #be8a3a;	/*枠線の幅、線種、色*/
}
/*h2タグのspan（装飾用）タグ*/
#contents article h2.span {
	color: #fff;	
	color: rgba(255,255,255,0.6);	
}
::::::

/*h2見出しphot07*/
#contents h2.type15  {
	clear: both;
	margin-bottom: 30px;	/*下に空けるスペース*/
	font-size: 40px;		/*文字サイズ*/
	text-align: center;		/*文字をセンタリング*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
	line-height: 1.5;		/*行間をデフォルトから少し狭くする*/
  
background: #fff4ee;	
color: #202124;		
border-radius: 3px;	/*角丸のサイズ30tuika*/
padding: 10px 30px;		/*上下、左右へのブロック内の余白tuika*/
}
/*h2見出し内のspanタグ。小文字表記部分。*/
#contents h2.type15  span {
	display: block;
	font-size: 12px;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
#contents h2.type15 {
	margin-bottom: 20px;	
	font-size: 24px;	
	letter-spacing: normal;	/*文字間隔をデフォルトにする*/
}}
/*article全体中央にしたいがきかない下にバーがあるタイプ
clear: both;できかない・�*/
#contents h2.type6  {

  color: #e99383;
  text-align: center !important;	/*全体中央にしたいがきかない・�*/
  position: relative;
  display: inline-block;
  margin: 20px 20px;
  font-size: 30px;	/**/
	letter-spacing: 0em;	/*0.2文字間隔を少し広くとる指定をせまくしたい*/
}
#contents h2.type6 span {
  color: #e99383;
  text-align: center !important;	/*全体中央にしたいがきかない・�*/
  display: block !important;
  font-size: 24px;	
}
#contents h2.type6 :before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #e99383;
  border-radius: 2px;
}


/*h2タグfood9アンダーラインタイプタイプ*/
#contents h2.type6-under{
	clear: both;
	margin-bottom: 50px;
	font-size: 2rem;	/*文字サイズ。冒頭で指定しているフォントサイズの2倍です。*/
	text-align: center;	/*文字をセンタリング*/
	letter-spacing: 0.1em;	/*文字間隔を少し広めにとる指定。通常がいいならこの１行削除。*/
}
/*h2タグ内のspanタグ（装飾文字）*/
#contents h2.type6-under span {
	display: inline-block;white-space: nowrap;
	font-size: 0.875rem;	/*文字サイズ。冒頭で指定しているフォントサイズの0.875倍です。*/
	border-top: 3px solid #eea882;	/*上の線の幅、線種、色*/
	padding: 15px 20px 0;	/*上、左右、下への余白*/
}

/*h2タグtp_cafe16変更　背景大文字薄い文字黒重ねる巨大でよい*/
#contents h2.type7 {color: #fff4ee;
	clear: both;font-weight: 800;		/*かなり太字に*/
	margin-bottom: 0px;	/*20下に空けるスペース*/
	text-align: center;		/*テキストのセンタリング*/
	font-size: 58px;		/*48文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くとる指定*/
	line-height: 1.4;		/*行間を少し狭くする。デフォルトは冒頭のbody内にあります。*/
	
}
/*h2タグ内のspanタグ（飾り文字）*/
#contents h2.type7 span { color: #fff4ee;font-weight: normal;		
	display: block;
	font-size: 19px;	/*文字サイズ*/}
  /*画面幅480px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:480px){
    #contents h2.type7 {
      font-size: 39px;
      letter-spacing: normal;
    }
}
/*
---------------------------------------------------------------------------*/
/*cta大文字赤文字できれば明朝など違う字体ラインでていないようtype2*/
#contents h2.type12  {
	clear: both; color: #c30000;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/
	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents h2.type12 span {
	display: block;
	font-size: 16px;		/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定*/
	padding-left: 3px;		/*左に空ける余白*/
	padding-bottom: 10px;	/*下に空ける余白*/
}


/*h2タグCTA黄色できれば前に３０ｔｈ*//*30年に変えるcafe9*/
#contents h2.type16 {
	clear: both;
  text-align: center;	
	margin-bottom: 10px;
	font-size: 52px;	/*文字サイズ*/color: #ffd412;
	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
	background: #FFF url(https://creme-cremes.com/components/images/crown30th-min.png) no-repeat left center;	/**/
	background: url(https://creme-cremes.com/components/images/crown30th-min.png) no-repeat 8px center / auto 80%;	/*背景画像の読み込みと、グラデーション*/
	padding: 20px 7px 20px 67px;	/*左から、上、右10、下、左側70への余白*/
}
#contents h2.type16 span {color: #fff;	
	display:  inline-block;
	font-size: 16px;		/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定*/
	padding-left: 3px;		/*左に空ける余白*/
	padding-bottom: 10px;	/*下に空ける余白*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  #contents h2.type16 {
    font-size: 24px;	
    letter-spacing: normal;	/*文字間隔をデフォルトにする*/
  }}

/*h2タグCTAかなり巨大　講座名*/
#contents h2.type17 {
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-weight: 800;		/*かなり太字に*/
	font-size: 64px;	/*文字サイズ*/color: #fff;	

	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents h2.type17 span {color: #fff;
	display: block;
	font-size: 16px;		/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定*/
	padding-left: 3px;		/*左に空ける余白*/
	padding-bottom: 10px;	/*下に空ける余白*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  #contents h2.type17 {
      font-size: 28px;	
    letter-spacing: normal;	/*文字間隔をデフォルトにする*/
  }}





/**/
.ta-calendar-minimoji caption {/*旬カレンダ12か月*/
	border: 1px solid #b7b7b7;	
	border-bottom: none;	/*下線だけ消す*/
	text-align: center;
	background: #fff;		/*背景色*/
	color: #333;font-size: 8px;		/*文字サイズ*/
	font-weight: bold;		/*太字に*/
	padding: 1px;			/*ボックス内の余白*/
}
/*ta2設定*/
.ta-calendar-minimoji {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 20px;
	text-align: center;	/*センタリング*/
	background: #fff;	/*背景色*/
	color: #333;
}
.ta-calendar-minimoji, .ta-calendar-minimoji td, .ta-calendar-minimoji th {
	word-break: break-all;
	border: 1px solid #b7b7b7;	/*テーブルの枠線の幅、線種、色*/
}
/*曜日*/
.ta-calendar-minimoji th {
	background: #fffbe3;
}

/*CTAの中専用*/
#contents h2.h2-cta  {
	clear: both;
	margin-bottom: 0px;	/*下に空けるスペース*/
	font-size: 40px;		/*文字サイズ*/
	text-align: center;		/*文字をセンタリング*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
	line-height: 1.5;		/*行間をデフォルトから少し狭くする*/
  
background: #fff4ee;	
color: #202124;			/*文字色tuika*/
border-radius: 3px;	/*角丸のサイズ30tuika*/
padding: 10px 30px;		/*上下、左右へのブロック内の余白tuika*/
}
/*h2見出し内のspanタグ。小文字表記部分。*/
#contents h2.h2-cta span {
	display: block;
	font-size: 12px;	/*文字サイズ*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
#contents h2.h2-cta {
	margin-bottom: 0px;	/*下に空けるスペース*/
	font-size: 24px;		/*文字サイズ*/
	letter-spacing: normal;	/*文字間隔をデフォルトにする*/
}
}



/*tp cute1のoption1（productページのブロックの右上に斜めに配置している帯）食材寒熱24節気
---------------------------------------------------------------------------*/
.option1box {
	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%出た状態の事。*/
}

.option11,.option12,.option13 {
	width: 40px;		/*幅*/
	height: 33px;		/*高さ。下のpadding-topの数字と合わせてwidthの値になるように。*/
	padding-top: 7px;	/*上に空ける余白。上のheightの数字と合わせてwidthの値になるように。*/
}
/*１行目の文字サイズをすこし大きくする*/
.option11::first-line,.option12::first-line,.option13::first-line {
	font-size: 12px;
}



/*ロゴ画像tp_simple15サイドに丸くでる・・・・・・・・・・・・・・・・・・・・・・・*/
/*アニメーションのフレーム設定*/
@keyframes menu1-side {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*ロゴ、メニュー共通*/
#menu0-side,#menu1-side,#menu2-side,#menu3-side,#menu4-side {
	animation-name: menu1-side;		/*上のアニメーションで指定しているkeyframesの名前（menu1）*/
	animation-duration: 5S;		/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*メニュー画像*/
#menubar-side img {
	border-radius: 50%;	/*円形にする設定。この行を削除すると正方形になる。*/
}
/*マウスオン時*/
#menubar-side a:hover {
	opacity: 0.8;	/*半透明の設定。0.8は透明度80%の事。*/
}
/*menu0(About)材料*/
#menu0-side {
	position: fixed;	/*画面に対して固定表示*/
    right: 0.5%;			/*ウィンドウに対して左から5%の場所に配置*/
	top: 2%;			/*ウィンドウに対して上から-40pxの場所に配置*/
	
	width: 8%;			/*幅*/
	animation-delay: 0.2s;	/*0.2秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*menu１(About)作り方*/
#menu1-side {
	position: fixed;	/*画面に対して固定表示*/
	right: 0.5%;			/*ウィンドウに対して左から15%の場所に配置*/
	top: 19%;			/*ウィンドウに対して上から27%の場所に配置*/
	width: 8%;			/*幅*/
	animation-delay: 0.2s;	/*0.2秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*menu2(コツ)*/
#menu2-side {
	position: fixed;	/*type8画面に対して固定表示*/
	right: 0.5%;			/*ウィンドウに対して左から4%の場所に配置*/
	top: 34%;			/*ウィンドウに対して上から40%の場所に配置*/
	width: 8%;			/*幅*/
	animation-delay: 0.4s;	/*0.4秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*menu3(Link)*/
#menu3-side {
	position: fixed;	/*画面に対して固定表示*/
	right: 0.5%;			/*ウィンドウに対して左から11%の場所に配置*/
	top: 50%;			/*ウィンドウに対して上から60%の場所に配置*/
	width: 9%;			/*幅*/
	animation-delay: 0.6s;	/*0.6秒だけ遅れてアニメーションをスタートさせる設定*/
}
/*menu4(Instagram)*/
#menu4-side {
	position: fixed;	/*画面に対して固定表示*/
	right: 0.5%;			
	top: 65%;			/*ウィンドウに対して上から75%の場所に配置*/
	width: 6%;			
	animation-delay: 0.8s;	/*0.8秒だけ遅れてアニメーションをスタートさせる設定*/
}

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

/*サイド〇メインメニュー
	---------------------------------------------------------------------------*/
	#menu0-side,#menu1-side,#menu2-side,#menu3-side {
		width: 13%;
	}/*menu１(About)20%*/
	#menu0-side {position: fixed;
    right: 0%;
        top: 20%;
    }

	/*menu１(About)20%*/
	#menu1-side {
		position: fixed;
    right: 0%;
		top: 30%;
	}
	/*menu2(Gallery)35%*/
	#menu2-side {
		position: fixed;
    right: 0%;
		top: 40%;
	}
	/*menu3(Link)50%*/
	#menu3-side {
		position: fixed;
    right: 0%;
		top: 50%;
	}
	/*menu4(Instagram)65*/
	#menu4-side {
		position: fixed;
    right: 0%;
		top: 60%;
		width: 10%;
	}}



  .fl {float: left;}
  .fr {float: right;}
  img.fr {
    float: right;width:30%;margin-left: 20px;margin-bottom: 20px;}
     img.fl {
    float: left;width:30%;margin-right: 20px;margin-bottom: 20px;}
   
/*画面幅480px以下の共通設定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px){
     .fl {float: none;}
     .fr {float: none;}
    img.fl {float: none;display: block;width:90%;margin: 0 auto 20px;}
    img.fr {float: none;display: block;width:90%;margin: 0 auto 20px;}
   }
   

/*tp-food8 50半分ずつ
---------------------------------------------------------------------------*/
.fl50 {float: left;overflow: hidden;width: 50%;}
.fr50 {float: right;overflow: hidden;width: 50%;}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
  .fl50 {float: none;overflow: hidden;width: auto;}
  .fr50 {float: none;overflow: hidden;width: auto;}
  }


/*クリニック５設定幅４０でPC,SP同じ.写真も文字も４０なのでW６０とあわせて
---------------------------------------------------------------------------*/
.fr40 {float: right;width: 40%;margin-left: 2%;margin-bottom: 20px;}
.fl40 {float: left;width: 40%;margin-right: 2%;margin-bottom: 20px;}

  img.fl40 {float: left;width:40%;margin-right: 20px;margin-bottom: 20px;}
  img.fr40 {float: right;width:40%;margin-left: 20px;margin-bottom: 20px;}


/*クリニック３設定すごく細かい設定でいちおし
---------------------------------------------------------------------------*/

.fl30 {float: left;width:30%;margin-right: 20px;margin-bottom: 20px;}
.fr30 {float: right;width:30%;margin-left: 20px;margin-bottom: 20px;}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
  .fl30 {float: none;}
  .fr30 {float: none;}
  }
 /*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){ 
  .fl30 {float: none;display: block;width:90%;margin: 0 auto 20px;}
  .fr30 {float: none;display: block;width:90%;margin: 0 auto 20px;}
}  


/*バンドずっとｓｐ、ｐｃ左。設定.写真だけ指定。両方　fl25＆w25、fl70＆w70で左右でつかう文字のほうは左寄せかつ幅指定tしていた。４８0不要
---------------------------------------------------------------------------*/

img.fl25 {width:25%;margin: 0 auto 20px;}
img.fr25 {width:25%;margin: 0 auto 20px;}

  .fl25 {float: left;width: 25%;}
  .fr25 {float: right;width: 25%;}


.fl25 + .fr25 {
    clear: none !important;
    padding-top: 0 !important;
  }

  .fl70 {float: left;width: 70%;}
  .fr70 {float: right;width: 70%;}





  .w70 {width: 70%;}
  .w60 {width: 60%;}
  
  .w25 {width: 25%;}
  

/*W50パソコンで左右に。スマフォで縦に。W50＆fr・fl。。
---------------------------------------------------------------------------*/
.w50 {overflow: hidden;width: 50%;}
/*画面幅480px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  .w50 {float: none;display: block;width:90%;margin: 0 auto 20px;}
   }



.w48 {width: 48%;}

@media screen and (max-width:900px){
  .fl.w48, .fr.w48 {
    float: none;
    width: auto;
  }
  .fl + .fr {
    padding-top: 30px !important;
  }  }


  .w48p {width: 48%;}
  /*画面幅480px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:480px){
    .w48p {width: 100%;}  
  }
  
.breadcrumb2 {
  /*eee background: #fff;	背景色*/
 padding: 3px 20px;		/*上下10、左右へのボックス内の余白*/
 margin-bottom: 3px;	/*30ボックスの下（外側）に空けるスペース*/
 margin-top:0px;		/*メニューとの余白が空きすぎるので少し上につめる -30*/
 /*	border-radius: 3px;角丸の指定10pv*/
 
}
/*メニュー１個あたりの指定*/
.breadcrumb2 li{
 display: inline;	/*横並びになる指定*/
 padding: 0 5px;		/*上下、左右への余白*/
  font-weight: bold;/*太字*/ 
  font-size: 8px;
  color: #65513f;
}
/*メニューの冒頭に入れる「>」のマーク*/
.breadcrumb2 li::before{
 content: ">";			/*このテキストを出力します。変更してもかまいませんが機種依存文字は化ける場合があるので使わない。*/
 padding-right: 12px;	
 color: #83899c;		
}
/*最初のメニューには「>」は入れない*/
.breadcrumb2 li:first-child::before {
 content: none;
}
.breadcrumb2 li a {
 text-decoration: none; 
 font-size: 8px!important;
 color: #7c7670;
}
.breadcrumb2 li a:hover {
 text-decoration: underline;
}

.inner {
	position: relative;z-index: 20;
	background: #fff;	
}

.inner.bg1 {
	background: #fff4ee !important;
}

.inner.bg2 {
	background: #f3f6ef !important;
}

/*bg205ＣＴＡクリームケーキ*/
.bg6 {	background: #fff4ee url(https://creme-cremes.com/components/images/bg-cta5-min.jpg);	/*bg-access.jpg背景色、背景画像の読み込み。※古いブラウザ用。*/
  background: #fff4ee url(https://creme-cremes.com/components/images/bg-cta5-min.jpg) center / cover;	/*背bg-access景色、背景画像の読み込み。*/
  color: #202124;			/*文字色*/
  }
 .bg6 h2.img {
  background: #6b6351 !important;
}

/*bg205ＣＴＡシュークリーム*/
.bg7 {	background: #fff4ee url(https://creme-cremes.com/components/images/bg-cta4-min.jpg);	/*bg-access.jpg背景色、背景画像の読み込み。※古いブラウザ用。*/
	background: #fff4ee url(https://creme-cremes.com/components/images/bg-cta4-min.jpg) center / cover;	/*背bg-access景色、背景画像の読み込み。*/
  color: #fff;			/*文字色*/
  }
.bg7 h2.img {
background: #6b6351 !important;
}

  /*コンテンツ（BG色のついたメインブロック）tpcafe15
  ---------------------------------------------------------------------------*/
  #contents h2.img, .contents h2.img {
	display: block !important;
	overflow: hidden !important;
	margin: 0 auto !important;
	width: 150px!important;		/*画像幅15%*/

	padding: 5% !important;	/*画像と円形との間の余白*/
	position: relative !important;
		top: -10px !important;	/*上に-100px移動させる設定*/
	border-radius: 50% !important;	/*円形にする指定。外すと四角形になる。10pxなどにすると角が丸くなった四角形になる。*/
	box-shadow: 0px 10px 0px 0px #fff,0px 15px 5px 0px rgba(0,0,0,0.2) !important;	/*２つの影を指定。前半は白いくっきりした影、２つ目は薄い黒っぽい影。*/
}


  /*上の円形イラスト内のテキスト*/
  #contents h2.img span, .contents h2.img span {
    position: absolute !important;
    width: 100% !important;
    left: 0% !important;	/*円イラストに対して左から0%の場所に配置*/
    top: 10% !important;	/*円イラストに対して上から20%の場所に配置*/
    font-size: 12px !important;	/*文字サイズ*/color: #fff;	
    letter-spacing: 0.2em !important;	/*文字間隔を少し広くとる設定*/
  }
  
  /*.innerbg1〜bg4背景色（共通）元に戻す*/
  .inner.bg101,.inner .bg201,.inner .bg301,.inner .bg401,
  .inner .bg102,.inner .bg202,.inner .bg302,.inner .bg402,
  .inner .bg103,.inner .bg203,.inner .bg303,.inner .bg403,
  .inner .bg104,.inner .bg204,.inner .bg304,.inner .bg404,
  .inner .bg105,.inner .bg205,.inner .bg305,.inner .bg405,
  .inner .bg106,.inner .bg206,.inner .bg306,.inner .bg406,
  .inner .bg107,.inner .bg207,.inner .bg307,.inner .bg407,
  .inner .bg108,.inner .bg208,.inner .bg308,.inner .bg408,
  .inner .bg109,.inner .bg209,.inner .bg309,.inner .bg409,
  .inner .bg1010,.inner .bg2010,.inner .bg3010,.inner .bg4010 {
    padding: 0 18% 50px!important;/*（変更５％だった。SPはそのまま、35%左右だと細すぎたので半分17?）*/
    margin: 0 0!important;  /*（変更左右auto った）*/
  }
  

  
  /*.innerbg1〜bg4背景色（共通）元に戻す*/
  .inner .main .bg101,.inner .main .bg201,.inner .main .bg301,.inner .main .bg401,
  .inner .main .bg102,.inner .main .bg202,.inner .main .bg302,.inner .main .bg402,
  .inner .main .bg103,.inner .main .bg203,.inner .main .bg303,.inner .main .bg403,
  .inner .main .bg104,.inner .main .bg204,.inner .main .bg304,.inner .main .bg404,
  .inner .main .bg105,.inner .main .bg205,.inner .main .bg305,.inner .main .bg405,
  .inner .main .bg106,.inner .main .bg206,.inner .main .bg306,.inner .main .bg406,
  .inner .main .bg107,.inner .main .bg207,.inner .main .bg307,.inner .main .bg407,
  .inner .main .bg108,.inner .main .bg208,.inner .main .bg308,.inner .main .bg408,
  .inner .main .bg109,.inner .main .bg209,.inner .main .bg309,.inner .main .bg409,
  .inner .main .bg1010,.inner .main .bg2010,.inner .main .bg3010,.inner .main .bg4010 {
    padding: 0 7% 50px!important;/*（変更５％だった。SPはそのまま、35%左右だと細すぎたので半分17?）*/
    margin: 0 0!important;  /*（変更左右auto った）*/
  }
  
  /*clearfix（変更不要）*/
  .bg101:after,.bg201:after,.bg301:after,.bg401:after {
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg101 a:hover,.bg201 a:hover,.bg301 a:hover,.bg401 a:hover {
    color: #ffff00;
  }
  /*bg1ブロック-navibox-ue*/
  /*bg1ブロック*クリニック３の背景にイラストと色変えbg_flower1スタイル同じno-repeat center top/100%/*/
  .bg101 {
    color: #202124 !important;			/*文字色*/
	background: #ffffff url(https://creme-cremes.com/components/images/bg_flower2-min.png) no-repeat center top/100% !important;
}

  /*bg1ブロック内の円形イラストの背景色*/
  .bg101 h2.img {background: linear-gradient(#394a29, #25301b) !important;	/*背景グラデーション*/ 
   
  }
 
/*bg２０１ブロック*//*背景画像をつける。/*shop10のエリア
	指定同じに	まねた。 no-repeat center center / cover;	タイプ
---------------------------------------------------------------------------*/
.bg201 {
	background: #fff4ee url(https://creme-cremes.com/components/images/profile02.png) no-repeat left bottom;	/*背景画像の読み込み（古いブラウザ用）*/
	background: #fff4ee url(https://creme-cremes.com/components/images/profile02.png) no-repeat left bottom / auto 30%; 	/*背景画像を右(right)下(bottom)に配置。幅は自動、高さを60%に。*/	/*背景画像の読み込み*/
	color: #fff !important;	/*文字色*/
	
}
  /*bg3ブロック内の円形イラストの背景色*/
  .bg201 h2.img {
    background: #86b0b1 !important;
  }

  .bg301 {	/*薄い黄色他の色写真にしたい背景色*/
    background: #fff3e2;
    color: #202124;			/*文字色*/
  }
  /*bg3ブロック内の円形イラストの背景色*/
  .bg301 h2.img {
    background: #eea882 !important;
    
  }
  /*bg4ブロックもとチェックだったのをお菓子道具の背景にCTA*/
  .bg401 {
    color: #202124;  
    background: #6b6351 url(https://creme-cremes.com/school/sweets/images/tools-for-making-sweets-min.jpg);	/*背景色、背景画像の読み込み。※古いブラウザ用。*/
    background: #6b6351 url(https://creme-cremes.com/school/sweets/images/tools-for-making-sweets-min.jpg) center / cover;	/*背景色、背景画像の読み込み。*/
  }
  
  /*bg4ブロック内の円形イラストの背景色*/
  .bg401 h2.img {
    background: #494334 !important;
  }
  /*clearfix（変更不要）*/
  .bg102:after,.bg202:after,.bg302:after,.bg402:after {
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg102 a:hover,.bg202 a:hover,.bg302 a:hover,.bg402 a:hover {
    color: #ffff00;
  }
  /*bg1ブロック*/
  .bg102 {
    background: #cfba96;	/*背景色*/
    color: #202124;	/*文字色*/
  }
  /*bg1ブロック内の円形イラストの背景色*/
  .bg102 h2.img {
    background: #b4a282 !important;
  }
  
 /*bg2ブロック*/
  .bg202 {

    background: url(https://creme-cremes.com/components/images/3cfrance-min.jpg) no-repeat center center;	/*背景画像の読み込み（古いブラウザ用）*/
    background: url(https://creme-cremes.com/components/images/3cfrance-min.jpg) no-repeat center center / cover;	/*背景画像の読み込み*/
	color: #202124;			/*文字色*/
}
/*bg1ブロック内の円形イラストの背景色*//*bg2ブロック内の円形イラストの背景色*/
.bg202 h2.img {
	background: #eea882 !important;
}



 
/*bg4ブロックdairiseki*/
.bg302 {
  background: url(https://okasikyousitu.com/images/1198807.png) no-repeat center center;	/*背景画像の読み込み（古いブラウザ用）*/
  background: url(https://okasikyousitu.com/images/1198807.png) no-repeat center center / cover;	/*背景画像の読み込み*/
color: #202124;			/*文字色*/
}
/*bg4ブロック内の円形イラストの背景色*/
.bg302 h2.img {
background: #ffd3bb !important;
} 
/*こんな○○をつくってみませんかの漆黒必要*/
.bg402 {	
	color: #fff;			
  background: #000;	/*背景色、背景画像の読み込み。※古いブラウザ用。*/
 }
.bg402 h2.img {
	background: #000 !important;
}
  /*clearfix（変更不要）*/
  .bg103:after,.bg203:after,.bg303:after,.bg403:after {
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg103 a:hover,.bg203 a:hover,.bg303 a:hover ,.bg403 a:hover{
    color: #ffff00;
  }
  /*bg１０１．１０３．１０４の順。ナビの賞味いれるブロック*/   /* 画像配置 */    /*検索専用ページの背景画像右下*/

 
    .bg103 {
      color: #202124;			/*文字色*/
       background: #fff url(https://creme-cremes.com/components/images/bg_flower4-min.png) repeat center center;	/*背景画像の読み込み（古いブラウザ用）*/
      background: #fff url(https://creme-cremes.com/components/images/bg_flower4-min.png) repeat center center / cover;	/*背景画像の読み込み*/
    }
  
  .bg103 h2.img {
    background: #e86989 !important;
  }


  /*bg2ブロックbg_flowerイロ違い背景背景色狭く使うと効果的クリニック３
  bg_flower1スタイルを追加した場合の背景色（トップページのキャンペーンブロックで使用）*/*/
 
.bg203 {/*これ白いまま？407と同じ*/
	background: #6b6351;	
	color: #fff;			
}
.bg203 h2.img {
	background: #6b6351 !important;
}

  .bg303 {
    background:#b0c4de;	
    color: #65513f;		
  }
  /*bg3ブロック内の円形イラストの背景色いつもの金文字は白くなる？？？*/
  .bg303 h2.img {
    background: #b59658 !important; color: #fff;			
  }
  
 /*shop10のエリア
	指定同じに	まねた。 no-repeat center center / cover;	タイプ黒字
---------------------------------------------------------------------------*/
  .bg403 {
  color: #202124 !important;	/*文字色*/		/*文字色*/
	background: #fff4ee url(https://creme-cremes.com/components/images/1-recipes-cover.jpg) no-repeat center center;	/*背景画像の読み込み（古いブラウザ用）*/
	background: #fff4ee url(https://creme-cremes.com/components/images/1-recipes-cover.jpg) no-repeat center center / cover;	/*背景画像の読み込み*/
  }

  /*bg3ブロック内の円形イラストの背景色いつもの金*/
  .bg403 h2.img {
    background: #ffd3bb !important;
  }
  
  /*clearfix（変更不要）*/
  .bg104:after,.bg204:after,.bg304:after,.bg404:after {
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg104 a:hover,.bg204 a:hover,.bg304 a:hover,.bg404 a:hover {
    color: #ffff00;
  }
  /*bg-navibox-sitabg_flower1スタイル同じno-repeat center top/100%/*/
  .bg104 {
    color: #202124;			/*文字色*/
	background: #fff3e2 url(https://creme-cremes.com/components/images/bg_flower3-min.png) no-repeat center top/100% !important;
} .bg104 h2.img {
    background: #ffd3bb !important;
  }
  /*bg204ＣＴＡブロック*/
  .bg204 {
    background: #fff4ee url(https://creme-cremes.com/img/IMG_1314r.jpg) 
    no-repeat center center / cover;	/*背景画像の読み込み*/
    color: #fff;			/*文字色*/
  }
  
  /*bg2ブロック内の円形イラストの背景色*/
  .bg204 h2.img {
    background: #626b47 !important;
  }
  /*bg3ブロック*/
  .bg304 {
    background: #d20078;	/*背景色*/
    color: #fff;			/*文字色*/
  }
  /*bg3ブロック内の円形イラストの背景色*/
  .bg304 h2.img {
    background: #ff2fb5 !important;
  }
  /*bg4ブロック*/
/*右下にならず下全部。ページの背景画像*//*no-repeat right bottom タイプ/ auto 60%;背景画像を右(right)下(bottom)に配置。幅は自動、高さを60%に。*/
  
  
  .bg404 {
    background: #fff4ee;	/*背景色*/
    color: #202124;			/*文字色*/
  
    }

  .bg404 h2.img {
    background: #eea882 !important;
  }
  /*clearfix（変更不要）*/
  .bg105:after,.bg205:after,.bg305:after,.bg405:after {
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg105 a:hover,.bg205 a:hover,.bg305 a:hover,.bg405 a:hover {
    color: #ffff00;
  }
  /*bg-cta ryouri ブロック*/
  .bg105 {   color: #fff;	
    background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta1-min.jpg);	/*背景色、背景画像の読み込み。※古いブラウザ用。*/
    background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta1-min.jpg) center / cover;	/*背景色、背景画像の読み込み。*/
   
  }
  /*bg1ブロック内の円形イラストの背景色*/
  .bg105 h2.img {
    background: #b59658 !important;
  }
  /*bg2 cta デコロールケーキ*/
  .bg205 { 
    color: #fff;  
    background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta6-min.jpg);	/*背景色、背景画像の読み込み。※古いブラウザ用。*/
    background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta6-min.jpg) center / cover;	/*背景色、背景画像の読み込み。*/

  }
  /*bg2ブロック内の円形イラストの背景色*/
  .bg205 h2.img {
    background: #eea882 !important;
  }
  /*bg3ブロック*/
  .bg305 {
    background: #fff4ee;	/*背景色*/
    color: #6b6351;	
  }
  /*bg3ブロック内の円形イラストの背景色*/
  .bg305 h2.img {
    background: #ffe4d5 !important;
  }
  /*bg4ブロック*/
  .bg405 {
    background: #a283b5;	/*紫試行*/
    color: #202124;			/*文字色*/
  }
  /*bg4ブロック内の円形イラストの背景色*/
  .bg405 h2.img {
    background: #997a00 !important;
  }
  
  /*clearfix（変更不要）*/
  .bg106:after,.bg206:after,.bg306:after ,.bg406:after{
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg106 a:hover,.bg206 a:hover,.bg306 a:hover,.bg406 a:hover {
    color: #ffff00;
  }

  /*bg106 cta3ryouriブロック*/
  .bg106 {
    background: #000000;	/*背景色*/
    color: #ffd3bb;			/*文字色*/  
     background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta3-min.jpg);	/*背景色、背景画像の読み込み。※古いブラウザ用。*/
    background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta3-min.jpg) center / cover;	/*背景色、背景画像の読み込み。*/

  }
  /*bg1ブロック内の円形イラストの背景色*/
  .bg106 h2.img {
    background: #eea882 !important;
  }
  /*bg2ブロック*/
  .bg206 {
    background: #d4b6d5;	/*背景色*/
    color: #ffffff;			/*文字色*/
  }
  /*bg2ブロック内の円形イラストの背景色mariko*/
  .bg206 h2.img {
    background: #aa80a9 !important;
  }
  /*bg3ブロックladureeグリーン*/
  .bg306 {
    background: #eef7e7;	/*背景色*/
    color: #65513f;			/*文字色*/
  }
  /*bg3ブロック内の円形イラストのladureegold背景色yoi*/
  .bg306 h2.img {
    background: #a49461 !important;
  }
  /*bg3ブロックl*/
  .bg406 {
    background: #ffffff!important;	/*背景色*/
    color: #65513f;			/*文字色*/ 
  }
  /*bg3ブロック内の円形イラストのladureegold背景色*/
  .bg406 h2.img {
    background: #bd9a64 !important;
  }



  /*clearfix（変更不要）*/
  .bg107:after,.bg207:after,.bg307:after,.bg407:after {
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg107 a:hover,.bg207 a:hover,.bg307 a:hover,.bg407 a:hover {
    color: #ffff00;
  }
  /*bg1ブロック*/
  .bg107 {
    background: #fff4ee;	/*背景色*/
    color: #7c7670;			/*文字色*/
  }	
  /*bg1ブロック内の円形イラストの背景色*/
  .bg107 h2.img {
    background: #eea882 !important;
  }
  /*bg2ブロック*/	/*ワイン色バーガンディ色*/
  .bg207 {

  background: url(https://creme-cremes.com/components/images/cork.jpg) no-repeat center center;	/*背景画像の読み込み（古いブラウザ用）*/
  background: url(https://creme-cremes.com/components/images/cork.jpg) no-repeat center center / cover;	/*背景画像の読み込み*/
color: #fff;			/*文字色*/
}




  /*bg2ブロック内の円形イラストのボルドー色*/
  .bg207 h2.img {
    background: #600f18 !important;
  }
  /*bg3ブロック紫にあうピンク系か写真にかえたい*/
  .bg307 {
    background: #ffd3bb;	/*背景メインのお気に入りぴんく色*/
    color: #65513f;			/*文字色*/
  }
  /*bg3ブロック内の円形イラストの背景色メインのお気に入りぴんく*/
  .bg307 h2.img {
    background: #eea882 !important;
  }
  /*bg4ブロック*/
  .bg407 {
    background: #6b6351;	/*背景色*/
    color: #fff;			/*文字色*/
  }
  /*bg4ブロック内の円形イラストの背景色*/
  .bg407 h2.img {
    background: #494334 !important;
  }
  
  
  
  
  
  /*clearfix（変更不要）*/
  .bg108:after,.bg208:after,.bg308:after,.bg408:after {
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg108 a:hover,.bg208 a:hover,.bg308 a:hover,.bg408 a:hover {
    color: #ffff00;
  }
  /*bg1ブロック*/
  .bg108 {
    background: #5d423c url(https://creme-cremes.com/components/images/kuma-mimiosae-min.png) 
    no-repeat right bottom / auto 60%; 	/*背景画像を右(right)下(bottom)に配置。幅は自動、高さを60%に。*/
    color: #fff;			/*文字色*/
  }
  /*bg1ブロック内の円形イラストの背景色*/
  .bg108 h2.img {
    background: #b4a282 !important;
  }
  
  /*bg2ブロック*/
  .bg208 {
    background: #a5b186;	/*背景色*/
    color: #202124;			/*文字色*/
  }
  /*bg2ブロック内の円形イラストの背景色*/
  .bg208 h2.img {
    background: #b59658 !important;
  }
  /*bg308ブロック*//*背景画像をつける。/*shop10のエリア
	指定同じに	まねた。 no-repeat center center / cover;	タイプ
---------------------------------------------------------------------------*/
  .bg308 {
	background: #fff4ee url(https://creme-cremes.com/components/images/albert-menesdai.jpg) 
  no-repeat center center;	/*背景画像の読み込み（古いブラウザ用）*/
	background: #fff4ee url(https://creme-cremes.com/components/images/albert-menesdai.jpg) 
  no-repeat center center / cover;	/*背景画像の読み込み*/
	color: #fff !important;	/*文字色*/
	
}

  .bg308 h2.img {
    background: #86b0b1 !important;
  }
  .bg408 {
  
    color: #202124;		
    width: 100%;
   
    background-color: #fff;
    background-image: linear-gradient(90deg, rgba(238,168,130,.5) 50%, transparent 50%), 
    linear-gradient(rgba(238,168,130,.5) 50%, transparent 50%);
    background-size: 50px 50px;
  }


  .bg408 h2.img {
    background: #b8909a !important;
  }
  
  /*clearfix（変更不要）*/
  .bg109:after,.bg209:after,.bg309:after,.bg409:after {
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg109 a:hover,.bg209 a:hover,.bg309 a:hover,.bg409 a:hover {
    color: #ffff00;
  }
  /*bg1ブロック*/
  .bg109 {
    background: #c30000;	/*背景色*/
    color: #fff;			/*文字色*/
  }
  /*bg1ブロック内の円形イラストの背景色*/
  .bg109 h2.img {
    background: #bd9a64 !important;
  }
  /*bg2ブロック*/
  .bg209 {
    background: #ffe4d5;	/*背景色*/
    color: #202124;			/*文字色*/
  }
  /*bg2ブロック内の円形イラストのラデュレもうひとつの金背景色#a49461*/
  .bg209 h2.img {
    background: #bd9a64 !important;
  }
  /*bg3ブロック黄土色なので薄い水色にしたい*/
  .bg309 {
    background:  #bd9a64;	/*背景色ladurehp*/
    color: #202124;			/*文字色*/
  }
  /*bg3ブロック内の円形イラストの背景色saruwaka*/
  .bg309 h2.img {
    background: #b59658 !important;
  }
  /*bgcta２/* */
  .bg409 { 
    color: #fff;			
    background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta2-min.jpg);	/*背景色、背景画像の読み込み。※古いブラウザ用。*/
    background: #6b6351 url(https://creme-cremes.com/components/images/bg-cta2-min.jpg) center / cover;	/*背景色、背景画像の読み込み。*/
  
	   }
  /*bg4ブロック内の円形イラストの背景色*/
  .bg409 h2.img {
    background: #6b6351 !important;
  }
  
  /*clearfix（変更不要）*/
  .bg1010:after,.bg2010:after,.bg3010:after,.bg4010:after {
      content: "";display: block;clear: both;
  }
  /*リンクテキストの文字色*/
  .bg1010 a:hover,.bg2010 a:hover,.bg3010 a:hover,.bg4010 a:hover {
    color: #ffff00;
  }
  /*bg-profile1０１０ブロック４０２も黒１０１０も黒。文字ピンク*/
  .bg1010 {
    color: #fff4ee;			/*文字色*/
   
    background: #000000;	/*背景色*/
    color: #b59658;			/*文字色さるわか*/
     }

  .bg1010 h2.img {
    background: #000 !important;
  }


  /*bg2ブロック*/
/*２：全面。伸びるタイプ？？？狭いゾーンでキレイ。CTA牡丹用-------*//*背景色（bg-access）「アクセス」ブロックtp物産１
---------------------------------------------------------------------------*/
  .bg2010 {
	background: #184062 url(https://creme-cremes.com/img/IMG_5706r.jpg);	/*bg-access.jpg背景色、背景画像の読み込み。※古いブラウザ用。*/
	background: #184062 url(https://creme-cremes.com/img/IMG_5706r.jpg) center / cover;	/*背bg-access景色、背景画像の読み込み。*/
  color: #fff;			/*文字色*/
  }
 
  .bg2010 h2.img {
    background: #000 !important;
  }
  /*bg3ブロック深い上品な緑黒板として残す*/
  .bg3010 {
    background: #394a29;	/*背景色*/
    color: #fff;			/*文字色*/
  }
  /*bg3ブロック内の円形イラストの背景色深い上品な緑残す*/
  .bg3010 h2.img {
    background: #25301b !important;
  }

  /*bg-application4ブロック右上固定1つno-repeat right top / auto 60%*/
  .bg4010 {
    background: #fff;	/*背景色*/
    color: #202124;			/*文字色*/
    background: url(https://creme-cremes.com/components/images/logokasure.jpg) 
      no-repeat right bottom / auto 60%; 	/*背景画像を右(right)下(bottom)に配置。幅は自動、高さを60%に。上が透明に*/
    }

  .bg4010 h2.img {
    background: #ffd3bb !important;
  }
  
  
  
  
  /*画面を「横向き」にした場合の「高さ」が「420px以下」の場合のランドスケープ設定。主にスマホを横向きで見た場合の設定。
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (orientation: landscape) and (max-height:420px){
  
    /*コンテンツ内のh2見出しにclass="img"をつけた場合（各ブロック冒頭の円形のアクセント用イラスト）*/
  #contents h2.img,  .contents h2.img{
    width: 100px;		/*画像幅*/
    top: -30px;		/*上に-30px→   移動させる設定*/
    box-shadow: 0px 5px 0px 0px #fff,0px 10px 5px 0px rgba(0,0,0,0.2);	/*２つの影を指定。前半は白いくっきりした影、２つ目は薄い黒っぽい影。*/
  }
  /*上の円形イラスト内のテキスト*/
  #contents h2.img span,.contents h2.img span {
    top: 5%;			/*円イラストに対して上から15%の場所に配置*/
    font-size: 10px;	/*文字サイズ*/
    letter-spacing: 0.1em;	/*文字間隔*/
  }
  
 
  .inner .bg101,.inner .bg201,.inner .bg301,.inner .bg401,
  .inner .bg102,.inner .bg202,.inner .bg302,.inner .bg402,
  .inner .bg103,.inner .bg203,.inner .bg303,.inner .bg403,
  .inner .bg104,.inner .bg204,.inner .bg304,.inner .bg404,
  .inner .bg105,.inner .bg205,.inner .bg305,.inner .bg405,
  .inner .bg106,.inner .bg206,.inner .bg306,.inner .bg406,
  .inner .bg107,.inner .bg207,.inner .bg307,.inner .bg407,
  .inner .bg108,.inner .bg208,.inner .bg308,.inner .bg408,
  .inner .bg109,.inner .bg209,.inner .bg309,.inner .bg409,
  .inner .bg1010,.inner .bg2010,.inner .bg3010,.inner .bg4010 {
    padding: 50px 2% !important;/*（変更５％だった。SPはそのまま、35%左右だと細すぎたので半分17?）*/
    margin: 0 0!important;  /*（変更左右auto った）*/
  }
  

  
  /*.innerbg1〜bg4背景色（共通）元に戻す*/
  .inner .main .bg101,.inner .main .bg201,.inner .main .bg301,.inner .main .bg401,
  .inner .main .bg102,.inner .main .bg202,.inner .main .bg302,.inner .main .bg402,
  .inner .main .bg103,.inner .main .bg203,.inner .main .bg303,.inner .main .bg403,
  .inner .main .bg104,.inner .main .bg204,.inner .main .bg304,.inner .main .bg404,
  .inner .main .bg105,.inner .main .bg205,.inner .main .bg305,.inner .main .bg405,
  .inner .main .bg106,.inner .main .bg206,.inner .main .bg306,.inner .main .bg406,
  .inner .main .bg107,.inner .main .bg207,.inner .main .bg307,.inner .main .bg407,
  .inner .main .bg108,.inner .main .bg208,.inner .main .bg308,.inner .main .bg408,
  .inner .main .bg109,.inner .main .bg209,.inner .main .bg309,.inner .main .bg409,
  .inner .main .bg1010,.inner .main .bg2010,.inner .main .bg3010,.inner .main .bg4010 {
    padding: 0 5% 150px!important;/*（変更５％だった。SPはそのまま、35%左右だと細すぎたので半分17?）*/
    margin: 0 0!important;  /*（変更左右auto った）*/
  }
  }
  
  
  
  /*画面を「縦向き」にした場合の「幅」が「420px以下」の場合の設定。主にスマホを縦向きでポートレイト見た場合の設定。
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (orientation: portrait) and (max-width:420px){
  /*コンテンツ（色のついたメインブロック）
  ---------------------------------------------------------------------------*/
  /*コンテンツ内のh2見出し*/
  #contents h2, .contents h2{
    font-size: 20px;	/*文字サイズ*/
  }
  /*コンテンツ内のh2見出しにclass="img"をつけた場合（各ブロック冒頭の円形のアクセント用イラスト）*/
  #contents h2.img, .contents h2.img {
    width: 100px;		/*画像幅*/
    top: -30px;		/*上に30px移動させる設定*/
    box-shadow: 0px 5px 0px 0px #fff,0px 10px 5px 0px rgba(0,0,0,0.2);	/*２つの影を指定。前半は白いくっきりした影、２つ目は薄い黒っぽい影。*/
  }
  /*上の円形イラスト内のテキスト*/
  #contents h2.img span,.contents h2.img span {
    top: 15%;			/*円イラストに対して上から15%の場所に配置*/
    font-size: 10px;	/*文字サイズ*/
    letter-spacing: 0.1em;	/*文字間隔*/
  }
  
  /*
  ---------------------------------------------------------------------------*/
    /*bg1〜bg4背景色（共通）おすすめパディング１２０～180px*/
 
  /*.innerbg1〜bg4背景色（共通）元に戻す*/
  .inner .bg101,.inner .bg201,.inner .bg301,.inner .bg401,
  .inner .bg102,.inner .bg202,.inner .bg302,.inner .bg402,
  .inner .bg103,.inner .bg203,.inner .bg303,.inner .bg403,
  .inner .bg104,.inner .bg204,.inner .bg304,.inner .bg404,
  .inner .bg105,.inner .bg205,.inner .bg305,.inner .bg405,
  .inner .bg106,.inner .bg206,.inner .bg306,.inner .bg406,
  .inner .bg107,.inner .bg207,.inner .bg307,.inner .bg407,
  .inner .bg108,.inner .bg208,.inner .bg308,.inner .bg408,
  .inner .bg109,.inner .bg209,.inner .bg309,.inner .bg409,
  .inner .bg1010,.inner .bg2010,.inner .bg3010,.inner .bg4010 {
    padding: 0 5% 50px!important;/*（１５あきすぎ変更５％だった。SPはそのまま、35%左右だと細すぎたので半分17?）*/
    margin: 0 0!important;  /*（変更左右auto った）*/
  }
  

  
  /*.innerbg1〜bg4背景色（共通）元に戻す*/
  .inner .main .bg101,.inner .main .bg201,.inner .main .bg301,.inner .main .bg401,
  .inner .main .bg102,.inner .main .bg202,.inner .main .bg302,.inner .main .bg402,
  .inner .main .bg103,.inner .main .bg203,.inner .main .bg303,.inner .main .bg403,
  .inner .main .bg104,.inner .main .bg204,.inner .main .bg304,.inner .main .bg404,
  .inner .main .bg105,.inner .main .bg205,.inner .main .bg305,.inner .main .bg405,
  .inner .main .bg106,.inner .main .bg206,.inner .main .bg306,.inner .main .bg406,
  .inner .main .bg107,.inner .main .bg207,.inner .main .bg307,.inner .main .bg407,
  .inner .main .bg108,.inner .main .bg208,.inner .main .bg308,.inner .main .bg408,
  .inner .main .bg109,.inner .main .bg209,.inner .main .bg309,.inner .main .bg409,
  .inner .main .bg1010,.inner .main .bg2010,.inner .main .bg3010,.inner .main .bg4010 {
    padding: 0 5% 50px!important;/*（１５０空きすぎ変更５％だった。SPはそのまま、35%左右だと細すぎたので半分17?）*/
    margin: 0 0!important;  /*（変更左右auto った）*/
  }
  }
 






/*フッター内のh2タグfood9*/
#contents h2.sikaku {
	display: inline-block;
	background: #6b6351;	/*222814背景色*/
	position: relative;
	top: -50px;			/*基準値から上に50pxずらす指定*/
	font-size: 2rem;	/*文字サイズ。冒頭で指定しているフォントサイズの２倍（2rem）です。*/
	padding: 50px;		/*タグ内の余白*/  color: #ffffff; 
    margin: 0 auto;
}

#contents h2.sikaku span {
	display: block;
	font-size: 0.875rem; color: #ffd3bb; 
}

/*料理教室の説明*/
#contents h2.mail-maga-form {  
  position: relative;
  padding: 0.5em 0.7em;
  margin: 2em 0;
  background: #6b6351;
  color: #ffffff;
  font-weight: bold;
  }
  
  #contents h2.mail-maga-form :after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #6b6351;
    width: 0;
    height: 0;
  }


/*h2見出し内のspanタグ。小文字表記部分。*/
#contents h2.mail-maga-form span {
	display: block;
	font-size: 20px;	/*12文字サイズ*/color: #ffd3bb;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
#contents h2.mail-maga-form {
	margin-bottom: 20px;	/*下に空けるスペース*/
	font-size: 24px;		/*文字サイズ*/
	letter-spacing: -0.1em;	/*文字間隔をデフォルトにする*/
}
#contents h2.mail-maga-form span {
	display: block;
	font-size: 20px;	/*12文字サイズ*/
  color: #ffd3bb;	letter-spacing: -0.1em;	/*文字間隔をデフォルトにする*/
}}

/*料理教室の説明*/
#contents h2.h2-konnakatani {  
  position: relative;
  padding: 0.5em 0.7em;
  margin: 2em 0;
  background: #6b6351;
  color: #ffffff;
  font-weight: bold;
  }
  
  #contents h2.h2-konnakatani :after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #6b6351;
    width: 0;
    height: 0;
  }


/*h2見出し内のspanタグ。小文字表記部分。*/
#contents h2.h2-konnakatani span {
	display: block;
	font-size: 20px;	/*12文字サイズ*/color: #ffd3bb;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
#contents h2.h2-konnakatani {
	margin-bottom: 20px;	/*下に空けるスペース*/
	font-size: 24px;		/*文字サイズ*/
	letter-spacing: -0.1em;	/*文字間隔をデフォルトにする*/
}/*h2見出し内のspanタグ。小文字表記部分。*/
#contents h2.h2-konnakatani span {
	display: block;
	font-size: 20px;	/*12文字サイズ*/
  color: #ffd3bb;	letter-spacing: -0.1em;	/*文字間隔をデフォルトにする*/
}
}

/*料理教室の説明*/
#contents h2.mainiti-raikyaku {  
  position: relative;
  padding: 0.5em 0.7em;
  margin: 2em 0;
  background: #6b6351;
  color: #ffffff;
  font-weight: bold;
  }
  
  #contents h2.mainiti-raikyaku :after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #6b6351;
    width: 0;
    height: 0;
  }


/*h2見出し内のspanタグ。小文字表記部分。*/
#contents h2.mainiti-raikyaku span {
	display: block;
	font-size: 20px;	/*12文字サイズ*/color: #ffd3bb;
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
#contents h2.mainiti-raikyaku {
	margin-bottom: 20px;	/*下に空けるスペース*/
	font-size: 24px;		/*文字サイズ*/
	letter-spacing: -0.1em;	/*文字間隔をデフォルトにする*/
}/*h2見出し内のspanタグ。小文字表記部分。*/
#contents h2.mainiti-raikyaku span {
	display: block;
	font-size: 20px;	/*12文字サイズ*/
  color: #ffd3bb;	letter-spacing: -0.1em;	/*文字間隔をデフォルトにする*/
}}


/*h2タグtp-band1type5*/
#contents h2.h2-catch-copy {
	clear: both;
	 display: inline-block;
     margin-bottom: 30px;
	font-size: 68px;	/*文字サイズ*/ color: #000;
	border-bottom: 1px solid #000;	/*下線の幅、線種、色*/
	padding: 0 20px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/ letter-spacing: 0.05em;
}

#contents h2.h2-catch-copy span {
  position: relative;
 
  margin: 1.5em 0;
  padding: 17px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #202124;
  font-size: 36px;
  background: #FFF;
  border: solid 2px #555;
  box-sizing: border-box;border-radius: 10px;
}
#contents h2.h2-catch-copy span:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

#contents h2.h2-catch-copy span:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

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

/*h2タグtp-band1*/
#contents h2.h2-catch-copy {
	clear: both;
	 display: inline-block;
     margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/ color: #000;
	border-bottom: 1px solid #000;	/*下線の幅、線種、色*/
	padding: 0 20px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
/*h2タグ内のspanタグ（小文字）*/
#contents h2.h2-catch-copy span {
  position: relative;
 
  margin: 1.5em 0;
  padding: 17px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #202124;
  font-size: 16px;
  background: #FFF;
  border: solid 2px #555;
  box-sizing: border-box;border-radius: 10px;
}
#contents h2.h2-catch-copy span:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

#contents h2.h2-catch-copy span:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}}


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

/*著者情報.list31dateと同じ */
.author {
	display: block;
	font-size: 11px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	text-align: right;	/*テキストを右側に*/
}

/*登録日情報.list31date と同じ */
.recipe-author-name-recipeby{
	display: block;
	font-size: 11px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	text-align: right;	/*テキストを右側に*/
}






 /*portal1nameボックス内のサイト名*/
.list p.name-btn-lesson-month {
	position: absolute;
	right: 2px;	/*ボックスの右から20pxの場所に配置*/
	bottom: 5px;	/*ボックスの下から5pxの場所に配置*/

	overflow: hidden;
	font-size: 12px !important;	/*文字サイズ*/
	background: url(https://creme-cremes.com/components/images/icon_home-btn-lesson-month.png) no-repeat left center/12px;
	padding-left: 15px !important;
	float: right;
}
/*h2タグ*/
h6 {
	clear: both;
	margin-bottom: 20px;	/*下に空けるスペース*/
	font-size: 120%;		/*文字サイズ*/
	background: #000;		/*背景色*/
	color: #fff;			/*文字色*/
	
	line-height: 50px;		/*行間*/
	padding-left: 30px;		/*左に空ける余白*/
}
/*h2タグ内のspanタグ*/
h6 span {
	font-size: 80%;	/*文字サイズ*/
	padding-left: 20px	/*左に空ける余白*/
}
/*h2タグ内のspanタグの文字の最初と最後に表示させる記号*/
h6 span::before,h6 span::after {
	content: "-";
}

/*tp-クリニック５ページ内トップ右上メニュー（info.htmlで使用）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.menu-header {
	float: right;	/*アイコンブロックを右に回り込み*/
	overflow: hidden;

	text-align: center;		/*内容をセンタリング*/

	position: absolute;
	right: 180px;	/*headerに対して右から20pxの場所に配置*/
	top: 3px;		/*headerに対して上から40pxの場所に配置*/
}
 
.menu-header li {
  padding-top: 1px;		/*上に空ける余白。header内の上下の配置バランスをここでとって下さい。*/
	display: inline;	/*横並びになる指定*/
	border-right: 1px solid #999;	/*右側の線の幅、線種、色*/
}
.menu-header li a {
  padding: 1px;	/*メニュー内余白*/ 
  font-size: 8px!important;	/*文字サイズ*/	
  text-decoration: none;	
}
/*最初のメニューへの追加指定*/
.menu-header li:first-child {
	border-left: 1px solid #999;	/*左側の線の幅、線種、色*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*PC用ヘッダー用メニューを非表示にする*/
.menu-header {display: none;}
}




/*画面を横向きにした場合の高さが500px以下の場合の設定０２０２09月
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:500px){

.menu-header {
	right: 80px;	/*headerに対して右から20pxの場所に配置*/
	top: 3px;		/*headerに対して上から40pxの場所に配置*/
}
  }
  

/*ヘッダー右側のtelブロックマイクロコピー*/
#tel {
	position: absolute;
	right: 180px;	/*headerに対して右から20pxの場所に配置*/
    top: 30px;		/*headerに対して上から12pxの場所に配置*/
    font-size: 9px;	/*１３文字サイズ*/
		/*letter-spacing: ;0.2em文字間隔を少し広くとる設定*/
}
#tel a {
	color: #fff;
}
/*ヘッダー右側の「ご予約はこちらから」ボタン*/
#form-top a {
	display: block;
	text-decoration: none;
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
	position: absolute;
	right: 180px;	/*headerに対して右から20pxの場所に配置*/
	top: 52px;		/*headerに対して上から40pxの場所に配置*/
	color: #202124;	/*文字色*/
	padding: 5px 15px 5px 15px;	/*上、右、下、左へのボタン内の余白*/
  font-size: 13px;	/*文字サイズ*/
  background: #ffd3bb ;	/*背景色と背景画像（古いブラウザ用）*/
	background:  linear-gradient( #ffd3bb,  #eea882);	/*背景画像とグラデーション*/

	border-radius: 4px;	/*角丸のサイズ*/
	text-shadow: 0px -1px 1px rgba(0,0,0,0.4);	/*テキストの影。右へ、下へ、広げる幅、0,0,0は黒の事で0.5は透明度50%の事。*/
}
      
 

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){/*ヘッダー右側のtelブロック*/
  #tel {
      right: 60px;	/*headerに対して右から60pxの場所に配置*/
      letter-spacing: normal;
  }
  /*ヘッダー右側の「ご予約はこちらから」ボタン*/
  #form-top a {
  right: 60px;	/*headerに対して右から60pxの場所に配置*/
  
      letter-spacing: normal;
      font-size: 14px;
      padding: 6px 20px 6px 50px;
      background-position: 20px center;	/*背景アイコンの場所を左から20pxの場所に変更*/
  }}
  /*画面幅530px以下の設定biz54
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:530px){
  /*ヘッダー右側のtelブロック position: static;*/
  #tel {
    font-size: 11px;

    top: 45px;	/*headerに対して右から60pxの場所に配置*/
    letter-spacing: normal;
}
/*ヘッダー右側の「ご予約はこちらから」  position: static;ボタン*/
#form-top a {
  position: fixed;z-index: 100;
right: 4px;	/*6headerに対して右から60pxの場所に配置*/
    width: 150px;
    margin: 0 30px 0 auto;
   /*右側に空けるスペース*/
    letter-spacing: 0.1em;
    top: 55px;	/*headerに対して右から60pxの場所に配置*/
    font-size: 11px;
    padding: 9px 5px 9px 5px;
    background-position: 5px center;	/*背景アイコンの場所を左から20pxの場所に変更*/
}
/*PC用ヘッダー用メニューを非表示にする*/
#tel {display: none;}
}

  
/*ヘッダー右側の「会員サイトへログインボタン*/
#form-topl a {position: fixed;z-index: 100;
	display: block;
	text-decoration: none;
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
	position: absolute;
	right: 350px;	/*headerに対して右から20pxの場所に配置*/
	top: 52px;		/*headerに対して上から40pxの場所に配置*/
	color: #202124;	/*文字色*/
	padding: 5px 15px 5px 15px;	/*上、右、下、左へのボタン内の余白*/
	font-size: 13px;	/*文字サイズ*/
	background: #ffd3bb ;	/*背景色と背景画像（古いブラウザ用）*/
	background: linear-gradient( #fff4ee,  #ffd3bb);	/*背景画像とグラデーション*/
	border-radius: 4px;	/*角丸のサイズ*/
	text-shadow: 0px -1px 1px rgba(0,0,0,0.4);	/*テキストの影。右へ、下へ、広げる幅、0,0,0は黒の事で0.5は透明度50%の事。*/
}
      
 

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){/*ヘッダー右側のtelブロック*/
 
  /*ヘッダー右側の「ご予約はこちらから」ボタン*/
  #form-topl a {
  left: 60px;	/*headerに対して右から60pxの場所に配置*/
  
      letter-spacing: normal;
      font-size: 14px;
      padding: 6px 20px 6px 50px;
      background-position: 20px center;	/*背景アイコンの場所を左から20pxの場所に変更*/
  }}
  /*画面幅530px以下の設定biz54
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:530px){
  /*ヘッダー右側のtelブロック position: static;*/
  
/*ヘッダー右側の「ご予約はこちらから」  position: static;ボタン*/
#form-topl a { 
  position: fixed;	
  top: 55px;	/*headerに対して右から60pxの場所に配置*/
   left: 4px;	/*6headerに対して右から60pxの場所に配置*/
    width: 150px;
    margin: 0 auto 0 30px;
   	/*ひだり側に空けるスペース*/
    letter-spacing: 0.1em;
   
    font-size: 11px;
    padding: 9px 5px 9px 5px;
    background-position: 5px center;	/*背景アイコンの場所を左から20pxの場所に変更*/
}
}








/*cute1 box1指定（section全体が角丸のボックス）
---------------------------------------------------------------------------*/
.box1section {
	overflow: hidden;position: relative;
	padding: 20px 40px;		/*上下、左右へのボックス内の余白*/
	border-radius: 30px;	/*角丸のサイズ。この１行を削除すると、通常の長方形になります。*/
	margin-bottom: 30px;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
} 

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
.box1section {
	padding: 10px 20px;		/*上下、左右へのボックス内の余白*/
	border-radius: 20px;	/*角丸のサイズ*/
}  }


/*.boxｔｐ居酒屋５書籍の目次ページ的に。CTAの料理の分を囲んだを囲んだすりガラス
---------------------------------------------------------------------------*/
.box-frame {
	padding: 20px;					/*ボックス内の余白*/
	background: #fff4ee;				/*背景色（古いブラウザ用）*/
	background: rgba(255,244,238,0.1);	/*背景色*/
	border: 1px solid rgba(255,211,187,0.9);	/*枠線の幅、線種、色*/
}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){/*トップページ内「更新情報・お知らせ」ブロック
  ---------------------------------------------------------------------------*/
.box-frame {	
  margin: 0px 2%;/* 追加の余白*/
	padding: 10px;	
}}



/*メニューページの「テキストメニュー」設定ｔｐ居酒屋５
---------------------------------------------------------------------------*/
/*ブロック全体*/
dl.menu-2-index {
	margin: 0px 10px;	/*上下、左右への余白*/
}
/*メニュータイトル*/
dl.menu-2-index dt {
	 background: #ffd3bb;				/*背景色（古いブラウザ用）*/
	 background: rgba(255,211,187,0.6);	/*背景色*/
	 border-radius: 1px;			/*角丸の指定。この行削除すれば通常の長方形になります。*/
	 padding: 5px 10px;				/*上下、左右への余白*/
	 border: 1px solid rgba(255,211,187,0.9);	/*枠線の幅、線種、色*/
	 text-align: center;			/*テキストをセンタリング*/
}
dl.menu-2-index dd + dt {
	margin-top: 10px;
}
/*メニュー名*/
dl.menu-2-index dd {
	overflow: hidden;
	margin: 0px 20px;
	border-bottom: 1px solid rgba(255,211,187,0.9);
}
/*金額*/
dl.menu-2-index dd .price {	
  color: #1a0dab;		/*リンクテキストの色ぐーぐる*/
	float: right;	/*青にしたい右に回り込み*/
}


  /*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){/*メニューページの「テキストメニュー」設定
  ---------------------------------------------------------------------------*/
  /*ブロック全体*/
  dl.menu-2-index {
    margin: 5px;
    font-size:14px;	/*追加*/
  }
  /*メニュー名*/
  dl.menu-2-index dd {
    margin: 0px 10px;
  }}
 

/*トップページの都道府県プルダウン（小さな端末用）tp不動産１５
---------------------------------------------------------------------------*/
#map-select {
	display: block;
  padding-bottom: 30px;	
  margin-bottom: 10px;/*空きすぎなので追加してみる*/
}
#map-select select {
	font-size: 24px;
	display: block;margin: 0 auto;
}

/*写真入りbバナー風メニューtp‐fudousan15文字シャドウきいていない
---------------------------------------------------------------------------*/

#menu-photo {
	position: relative;z-index: 1;
	line-height: 1.5;	/*行間*/
  padding: 0 3% 30px;	/*上、左右、下への余白*/
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

/*ブロック全体（※トップページで使っているブロックの幅の再指定）*/
#top-contents #menu-photo {
	width: 50%;
}
/*１個あたり*/
#menu-photo li {
	margin-bottom: 3px;
	color: #6b6351;			/*文字サイズ*/
	padding-right: 300px;	/*背景画像の分だけ余白をとる*/
	padding: 3%;			/*ボックス内の余白*/
	border-radius: 4px;		/*角丸の指定*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	background: linear-gradient(#fff, #f5f5f5);/*背景グラデーション*/
}
/*大文字*/
#menu-photo li span {
	display: block;
	font-size: 34px;	/*文字サイズ36*/
}
/*借りる（chintai）*/
#menu-photo .ryouri {
	background: #fff;
	background: url(https://creme-cremes.com/components/images/menu-photo_ryouri-min.png) no-repeat right center / 300px,linear-gradient(#fff, #f5f5f5);
}
/*買う（baibai）*/
#menu-photo .okasi {
	background: #fff;
	background: url(https://creme-cremes.com/components/images/menu-photo_okasi-min.png) no-repeat right center / 300px,linear-gradient(#fff, #f5f5f5);
}


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

/*写真入りメニュー
---------------------------------------------------------------------------*/
#menu-photo {
	width: auto !important;
}
/*大文字*/
#menu-photo li span {
	display: block;
	font-size: 30px;	/*文字サイズ36*/
}/*小文字？36*/
#menu-photo li {
	display: block;
	font-size: 16px;	
}}

 

    
/*ta3clinic3真由美メソッド比較　調味料背景はどこかで重複？
---------------------------------------------------------------------------*/

.ta3 {
	width: 97%;
	margin: 0 auto 20px;
	border-bottom: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.8);	/*背景色。255,255,255は白の事で0.8は透明度80%の事*/
}
.ta3, .ta3 th {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px 15px;	/*ボックス内の余白*/
}
.ta3 td {
font-size: 12px !important;	/**/
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px 15px;	/*ボックス内の余白*/
}
.ta3 th {
	background: #d3e2ee;	/*背景色*/
}
/*bgcolor0背景色水色*/
.bgcolor0 {
	background: #eaf8f7 !important;
}
/*bgcolor1背景色*/
.bgcolor1 {
	background: #d6edda !important;
}
/*bgcolor2背景色*/
.bgcolor2 {
	background: #ede8d6 !important;
}
/*bgcolor3背景色ピンク*/
.bgcolor3 {
	background: #fff1f1 !important;
}


.look2 {background: ;padding: 5px 10px;border-radius: 4px;}
.look3 {background: ;padding: 5px 10px;border-radius: 4px;}


.cp_bgpattern05 {
	background-color: #ffffff;
	background-size: 80px 80px;
	background-image:
	 linear-gradient(rgba(255,211,187,.5) 1%, rgba(255,211,187,.5) 1%, transparent 1%,
	  transparent 99%, rgba(255,211,187,.5) 99%, rgba(255,211,187,.5) 100%),
	 linear-gradient(90deg, rgba(255,211,187,.5) 1%, rgba(255,211,187,.5) 1%, transparent 1%,
	  transparent 99%, rgba(255,211,187,.5) 99%, rgba(255,211,187,.5) 100%),
	 linear-gradient(transparent, transparent 25%, rgba(255,211,187,.5) 25%, rgba(255,211,187,.5) 26%, transparent 26%,
	  transparent 50%, rgba(255,211,187,.5) 50%, rgba(255,211,187,.5) 51%, transparent 51%,
	  transparent 75%, rgba(255,211,187,.5) 75%, rgba(255,211,187,.5) 76%, transparent 76%, transparent 100%),
	 linear-gradient(90deg, transparent, transparent 25%, rgba(255,211,187,.5) 25%, rgba(255,211,187,.5) 26%, transparent 26%,
	  transparent 50%, rgba(255,211,187,.5) 50%, rgba(255,211,187,.5) 51%, transparent 51%,
	  transparent 75%, rgba(255,211,187,.5) 75%, rgba(255,211,187,.5) 76%, transparent 76%, transparent 100%);
}


/*共通設定*/
.mark3, .mark4 {
	display: inline-block;
	position: absolute;
	right: 1px;	/*ボックス内の左から5pxの場所に配置*/
	bottom: 30px;	/*ボックス内の上から5pxの場所に配置*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	font-size: 11px;		/*文字サイズ*/
	font-weight: bold;		/*文字を太く*/
	text-align: center;
	color: #fff;	/*文字色*/
	border-radius: 50%;	/*角丸のサイズ*/
	transform: rotate(-30deg);	/*左回転で30度傾ける設定*/
	-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.6);	/*ボックスの影。下へ、右へ、広げる範囲、rgb指定での色。0,0,0は黒のことで、0.6が透明度60%の事。*/
	box-shadow: 1px 2px 4px rgba(0,0,0,0.6);
}

.mark3 {
	background: #949845;	/*mark2の背景色*/
}
.mark4 {
	background: #859030;	
}


.mark5, .mark6 {
	display: inline-block;
	position: absolute;
	left: 7px;
	top: -30px;
	width: 60px;	
	line-height: 60px;	
	font-size: 11px;	
	font-weight: bold;	
	text-align: center;
	color: #fff;
	border-radius: 50%;	
	transform: rotate(-30deg);
	-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.6);
  	box-shadow: 1px 2px 4px rgba(0,0,0,0.6);
}

.mark5 {
	background: #be8a3a;	/*mark2金色*/
}
.mark6 {
	background: #e99383;	/*mark５銀色*/
}
/*���ʐݒ�*/
.mark7 {
	display: inline-block;
	position: absolute;
	right: 50%;	
	top: -20px;	
	width: 60px;	
	line-height: 60px;	
	font-size: 11px;	
	font-weight: bold;		
	text-align: center;
	color: #fff;
	border-radius: 50%;	
	transform: rotate(-30deg);	
	-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.6);	
	box-shadow: 1px 2px 4px rgba(0,0,0,0.6);
}

.mark7 {
	background: #859030;	/*mark2�̔銅色*/
}




/*登録日情報tp-fudousan15（.date公開・更新日。）list６で使用。listでも使えるか？*/
.date-up {
	display: block;
	font-size: 11px;	/*文字サイズ*/
	color: #999;		/*文字色*/
	text-align: right;	/*テキストを右側に*/
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
}



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


   /*type1*//**/
   #contents h2.type1 {
    font-size: 30px;	/*文字サイズ*/
    color: #be8a3a;
    background: #fff;	/*背景色（古いブラウザ用）*/
    background: rgba(255,255,255,0.8);	/*背景色。255,255,255は白の事で0.8は透明度80%の事。*/
    border-radius: 40px;	/*角丸のサイズ*/
    margin: 0.3em 1em;
    box-shadow: 0px 2px 0px 2px rgba(0,0,0,0.1);	/*影。右へ、下へ、ぼかす範囲、広げる範囲。0,0,0は黒の事で0.1は透明度10%の事*/
  }
  
 
/*type2*/
#contents h2.type2 {
	background: url(https://creme-cremes.com/components/images/bg_type2-min.png) no-repeat center center;	/*背景画像の読み込み（古いブラウザ用）*/
	background: url(https://creme-cremes.com/components/images/bg_type2-min.png) no-repeat center center/cover;	/*背景画像の読み込み*/
	color: #fff;	/*文字色*/
	text-align: left;	/*文字を左寄せ*/
  margin:  30px 10px 0 ;	/*上、左右、下へのボックスの外側に空けるスペース*/
	padding: 40px 40px;	/*上下、左右へのボックス内の余白*/
	border: 10px solid #fff;	/*枠線の幅、線種、色*/
	box-shadow: 2px 2px 2px rgba(0,0,0,0.1);}	/*影。右へ、下へ、ぼかす範囲。0,0,0は黒の事で0.1は透明度10%の事*/
/*type2のspan（装飾用）タグ*/
#contents h2.type2 span {
	color: #fff;	/*文字色（古いブラウザ用）*/
	color: rgba(255,255,255,0.9);	
}
	
	
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  #contents h2.type2 {	
    margin: 20px 0 10px;	/*上、左右、下へのボックスの外側に空けるスペース*/
  }}


#contents h2.type3 {
	clear: both;
	margin: 20px 20px;
	padding: 15px 20px;	/*上下、左右への余白*/
	font-size: 20px;	/*文字サイズ*/
	background: #e97495 url(https://creme-cremes.com/components/images/bg2-type3.png) no-repeat right bottom;	/*背景色と背景画像（古いブラウザ用）*/
  background: url(https://creme-cremes.com/components/images/bg2-type3.png) no-repeat right bottom, linear-gradient(#fffaf0, #e3d5c2 49%, #d6cdb2 50%, #c2b69e);	/*背景グラデーション*/
	color: #202124;
	text-shadow: 0px -1px 1px #e97495;	/*テキストの影。右へ、下へ(マイナスなので上に向かう)、広げる幅、色。*/
	border: 1px solid #be8a3a;	/*枠線の幅、線種、色*/
}
/*h2タグのspan（装飾用）タグ*/
#contents h2.type3 span {
	color: #fff;	
	color: rgba(255,255,255,0.6);	
}



#contents h2.type11 {
	background: #333;	
	background: url(https://creme-cremes.com/components/images/pratiksha-mohanty-430366-unsplash-min.jpg) no-repeat center center/cover;	/*�w�i�摜�̓ǂݍ���*/
	padding: 50px 0px;
	color: #fff;
	text-align: center;	
}

/*メレンゲのポイントの見出し。tp-clinic5*/
#contents h2.type8 {
	clear: both;
	font-size: 26px;
	margin-bottom: 20px;
	padding: 20px 20px 20px 60px;	/*上、右、下、左への見出し内の余白*/
	color: #202124;	
	background: #ffd3bb;	/*背景色（古いブラウザ用）*/
	background: #ffd3bb url(https://creme-cremes.com/components/images/logosiro.png) no-repeat 20px center / 25px;	/*背景色、背景画像の読み込み。左から20pxの場所に配置。画像の幅を25pxに。*/
	border-radius: 10px;	/*角丸のサイズ*/
}
/*h2タグ内のspanタグ（小文字）*/
#contents h2.type8 span {
	display: block;color: #202124;	
	font-size: 10px;		/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定*/
	padding-left: 3px;		/*左に空ける余白*/
	padding-bottom: 10px;	/*下に空ける余白*/
}
/*h2タグtp-band1*/
#contents h2.type10 {
	clear: both;
	margin-bottom: 30px;
	font-size: 48px;	
	border-bottom: 1px solid #000;	/*下線の幅、線種、色*/
	padding: 0 20px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
/*h2タグ内のspanタグ（小文字）*/
#contents h2.type10 span {
	display: block;
	font-size: 10px;		/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定*/
	padding-left: 3px;		/*左に空ける余白*/
	padding-bottom: 10px;	/*下に空ける余白*/
}
/*全体の設定
/*
---------------------------------------------------------------------------*/
/*type9-------------------------11セットでつかうとよい。111111111111111111111111111111111111111111111111111111111111111*/
#contents h2.type19 {   font-size: 18px;	/*文字サイズ*/
	position: relative;line-height: 1.3;	
	padding: 0.5em 0.7em;
	margin: 2em 3em;
	background: #6b6351;
	color: #ffffff;
	font-weight: bold;
	}


	
/*リンクテキストの設定
---------------------------------------------------------------------------*/
#contents h2.type19 a {
	color: #ffd3bb;		/*文字色*/
	}

	#contents h2.type19 :after {
	  position: absolute;
	  content: '';
	  top: 100%;
	  left: 30px;
	  border: 15px solid transparent;
	  border-top: 15px solid #6b6351;
	  width: 0;
	  height: 0;
	}
	/*画面幅600px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:600px){
		#contents h2.type19 {   font-size: 14px;	/*文字サイズ*/
		position: relative;line-height: 1.3;	
		padding: 0.5em 0.7em;
		margin: 2em 2em;
		}
	} 





.fl + .fr {
	clear: none !important;
	padding-top: 0 !important;
}


.main h3.onphoto {
/*h2�^�O*/
	clear: both;margin-bottom: 20px;
	padding: 10px 20px;
	border-bottom: 5px solid #e99383;		
	background: #fff url(https://creme-cremes.com/school/sweets/images/apple-jelly-like-beer-min.jpg) no-repeat right center;	/*�\��*/
	color: #fff;	
	font-size: 20px;	
} 



/*h2タグtp-band1上にも線したいyou also love上下せん*/
#contents h3.type2 {
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/color: #6b6351;	/* 吹き出し文字色 */
	border-top: 1px solid #6b6351;	/*下線の幅、線種、色*/
	border-bottom: 1px solid #6b6351;	/*下線の幅、線種、色*/
	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents h3.type2 span {
	display: block;
	font-size: 16px;		/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定*/
	padding-left: 3px;		/*左に空ける余白*/
	padding-bottom: 10px;	/*下に空ける余白*/
}

/*h2タグtp-band1*/
#contents h3.type7 {
	clear: both;
  color: #eea882;	/* 吹き出し文字色 */
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/
	border-bottom: 1px solid #eea882;	/*下線の幅、線種、色*/
	padding: 0 20px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}

/*h2タグh2.h2-catch-copの白文字y*/
#contents h3.type5 {
	clear: both; text-align: center !important;	/*文字をセンタリング*/
	 display: inline-block;
     margin-bottom: 30px;
	font-size: 68px;	/*文字サイズ*/ color: #fff;
	border-bottom: 1px solid #000;	/*下線の幅、線種、色*/
	padding: 0 20px 10px;	
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}

#contents h3.type5 span {
  position: relative;/*  background: #FFF;*/
  display: inline-block;
  margin: 1.5em 0;
  padding: 17px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 36px;
  border: solid 2px #555;
  box-sizing: border-box;border-radius: 10px;
}
#contents h3.type5 span:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

#contents h3.type5 span:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

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

/*h2タグtp-band1*/
#contents h3.type5 {
	clear: both;
	 display: inline-block;
     margin-bottom: 30px;
	font-size: 44px;	/*文字サイズ*/ color: #fff;
	border-bottom: 1px solid #000;	/*下線の幅、線種、色*/
	padding: 0 20px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
/*h2タグ内のspanタグ（小文字）*/
#contents h3.type5 span {
  position: relative;
 
  margin: 1.5em 0;
  padding: 17px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
 
  border: solid 2px #ffffff;
  box-sizing: border-box;border-radius: 10px;
}
#contents h3.type5 span:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

#contents h3.type5 span:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #ffffff;
  z-index: 1;
}}

/*type14h2タグ特大文字でシャドーつき白文字@@@@mada*/
#contents h3.type12 {
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 48px;	/*文字サイズ*/color: #fff;	/* 吹き出し文字色 */

	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
#contents h3.type12 span {
  color: #eea882;	/* type14吹き出し文字色 */

}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  #contents h3.type12 {
 	font-size: 44px;	
}
#contents h3.type12 span {
  display: block;
}}

/*h2タグ上下せんh3lp2に同じ白文字*/
#contents h3.type13 {
	clear: both;
  text-align: center;	
	margin-bottom: 30px;
	font-size: 24px;	/*文字サイズ*/color: #fff;	/* 吹き出し文字色 */
	border-top: 1px solid #ffffff;	/*下線の幅、線種、色*/
	border-bottom: 1px solid #ffffff;	/*下線の幅、線種、色*/
	padding: 5px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}

/*type2り白文字1*/
#contents h3.type11 {  
  position: relative;
  padding: 0.5em 0.7em;
  margin: 2em 0;
  background: #fff4ee;
  color: #fff;
  font-weight: bold;
  }
  
 

/*h2タグ内のspanタグ（小文字）*/
#contents h3.type7 span {
	display: block;
	font-size: 10px;		/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる指定*/
	padding-left: 3px;		/*左に空ける余白*/
	padding-bottom: 10px;	/*下に空ける余白*/
}
#contents h5 {
	clear: both;
	margin-bottom: 0px;	/*下に空けるスペース*/
	font-size: 20px;		/*文字サイズ*/
	background: url(https://creme-cremes.com/components/images/line1.png) no-repeat center bottom;	/*背景画像（下線）の読み込み（古いブラウザ用）*/
	background: url(https://creme-cremes.com/components/images/line1.png) no-repeat center bottom / 100% 2px;	/*背景画像（下線）の読み込み。幅は100%、高さを2pxにする。*/
	padding: 0 5px;	/*上下、左右へのブロック内の余白*/
}

/*ロゴ画像綿菓子につつまれたような感じ。よい*/
/*h6タグ*/
#contents h6 {
  clear: both;
	margin-bottom: 20px;
	font-size: 16px;	/*文字サイズ*/
	width: 20%;		/**画像の幅*/
	height: 50px;		/*高さ*/
	background: #ffffff;	/*背景色*/
	box-shadow: 0px 0px 0px 0px #ffffff;
	}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
#contents h5 {
	margin-bottom: 10px;	/*下に空けるスペース*/
	font-size: 16px;	/*文字サイズ*/
	padding-bottom: 5px;	/*下線と文字が近すぎるので、少し余白を作る*/
}
}
/*レシピのお知らせ*/
#new-recipe {
	background: rgba(255,211,187,0.2);	/*背景色*/
	padding: 3%;					/*ブロック内の余白*/
}
/*dlブロックの設定*/
#new-recipe dl {
	height: 200px;	/*高さ100*/
	overflow: auto;	/*高さをオーバーした場合にスクロールバーを自動で出す*/
	padding: 0 20px;
}
/*日付設定*/
#new-recipe dt {
	float: left;	/*左に回り込み*/
	width: 6em;		/*幅*/ font-size: 10px;
	letter-spacing: 0.1em;
}
/*記事設定*/
#new-recipe dd {
	padding-left: 6em;	/*左に空ける余白*/
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  #new-recipe dl {
    padding: 0;
  } }

.boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  background : rgba(255, 211, 187, 0.9);          /* 半透明の青 */
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
}


.slider_ttl {
  color: #333;
  text-align: inherit;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: inherit;
  margin: 20px 0 7px 0;
  background-color: #fff4ee;
  text-indent: 8px;
  font-size: 16px;
  font-weight: 600;
  box-sizing: border-box; }

/* マル版追加試行 */
  .horizontal_scroll img .maru {
    border-radius: 50%	/*角丸のサイズ*/  }

/* 順位 */
.rank li {
  counter-increment: rank; }
  .rank li::before {
    content: counter(rank) "位";
    color: #c30000;
    font-weight: 700;
    line-height: initial; }

/* 講座名・タイトル*/
.course {
  color: #c30000;
  line-height: 1.65;
  font-size: 13px;
  margin-top: 4px; }

.course span::after {
  content: '１日体験受付中';
  display: inline-block;
  background: #c30000;
  color: #fff;
  font-size: .45em;
  line-height: 1.25;
  vertical-align: middle;
  box-sizing: border-box;
  padding: .2em .4em; }

.course span.1day :after {
  content: '単発１日講座';
  background: 0 0;
  color: #000; }

.course small {
  font-size: .45em;
  color: #000;
  margin-right: .5em; }
  .horizontal_scroll {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 12px 8px;
    display: -ms-flexbox;
    display: flex; }
  
  /* 画面幅が768px以上の場合、横スクロールを解除 */
  @media screen and (min-width: 768px) {
    .horizontal_scroll {
      overflow-x: inherit;
      padding: 0 8px 6px; } }
  
  .horizontal_scroll > li {
    width: 100%;
    min-width: 140px; }
  
  @media screen and (min-width: 768px) {
    .horizontal_scroll > li {
      min-width: inherit; } }
  
  .horizontal_scroll > li:not(:last-child) {
    margin-right: 5px; }
  
  .horizontal_scroll > li:last-child {
    padding-right: 5px; }
  
  @media screen and (min-width: 768px) {
    .horizontal_scroll > li:last-child {
      padding-right: 0; } }
  
  .horizontal_scroll img {
    vertical-align: bottom; }


.scroll-bun {
  margin     : auto;
  width      : 96%;
  font-size  : 140%;
  line-height: 1.5em;
  text-align : center;
  border     : 1px solid #666;
  color      : #000000;
  background : #fff;
  overflow   : hidden;
}
.scroll-bun span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scroll-bunAnime 8s linear infinite;
}
@keyframes scroll-bunAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}.blink {
  animation: blinkAnime 1s infinite alternate;
}
@keyframes blinkAnime{
   0% { color: #c30000 }
 100% { color: #212024 }
}


.balloon2-top {
  position: relative;
  display: inline-block;
  margin: 1.5em 3%;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #202124;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #eea882;
  box-sizing: border-box;
  border-radius: 15px;
}

.balloon2-top:before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 12px solid #FFF;
  z-index: 2;
}

.balloon2-top:after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #eea882;
  z-index: 1;
}

.balloon2-top p {
  margin: 0;
  padding: 0;
}


.says {
    display: inline-block;
    position: relative; 
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #ffcaca;
}

.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px; 
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #ffcaca;
}

.says p {
    margin: 0;
    padding: 0;
}  
.balloon2-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #202124;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #eaa882;
  box-sizing: border-box;border-radius: 15px;
}

.balloon2-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.balloon2-left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #eea882;
  z-index: 1;
}

.balloon2-left p {
  margin: 0;
  padding: 0;
}  .balloon2-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;	border-radius: 15px;
}

.balloon2-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}

.balloon2-right:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #555;
  z-index: 1;
}

.balloon2-right p {
  margin: 0;
  padding: 0;
}
 






/*テーブルクリニック５の一週間の担当者のまとめの表。例寿司酢のクリームのページ
---------------------------------------------------------------------------*/
.ta4 caption {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	background: #ffe4d5;		/*背景色*/
	color: #666;			/*文字色*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}
/*ta1設定*/
.ta4 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 20px;
	background: #fff;	/*背景色*/
	color: #666;		/*文字色*/
}
.ta4, .ta4 td, .ta4 th {
	word-break: break-all;
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta4 th {
	width: 50%;		/*幅140px*/
	text-align: center;	/*センタリング*/
}
/*画面幅480x以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

.ta4 caption,.ta4 th,.ta4 td {
	padding: 5px;
}
.ta4 th {
	width:50%;
}

.ta4 td {
	font-size: 14px;

}  }
 


 
  blockquote {
    width: 98%;
    
    background: url() no-repeat scroll top left;
    padding: 0px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    }
    blockquote p {
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    margin: 0px;
    }


/*テーブル（ta8）list8にいれるtpカフェ15の手書きチョーク風ラインwhiteは同じ？？？？
---------------------------------------------------------------------------*/

.ta5 {
	width: 97%;
	margin: 0 auto 20px;
	border-bottom: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	background: #fff;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.8);	/*背景色。255,255,255は白の事で0.8は透明度80%の事*/
}
.ta5 td, .ta5 th {
	word-break: break-all;
	padding: 10px 15px;
}
/*行の設定*/
.ta5 tr {
	background: url(https://creme-cremes.com/components/images/linewhite.png) repeat-x left bottom;	/*装飾用のライン画像の読み込み。*/
}
/*テーブル１行目に入った見出し部分*/
.ta5 th.tamidashi {
	width: auto;
	text-align: center;	/*左よせ*/
	background: url(https://creme-cremes.com/components/images/linewhite.png) repeat-x left top,rgba(255,255,255,0.2);	/*装飾用のライン画像の読み込み。*/
}
/*ta1の左側ボックス*/
.ta5 th {
	width: 140px;	
	text-align: right;	
}
/*左側ボックスに画像を入れた場合の設定*/
.ta5 th img {width: 100%;}



  /*これ何？まだ使っていない？ヘッダーの「CART」およびサブコンテンツの「カートをみる」ボタンレシピ目次にtpshop10
  ---------------------------------------------------------------------------*/
  /*共通設定*/
  .cart a{
    text-decoration: none;
    display: block;
    background: #c2ac47;	/*背景色（古いブラウザ用）*/
    background: url(../images/icon_cart.png) no-repeat 15% center/20px, linear-gradient(#f9eaa7, #c2ac47);	/*背景画像(左から15%の場所に配置、画像サイズは幅を20pxに指定)と、グラデーション*/
    border-radius: 3px;	/*角丸のサイズ*/
    text-align: center;
    color: #000;	/*文字色*/
    padding: 10px 0px 10px 10px;	/*上、右、下、左への余白*/
  }
  /*マウスオン時*/
  .cart a:hover {
    background: #f9eaa7 url(../images/icon_cart.png) no-repeat 15% center/20px;	/*背景色だけ変更する*/
  }
  /*ヘッダーのボタンへの追加設定*/
  .cart a {
    position: absolute;
    right: 0px;		/*ヘッダーに対して右から0pxの場所に配置*/
    top: 24px;	/*ヘッダーに対して上から40pxの場所に配置*/
    width: 150px;	/*ボタン幅*/
  }
  /*サブコンテンツのボタンへの追加設定*/
  #sub .cart a {
    margin-bottom: 20px;	/*ボタンの下に空けるスペース*/
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.2は透明度20%の事。*/
  }
  /*画面幅800px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:800px){
  .cart a span {
   	/*非表示にする display: ;none*/
  }
  /*ヘッダーのボタンへの追加設定*/
  .cart a {
      z-index: 50;
      position: fixed;
    padding: 0;
    width: 50px;	/*幅*/
      height: 35px;	/*高さ*/
      top: 10px;		/*上から10pxの場所に配置*/
    right: 70px;		/*右から70pxの場所に配置*/
    
    background-position: center center;	/*背景画像の場所のみ再指定。左右中央＆天地中央。*/
  }
  /*マウスオン時*/
  .cart a:hover {
    background-position: center center;
  }  }

     
/*ヘッダー●左側のタイトル。もとのを左に。電話番号ブロックマカロン隣にアレンジ
---------------------------------------------------------------------------*/
/*ブロック全体header つけた*//*TEL*/
header .tel {
	float: left;	
	margin-bottom: 1px;	/*ブロックの上にあける余白。12ｐｘ上下のバランスをここで調整して下さい。*/
  font-weight: bold;
  position: absolute;
	
 left: 500px;	
top: 1px;	/*ロゴの上にあける余白。ヘッダー内の上下の配置バランスをここで調整して下さい。*/

  width: 500px;		/*ブロック幅300px*/
 
	text-align: ;	/*center文字をセンタリング*/
	letter-spacing: ;	/*文字間隔を広くする設定。通常がいいならこの行削除0.2em。*/
	font-size: 20px;		/*文字サイズを大きく*/
}
/*TELの受付時間の小文字部分*/
header .tel span {
	font-size: 13px;	/*文字サイズを小さく*/
	display: inline;/*-blockブロックを変更*/
	letter-spacing: 0.1em;	/*文字間隔*/
}


/*画面幅800px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:800px){
  
    /*ヘッダー右側の電話番号ブロック
    ---------------------------------------------------------------------------*/
    /*ブロック全体を非表示にする大切*/
    header .tel,#contact {
      display: none;
    }
      }

/*登録日情報（tp不動産１５.date）*/
.date-up {
	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){
  
.date-up {

	bottom: 4%;	/*3%*/
	left: 0px;
	width: 100%;
}
  }

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

a.btn1 {
	display: block;text-decoration: none;
	background: #6b6351;	
	background: linear-gradient(#6b6351, #555246);	/*グラデーション*/
	color: #fff;	
  width: 100%;	/*ボタンの幅*/
  font-size: 16px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	padding: 5px;		/*ボタン内の余白*/
	border-radius: 4px;	/*角丸のサイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.3は色が30%ついた状態。*/
	border: 1px solid #555246;	/*枠線の幅、線種、色*/
}
/*マウスオン時*/
a:hover.btn1 {
	box-shadow: none;
	background: #fff;	/*背景色*/
	color: #6b6351;		/*文字色*/
}
/*求人一覧ページの「詳細を見る・応募する」ボタン2葉ボタン１の色反転タイプで横に並ぶ小さく使える、
---------------------------------------------------------------------------*/
a.btn2 {
	display: inline-block;text-decoration: none;
  margin: 2px auto 10px;
  background: #fba100;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#fba100, #f2b635);	/*グラデーション*/
	color: #fff;	/*文字色*/
	font-size: 16px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	padding: 5px 0;		/*ボタン内の余白*/
	border-radius: 3px;	/*角丸のサイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.3は色が30%ついた状態。*/
	border: 1px solid #6b6351;	/*枠線の幅、線種、色*/
} 

/*マウスオン時*/
a:hover.btn2 {
	box-shadow: none;
	background: #6b6351;	/*背景色*/
	color: #fff;		/*文字色*/
} /*求人一覧ページの「詳細を見る・応募する」ボタン2葉ボタン１の色反転タイプで横に並ぶ小さく使える、
---------------------------------------------------------------------------*/
a.btn3 {
	display: inline-block;text-decoration: none;
  margin: 2px auto 10px;
  background: #989c45;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#989c45, #bec23a);	/*グラデーション*/
	color: #fff;	/*文字色*/
	font-size: 16px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	padding: 5px 0;		/*ボタン内の余白*/
	border-radius: 3px;	/*角丸のサイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.1);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.3は色が30%ついた状態。*/
	border: 1px solid #eff6e8;	/*枠線の幅、線種、色*/
} 

/*マウスオン時*/
a:hover.btn3 {
	box-shadow: none;
	background: #6b6351;	/*背景色*/
	color: #fff;		/*文字色*/
} /*求人一覧ページの「詳細を見る・応募する」ボタン2葉ボタン１の色反転タイプで横に並ぶ小さく使える、
---------------------------------------------------------------------------*/
a.btn4 {
	display: inline-block;text-decoration: none;
  margin: 2px auto 10px;

background: #fff;	/*背景色*/
	border: 2px solid  #eea882;	/*枠線の幅、線種、色*/
	color: #eea882;	/*文字色*/
	font-size: 16px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	padding: 5px 0;		/*ボタン内の余白*/
	border-radius: 3px;	/*角丸のサイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
	
} 

/*マウスオン時*/
a:hover.btn4 {
	box-shadow: none;
	background: #6b6351;	/*背景色*/
	color: #fff;		/*文字色*/
} 


/*home4 btn1
---------------------------------------------------------------------------*/
/*btn1共通*/
a.btn5 {
	text-decoration: none;display: inline-block;
	background: #6b6351 url(../images/arrow1.png) no-repeat 15px center;	/*古いブラウザ用*/
	background: #6b6351 url(../images/arrow1.png) no-repeat 15px center / 6px;	/*背景色、背景の矢印画像の読み込み、左から15pxの場所に配置。幅を6pxに。*/
	color: #FFF !important;
	border: 1px solid #6c5f48;	/*枠線の幅、線種、色*/
	border-radius: 2px;			/*角丸のサイズ。ほんの少しだけ角を丸くしています。*/
}
/*マウスオン時*/
a.btn5:hover{
	background: #8d7c5e url(../images/arrow1.png) no-repeat 15px center / 6px;
}
/*contents内のbtn1。主にinfo.htmlやservice.htmlで使っています。*/
#contents a.btn5 {
	padding: 0px 35px 0px 50px;	/*上、右、下、左へのボックス内の余白*/
	letter-spacing: 0.2em;		/*文字間隔を広くとる設定*/
}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
/*btn1
---------------------------------------------------------------------------*/
/*contents内のbtn1。主にinfo.htmlやservice.htmlで使っています。*/
#contents a.btn5 {
	padding: 0px 20px;	/*上、右、下、左へのボックス内の余白*/
	letter-spacing: normal;		/*文字間隔を初期設定に戻す*/
	background: #6c5f48 url(none);
}}
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
#contents a.btn5 {
	padding: 0px 10px;	/*上、右、下、左へのボックス内の余白*/
}}


/*.list-figcaption-compact .list-figcaptionに組み合わせてトップの外務省のYOUTUBEに。
---------------------------------------------------------------------------*/
a.btn6 {
	display: block;text-decoration: none;
  background: #695725;	/*背景色*/
	color: #fff;	/*文字色*/
	font-size: 15px;	/*文字サイズ*/	
  background: linear-gradient(#87733b,#695725);/*背景グラデーション*/
 
	padding: 10px 20px;	/*上下、左右へのボタン内の余白*/
  width: 90%;				/*ボタンの幅*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 10px;	/*角を丸くする指定*/
	line-height: 1.5;		/*行間。デフォルトより少し狭くする。*/
	letter-spacing: 0.4em;	/*文字間隔を少し広くとる*/
	transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/

	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);	/*テキストの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/

}
/*マウスオン時*/
a:hover.btn5 {
	background: #fff;	/*背景色*/
	color: #2c3c63;		/*文字色*/
}/*job4のbrown「申込み用@@@@@@@@@@@@@@@

/*job2求人一覧ページの「申込み用オレンジ。PCで横長」orangeボタン
---------------------------------------------------------------------------*/
a.btn8 {
	display: block;text-decoration: none;
	background: #fe7200;	/*背景色（古いブラウザ用）*/
	background: linear-gradient(#fe7200, #fe7200);	/*グラデーション*/
	color: #fff;	/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
  padding: 10px;	
  margin: 10px 3%;
	border-radius: 4px;	/*角丸のサイズ*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.3は色が30%ついた状態。*/
	border: 1px solid #e99383;	/*枠線の幅、線種、色*/
}

a:hover.btn8 {
	box-shadow: none;
	background: #fff;	
	color: #fae5d5;		
}
a.btn8:before {	/* 追加。アフターなら語尾？*/
  position: absolute;
  top: 50%;
  left: 12px;
  content: '';
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

/*ｔｐbiz29shopヘッダー（サイト名ロゴが入ったブロック）なので指定が細かい。不要？同じのコピペすれば。画像はCSS指定だった２つならべられるかも？
bana-hu-kageバナー風に使える横長１の陰のある画像に影。
---------------------------------------------------------------------------*/
.bana-hu-kage img {
	
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5);	/*影の設定。それぞれ右へ、下へ、ぼかし幅。0,0,0は黒の事で0.5は透明度50%の事*/
	border: 1px solid #FFF;		/*線の幅、線種、色*/
	margin-bottom: 30px;	/*ヘッダーと下の左右ブロックの間のスペース*/

	width: 400px;
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  
  /*ヘッダー（サイト名ロゴが入ったブロック）
  ---------------------------------------------------------------------------*/
  /*画像の設定*/
  .bana-hu-kage img {
    margin: o auto;	/*下の左右ブロックの間のスペース*/ 
	width: 350px !important;	/*ブロックの高さ*/
  }
}


 /*facebookやtwitterなどのアイコン横並び
 ---------------------------------------------------------------------------*/
 ul.icon-s2 {
   
  border-bottom: 1px solid #fff;	/*下線を追加する*/ 
  text-align: center;	/*内容をセンタリング*/
    border-bottom: 1px solid #448db3;	/*下線の幅、線種、色*/
    padding: 10px 0;	/*上下、左右への余白*/
    
    clear: left;
    font-size: 30px;
    margin: 0 5px;
    color: #6b6351;
}
/*アイコンを囲むブロック全体の設定*/
 
  /*アイコン１個あたりの設定*/
  ul.icon-s2 li {
    display: inline;	/*横並びにさせる指定*/
  }
  /*アイコン画像の設定*/
  ul.icon-s2 img {
     width: 50px;		/*画像の幅*/
  }
  


/*11セットでつかうとよい。吹き出し下べた塗り1*/
#contents h2.type9 {  
  position: relative;
  padding: 0.5em 0.7em;
  margin: 2em 0;
  background: #6b6351;
  color: #ffffff;
  font-weight: bold;
  }
  
  #contents h2.type9 :after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #6b6351;
    width: 0;
    height: 0;
  }


#contents h3.type8 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

#contents h3.type8:before, #contents h3.type8:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 5px;
  background-color: black;
}

#contents h3.type8:before {
  left:0;
}
#contents h3.type8:after {
  right: 0;
}






/*tpクリニック３の時間入りの一週間表ta2（footerの「診療時間のご案内」で使っているテーブル-1week-time）
---------------------------------------------------------------------------*/
/*ta2設定*/
.ta-1week-time {
	width: 100%;
	margin: 0 auto 10px;
	border-bottom: 1px solid #fff;	/*テーブルの下の枠線の幅、線種、色*/
	text-align: center;
}
/*td,th共通*/
.ta-1week-time td, .ta-1week-time th {
	border-top: 1px solid #fff;	/*td,thの上側の線の幅、線種、色*/
	padding: 5px 10px;	/*ボックス内の余白*/
}
/*th見出し*/
.ta-1week-time th {
	background: rgba(0,0,0,0.2);	/*背景色*/
}


.ta-calendar caption {
	border: 1px solid #b7b7b7;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: center;
	background: #fff;		/*背景色*/
	color: #333;
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}
.ta-calendar {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 20px;
	text-align: center;	
	background: #fff;	
	color: #333;
}
.ta-calendar, .ta-calendar td, .ta-calendar th {
	word-break: break-all;
	border: 1px solid #b7b7b7;	/*テーブルの枠線の幅、線種、色*/
}
/*曜日*/
.ta-calendar th {
	background: #fffbe3;
}


h2 span.option1 {
	width: auto;
	padding: 0px 5px;
	position: static;
	-webkit-transform: none;
	transform: none;
	display: inline-block;
}
/*option２は左肩斜めのピンクのたすき*/
.list35 .option2 {
	font-size: 10px;
	color: #FFF;
	background: #e99383;
	text-align: center;
	display: block;
	width: 120px;
	position: absolute;
	left: 0px;
	top: 0px;
	-webkit-transform: rotate(-45deg) translate(-35px);
	transform: rotate(-45deg) translate(-35px);
}
h2 span.option2 {
	width: auto;
	padding: 0px 5px;
	position: static;
	-webkit-transform: none;
	transform: none;
	display: inline-block;
}


/*一覧ページのボックス内のアイコン
breeder4よりオプション３，４
---------------------------------------------------------------------------*/
/*option3,option4OK確認ずみ*/
/*option３は右肩斜めのピンクのたすき*/
/*一覧ページのボックス内のアイコンオプション３・４　確認ずみ
（CMSの場合は管理ページの「オプション1」～のプルダウンと、setup.phpの「オプション選択肢」に関連します）breeder4よりオプション３，４
---------------------------------------------------------------------------*/
/*option3,option4共通*/
span.option3, span.option4 {
	text-align: center;
	display: block;
	font-size: 13px;	/*文字サイズ*/
	width: 120px;		/*幅*/
	position: absolute;
	right: 0px;	/*ボックスに対して右から0pxの場所に配置*/
	top: 0px;	/*ボックスに対して上から0pxの場所に配置*/
	transform: rotate(45deg) translate(36px,-15px);	/*45度回転、右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
	color: #FFF;	/*文字色*/
	background: #949845;	/*背景色*/
}

/*option3,option4共通*/
/*option3への追加設定*/
span.option3 {
	color: #FFF;		/*文字色*/
	background: #ee8488;	/*背景色*/
}
/*h2タグ内で使った場合のoption1とoption2どうみえる？？*/
h2 span.option3, h2 span.option4 {
	width: auto;
	position: static;
	transform: none;
	display: inline-block;
	font-size: 15px;
	margin-left: 10px;
	padding: 0px 5px;
}

.list35 .option1 {
	font-size: 10px;
	color: #FFF;
	background: #be8a3a;
	text-align: center;
	display: block;
	width: 120px;
	position: absolute;
	left: 0px;
	top: 0px;
	-webkit-transform: rotate(-45deg) translate(-35px);
	transform: rotate(-45deg) translate(-35px);
}
h2 span.option1 {
	width: auto;
	padding: 0px 5px;
	position: static;
	-webkit-transform: none;
	transform: none;
	display: inline-block;
}


/*breeder4よりオプション３，４おもてなしバイブルのlist35で使っている
---------------------------------------------------------------------------*/



.list35.option5,.list35.option6 {
	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設定*/
.list35 .option5 {
	background: #e99383;	/*背景色（古いブラウザ用）*/
	background: rgba(233,147,131,0.7);	/*背景色。左４つの数字はRGBの色指定。0.7は透明度70%の事。*/
	color :#fff;	/*文字色*/
}
/*option2設定*/
.list35 .option6 {
	background: #fae5d5;
	color :#be8a3a;
}


span.option1　{
	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: #999;	/*背景色*/
}
/*option1への追加設定*/

/*h2タグ内で使った場合のoption1とoption2*/
h2 span.option1, h2 span.option2 {
	width: auto;
	position: static;
	transform: none;
	display: inline-block;
	font-size: 15px;
	margin-left: 10px;
	padding: 0px 5px;
}





.look {display: inline-block;border: 1px solid #202124;padding: 5px 20px;border-radius: 5px;margin: 5px 0;}
.look1 {background: #fffacd;padding: 5px 10px;border-radius: 4px;}/*黄色◎*/
.look2 {background: #fff1f1;padding: 5px 10px;border-radius: 4px;}
.look3 {background: #eaf8f7;padding: 5px 10px;border-radius: 4px;}
.look4 {background: #E0F8E0;padding: 5px 10px;border-radius: 4px;color: #996600 !important;}/*１と同じだけど１は黄緑にみえない◎*/
.look5 {background: #ffd3bb;padding: 5px 10px;border-radius: 4px;}
.look6 {background: rgba(255,255,255,0.3);		/*背景色*/
  border-radius: 100px;color: #ffffff !important;text-align: center;	margin: 2px 1px;
	border: 1px solid #ffffff;box-shadow: 0px 3px #ffffff;
  display: inline-block;	padding: 0.3rem 1.5rem;	/*上下、左右へのメニュー内の余白*/}/*特徴の箇条書き　料理教室の料理ジャンル別*/




.look-box {background: #6b6351;color: #fff4ee !important;border: 1px solid #ccc;display: inline-block;padding: 0px 10px !important;border-radius: 4px;}
p.look-box {margin: 0 3%;}

.color1, .color1 a {color: #c30000 !important;}
.color2, .color2 a {color: #668ad8 !important;}
.color3, .color3 a {color: #e99383 !important;}
.color4, .color4 a {color: #bd9a64 !important;}/*金色*/
.color5, .color5 a {color: #fffacd !important;}/*黄色*/
.color6, .color6 a {color: #6b6351 !important;}/*グレー色◎*/
.color7, .color7 a {color: #ffffff !important;}
.pr {font-size: 10px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.recipe-intro {font-size: 14px; padding:0 2px !important;}
.lead-bun {font-size: 12px;width: 96%; padding:0 2px !important;	margin-bottom: 10px;}

.big1 {font-size: 40px;}

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

.mb15,.mb1em {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 3px !important;}
.mb50 {margin-bottom: 50px !important;}

.p0 {padding:0 !important;}

.wl {width: 96%;}
.wm {width: 75%;}
.ws {width: 50%;}


.c {text-align: center !important;}
.r {text-align: right !important;}
.l {text-align: left !important;}
	
	
/*その他重複けす
---------------------------------------------------------------------------*/

.border1 {border: 1px solid #000;}
#sh-sub {display: none;}

.date {text-align: right;color: #999;font-size: 11px;}

/*その他
---------------------------------------------------------------------------*/

.clear {clear: both;}

ul.disc {padding: 0em 25px 15px;list-style: disc;}

.bg1 {overflow: hidden;background: url(https://creme-cremes.com/components/images/bg1.png) no-repeat -20% -100px/30%,url(https://creme-cremes.com/components/images/bg1.png) no-repeat 130% 100px/50%, #fff !important;}

.halfhalf {width: 50%;float: left;}
.ofh {overflow: hidden;}
.sp {display: none;}

/*画面幅800px以下の設定Pc　SP表示切替ＰＣで表示。ＳＰ非表示
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
  .sp {display:block;}
  .pc {display:none;}
 
  }


/*テーブルリスト風
tp_cafe14 ta2作り方チェックポイントと道具紹介
---------------------------------------------------------------------------*/
/*ta2設定*/
.ta-list {
	width: 96%;
	margin: 0 2% 15px;
	border-top: 1px dashed #ccc;	/*上の線の幅、線種、色*/
}
.ta-list tr:nth-child(odd) {
	background: #f7f6f3;	/*奇数番目の行にだけ色をつける。古いブラウザは未対応。*/
}
.ta-list td,
.ta-list th {
	padding: 10px;	/*ボックス内の余白*/
	border-bottom: 1px dashed #ccc;	/*下の線の幅、線種、色*/
}
/*一番左の列の設定。メニュータイトルが入っている所。*/
.ta-list th {
	width: 200px;	/*幅*/
	text-align: left;	/*左寄せ*/
	vertical-align: top;	/*文字を上に寄せる*/
}
/*写真用*/
.ta-list img.menu-img {
	width: 150px;	/*画像の幅*/
	border-radius: 20px;	/*角丸のサイズ。この行を削除すれば通常の四角形になります。*/
	float: right;
}
/*価格用*/
.ta-list .af-price {
	white-space: nowrap;	/*途中で改行させない設定*/
	font-weight: bold;		/*太字*/
	text-align: right;		/*右寄せ*/
}

.ta-list span.option1
 {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: #999;	/*背景色*/
}

.fs1 {font-size: 18px;}

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

/*テーブル ta2
---------------------------------------------------------------------------*/
/*ta2設定*/
.ta-list {
	font-size: 14px;
}
/*一番左の列の設定。メニュータイトルが入っている所。*/
.ta-list th {
	width: 140px;	/*幅*/
}
/*写真用*/
.ta-list img.menu-img {
	width: 100px;
}}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
  /*テーブル ta2
  ---------------------------------------------------------------------------*/
  /*写真用*/
  .ta-list img.menu-img {
    float: none;
    display: block;
  }  }
  /*画面幅480px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:480px){
    /*テーブル ta2
    ---------------------------------------------------------------------------*/
    .ta-list td,
    .ta-list th {
      padding: 3px;	
    }
    /*一番左の列の設定。メニュータイトルが入っている所。*/
    .ta-list th {
      width: 100px;
    }
   
    .fs1 {font-size: 14px;}
     }
/*テーブルtp-バンド１　レシピ材料用　　２
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	border: 1px solid #000;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
	background: #eee;		/*背景色*/
}
/*テーブルの見出し（※tamidashi）*/
.ta2 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #eee;	/*背景色*/
}
/*ta1設定*/
.ta2 {
	table-layout: fixed;
	width: 95%;
	margin: 0 auto 30px;
}
.ta2, .ta2 td, .ta2 th {
	word-break: break-all;
	border: 1px solid #000;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta2 th {
	width: 50%;		/*幅190px*/
	text-align: center;	/*センタリング*/
}


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

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1設定*/
.ta2, .ta2 td, .ta2 th {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta2 th {
	width: 150px;
}}


/*サブメニューtp^band1
アーカイブサイドバーのリスト
---------------------------------------------------------------------------*/
/*メニュー全体のブロック*/
.list-simple {
	margin-bottom: 20px;	/*下に空けるスペース*/
}
/*メニュー１個あたりの指定*/
.list-simple a {
	display: block;text-decoration: none;
	text-align: center;	/*文字をセンタリング*/
	padding: 5px;		/*メニュー内の余白*/
	border-bottom: 1px solid #000;	/*下線の幅、線種、色*/
}
	

/*ko固定ヘッダーのみ有効ヘッダー右上メニュー物産１５英語中国語メニュー全体のブロック設定右上切り替え表示しない*５００にしたima 左した
---------------------------------------------------------------------------*/
 
#header-nav {z-index: 500;
  position: absolute;
	right: 280px;	/*headerに対して右から20pxの場所に配置*/
	top: 50px;		/*headerに対して上から40pxの場所に配置*/
	/*ヘッダーの右から3%の場所に配置。*/	/*headerに対して右から20pxの場所に配置2つ色違いで並べる*/
width: 160px;
margin: 0 auto;
background:;	/* #fff3e2マウスオン時の背景色*/
	top: 30px;	/*ヘッダーの上から30pxの場所に配置。*/
	letter-spacing: 0.1em;	/*文字間隔を少し広げる指定*/
	font-size: 13px;	/*文字サイズ*/
}
/*メニュー１個あたりの設定*/
#header-nav li {
	float: left;	/*左に回り込み*/
	margin-left: 10px;	/*メニュー間に空けるスペース*/
}
#header-nav li a {
  text-decoration: none;
  display: inline-block　!important;
	border: 2px solid  #eea882;	/*枠線の幅、線種、色*/
	padding: 0 10px;		/*上下、左右へのメニュー内の余白*/
}
#header-nav li a:hover {
	background: #fff;	/*マウスオン時の背景色*/
}
 
/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*ヘッダー右上メニュー
---------------------------------------------------------------------------*/
/*メニュー全体のブロック設定*/
#header-nav {  
top: 60px;	/*headerに対して右から60pxの場所に配置*/
left: 6px;	/*headerに対して右から60pxの場所に配置*/ 

	font-size: 11px;	/*文字サイズ*/

	padding: 0 3px;		
}}
 


/*aタグにclass="btn"をつけた場合。トップページの「こんなお悩みありませんか？」ブロック内のボタンで使用。
---------------------------------------------------------------------------*/
a.btn10 {
	display: block;text-decoration: none;
	text-align: center;
	background: #ffffff;	
	background: linear-gradient(#ffffff, #ffffff);
	color: #be8a3a;
    border: solid 1px #be8a3a;
   	border-radius: 3px;	
	padding: 10px 0;	
	font-size: 15px;	
}
a:hover.btn10 {
	background: #fff;	
	color: #2c3c63;	
}

 
/*tpsimple16 headerアイコン（facebookやtwitterなどのアイコンブロック）
---------------------------------------------------------------------------*/
/*アイコンを囲むブロック全体の設定*//*アイコンを囲むブロック全体の設定*/
  header .icon-macaron {
    position: absolute;
    right: 23%;		/*ヘッダーブロックに対して右から3%の場所に配置*/
    top: 3px;	/*ヘッダーブロックに対して下から15pxの場所に配置*/
  }
  
  
  /*アイコン１個あたりの設定*/
  header .icon-macaron li {
    display: inline;	/*横並びにさせる指定*/
  }
  /*アイコン画像の設定*/
  header .icon-macaron img {
    width: 30px;		/*画像の幅*/
    margin-left: 5px;	/*画像同士の余白*/
  }
 
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

    /*アイコンを囲むブロック全体の設定*/
  header .icon-macaron  {
    right: 0%;
    bottom: 10px;
    width: 100%;
  } }
  
  /*画面幅480px以下の設定追加
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:530px){
     /*アイコンを囲むブロック全体の設定*/
     header .icon-macaron {
      top: 55px;	/*headerに対して右から60pxの場所に配置*/    
  }  }
        

/*rレシピ1位「人気」「NEW」マーク丸い順位など
---------------------------------------------------------------------------*/
/*共通設定*/
.mark1, .mark2 {
  
	font-weight: bold;		/*文字を太く*/
	transform: rotate(-30deg);	/*左回転で30度傾ける設定*/
	-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.6);	/*ボックスの影。下へ、右へ、広げる範囲、rgb指定での色。0,0,0は黒のことで、0.6が透明度60%の事。*/
	box-shadow: 1px 2px 4px rgba(0,0,0,0.6);

	position: absolute;
	left: -8px;	/*左から-10pxの場所に配置*/
	top: -8px;		/*上から-10pxの場所に配置*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 12px;		/*文字サイズ*/
  width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/

}
.mark1 {
	background: #e99383;	/*mark1の背景ピンク色*/
}
.mark2 {
	background: #997a00;	/*mark2の背景金色*/
}


.mark11, .mark12 {

	font-weight: bold;		/*�����𑾂�*/

	transform: rotate(-30deg);
	-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.6);	
	box-shadow: 1px 2px 4px rgba(0,0,0,0.6);

	position: absolute;
	left: -10px;	/*左から-10pxの場所に配置*/
	top: -10px;		/*上から-10pxの場所に配置*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 26px;		/*文字サイズ*/
	width: 160px;			/*幅*/
	line-height: 160px;		/*高さ*/
	border-radius: 50%;		/*円形にする*/
	text-align: center;		/*文字をセンタリング*/

}
.mark11 {
  background: rgba(152,156,69,0.7);	/*背景色。255,255,255は白のことで0.3は色が30%出た状態のこと。*/	/*mark2金色*/
}
.mark12 {
background: rgba(225,233,209,0.7);	/*背景色。255,255,255は白のことで0.3は色が30%出た状態のこと。*/
}
a.btn9 {
  display: block;text-decoration: none;
 
background-color: #997a00;	/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: linear-gradient(#bd9a64, #997a00);	/*グラデーション*/ 

	color: #fff;	/*文字色*/
	font-size: 18px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
  padding: 20px;		/*ボタン内の余白*/
  margin: 10px 3%;
	border-radius: 4px;	/*角丸のサイズ*/
	letter-spacing: 0.1em;	/*0.2文字間隔を広くとる設定*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	/*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.3は色が30%ついた状態。*/
	border: 1px solid #997a00;	/*枠線の幅、線種、色*/
}
/*マウスオン時*/
a:hover.btn9 {
	box-shadow: none;
	background: #fff;	/*背景色*/
	color: #c30000;		/*文字色*/
}

/*pdfアイコンtpclinic4
---------------------------------------------------------------------------*/
a[href$=".pdf"]{
	display: inline-block;
	background: url(https://creme-cremes.com/components/images/PDF_32.PNG) no-repeat right center;
	padding: 5px 40px 5px 0px;
}


/*tp-home1サブコンテンツ内のbox2（「サンプルホームとは？」と「スタッフ募集中」のバナー）
---------------------------------------------------------------------------*/
#sub .box20 {
	margin-bottom: 15px;	/*ボックスの下に空けるスペース*/
	font-size: 120%;	/*文字サイズ*/
	box-shadow: 0px 0px 2px 5px #fff inset;	/*影の設定。右・下・ぼかし幅・距離・色の設定。insetは内側に向かっての影。*/
	background: #edf5fa;	/*背景色*/
}
#sub .box20 a {
	text-decoration: none;
	display: block;
	padding: 40px 15px;			/*上下、左右へのボックス内の余白*/
	border: solid 3px #e4e4e4;	/*枠線の線種、幅、色*/
}
/*マウスオン時*/
#sub .box20 a:hover {
	border: solid 3px #7a6b50;	/*枠線の線種、幅、色*/
}
/*「サンプルホームとは？」の背景設定*/
#sub .box20.about0 {
	background: #edf5fa url(https://creme-cremes.com/components/images/logo_mark.png) no-repeat right center / 100px;	/*背景色、背景画像の読み込み。高さ100px。*/
}
/*「スタッフ募集中」の背景設定*/
#sub .box20.recruit0 {
	background: #edf5fa url(https://creme-cremes.com/components/images/recruit_img.png) no-repeat right top / 110px;		/*背景色、背景画像の読み込み。高さ110px。*/
}



/*type9の色ちがい*/

  #sub h2.type14 {  
  position: relative;
  padding: 0.5em 0.7em;
  margin: 2em 0;
  background: #fff4ee;
  color: #f6b635;
  font-weight: bold;
  }
  
  #sub h2.type14 :after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #fff4ee;
    width: 0;
    height: 0;
  }



  /*job2求人一覧ページの「申込み用オレンジ。PCで横長」car7midasiボタン
  ---------------------------------------------------------------------------*/
  a.btn7 {
    display: block;text-decoration: none;
   
    font-size: 19px;	/*文字サイズ*/
    text-align: center;	/*文字をセンタリング*/
   
    margin: 10px 3%;
    border-radius: 4px;	/*角丸のサイズ*/
    letter-spacing: 0.2em;	/*文字間隔を広くとる設定*/
   
   
    padding: 10px 18px;	/*上下、左右へのボックス内の余白*/
    color: #FFF;		/*文字色*/
    background: url(https://creme-cremes.com/components/images/bg1-btn7.jpg) no-repeat center center;	/*背景画像の読み込み（※古いブラウザ用でメニュー背景にも使っています）*/
    border: 1px solid #926910;	/*枠線の幅、線種、色*/
    box-shadow: 0px 0px 0px 1px #000 inset;	/*内側への影。右へ・下へ・ぼかし幅・距離・色を設定*/
    text-shadow: 1px -1px #000;	/*テキストの影。左へ、下へ(マイナスがつく場合は上に向かう)、色の設定。*/

  }
  /*マウスオン時*/
  a:hover.btn7 {
    box-shadow: none;
    background: #fff;	/*背景色*/
    color: #fae5d5;		/*文字色*/
  }
  
  /*tpビギナー５ヘッダーを仕切りとしてつかいたい試行錯誤（一番上の、ロゴやメニューが入っているブロック）
  ---------------------------------------------------------------------------*/
  .head-er {
    height: 400px;
    overflow: auto;
    position: relative;
    background: url(https://creme-cremes.com/components/images/mainimg-head-er.jpg) no-repeat center center / cover;	/*背景画像の読み込み*/
  }
  /*ロゴ画像*/
  .head-er #logo-head-er img {
    display: block;
    width: 20%;	/*画像の幅*/
    position: absolute;
    left: 40%;		/*ロゴやメニューが入っているブロックに対して、左からの配置場所の指定。*/
    bottom: 50%;	/*ロゴやメニューが入っているブロックに対して、下からの配置場所の指定。*/
  }
  
  /*メニュー
  ---------------------------------------------------------------------------*/
  /*メニューブロック全体への指定*/
  #menubar-head-er {
    position: absolute;
    bottom: 20%;	/*ロゴやメニューが入っているブロックに対して、下からの配置場所の指定。*/
    left: 0px;
    width: 100%;
    text-align: center;
  }
  /*メニュー１個あたりの指定*/
  #menubar-head-er li {
    display: inline-block;
    margin: 0 1%;
    animation-name: opa1;
    animation-delay: 1S;
    animation-duration: 1S;
    animation-fill-mode: both;
  }
  #menubar-head-er li a {
    text-decoration: none;display: block;text-align: center;
    width: 140px;	/*メニューの幅*/
    color: #fff;	/*文字色*/
    border-bottom: 2px solid transparent;	/*下線の幅、線種、色。transparentは透明の事。*/
    padding-bottom: 7px;	/*下線と文字の間にとる余白*/
  }
  /*マウスオン時の指定*/
  #menubar-head-er li a:hover {
    border-bottom: 2px solid #fff;	/*下線の幅、線種、色*/
    letter-spacing: 0.1em;			/*文字間隔を少しだけ広くする指定。そのままがいいならこの１行を削除。*/
  }
  

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

  /*ヘッダー（一番上の、ロゴやメニューが入っているブロック）
  ---------------------------------------------------------------------------*/
  /*ロゴ画像*/
  .head-er #logo-head-er img {
    width: 30%;	/*画像の幅*/
    left: 35%;	/*ロゴやメニューが入っているブロックに対して、左からの配置場所の指定。*/
  }
}



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

/*ヘッダー（一番上の、ロゴやメニューが入っているブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
.head-er #logo-head-er img {
	width: 50%;	/*画像の幅*/
	left: 25%;	/*ロゴやメニューが入っているブロックに対して、左からの配置場所の指定。*/
} 
  }





/*cafe16写真のバナー風メニュー（menu）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#contents .menu-induction {
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	line-height: 1.5;		/*行間をすこし狭く。デフォルトは冒頭のbody内にあります。*/
	font-size: 30px;		/*文字サイズ*/
	text-shadow: 1px 1px #000;	/*テキストの影。右に、下に、色。*/
}
#contents .menu-induction  a {
	display: block;text-decoration: none;
	padding: 30px;	/*ボックス内の余白*/
	background: rgba(0,0,0,0.4);	/*背景色。0,0,0は黒のことで0.4は色が40%でた状態のこと。*/
	color: #fff;	/*文字色*/
	border: 15px solid rgba(0,0,0,0.2);	/*枠線の幅、線種、色。*/
}
/*マウスオン時*/
#contents .menu-induction  a:hover {
	background: transparent;	/*上で指定したbackgroundを透明にする。つまり、下で読み込んでいる写真が鮮明に出ます。*/
}
/*ボックス内の段落タグ設定*/
#contents .menu-induction  p {
	padding: 0px;
}
/*ボックス内の段落タグ内のspanタグ*/
#contents .menu-induction  p span {
	display: block;
	font-size: 13px;	/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔をすこしだけ広く*/
}
/*ボックス内の写真(背景画像)の読み込み。単発講座。menu-induction*/
#contents .course-1day-induction {
	background: url(https://creme-cremes.com/components/images/big3.jpg) no-repeat center center / cover;
}
/*ボックス内の写真(背景画像)の読み込み。コース一覧。*/
#contents .course-induction {
	background: url(https://creme-cremes.com/components/images/big3.jpg) no-repeat center center / cover;
}
/*ボックス内の写真(背景画像)の読み込み。継続講座*/
#contents .course-continuation-induction {
	background: url(https://creme-cremes.com/components/images/big3.jpg) no-repeat center center / cover;
}



/*テーブル　.list8.講座のまとめta8でない
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta8 caption {
	font-weight: bold;			/*太字に*/
	padding: 10px 5px;			/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #a99f85;		/*背景色*/
	color: #fff;				/*文字色*/
}

/*look-boxta1テーブルブロック設定*/
.ta8 {
	border-top: 1px solid #000;	/*テーブルの一番上の線。幅、線種、色*/
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
	background: #fff;			/*背景色*/
}

/*tr（１行分）タグ設定*/
.ta8 tr {
	border-bottom: 1px solid #000;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta8 th, .ta8 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta8 th {width: 30%;	/*幅*/
	text-align: left;	/*左よせにする*/
	background: #fff4ee;	/*背景色*/
	width: 100px !important;	/*幅*/
	font-weight: normal;
}

/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {
  .ta8 caption {
    padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
  }
  
  /*th（左側）、td（右側）の共通設定*/
  .ta8 th, .ta8 td {
    padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
  }
  
  /*th（左側）のみの設定*/
  .ta8 th {
    width: 20% !important;		/*幅*/
  }}

/*テーブル　text-menu 講座のリスト8中にはいるのが　テーブル１　ｔｐバンド１
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border: 1px solid #000;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
	background: #eee;		/*背景色*/
}
/*テーブルの見出し（※tamidashi）*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #eee;	/*背景色*/
}
/*ta1設定*/
.ta1 {
	table-layout: fixed;
	width: 95%;
	margin: 0 auto 30px;
}
.ta1, .ta1 td, .ta1 th {
	word-break: break-all;
	border: 1px solid #000;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 140px;		/*幅*/
	text-align: center;	/*センタリング*/
}


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

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1設定*/
.ta1, .ta1 td, .ta1 th {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 100px;
}}
/*テーブルtp_photostudio1受講までのお申込みの流れ
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-line-step caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #6b6351;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;	/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta-line-step {
	border-top: 1px solid #6b6351;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta-line-step tr {
	border-bottom: 1px solid #6b6351;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta-line-step th, .ta1 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta-line-step th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}

.line-step {
	display: inline-block;
	font-size: 0.8em;
	background: #eea882;
	padding: 0 20px;
	margin: 0 10px;
	border-radius: 2px;	/*角を丸くする指定*/
}

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

	/*テーブル１行目に入った見出し部分（※caption）*/
	.ta-line-step caption {
		padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
	}

/*ta1テーブルブロック設定*/
.ta-line-step {
	width: 70%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}
	/*th（左側）、td（右側）の共通設定*/
	.ta-line-step th, .ta-line-step td {
		padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
	}

	/*th（左側）のみの設定*/
	.ta-line-step th {
		width: 20%;		/*幅*/
	}}/*画面幅900px以上の追加指定ここまで*/


  /*FAQ他の違い
  ---------------------------------------------------------------------------*/
  /*FAQボックス全体*/
  .faq-differences-from-other-companies {
    padding: 0 5px;	/*上下、左右へのボックス内の余白*/
  }
  
  /*質問*/
  .faq-differences-from-other-companies dt {
    width: 80%;			/*幅*/text-align: center;		/*テキストのセンタリング*/
    line-height: 1.5;	/*行間*/font-size: 24px;	/*文字サイズ*/color: #000;	/*文字色*/
    margin: 0px auto 20px;	/*上、左右0.5%、下へのボックスの外側へ空けるスペース*/

    border-radius: 3px;		/*枠を角丸にする指定*/
    margin-bottom: 20px;	/*下に空けるスペース*/
    background: #fff;		/*背景色*/
    border: 1px solid #ccc;	/*枠線の幅、線種、色*/
    text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
    padding: 4px 1em 4px 1em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
  }
  
  

/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.faq-differences-from-other-companies dt span {
	display: block;font-size: 13px;	/*文字サイズ*/
	color: #202124;	
}

 
  /*回答*/
  .faq-differences-from-other-companies dd {
    padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
  }
  
  /*opencloseを適用した要素のカーソル*/
  .openclose {
    cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
  }
  
  .faq-differences-from-other-companies dt span {text-indent: 0;}
  
  
/*シャドー付きH"2topのセット
---------------------------------------------------.logo-kazari------------------------*/

	/*h2見出し*/
	h2.text-shadow-h2  {
		margin: 0;
		font-weight: 500;	/*文字の太さ。数値が大きいほど太くなります。*/
		font-size: 3.8vw;	/*文字サイズ。画面幅に対する単位です。*/
		text-shadow: 1px 1px 2px rgba(0,0,0,0.3);	/*テキストの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.3は色が30%出た状態。*/
	}	
	/*pタグ。小文字の説明文。*/
p.text-shadow-p {
		font-size: 13px;		/*文字サイズ*/
		margin: 0 10px 30px;	/*上、左右、下へのpタグ内の余白*/
	}
	
	/*教育用blog記事へのリンクメニュー粉雪風教育/
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footer-education-menu {
	clear: both;overflow: hidden;
	font-size: 80%;	/*文字サイズを少し小さく*/
	margin-left: -1%;
	padding: 20px 0;
}
/*１列分の設定*/
#footer-education-menu ul {
	float: left;	/*左に回り込み*/
	width: 24%;		/*今回は４列作ったので、下のmarginを含めて25%になるよう指定。５列にするならこの行は19%にする。*/
	margin-left: 1%;
}
/*メニュー１個あたりの設定*/
#footer-education-menu ul li {	border-bottom: 1px solid rgba(0,0,0,0.1);	/*下線の幅、線種、色。0,0,0は黒の事で0.1は色が10%出た状態。*/
	padding: 0 10px;	/*上下、左右への余白*/
}
/*見出し*/
#footer-education-menu li.title {
	font-weight: bold;	/*太字にする*/
	background: rgba(0,0,0,0.3);	/*背景色*/
	border-radius: 2px;	/*角丸のサイズ*/
}
/*リンクテキスト*/
#footer-education-menu a {
	text-decoration: none;
	opacity: 0.6;	/*透明度。70%色がでた状態の事。*/	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
}
/*マウスオン時*/
#footer-education-menu a:hover {
	opacity: 1;	/*透明度。100%色がでた状態の事。*/
}


/*アイコン（Font Awesome）*/
#footer-education-menu a::before {
	transition: 0.3s;
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f0da";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #ABABAB;			/*アイコンの色*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合があります*/
}

/*マウスオン時のアイコン設定*/
#footer-education-menu a:hover::before {
	color: #666;			/*アイコンの色*/
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  #footer-education-menu ul {
    float: none;
    width: auto;
  }
}


/*テーブル（ta1）tp_biz61
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-index caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #777;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1-index {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 2rem;		/*最後の「2rem」がテーブルの下に空けるスペースです。２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1-index tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1-index th, .ta1-index td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1-index th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #fafafa;	/*背景色*/
}

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

		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta1-index caption {
			padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）、td（右側）の共通設定*/
		.ta1-index th, .ta1-index td {
			padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）のみの設定*/
		.ta1-index th {
			width: 20%;		/*幅*/
		}

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




/*h2タグ吹き出しの方がメイン*/
#contents h2.h2-balloon-relief03 {
	clear: both;
	 display: inline-block;
	 margin-bottom: 30px;
	font-size: 40px;	/*文字サイズ*/ color: #000;
	border-bottom: 1px solid #000;	
	padding: 0 20px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}

#contents h2.h2-balloon-relief03 span {/*吹き出しの中大き目の字*/
  position: relative;
 
  margin: 1.5em 0;
  padding: 17px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #202124;
  font-size: 55px;
  background: #FFF;
  border: solid 2px #555;
  box-sizing: border-box;border-radius: 10px;
}
#contents h2.h2-balloon-relief03 span:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

#contents h2.h2-balloon-relief03 span:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

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

/*h2タグtp-band1*/
#contents h2.h2-balloon-relief03 {
	clear: both;
	 display: inline-block;
	 margin-bottom: 30px;
	font-size: 18px;	/*文字サイズ*/ color: #000;
	border-bottom: 1px solid #000;	/*下線の幅、線種、色*/
	padding: 0 10px 10px;	/*上、左右、下へのタグ内の余白*/
	line-height: 1.2;	/*行間を少し狭くする。デフォルト指定は冒頭のbody内にあります。*/
}
/*h2タグ内のspanタグ（小文字）*/
#contents h2.h2-balloon-relief03 span {
  position: relative;
 
  margin: 1.5em 0;
  padding: 17px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #202124;
  font-size: 25px;letter-spacing: 0.05em;
  background: #FFF;
  border: solid 2px #555;
  box-sizing: border-box;border-radius: 10px;
}
#contents h2.h2-balloon-relief03 span:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

#contents h2.h2-balloon-relief03 span:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}}




  /*tp_job4「求人を探す」「求人を出す」の共通設定*/
  #mainimg-inner div  {	font-size: 11px;
	  z-index: 300;

	    position: fixed;	/*スクロールしてもボタンが移動しないようにする指定。移動させたいならfixedをabsoluteにして下さい。*/
	 	/* position: relative;ボタンの右からの配置場所指定*/
	  bottom: 1px;			/*ボタンの上からの配置場所指定*/
	  
	  width: 40%;				/*ボタンの幅*/
	  text-align: center;		/*文字をセンタリング*/
	  border-radius: 10px;	/*角を丸くする指定*/
	  line-height: 1.5;		/*行間。デフォルトより少し狭くする。*/
	  letter-spacing: 0.1em;	/*文字間隔を少し広くとる*/
	  transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/
	  box-shadow: 10px 20px 40px rgba(0,0,0,0.4);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.4は色が40%出た状態。*/
	  text-shadow: 2px 2px 2px rgba(0,0,0,0.2);	/*テキストの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
  }
 

  #mainimg-inner div a {
	  display: inline-block;text-decoration: none;
	  padding: 10px 20px;	/*上下、左右へのボタン内の余白*/
	  color: #fff;		/*文字色*/
  }
  
 
  /*「求人を探す」「求人を出す」のマウスオン時*/
  #mainimg-inner div:hover {
	  transform: scale(1.05);		/*105%に拡大する*/
	  filter: brightness(1.2);	/*少しだけ明るくする*/
  }
  
  /*「求人を探す」の設定。(1)は１つ目のボタンという意味です。*/
  #mainimg-inner div:nth-of-type(1) {	right: 50%;	 
	  background: linear-gradient(#f0608f,#d93f72);/*背景グラデーション*/
  }
  
  /*「求人を出す」の設定。(2)は２つ目のボタンという意味です。*/
  #mainimg-inner div:nth-of-type(2) {	left: 50%;	
	  background: linear-gradient(#ffa800,#ff8400);/*背景グラデーション*/
  }
  
  /*spanタグ。大きな文字の指定です。*/
  #mainimg-inner span {
	  font-size: 16px;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
   	display: block;		/*改行させる*/
}
  /*アイコン画像（アイコンにはFont Awesomeを使用）*/
  #mainimg-inner i {
	  opacity: 0.7;			/*透明度。0.7は色が70%出た状態。*/
	  margin-left: 10px;		/*小さな文字とアイコン画像の間に空けるスペース*/
	}

/*お菓子用色違い「求人を探す」の設定。(1)は１つ目のボタンという意味です。*/
#mainimg-inner div.sweets:nth-of-type(1) {	right: 50%;	 
	background: linear-gradient(#6dc99f,#57a581);/*背景グラデーション*/
}

/*お菓子用「求人を出す」の設定。(2)は２つ目のボタンという意味です。*/
#mainimg-inner div.sweets:nth-of-type(2) {	left: 50%;	
	background: linear-gradient(#ffa800,#ff8400);/*背景グラデーション*/
}

	/*画面幅480px以下の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
		#mainimg-inner div  {
			z-index: 300;
		
			  position: fixed;	/*スクロールしてもボタンが移動しないようにする指定。移動させたいならfixedをabsoluteにして下さい。*/
			   /* position: relative;ボタンの右からの配置場所指定*/
			bottom: 1px;			/*ボタンの上からの配置場所指定*/
			
			width: 47%;				/*ボタンの幅*/
			text-align: center;		/*文字をセンタリング*/
			border-radius: 10px;	/*角を丸くする指定*/
			line-height: 1.3;		/*行間。デフォルトより少し狭くする。*/
			letter-spacing: 0.1em;	/*文字間隔を少し広くとる*/
			transition: 0.3s;		/*マウスオンの際にボタンが大きくなるまでの時間。0.3秒。*/
		
		}
		#mainimg-inner div a {	font-size: 11px !important;
			padding: 1px 2px;	/*上下、左右へのボタン内の余白*/
		}
		/*spanタグ。大きな文字の指定です。*/
		#mainimg-inner span {
			font-size: 13px !important;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
			
	  }
	   
	}
  
    
/*縦に変更サイドリンクにアレンジ#sidelink4１２３４
---------------------------------------------------------------------------*/
@keyframes scroll {
  0% {opacity: 0;}
  100% {opacity: 1;}
  }
  /*デフォルトでは非表示に*/
  #sidelink1 a {display: none;}
  /*ボタンの設定*/
  #sidelink1 a {
    display: block;z-index: 100;position: fixed;
    width: 100px;		/*幅*/
    bottom:220px;		/*下からの55配置場所指定*/
    left: 0%;			/*右から3の配置場所指定*/
    animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
    animation-duration: 0.5S;	/*アニメーションの実行時間*/
    animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
    border-radius: ;
      /*border: 3px solid #ffffff;枠線の幅、線種、色*/
      /*background: #fff;背景色（古いブラウザ用）*/
      /*background: rgba(255,255,255,0.5);背景色。255,255,255は白のことで0.3は色が30%出た状態のこと。*/
  }
  /*マウスオン時*/
  #sidelink1 a:hover {
    background: #fff;
  }
  
  
  /*画面幅600px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:600px){
    /*PAGE TOP（↑）設定
    ---------------------------------------------------------------------------*/
    /*ボタンの設定*/
    #sidelink1 a {
      width: 30px;	/*幅*/
      left: 0%;			/*右からの配置場所指定*/
    }  }
    
    /*PAGE TOP（↑）設定tpクリニック５をサイドリンクにアレンジ#sidelink4１２３４
    ---------------------------------------------------------------------------*/
    /*アニメーションのキーグレーム設定（変更不要）*/
    @keyframes scroll {
    0% {opacity: 0;}
    100% {opacity: 1;}
    }
    /*デフォルトでは非表示に*/
    #sidelink2 a {display: none;}
    /*ボタンの設定*/
    #sidelink2 a {
      display: block;z-index: 100;position: fixed;
      width: 100px;		/*幅*/
      bottom: 150px;		/*下から55の配置場所指定*/
      left: 0%;			/*右からの配置場所指定少し左*/
      animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
      animation-duration: 0.5S;	/*アニメーションの実行時間*/
      animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
      border-radius: 1px;
       /* border: 3px solid #ffffff;枠線の幅、線種、色*/
     
      /*  background: rgba(255,255,255,0.5);背景色。255,255,255は白のことで0.3は色が30%出た状態のこと。*/
    }
    /*マウスオン時*/
    #sidelink2 a:hover {
      background: #fff;
    }
    
    
    /*画面幅600px以下の設定
    ------------------------------------------------------------------------------------------------------------------------------------------------------*/
    @media screen and (max-width:600px){
      #sidelink2 a {
        width: 30px;	/*幅*/ 
        left: 0%;			/*右からの配置場所指定すこし右20*/
      }
      
      }/*PAGE TOP（↑）設定tpクリニック５をサイドリンクにアレンジ#sidelink4１２３４
      ---------------------------------------------------------------------------*/
        
         #sidelink3 a {
        display: block;z-index: 100;position: fixed;
        width: 100px;		/*幅*/
        bottom: 100px;		/*下から55の配置場所指定*/
        left: 0%;			/*右からの配置場所指定*/
        animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
        animation-duration: 0.5S;	/*アニメーションの実行時間*/
        animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
        border-radius: ;
        ;	/*border: 3px solid #ffffff枠線の幅、線種、色*/
          /*background: #fff;背景色（古いブラウザ用）*/
          /*background: rgba(255,255,255,0.5);背景色。255,255,255は白のことで0.3は色が30%出た状態のこと。*/
      }
      /*マウスオン時*/
      #sidelink3 a:hover {
        background: #fff;
      }
      
      
      /*画面幅600px以下の設定
      ------------------------------------------------------------------------------------------------------------------------------------------------------*/
      @media screen and (max-width:600px){
        /*PAGE TOP（↑）設定
        ---------------------------------------------------------------------------*/
        /*ボタンの設定*/
        #sidelink3 a {
          width: 30px;	/*幅*/ 
          left: 0%;			/*右からの配置場所指定少し右へ45*/
        }  
        }
        
        /*PAGE TOP（↑）設定tpクリニック５をサイドリンクにアレンジ#sidelink4１２３４
        ---------------------------------------------------------------------------*/
        /*アニメーションのキーグレーム設定（変更不要）*/
        @keyframes scroll {
        0% {opacity: 0;}
        100% {opacity: 1;}
        }
        /*デフォルトでは非表示に*/
        #sidelink4 a {display: none;}
        /*index,htmlへボタンの設定*/
        #sidelink4 a {
          display: block;z-index: 100;position: fixed;
          width: 100px;		/*幅  border-radius: ;*/
          bottom: 40px;		/*下から55の配置場所指定*/
          left: 0%;			/*右 rightからの配置場所指定*/
          animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
          animation-duration: 0.5S;	/*アニメーションの実行時間*/
          animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
        
            /*border: 3px solid #ffffff;枠線の幅、線種、色*/
            /*background: #fff;背景色（古いブラウザ用）*/
          /*background: rgba(255,255,255,0.5);	背景色。255,255,255は白のことで0.3は色が30%出た状態のこと。*/
        }
        /*マウスオン時*/
        #sidelink4 a:hover {
          background: #fff;
        }
        
        
        /*画面幅600px以下の設定
        ---------------------------------------------sidelink4---------------------------------------------------------------------------------------------------------*/
        @media screen and (max-width:600px){
          #sidelink4 a { 
            left: 0%;			/*右からの配置場所指定*/
            width: 30px;	/*幅60px*/
          }
          
          }
  
          
/*テーブル（ta1）/tp_home5/
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-scroll caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;		/*ボックス内の余白*/
	background: #afa5a0;	/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1-scroll {
	table-layout: fixed;
	border-top: 1px solid #999;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 2rem;		/*テーブルの下に空けるスペース。２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1-scroll tr {
	border-bottom: 1px solid #999;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1-scroll th, .ta1-scroll td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1-scroll th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #efebe9;	/*背景色*/
}

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

		/*th（左側）のみの設定*/
		.ta1-scroll th {
			width: 20%;		/*幅*/
		}

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


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

	.scroll-ta1 .ta1-scroll {width: 700px;}
	.scroll-ta1 {overflow-x: auto;}

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

/*トップページの挨拶の最後の署名に使った設定tp_gallery2/*/
.homemade-apple-regular {
	font-family: "Homemade Apple", cursive;	/*冒頭で読み込んでいるGoogle Fontsの指定*/
	font-weight: 400;
	font-style: normal;
}




/*sectiontp_artist2_idol/動く背景にシースルー
---------------------------------------------------------------------------*/
/*フェード設定*/
.section::before {
	opacity: 0; /* 初期状態では非表示 */
	transition: opacity 1s; /* 1秒かけてフェードイン/フェードアウト */
}
.section.active::before {
	opacity: 1; /* フェードイン状態 */
}
.section.inactive::before {
	opacity: 0; /* フェードアウト状態 */
}

/*section要素を.sectionにした。しないと全部にきいてしまっていた*/
	/*.section {
	padding: 2vw 5vw;}ボックス内の余白。上下、左右への順番。*/


/*４つのsectionブロックの共通設定*/
#section1,#section2,#section3,#section4,#section5,#section6,#section7,#section8,#section9,#section10 {
	min-height: calc(100dvh - 50px - 10vw);	/*最低の高さ。100dvhは画面の高さ100%のこと。50pxは下のmarginの値。10vwは下のpaddingの上下分。それらを差し引いてバランスよく見えるようにしています。*/
	margin-top: 50px;
	margin-bottom: 50px;	/*ボックスの下に空けるスペース*/
			/*padding: 5vw;	ボックス内の余白*/padding: 2vw 5vw;	/*ボックス内の余白。上下、左右への順番。*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	#section1,#section2,#section3,#section4,#section5,#section6,#section7,#section8,#section9,#section10 {
		border-radius: 3vw 3vw 3vw 3vw;	/*角丸の指定。左上、右上0、右下0、左下への順番。*/
		margin: 50px 100px;	/*ボックスの下に空けるスペース*/padding: 2vw 5vw;	/*ボックス内の余白。上下、左右への順番。*/
	}

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


/*背景画像を置く為の設定*/
#section1::before,#section2::before,#section3::before,#section4::before,#section5::before,#section6::before,#section7::before,#section8::before,#section9::before,#section10::before {
	content: '';
	position: fixed;z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*section1料理テリーヌの設定*/
#section1 {background-color: rgba(0,0,0,0.6);	
	color: #fff;	/*文字色*/
}
#section1::before {
	background: url('https://okasikyousitu.com/components/images/section1.jpg') no-repeat center center / cover;	/*../images/section1.jpg《サイズ2688x1792》背景画像の読み込み*/
}

/*section2の設定*/
#section2 {
	background-color: rgba(0,0,0,0.5);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section2::before {
	background: url('https://okasikyousitu.com/components/images/section2.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}

/*section3の設定*/
#section3 {
	background-color: rgba(0,0,0,0.7);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section3::before {
	background: url('https://okasikyousitu.com/components/images/section3.jpg') no-repeat center center / cover;	/*../images/section3.jpg背景画像の読み込み*/
}


/*section2の設定*/
#section4 {background-color: rgba(0,0,0,0.6);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}


#section4::before {
	background: url('https://okasikyousitu.com/components/images/section4.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}


/*section2の設定*/
#section5 {background-color: rgba(0,0,0,0.7);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}


#section5::before {
	background: url('https://okasikyousitu.com/components/images/section5.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}

/*section3の設定折り込みパイ生地のLP*/
#section6 {
	background-color: rgba(0,0,0,0.8);	/*今ネイビー背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section6::before {
	background: url('https://creme-cremes.com/components/images/bg-cta10-min.jpg') no-repeat center center / cover;	/*../images/section3.jpg背景画像の読み込み*/
}
/*section2の設定*/
#section7 {
	background-color: rgba(0,00,0.6);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section7::before {
	background: url('https://okasikyousitu.com/components/images/section1.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}



/*section2の設定*/
#section8 {
	background-color: rgba(0,0,0,0.9);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section8::before {
	background: url('https://okasikyousitu.com/components/images/section2.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}




/*section3の設定*/
#section9 {
	background-color: rgba(0,0,0,0.6);/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section9::before {
	background: url('https://okasikyousitu.com/components/images/section3.jpg') no-repeat center center / cover;	/*../images/section3.jpg背景画像の読み込み*/
}

/*section2の設定？*/
#section10 {
	background-color: rgba(0,0,0,0.7);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section10::before {
	background: url('https://okasikyousitu.com/components/images/section2.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}

	/*縦向き端末から見た場合に背景画像をチェンジするサイズ1344x2000*/
	@media (orientation: portrait) {

	#section1::before {
		background-image: url('https://okasikyousitu.com/components/images/section1_portrait.jpg');
	}
	#section2::before {
		background-image: url('https://okasikyousitu.com/components/images/section2_portrait.jpg');
	}
	#section3::before {
		background-image: url('https://okasikyousitu.com/components/images/section3_portrait.jpg');
	}#section4::before {
		background-image: url('https://okasikyousitu.com/components/images/section4_portrait.jpg');
	}
	
	#section5::before {
		background-image: url('https://okasikyousitu.com/components/images/section5_portrait.jpg');
	}#section6::before {
		background-image: url('https://okasikyousitu.com/components/images/section6_portrait.jpg');
	}
  
  
  
  #section7::before {
		background-image: url('https://okasikyousitu.com/components/images/section3_portrait.jpg');
	}
	#section8::before {
		background-image: url('https://okasikyousitu.com/components/images/section3_portrait.jpg');
	}#section9::before {
		background-image: url('https://okasikyousitu.com/components/images/section2_portrait.jpg');
	}
	#section10::before {
		background-image: url('https://okasikyousitu.com/components/images/section2_portrait.jpg');
	}

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


/*色ちがい白バージョンsectionブロックの共通設定*/
#section1w,#section2w,#section3w,#section4w,#section5w,#section6w,#section7w,#section8w,#section9w,#section10w {
	min-height: calc(100dvh - 50px - 10vw);	/*最低の高さ。100dvhは画面の高さ100%のこと。50pxは下のmarginの値。10vwは下のpaddingの上下分。それらを差し引いてバランスよく見えるようにしています。*/
	margin-top: 50px;
	margin-bottom: 50px;	/*ボックスの下に空けるスペース*/
			/*padding: 5vw;	ボックス内の余白*/padding: 2vw 5vw;	/*ボックス内の余白。上下、左右への順番。*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	#section1w,#section2w,#section3w,#section4w,#section5w,#section6w,#section7w,#section8w,#section9w,#section10w {
		border-radius: 3vw 3vw 3vw 3vw;	/*角丸の指定。左上、右上0、右下0、左下への順番。*/
		margin: 50px 100px;	/*ボックスの下に空けるスペース*/padding: 2vw 5vw;	/*ボックス内の余白。上下、左右への順番。*/
	}

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


/*背景画像を置く為の設定*/
#section1w::before,#section2w::before,#section3w::before,#section4w::before,#section5w::before,#section6w::before,#section7w::before,#section8w::before,#section9w::before,#section10w::before {
	content: '';
	position: fixed;z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*section1料理テリーヌの設定*/
#section1w {background-color: rgba(255,255,255,0.6);	
	color: #202124;	/*文字色*/
}
#section1w::before {
	background: url('https://okasikyousitu.com/components/images/section1.jpg') no-repeat center center / cover;	/*../images/section1.jpg《サイズ2688x1792》背景画像の読み込み*/
}

/*section2の設定*/
#section2w {
	background-color: rgba(255,255,255,0.7);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #202124 ;	/*文字色*/
}
#section2w::before {
	background: url('https://okasikyousitu.com/components/images/section2.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}

/*section3の設定*/
#section3w {
	background-color: rgba(255,255,255,0.8);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #202124;	/*文字色*/
}
#section3w::before {
	background: url('https://okasikyousitu.com/components/images/section3.jpg') no-repeat center center / cover;	/*../images/section3.jpg背景画像の読み込み*/
}


/*section2の設定*/
#section4w {background-color: rgba(255,255,255,0.5);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #202124;	/*文字色*/
}


#section4w::before {
	background: url('https://okasikyousitu.com/components/images/section4.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}


/*section2の設定*/
#section5w {background-color: rgba(255,255,255,0.7);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #202124;	/*文字色*/
}


#section5w::before {
	background: url('https://okasikyousitu.com/components/images/section5.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}

/*section3の設定折り込みパイ生地のLP*/
#section6w {
	background-color: rgba(255,255,255,0.7);	/*今ネイビー背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #202124;	/*文字色*/
}
#section6w::before {
	background: url('https://creme-cremes.com/components/images/bg-cta10-min.jpg') no-repeat center center / cover;	/*../images/section3.jpg背景画像の読み込み*/
}
/*section2の設定*/
#section7w {
	background-color: rgba(255,255,2559,0.6);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #202124;	/*文字色*/
}
#section7w::before {
	background: url('https://okasikyousitu.com/components/images/section1.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}



/*section2の設定*/
#section8w {
	background-color: rgba(255,255,255,07);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section8w::before {
	background: url('https://okasikyousitu.com/components/images/section2.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}




/*section3の設定*/
#section9w {
	background-color: rgba(255,255,255,0.6);/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section9w::before {
	background: url('https://okasikyousitu.com/components/images/section3.jpg') no-repeat center center / cover;	/*../images/section3.jpg背景画像の読み込み*/
}

/*section2の設定？*/
#section10w {
	background-color: rgba(255,255,255,0.7);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #fff;	/*文字色*/
}
#section10w::before {
	background: url('https://okasikyousitu.com/components/images/section2.jpg') no-repeat center center / cover;	/*../images/section2.jpg背景画像の読み込み*/
}

	/*縦向き端末から見た場合に背景画像をチェンジするサイズ1344x2000*/
	@media (orientation: portrait) {

	#section1w::before {
		background-image: url('https://okasikyousitu.com/components/images/section1_portrait.jpg');
	}
	#section2w::before {
		background-image: url('https://okasikyousitu.com/components/images/section2_portrait.jpg');
	}
	#section3w::before {
		background-image: url('https://okasikyousitu.com/components/images/section3_portrait.jpg');
	}#section4w::before {
		background-image: url('https://okasikyousitu.com/components/images/section4_portrait.jpg');
	}
	
	#section5w::before {
		background-image: url('https://okasikyousitu.com/components/images/section5_portrait.jpg');
	}#section6w::before {
		background-image: url('https://okasikyousitu.com/components/images/section6_portrait.jpg');
	}
  
  
  
  #section7w::before {
		background-image: url('https://okasikyousitu.com/components/images/section3_portrait.jpg');
	}
	#section8w::before {
		background-image: url('https://okasikyousitu.com/components/images/section3_portrait.jpg');
	}#section9w::before {
		background-image: url('https://okasikyousitu.com/components/images/section2_portrait.jpg');
	}
	#section10w::before {
		background-image: url('https://okasikyousitu.com/components/images/section2_portrait.jpg');
	}

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

/*背景色を入れない場合（画像だけを表示したい場合）*/
.no-bgcolor {background-color: transparent !important;}



/*2カラムブロック（※900px未満では１カラム）tp_haken1/sweets.htmlで左右に写真とボタンがはいる解説ブロック
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.c2-sweets {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
}

/*c2内のh2見出し*/
.c2-sweets h2 {
	font-size: 2em;
}

/*小さい端末で見た場合（１カラムになった際）に、画像を常に先頭に持ってくる*/
.c2-sweets .image {
	order: -1;}



  /*---------------------------------------------------------------------------
  ここから下は画面幅900px以上の追加指定
  ---------------------------------------------------------------------------*/
  @media screen and (min-width:900px) {
    /*2カラムブロック
    ---------------------------------------------------------------------------*/
    /*２カラムを囲むブロック*/
    .c2-sweets {
      flex-direction: row;			/*子要素を横並びにする*/
      justify-content: space-between;	/*並びかたの種類の指定*/
      align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
      
      margin-left: -6%;
      margin-right: -6%;
    }
    /*画像ブロック*/
    .c2-sweets .image {
      width: 60%;
    }
    
    /*テキストブロック*/
    .c2-sweets .text {
      width: 40%;
      padding: 0 3%;
    }
    
    /*最初(左)に配置*/
    .c2-sweets .l-sweets {
      order: -1;
    }
    
    /*画像を右側に配置する場合の設定*/
    .c2 .image.r-sweets {
      overflow: hidden;
      /*margin-right: -6%;	画像を画面枠ギリギリまで移動する*/
      border-radius: 100px 0px 0px 100px;	/*角を丸くする指定。左上、右上、右下、左下への順番。*/
    }
    
    /*画像を左側に配置する場合の設定*/
    .c2-sweets .image.l-sweets {
      overflow: hidden;
      /*margin-left: -6%;	画像を画面枠ギリギリまで移動する*/
      border-radius: 0px 100px 100px 0px;	/*角を丸くする指定。左上、右上、右下、左下への順番。*/
    }
    
}
.block {display: block !important;}
/*btnの設定
---------------------------------------------------------------------------*/
a.btn1-sweets, a.btn2-sweets {
	display: inline-block;text-decoration: none;
	letter-spacing: 0.1em;
	border-radius: 3px;
	padding: 5px 30px;
	font-size: 1.2em;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
a.btn1-sweets {
	background: #d596a6;
	color: #444;
}
a.btn2-sweets {
	background: #928ba9;
	color: #fff;
}
.radius {
	border-radius: 100px !important;
}
a.btn1-sweets i, a.btn2-sweets i {
	margin-left: 20px;
}
a:hover.btn1-sweets, a:hover.btn2-sweets {
	transform: scale(1.03);
	filter: brightness(1.1);
}


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


  /*btnの設定
  ---------------------------------------------------------------------------*/
  a.btn1-sweets, a.btn2-sweets {
    padding: 0px 15px;
  }
  a.btn1-sweets i, a.btn2-sweets i {
    margin-left: 10px;
  }
  
  
  /*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
  
  }
  
  
  

/*side2共通-4photo-move home5
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
.side2-4photo-move {
	display: flex;	/*flexボックスを使う指定*/
   flex-direction: column;	/*子要素を縦並びにする*/
   gap: 2rem;		/*マージン的な指定*/
}

/*画像を囲むブロックの設定*/
.side2-image-4photo-move {
   justify-content: center;	/*並びかたの種類の指定*/
}

/*画像の設定*/
.side2-image-4photo-move img {
   width: 40%;	/*幅*/
}

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

   /*ブロック全体の設定*/
   .side2-4photo-move {
	   flex-direction: row;	/*子要素を縦並びから縦並びに変更*/
	   justify-content: space-around;	/*並びかたの種類の指定*/
   }

   /*画像を囲むブロックの設定*/
.side2-image-4photo-move {
	   display: flex;	/*flexボックスを使う指定*/
	   flex-direction: column;	/*子要素を縦並びにする*/
	   flex: 1;				/*幅*/
   }

   /*画像の設定*/
   .side2-image-4photo-move img {
	   width: 100%;	/*幅*/
   }

   /*テキストブロックの設定*/
   .side2-text-4photo-move {
	   flex: 3;		/*幅*/
	   display: flex;	/*flexボックスを使う指定*/
	   flex-direction: column;	/*子要素を縦並びにする*/
   }

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


/*side2の追加設定
---------------------------------------------------------------------------*/
/*photo1の追加設定*/
.side2-4photo-move .photo1 {
   transform: rotate(12deg);	/*回転*/
}

/*photo2の追加設定*/
.side2-4photo-move .photo2 {
   transition-delay: 1s;		/*1秒遅れてスタート*/
   transform: rotate(-2deg);	/*回転*/
}

/*photo3の追加設定*/
.side2-4photo-move .photo3 {
   transition-delay: 1.5s;		/*1.5秒遅れてスタート*/
   transform: rotate(-8deg);	/*回転*/
}

/*photo4の追加設定*/
.side2-4photo-move .photo4 {
   transition-delay: 2s;		/*2秒遅れてスタート*/
   transform: rotate(4deg);	/*回転*/
}


/*photo（写真風スタイル）
---------------------------------------------------------------------------*/
.photo-4photo-move {
   padding: 0.7vw;		/*写真の縁にあたる部分*/
   background: #fff;	/*縁の部分の色*/
   color: #111;		/*文字色*/
   box-shadow: 5px 5px 10px rgba(0,0,0,0.2);	/*写真につける影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%出た状態。*/
}
.photo-4photo-move a {color: inherit;}


/*photo-circle（不規則な円形にくり抜くスタイル）
---------------------------------------------------------------------------
以下のurl（※海外の外部サイト）で簡単にborder-radiusの値を取得できます。
https://9elements.github.io/fancy-border-radius/
---------------------------------------------------------------------------*/
.photo-circle-4photo-move{
   border-radius: 57% 43% 62% 38% / 44% 56% 44% 56%;
}


/*btn1
---------------------------------------------------------------------------*/
.btn1-4photo-move a {
   display: inline-block;text-decoration: none;
   background: #111;		/*背景色*/
   border: 2px solid #111;	/*枠線の幅、線種、色*/
   color: #fff !important;			/*文字色*/
   border-radius: 100px;	/*角丸のサイズ。適当に大きければOK。*/
   padding: 0.2em 3em;		/*上下、左右へのボタン内の余白*/
   text-align: center;		/*テキストを中央に*/
}
.btn1-4photo-move.block a {
   display: block;
}
/*マウスオン時*/
.btn1-4photo-move a:hover {
   background: #fff;	/*背景色*/
   color: #111 !important;		/*文字色*/
}

/*side2共通-4photo-move home5理論ページ用
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
.side2-4photo-move-for-contents {
	display: flex;	/*flexボックスを使う指定*/
   flex-direction: column;	/*子要素を縦並びにする*/
   gap: 2rem;		/*マージン的な指定*/
}

/*画像を囲むブロックの設定*/
.side2-image-4photo-move-for-contents {
   justify-content: center;	/*並びかたの種類の指定*/
}

/*画像の設定*/
.side2-image-4photo-move-for-contents img {
   width: 40%;	/*幅*/
}

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

   /*ブロック全体の設定*/
   .side2-4photo-move-for-contents {
	   flex-direction: row;	/*子要素を縦並びから縦並びに変更*/
	   justify-content: space-around;	/*並びかたの種類の指定*/
   }

   /*画像を囲むブロックの設定*/
.side2-image-4photo-move-for-contents {
	   display: flex;	/*flexボックスを使う指定*/
	   flex-direction: column;	/*子要素を縦並びにする*/
	   flex: 1;				/*幅*/
   }

   /*画像の設定*/
   .side2-image-4photo-move-for-contents img {
	   width: 100%;	/*幅*/
   }

   /*テキストブロックの設定*/
   .side2-text-4photo-move-for-contents {
	   flex: 3;		/*幅*/
	   display: flex;	/*flexボックスを使う指定*/
	   flex-direction: column;	/*子要素を縦並びにする*/
   }

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


/*side2の追加設定
---------------------------------------------------------------------------*/
/*photo1の追加設定*/
.side2-4photo-move-for-contents .photo1 {
   transform: rotate(12deg);	/*回転*/
}

/*photo2の追加設定*/
.side2-4photo-move-for-contents .photo2 {
   transition-delay: 1s;		/*1秒遅れてスタート*/
   transform: rotate(-2deg);	/*回転*/
}

/*photo3の追加設定*/
.side2-4photo-move-for-contents .photo3 {
   transition-delay: 1.5s;		/*1.5秒遅れてスタート*/
   transform: rotate(-8deg);	/*回転*/
}

/*photo4の追加設定*/
.side2-4photo-move-for-contents .photo4 {
   transition-delay: 2s;		/*2秒遅れてスタート*/
   transform: rotate(4deg);	/*回転*/
}


/*photo（写真風スタイル）
---------------------------------------------------------------------------*/
.photo-4photo-move-for-contents {
   padding: 0.7vw;		/*写真の縁にあたる部分*/
   background: #fff;	/*縁の部分の色*/
   color: #111;		/*文字色*/
   box-shadow: 5px 5px 10px rgba(0,0,0,0.2);	/*写真につける影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%出た状態。*/
}
.photo-4photo-move-for-contents a {color: inherit;}


/*photo-circle（不規則な円形にくり抜くスタイル）
---------------------------------------------------------------------------
以下のurl（※海外の外部サイト）で簡単にborder-radiusの値を取得できます。
https://9elements.github.io/fancy-border-radius/
---------------------------------------------------------------------------*/
.photo-circle-4photo-move-for-contents {
   border-radius: 57% 43% 62% 38% / 44% 56% 44% 56%;
}


/*btn1
---------------------------------------------------------------------------*/
.btn1-4photo-move-for-contents a {
   display: inline-block;text-decoration: none;
   background: #111;		/*背景色*/
   border: 2px solid #111;	/*枠線の幅、線種、色*/
   color: #fff !important;			/*文字色*/
   border-radius: 100px;	/*角丸のサイズ。適当に大きければOK。*/
   padding: 0.2em 3em;		/*上下、左右へのボタン内の余白*/
   text-align: center;		/*テキストを中央に*/
}
.btn1-4photo-move-for-contents.block a {
   display: block;
}
/*マウスオン時*/
.btn1-4photo-move-for-contents a:hover {
   background: #fff;	/*背景色*/
   color: #111 !important;		/*文字色*/
}





/*FAQ/tp_housebuilder1
---------------------------------------------------------------------------*/
/*質問*/
.faq-for-contents dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	text-indent: -2rem;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq-for-contents dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
    content: "\f059";	/*アイコンのコード*/
	padding-right: 1rem;	/*アイコンとテキストとの間のスペース*/
}

/*回答*/
.faq-for-contents dd {
	padding: 5px 1rem 30px 3rem;		/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/*詳細ページ（bland_item.html）で使っている「前のページに戻る」ボタン
---------------------------------------------------------------------------*/
.btn-back {
	text-align: center;
}
.btn-back a {
	text-decoration: none;display: inline-block;
	padding: 0.5rem 2rem;	/*ボタン内の余白。上下、左右。*/
	border-radius: 30px;	/*角を丸くする指定。ある程度大きければ適当でいいです。*/
	background: #000;		/*背景色*/
	color: #fff;			/*文字色*/
}
.btn-back a::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指定*/
	content: "\f0d9";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合があります*/
	opacity: 0.5;			/*色を50%だけ出す*/
}

/*メッセージテキストtp_wa2_white_black*/
.bg-tategaki-wa .message-tategaki {
	margin: 5vw 0 5vw 50px;	/*上下、左右へ、ボックスの外側にとるスペース*/
  font-family: "Shippori Mincho", "Hiragino Mincho Pro", 
  "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
 
  font-size: 1.5vw;			/*文字サイズ。画面幅100% = 100vwです。*/
  align-self: right;			/*center天地の中央に*/
  writing-mode: vertical-rl;	/*縦書きの指定。*/
  text-orientation: upright;	/*文字の向き*/	padding: 1.2em;	/*余白*/
}/*トップページの背景画像*/
.bg-tategaki-wa {
	background-image: url("https://template-party.com/template/tp_wa2/tp_wa2_white_black/images/bg1.png");	/*背景画像の読み込み*/
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
}

/*メッセージテキストtp_wa2_black_black/*/
.bg-tategaki-wa1 .message-tategaki1 
{margin: 5vw 0 5vw 50px;	/*上下、左右へ、ボックスの外側にとるスペース*/
  font-family: "Shippori Mincho", "Hiragino Mincho Pro",
   "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
   font-size: 1.5vw;			/*文字サイズ。画面幅100% = 100vwです。*/
  align-self: right;			/*天地の中央に*/color: #999;			/*文字色*/
  writing-mode: vertical-rl;	/*縦書きの指定。*/
  text-orientation: upright;	/*文字の向き*/	padding: 1.2em;	/*余白*/
}/*トップページの背景画像*/
.bg-tategaki-wa1 {background: #6b6351;		/*背景色*/
	background-image: url("https://template-party.com/template/tp_wa2/tp_wa2_black_black/images/bg1.png");	/*背景画像の読み込み*/
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
}

/*tp_cafe16/メニュー（menu）トップに講座名専用のh2
-------------------------------------1 decorolecake--------------------------------------*/
/*各ボックスの設定*/
#contents .menu1 {
	margin: 0 10px 30px;	/*上、左右、下へのボックスの外側に空けるスペース*/
	line-height: 1.5;		/*行間をすこし狭く。デフォルトは冒頭のbody内にあります。*/
	font-size: 30px;		/*文字サイズ*/
	text-shadow: 1px 1px #000;	/*テキストの影。右に、下に、色。*/
}
#contents .menu1 a {
	display: block;text-decoration: none;
	padding: 20px;	/*ボックス内の余白*/
	background: rgba(0,0,0,0.4);	/*背景色。0,0,0は黒のことで0.4は色が40%でた状態のこと。*/
	color: #fff;	/*文字色*/
	border: 15px solid rgba(0,0,0,0.2);	/*枠線の幅、線種、色。*/
}
/*マウスオン時*/
#contents .menu1 a:hover {
	background: transparent;	/*上で指定したbackgroundを透明にする。つまり、下で読み込んでいる写真が鮮明に出ます。*/
}
/*ボックス内の段落タグ設定*/
#contents .menu1 p {
	padding: 0px;
}
/*ボックス内の段落タグ内のspanタグ*/
#contents .menu1 p span {
	display: block;
	font-size: 13px;	/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔をすこしだけ広く*/
}
/*ボックス内の写真(背景画像)の読み込み。コース。*/
#contents .course-decorolecake {
	background: url(https://creme-cremes.com/img/d13.jpg) no-repeat center center / cover;
}
/*ボックス内の写真(背景画像)の読み込み。ランチ。これから*/
#contents .course- {
	background: url(../images/bg_lunch.jpg) no-repeat center center / cover;
}
/*ボックス内の写真(背景画像)の読み込み。テイクアウト。これから*/
#contents .course- {
	background: url(../images/bg_takeout.jpg) no-repeat center center / cover;
}



/*よく頂く質問ブロックtp_lp1/
---------------------------------------------------------------------------*/
/*faqブロック全体*/
.faq-pr {
	background: #5E5C5A;	/*背景色*/
	color: #fff;			/*文字色*/
	position: relative;
}

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

	.faq-pr {
		display: flex;
		flex-direction: row-reverse;	/*左右の並びをデフォルトと逆に*/
		justify-content: space-between;
	}

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


/*faq内のh2見出し*/
.faq-pr h2 {
	margin: 0;padding: 0;
	font-size: 2rem;	/*文字サイズを2倍*/
	font-weight: 200;	/*文字を細く*/
	letter-spacing: 0.4em;	/*文字間隔を広くする*/
}

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

	/*faq内のh2見出し*/
	.faq-pr h2 {
		writing-mode: vertical-lr;	/*日本語は縦書き。英語は90度回転。*/
		margin-right: 18vw;	/*右側に画面18%程度のスペースを空ける。そこに英語の飾り文字を入れる為。*/
	}

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


/*右側の英語の飾り文字*/
.faq-pr h2 .kazari-pr {
	line-height: 1;
	font-size: 0.9rem;	/*文字サイズ90%*/
}

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

	/*右側の英語の飾り文字  denai*/
	.faq-pr h2 .kazari-pr {
		font-size: 20vw;	/*文字サイズ*/
		position: absolute;
		right: 0px;
		top: 8vw;
    	color: rgba(255,255,255,0.05);	/*文字色。255,255,255は白のことで、0.05は色が5%出た状態。*/
	}

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


/*質問*/
.faq-pr dt {
	font-size: 1.3rem;	/*文字サイズ130%*/
	border-top: 1px solid rgba(255,255,255,0.2);	/*上の線の幅、線種、色。255,255,255は白のことで、0.2は色が20%出た状態。*/
	padding: 2rem 0 1rem 0;	/*上、右、下、左への余白*/
}

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

	.faq-pr dt {
		padding: 2rem 2rem 1rem 2rem;	/*上、右、下、左への余白*/
	}

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


/*回答*/
.faq-pr dd {
	padding: 0 0 2rem 0;	/*上、右、下、左への余白*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

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

	.faq-pr dd {
		padding: 0 2rem 2rem 2rem;	/*上、右、下、左への余白*/
	}

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


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

	/*左側のテキストブロック*/
	.faq-pr .text-pr {
		width: 50%;	/*幅*/
	}
	
	}/*追加指定ここまで*/

/*btn3*/
.btn3-pr {
	text-align: right;	/*テキストを右寄せ*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}
.btn3-pr a {
	display: inline-block;text-decoration: none;
	color: inherit;
	position: relative;
	padding-right: 5rem;	/*矢印のアイコンと重ならないように余白をとる*/
}

/*btn3の矢印のアイコン設定*/
.btn3-pr a::after {
	content: "";
	background: url("https://template-party.com/template/tp_lp1/tp_lp1_wedding/images/arrow1.svg") no-repeat right center / 100px;	/*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
	display: block;
	position: absolute;
	right: 0px;
	bottom: -1rem;		/*下からの配置場所*/
	width: 50px;		/*アイコンの幅。ここを変更する場合は、上と下にあるbackgroundの100pxの数値も調整します。*/
	height: 50px;		/*アイコンの高さ*/
	border-radius: 50%;	/*円形にする指定。この１行を削除すれば正方形になります。*/
	text-align: center;
	transition: 0.3s;		/*hover時に切り替えをなめらかにする*/
	border: 1px solid #eea882;	/*枠線の幅、線種、色*/
}

/*btn3の矢印のマウスオン時*/
.btn3-pr a:hover::after {
	background-color: var(--primary-color);	/*背景色を冒頭のprimary-colorにする*/
	background-position: left center;		/*矢印画像の入れ替え。画像の左側を読み込みます。*/
}

/*背景色が暗い所で使う場合*/
.btn3-pr.white {
	color: #fff;	/*文字色*/
}
.btn3-pr.white a::after {
	background: url("https://template-party.com/template/tp_lp1/tp_lp1_wedding/images/arrow1_white.svg") no-repeat right center / 100px;	/*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
.btn3-pr.white a:hover::after {
	background-color: #fff;				/*背景色を白に*/
	background-position: left center;	/*矢印画像の入れ替え。画像の左側を読み込みます。*/
}

/*縦書き用の設定tp_lp1
---------------------------------------------------------------------------*/
/*ボックス全体*/
.padding-lr0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.title-bg-h2-tate-yoko {
	display: flex;				/*flexボックスを使う指定*/
	justify-content: center;	/*並びかたの種類の指定*/
}

/*ボックス内のh2*/
.title-bg-h2-tate-yoko h2 {
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*縦並びにする指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
	padding-bottom: 3vw;
}

/*縦書きにする指定*/
.title-bg-h2-tate-yoko h2 .tate {
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 2rem;
}

/*横書きで使う際の指定。※縦書きを横書きにする為の指定ではないのでご注意下さい。*/
.title-bg-h2-tate-yoko h2 .yoko {
	font-size: 0.9rem;	/*文字サイズ90%*/
	margin-bottom: 3vw;	/*下に空けるスペース*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	opacity: 0.5;	/*透明度50%*/
}


/*h2見出し（共通）tp_lp1*//*
---------------------------------------------------------------------------*/
/*調整用スタイル並べ替え*/
.order1 {
	order: 1;	/*orderは数字の小さな順番に並びます。デフォルトは0なので、それより後ろに表示させたいブロックに使います。（※flex内で使用）*/
}
.title-bg-h2-tate-yoko h2 .tate{/*上野に追加%。*/
	margin: 0;padding: 0;
	font-size: 2.4rem;		
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	margin-bottom: 5vw;		/*下にスペースを空ける*/
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
}

/*h2見出しのサブテキスト（sub-text）*/
h2 span.sub-text {
	display: inline-block;
	border-top: 1px solid #ffd3bb;	/*上の線の幅、線種、varは色のことで冒頭のprimary-inverse-colorを読み込みます。*/
	font-size: 0.9rem;		/*文字サイズ80%*/
	opacity: 0.6;			/*透明度。色が60%出た状態。*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	padding-top: 2rem;		/*上に空ける余白。ラインとの間の余白調整です。お好みで。*/
}

/*見出し上のラインを消すスタイル*/
h2.no-line span.sub-text {
	border: none;
	padding-top: 0;
}


/*tableっぽいdl（この講座ができた理由「お知らせ」「店舗情報」「メニュー（menu.html）」）tp_sh1/
---------------------------------------------------------------------------*/
dl.table-dekitariyuu {
	display: grid;
	grid-template-columns: 1px auto;	/*dtとddを横並びにし、dtの幅を100pxに、残りは自動。*/
	margin-bottom: 50px;
	line-height: 2;
}
dl.table-dekitariyuu dt,
dl.table-dekitariyuu dd {
	padding: 1rem;
}

/*menu.htmlのテキストのみのお品書きに使用right*/
dl.table-dekitariyuu.reverse {
	grid-template-columns: auto 100px;	/*dtとddを横並びにし、dtの幅を自動に、残りは10px。*/
}
dl.table-dekitariyuu.reverse dd {
	text-align: center;
}
/*「店舗情報」「マップ」「SNSアイコン」を囲むブロック*/
.shop-data-dekitariyuu {
	border-radius: 500px 500px 0px 0px;	/*角を丸くする指定。左上、右上、右下、左下への順番。500pxの数字は適当に大きければOK。*/
	background: url('https://creme-cremes.com/components/images/table-dekitariyuu-bg-min.jpg') no-repeat center center / cover;	/*背景画像の読み込み*/
	color: #202124;	/*文字色*/
	padding: 100px 50px 50px;	/*上、左右、下へのボックス内余白*/
}

/*「所在地」などが記載されているtableっぽいブロック（基本設定はこの上の「tableっぽいdl（「お知らせ」「店舗情報」共通）」で行っています。）*/
.shop-data-dekitariyuu dl.table {
	border-top: 1px solid rgba(255,255,255,0.3);	/*枠線の幅、線種、255,255,255は白のことで0.3は色が30%出た状態。下と揃えておく。*/
}
.shop-data-dekitariyuu dl.table dt,
.shop-data-dekitariyuu dl.table dd {
	border-bottom: 1px solid rgba(255,255,255,0.3);	/*枠線の幅、線種、255,255,255は白のことで0.3は色が30%出た状態。上と揃えておく。*/
}


/*main
------------------------------------------------------------faq---------------*/
/*h2(見出し)要素*/
h2.type18 {
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-size: 3rem;		/*文字サイズ。基準の3倍の大きさに。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	color: #eea882;	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}


/*h2内の小文字部分*/
h2.type18 .hosoku {
	display: block;font-weight: normal;
	font-size: 0.3em;	/*親要素の40%のサイズに*/
}



/*h3(見出し)要素*/
main h3.type13 {
	display: inline-block;
	border-bottom: 3px solid #000000;	/*下線の幅、線種、varは色のことで、css冒頭で指定しているtext-colorを読み込みます*/
}

  /*FAQの失敗と解決方法マカロン・
  -------------------------------------------------------------faq-causes-and-solutions--------------*/
  /*FAQボックス全体*/
  .faq-causes-and-solutions {
    padding: 0 5px;	/*上下、左右へのボックス内の余白*/
  }
  
  /*質問*/
  .faq-causes-and-solutions dt {
    width: 80%;			/*幅*/text-align: center;		/*テキストのセンタリング*/
    line-height: 1.5;	/*行間*/font-size: 24px;	/*文字サイズ*/color: #000;	/*文字色*/
    margin: 0px auto 20px;	/*上、左右0.5%、下へのボックスの外側へ空けるスペース*/

    border-radius: 3px;		/*枠を角丸にする指定*/
    margin-bottom: 20px;	/*下に空けるスペース*/
    background: #fff;		/*背景色*/
    border: 1px solid #8f8dc9;	/*枠線の幅、線種、色*/
    text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
    padding: 4px 1em 4px 1em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
  }
  
  

/*件数のテキスト。※list2内でspanタグで囲った場合。*/
.faq-causes-and-solutions dt span {
	display: block;font-size: 13px;	/*文字サイズ*/
	color: #202124;	
}

 
  /*回答*/
  .faq-causes-and-solutions dd {
    padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
  }
  
  /*opencloseを適用した要素のカーソル*/
  .openclose {
    cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
  }
  
  .faq-causes-and-solutions dt span {text-indent: 0;}
  
  
  /*テーブル-check-sheet
  ---------------------------------------------------------------------------*/
  /*テーブル１行目に入った見出し部分（※caption）*/
  .ta-check-sheet caption {
    font-weight: bold;		/*太字に*/
    padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
    background: #eee;		/*背景色*/
    margin-bottom: 15px;	/*下に空けるスペース*/
  }
  
  /*ta1テーブルブロック設定*/
  .ta-check-sheet {
    border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
    width: 100%;
    margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
  }
  
  /*tr（１行分）タグ設定*/
  .ta-check-sheet tr {
    border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
  }
  
  /*th（左側）、td（右側）の共通設定*/
  .ta-check-sheet th, .ta-check-sheet td {
    padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
    word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
  }
  
  /*th（左側）のみの設定*/
  .ta-check-sheet th {
    width: 30%;			/*幅*/
    text-align: right;	/*left左よせにする*/
  }
  
  
  
  
  
  /*---------------------------------------------------------------------------
  ここから下は画面幅900px以上の追加指定
  ---------------------------------------------------------------------------*/
  @media screen and (min-width:900px) {
    /*テーブル
    ---------------------------------------------------------------------------*/
    /*テーブル１行目に入った見出し部分（※caption）*/
    .ta-check-sheet caption {
      padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
    }
    
    /*th（左側）、td（右側）の共通設定*/
    .ta-check-sheet th, .ta-check-sheet td {
      padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
    }
    
    /*th（左側）のみの設定*/
    .ta-check-sheet th {
      width: 20%;		/*幅*/
    }
  }
  /*btn5 sweets.html
---------------------------------------------------------------------------*/
.btn5-container-parts1 {position: relative;}
a.btn5-parts1 {
	text-decoration: none;display: inline-block;
	background: linear-gradient(#ffd3bb, #eea882);/*背景グラデーション*/
	color: #202124;		/*文字色*/
	padding: 1rem 3rem;	/*ボタン内の余白。上下、左右へ。*/
	font-size: 1.3rem;	/*文字サイズを130%*/
	border-radius: 5px;	/*角を少しだけ丸くする*/
}

/*マウスオン時に少しだけ大きく*/
a.btn5-parts1:hover {
	transform: scale(1.02);
}

/*ふきだし*/
.btn5-container-parts1 .fukidasi-parts1 {
	background: #fff;	/*背景色*/color: #202124;	
	border: 2px solid #eea882;	/*枠線の幅、線種、色*/
	padding: 0.2rem 2rem;	/*ふきだし内の余白。上下、左右へ。*/
	border-radius: 100px;	/*角を丸くする指定。大きめであれば適当でOK。*/
	position: absolute;
	top: -30px;	/*ふきだしの位置の設定*/
    left: 50%;
    transform: translateX(-50%);
	box-shadow: 0px 3px 10px rgba(0,0,0,0.2);	/*ふきだしの影。右へ、下へ、ぼかす量、0,0,0は黒色のことで0.2は色が20%出た状態*/
}

/*ふきだしの下の三角形の設定*/
.btn5-container-parts1 .fukidasi-parts1::before {
    content: "";
    position: absolute;
    bottom: -8px;	/*配置場所*/
    left: 50%;
    transform: translateX(-50%) rotate(315deg);
    width: 10px;	/*三角形の幅*/
    height: 10px;	/*三角形の高さ*/
    background: #fff;	/*三角形の色*/
    border-left: 2px solid #eea882;		/*枠線の幅、線種、色*/
    border-bottom: 2px solid #eea882;	/*枠線の幅、線種、色*/
}

/*角をまんまるにする*/
.btn5-parts1.border-radius-parts1 {
	border-radius: 100px;
}

/*ふきだしを使う場合に上に食い込んでしまうので、それを回避するためのスタイル*/
.btn5-container-parts1.mt-parts1 {
	margin-top: 40px;
}


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

   /*btn5 sweets.html
---------------------------------------------------------------------------*/
.btn5-container-parts1 {position: relative;}
a.btn5-parts1 {
		font-size: 13px;	/*文字サイズを130%*/
	padding: 1rem 1rem;	/*ボタン内の余白。上下、左右へ。*/
}
/*ふきだし*/
.btn5-container-parts1 .fukidasi-parts1 {	font-size: 11px;	/*文字サイズを130%*/
}

}



/*list-yoko-scroll-partsyoko-scroll
手動で横スクロールするタイプのボックスです。
---------------------------------------------------------------------------*/
.list-yoko-scroll-parts * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.list-yoko-scroll-parts {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	/* Firefox用 */
	scroll-snap-type: x mandatory; /* スナップスクロールを有効にする */
}
.list-yoko-scroll-parts::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge用 */
}

/*ブロック内の１個あたり*/
.list-yoko-scroll-parts .list-parts {
	width: 60%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding-right: 1rem;		/*ブロック内の右側に余白。1文字分。*/
	position: relative;
	display: flex;
	flex-direction: column;
}

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

	/*ブロック内の１個あたり*/
	.list-yoko-scroll-parts .list-parts {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
		padding-right: 2rem;	/*ブロック内の右側に余白。２文字分。*/
	}

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


/*テキストブロック*/
.list-yoko-scroll-parts .list-parts .text-parts {
	flex: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.5;	/*行間*/
}


/*画面右側の側面にある縦長ボタン（ご予約）tp_lp1/
---------------------------------------------------------------------------*/
#btn-special-1day {padding: 0;margin: 0;}
#btn-special-1day a {
	display: block;text-decoration: none;
	position: fixed;z-index: 100;
	right: 0px;	/*右からの配置場所*/
	top: 20vw;	/*上からの配置場所*/
	writing-mode: vertical-rl;
	text-orientation: upright;
	/*background: linear-gradient(#906f53, #6b5038);背景グラデーション*/
	background: linear-gradient(#ec9347, #d36b12);
	color: #f6ebd2;	/*文字色*/
	padding: 2rem 1rem;	/*上下、左右へのボタン内の余白*/
	border-radius: 3px 0px 0px 3px;	/*角を丸くする指示。左上、右上、右下、左下への順番。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*アイコンの下の余白*/
#btn-special-1day i {padding-bottom: 1rem;}


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


  #btn-special-1day a {
       right: 0px;	/*右からの配置場所*/
    top: 30vw;	/*上からの配置場所*/
     }

}

/*上部のメインメニューtpcafe11PC横６SP横３
---------------------------------------------------------------------------*/
nav#menubar-maru ul li {
	float: left;	
	text-align: center;	
	width: 15%;		
	margin-left: 1.5%;	
	font-size: 16px;		
}
nav#menubar-maru ul li img {
	width: 90%;		/*上の15%の幅に対しての写真幅*/
	height: auto;
	-webkit-box-shadow: 1px 2px 10px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgba以降の3つの数字がRGBでの色（この場合は黒）。最後の小数点の数字が透明度30%の事。*/
	box-shadow: 1px 2px 10px rgba(0,0,0,0.3);			/*同上*/
	border: 2px solid #FFF;	/*枠線の幅、線種、色*/
	border-radius: 50%;		/*角丸の設定*/
	margin-bottom: 10px;	/*写真とメニューテキストの間にとるスペース*/
}
/*各メニューの写真部分のマウスオン時の設定*/
nav#menubar-maru ul li:hover img{
	border: 7px solid #eef7e7;	/*枠線の幅、線種、色*/
}
nav#menubar-maru ul li a {
	text-decoration: none;
	color: #202124;	
}

nav#menubar-maru ul li a span {
	color: #202124;	/*文字色*/
	display: block;
	word-wrap: break-word;
	border-radius: 100px;	/*角丸の設定。大き目に設定しておけばOK。*/
	line-height: 1;			/*高さ*/
	background: rgba(255,211,187,0.3);	/*背景色。左の3つの数字がRGBでの色。0,0,0は黒。最後の小数点の数字が透明度。ここでは30%。*/
	margin-bottom: 30px;	/*下のコンテンツブロックとの余白*/
	padding: 4px;
}
nav#menubar-maru ul li a:hover span {
	color: #FF3;	/*文字色*/
	background: rgba(0,0,0,0.6);	/*背景色。左の3つの数字がRGBでの色。0,0,0は黒。最後の小数点の数字が透明度。ここでは60%。*/
}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	
	nav#menubar-maru ul li {
		float: left;		
		text-align: center;	
		width: 29%;			
		margin-left: 4%;	
		font-size: 12px;	
	}}

 
  /*上部のメインメニューtpcafe11PC横６SP横３パンの基本のレシピなどsp pcとも横１で2025/5
  ---------------------------------------------------------------------------*/
  nav#menubar-maru1 ul li {
    float: left;	
    text-align: center;	
    width: 90%;		
    margin-left: 1.5%;	
    font-size: 18px;		
  }
  nav#menubar-maru1 ul li img {
    width: 90%;		/*上の15%の幅に対しての写真幅*/
    height: auto;
    -webkit-box-shadow: 1px 2px 10px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgba以降の3つの数字がRGBでの色（この場合は黒）。最後の小数点の数字が透明度30%の事。*/
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);			/*同上*/
    border: 2px solid #FFF;	/*枠線の幅、線種、色*/
    border-radius: 50%;		/*角丸の設定*/
    margin-bottom: 10px;	/*写真とメニューテキストの間にとるスペース*/
  }
  /*各メニューの写真部分のマウスオン時の設定*/
  nav#menubar-maru1 ul li:hover img{
    border: 7px solid #eef7e7;	/*枠線の幅、線種、色*/
  }
  nav#menubar-maru1 ul li a {
    text-decoration: none;
    color: #202124;	
  }
  
  nav#menubar-maru1 ul li a span {
    color: #202124;	/*文字色*/
    display: block;
    word-wrap: break-word;
    border-radius: 100px;	/*角丸の設定。大き目に設定しておけばOK。*/
    line-height: 1;			/*高さ*/
    background: rgba(255,211,187,0.3);	/*背景色。左の3つの数字がRGBでの色。0,0,0は黒。最後の小数点の数字が透明度。ここでは30%。*/
    margin-bottom: 30px;	/*下のコンテンツブロックとの余白*/
    padding: 4px;
  }
  nav#menubar-maru1 ul li a:hover span {
    color: #FF3;	/*文字色*/
    background: rgba(0,0,0,0.6);	/*背景色。左の3つの数字がRGBでの色。0,0,0は黒。最後の小数点の数字が透明度。ここでは60%。*/
  }
  /*画面幅800px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:800px){
    
    nav#menubar-maru1 ul li {
      float: left;		
      text-align: center;	
      width: 87%;			
      margin-left: 4%;	
      font-size: 15px;	
    }}
    
  
    
    
    
    
    

/*トップページ内「更新情報・お知らせ」ブロック-----------------------------*/
/*newブロックの設定*/



    /*box1　　tp_esthe4
  ---------------------------------------------------------------------------*/
  .box1-esthe4 {
	  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%出た状態。*/
	  padding: 20px 30px;					/*上下、左右へのボックス内の余白*/margin: 30px 20px 15px;
	  border: 1px solid #fff;				/*枠線の幅、線種、色*/
	  border-radius: 5px;					/*角を丸くする指定*/
	  text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;	/*テキストの影。*/
  }
  
  /*トップページの「お知らせ」で使っているh2*/
  .box1-esthe4 h2 {
	  margin: 0 0 10px;
  }
  
  
  /*「お知らせ」ブロックnew
  ---------------------------------------------------------------------------*/
  /*お知らせブロック*/
  #new-esthe4 {
	  margin: 0;
	  display: flex;			/*flexボックスを使う指定*/
	  flex-wrap: wrap;		/*折り返す指定*/
	  padding: 10px 20px;		/*上下、左右へのボックス内の余白*/
	  height: 30em;			/*ブロックの高さ。emは１文字分の事なのですが、他からの影響も関係するので必ずしも10文字分という事ではありません。*/
	  overflow: auto;			/*ブロックの高さを超える内容量になった場合に自動でスクロールバーを出す*/
	  margin-bottom: 20px;	/*下へのブロックの外への余白*/
  }
  

  /*日付(dt)、記事(dd)共通設定*/
  #new-esthe4 dt {font-weight: bold;		/*太字にする*/
	  padding: 2px 0;	/*上下、左右へのボックス内の余白*/
  }
  

  /*日付(dt)、記事(dd)共通設定*/

  #new-esthe4 dd {
	  padding: 2px 0;	/*上下、左右へのボックス内の余白*/
  }





  /*日付(dt)設定*/
  #new-esthe4 dt {
	  width: 8em;	/*幅。8文字(em)分。*/
  }
  
  /*記事(dd)設定*/
  #new-esthe4 dd {
	  width: calc(100% - 8em);	/*「8em」は上の「#new dt」のwidthの値です。*/
  
	  border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
  }
  
  
  
  /*---------------------------------------------------------------------------
  ここから下は画面幅600px以下の追加指定
  ---------------------------------------------------------------------------*/
  @media screen and (max-width:600px) {/*box1
	  ---------------------------------------------------------------------------*/
	  .box1-esthe4 {
		  padding: 10px 20px;					/*上下、左右へのボックス内の余白*/
	  }}
  
  

  
  /*画面幅480px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:480px){
	  /*日付(dt)設定*/
	  #new-esthe4 dt {
		  width: 6em;	/*幅。8文字(em)分。*/	font-size: 0.6em;	
	  }
  
  
  /*記事(dd)設定*/
  #new-esthe4 dd {padding: 2px 2px;	/*上下、左右へのボックス内の余白*/
	  width: calc(100% - 6em);	/*「6em」は上の「#new dt」のwidthの値です。*/
	  line-height: 1.4;
	  border-bottom: 1px solid #ffffff;	/*下線の幅、線種、色*/
  }}



  /*日付の横のマーク（共通設定）tp_petshop1*/
  #new-esthe4 dt span {
	  display: inline-block;	/*表示させる*/
	  width: 7em;				/*幅。7文字(em)分。*/
	  background: #999;		/*背景色*/
	  color: #fff;			/*文字色*/
	  font-size: 0.8em;		/*文字サイズを80%に。*/
	  text-align: center;		/*文字をセンタリング*/
	  margin-right: 1em;		/*アイコンの右側に空けるスペース*/
	  align-self: flex-start;	/*高さを間延びさせない指定*/
	  line-height: 1.8;		/*行間を少し狭く*/
	  position: relative;top: 0.4em;	/*上下の配置バランスの微調整*/
	  border-radius: 2px;		/*角を丸くする指定*/
  }
  
  /*icon-bg1設定。サンプルテンプレートでは「●●●重要」と書いてあるマーク*/
  #new-esthe4 dt span.icon-bg1 {
	  background: #cd0000;	/*背景色*/
  }
  
  /*icon-bg2設定。サンプルテンプレートでは「●●●サービス」と書いてあるマーク*/
  #new-esthe4 dt span.icon-bg2 {
	  background: #006acd;	/*背景色*/
  }
  


  .news-esthe4 .icon {
    display: inline-block;
    background: #eee;		/*背景色*/
    border: 1px solid #ccc;	/*枠線の幅、線種、色*/
    font-size: 10px;		/*文字サイズ*/
    padding: 0px 10px;		/*上下、左右へのアイコン内の余白*/
    margin-left: 10px;		/*左に空けるスペース。日付との間の余白です。*/
  }
  /*リンク設定した場合*/
  .news-esthe4 .icon a {
    text-decoration: none;display: block;
    color: #000;	/*文字色*/
  }
  /*EVENT*/
  .news-esthe4 .icon.event {
    border: none;			/*枠線を消す設定*/
    background: #ff0000;	/*背景色*/
    color: #fff;			/*文字色*/
  }
  /*MEDIA*/
  .news-esthe4 .icon.media {
    border: none;			/*枠線を消す設定*/
    background: #1908ff;	/*背景色*/
    color: #fff;			/*文字色*/
  }
  /*EVENT、NEWSをリンク設定した場合*/
  .news-esthe4 .icon.event a, .news-esthe4 .icon.media a {
    color: #fff;			/*文字色*/
  }



/*右に回り込みの小さな画像*/
.news-esthe4 dd .img-news {
	width: 100px;	/*画像の幅*/
	float: right;	/*右に回り込み*/
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
/*右に回り込みの小さな画像*/
.news-esthe4 dd .img-news {
	width: 50px;	/*画像の幅*/
}}
/*テキストスライドtp_biz63
----------------------------------------------------------btn15-----------------*/
.text-slide-wrapper {
	overflow-x: hidden;
	margin-top: calc(-1 * (1.6 * var(--space-large)));	/*本来の位置より上にずらす。ずらしたくなければこの１行を削除。*/
}

.text-slide {
	font-family: "Jost", sans-serif;color: #eea882;			/*文字色*/
	font-optical-sizing: auto;
	font-weight: 600;
	display: flex;
	white-space: nowrap;
    font-size: 15vw;	/*文字サイズ*/
	opacity: 0.5;		/*透明度0.05。色が5%出た状態。*/
}

.text-slide span {
	padding: 0 20px;
}

/*FAQtp_gym1_black/
---------------------------------------------------------------------------*/
/*FAQボックスよくある質問全体*/
.faq-pink {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}

/*質問*/
.faq-pink dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background:  #d60a74;		text-align: center;		/*文字をセンタリング*/	/*背景色*/font-size: 30px;color: #ffffff;font-weight: 600;margin: 20px;	
	text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq-pink dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f055";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #ffffff;			/*アイコンの色*/
	padding-right: 1em;		/*アイコンとテキストの間の余白*/
}

/*回答*/
.faq-pink dd {
	padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

.faq-pink dt span {text-indent: 0;}

/*よくあるご質問のh2*/
h2.faq-pink-h2 {
	text-align: center !important;	
	background:  #d60a74;
	font-size: 30px;
	color: #ffffff !important;
	font-weight: 600;	
	margin: 0 0 2rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	font-size: 2.0rem;		/*文字サイズ*/
	padding: 17px 2rem;		/*h2内の余白。上下、左右への順番。*/
	border-radius: 3px;	/*角を丸くする指定。ある程度大きければ適当でいいです。*/
	display: flex;					/*flexを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	
}



/*背景画像が少しずつ上に移動するtp_biz63/faq-macaron.htmlではでるのにSPででない謎
---------------------------------------------------------------------------*/
/*ブロック全体8*/
.bg-slideup-a {
	margin-left: 1vw;
	margin-right: 1vw;
}

section > .bg-slideup-a:first-child {
	margin-top: 8vw;
}

/*画像ボックス*/
.bg-slideup-a .image-a {
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 10vw 20px;	/*上下、左右へのボックス内の余白。画面幅100% = 100vwです。*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 3rem;		/*英語テキストと日本語テキストの間のスペース。３文字分。*/
	color: #fff;	/*文字色*/
}

/* 英語テキスト */
.en-text-a {
	writing-mode: horizontal-tb;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/* 日本語縦書きテキスト */
.jp-text-a {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

/*制作実績ブロックの画像指定*/
.bg-slideup-a .image-a {
	background-image: url("https://template-party.com/template/tp_biz63/tp_biz63_skyblue1/images/bg_works.jpg");	/*サイズ3276x3276正方形背景画像の指定*/
}

.mb-space-large {margin-bottom: 3vw !important;}



/*スライドアップの装飾画像
tp_lp2/faq-macaron.htmlではでるのにSPででない謎
---------------------------------------------------------------------------*/
/*画像ボックス*/
.bg-slideup-b {
    background-image: url("https://template-party.com/template/tp_lp2/tp_lp2_kawaii_white_red_animation/images/6.jpg");	/*2708x4832背景画像の読み込み*/
    background-repeat: no-repeat;
    background-size: cover;
	width: 100%;
	height: 60vh;	/*高さ。画面の高さの50%になる設定ですがお好みで。*/
	border-radius: 15vw 15vw 15vw 15vw;	/*角を丸くする指定。左上、右上、右下、左下への順番。*/
}



/*背景画像が少しずつ上に移動するtp_biz63/アレンジfaq-macaron.htmlではでるのにSPででない謎
---------------------------------------------------------------------------*/
/*ブロック全体8*/
.bg-slideup-c {
	margin-left: 0.1vw;
	margin-right: 0.1vw;
}

section > .bg-slideup-c:first-child {
	margin-top: 8vw;
}

/*画像ボックス*/
.bg-slideup-c .image-c {
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 10vw 20px;	/*上下、左右へのボックス内の余白。画面幅100% = 100vwです。*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;		/*英語テキストと日本語テキストの間のスペース。３文字分。*/
	color: #fff;	/*文字色*/
}

/* 英語テキスト */
.en-text-c {
	writing-mode: horizontal-tb;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*制作実績ブロックの画像指定*/
.bg-slideup-c .image-c {
	background-image: url("https://template-party.com/template/tp_biz63/tp_biz63_skyblue1/images/bg_works.jpg");	/*サイズ3276x3276正方形背景画像の指定*/
}