@charset "utf-8";	

/*balloon-text-leftタブ切り替えaccbox全体"bgText-photomove*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0 auto;}

/*タブのスh3-made-in-the-lessonタイル-box1-*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #6b6351;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消すh2-with-motif-top1*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変えるremasu*/
.tabs input:checked + .tab_item {
  background-color: #6b6351;
  color: #fff;
}







.mybox-next-time{
  background-color: #fff;	
  border: 2px solid #eea882;	/* tabboxmybox1線の太さ・種類・色 cp_card02*/
  border-radius: 5px;
  margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下comic */
  padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下cp_navi */
  position: relative;
}
.mybox-next-time:before{
  background-color: #eea882;	/* 吹き出し背景色 */
  border-radius: 5px;
  color: #fff;	/* 吹き出し文字色 */
  content: 'またの機会にするとき';
  padding: 5px 20px;
  position: absolute;
  left: -10px;
  top: -20px;
}
.mybox-next-time:after{
  border-top: 12px solid #eea882;		/* 吹き出し三角部分の色 */
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
}
.mybox-recommended-time{
  background-color: #fff;	
  border: 2px solid #eea882;	/* mybox1線の太さ・種類・色 */
  border-radius: 5px;
  margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
  padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
  position: relative;
}
.mybox-recommended-time:before{
  background-color: #eea882;	/* 吹き出し背景色 */
  border-radius: 5px;
  color: #fff;	/* 吹き出し文字色 */
  content: 'おすすめのとき';
  padding: 5px 20px;
  position: absolute;
  left: -10px;
  top: -20px;
}
.mybox-recommended-time:after{
  border-top: 12px solid #eea882;		/* 吹き出し三角部分の色 */
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
}


/*関連レシピリンクの吹き出しブロックmybox*/
.balloon1-recommended-recipe {
  position: relative;
  display: inline-block;
  margin: 40px 15px 20px 20px;	/* 外側の余白 上・右・左・下 */
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #202124;
  font-size: 16px;
  background: #eea882;
}

.balloon1-recommended-recipe:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #eea882;
}

.balloon1-recommended-recipe p {
  margin: 0;
  padding: 0;
}


/* 結論box1 */
.box-conclusion{
  background-color: #fff;	
  border: 2px solid #eea882;
  border-radius: 5px;
  margin: 40px 5px 5px 20px;	/* masu外側の余白 上・右・左・下 */
  padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
  position: relative;
}
.box-conclusion:before{
  background-color: #eea882;	/* 吹き出し背景色 */
  border-radius: 5px;
  color: #fff;	/* 吹き出し文字色 */
  content: '結論';
  padding: 5px 20px;
  position: absolute;
  left: -10px;
  top: -20px;
}
.box-conclusion:after{
  border-top: 12px solid #eea882;		/* 吹き出し三角部分の色 */
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
}

.mybox{
  background-color: #fff;	
  border: 2px solid #eea882;	/* mybox1線の太さ・種類・色 */
  border-radius: 5px;
  margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
  padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
  position: relative;
}
.mybox:before{
  background-color: #eea882;	/* 吹き出し背景色 */
  border-radius: 5px;
  color: #fff;	/* 吹き出し文字色 */
  content: 'Check';
  padding: 5px 20px;
  position: absolute;
  left: -10px;
  top: -20px;
}
.mybox:after{
  border-top: 12px solid #eea882;		/* 吹き出し三角部分の色 */
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
}



.comic {
 
  font-family:'Comic Sans', cursive;
}
 
 
  .speech {
    background-color:#fff;
    border:solid 2px #000;
    border-radius:12px;
    display:inline-block;
    margin:.5em;
    padding:.5em 1em;
    position:relative;
  }
   
  .speech:before {
    border:solid 12px transparent;
    border-left:solid 12px #000;
    border-top:solid 12px #000;
    bottom:-24px;
    content:"";
    height:0;
    left:24px;
    position:absolute;
    transform:skew(-15deg);
    width:0;
  }
   
  .speech:after {
    border:solid 10px transparent;
    border-left:solid 10px #fff;
    border-top:solid 10px #fff;
    bottom:-19px;
    content:"";
    height:0;
    left:27px;
    position:absolute;
    transform:skew(-15deg);
    width:0;
  }
  
