@charset "euc-jp";
/* CSS Document */
/* ******************************
 *
 * Since:    2023-10-17
 * Modified: 2023-10-17
 * Editor:   hara@DiiV
 *
 * temp-sys ver1.01
 * Information: CSS for COK-A
 *
 * ******************************
 */

/********************
*
* cok-a
*
********************/
#cok-a{
	background: #FFF;
	font-family: "�⥴���å���", YuGothic, "�⥴���å� Medium", "Yu Gothic Medium", "�⥴���å�", "Yu Gothic", sans-serif;
	width: 790px;
	margin: 0 auto;
	color: #3b3b3b;
	font-size: 20px;
	line-height: 1.5em;
}

#cok-a img{
	display: block;
}

#cok-a .detail_btn{
	color: #fff;
	background: #525252;
	width: 340px;
	padding: 14px 21px 14px 27px;
	display: block;
	opacity: 1;
	transition: all 0.3s 0s ease-in-out;
}

#cok-a .detail_btn:hover{
	opacity: 0.5;
}

#cok-a .detail_btn .inner_right{
	margin-top: 20px;
	position: relative;
}

#cok-a .detail_btn .inner_right::after{
	content: "";
	position: absolute;
	display: block;
	top: 47%;
	left: -3px;
	transform: translateY(-50%);
	width: 1.2em;
	height: 1.2em;
	border: 1px solid #fff;
	border-radius: 50%;
}

#cok-a .column_area:after{
	content:".";
	visibility:hidden;
	display:block;
	height:0px;
	clear:both;
	line-height:0%;
	font-size:0px;
}

/*#cok-a h2{
	margin-bottom: 35px;
	font-size: 23px;
	line-height: 1.5em;
}*/

#cok-a h3{
	margin-bottom: 20px;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
	color: #000;
}

#cok-a .catch{
	text-align: center;
}

#cok-a #main_img{
	background: #f1f1f1;
	padding-bottom: 50px;
	text-align: center;
	color: #000;
}

#cok-a #main_img .movie_area{
	width: 640px;
	margin: 45px auto;
}

#cok-a #main_img .txt_01{
	margin-top: 5px;
	font-size: 18px;
	line-height: 1.8em;
	text-align: center;
}

#cok-a #area_01{
	margin-bottom: 80px;
}

#cok-a #area_01 .section_lv1{
	margin: 35px 0 30px;
}

#cok-a #area_01 .section_lv1 .column_inner{
	width: 315px;
	padding:  0 40px;
}

#cok-a #area_01 .section_lv1 .column_inner .inner_right{
	width: 275px;
	font-size: 25px;
	line-height: 1.5em;
}

#cok-a #area_01 .section_lv1 .column_inner .inner_left{
  width: 17px;
  height: 17px;
  border: 4px solid #4b4b4b;
	margin-top: 7px;
	position: relative;
}

#cok-a #area_01 .section_lv1 .column_inner .check{
  content: '';
  width: 17px;
  height: 7px;
  border-left: 8px solid #fff;
  border-bottom: 8px solid #fff;
  transform: rotate(-45deg);
	position: absolute;
	left: 3px;
	top: -4px;
}

#cok-a #area_01 .section_lv1 .column_inner .check_02{
  content: '';
  width: 17px;
  height: 7px;
  border-left: 4px solid #4b4b4b;
  border-bottom: 4px solid #4b4b4b;
	position: absolute;
	left: -5px;
	top: 2px;
}

#cok-a #area_01 .section_lv2{
	width: 50px;
	height: 50px;
	margin:  0 auto 45px;
}

#cok-a #area_01 .section_lv2 .triangle{
	border-top: #b3b2b2 50px solid;
	border-right: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid transparent;
}

#cok-a #area_01 .section_lv3 .column_area{
	background: #f7f7f7;
	border: #000 1px solid;
	width: 760px;
	padding: 14px;
}

#cok-a #area_01 .section_lv3 .column_right{
	width: 425px;
	font-size: 23px;
	line-height: 1.5em;
}

#cok-a #area_01 .section_lv3 .column_right ul{
	margin: 20px 0 40px;
}

#cok-a #area_01 .section_lv3 .column_right li{
	margin-bottom: 30px;
	color: #7a0000;
}

#cok-a #area_01 .section_lv3 .column_right li.last_child{
	margin-bottom: 0;
}

#cok-a #area_01 .section_lv3 .column_right p{
	font-size: 25px;
	line-height: 1.5em;
	color: #4b4b4b;
}

#cok-a #area_01 .section_lv3 .column_right p span{
	font-weight: bold;
}

