@charset "utf-8";
/* CSS Document */

/*=================================

           SP

=================================*/



@media screen and (max-width:640px){
	/*------howto_block01 IN------*/
	.howto_block01 .howto_block01_head {
		text-align: center;
	}
	.howto_block01 .howto_block01_head img {
		width: 100%;
	}
	/*------howto_block01 OUT------*/

	/*------howto_block02 IN------*/
	.howto_block02 {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_bg01_sp.jpg);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 100% auto;
	}
	.howto_block02 .howto_block02_inner01 {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		height: 335px;
	}
	.howto_block02 .howto_block02_inner02 {
		width: 100%;
		color: #ffffff;
		text-align: left;
	}
	.howto_block02 .howto_block02_head {
		font-size: 1.625em;
		font-weight: normal;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		line-height: 1.19;
		text-align: center;
	}
	.howto_block02 .howto_block02_text {
		margin: 20px 0 0;
		font-size: 0.75em;
		line-height: 1.75;
		text-align: center;
	}
	/*------howto_block02 OUT------*/


	.reason_mov{
		background: #e7e2cb;
		padding: 50px 15px;
	}
	.reason_mov h3{
		width: 250px;
		margin: 0 auto 15px;
	}
	.reason_mov .main_frame{
		display: block;
		margin: 0 auto 20px;
	}

	.reason_mov a.txt {
		color: #232323;
		position: relative;
		margin: 0 25px;
		padding: 0 0 0 35px;
		font-size: 0.75em;
		font-weight: bold;
	}
	.reason_mov a.txt:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 25px;
		height: 25px;
		margin-top: -13px;
		background-color: #ffffff;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	.reason_mov a.txt:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 9px;
		width: 0;
		height: 0;
		margin-top: -6px;
		border-style: solid;
		border-width: 6px 0 6px 9px;
		border-color: transparent transparent transparent #232323;
	}
	
	/*------howto_block03 IN------*/
	.howto_block03 {
		padding: 50px 15px;
		background-color: #ffffff;
	}
	.howto_block03 .howto_block03_inner {
		color: #232323;
		text-align: left;
	}
	.howto_block03 .howto_block03_inner > *:first-child,
	.howto_block03 .howto_block03_inner > section:first-child > *:first-child {
		margin-top: 0;
	}
	.howto_block03 .howto_block03_head01 {
		position: relative;
		margin: 50px 0 0;
		padding: 100px 0 0;
		color: #085a4a;
		font-size: 1.625em;
		font-weight: normal;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		line-height: 1.1;
		text-align: center;
	}
	.howto_block03 .howto_block03_head01:before,
	.howto_block03 .howto_block03_head01:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 78px;
		background-repeat: no-repeat;
	}
	.howto_block03 .howto_block03_head01:before {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_bg02_sp.png);
		background-position: 50% 0;
		-webkit-background-size: auto 78px;;
		background-size: auto 78px;
	}
	.howto_block03 .howto_block03_head01:after {
		background-position: 50% 43px;
		-webkit-background-size: auto 19px;;
		background-size: auto 19px;
	}
	.howto_block03 .howto_block03_head01.point01:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx01_sp.png);
	}
	.howto_block03 .howto_block03_head01.point02:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx02_sp.png);
	}
	.howto_block03 .howto_block03_head01.point03:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx03_sp.png);
	}
	.howto_block03 .howto_block03_head01.point04:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx04_sp.png);
	}
	.howto_block03 .howto_block03_head01.point05:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx05_sp.png);
	}
	.howto_block03 .howto_block03_head01.point06:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx06_sp.png);
	}
	.howto_block03 .howto_block03_head01.point07:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx07_sp.png);
	}
	.howto_block03 .howto_block03_head01.point08:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx08_sp.png);
	}
	.howto_block03 .howto_block03_head01 > span {
		display: block;
		margin: 0 0 10px;
		font-size: 0.6153em;
	}
	.howto_block03 .howto_block03_head01 + p.sub_txt{
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		text-align: center;
		margin-bottom: 30px;
		font-size: 0.9375em;
	}
	.howto_block03 .howto_block03_head01 + * {
		margin-top: 30px !important;
	}
	.howto_block03 .howto_block03_head02 {
		font-size: 0.5652em;
		font-weight: bold;
	}
	.howto_block03 .howto_block03_text01 {
		font-size: 0.75em;
		line-height: 1.75;
	}
	.howto_block03 .howto_block03_text02 {
		margin: 10px 0 0;
		border-top: 1px solid #e6e6e6;
	}
	.howto_block03 .howto_block03_text02 > dl {
		display: table;
		width: 100%;
		border-bottom: 1px dashed #e6e6e6;
	}
	.howto_block03 .howto_block03_text02 > dl > * {
		display: table-cell;
		padding: 10px 0 5px;
		vertical-align: bottom;
	}
	.howto_block03 .howto_block03_text02 > dl > dt {
		font-size: 0.5652em;
		line-height: 1.22;
	}
	.howto_block03 .howto_block03_text02 > dl > dd {
		font-size: 0.6875em;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		line-height: 1;
		text-align: right;
		white-space: nowrap;
		letter-spacing: -1px;
	}
	.howto_block03 .howto_block03_text02 > dl > dd > span {
		display: inline-block;
		margin: 0 0 -3px;
		padding: 0 0.1em 0 0;
		vertical-align: bottom;
		font-size: 2.454em;
		font-style: italic;
	}
	.howto_block03 .howto_block03_text02 > dl.howto_block03_text02_type01 > dd {
		color: #4a2615;
	}
	.howto_block03 .howto_block03_text02 > dl.howto_block03_text02_type02 > dd {
		color: #e40b21;
	}
	.howto_block03 .howto_block03_image01 {
		text-align: center;
	}
	.howto_block03 .howto_block03_image01 img {
		max-height: 86px;
	}
	.howto_block03 .howto_block03_image02 {
		text-align: center;
	}
	.howto_block03 .howto_block03_image03 {
		text-align: center;
	}
	.howto_block03 .howto_block03_image04 {
		text-align: center;
	}
	.howto_block03 .howto_block03_column01 > .howto_block03_column01_col02 {
		margin: 30px 0 0;
	}
	.howto_block03 .howto_block03_column02 > .howto_block03_column02_col02 {
		margin: 30px 0 0;
	}
	.howto_block03 .howto_block03_column03 {
		margin: 30px 0 0;
	}
	.howto_block03 .howto_block03_column03 > .howto_block03_column03_col01 {
		margin: 25px 0 0;
	}
	.howto_block03 .howto_block03_column03 > .howto_block03_column03_col01:first-child {
		margin-top: 0;
	}
	.howto_block03 .howto_block03_column04,
	.howto_block03 .howto_block03_column04 > .howto_block03_column04_col02 {
		overflow: hidden;
	}
	.howto_block03 .howto_block03_column04 > .howto_block03_column04_col01 {
		float: left;
		width: 46.55%;
		margin: 0 10px 0 0;
	}
	.howto_block03 .howto_block03_column05 > .howto_block03_column05_col02 {
		margin: 30px 0 0;
	}
	
	.howto_block03 .howto_block03_text03 {
		margin: 10px 0 0;
		font-size: 1.3em;
		line-height: 1.4;
		font-weight: bold;
		color: #e60012;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		text-align: center;
	}
	.howto_block03 .howto_block03_text03 span{
		background: linear-gradient(transparent 60%, #faccd0 60%);
	}
	.howto_block03 .link_low-gi{
		margin-top: 15px;
		text-align: center;
	}
	.howto_block03 figure + p.howto_block03_text01 {
		margin: 20px 0 0;
		font-size: 0.75em;
		line-height: 1.75;
	}
	.howto_block03 .howto_block03_note01 {
		margin: 5px 0 0;
	}
	.howto_block03 .howto_block03_note01 > li {
		position: relative;
		padding: 0 0 0 1em;
		font-size: 0.625em;
	}
	.howto_block03 .howto_block03_note01 > li > span {
		position: absolute;
		top: 0;
		left: 0;
	}
	.howto_block03 .howto_block03_text01 span {
		color: #cc0000;
	}
	.howto_block03 .howto_block03_image05,
	.howto_block03 .howto_block03_image06,
	.howto_block03 .howto_block03_image07,
	.howto_block03 .howto_block03_image08 {
		margin: 25px 0 0;
		text-align: center;
	}
	.howto_block03 .howto_block03_image08 img{
		max-width: 80%;
	}
	/*------howto_block03 OUT------*/
  
	/*------howto_block04 IN------*/
  .howto_block04 {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_bg04_sp.png);
    background-color: #0e5245;
		background-repeat: no-repeat;
		background-position: top 10px right;
		background-size: cover;
	}
	.howto_block04 .howto_block04_inner01 {
    width:92.5%;
    margin: 0 auto;
	}
	.howto_block04 .howto_block04_inner02 {
		width: 100%;
		color: #ffffff;
    padding: 13vw 0 5vw;
	}
	.howto_block04 .howto_block04_head {
		width: 80%;
    margin: 0 auto 30px 2vw;
	}
  .howto_block04 #set_movie_lesson{
    width: 92.5vw;
    height: 52vw;
    margin: 0 auto;
  }
	.howto_block04 .howto_block04_text {
		margin: 10px 0 0;
		font-size: 0.75em;
		line-height: 1.75;
		text-align: left;
	}
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-list{
    margin: 0 2vw;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-slide{
    margin: 0 2vw;
  }
  .howto_block04 .howto_block04_column > .howto_lesson_slide li {
    margin: 0 2vw;
    position: relative;
  }
  .howto_block04 .howto_block04_column > .howto_lesson_slide li:first-child {
    margin-top: 0;
  }
  .howto_block04 .howto_block04_column > .howto_lesson_slide li a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .howto_block04 .howto_block04_text > * {
    font-size: 0.875em;
    text-align: left;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-prev{
    left: -7.5vw;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-arrow{
    overflow: hidden;
    top: 61px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    text-indent: -9999em;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-arrow:before{
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide.slick-slider .slick-next:before {
    top: 13.8vw;
    right: -0.52vw;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: translateY(-50%) rotate(45deg);
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-arrow:before {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide.slick-slider .slick-prev:before {
    top: 13.8vw;
    left: -0.52vw;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transform: translateY(-50%) rotate(45deg);
  }
	/*------howto_block04 OUT------*/
  
	/*------howto_block05 IN------*/
  .howto_block05 {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_bg05_sp.jpg);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
	}
	.howto_block05 .howto_block05_inner01 {
    width:92.5%;
    margin: 0 auto;
	}
	.howto_block05 .howto_block05_inner02 {
		width: 100%;
		color: #000000;
    padding: 0 0 5vw;
	}
  .howto_block05 .howto_block05_head {
    margin: 0 auto 20px 2vw;
  }
	.howto_block05 .howto_block05_head .howto_block05_head_inner {
		width: 80%;
    padding-top: 23px;
    position: relative;
	}
	.howto_block05 .howto_block05_head:before {
    content: "";
    background: url(/sweets/chocolate/chocokoka/howto/images/morning_ttl_bg_sp.png) no-repeat;
    display:  block;
    background-size: 80%;
    width: 100%;
    height: 38vw;
    background-position: bottom right 10px;
    margin-bottom: -39vw;
  }
  .howto_block05 .howto_block05_head .howto_block05_icon{
    width: 17vw;
    position: absolute;
    bottom: -10px;
    right: -16vw;
  }
  .howto_block05 .howto_block05_text {
		margin: 10px 0 0;
		font-size: 0.75em;
		line-height: 1.75;
		text-align: left;
	}
  .howto_block05 .howto_block05_column .howto_morning_slide{
    margin-top: 25px;
  }
  .howto_block05 .howto_block05_column .howto_morning_slide .slick-list{
    margin: 0 2vw;
  }
  .howto_block05 .howto_block05_column .howto_morning_slide .slick-slide{
    margin: 0 2vw;
  }
  .howto_block05 .howto_block05_column > .howto_morning_slide li {
    margin: 0 2%;
    display: inline-block;
    width: 28%;
  }
  .howto_block05 .howto_block05_column > .howto_morning_slide li a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .howto_block05 .howto_block05_text > * {
    font-size: 0.875em;
    text-align: left;
  }
  .howto_block05 .morning_movie_area{
    padding: 16px;
    border: 2px solid #14a83b;
    border-radius: 10px;
    background-color: #fffcd1;
    box-sizing: border-box;
  }
  .howto_block05 #set_movie_morning{
    margin: 0 auto;
    width: 100%;
  }
	/*------howto_block05 OUT------*/
}

/*=================================

           PC

=================================*/
	
/*幅769px以上に適用*/
@media screen and (min-width:641px){

	/*------howto_block01 IN------*/
	.howto_block01 {
		overflow: hidden;
		background-color: #e7e2cb;
	}
	.howto_block01 .howto_block01_inner {
		width: 1024px;
		margin: 0 auto;
		text-align: left;
	}
	.howto_block01 .howto_block01_head {
		width: auto;
		margin: 0 -500%;
		background: none;
		text-align: center;
	}
	/*------howto_block01 OUT------*/

	/*------howto_block02 IN------*/
	.howto_block02 {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_bg01_pc.jpg);
		background-repeat: repeat-x;
		background-position: 50% 0;
	}
	.howto_block02 .howto_block02_inner01 {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		width: 1024px;
		height: 400px;
		margin: 0 auto;
	}
	.howto_block02 .howto_block02_inner02 {
		width: 100%;
		color: #ffffff;
		text-align: left;
	}
	.howto_block02 .howto_block02_head {
		font-size: 2.25em;
		font-weight: normal;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		line-height: 1.33;
		text-align: center;
	}
	.howto_block02 .howto_block02_text {
		margin: 40px 0 0;
		font-size: 0.875em;
		line-height: 1.85;
		text-align: center;
	}
	/*------howto_block02 OUT------*/

	.reason_mov{
		background: #e7e2cb;
		padding: 100px 0;
	}
	.reason_mov h3{
		margin-bottom: 35px;
	}
	.reason_mov .main_frame{
		display: block;
		width: 700px;
		margin: 0 auto 35px;
	}
	.reason_mov a img {
		transition: all 0.3s ease;
	}
	.reason_mov a.txt:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background-color: #ffffff;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}
	.reason_mov a.txt:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 11px;
		width: 0;
		height: 0;
		margin-top: -7px;
		border-style: solid;
		border-width: 7px 0 7px 12px;
		border-color: transparent transparent transparent #232323;
		}
	.reason_mov a.txt {
		color: #232323;
		position: relative;
		margin: 0 25px;
		padding: 0 0 0 45px;
		font-weight: bold;
		transition: all 0.3s ease;
	}
	.reason_mov a.txt:hover {
		opacity: 0.7;
	}

	/*------howto_block03 IN------*/
	.howto_block03 {
		padding: 100px 0;
		background-color: #ffffff;
	}
	.howto_block03 .howto_block03_inner {
		width: 700px;
		margin: 0 auto;
		color: #232323;
		text-align: left;
	}
	.howto_block03 .howto_block03_inner > *:first-child,
	.howto_block03 .howto_block03_inner > section:first-child > *:first-child {
		margin-top: 0;
	}
	.howto_block03 .howto_block03_head01 {
		position: relative;
		margin: 100px 0 0;
		padding: 140px 0 0;
		color: #085a4a;
		font-size: 2em;
		font-weight: normal;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		line-height: 1.1;
		text-align: center;
	}
	.howto_block03 .howto_block03_head01:before,
	.howto_block03 .howto_block03_head01:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 97px;
		background-repeat: no-repeat;
	}
	.howto_block03 .howto_block03_head01:before {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_bg02_pc.png);
		background-position: 50% 0;
	}
	.howto_block03 .howto_block03_head01:after {
		background-position: 50% 54px;
	}
	.howto_block03 .howto_block03_head01.point01:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx01_pc.png);
	}
	.howto_block03 .howto_block03_head01.point02:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx02_pc.png);
	}
	.howto_block03 .howto_block03_head01.point03:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx03_pc.png);
	}
	.howto_block03 .howto_block03_head01.point04:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx04_pc.png);
	}
	.howto_block03 .howto_block03_head01.point05:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx05_pc.png);
	}
	.howto_block03 .howto_block03_head01.point06:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx06_pc.png);
	}
	.howto_block03 .howto_block03_head01.point07:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx07_pc.png);
	}
	.howto_block03 .howto_block03_head01.point08:after {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_tx08_pc.png);
	}
	.howto_block03 .howto_block03_head01 > span {
		display: block;
		margin: 0 0 10px;
		font-size: 0.6111em;
	}	
	.howto_block03 .howto_block03_head01 + p.sub_txt{
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		text-align: center;
		margin-bottom: 30px;
		font-size: 1.25em;
	}
	.howto_block03 .howto_block03_head01 + * {
		margin-top: 50px !important;
	}
	.howto_block03 .howto_block03_head02 {
		padding: 25px 0;
		font-size: 0.875em;
		font-weight: bold;
		line-height: 1.85;
		text-align: center;
	}
	.howto_block03 .howto_block03_text01 {
		font-size: 0.875em;
		line-height: 1.85;
	}
	.howto_block03 .howto_block03_text02 {
		border-top: 1px solid #e6e6e6;
	}
	.howto_block03 .howto_block03_text02 > dl {
		display: table;
		width: 100%;
		height: 56px;
		border-bottom: 1px dashed #e6e6e6;
	}
	.howto_block03 .howto_block03_text02 > dl > * {
		display: table-cell;
		padding: 0 0 5px;
		vertical-align: bottom;
	}
	.howto_block03 .howto_block03_text02 > dl > dt {
		font-size: 0.75em;
		line-height: 1.5;
	}
	.howto_block03 .howto_block03_text02 > dl > dd {
		font-size: 1.125em;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		line-height: 1;
		text-align: right;
		white-space: nowrap;
		letter-spacing: -2px;
	}
	.howto_block03 .howto_block03_text02 > dl > dd > span {
		display: inline-block;
		margin: 0 0 -5px;
		padding: 0 0.1em 0 0;
		vertical-align: bottom;
		font-size: 2.444em;
		font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","serif"; /* IEにて"游明朝"の表示バグが存在するため */
		font-style: italic;
		line-height: 1;
	}
	.howto_block03 .howto_block03_text02 > dl.howto_block03_text02_type01 > dd {
		color: #4a2615;
	}
	.howto_block03 .howto_block03_text02 > dl.howto_block03_text02_type02 > dd {
		color: #e40b21;
	}
	.howto_block03 .howto_block03_image03 {
		text-align: center;
	}
	.howto_block03 .howto_block03_column01,
	.howto_block03 .howto_block03_column01 > .howto_block03_column01_col02 {
		overflow: hidden;
	}
	.howto_block03 .howto_block03_column01 > .howto_block03_column01_col01 {
		float: left;
		margin: 0 45px 0 0;
	}
	.howto_block03 .howto_block03_column02,
	.howto_block03 .howto_block03_column02 > .howto_block03_column02_col02 {
		overflow: hidden;
	}
	.howto_block03 .howto_block03_column02 > .howto_block03_column02_col01 {
		float: left;
		margin: 0 60px 0 0;
	}
	.howto_block03 .howto_block03_column03 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 40px 0 0;
	}
	.howto_block03 .howto_block03_column03:after {
		clear: both;
		content: "";
		display: block;
	}
	.howto_block03 .howto_block03_column03 > .howto_block03_column03_col01 {
		width: calc((100% - 29px * 2) / 3);
		margin: 29px 29px 0 0;
	}
	.howto_block03 .howto_block03_column03 > .howto_block03_column03_col01:nth-child(-n+3) {
		margin-top: 0;
	}
	.howto_block03 .howto_block03_column03 > .howto_block03_column03_col01:nth-child(3n) {
		margin-right: 0;
	}
	.howto_block03 .howto_block03_column05 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	.howto_block03 .howto_block03_column05 > .howto_block03_column05_col02 {
		margin: 0 0 0 65px;
	}
	.howto_block03 .howto_block03_column05 > .howto_block03_column05_col02 img {
		max-width: inherit;
	}
	.howto_block03 .howto_block03_text03 {
		margin: 25px 0 0;
		font-size: 2em;
		line-height: 1.4;
		font-weight: bold;
		color: #e60012;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
		text-align: center;
	}

	.howto_block03 .howto_block03_text03 span{
		background: linear-gradient(transparent 60%, #faccd0 60%);
	}
	.howto_block03 .link_low-gi{
		margin-top: 50px;
	}
	.howto_block03 .howto_block03_image05,
	.howto_block03 .howto_block03_image06,
	.howto_block03 .howto_block03_image07,
	.howto_block03 .howto_block03_image08 {
		margin: 25px 0 0;
		text-align: center;
	}
	.howto_block03 figure + p.howto_block03_text01 {
		margin: 30px 0 0;
		font-size: 0.875em;
		line-height: 1.85;
	}
	.howto_block03_text01.center{
		text-align: center;
	}
	.howto_block03 .howto_block03_note01 {
		margin: 5px 0 0;
	}
	.howto_block03 .howto_block03_note01 > li {
		position: relative;
		padding: 0 0 0 1em;
		font-size: 0.688em;
	}
	.howto_block03 .howto_block03_note01 > li > span {
		position: absolute;
		top: 0;
		left: 0;
	}
	.howto_block03 .howto_block03_text01 span {
		color: #cc0000;
	}
	/*------howto_block03 OUT------*/
  
  /*------howto_block04 IN------*/
  .howto_block04 {
    background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_bg04_pc.png);
    background-color: #0e5245;
		background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }
  .howto_block04 .howto_block04_inner01 {
    width: 1024px;
    margin: 0 auto;
    padding-top: 30px;
	}
	.howto_block04 .howto_block04_inner02 {
		width: 100%;
		color: #ffffff;
    padding: 35px 0 65px;
	}
	.howto_block04 .howto_block04_head {
		width: 80%;
    margin: 0 auto 30px;
	}
	.howto_block04 .howto_block04_text {
		margin: 10px 0 0;
		font-size: 0.75em;
		line-height: 1.75;
		text-align: left;
	}
  .howto_block04 #set_movie_lesson{
    width: 720px;
    height: 405px;
    margin: 0 auto;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-list{
    margin: 0 2vw;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-slide{
    margin: 0 2vw;
  }
  .howto_block04 .howto_block04_column > .howto_lesson_slide li {
    margin: 0 2vw;
    position: relative;
    cursor: pointer;
  }
  .howto_block04 .howto_block04_column > .howto_lesson_slide li:hover {
    opacity: 0.8;
  }
  .howto_block04 .howto_block04_column > .howto_lesson_slide li:first-child {
    margin-top: 0;
  }
  .howto_block04 .howto_block04_column > .howto_lesson_slide li a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .howto_block04 .howto_block04_text > * {
    font-size: 1.16em;
    text-align: center;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-prev{
    left: -7.5vw;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-arrow{
    overflow: hidden;
    top: 61px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    text-indent: -9999em;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-arrow:before{
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide.slick-slider .slick-next:before {
    top: 100px;
    right: -0.52vw;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: translateY(-50%) rotate(45deg);
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide .slick-arrow:before {
    content: "";
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide.slick-slider .slick-prev:before {
    top: 100px;
    left: -0.52vw;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transform: translateY(-50%) rotate(45deg);
  }
  /*------howto_block04 OUT------*/
  
  /*------howto_block05 IN------*/
  .howto_block05 {
		background-image: url(/sweets/chocolate/chocokoka/howto/images/renew_index_bg05_pc.png);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
	}
	.howto_block05 .howto_block05_inner01 {
    width:1024px;
    margin: 0 auto;
	}
	.howto_block05 .howto_block05_inner02 {
		width: 100%;
		color: #000000;
    padding: 0 0 5vw;
	}
  .howto_block05 .howto_block05_head {
    margin: 0 auto;
    width: 750px;
  }
	.howto_block05 .howto_block05_head .howto_block05_head_inner {
		width: 80%;
    padding-top: 23px;
    position: relative;
    margin-bottom: 15px;
	}
	.howto_block05 .howto_block05_head:before {
    content: "";
    background: url(/sweets/chocolate/chocokoka/howto/images/morning_ttl_bg_pc.png) no-repeat;
    display:  block;
    background-size: 50%;
    width: 100%;
    height: 175px;
    background-position: bottom center;
    margin-bottom: -181px;
  }
  .howto_block05 .howto_block05_head .howto_block05_icon{
    width: 127px;
    position: absolute;
    bottom: 15px;
    right: -130px;
  }
  .howto_block05 .howto_block05_text {
		margin: 10px 0 0;
		font-size: 0.75em;
		line-height: 1.75;
		text-align: left;
	}
  .howto_block05 .howto_block05_column .howto_morning_slide{
    margin-top: 25px;
  }
  .howto_block05 .howto_block05_column .howto_morning_slide .slick-list{
    margin: 0 2vw;
  }
  .howto_block05 .howto_block05_column .howto_morning_slide .slick-slide{
    margin: 0 2vw;
  }
  .howto_block05 .howto_block05_column > .howto_morning_slide li {
    margin: 0 2%;
    display: inline-block;
    width: 25%;
    cursor: pointer;
  }
  .howto_block05 .howto_block05_column > .howto_morning_slide li:hover{
    opacity: 0.8;
  }
  .howto_block05 .howto_block05_column > .howto_morning_slide li a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .howto_block05 .howto_block05_text > * {
    font-size: 1.16em;
    text-align: center;
  }
  .howto_block05 .morning_movie_area{
    padding: 16px;
    border: 2px solid #14a83b;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #fffcd1;
    width: 752px;
    height: 437px;
    margin: 0 auto;
  }
  .howto_block05 #set_movie_morning{
    width: 100%;
    margin: 0 auto;
  }
  /*------howto_block05 OUT------*/
}

@media screen and (min-width:641px) and (max-width:768px){
  .howto_block04 .howto_block04_column .howto_lesson_slide.slick-slider .slick-next:before {
    right: 7px;
  }
  .howto_block04 .howto_block04_column .howto_lesson_slide.slick-slider .slick-prev:before {
    left: 7px;
  }
}