table.lesson-menu {	margin: 1.5%;
  border-collapse: collapse;
  width: 100%;
}
table.lesson-menu th,
table.lesson-menu td {
  padding: 0.5rem 1rem;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
table.lesson-menu th {
  font-weight: normal;
  font-size: .875rem;
  color: #666;
  background: #eee;
  position: sticky;
  top: 0;
}
table.lesson-menu img {
  width: 80px;
  display: block;
  margin: 0 auto;
  margin-bottom: .5rem;
}

@media(max-width: 500px) {
 .heading {
    display: none;
  }
  table.lesson-menu td {
    display: block;
  }
  table.lesson-menu td::before {
    content: attr(data-label);
    font-size: .875rem;
    color: #666;
    display: block;
    margin-bottom: 0.25rem;
  }
  table.lesson-menu .car-name {
    background: #eee;
  }
}

/* 生徒の声collage-tablecp_quote1 */
.box-dreamer{
  background-color: #fff;	
  border: 2px solid #f3cbd0;	/* mybox線の太さ・種類・色 */
  border-radius: 5px;
  margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
  padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
  position: relative;
}
.box-dreamer:before{
  background-color: #ef858c;	/* 吹き出し背景色 */
  border-radius: 5px;
  color: #fff;	/* 吹き出し文字色 */
  content: '生徒さまの声';
  padding: 5px 20px;
  position: absolute;
  left: -10px;
  top: -20px;
}
.box-dreamer:after{
  border-top: 12px solid #ef858c;		/* 吹き出し三角部分の色 */
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
}

.box-dreamer-from{
  font-size: 80%;	}

.icon-box-dreamer{
    display: inline-block;
    margin: 2px;
    font-size: 12px;	/*list8にもアイコンあるきいてる？*/
    padding: 0 5px;		/*ボックス内の余白*/
    border-radius: 4px;	/*角丸のサイズ*/
    border: 1px solid #ccc;	/*枠線の幅、線種、色*/
  }

.icon-box-dreamer a {text-decoration: none;}



/* LP cta　日程の箱*/
.box-lp {
	background: rgba(255,255,255,0.4);	/*背景色。0,0,0は黒のことで0.4は色が40%でた状態のこと。*/
	border: 2px solid #eea882;	
	margin: 10px 60px; /* 外側の余白 */
	padding: 70px 50px; /* 内側の余白 上に詰まって下があいている此れでなおる？*/
	position: relative;
}

.lp-hukidasi {
  position: relative;
  padding: 1.5rem 2rem; 
  margin: 6em 2%;
  color: #fff;
  border-radius: 10px;
  background: #6b6351;
}

.lp-hukidasi:after {
  position: absolute;
  bottom: -9px;
  left: 3em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color:  #6b6351 transparent transparent transparent;
}

h2.h2-with-motif-top1{
	background-image: url(https://creme-cremes.com/components/images/hakari-min.png);
	background-size: auto 50px;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 70px;	
  font-size: 18px;
	font-weight: normal;
	margin-bottom: 15px;
	color: #202124;	
}

h2.h2-with-motif-top2{	font-size: 18px;
	font-weight: normal;	margin-bottom: 20px;
	color: #202124;		
	background-image: url(https://creme-cremes.com/components/images/hakari-min.png);
	background-size: auto 60px;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 80px;	
}
h2.h2-with-motif-top3{
	font-size: 28px;
	font-weight: normal;
	text-align: center;
	background-image: url(https://creme-cremes.com/components/images/hakari-min.png);
	background-size: auto 30px;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 40px;
}

h2.h2-with-motif-top4{
	background-image: url(https://creme-cremes.com/components/images/sidelink1-min.png);
	background-size: auto 50px;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 70px;	
}


h2.h2-with-motif-top5{
	background-image: url(https://creme-cremes.com/components/images/sidelink1-min.png);
	background-size: auto 60px;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 80px;	
}


h2.h2-with-motif-top6{
	background-image: url(https://creme-cremes.com/components/images/sidelink1-min.png);
	background-size: auto 30px;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 40px;
}


h2.h2-with-motif-top7{
	font-size: 24px;
	text-align: center;
	margin-bottom: 50px;
	letter-spacing: 0.2em;
	background-image: url(https://creme-cremes.com/components/images/sidelink1-min.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto 3px;
	padding-bottom: 10px;
}
h2.h2-with-motif-top8{
	color: #161854;
	text-align: center;
	font-size: 20px;
	margin-bottom: 20px;
	background-image: url(https://creme-cremes.com/components/images/sidelink1-min.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 20px;
	background-size: auto 20px;
}
h2.h2-with-motif-top9{
	font-size: 28px;
	font-weight: normal;
	text-align: center;
	background-image: url(https://creme-cremes.com/components/images/hakari-min.png);
	background-size: auto 30px;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 40px;
}

h2.h2-with-motif-top10{
	background-image: url(https://creme-cremes.com/components/images/sidelink1-min.png);
	background-size: auto 50px;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 70px;	
}

/* ! cp_boxbox-move-cooking----btn-section----------------------------------------------
/************************************
** 専門の目次　MENU下。中に目次ｐをdiv可能？type9
************************************/
.box30-professional-table-of-contents {
  margin: 2em 0;
  background: #fff4ee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30-professional-table-of-contents .box-title {
  font-size: 1.2em;
  background: #6b6351;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box30-professional-table-of-contents div {
  padding: 15px 20px;
  margin: 0;
}




/* type2! box-voice-cta--------------------------------------------------
/************************************
** 割合棒グラフh3.type3box30
************************************/
.percentage-bar-wrap{
  margin: 0 auto 4rem;/* 余白 */
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
}
.percentage-bar-wrap > div:first-child{
  border-radius:4px 0 0 4px;
}
.percentage-bar-wrap > div:last-child{
  border-radius:0 4px 4px 0;
  margin-right: 0;
}
.percentage-bar{
  height: 30px;/* 棒高さ */
  margin-right: 2px;/* 棒余白 */
}
.percentage-bar-num{
  text-align:center;
  color:#fff;/* ラベル文字色 */
  line-height: 30px;
  font-weight: 600;/* ラベル文字太さ */
  font-size:11px;/* ラベル文字サイズ */
}
.percentage-bar-item{
  color:#777;/* コンテンツ文字色 */
  text-align:center;
  font-weight: 600;/* コンテンツ文字太さ */
  font-size:13px;/* コンテンツ文字サイズ */
  margin-top:5px;
  letter-spacing: 1px;
}
/*スマホ*/
@media screen and (max-width: 480px) {
  .percentage-bar-item{
      font-size:10px;/* コンテンツ文字サイズ */
    }
}
/* 青(デフォルト) */
.bar-blue > div:nth-of-type(1){background:#00b0eb;}
.bar-blue > div:nth-of-type(2){background:#14c4ff;}
.bar-blue > div:nth-of-type(3){background:#3bceff;}
.bar-blue > div:nth-of-type(4){background:#62d8ff;}
.bar-blue > div:nth-of-type(5){background:#7ddbfa;}
.bar-blue > div:nth-of-type(6){background:#00b0eb;}
.bar-blue > div:nth-of-type(7){background:#14c4ff;}
.bar-blue > div:nth-of-type(8){background:#3bceff;}
.bar-blue > div:nth-of-type(9){background:#62d8ff;}
.bar-blue > div:nth-of-type(10){background:#7ddbfa;}
/* ピンク */
.bar-pink > div:nth-of-type(1){background:#eb5555;}
.bar-pink > div:nth-of-type(2){background:#ef7878;}
.bar-pink > div:nth-of-type(3){background:#f39b9b;}
.bar-pink > div:nth-of-type(4){background:#f5adad;}
.bar-pink > div:nth-of-type(5){background:#f7bebe;}
.bar-pink > div:nth-of-type(6){background:#eb5555;}
.bar-pink > div:nth-of-type(7){background:#ef7878;}
.bar-pink > div:nth-of-type(8){background:#f39b9b;}
.bar-pink > div:nth-of-type(9){background:#f5adad;}
.bar-pink > div:nth-of-type(10){background:#f7bebe;}
/* 黄色 */
.bar-yellow > div:nth-of-type(1){background:#e3b047;}
.bar-yellow > div:nth-of-type(2){background:#fdc44f;}
.bar-yellow > div:nth-of-type(3){background:#fdc960;}
.bar-yellow > div:nth-of-type(4){background:#fdcf72;}
.bar-yellow > div:nth-of-type(5){background:#fdd583;}
.bar-yellow > div:nth-of-type(6){background:#e3b047;}
.bar-yellow > div:nth-of-type(7){background:#fdc44f;}
.bar-yellow > div:nth-of-type(8){background:#fdc960;}
.bar-yellow > div:nth-of-type(9){background:#fdcf72;}
.bar-yellow > div:nth-of-type(10){background:#fdd583;}
/* 緑 */
.bar-green > div:nth-of-type(1){background:#28ad98;}
.bar-green > div:nth-of-type(2){background:#2fcdb4;}
.bar-green > div:nth-of-type(3){background:#4dd6c0;}
.bar-green > div:nth-of-type(4){background:#6ddecc;}
.bar-green > div:nth-of-type(5){background:#7de1d1;}
.bar-green > div:nth-of-type(6){background:#28ad98;}
.bar-green > div:nth-of-type(7){background:#2fcdb4;}
.bar-green > div:nth-of-type(8){background:#4dd6c0;}
.bar-green > div:nth-of-type(9){background:#6ddecc;}
.bar-green > div:nth-of-type(10){background:#7de1d1;}
/* 対比 */
.bar-contrast > div:nth-of-type(1){background:#00bfff;}
.bar-contrast > div:nth-of-type(2){background:#ef7878;}




.wrap_flow_lp {
	border-top: 8px solid #f3f5f7; }
	@media screen and (max-width: 768px) {
	  .wrap_flow_lp .container {
		max-width: none; } }
  
  .area_flow_attendance {
	padding: 16px;
	background: #f3f5f7;
	border: 1px solid #dae2ea; }
	@media screen and (max-width: 560px) {
	  .area_flow_attendance {
		padding: 8px;
		margin: 0 -8px; } }
	.area_flow_attendance .head {
	  margin: 0 0 16px; }
	  @media screen and (max-width: 560px) {
		.area_flow_attendance .head {
		  margin: 0 0 8px; } }
	  .area_flow_attendance .head .list_flow_attendance_head {
		display: flex;
		align-items: center;
		margin: -4px;
		counter-reset: number 0; }
		@media screen and (max-width: 768px) {
		  .area_flow_attendance .head .list_flow_attendance_head {
			flex-wrap: wrap; } }
		.area_flow_attendance .head .list_flow_attendance_head > li {
		  width: 25%;
		  padding: 4px;
		  counter-increment: number 1;
		  position: relative; }
		  @media screen and (max-width: 768px) {
			.area_flow_attendance .head .list_flow_attendance_head > li {
			  width: 43%; } }
		  .area_flow_attendance .head .list_flow_attendance_head > li:nth-of-type(1), .area_flow_attendance .head .list_flow_attendance_head > li:nth-of-type(2), .area_flow_attendance .head .list_flow_attendance_head > li:nth-of-type(3) {
			padding-right: 16px; }
			.area_flow_attendance .head .list_flow_attendance_head > li:nth-of-type(1):before, .area_flow_attendance .head .list_flow_attendance_head > li:nth-of-type(2):before, .area_flow_attendance .head .list_flow_attendance_head > li:nth-of-type(3):before {
			  content: "";
			  width: 0;
			  height: 0;
			  border-style: solid;
			  border-width: 36px 0 36px 12px;
			  border-color: transparent transparent transparent #eea882;
			  position: absolute;
			  top: 4px;
			  right: 4px; }
			  @media screen and (max-width: 1080px) {
				.area_flow_attendance .head .list_flow_attendance_head > li:nth-of-type(1):before, .area_flow_attendance .head .list_flow_attendance_head > li:nth-of-type(2):before, .area_flow_attendance .head .list_flow_attendance_head > li:nth-of-type(3):before {
				  border-width: 20px 0 20px 12px; } }
		  .area_flow_attendance .head .list_flow_attendance_head > li .ttl {
			color: #fff;
			font-size: 20px;
			font-weight: 700;
			background: #eea882;
			height: 72px;
			display: flex;
			align-items: center;
			padding: 0 24px;
			position: relative; }
			@media screen and (max-width: 1080px) {
			  .area_flow_attendance .head .list_flow_attendance_head > li .ttl {
				height: 40px;
				font-size: 18px;
				padding: 0 12px; } }
			.area_flow_attendance .head .list_flow_attendance_head > li .ttl:before {
			  content: counter(number,decimal-leading-zero) "";
			  font-size: 32px;
			  opacity: .2;
			  position: absolute;
			  top: 50%;
			  right: 16px;
			  transform: translateY(-50%); }
			  @media screen and (max-width: 768px) {
				.area_flow_attendance .head .list_flow_attendance_head > li .ttl:before {
				  font-size: 24px;
				  right: auto;
				  left: 116px; } }
	.area_flow_attendance .body .list_flow_attendance {
	  background: #fff;
	  counter-reset: number 0;
	  padding: 16px;
	  border: 1px solid #dae2ea; }
	  @media screen and (max-width: 768px) {
		.area_flow_attendance .body .list_flow_attendance {
		  padding: 8px; } }
	  .area_flow_attendance .body .list_flow_attendance > li {
		padding: 24px;
		counter-increment: number 1; }
		@media screen and (max-width: 768px) {
		  .area_flow_attendance .body .list_flow_attendance > li {
			padding: 12px; } }
		.area_flow_attendance .body .list_flow_attendance > li + li {
		  border-top: 1px solid #dae2ea; }
		.area_flow_attendance .body .list_flow_attendance > li article {
		  padding: 0 0 0 72px;
		  position: relative; }
		  @media screen and (max-width: 768px) {
			.area_flow_attendance .body .list_flow_attendance > li article {
			  padding: 0 0 0 48px; } }
		  .area_flow_attendance .body .list_flow_attendance > li article:before {
			content: counter(number,decimal-leading-zero) ".";
			color: #eea882;
			font-size: 32px;
			font-weight: 700;
			position: absolute;
			top: 0;
			left: 0; }
			@media screen and (max-width: 768px) {
			  .area_flow_attendance .body .list_flow_attendance > li article:before {
				font-size: 24px; } }
		  .area_flow_attendance .body .list_flow_attendance > li article .ttl {
			font-size: 24px;
			font-weight: 700;
			margin: 0 0 8px; }
			@media screen and (max-width: 768px) {
			  .area_flow_attendance .body .list_flow_attendance > li article .ttl {
				font-size: 20px;
				margin: 0 0 4px; } }
			@media screen and (max-width: 480px) {
			  .area_flow_attendance .body .list_flow_attendance > li article .ttl {
				font-size: 14px; } }
		  .area_flow_attendance .body .list_flow_attendance > li article .description {
			color: #444;
			font-size: 16px;
			flex-direction: column;
			align-items: flex-start; }
			@media screen and (max-width: 480px) {
			  .area_flow_attendance .body .list_flow_attendance > li article .description {
				font-size: 14px; } }
			.area_flow_attendance .body .list_flow_attendance > li article .description .btn {
			  margin-top: 8px; }
			.area_flow_attendance .body .list_flow_attendance > li article .description small {
			  color: #666; }
/************************************
** 上下比較リストボックスpop-hukidasi
************************************/
.compare-list-box * {
  margin: 0 !important;
  padding: 0 !important;
}
.compare-list-box {
  margin: 2em auto !important;
  padding: 4.5em 2em 1.8em !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  background: #fff6f2;
  border-radius: 4px;
  max-width: 600px;
  position: relative;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .07);
}
.compare-list-box .compare-list-box-title {
  padding: 0.5em 0 !important;
  background: #ffa883;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  text-align: center;
  border-radius: 4px 4px 0px 0px;
  position: absolute;
  bottom: calc(100% + -40px);
  left: 0;
  width: 100%;
}
.compare-list {
  position: relative;
  margin-left: 40px !important;
}
.compare-unit-top {
  position: absolute;
  top: 8px;
  right: calc(100% - -13px);
  font-size: 14px;
  font-weight: 400;
  color: #393f4c;
  width: 45px;
  text-align: right;
}
.compare-unit-bottom {
  position: absolute;
  bottom: 8px;
  right: calc(100% - -13px);
  font-size: 14px;
  font-weight: 400;
  color: #393f4c;
  width: 45px;
  text-align: right;
}
.compare-list ul,.compare-list ol {
  padding: 1em 0 1em 1.2em !important;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  border-left: 2px solid #ffa883;
  list-style: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
}
.compare-list ul li, .compare-list ol li {
  margin-bottom: 1.4em !important;
  padding: 0 0 0 1.5em !important;
  line-height: 1.4;
  position: relative;
}
.compare-list ul li:after, .compare-list ol li:after {
  content: unset !important;
}
.compare-list-box .compare-list ul li:before, .compare-list-box .compare-list ol li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 8px;
  width: 3px;
  height: 3px;
  display: inline-block;
  background-color: #777 !important;
  border-radius: 50%;
}
.compare-list ul li:last-child, .compare-list ol li:last-child {
  margin-bottom: 0 !important;
}
.compare-list ul::before, .compare-list ul::after, .compare-list ol::before, .compare-list ol::after {
  margin: auto !important;
  position: absolute;
  left: -7px;
  content: "";
  vertical-align: middle;
}
.compare-list ul::before, .compare-list ol::before {
  top: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ffa883;
  border-right: 2px solid #ffa883;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.compare-list ul::after, .compare-list ol::after {
  bottom: 0;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ffa883;
  border-right: 2px solid #ffa883;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.box10{
  background-color: #fff;	/* 背景色 */
  border: 2px solid #f3cbd0;	/* 線の太さ・種類・色 */
  border-radius: 5px;
  margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
  padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
  position: relative;
}
.box10:before{
  background-color: #ef858c;	/* 吹き出し背景色 */
  border-radius: 5px;
  color: #fff;	/* 吹き出し文字色 */
  content: '作ってみました';
  padding: 5px 20px;
  position: absolute;
  left: -10px;
  top: -20px;
}
.box10:after{
  border-top: 12px solid #ef858c;		/* 吹き出し三角部分の色 */
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
}



.cp_quote-cooking-science {
	position: relative;
	width: 90%;
	margin: 2em auto;
}
*, *:before, *:after {
	font-family: 'FontAwesome';
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
/* 引用sample */
.cp_quote-cooking-science blockquote {
	position: relative;
	margin: 0;
	padding: 1.5em 2em;
	border-radius: 0.3em;
	background: #FCE4EC;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
}
/* アイコン */
.cp_quote-cooking-science blockquote::before {
	font-size: 2.5em;
	line-height: 0;
	position: absolute;
	top: 0;
	left: 0.3em;
	content: '\f10d';
	color: #e91e63;
	filter: drop-shadow(3px 2px 0px #FCE4EC);
}
/* 吹き出しの▼ */
.cp_quote-cooking-science blockquote::after {
	position: absolute;
	right: 1em;
	bottom: -8px;
	width: 0;
	height: 0;
	content: '';
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #FCE4EC transparent transparent transparent;
	filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3));
}
/* 引用元名 */
.cp_quote-cooking-science .author {
	position: relative;
	top: 15px;
	right: 0;
	width: 100%;
	text-align: right;
}
.cp_quote-cooking-science .author img {
	display: inline-block;
	width: 45px;
	height: 45px;
	border: 3px solid #e91e63;
	border-radius: 50%;
	object-fit: cover;
	filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3));
}
.cp_quote-cooking-science .author p {
	font-size: 0.8em;
	font-weight: bold;
	position: absolute;
	top: -0.8em;
	right: 60px;
	width: calc(100% - 60px - 0.3em);
	padding: 0.3em;
}
.cp_quote-cooking-science .author p span {
	font-size: 0.6em;
	font-weight: normal;
	font-style: italic;
	display: block;
	padding: 0.3em;
	border-top: 2px solid #e91e63;
}



/* 全体 */
.sb-box {
  position: relative;
  overflow: hidden;
}
/* アイコン画像 */
.icon-img {
  position: absolute;
  overflow: hidden;
  top: 0; /* 画像の位置を上から0に */
  width: 80px; /* 画像の幅 */
  height: 80px; /* 画像の高さ */
}
/* アイコン画像（左） */
.icon-img-left {
  left: 0; /* 画像の位置を左から0に */
}
/* アイコン画像（右） */
.icon-img-right {
  right: 0; /* 画像の位置を右から0に */
}
/* アイコン画像 */
.icon-img img {
  border-radius: 50%; /* 画像を丸く表示する */
  border: 2px solid #eee; /* 画像の縁取りの太さとカラー */
}
/* アイコンネーム */
.icon-name {
  position: absolute;
  width: 80px; /* ネームの最大幅を画像と同じに */
  text-align: center; /* ネームの位置をセンターに */
  top: 83px; /* ネームの位置を上から83に */
  color: #777; /* ネームのカラー */
  font-size: 10px; /* ネームのフォントサイズ */
}
/* アイコンネーム（左） */
.icon-name-left {
  left: 0; /* ネームの位置を左から0に */
}
/* アイコンネーム（右） */
.icon-name-right {
  right: 0; /* ネームの位置を右から0に */
}
/* 吹き出し */
.sb-side {
  position: relative;
  float: left;
  margin: 0 105px 40px 105px; /* 吹き出しの上下左右の余白 */
}
.sb-side-right {
  float: right;
}
/* 吹き出し内のテキスト */
.sb-txt {
  position: relative;
  border: 2px solid #999; /* 吹き出しの縁取りの太さとカラー */
  border-radius: 6px; /* 吹き出しを角丸に */
  background: #fff; /* 吹き出しの背景色 */
  color: #202124; /* 吹き出し内のテキストのカラー */
  font-size: 15px; /* 吹き出し内のフォントサイズ */
  line-height: 1.7; /* 吹き出し内のテキストが2行以上になった時の行間 */
  padding: 18px; /* 吹き出し内の上下左右の余白 */
}
.sb-txt > p:last-of-type {
  padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
  margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出しの三角 */
.sb-txt:before {
  content: "";
  position: absolute;
  border-style: solid;
  top: 16px; /* 吹き出し内の三角の位置 */
  z-index: 3;
}
.sb-txt:after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 15px; /* beforeより-1px */
  z-index: 2; /* beforeより-1 */
}
/* 吹き出しの三角（左） */
.sb-txt-left:before {
  left: -7px;
  border-width: 7px 10px 7px 0;
  border-color: transparent #fff transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left:after {
  left: -10px; /* beforeより-3px */
  border-width: 8px 10px 8px 0; /* beforeより上下+1px */
  border-color: transparent #999 transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右） */
.sb-txt-right:before {
  right: -7px;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent #fff; /* 背景色と同じカラーに */
}
.sb-txt-right:after {
  right: -10px; /* beforeより-3px */
  border-width: 8px 0 8px 10px; /* beforeより上下+1px */
  border-color: transparent transparent transparent #999; /* 縁取りと同じカラーに */
}

/* 767px（iPad）以下 */

@media (max-width: 767px) {
  /* アイコン画像 */
  .icon-img {
    width: 60px; /* 画像の幅を-20px */
    height: 60px; /* 画像の高さを-20px */
  }
  /* アイコンネーム */
  .icon-name {
    width: 60px; /* 画像の幅に合わせて-20px */
    top: 62px; /* ネームの位置を上から62に */
    font-size: 9px; /* ネームのフォントサイズを-1px */
  }
  /* 吹き出し（左） */
  .sb-side-left {
    margin: 0 0 30px 78px; /* 吹き出し（左）の上下左右の余白を狭く */
  }
  /* 吹き出し（右） */
  .sb-side-right {
    margin: 0 78px 30px 0; /* 吹き出し（右）の上下左右の余白を狭く */
  }
  /* 吹き出し内のテキスト */
  .sb-txt {
    padding: 12px; /* 吹き出し内の上下左右の余白を-6px */
  }}
/* この記事を書いた人 */

/* カード全体 */
.writer-profile-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 2px dashed #eee;
  }
  /* カードの右・左共通 */
  .wp-left, .wp-right {
    padding: 25px 20px;
  }
  /* カードの左側 */
  .wp-left {
    width: 35%;
    border-right: 2px dashed #eee;
    text-align: center;
  }
  /* カードの右側 */
  .wp-right {
    width: 65%;
  }
  
  /* 左側 */
  
  /* 吹き出し */
  .wp-label {
    position: relative;
    margin: 0 0 15px;
    padding: 10px 15px;
    border: 1px solid #222;
    display: inline-block;
    min-width: 120px;
    max-width: 100%;
    border-radius: 20px;
  }
  /* 三角 */
  .wp-label::before,
  .wp-label::after {
    content: '';
    border: 14px solid transparent;
    position: absolute;
    left: 50%;
    margin-left: -14px;
  }
  /* 線 */
  .wp-label::before {
    border-top-color: #222;
    bottom: -28px;
  }
  /* 地 */
  .wp-label::after {
    border-top-color: #fff;
    bottom: -27px;
  }
  /* 吹き出し内のテキスト */
  .wp-label p {
    color: #222;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }
  
  /* 画像 */
  .wp-img {
    width: 100px;
    height: 100px;
    margin: 10px auto;
  }
  /* 画像を丸く、枠線をつける */
  .wp-img img {
    border-radius: 50%;
    border: 2px solid #eee;
  }
  /* 名前 */
  .wp-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #6C9FCE;
    margin-bottom: 5px;
  }
  /* 職業 */
  .wp-job {
    color: #7b7b7b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }
  
  /* 右側 */
  
  /* リストを左揃え・中央寄せに */
  .ul-center {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  /* 最後の要素にだけ下に余白をつけない */
  .ul-center ul li:not(:last-child) {
    padding-bottom: 3px;
  }
  
  /* リストの文字色 */
  .ul-center ul .li-point {
    color: #7b7b7b;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
  }
  /* リストの✓マーク */
  .li-point:before {
    font-family: "FontAwesome";
    content: "\f00c";
    color: #6C9FCE;
    padding-right: 10px;
  }
  
  /* 文章を左揃え・中央寄せに */
  .wp-content {
    text-align: center;
    display: block;
  }
  /* 文章 */
  .wp-content p {
    text-align: left;
    display: inline-block;
    color: #7b7b7b;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
  }
  /* SNSボタン全体 */
  .wp-sns {
    text-align: center;
    padding: 20px 0 0;
  }
  /* SNSボタン */
  .wp-sns li {
    display: inline-block;
    border: 1px solid #222;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0 3px;
  }
  /* SNSボタンにマウスをあてた時の挙動 */
  .wp-sns li:hover{
    position: relative;
    top: 1px;
  }
  /* SNSアイコン */
  .wp-sns li a i {
    font-size: 19px;
    color: #222;
  }
  /* SNSアイコンの位置 */
  .wp-sns li a i::before {
    position: relative;
    top: 9px;
  }
  
  /* 767px（iPad）以下 */
  
  @media (max-width: 767px) {
    /* カードを縦並びに */
    .writer-profile-card {
      display: block;
    }
    /* 左右の幅を100%に */
    .wp-left, .wp-right {
      width: 100%;
      padding: 35px 20px;
    }
    /* 点線を左から下に */
    .wp-left {
      border-right: none;
      border-bottom: 2px dashed #eee;
    }  }

.box3-kyoutyou {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #f8f8f8 ;/*背景色*/ margin: 15px 40px 60px;
    }
    .box3-kyoutyou p {
    margin: 0;
    padding: 0;
    } 
    /* レスポンシブ */
    
    @media screen and (max-width:479px) {
       .box3-kyoutyou {
        color: #333;
        font-size: 16px;
        font-weight: 400;
        line-height: 2;
        background-color: #fafafa;
        outline: 1px solid #f0f0f0;
        border-color: #f0f0f0;
        padding: 20px;
        margin: 10px 10px 60px;
        }    }
    
    .point-re {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 15px;
    }
    .point-re:before {
        font-family: "Font Awesome 5 Free";
        content: "\f00c";
        font-weight: 900;
        color: #6C9FCE;
        padding-right: 10px;
    }
    
    /* レスポンシブ */
    
    @media screen and (max-width:479px) {
    
        .point-re {
            font-size: 18px;
        }
    }/* FA5の場合 */
.point-re-re  :before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    color: #6C9FCE;
    }
    
    /* FA4の場合 */
    .point-re-re  :before {
    font-family: FontAwesome;
    content: "\f00c";
    color: #6C9FCE;
    }
.mybox-okyakusama{
	background-color: #fff;	/* 背景色 */
	border: 1px solid #ccc; /* 線の太さ・種類・色 */
	box-shadow:1px 1px 6px 0px #ccc;
	-moz-box-shadow:1px 1px 6px 0px #ccc;
	-webkit-box-shadow:1px 1px 6px 0px #ccc;
	-o-box-shadow:1px 1px 6px 0px #ccc;
	margin: 20px 5px; /* 外側の余白 上下・左右 */
	padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
}

.mybox-okyakusama{
	background-color: #d9ccb3; /* マステ部分の色1 */
	background-position: 0 0, 12px 12px;
	background-size: 24px 24px;
	border-left: 2px dotted rgba(255,255,255,0.9);
	border-right: 2px dotted rgba(255,255,255,0.9);
	box-shadow: 0 0 5px rgba(255,255,255,0.5);
	content: '来客時、おもてなしには・・・';
	display: block;
	margin: 0 0 10px 0;
	padding: 5px 20px;
	color: #fff;  /* マステ部分文字色 */
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}

 
.cp_tag03 {
	line-height: 2;
	text-align: center;
	font-size: 18px;	/*文字サイズ*/	
}
/*メニュー１個あたりの指定*/
.cp_tag03 li {
	display: inline-block;	/*横並びにする指定*/
	margin: 0px 5px;			/*上下、左右へのメニューの外側にとる余白*/
	text-decoration: none;
   height: 26px;
  max-width: 400px;
  padding: 0px 20px;	/*上下、左右へのメニューの内側にとる余白*/
  background: #fff;	/*背景色*/
	color: #8180c1;			/*文字色*/
	border-radius: 10px;	/*角丸のサイズ。大きめであれば適当で構いません。この１行を削除すると、長方形になります。*/
}
/*現在表示中(current)と、マウスオン時の指定*/

.cp_tag03 span {
  font-size: 0.7em;
  display: block;	/*横並びにする指定*/
  line-height: 25px;
  overflow: hidden;
 
  padding: 0 7px 0 6px;
  color: #555555;
  border-width: 1px 1px 1px 0;
  border-style: solid;
  background: #fafafa;
  }

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
.cp_tag03 {
	font-size: 100%;
}
.cp_tag03 li a {
	padding: 0px 5px;	/*上下、左右へのメニューの内側にとる余白*/
}  }  
.mybox-wine{
	background-color: #F6D4D8;  /* 背景色 */
	border-radius: 5px;
	margin: 20px 5px; /* 外側の余白 上下・左右 */
	padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
}
.mybox-wine:before{
	border: 1px solid #fff; /* 白い実線 */
	border-radius: 5px;
	content: '';
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
.mybox-wine:after{
	background-color: rgba(249,223,213,0.9);  /* マステ背景色 */
	background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
	background-position: 0 0, 8px 8px;  /* 水玉の距離 */
	background-size: 15px 15px; /* 水玉の大きさ */
	border-left: 2px dotted rgba(0,0,0,0.1);
	border-right: 2px dotted rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	content: '料理とワインのマリアージュ';
	display: block;
	padding: 5px 20px;  
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}



.mybox-demerit{
	background-color: #fff;	/* 背景色 */
	border: 2px solid #f3cbd0;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
	padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
	position: relative;
}
.mybox-demerit:before{
	background-color: #ef858c;	/* 吹き出し背景色 */
	border-radius: 5px;
	color: #fff;	/* 吹き出し文字色 */
	content: 'デメリット';
	padding: 5px 20px;
	position: absolute;
	left: -10px;
	top: -20px;
}
.mybox-demerit:after{
	border-top: 12px solid #ef858c;		/* 吹き出し三角部分の色 */
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	content: '';
	position: absolute;
	top: 10px;
	left: 15px;
}


.mybox-merit{
	background-color: #fff;	/* 背景色 */
	border: 2px solid #f3cbd0;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
	padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
	position: relative;
}
.mybox-merit:before{
	background-color: #ef858c;	/* 吹き出し背景色 */
	border-radius: 5px;
	color: #fff;	/* 吹き出し文字色 */
	content: 'メリット';
	padding: 5px 20px;
	position: absolute;
	left: -10px;
	top: -20px;
}
.mybox-merit:after{
	border-top: 12px solid #ef858c;		/* 吹き出し三角部分の色 */
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	content: '';
	position: absolute;
	top: 10px;
	left: 15px;
}
.my-box2-a{
	background: none;
	border: 1px solid #eea882;	/* 線の太さ・種類・色 */
	margin: 15px 10px; /* 外側の余白 上下・左右 */
	padding: 20px; /* 内側の余白 */
	position: relative;
}
.my-box2-a:before{
	background-color: #fff;
	content: 'Answer♬';
	padding: 2px 10px; /* タイトルの余白 上下・左右 */
	position: absolute;
	top: -10px;
	left: 30px;
	text-align: center;
}
.my-box2-a:after{
	background: none;
	border: 1px solid #eea882;	/* 線の太さ・種類・色 */
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 100%;
	height: 100%;
	z-index: -1;
}






.my-box2-q{
	background: none;
	border: 1px solid #eea882;	/* 線の太さ・種類・色 */
	margin: 15px 10px; /* 外側の余白 上下・左右 */
	padding: 20px; /* 内側の余白 */
	position: relative;
}
.my-box2-q:before{
	background-color: #fff;
	content: '質問Qestion♬';
	padding: 2px 10px; /* タイトルの余白 上下・左右 */
	position: absolute;
	top: -10px;
	left: 30px;
	text-align: center;
}
.my-box2-q:after{
	background: none;
	border: 1px solid #eea882;	/* 線の太さ・種類・色 */
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.ribbon3-cta {
    display: inline-block;
    position: relative;  
    height: 60px;
    line-height: 20px;
    text-align: center;
    padding: 1px 0;
    margin: 3em auto 0;
    font-size: 16px;
    background: #eea882;
    color: #FFF;
    box-sizing: border-box;
  }
  
  .ribbon3-cta h3 {
    margin: 0;
    padding: 0 0px;
    border-top: dashed 2px rgba(255, 255, 255, 0.5);
    border-bottom: dashed 2px rgba(255, 255, 255, 0.5);
    line-height: 42px;
  }
  
  .ribbon3-cta:before, .ribbon3-cta:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
  }
  
  .ribbon3-cta:before {
    /*左の山形*/
    top: 0;
    left: 0;
    border-width: 30px 0px 30px 15px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
  }
  
  .ribbon3-cta:after {
    /*右の山形*/
    top: 0;
    right: 0;
    border-width: 30px 15px 30px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
  }

/*上下ライン*/
h3.h3-cta {
    color: #eea882;
    padding: 0.5em 0;/*上下の余白*/
    border-top: solid 3px #eea882;/*上線*/
    border-bottom: solid 3px #eea882;/*下線*/	text-align: center;
  }


ul.collage-table {list-style-type: none;  
  background: #fff4ee;
  width: 400px;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 2fr 1fr 1.5fr;
  grid-template-rows: 150px 100px 50px 50px auto;
  }
 
.la_1 {grid-row: 1 / span 2;}
.la_2 {grid-column: 2 / span 2;}
.la_5 {grid-row: 3/ span 2; grid-column: 1 / span 2;}
.la_7 {grid-row: 4 / span 2;}




/*右左、上下。テーブルにはみえない*/
  .table-cta {
    width: 100%;
    border-collapse: collapse; 
    }
    
    .table-cta th,td {
    padding: 10px 15px; 
    border: 1px solid #fff4ee;
    }
    
    .table-cta th {
    background: #f4f4f4;
    width: 50%;
    text-align: left;
    }
    
    @media only screen and (max-width:479px) {
    .table-cta th, .table-cta td {
    width: auto;
    display: block;
    border-top: none;
    }
    .table-cta tr:first-child {
    border-top: 1px solid #d5d5d5;
    }
    }



.profile-card{
  width: 96%;
  max-width:400px;
  position: relative;
  background: #fff; 
  box-shadow: 0px 1px 3px rgba(0,0,0,.18);
  overflow: hidden;
}

.profile-card:before{
 width:120%;
 height:130px;
 content:"";
 transform:skew(15deg,10deg);

 background-color: rgba(249,223,213,0.9);  /* マステ背景色 *//*
 background: #eea882; 斜め背景の色*/
 background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
 background-position: 0 0, 8px 8px;  /* 水玉の距離 */
 background-size: 15px 15px; /* 水玉の大きさ */


 position:  absolute;
 top:-15%;
 left:-10%;
 z-index: 0;
}

.profile-card__inner{
 position: relative;
  z-index: 1;
}

.profile-thumb{
    overflow: hidden;
    width: 110px;
    height: 110px;
    border: #fff 3px solid;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background: #fff;
}

.profile-thumb img{
  display: block;
    width: 100%;
    height: auto;
}

.profile-content{
  margin: 0 0 49px;
  padding: 15px;
  
}

.profile-content span{
  display: block;
}

.profile-name{
  margin-bottom: 3px;
  font-weight: bold;
  text-align: center;
}

.profile-job{
  margin-bottom: 10px;
  color: #ccc;
  font-size: 10px;
  text-align: center;
}

.profile-intro{
  font-size: 12px;
}

.profile-sns {
    padding: 5px 0;
    text-align: center;
    color: #fff;
}

.profile-sns span{
  display: block;
  font-size: 10px;
  
}

.profile-sns a {
  font-size: 30px;
    margin: 0 5px;
    color: #eea882;
}


@media only screen and (max-width:480px) {


  .profile-thumb{
    overflow: hidden;
    width: 180px;
    height: 180px;
    border: #fff 3px solid;
    border-radius: 55px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    background: #fff;
}

.profile-name{
  margin-bottom: 3px; 
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.profile-job{
  margin-bottom: 14px;
  color: #ccc;
  font-size: 10px;
  text-align: center;
}

.profile-sns {
  padding: 5px 0;
  text-align: center;
  color: #be8a3a;
}

.profile-sns span{
display: block;
font-size: 14px;

}

.profile-sns a {
font-size: 30px;
  margin: 0 5px;
  color: #eea882;
}}








ul.cute {
	padding: 0 0 0 1em;
}
ul.cute  li{
	list-style-type: none;
	padding: .1em .5em;
	position: relative;
  font-weight: 600; 
} 
ul.cute li:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #eea882;	
	content: "\f004";
	position: absolute;
	top: .3em;	/* アイコンの上側位置調整 */
	left: -.8em;	/* アイコンの左側位置調整 */
}


.my-box2{
	background: none;
	border: 1px solid #eea882;	/* 線の太さ・種類・色 */
	margin: 15px 10px; /* 外側の余白 上下・左右 */
	padding: 20px; /* 内側の余白 */
	position: relative;
}
.my-box2:before{
	background-color: #fff;
	content: 'Check♬';
	padding: 2px 10px; /* タイトルの余白 上下・左右 */
	position: absolute;
	top: -10px;
	left: 30px;
	text-align: center;
}
.my-box2:after{
	background: none;
	border: 1px solid #eea882;	/* 線の太さ・種類・色 */
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.my-box3 {/* CTAの日程 */
	border: 2px solid #fff;	/* 内側の線の太さ・種類・色 */
	margin: 10px; /* 外側の余白 */
	padding: 10px; /* 内側の余白 */
	position: relative;	border-radius: 15px;
	z-index: 0;
	background: #6b6351;	
}



.my-box4{
	background-color: #fff;	/* 背景色 */
	border: 2px solid #eea882;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
	padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
	position: relative;
}
.my-box4:before{
	background-color: #eea882;	/* 吹き出し背景色 */
	border-radius: 5px;
	color: #fff;	/* 吹き出し文字色 */
	content: 'この日の毎日来客レシピなお献立MENU';
	padding: 5px 7px;
	position: absolute;
	left: -10px;
	top: -20px;
}
.my-box4:after{
	border-top: 12px solid #eea882;		/* 吹き出し三角部分の色 */
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	content: '';
	position: absolute;
	top: 10px;
	left: 15px;
}


/* レシピの付箋つきbox */
.my-box5{
	background-color: #fff4ee;  
	border-radius: 5px;
	margin: 20px 5px; /* 外側の余白 上下・左右 */
	padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
}
.my-box5:before{
	border: 1px solid #fff; /* 白い実線 */
	border-radius: 5px;
	content: '';
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
.my-box5:after{
	background-color: rgba(249,223,213,0.9);  /* マステ背景色 */
	background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
	background-position: 0 0, 8px 8px;  /* 水玉の距離 */
	background-size: 15px 15px; /* 水玉の大きさ */
	border-left: 2px dotted rgba(0,0,0,0.1);
	border-right: 2px dotted rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	content: 'Recipe Notes';
	display: block;
	padding: 5px 20px;  
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}
.my-box6{
	background-color: #fff;	/* 背景色 */
	border: 1px solid #ccc; /* 線の太さ・種類・色 */
	box-shadow:1px 1px 6px 0px #ccc;
	-moz-box-shadow:1px 1px 6px 0px #ccc;
	-webkit-box-shadow:1px 1px 6px 0px #ccc;
	-o-box-shadow:1px 1px 6px 0px #ccc;
	margin: 20px 5px; /* 外側の余白 上下・左右 */
	padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
}
.my-box6:after{
	background-color: #d9ccb3; /* マステ部分の色1 */
	background-ima7e: linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be), linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be); /* マステ部分の色2 */
	background-position: 0 0, 12px 12px;
	background-size: 24px 24px;
	border-left: 2px dotted rgba(255,255,255,0.9);
	border-right: 2px dotted rgba(255,255,255,0.9);
	box-shadow: 0 0 5px rgba(255,255,255,0.5);
	content: 'おいしい理由';
	display: block;
	margin: 0 0 10px 0;
	padding: 5px 20px;
	color: #fff;  /* マステ部分文字色 */
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}


.my-box7{
	background-color: #fff;	/* 背景色 */
	border: 2px solid #f3cbd0;	/* 線の太さ・種類・色 */
	border-radius: 5px;
	margin: 40px 5px 5px 20px;	/* 外側の余白 上・右・左・下 */
	padding: 25px 20px 10px 20px;	/* 内側の余白 上・右・左・下 */
	position: relative;
}
.my-box7:before{
	background-color: #ef858c;	/* 吹き出し背景色 */
	border-radius: 5px;
	color: #fff;	/* 吹き出し文字色 */
	content: 'コツ';
	padding: 5px 20px;
	position: absolute;
	left: -10px;
	top: -20px;
}
.my-box7:after{
	border-top: 12px solid #ef858c;		/* 吹き出し三角部分の色 */
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	content: '';
	position: absolute;
	top: 10px;
	left: 15px;
}







.mybox2{
  background-color: #fff;	/* 背景色 */
  border: 1px solid #ccc; /* 線の太さ・種類・色 */
  box-shadow:1px 1px 6px 0px #ccc;
  -moz-box-shadow:1px 1px 6px 0px #ccc;
  -webkit-box-shadow:1px 1px 6px 0px #ccc;
  -o-box-shadow:1px 1px 6px 0px #ccc;
  margin: 20px 5px; /* 外側の余白 上下・左右 */
  padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
  position: relative;
  z-index: 0;
}
.mybox2:after{
  background-color: #d9ccb3; /* マステ部分の色1 */
  background-image: linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be), linear-gradient(45deg, #dfd4be 25%, transparent 25%, transparent 75%, #dfd4be 75%, #dfd4be); /* マステ部分の色2 */
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  border-left: 2px dotted rgba(255,255,255,0.9);
  border-right: 2px dotted rgba(255,255,255,0.9);
  box-shadow: 0 0 5px rgba(255,255,255,0.5);
  content: 'テーマ';
  display: block;
  margin: 0 0 10px 0;
  padding: 5px 20px;
  color: #fff;  /* マステ部分文字色 */
  text-align: center;
  position: absolute;
  top: -10px;
  left: 20px;
  transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
}*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.box-kaizen {
  margin: 2em 0;
  background: #fff3e2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box-kaizen .box-title {
  font-size: 1.2em;
  background: #eea882;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box-kaizen p {
  padding: 15px 20px;
  margin: 0;
}


.box-kurou-sippai {
  margin: 2em 0;
  background: #fff3e2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box-kurou-sippai .box-title {
  font-size: 1.2em;
  background: #5fc2f5;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box-kurou-sippai p {
  padding: 15px 20px;
  margin: 0;
}


/* ヘッダー下おすすめ記事横スクロール */
.recommend {
  width: 1100px;/* コンテンツ幅と合わせる */
  margin: 40px auto;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
}
.recommend-box {
  width: 300px;
  height: 230px; 
  margin-right: 20px;
  padding: 10px;
  border: 2px solid #eee;
  box-sizing: border-box;
}
.last-box {
 margin-right:0;
}
.recommend-image img {
  max-width: 100%;
  height: auto;
}
/* 1100px以下 */
@media screen and (max-width: 1100px) {
  .recommend {
  width: 83.9%;
  margin: 20px auto;
}
  .recommend-box {
  width: 200px;
  height: 200px;
}
}
/* タブレット・スマートフォン向け */
@media screen and (max-width: 768px) {
  .recommend-container {
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
}
  .recommend {
   margin: 20px auto;
   width: 660px;
}
  .recommend-box {
  width: 150px;
  height: 190px;
}
}
/* iPhone5s以下向け対策 */
@media screen and (max-width: 320px) {
   .recommend {
   width: 550px;
}
 .recommend-box {
  margin-right:10px;
  width: 130px;
  height:180px;
}
}@media screen and (max-width: 1100px) {
  #recommend-container {
      overflow: scroll;
  }  }
/* ヘッダー下おすすめ記事横スクロールここまで */

.cp_timeline03 {
	position: relative;
	margin: 3em auto;
}
.cp_timeline03:before {
	position: absolute;
	top: 0;
	width: 4px;
	height: 100%;
	content: '';
	background-color: #6b6351;
	left: 30px;
}
.cp_timeline03 .timeline_group {
	position: relative;
	padding-top: 55px;
}
.cp_timeline03 .timeline_group:not(:first-of-type) {
	margin-top: 4rem;
}
.cp_timeline03 .time_year {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.5rem 1.5rem;
	color: #fff;
	background-color: #6b6351;
	width: 100%;
	-webkit-box-sizing: border-box;
					box-sizing: border-box;
}
.cp_timeline03 .timeline_item {
	margin-bottom: 1em;
	position: relative;
	padding-left: 80px;
}
.cp_timeline03 .timeline_item:not(:last-of-type) {
	margin-bottom: 2em;
}
.cp_timeline03 .timeline_item:before {
	position: absolute;
	z-index: -1;
	left: 0;
	width: 100%;
	height: 3px;
	content: '';
	background-color: #6b6351;
	top: 50%;
	-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
}
.cp_timeline03 .time {
	position: absolute;
	left: 0;
	box-sizing: border-box;
	min-width: 65px;
	min-height: 65px;
	padding: 0.5em 0.5em;
	text-align: center;
	color: #fff;
	background-color: #6b6351;
	top: 50%;
	margin-top: -33px;
	border-radius: 65px;
}
.cp_timeline03 .time_day {
	font-size: 1em;
	font-weight: 700;
	display: block;
}
.cp_timeline03 .time_month {
	font-size: 0.8em;
	display: block;
	text-transform: uppercase;
}
.cp_timeline03 .desc {
	padding: 0.5em 1em;
	border-left: 3px solid #6b6351;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	font-size: 0.9em;
}
.cp_timeline03 .desc .flag {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0;
	padding: 0;
	padding-bottom: 0.3em;
}
@media only screen and (max-width: 767px) {
	.cp_timeline03:before {
		left: 0;
	}
	.cp_timeline03 .timeline_group {
		padding-top: 40px;
	}
	.cp_timeline03 .timeline_item {
		padding-top: 60px;
		padding-left: 20px;
	}
	.cp_timeline03 .timeline_item:before {
		top: 90px;
	}
	.cp_timeline03 .time {
		top: 40px;
		border-radius: 0 20px 20px 0;
		min-height: 2em;
	}
	.cp_timeline03 .time_day,
	.cp_timeline03 .time_month {
		display: inline-block;
	}
	.cp_timeline03 .desc {
		font-size: 0.8em;
	}
}
/************************************
** アイコンつきリストicon-pon
************************************/
/* ボックス全体 */
.iconbox{
  margin: 0 auto 2em; /* 余白 */
  background: #fff4ee; /* 背景色 */
  border-radius:4px; /* 角丸 */
  max-width:600px; /* 横幅 */
  padding: 0; /* 余白 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
}
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 18px; /* 文字サイズ */
  background: #6b6351; /* 背景色 */
  text-align: center; /* 文字配置 */
  color: #fff; /* 文字色 */
  font-weight: bold; /* 文字太さ */
  letter-spacing: 0.05em; /* 文字間隔 */
  border-radius:4px 4px 0 0; /* 角丸 */
  line-height:1.5; /* 行間 */
  padding:1em 2em; /* 余白 */
}
/* 段落の余白リセット */
.iconbox p {
  margin: 0;/* 文字の余白リセット */
  padding: 0; /* 文字の内側余白リセット*/
}
/* ボックス 中 */
.iconbox .iconbox-wrap{
  display:-webkit-box; /* 配置 */
    display:-ms-flexbox; /* 配置 */
  display:flex; /* 配置 */
  padding:1.3em 2em; /* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
   width: 97%;/*横幅 */
   margin: 0 1% 0 0 !important;/* 余白3 */
   line-height:1.8;/* 行間 */
  -ms-flex-item-align: center;/* 中央寄せ */
   align-self: center;/* 中央寄せ */
}
/* コンテンツ段落 */
.iconbox .iconbox-wrap .box-content p{
  margin-bottom:1em;/*余白 */
}
/* アイコン&吹き出し */
.iconballoon{
  -ms-flex-item-align: end; /* 下部に配置 */
  align-self: flex-end; /* 下部に配置 */
}
/* アイコン */
.iconballoon .icon{
  text-align:center;/* 位置を中央へ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width: 90px; /* 120横幅 */
  margin:0; /* 余白 */
}
/* 吹き出し文字 */
.iconballoon .balloon p{
  line-height:1.4; /* 行間 */
}
/* 吹き出し */
.iconballoon .balloon{
  position:relative; /* 配置 */
  width:140px; /* 横幅 */
  background:#fff; /* 背景色 */
  padding:10px; /* 余白 */
  text-align:center; /* 中央寄せ */
  border:2px solid #999;/* 線(太さ 種類　色) */
  color:#555555;/* 文字色 */
  font-size:14px;/* 文字サイズ */
  font-weight:bold;/* 文字太さ */
  border-radius:10px;/* 角丸 */
  margin-bottom:10px;/* 余白 */
  line-height:1.5; /* 行間 */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after,.balloon:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  position:absolute;
  top:100%;
  left:50%;
}
.iconballoon .balloon:after{
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-top-color:#FFFFFF;
}
.iconballoon .balloon:before{
   border-color:"rgba(153, 153, 153, 0)";
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 1px;
    border-top-color:#999999;
}
/*スマホ*/
@media screen and (max-width: 480px){
/* ボックスタイトル */
.iconbox .box-title {
  font-size: 14px; /* 文字サイズ */
}
/* ボックス 中 */
.iconbox .iconbox-wrap {
    padding: 1em 1em 1em 1.5em;/* 余白 */
}
/* コンテンツ */
.iconbox .iconbox-wrap .box-content{
  font-size:14px;/*文字サイズ */
}
/* アイコン画像 */
.iconballoon .icon img{
  width:40px;/* 80横幅 */
  margin-top:5px;/* 余白 */
}
/* 吹き出し */
.iconballoon .balloon{
  width:80px;/* 横幅 */
  font-size:10px;/* 文字サイズ */
  padding: 1em 0;/* 余白 */
  border: 1px solid #999;/* 線(太さ 種類 色) */
}
/* 吹き出し(三角) */
.iconballoon .balloon:after {
    border-top-width: 12px;
    border-bottom-width: 10px;
    border-left-width: 11px;
    border-right-width: 11px;
    margin-left: -11px;
    border-top-color: #FFFFFF;
}
}
/************************************
** 箇条書き(点)checkmark0010
************************************/
/* 箇条書き */
.iconbox .list {
  list-style: none;/* 行頭記号削除  */
  padding: 0 !important;/* 余白リセット */
  margin: 0 !important;/* 余白リセット */
  border:none;/* 線リセット */
}
/* 箇条書き 行 */
.iconbox .list li { 
  position: relative;/* 行頭記号の配置  */
  margin: 0 0 0.5em 0 !important;/* 余白  */
  padding: 0 0 0.5em 1.4em !important;/* 余白 */
  line-height:1.8;/* 行間 */
}
/* 箇条書き 行頭記号 */
.iconbox .list li:before {
  background-color: #ffa952; /* 記号色 */
  position: absolute; /* 行頭記号の配置 */
  content: ''; /* 空文字 */
  top:13px; /* 上からの距離 */
  left: 0; /* 左からの距離 */
  width: 7px; /* 横幅 */
  height: 7px; /* 縦幅 */
  border-radius: 4px; /*角丸 */
}
/* 箇条書き 行頭記号リセット */
.iconbox .list-number li:after{
  content:'';
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号*/
   .iconbox .list li:before{
     top:8px;/* 上からの距離 */
   }
}
/************************************
** 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.iconbox .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.iconbox .list-number li {
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em !important;/* 余白 */
   line-height:1.8;/* 行間 */
}
/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #fdc44f; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 14px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:4px;/* 上からの距離 */
   width: 22px;/* 横幅 */
   height: 22px;/* 縦幅 */
   line-height: 22px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
/*スマホ*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .iconbox .list-number li{
     padding: 0 0 0.5em 2em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .iconbox .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 18px;/* 横幅 */
    height: 18px;/* 縦幅 */
    line-height: 18px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}


/* 箇条書き(番号) 行頭番号 */
.iconbox .list-number li:before {
  background: #f7bcbc !important; /* 背景色 */
}/************************************
** アイコンフキダシボックス(ブルー)
************************************/




.box-konnakatani{
    border: 4px dotted #eea882;	/* 線の太さ2・種類・色 */
    margin: 30px 20px;	/* 外側の余白 上下・左右 */
    padding: 15px 20px;	/* 内側の余白 上下・左右 */
    position: relative;
}
.box-konnakatani:before{
    content: '＊';
    color: #fff;	/* 左上の花の色 */
    font-size: 50px;	/* 左上の花のサイズ */
    font-weight: bold; 
    position: absolute;
    top: -38px;
    left: -25px;
    transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg); 
    -o-transform: rotate(20deg);
    text-shadow:  0 0 8px #eaa882, 0 0 6px #eaa882, 0 0 4px #eaa882, 0 0 2px #eaa882, 0 0 0.5px #eaa882;	/* 左上の花の縁取りの色 */
}
.box-konnakatani:after{
    content: '*';
    color: #fff;	/* 右下の花の色 */
    font-size: 50px;	/* 右下の花のサイズ */
    font-weight: bold; 
    position: absolute;
    bottom: -45px;
    right: -15px;
    transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg); 
    -o-transform: rotate(20deg);
    text-shadow:  0 0 8px #eaa8bf, 0 0 6px #eaa882, 0 0 4px #eaa882, 0 0 2px #eaa882, 0 0 0.5px #eaa882;	/* 右下の花の縁取りの色 */
}
.cp_stepflow03 {
	font-size: 70%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0 0 1em;
	padding: 0;
}
.cp_stepflow03 > li {
	position: relative;
	display: block;
	width: 21%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-overflow: ellipsis;
	color: #6b6351;
	 -ms-flex: 1;
	-moz-flex: 1;
	-webkit-box-flex: 1;
	     flex: 1;
}
.cp_stepflow03 > li .title {
	font-weight: bold;
}
.cp_stepflow03 > li .text {
	display: block;
	padding-right: 1.5em;
}
.cp_stepflow03 > li .bubble {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 0 0.5em;
	border-radius: 1000px;
	background-color: #6b6351;
}
.cp_stepflow03 > li .bubble::after,
.cp_stepflow03 > li .bubble::before {
	position: absolute;
	top: 9px;
	display: block;
	width: 100%;
	height: 3px;
	content: '';
	background-color: #6b6351;
}
.cp_stepflow03 > li.completed,
.cp_stepflow03 > li.completed .bubble {
	color: #6b6351;
}
.cp_stepflow03 > li.completed .bubble,
.cp_stepflow03 > li.completed .bubble::after,
.cp_stepflow03 > li.completed .bubble::before {
	background-color: #6b6351;
}
.cp_stepflow03 > li:last-child .bubble::after,
.cp_stepflow03 > li:last-child .bubble::before {
	width: 0%;
	margin-right: 50%;
}
.cp_stepflow03 > li.active,
.cp_stepflow03 > li.active .bubble {
	color: #6b6351;
}
.cp_stepflow03 > li.active .bubble,
.cp_stepflow03 > li.active .bubble::after,
.cp_stepflow03 > li.active .bubble::before {
	background-color: #6b6351;
}






.box-nyukai-tokuten {
  margin: 2em 0;
  background: #fff4ee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); border-radius: 3px;
}
.box-nyukai-tokuten .box-title {
  font-size: 1.2em;
  background: #6b6351;
  padding: 10px 4px 10px 4px; /* 内側の余白 上・右・下・左 */
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: -0.05em;
}
.box-nyukai-tokuten p {
  padding: 15px 20px;
  margin: 0;
}




/*タブ切替6表示*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  }
  .tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #fff4ee; /*タブ下線色*/
  display: block;
  order: -1;
  }
  .tab-label { /*ラベル*/
  color: #fff; /*文字色*/
  background: #cacaca; /*非アクティブタブの色*/
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
  }
  .tab-label:not(:last-of-type) {
  margin-right: 5px;
  }
  .tab-wrap label:hover { /*タブラベル　ホバー色*/
  background:rgba(131,155,92,0.6);
  }
  .tab-switch:checked+.tab-label { /*選択タブの色*/
  background: #6b6351;
  }
  .tab-switch { /*ラジオボタン非表示*/
  display: none;
  }
  .tab-wrap .tab-body >  div {
  display: none;
  }
  .tab-body { /*コンテンツ内容部分*/
  width: 100%;
  padding:10px;
  }
  /*タブのコントロール*/
  .tab-wrap #tab1:checked ~ .tab-body > .body1 {
  display: block;
  }
  .tab-wrap #tab2:checked ~ .tab-body > .body2 {
  display: block;
  }
  .tab-wrap #tab3:checked ~ .tab-body > .body3 {
  display: block;
  }
  .tab-wrap #tab4:checked ~ .tab-body >  .body4 {display: block;}
.tab-wrap #tab5:checked ~ .tab-body >  .body5 {display: block;}
 
.tab-wrap #tab6:checked ~ .tab-body >  .body6 {display: block;} 
  .tab-body {
    border-left:2px solid #ffffff; /*左側の枠線*/
    border-right:2px solid #ffffff; /*右側の枠線*/
    border-bottom:2px solid #ffffff; /*下の枠線*/
    border-bottom-left-radius: 5px; /*左下　角の丸み*/
    border-bottom-right-radius: 5px; /*右下　角の丸み*/
    background:rgba(255,255,255,0.3); /*背景色*/
    }





.dropcap:first-letter {	
 
  font-size: 60px;/*文字の大きさ font-family: 'Poppins', sans-serif;*/
  margin-right: 6px;
  margin-top: 6px;
  float: left;
  line-height: 1;/*必要*/
}
/* 高級感profile */
  .checkmark001{
    padding-left:24px;
    position:relative; margin-left: 60px!important;
  }
  .checkmark001:before,
  .checkmark001:after{
    content:"";
    display:block;
    position:absolute;
  }
  .checkmark001:before{
    width:16px;
    height:16px;
    background:#ffffff;
        border:1px solid #000000;
    left:0;top:2px;
  }
  .checkmark001:after{
    border-left:2px solid #ff0000;
    border-bottom:2px solid #ff0000;
    width:18px;
    height:5px;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    left:5px;
    top:3px;
  }
   
.cautionbox{
  margin: 1em 0; margin-left: 60px!important;
  background-color: #ffebee;
  padding: 1em;
}

.cautionbox-title{
  color: #ef5350;
  font-size: 18px;
  font-weight: bold;
}

.cautionbox-title:before{
  font-family: FontAwesome;
  content: "\f303";
  font-size: 17px;
}

.cautionbox p{
  margin: 0;
  padding: 0;
}.sample_box11 {
  width: 260px;/* 紙の横幅 100%にすると全幅表示に */
  padding: 15px;
  margin: 2em auto;
  background: #f7f092;/* 紙の色 */
  color: #000;/* 文字色 */
  box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(2deg);
  word-break: break-all;
}
.sample_box11 p {
   margin: 0; 
   padding: 0;
   font-size: 0.9em;
}
.sample_box11_tape {
   width: 50%;
   height: 35px;
   margin: -25px auto 0;
   background: #989898;
   transform: rotate(-3deg);
   opacity: 0.1;
}
.sample_box11_title {
   text-align: center;
   font-size: 1.3em!important;
   margin-top: 10px!important;
}
.sample_box11_subtitle {
   text-align: center;
   font-size: 0.7em!important;
   margin-bottom: 1em!important;
}
.sample_box2_5 {
  position: relative;
  padding: 1em 1.5em;
  margin: 2em 0;
  background-color: #ffffff;/*背景色*/
  color: #000000;/*文字色*/
  z-index: 1;
}
.sample_box2_5::before,
.sample_box2_5::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.sample_box2_5::before {
  background-color: rgba(255, 255, 255, 0.2);
  left: 0;
  top: 0;
  z-index: -1;
}
.sample_box2_5::after {
  background-color: #ffffc6;/*ズレている方の背景色*/
  top: 5px;
  left: 5px;
  z-index: -2;
}
.sample_box2_5 p {
  margin: 0; 
  padding: 0;
}


.box26 {
  position: relative;
  margin: 2em 2%;
  padding: 0.5em 1em;
  border: solid 3px #eea882;
  border-radius: 8px;
}
.box26 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 130px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #FFF;
  color: #eea882;
  font-weight: bold;
}
.box26 p {
  margin: 0; 
  padding: 0;
}


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

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

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

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


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




body{
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select: none;
  -moz-user-select:none;
  -khtml-user-select:none;
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  } 
  
  /* ボタン全体 */
  .flowbtn12{
    font-family:'Verdana',sans-serif;	
    border-radius: 4px;
    display:inline-block;
    width:90%;
    font-size:20px;
    transition:.4s;		
  
    text-decoration:none;
    border:solid 1px #000;
    color:#000;
    }
    /* ボタン内テキストマウスホバー時 */
    .flowbtn12:hover{
    color:#fff!important;
    border:solid 1px #ffb7ca;
    background:#ffb7ca;
    text-decoration:none;
    }
      /* ボタン内テキスト調整 */
    .flowbtn12 span{
    font-size:14px;	
    position:relative;
    left:8px;
    bottom:2px;	
    }
    /* ulタグの内側余白を０にする */
    ul.snsbtniti2{
    padding:0!important;
  
    }
    /* ボタン全体の位置 */
    .snsbtniti2{
    display:flex;
    flex-flow:row wrap;
    }
    /* ボタン同士の余白 */
    .snsbtniti2 li{
    flex:0 0 24%;
    text-align:center !important;
    }
  
  /*画面幅480px以下の設定
  ------------------------------------------------------------------------------------------------------------------------------------------------------*/
  @media screen and (max-width:480px){
  /* ボタン同士の余白 */
  .snsbtniti2 li{
    flex:0 0 48%;
    text-align:center !important;
    }}
    
  .box27 {/* レシピのポイント付箋付き */
    position: relative;
    margin: 2em 2%;
    padding: 1.5em 1em 0.5em 1em;
    border: solid 3px #eea882;
  }
  .box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #eea882;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
  }
  .box27 p {
    margin: 0; 
    padding: 0;
  }
  
  *, *:before, *:after {
    font-family: '';
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .cp_quote {
    position: relative;
    overflow: hidden;
    width: 90%;
    margin: 1em auto;
    text-align: left;
    color: #333333;
    box-shadow: none !important;
  }
  /* 写真 */
  .cp_quote img {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 120px;
    max-width: 100%;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
  }
  /* 引用 */
  .cp_quote blockquote {
    line-height: 1.6em;
    position: relative;
    display: block;
    margin: 0 0 -50px 0;
    padding: 30px 50px 65px 50px;
    color: #202124;
    border-radius: 8px;
    background: #ffd3bb;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  }
  /* アイコン */
  .cp_quote blockquote:before,
  .cp_quote blockquote:after {
    font-size: 50px;
    font-style: normal;
    position: absolute;
    content: '';
    opacity: 0.3;
  }
  .cp_quote blockquote:before {
    top: 35px;
    left: 20px;
  }
  .cp_quote blockquote:after {
    right: 20px;
    bottom: 35px;
    content: '';
  }
  /* 引用元名 */
  .cp_quote .author {
    font-size: 20px;
    margin: 0;
    text-align: center;
    color: #202124;
  }
  .cp_quote .author h5 {
    font-weight: bold;
    padding: 0px 5px 0px 5px;
    margin: 0;
    opacity: 0.8;
  }
  .cp_quote .author h5 span {
    font-size: .6em;
    font-weight: normal;
    display: block;
    margin: 0;
    padding: 0 5px 0 5px;
  }
  /************************************
  ** スライダー
  ************************************/
  .slide-wrap{
    display:-webkit-box;
    display:-ms-flexbox;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding:0 0 1em;
    margin:0 0 2em 0;
    scroll-behavior: smooth;
  }
  .slide-wrap .slide-content{
    flex: 0 0 90%;
    margin: 0 10px;
    height:100%;
  }
  
  /* ボックス全体スマホのみ横スクロールになります。 */
  
  @media screen and (max-width: 480px){
  .slide-wrap .slide-content {
     flex: 0 0 88%;
     margin: 0px 5px;
     scroll-snap-align:center;
  }
  }
  @media screen and (max-width: 480px){
    .slide-wrap{
       display: flex;
       overflow-x: scroll;
       -webkit-overflow-scrolling: touch;
       overflow-scrolling: touch;
       scroll-snap-type: x mandatory;
       padding:0 0 1em;
       scroll-behavior: smooth;
    }
    .slide-wrap .slide-content {
       height:100%;
       flex: 0 0 88%;
       margin: 0px 5px;
       scroll-snap-align:center;
    }
  }
  
  
  
  .cp_cssslider1 {
    width: 360px;
    height: 240px;
    overflow: hidden;
    margin: 2em auto;
    border: 10px solid #ffffff;
    box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
  }
  .cp_slide1_item {
    width: 360px;
    height: 240px;
    float: left;
    position: relative;
  }
  .cp_slidewrapper1 {
    width: 500%;/* slideの枚数×100% */
    position: relative;
    left: 0;
    animation: slider 20s infinite ease;/* スピード */
  }
  @-webkit-keyframes slider {
    /* 100%を枚数で割った%に割り振る */
    0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    20% {
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px);
    }
    40% {
    -webkit-transform: translateX(-600px);
    transform: translateX(-600px);
    }
    60% {
    -webkit-transform: translateX(-900px);
    transform: translateX(-900px);
    }
    80% {
    -webkit-transform: translateX(-1200px);
    transform: translateX(-1200px);
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
  }
  @keyframes slider {
    /* 100%を枚数で割った%に割り振る */
    0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    20% {
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px);
    }
    40% {
    -webkit-transform: translateX(-600px);
    transform: translateX(-600px);
    }
    60% {
    -webkit-transform: translateX(-900px);
    transform: translateX(-900px);
    }
    80% {
    -webkit-transform: translateX(-1200px);
    transform: translateX(-1200px);
    }
    100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
  } 
  
  /************************************
  ** CVボタン
  ************************************/
  .p-cv-btn-wrap *{
    margin:0 !important;
    padding:0 !important;
    box-sizing: border-box;
  }
  .p-cv-btn-wrap{
    background:#fff4ee;	
    color: #202124;
    padding:1.5em !important;
    margin: 0 0 2em !important;
    font-size:16px;
    line-height:1.8;
  }
  .p-cv-btn-wrap ul,.p-cv-btn-wrap a,.p-cv-note{
    max-width:350px;
    margin: auto !important;
    border:none;
  }
  .p-cv-btn-wrap ul li{
    font-weight:500;
    list-style:none;
    font-size:0.9em;
    position:relative;
    padding-left:1.5em !important;
  }
  .p-cv-btn-wrap ul li:before{
    font-family: "Font Awesome 5 Free";
    content: "\f00c" !important;
    font-weight:600;
    color:#eea882;
    position:absolute;
    left: 0 !important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }
  .p-cv-btn a{
    color:#202124;
    text-decoration:none !important;
    background:#6b6351;
    border-bottom: solid 4px #ffd3bb;
    padding: 0.5em 1em !important;
    border-radius: 7px;
    margin: 0.3em auto !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .p-cv-btn:hover{
    opacity:0.9;
  }
  .p-cv-btn a:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
  }
  .p-cv-btn .p-cv-em{
    font-size:0.9em;
    line-height: 1.3;
    text-align:center;
    font-weight:600;
    display:block;
    color:#90c231;
    background:#fff;
    padding: 5px 10px !important;
    margin: 2px 10px 0px 0 !important;
    border-radius: 30px;
    min-width: 55px;
    max-width: 80px;
  }
  .p-cv-btn .p-cv-text{
    font-size:0.9em;
    font-weight: 600;
    color:#fff;
    letter-spacing: 1px;
    border-left: 1px solid #fff;
    line-height: 25px;
    margin: 0.6em auto 0.6em 0 !important;
    padding: 0 0.6em 0 1em !important;
  }
  .p-cv-btn i,.p-cv-btn svg{
    color:#fff;
    min-width:22px;
  }
  .p-cv-url-wrap{
    font-size: 0.5em !important;
    max-width: 350px;
    margin: 0 auto 0.5em !important;
    display: block;
  }
  .p-cv-url-wrap a{
    color: #1a0dab !important;
    text-decoration:underline !important;
  }
  .p-cv-btn-wrap .p-cv-note{
    font-size:0.9em;
    border: 1px solid #90c231;
    margin-top:0.5em !important;
    padding:0.5em 1em !important;
  }
  .sidebar .p-cv-btn-wrap{
    background:#fff;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
  }
  /*320px以下*/
  @media screen and (max-width: 320px){
    .p-cv-btn-wrap{
      padding:1em !important;
    }
  }
  
  
  .p-cv-btn-img{
    margin:0 auto !important;
    text-align:center;
    max-width:350px;
    display:inline-block;
  }
  
  /*320px以下*/
  @media screen and (max-width: 480px){
   
  .p-cv-btn-img{
    margin:0 auto !important;
    text-align:center;
    max-width:350px;
    display:block;
  }
  }
  
  

/* ▼レシピの質問コメントの３つタブ機能の掲載領域の装飾(※必須ではありません) */
.tabbox { margin: 0px; padding: 1em; background-color: #fbf8e9; }

/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tabbox input { display: none; }

/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tab {
   display: inline-block;
   border-width: 1px 1px 0px 1px;
   border-style: solid;
   border-color: #eea882;
   border-radius: 0.75em 0.75em 0px 0px;
   padding: 0.75em 1em;
   color: black;
   background-color: #fff4ee;
   font-weight: bold;
}

/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
   background-color: #ccffcc;
   color: green;
   cursor: pointer;
}

/* ▼チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) */
input:checked + .tab {
   color: #c30000;
   background-color: #ffffff;
   position: relative;
   z-index: 10;
}

/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
   display: none;
   border: 1px solid  #eea882;
   margin-top: -1px;
   padding: 1em;
   position: relative;
   z-index: 0;
   background-color: #fbf8e9;
}

/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; }


/* ▼タブの中身(共通装飾＋非選択状態の装飾)	top: 50%;
	left: 50%; */



  .think .balloon-text-right,.think .balloon-text-left {
    border-radius: 30px;
    }
    .think .balloon-text-right:before {
    border: 1px solid #eff6e8;/*8月ここピンクをかえた*/
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #aaa; /*影の設定*/
    
    width: 8px;
    height: 8px;
    top: 15px;
    left: -12px;
    }
 
         .think .balloon-text-right:after {
    border: 1px solid #eff6e8;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
    
    border-radius: 50%;
    width: 4px;
    height: 4px;
    top: 20px;
    left: -19px;
   
      }


    .think .balloon-text-left:before {
    border: 1px solid #fff;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
    
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 15px;
    right: -12px;
    }
   .think .balloon-text-left:after {
      border: 2px solid #fff4ee;
      background-color: #ffffff;
      box-shadow: 1px 1px 1px #a6a2a2; /*左の会話の影の設定*/
      
      border-radius: 50%;
      width: 4px;
      height: 4px;
      top: 20px;
      right: -19px;
      }
      
     /*新しい——————– 吹き出し——————–*/
    
    
    /* 全体のスタイル */
    .balloon {
      margin: 25px 10px ;
        clear: both;
        width: 100%;
        padding: 10px 0;
      }/* 全体のスタイル */
     
    /* 左画像 */
    
        
    /* 左画像 
    .balloon figure {
      width: 80px;
      height: 80px;
      }*/
    .balloon-image-left {
      margin: 0;
      float: left;
      width: 60px;
      height: 60px;
      margin-right: -70px;
    }
    
     
    /* 右画像 */
    .balloon-image-right {
      margin: 10px;
      float: right;
      width: 60px;
      height: 60px;
      margin-left: -70px;
    }
    
    
    .balloon figure img {
      width: 100%;
      height: 100%;
      
      border-radius: 50%; 
      /*box-shadow: 1px 1px 5px #a6a2a2; アイコンの影の設定*/
      border: 2px solid #999; /*アイコンの枠の設定*/
      margin: 0;
    }
      
      .balloon-image-description {
        color: #202124;			/*文字色*/
        padding: 15px 0 0;
        font-size: 10px;
        text-align: center;
        position: relative;
        bottom: 15px;
      }
      
      .balloon-text-right {
        color: #202124;			/*文字色*/
        position: relative;
        margin-left: 80px;
        padding: 10px;
        border-radius: 10px;
        background: #eff6e8;
        margin-right: 12%;
        float: left;
      }
      
      /* hidariからの吹き出しテキスト線なしに追加上の設定いらないようだが */
      .balloon-text-right {
       background-color: #eff6e8;
      }
      
    
    /* 右からの吹き出しテキスト */
    .balloon-text-left  {
      position: relative; 
      color: #202124;			/*文字色*/
     
      margin-right: 80px;
      padding: 10px;
     
      margin-right: 80px;
      padding: 10px;
      border-radius: 10px;
      background-color: #fff4ee;
      margin-left: 12%;
      float: right;
    }
    .balloon-text-left:before {
      /* 右の三角形を作る */
      position: absolute;
      content: '';
      border: 10px solid transparent;
      top: 15px;
      right: -20px;
    }
    .balloon-text-left:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid #fff4ee;
      top: 15px;
      right: -19px;
    }

    /*画面幅480px以下の設定
    ------------------------------------------------------------------------------------------------------------------------------------------------------*/
    @media screen and (max-width:480px){ /* 右からの吹き出しテキスト */
      .balloon-text-left  {
        position: relative; 
        color: #202124;			/*文字色*/
        font-size: 15px;	
        margin-right: 80px;
        padding: 5px;
       
        margin-right: 80px;
        padding: 10px;
        border-radius: 10px;
        background-color: #fff4ee;
        margin-left: 12%;
        float: right;
      }
    }
    
    
    /* 左の三角形を作る */
    /* 三角部分 */
    .balloon-text-right:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      top: 15px;
      left: -20px;
    }
    
     .balloon-text-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid #eff6e8;
      top: 15px;
      left: -19px;
    }
    /* 回り込み解除 */
    .balloon:after,.balloon:before {
      clear: both;
      content: "";
      display: block;
      }
     
    .balloon p {
    margin: 0 0 20px;font-size: 16px !important;	/*文字サイズ*/
    }
    .balloon p:last-child {
    margin-bottom: 0;
    }
     
   
    /*box-shadow: 1px 1px 5px #a6a2a2; アイコンの影の設定*/  
    
 
  .cp_timeline02 {
        position: relative;
        margin: 3em 3%;
        overflow: auto;
        }
        .cp_timeline02:before {
        position: absolute;
        left: 50%;
        width: 5px;
        height: 100%;
        content: '';
        background: #eea882;
        }
        .cp_timeline02 h2 {
        position: relative;
        clear: both;
        max-width: 6em;
        margin: 0 auto 1em;
        padding: .1em;
        text-align: center;
        background: #eea882 !important;
        border-radius: 8px;
        font-size: 1.2em;
        }
        .cp_timeline02 ul {
        max-width: calc(100% - 4em);
        margin: 0;
        padding: 0 0 0 2em;
        list-style: none;
        }
        .cp_timeline02 li {
        position: relative;
        margin-bottom: 1em;
        padding: 1em;
        background: #fff3e2;
        width: 42%;
        border-radius: 8px;
        border: solid 1px rgba(238,168,130 ,1);
        }
        .cp_timeline02 li:before {
        position: absolute;
        top: 12px;
        left: -14px;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 15px 10px 0;
        border-color: transparent #FFF8E1 transparent transparent;
        z-index: 0;
        }
        .cp_timeline02 li:after {
        position: absolute;
        top: 12px;
        left: -16px;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 15px 10px 0;
        border-color: transparent #FFCA28 transparent transparent;
        z-index: -1;
        }
        .cp_timeline02 li:nth-child(even) {
        float: right;
        margin-top: 2em;
        }
        .cp_timeline02 li:nth-child(odd) {
        float: left;
        }
        .cp_timeline02 li:nth-child(odd):before {
        right: -14px;
        left: auto;
        border-width: 10px 0 10px 15px;
        border-color: transparent transparent transparent #FFF8E1;
        }
        .cp_timeline02 li:nth-child(odd):after {
        position: absolute;
        right: -16px;
        left: auto;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 15px;
        border-color: transparent transparent transparent #FFCA28;
        z-index: -1;
        }
        .cp_timeline02 li:nth-of-type(2n+1) {
        clear: both;
        }
        .cp_timeline02 li .flag {
        padding: 0;
        margin: 0;
        font-weight: bold;
        }
        .cp_timeline02 li .desc {
        font-size: 0.9em;
        line-height: 1.5em;
        }
        .cp_timeline02 li .time {
        font-size: 0.6em;
        color: #ed8299;
        font-weight: bold;
        }
        @media only screen and (max-width: 767px) {
        .cp_timeline02:before {
        left: 0;
        }
        .cp_timeline02 ul {
        z-index: 1;
        padding: 0 0 0 1.5em;
        }
        .cp_timeline02 li {
        width: 100%;
        }
        .cp_timeline02 li:nth-child(even),
        .cp_timeline02 li:nth-child(odd) {
        float: none;
        }
        .cp_timeline02 li:nth-child(odd):before {
        right: auto;
        left: -14px;
        border-width: 10px 15px 10px 0;
        border-color: transparent #FFF8E1 transparent transparent;
        }
        .cp_timeline02 li:nth-child(odd)::after {
        right: auto;
        left: -16px;
        border-width: 10px 15px 10px 0;
        border-color: transparent #FFCA28 transparent transparent;
        }
        }
        
      

.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%);
}
        
                   
                ol.cp_clist {
                    counter-reset:cp_clist;
                    padding: 0.5em 0.5em 0.5em 2em;
                    list-style: none;
                }
                ol.cp_clist li {
                    position: relative;
                    padding: 0em .5em .5em 1.8em;
                    margin-top: 0.8em;
                    color: #333;
                }
                ol.cp_clist li::before {
                    counter-increment: cp_clist;
                    content: counter(cp_clist);
                    position: absolute;
                    top: 0;
                    left: -5px;
                    background: #eea882;
                    padding: 0 0.2em 0 0.2em;
                    height: 1.5em;
                    width: 1.5em;
                    border: .1em solid rgba(0,0,0,.05);
                    text-align: center;
                    font: italic bold 1em/1em Georgia, Serif;
                    border-radius: 1.5em;
                    transition: all .2s ease-out;
                }
                ol.cp_clist li:hover::before {
                    background-color: #F06292;
                    border-color: rgba(0,0,0,.08);
                    border-width: .2em;
                    line-height: 0.8em;
                    color: #fff;
                    transform: scale(1.5);
                }
              
                .cp_cssslider {
                    width: 300px;
                    padding-top: 200px; /* 画像の高さ */

                    position: relative;
                    margin: 2em auto;
                    text-align: center;
                }
                .cp_cssslider > img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    transition: all 0.5s;
                    border-radius: 3px;
                    box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
                }
                .cp_cssslider input[name='cp_switch'] {
                    display: none;
                }
                /* サムネイル */
                .cp_cssslider label {
                    margin: 15px 5px 0 5px;
                    border: 2px solid #ffffff;
                    display: inline-block;
                    cursor: pointer;
                    transition: all 0.5s ease;
                    opacity: 0.6;
                    border-radius: 3px;
                }
                .cp_cssslider label:hover {
                    opacity: 0.9;
                }
                .cp_cssslider label img {
                    display: block;
                    width: 40px;
                    border-radius: 2px;
                }
                .cp_cssslider input[name='cp_switch']:checked + label {
                    border: 2px solid #FF7043;
                    opacity: 1;
                }
                .cp_cssslider input[name='cp_switch'] ~ img {
                    opacity: 0;
                }
                .cp_cssslider input[name='cp_switch']:checked + label + img {
                    opacity: 1;
                }   
 /* ================================
                 * 光るボタン *
                ================================ */
                .btn-cv {
                  padding: .5em 0;
                  margin: .4em auto; /* tuika  */
                  overflow: hidden;
                  position: relative;
                }
                .btn-cv a {
                  border-radius: 6px;
                  box-shadow: 1px 1px 5px 0 #a1a1a1;
                  color: #fff;
                  display: block;
                  font-size: 20px;
                font-weight: bold;
                  line-height: 1.2;
                  margin: .4em auto;
                  padding: .8em 1em .8em;
                  position: relative;
                  text-align: center;
                  text-decoration: none;
                  -webkit-transition: .2s ease-in-out;
                  transition: .2s ease-in-out;
                  width: 320px;　
                }
                .btn-cv.is-fz20 a {
                  font-size: 20px;
                }
                .btn-cv a img {
                  vertical-align: middle;
                }
                .btn-cv a:after {
                  content: ' ' !important;
                }
                
                
                /* 2つ連続で並べる場合の余白 */
                .btn-cv + .btn-cv a {
                  margin-top: 0;
                }
                
                /* 黄色ボタン */
                .btn-cv a {
                  background: #fad0b9;
                  background: -webkit-linear-gradient(#fad0b9, #ee8488);
                  background: linear-gradient(#fad0b9, #ee8488);
                  text-shadow: 0 0 10px rgba(255,255,255,.5), 1px 1px 1px rgba(0,0,0,1);
                }
                
                /* 赤pinkボタン */
                .btn-cv.is-red a {
                  background: #e99383;
                  background: -webkit-linear-gradient(  #ffd3bb,  #eea882);
                  background: linear-gradient(  #ffd3bb,  #eea882);
                }
                
                /* 青ボタン紫 */
                .btn-cv.is-blue a {             
                             
                background: #b084b0;	/*a227c6背景色（古いブラウザ用）*/
                background: -webkit-linear-gradient(#b084b0, #d2a8d0);	/*a227c6グラデーション750e9e*/
                background: linear-gradient(#b084b0, #d2a8d0);			/*a227c6同上750e9e*/
              }

                /* 緑をオレンジにCTAボタン */
                .btn-cv.is-green a {
                  background: #fe7200;
                  background: -webkit-linear-gradient(#fe7200, #fe7200);
                  background: linear-gradient(#fe7200, #fe7200);
                }
                
                /* チョコレート色ボタン */
                
                .btn-cv.is-chocolat a {
                  background: #1c0c09;
                  background: -webkit-linear-gradient(#1c0c09, #281310);
                  background: linear-gradient(#1c0c09, #281310);
                }
                
                /* グレー色ボタン */
                
                .btn-cv.is-gray a {
                  background: #6b6351;
                  background: -webkit-linear-gradient(#6b6351, #6b6351);
                  background: linear-gradient(#6b6351, #6b6351);
                }
                
                /* orangeボタン */
                .btn-cv.is-orange a {
                  background: #e48d00;
                  background: -webkit-linear-gradient(#ffa800,#ff8400);
                  background: linear-gradient(#ffa800,#ff8400);
                }
        
                
                /* ボタンの光沢 */
                .is-reflection a {
                  overflow: hidden;
                }
                .is-reflection a:after {
                  -moz-animation: is-reflection 4s ease-in-out infinite;
                  -moz-transform: rotate(45deg);
                  -ms-animation: is-reflection 4s ease-in-out infinite;
                  -ms-transform: rotate(45deg);
                  -o-animation: is-reflection 4s ease-in-out infinite;
                  -o-transform: rotate(45deg);
                  -webkit-animation: is-reflection 4s ease-in-out infinite;
                  -webkit-transform: rotate(45deg);
                  animation: is-reflection 4s ease-in-out infinite;
                  background-color: #fff;
                  content: " ";
                  height: 100%;
                  left: 0;
                  opacity: 0;
                  position: absolute;
                  top: -180px;
                  transform: rotate(45deg);
                  width: 30px;
                }
                /* アニメーションを遅延させる */
                .is-reflection + .is-reflection a:after {
                  -webkit-animation-delay: .3s;
                  animation-delay: .3s;
                }
                @keyframes is-reflection {
                  0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
                  80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
                  81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
                  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
                }
                @-webkit-keyframes is-reflection {
                  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
                  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
                  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
                  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
                }
                
                /* MediaQuery : スマホ対応 */
                @media only screen and (max-width: 767px) {
                  /* コンバージョンボタン */
                  .btn-cv a {
                    font-size: 0.8em;
                    margin: 0 auto 1em;
                    width: 94%;
                  }
                }
 
 /************************************
** ボックスナビponnhiro
************************************/
.p-nav{
	margin:2em 3px;/* 全体外余白 */
	padding:0;/* 全体内余白 */
	}
	.p-nav ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	list-style:none;
	margin:0;
	padding:0;
	border:none;
	}
	.p-nav ul li{
	-ms-flex-preferred-size: calc(100%/4);/* 4列 */
	flex-basis: calc(100%/4);/* 4列 */
	margin:0;
	padding:0;
	text-align:center;
	box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	-ms-flex-direction: column-reverse;
	flex-direction: column-reverse;
	min-height:30px;/* 100最低の高さ */
	cursor:pointer;
	background:#fff;/* 背景色 */
	}
	.p-nav ul li:hover{
	z-index:2;
	box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
	transition: 0.35s ease-in-out;
	}
	.p-nav ul li:before{
	content:unset !important;
	}
	.p-nav ul li a{
	display:block;
	padding: 0.5em 1em;/* 内余白 */
	text-decoration:none;
	width:100%;
	}
	.p-nav ul li a:hover{
	background:none;
	opacity:1;
	}
	.p-nav ul li a img{
	max-width:50% !important;/* 画像横幅 */
	height: auto !important;
	filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
	display: inline-block;
	}
	.p-nav .p-nav-title{
	display: block;
	color: #666;/* 文字色 */
	font-size: 0.7em;/* 文字大きさ */
	letter-spacing: 1px;
	font-weight: 600;/* 文字太さ */
	text-align: center;
	line-height: 1.5;/* 文字行間高さ */
	}
	/* サイドバー */
	.sidebar .p-nav ul li{
	-ms-flex-preferred-size: calc(100%/2);/* 2列 */
	flex-basis: calc(100%/2);/* 2列 */
	}
	/* スマホ */
	@media screen and (max-width: 559px) {
	  .p-nav ul li{
		-ms-flex-preferred-size: calc(100%/2);/*my-box1 2列 */
		flex-basis: calc(100%/2);/* 2列 */
	  }
	}
	/* fontawesome */
	.p-nav ul li a i,.p-nav ul li a svg{
	font-size: 10px;/* アイコン大きさ */
	padding: 10px 0;/* アイコン余白 */
	color: #f6a068;/* アイコン色 */
	display:inline-block;
	}
	/* fontawesome(2番目) */
	.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
	color:#f6a068;/* アイコン色 */
	}
	/* fontawesome(3番目) */
	.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
	color:#f6a068;/* アイコン色 */
	}
	/* fontawesome(4番目) */
	.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
	color:#f6a068;/* アイコン色 */
	}
	
              /* 横スクロール */
.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; }
  
  /* タイトル */
  .slider_ttl {
    color: #333;
    text-align: inherit;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: inherit;
    margin: 0 0 20px 0;
    background-color: #e5e5e5;
    text-indent: 8px;
    font-size: 16px;
    font-weight: 700;
    box-sizing: border-box; }
  
  /* 順位 */
  .rank li {
    counter-increment: rank; }
    .rank li::before {
      content: counter(rank) "位";
      color: #bf0000;
      font-weight: 700;
      line-height: initial; }
     
  /* 価格 */
  .price {
    color: #bf0000;
    line-height: 1.65;
    font-size: 13px;
    margin-top: 4px; }
  
  .price span::after {
    content: '***';
    display: inline-block;
    background: #bf0000;
    color: #fff;
    font-size: .45em;
    line-height: 1.25;
    vertical-align: middle;
    box-sizing: border-box;
    padding: .2em .4em; }
  
  .price span.shipping::after {
    content: '*';
    background: 0 0;
    color: #000; }
  
  .price small {
    font-size: .45em;
    color: #000;
    margin-right: .5em; }
  




#slideshow {
    margin: 0 auto;
    padding-top: 50px;
    height: 600px;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
}



.entire-content {
    margin: auto;
    width: 190px;
    perspective: 1000px;
    position: relative;
    padding-top: 80px;
}

.content-carrousel {
    width: 100%;
    position: absolute;
    float: right;
    animation: rotar 15s infinite linear;
    transform-style: preserve-3d;
}

.content-carrousel:hover {
    animation-play-state: paused;
    cursor: pointer;
}

.content-carrousel figure {
    width: 100%;
    height: 120px;
    border: 1px solid #3b444b;
    overflow: hidden;
    position: absolute;
}

.content-carrousel figure:nth-child(1) {
    transform: rotateY(0deg) translateZ(300px);
}
.content-carrousel figure:nth-child(2) {
    transform: rotateY(40deg) translateZ(300px);
}
.content-carrousel figure:nth-child(3) {
    transform: rotateY(80deg) translateZ(300px);
}
.content-carrousel figure:nth-child(4) {
    transform: rotateY(120deg) translateZ(300px);
}
.content-carrousel figure:nth-child(5) {
    transform: rotateY(160deg) translateZ(300px);
}
.content-carrousel figure:nth-child(6) {
    transform: rotateY(200deg) translateZ(300px);
}
.content-carrousel figure:nth-child(7) {
    transform: rotateY(240deg) translateZ(300px);
}
.content-carrousel figure:nth-child(8) {
    transform: rotateY(280deg) translateZ(300px);
}
.content-carrousel figure:nth-child(9) {
    transform: rotateY(320deg) translateZ(300px);
}
.content-carrousel figure:nth-child(10) {
    transform: rotateY(360deg) translateZ(300px);
}

.shadow {
    position: absolute;
    box-shadow: 0px 0px 20px 0px #000;
    border-radius: 1px;
}

.content-carrousel img {
    image-rendering: auto;
    transition: all 300ms;
    width: 100%;
    height: 100%;
}

.content-carrousel img:hover {
    transform: scale(1.2);
    transition: all 300ms;
}

@keyframes rotar {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}



/* airmail */
.sample {
    position: relative;
    padding: 14px; 
    margin: 0 2%;
    width: 96%;
    background: -webkit-repeating-linear-gradient(135deg, #eea882 0px, #eea882 20px, #fff 20px, #fff 40px, #226 40px, #226 60px, #fff 60px, #fff 80px);
    background: repeating-linear-gradient(135deg, #eea882 0px, #eea882 20px, #fff 20px, #fff 40px, #226 40px, #226 60px, #fff 60px, #fff 80px);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 6px rgba(0,0,0,0.6);
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
}
.sample section{
    padding: 4px 10px; /* 変更20px */
    background: #fff;
    color: #430;
    font-size:14px;
}
.sample h2{
    margin: 0;
}
.sample h2 a{
    margin: 0;
    color: #430;
    font-size: 19px;
}
.sample section p{
    margin: 16px 0 0;
    line-height: 1.61;
}
.sample section p a{
    display: block;
    margin: 6px 0 0;
    color: #27c;
}
.sample .stamp{
    float: right;
    margin:0 0 18px 18px;
    padding: 10px;
    background: #fff;
    background: radial-gradient(at center, transparent, transparent 5px, #fff 6px);
    background: -webkit-gradient(radial, center center, 5, center center, 6, from(#fff), color-stop(100%,#fff), color-stop(0%,rgba(255,255,255,0)));
    background-position: -10px -10px;
    background-size: 20px 20px;
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.sample time{
    position: absolute;
    top: 140px; /*140で下100上*/
    right: 9px;/*７*/
    display: inline-block;
    padding: 10px;
    width: 100px;
    height: 100px;
    border: 5px double #6b6351;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #430;
    text-align: center;
    font-size: 16px;
    font-family: 'Bree Serif', serif;
    line-height: 100px;
    -webkit-transform: rotate(-16deg);
    -ms-transform: rotate(-16deg);
    transform: rotate(-16deg);
}
.sample time:before{
    position: absolute;
    top: 14%;
    display: block;
    padding: 0 0 8px;
    width: 82%;
    border-bottom:1px solid #6b6351;
    content: 'Posted at :';
    font-size: 13px;
    line-height: 1;
}
.sample time:after{
    position: absolute;
    bottom: 18%;
    display: block;
    padding: 6px 0 0;
    width: 82%;
    border-top: 1px solid #6b6351;
    content: 'from TOKYO';
    font-size: 11px;
    line-height: 1;
  }
	
	/*画面幅480px以下の設定追加
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width:480px){
    .sample .stamp{
      float: right;
      margin:0 0 20px 20px;
      padding: 10px;
      background: #fff;
      background: radial-gradient(at center, transparent, transparent 5px, #fff 6px);
      background: -webkit-gradient(radial, center center, 5, center center, 6, from(#fff), color-stop(100%,#fff), color-stop(0%,rgba(255,255,255,0)));
      background-position: -10px -10px;
      background-size: 20px 20px;
      -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  }

  .sample section p{
    margin: 14px 0 0;
    
}
  
  .sample time{
      width: 80px;
      height: 80px;font-size: 12px;
  }
  .sample time:before{
      position: absolute;
      top: 14%;
      display: block;
      padding: 0 0 8px;
      width: 82%;
     font-size: 10px;
      line-height: 1;
  }
  .sample time:after{
      position: absolute;
      bottom: 16%;
      display: block;
      padding: 6px 0 0;
      width: 82%;
      font-size: 10px;
      line-height: 1;
    }  }






	/*手動のカールセル　残すか？ラインはいらないように。*/

.horizontal_scroll_wrap{
    background: #fff;
    height: 240px;
    overflow-y: hidden;
    margin: 0 -10px;
}
.scroll_lst {
  text-decoration: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 50px;
    margin: 25px 0 0;
    -webkit-overflow-scrolling: touch;
}
.scroll_item {
    margin-right: 10px;
    display: inline-block;
    width: 220px;
    border: 1px solid #ddd;
    background: #fff;
}
.scroll_item:first-child {
    margin-left: 10px;
}

.scroll_item_inr {
    display: block;
}
.scroll_item_info {text-decoration: none;
    white-space: normal;
    padding: 8px;
}
.scroll_item_ttl {
    font-size: 16px;font-weight: bold;	
    color: #484848;
    line-height: 1.4;
    margin-bottom: 0;
}

.scroll-bun {
  margin     : auto;
  width      : 96%;
  font-size  : 140%;
  line-height: 1.5em;
  text-align : center;
  border     : 1px solid #eea882;
  color      : #eea882;
  background : #fff;
  overflow   : hidden;
}
.scroll-bun span{
  display     : inline-block;
  padding-left: 100%;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime 15s linear infinite;  /*7 17dehayai背景の大きさに変更 */
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}




/* --- 背景が上下左右に動くのBOX定義 ---------字を小さくしたい---remasu------------ */


  .bgText-photomove {
    width: 100%; 
    height: 50px; 
    font-size: 20px; 
    font-weight: bold; 	text-align: center;	/*文字をセンタリング*/
    color: transparent; 
    -webkit-background-clip: text; 
    background-size: cover;                  /* 背景領域を全て隠す */
    background-image: url(https://creme-cremes.com/school/cooking/images/hasselback-potates-min.jpg);  /* 写真 */
    animation : bgText-photomoveAnime 5s linear infinite;  /* 5秒間一定速度で無限に繰り返す */
  } 
    @keyframes bgText-photomoveAnime {                     /* スクロール */
       0% { background-position: 0 0 } 
     100% { background-position: 600px 0px }
  }

  
  .bgText-photomove-mini {  margin: 1px auto;/*センタリング追加*/
    width: 85%; 
    height: 150px; 
    font-size: 13px; 
    font-weight: bold; 	text-align: center;	/*文字をセンタリング*/
    color: transparent; 
    -webkit-background-clip: text; 
    background-size: cover;                  /* 背景領域を全て隠す */
    background-image: url(https://creme-cremes.com/school/cooking/images/hasselback-potates-min.jpg);  /* 写真 */
    animation : bgText-photomove-miniAnime 5s linear infinite;  /* 5秒間一定速度で無限に繰り返す */
  }
    @keyframes bgText-photomove-miniAnime {                     /* スクロール */
       0% { background-position: 0 0 } 
     100% { background-position: 600px 0px }
  }
  
  /*続きを読むボックス*/
  
  .cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 140px; 
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 0%;/* 位置５ */
	width: 16rem;
	font-family: FontAwesome;
	content: ' 続きをよむ';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 5px;
   background-color: rgba(107,99,81,1.0);/*背景色*/
	 
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 250px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	font-family: FontAwesome;
	content: ' 閉じる';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}



.content-slider {  width: 100%;  height: 360px; }
.slider {  height: 320px;  width: 680px;  margin: 40px auto 0;  overflow: visible;  position: relative; }
.mask {  overflow: hidden;  height: 320px; }
.slider ul { margin: 10px;/* 追加 */  padding: 10px;/* 追加 */  position: relative; }
.slider li {  width: 680px;  height: 320px;  position: absolute;  top: -325px;  list-style: none; }
.slider .quote {  font-size: 20px;  font-style: italic; }
.slider .source {  font-size: 14px;  text-align: right; }
.slider li.anim1 {  animation: cycle 15s linear infinite; }
.slider li.anim2 {
  animation: cycle2 15s linear infinite;
}

.slider li.anim3 {
  animation: cycle3 15s linear infinite;
}

.slider li.anim4 {
  animation: cycle4 15s linear infinite;
}

.slider li.anim5 {
  animation: cycle5 15s linear infinite;
}

.slider:hover li {
  animation-play-state: paused;
}

@keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}.scroll-nav {
    /* スクロールバーを見えなくするため */
    height: 48px; /* 実際に表示する高さ */
    overflow-y: hidden;
  }
  
  /* 中身がスクロールするビュー */
  .scroll-nav__view {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
  }
  
  /* 実際にスクロールするオブジェクト */
  .scroll-nav__list {
    /* tableにすることで、横幅指定をすることなくmargin: autoによる中央寄せが可能になる */
    display: table;
    list-style: none;
    margin: 0 auto;
    /* 下方向に余分なpadding部分を持たせ、そこにスクロールバーが表示される */
    padding: 0 0 24px 0;
  }
  
  .scroll-nav__item {
    /* itemを横並びに、かつ親要素がその親要素の横幅からはみだすことが可能になる */
    display: table-cell;
  }
  
  .scroll-nav a {
    display: block;
    padding: 12px;
    /* 文字列の自動改行を禁止 */
    white-space: nowrap;
  }
  
  /* 以下サンプル用デザイン */
  
  .scroll-nav {
    background: rgb(107, 99, 81);
  }
  
  .scroll-nav a {
    color: rgb(224, 224, 224);
    font-family: sans-serif;
    font-size: 14px;
    /* 行高が24pxになるように調整 24/14 */
    line-height: 1.71428;
    text-decoration: none;
  }

/************************************
** スマホで見やすい比較表
************************************/
.comparison-table-wrap{
  width:100%;
  max-width:600px;
  margin: 0 auto 2em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.comparison-table-title{
  background : #6b6351;
  text-align: center;
   color: #fff;
   font-weight: bold;
   padding: 1em;
   letter-spacing: 1px;
  margin: 0;
  font-size:14px;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
}
.comparison-table{
  background:#f8f9fb;
  margin:0;
  padding:0.3em 1em;
}
.comparison-table table{
  border-collapse: separate;
  border-spacing:5px 10px;
  border:none;
  margin-bottom: 0;
}
.comparison-table table th,.comparison-table table td {
  width:50%;
}
.comparison-table table thead th{
  background : #6b6351;
  border:none;
  color:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  padding: 0.8em 0.5em;
  line-height: 1.5;
  border-radius: 3px;
  font-size: 14px;
}
.comparison-table table tbody th{
  background :  #6b6351;
  text-align: center;
  color:#fff;
  border:none;
  border-radius:30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 0.4em 1em;
  font-size: 14px;
  line-height: 1.3;
}
.comparison-table table tbody td{
  background:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  border-radius:3px;
  border:none;
  padding:1.2em;
  color: #555;
  line-height: 1.8;
  text-align:justify;
  vertical-align:top;
}
.comparison-table table tbody td p{
  margin:0;
  padding:0;
  margin-bottom:1em;
  font-size: 14px;
}
.comparison-table table tbody td .td-h{
  text-align:center;
  font-weight:bold;
  color:#6b6351;
  font-size: 16px;
  margin-bottom:7px;
}
@media screen and (max-width: 768px){
  .comparison-table{
    padding:7px;
  }
  .comparison-table table{
    border-spacing:3px 10px;
  }
  .comparison-table table thead th{
    position: -webkit-sticky;
    position: sticky;
    top:0px;
    z-index:100;
  }
}/************************************
** スマホで見やすい比較表(画像比較)
************************************/
/* 比較名背景 */
.comparison-table-img .comparison-table table thead th{
  box-shadow:none !important;
  padding:0;
  margin:0;
}
.comparison-table-img .comparison-table table thead tr{
  background:none !important;
}
.comparison-table-img .comparison-table table thead th img{
  display:block;
}
.comparison-table table thead th p{
  margin:0;
}
/* 画像タイトル */
.comparison-table-img .comparison-table table thead th .th-h{
  color:#fff;
  padding-top:10px;
  margin-bottom:10px;
  font-size:14px;
}
/************************************
** スマホで見やすい比較表(固定追尾なし)
************************************/
@media screen and (max-width: 768px){
  .no-sticky .comparison-table table thead th{
    position:static;
  }}





.my-box8{
	background-color: #eff6e8;  /* 背景色 */
	border-radius: 5px;
	margin: 20px 5px; /* 外側の余白 上下・左右 */
	padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
}
.my-box8:before{
	border: 1px solid #fff; /* 白い実線 */
	border-radius: 5px;
	content: '';
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
.my-box8:after{
	background-color: rgba(249,223,213,0.9);  /* マステ背景色 */
	background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
	background-position: 0 0, 8px 8px;  /* 水玉の距離 */
	background-size: 15px 15px; /* 水玉の大きさ */
	border-left: 2px dotted rgba(0,0,0,0.1);
	border-right: 2px dotted rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
  content: 'La Creme des Cremes';
	display: block;
	padding: 5px 20px;  
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}
.MenuBonustext {
  color: #FA5882;
  font-size: 12px;
  margin-left : 10px ;
  margin-right : 10px ;
}

.btn-contact{
	display:flex;
	display: -ms-flexbox;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.btn-contact > div{
	width:48%;
}
.btn-contact a{
	background-color: #ffffff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f6f6f6));
	background: -webkit-linear-gradient(left top, left bottom, #ffffff, #f6f6f6);
	background: -moz-linear-gradient(left top, left bottom, #ffffff, #f6f6f6);
	background: linear-gradient(to bottom, #ffffff, #f6f6f6);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFFFF', 
  endColorstr='#FFF6F6F6') chroma(color=#000000);
	zoom: 1;
	display: block;
	margin: 0;
	padding: 12px 10px;
	border: none;
	border: 1px solid #d5d5d5;
	outline: none;
	line-height: normal !important;
	color: #705e54;
	font-weight: bold;
	vertical-align: top;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding:20%;
	text-align:center;
}
.btn-contact a:hover{
	background-color: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #ffffff));
	background: -webkit-linear-gradient(left top, left bottom, #f6f6f6, #ffffff);
	background: -moz-linear-gradient(left top, left bottom, #f6f6f6, #ffffff);
	background: linear-gradient(to bottom, #f6f6f6, #ffffff);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFF6F6F6', endColorstr='#FFFFFFFF') chroma(color=#000000);
	zoom: 1;
}
.btn-contact p{
	font-size:2em;
}

.btn-contact small{
	font-size:1.2em;
}
@media screen and (max-width: 701px) {
	.btn-contact{
		display:block;
	}
	.btn-contact > div{
		width:96%;
	}
	.btn-contact a{
		padding:10%;
	}}

 

 
 
.balloon3-right-btm {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #6b6351;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-right-btm:before {
  content: "";
  position: absolute;
  bottom: -8px;
  right: -8px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #6b6351;
  z-index: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}	


.my-box-cta{
	background-color: #dbc5c0;  /* 背景色 */
	border-radius: 5px;
	margin: 20px 5px; /* 外側の余白 上下・左右 */
	padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
}
.my-box-cta:before{
	border: 1px solid #fff; /* 白い実線 */
	border-radius: 5px;
	content: '';
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
.my-box-cta:after{
	background-color: rgba(249,223,213,0.9);  /* マステ背景色 */
	background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
	background-position: 0 0, 8px 8px;  /* 水玉の距離 */
	background-size: 15px 15px; /* 水玉の大きさ */
	border-left: 2px dotted rgba(0,0,0,0.1);
	border-right: 2px dotted rgba(0,0,0,0.1);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
  content: 'おいしく作れましたか？';
	display: block;
	padding: 5px 20px;  
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}
.checkmark00::before{
  font-family:'Font Awesome 5 Free';
  content: "\f00c";
  padding-right:35px; /* 適当に調整 */
  color: #eea882;
  font-weight: 600; 
}




/* リンクカード */
.pb-btn{
  margin: 3em auto;
  max-width:500px;
  width:80%;
  position:relative;
}
.pb-btn p{
  margin:0 !important;
  padding:0 !important;
}
.pb-btn a{
  display:block;
  padding:1.5em 2em 1.3em;
  color:#333 !important;
  background:#FAFAFA;
  border:2px solid #777;
  font-size:16px !important;
  font-weight:600;
  position:relative;
  transition:all 0.2s;
  text-decoration:none;
}
.pb-btn .pb-btn__text{
  max-width: 90%;
  display: block;
  line-height:1.8;
}
.pb-btn .pb-btn__label{
  background: #EE8F81;
  color: #fff;
  display: inline-block;
  padding: 0.5em 1em !important;
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position:absolute;
  top: -12px;
  left: 23px;
  z-index: 1;
}
.pb-btn .pb-btn__add{
  font-size:12px !important;
  letter-spacing:0.5px;
  margin: 7px auto 0 !important;
  max-width:90%;
  color: #EE8F81;
  font-weight:600;
  text-align:center;
}
.pb-btn a:after{
  position: absolute;
  content: "";
  display: inline-block;
  right: 7%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
}
.pb-btn a:hover{
  border-color:#EE8F81;
  transition:0.2s;
  text-decoration:none;
  opacity:1;
}
@media screen and (max-width:600px) {
  .pb-btn{
    width:90%;
  }
  .pb-btn a {
    padding: 1.3em 1.3em 1.2em;
    font-size:14px !important;
  }
  .pb-btn .pb-btn__label{
    left:14px;
  }
  .pb-btn .pb-btn__add{
    text-align:left;
  }}

.pb-btn .pb-btn__label-2{
  color: #EE8F81;
  display: inline-block;
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: absolute;
  top: -24px;
  left: -23px;
  z-index: 1;
  transform: rotate( -5deg);
}
.pb-btn .pb-btn__label-2:before,.pb-btn .pb-btn__label-2:after{
  display:inline-block;
}
.pb-btn .pb-btn__label-2:before{
  content:"＼";
  margin-right:3px;
}
.pb-btn .pb-btn__label-2:after{
  content:"／";
  margin-left:3px;
}



@media (min-width: 751px) {
  .message__youtube {
    margin: 0rem auto 3rem;/* 33 */
    display: flex;
    justify-content: space-between; }

}
@media (min-width: 1921px) {
  .message__youtube {
    width: 1086px;
    margin: 20px auto 30px; } 	/* 200円の高さ230 */}
@media (max-width: 750px) {
  .message__youtube {
    margin: 3rem 0 0 0; }	/* 30円の高さ */ }
@media (min-width: 751px) {
  .message__youtube iframe {
    width: 32%;	/* PC */
    height: auto; } }
@media (min-width: 1921px) {
  .message__youtube iframe {
    width: 520px;
    height: 340px; } }
@media (max-width: 750px) {	/* SP */
  .message__youtube iframe {
    width: 100%;
    height: 50vw; } }
@media (max-width: 750px) {	/* sp 30 */
  .message__youtube iframe:nth-of-type(n+2) {
    margin: 3rem 0 0 0; } }
  
    
    
/*背景色（ストライプ）をつける*/
.box21 {
  margin: 2em auto;
  padding:2em;/*内側余白*/
  background-image: repeating-linear-gradient(-45deg,#f2f3f7 0, #f2f3f7 3px,transparent 3px,transparent 6px);/*ストライプ*/
  
  }


  ul.box-sotoiro, ol.box-sotoiro {
    background: #ffffff;/*背景色*/
    padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
    border: solid 10px gray;/*線の種類 太さ 色*/
  }
  
  ul.box-sotoiro li, ol.box-sotoiro li {
    line-height: 1.5; /*文の行高*/
    padding: 0.5em 0; /*前後の文との余白*/
  }
  
  .box-design17 {
    margin: 40px auto 20px;
    padding: 30px 20px 10px 20px;
    border: 2px solid #eea882;
  }
  .box-design17-ttl {
    background-color: #eea882;
    color: #fff;
    border-radius: 100vh;
    padding: 10px 1.5em;
    margin: -55px 0 0 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .box-design17-ttl::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border: 15px solid transparent;
    width: 0;
    height: 0;
    border-top-color: #eea882;
  }


  
  ul.remasu {padding: 0 0 0 1em;}
  ul.remasu li {
    list-style-type: none;font-size: 100%;	
    padding: .1em .7em;	position: relative;font-weight: 600; margin: 3px;
  } 
  ul.remasu li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 500;
    content: "\f14a";
    position: absolute;
    top: .3em;	/* アイコンの上側位置調整 */
    left: -.8em;	/* アイコンの左側位置調整 */	color: #eea882;	/* 偶数のアイコンの色 */
  }
    


/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){ 
  ul.remasu li {font-size: 20px;		line-height: 1.2;
  } 
}
      




  ol.maru-ol-listtag {
    counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding: 0.3em 0.8em;
    border: solid 2px #ffb107;
  }
  ol.maru-ol-listtag li {
    border-bottom: dashed 1px orange;
    position: relative;
    padding: 0.5em 0.5em 0.5em 30px;
    line-height: 1.5em;
  }
  ol.maru-ol-listtag li:before{
    /* 以下数字をつける */
    position: absolute;
    counter-increment: number;
    content: counter(number);
    /*数字のデザイン変える*/
    display:inline-block;
    background: #ffb107;
    color: white;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight:bold;
    font-size: 15px;
    border-radius: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    /*以下 上下中央寄せのため*/
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  ol.maru-ol-listtag  li:last-of-type {
    border-bottom: none; /*最後のliの線だけ消す*/
  }





  ul.maru-il-listtag {
    padding: 0;
  }
  
  ul.maru-il-listtag li {
    position: relative;
    list-style-type: none!important;/*ポチ消す*/
    padding: 0.5em 0.5em 0.5em 0.5em;
    margin-bottom: 5px;
    line-height: 1.5;
    background: #dbebf8;
    vertical-align: middle;
    color: #505050;
    border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
  }
  
  ul.maru-il-listtag li:before{ 
    display:inline-block; 
    vertical-align: middle;
    /*以下白丸つくる*/
    content:'';
    width:1em;
    height: 1em;
    background: #fff;
    border-radius: 50%;
    margin-right: 8px;
  }


/*116sub,sideコンテンツ内のレースつきをマカロンに設定type6pop-hukidasi*/
h3.h3-made-in-the-lesson {
	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;
}.boxmi36 {
  position: relative;
  margin: 3em 0 1em 0;
  background: #fff6e6;
  box-shadow: 0 2px 3px rgba(0,0,0,.22);
  padding: 22px 8px 22px 8px;
  background-color: #fff6e6;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff6e6 0%, #fff6e6 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
  background-size: 8px 100%,100% 2em;
  line-height: 2;
  color: #ee8992;
  font-weight: bold;
}
.boxmi36-title {
  background: #fff6e6;
  font-size: 1.2em;
  padding: 7px 0 0 16px;
  margin: -16px -8px 16px -8px;
  color: #ee8992;
  font-weight:bold;
}
.boxmi36:after {
  position: absolute;
  content: "";
  top: 25px;
  width: 30%;
  height: 35px;
  opacity: 0.8;
  margin: -35px auto 10px 35%;
  background-color: #ffeaea;
  background-image:
  linear-gradient(-45deg, rgba(255,188,188,.5) 25%, transparent 25%, transparent 50%, rgba(255,188,188,.5) 50%, rgba(255,188,188,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,188,188,.5) 25%, transparent 25%, transparent 50%, rgba(255,188,188,.5) 50%, rgba(255,188,188,.5) 75%, transparent 75%, transparent 100%);
  background-size: 35px 35px;
  transform: rotate(-2deg);
  left: 10px;
  right: 10px;
  box-shadow:0 0 5px rgba(0,0,0,.2);
}
.boxmi36 p {
  margin: 0;
  padding: 0;
}