#cok-a #area_02{
	margin-bottom: 70px;
}

#cok-a #area_03{
	margin-bottom: 100px;
}

#cok-a #area_03 .coution{
	font-size: 16px;
	line-height: 1.5em;
}

#cok-a #area_03 img{
	margin-bottom: 20px;
}

#cok-a #area_03 .txt_01{
	margin-bottom: 50px;
}

#cok-a #area_04{
	margin-bottom: 100px;
}

#cok-a #area_04 .coution{
	margin-bottom: 30px;
	font-size: 18px;
	line-height: 1.5em;
	text-align: center;
}

#cok-a #area_04 .column_area{
	margin-bottom: 30px;
}


#cok-a #area_04 .section_lv1 .column_left,
#cok-a #area_04 .section_lv2 .column_right{
	width: 388px;
}

#cok-a #area_04 .section_lv1 .column_right,
#cok-a #area_04 .section_lv2 .column_left{
	width: 395px;
}

#cok-a #area_04 .section_lv2 h4{
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5em;
	margin-bottom: 20px;
}

#cok-a #area_04 .section_lv2 .column_right{
	font-size: 14px;
	line-height: 1.3em;
}

#cok-a #area_05{
	margin-bottom: 70px;
}

#cok-a #area_05 h3{
	margin-bottom: 50px;
}

#cok-a #area_05 h3 span{
	font-size: 40px;
  background-image: radial-gradient(circle at center, black 20%, transparent 20%); /* ���ο��ȥ�����Ĵ�� */
  background-position: top right; /* ����� */
  background-repeat: repeat-x; /* �������˷����֤� */
  background-size: 1em 0.3em; /* ���δֳ֤ȥ�����Ĵ�� */
  padding-top: .4em; /* �������ΰ���Ĵ�� */
}

#cok-a #area_05 .column_area{
	margin-bottom: 70px;
}

#cok-a #area_05 .column_inner{
	width: 388px;
}

#cok-a #area_05 .column_area h4{
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5em;
}

#cok-a #area_05 .column_area img{
	margin-bottom: 20px;
}

#cok-a #anc_area{
	margin-bottom: 100px;
}

#cok-a #anc_area h2{
	margin-bottom: 40px;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
}

#cok-a #anc_area .anc_btn{
	background: #545454;
	padding: 20px 0;
	width: 388px;
	font-size: 23px;
	line-height: 1.5em;
	text-align: center;
	color: #fff;
	opacity: 1;
	transition: all 0.3s 0s ease-in-out;
}

#cok-a #anc_area .anc_btn:hover{
	opacity: 0.5;
}

#cok-a #area_06{
	margin-bottom: 100px;
}

#cok-a #area_06 .title{
	margin-bottom: 60px;
	text-align: center;
}

#cok-a #area_06 .title h3{
	margin-bottom: 5px;
}

#cok-a #area_06 .title .txt_01{
	border-top: #000 1px solid;
	padding-top: 5px;
	font-size: 25px;
	display: inline;
}

#cok-a #area_06 .title .catch{
	margin-top: 30px;
}

#cok-a #area_06 .section_lv1{
	margin-bottom: 35px;
}

#cok-a #area_06 .section_lv1 .column_inner{
	border: #202020 1px solid;
	width: 358px;
	min-height: 180px;
	padding:  26px 14px 0;
	position: relative;
}

#cok-a #area_06 .section_lv1 .column_inner h4{
	background: #545454;
	color: #fff;
	border-radius: 15px;
	width: 5em;
	text-align: center;
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
}

#cok-a #area_06 .section_lv2 .column_left{
	width: 388px;
	padding: 40px 0 0 0;
}

#cok-a #area_06 .section_lv2 .column_left .txt_01{
	margin-bottom: 50px;
	font-size: 22px;
	line-height: 1.5em;
}

#cok-a #area_06 .section_lv2 .column_left .txt_01 span{
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5em;
}

#cok-a #area_07{
	margin-bottom: 100px;
}

#cok-a #area_07 .title{
	margin-bottom: 60px;
	text-align: center;
}

#cok-a #area_07 .title h3{
	margin-bottom: 5px;
}

#cok-a #area_07 .title .txt_01{
	border-top: #000 1px solid;
	padding-top: 5px;
	font-size: 25px;
	display: inline;
}

#cok-a #area_07 .title .catch{
	margin-top: 30px;
}

#cok-a #area_07 .title .catch span{
	font-size: 16px;
}

#cok-a #area_07 .column_area{
	border-bottom: #545454 1px dashed;
	padding-bottom: 40px;
	margin-bottom: 50px;
}

#cok-a #area_07 .column_area .column_left{
	padding-top: 30px;
	width: 100px;
}

#cok-a #area_07 .column_area .column_center{
	width: 360px;
	padding: 0 20px 0 44px;
	font-size: 18px;
	line-height: 1.5em;
}

#cok-a #area_07 .column_area .column_right{
	width: 266px;
	text-align: center;
}

#cok-a #area_07 .column_area .column_left h5{
	background: #545454;
	padding: 10px 0;
	text-align: center;
	color: #fff;
	border-radius: 5px;
}

#cok-a #area_07 .column_area .column_center li{
	margin-bottom: 15px;
	list-style: disc outside;
}

#cok-a #area_07 .column_area .column_center ul.type_01{
	padding-top: 25px;
}

#cok-a #area_07 .column_area .column_center ul.type_02{
	padding-top: 15px;
}

#cok-a #area_07 .column_area .column_center ul.type_03{
	padding-top: 0;
}

#cok-a #area_07 .column_area .column_right img{
	margin-bottom: 5px;
}

#cok-a #area_07 .column_area .column_right .caption{
	font-size: 16px;
	line-height: 1.5em;
}

#cok-a #area_08{
	margin-bottom: 100px;
}

#cok-a #area_08 h3{
	margin-bottom: 50px;
}

#cok-a #area_08 .catch{
	margin-bottom: 30px;
}

#cok-a #area_08 .column_inner{
	width: 388px;
	text-align: center;
}

#cok-a #area_08 .column_inner img{
	margin-bottom: 5px;
}

#cok-a #area_08 .column_area .caption{
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5em;
}

#cok-a #area_09 h3{
	margin-bottom: 50px;
}

#cok-a #area_09 h2{
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 50px;
}

#cok-a #area_09 .img_01{
	margin-bottom: 25px;
}

#cok-a #area_09 .img_02{
	margin-bottom: 60px;
}



/********************
*
* cok-a ����
*
********************/

/***** ���� *****/
.cok-a #contents_inner{
	font-family: "�⥴���å���", YuGothic, "�⥴���å� Medium", "Yu Gothic Medium", "�⥴���å�", "Yu Gothic", sans-serif;
	width: 790px;
	margin: 0 auto;
	color: #3b3b3b;
	font-size: 18px;
	line-height: 1.5em;
	color: #000;
}

.cok-a #contents_inner .column_area:after{
	content:".";
	visibility:hidden;
	display:block;
	height:0px;
	clear:both;
	line-height:0%;
	font-size:0px;
}

.cok-a #contents_inner img{
	display: block;
}

.cok-a #contents_inner h2{
	margin-bottom: 40px;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
	
}

.cok-a #contents_inner #main_img{
	margin-bottom: 50px;
}

.cok-a #contents_inner .catch{
	text-align: center;
	margin-bottom: 80px;
}

.cok-a #contents_inner .triangle{
  background: #4e4e4e;
  height: calc(tan(60deg) * 30px / 2);
  width: 50px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.cok-a #contents_inner .column_inner{
	width: 390px;
}

.cok-a #contents_inner h3{
	font-size: 22px;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
}

.cok-a #contents_inner dd{
	margin-bottom: 35px;
}

.cok-a #contents_inner #area_01{
	margin-bottom: 50px;
}

.cok-a #contents_inner #area_02{
	margin-bottom: 50px;
}

.cok-a #contents_inner #area_02 .column_area{
	margin-bottom: 20px;
}

.cok-a #contents_inner h4{
	background: #e8465a;
	padding: 22px 0;
	margin-bottom: 15px;
	font-size: 20px;
	line-height: 1.5em;
	text-align: center;
	color: #fff;
}

.cok-a #contents_inner #area_02 .column_area p{
	border: #545454 1px solid;
	padding: 10px 0;
	margin-top: 10px;
	text-align: center;
}

/***** ���� *****/


/***** SP���� *****/
.cok-a_sp{
	font-family: "�⥴���å���", YuGothic, "�⥴���å� Medium", "Yu Gothic Medium", "�⥴���å�", "Yu Gothic", sans-serif;
	width: 640px;
	margin: 0 auto;
	color: #000;
	font-size: 12px;
	line-height: 1.5em;
}

.cok-a_sp .column_area:after{
	content:".";
	visibility:hidden;
	display:block;
	height:0px;
	clear:both;
	line-height:0%;
	font-size:0px;
}

.cok-a_sp img{
	display: block;
}

.cok-a_sp #area_01,
.cok-a_sp #area_02{
	padding: 0 5px;
}

.cok-a_sp #title_area{
	margin-bottom: 30px;
}

.cok-a_sp #main_img{
	margin-bottom: 60px;
}

.cok-a_sp h2{
	margin-bottom: 40px;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
}

.cok-a_sp h3{
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
}

.cok-a_sp .catch{
	margin-bottom: 40px;
	text-align: center;
}

.cok-a_sp .section_lv1{
	margin-bottom: 50px;
}

.cok-a_sp dl{
	margin-top: 20px;
}

.cok-a_sp dd{
	margin-bottom: 20px;
}

.cok-a_sp h4{
	background: #e8465a;
	padding: 15px 0;
	margin-bottom: 15px;
	font-size: 1.2em;
	line-height: 1.5em;
	text-align: center;
	color: #fff;
}

.cok-a_sp #area_01,
.cok-a_sp #area_02{
	margin-bottom: 80px;
}

.cok-a_sp #area_02 .txt_01{
	border: #545454 1px solid;
	padding: 10px 0;
	margin-top: 10px;
	text-align: center;
}

.cok-a_sp #area_02 .coution{
	padding-top: 10px;
}



.cok-a_sp .triangle{
  background: #4e4e4e;
  height: calc(tan(60deg) * 30px / 2);
  width: 50px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}


/********************
*
* cok-a �쥷��
*
********************/
.recipe{
	max-width: 640px;
	padding: 0 0 50px;
	margin: 0 auto;
	font-family: "�⥴���å���", YuGothic, "�⥴���å� Medium", "Yu Gothic Medium", "�⥴���å�", "Yu Gothic", sans-serif;
	color: #000;
	font-size: 18px;
	line-height: 1.5em;
}

.recipe img{
	display: block;
}

.recipe .column_area:after,
.recipe #area_01 dl:after{
	content:".";
	visibility:hidden;
	display:block;
	height:0px;
	clear:both;
	line-height:0%;
	font-size:0px;
}


.recipe #main_img{
	margin-bottom: 25px;
}

.recipe .title,
.recipe #area_01,
.recipe #area_02{
	padding: 0 5px;
}

.recipe .title{
	margin-bottom: 30px;
}

.recipe h1{
	border-bottom: #000 1px solid;
	margin-bottom: 25px;
	font-size: 30px;
	line-height: 1.5em;
	text-align: center;
}

.recipe h1 span{
	font-size: 18px;
}

.recipe .title .column_area{
	margin-bottom: 5px;
}

.recipe .title .column_inner{
	background: #3a3a3a;
	padding: 7px 0;
	width: 310px;
	color: #fff;
	text-align: center;
}

.recipe .title .caution{
	font-size: 16px;
	line-height: 1.5em;
	text-align: right;
}

.recipe #area_01{
	margin-bottom: 50px;
}

.recipe h2{
	border-bottom: #000 1px solid;
	margin-bottom: 25px;
	font-size: 24px;
	line-height: 1.5em;
	text-align: center;
}

.recipe #area_01 h3{
	margin-bottom: 15px;
}

.recipe #area_01 .section_inner{
	padding: 0 40px;
	margin-bottom: 40px;
}

.recipe #area_01 dl{
	margin-bottom: 10px;
}
.recipe #area_01 dl.last_child{
	margin-bottom: 0;
}

.recipe #area_01 dt::before{
	content: "��";
}

.recipe #area_01 dt{
	float: left;
}
.recipe #area_01 dd{
	float: right;
}

.recipe #area_02 .section_lv1{
	margin-bottom: 20px;
}

.recipe #area_02 dt{
	font-weight: bold;
	color: #c00202;
}

.recipe #area_02 dd{
	margin: -1.5em 0 0 1.7em;
}

.recipe #area_02 dl{
	padding: 20px 15px;
}

.recipe #area_02 .odd{
	background: #dfdfdf;
}

.recipe #area_02 .caution_area{
	border: #000 1px solid;
	padding: 25px;
	margin-bottom: 40px;
}

.recipe #area_02 .caution_area h4{
	background: url("https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/43204611/kitchen/icon_cok-a_01.jpg") left center no-repeat;
	padding-left: 1em;
	margin-bottom: 15px;
	font-size: 20px;
	line-height: 1.5em;
}


/***** �Ĥ���ܥ��� *****/
.recipe input{
	background: #fff;
	border: #595959 1px solid;
	border-radius: 35px;
	width: 250px;
	padding: 10px 0;
	margin: 0 auto;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2em;
	display: block;
}

.recipe input:link,
.recipe input:hover{
	color: #000;
}

.recipe input{
	opacity: 1;
	transition: all 0.3s 0s ease-in-out;
}

.recipe input:hover{
	opacity: 0.5;
}