@charset "utf-8";

/* ===================================================
    Food CSS
====================================================== */

:root { --color_pink: #f47f64; }
#contents_wrap { overflow: hidden; }
.inner { width: min(1020px, 86%); margin: 0 auto; }
.dot_illust { position: absolute; width: 110px; height: 110px; background: url(../../food/img/sec01_illust02.png) no-repeat center/contain; }
.ofi { width: 100%; height: 100%; }

@media screen and (max-width: 600px) {
	.dot_illust { width: min(60px, 12vw); height: min(60px, 12vw); }
}

/* ---------------------------------------------------
lead
------------------------------------------------------ */
#c_nav { display: flex; margin: 90px auto 0; justify-content: space-between; }
#c_nav li { width: 23.3%; height: 80px; max-width: 257px; border: 1px solid #000; box-sizing: border-box; }
#c_nav li a { display: flex; height: 100%; background: #fff; color: #000; font-size: 18px; line-height: 1; transition: background 0.5s, color 0.5s; flex-direction: column; justify-content: center; align-items: center; }
#c_nav li a:hover { background: #000; color: #fff; }

@media screen and (max-width: 600px) {
	#c_nav { margin: 7vw auto; flex-wrap: wrap; gap: 10px; }
	#c_nav li { width: calc(50% - 5px); height: auto; max-width: none; }
	#c_nav li a { height: auto; padding: 5vw 2%; font-size: 15px; }
}

/* ---------------------------------------------------
sec01
------------------------------------------------------ */
#sec01 { position: relative; padding: 150px 0 140px; background: #f8f7f4; }
#sec01 .dot_illust { bottom: -70px; left: max(30px, calc(50% - 510px - 110px)); }
#sec01 .illust { position: absolute; top: 85px; right: 55px; width: 158px; height: 106px; background: url(../../food/img/sec01_illust01.png) no-repeat center/contain; }
#sec01 .tit { display: flex; margin: 0 0 40px; font-size: 35px; text-align: center; justify-content: center; align-items: baseline; }
#sec01 .tit span { font-size: 23px; }
#sec01 .tit em { color: var(--color_pink); font-size: 54px; margin-left: 10px; line-height: 1; font-style: normal; }
#sec01 .txt { text-align: center; }
#sec01 .cnt { display: flex; margin: 120px 0 0; justify-content: center; gap: min(45px, 4.5%); }
#sec01 .cnt li { display: flex; width: min(230px, 22%); text-align: center; flex-direction: column; align-items: center; }
#sec01 .cnt li .desc { position: relative; width: 100%; padding: 5px 30px 10px; background: url(../../food/img/sec01_desc_bg.svg) no-repeat center/contain; font-size: 19px; margin-bottom: 10px; }
#sec01 .cnt li .img { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; margin-bottom: 25px; }
#sec01 .cnt li .txt { font-size: 14px; line-height: 1.6; }
#sec01 .cnt li .btn { display: inline-flex; color: var(--color_pink); font-size: 14px; border-bottom: 1px solid var(--color_pink); margin-top: 10px; align-items: center; transition: border 0.3s; line-height: 1; }
#sec01 .cnt li .btn:hover { border-bottom-color: transparent; }
#sec01 .cnt li .btn::after { display: inline-block; width: 14px; height: 14px; margin: 0 5px; background: url(../../food/img/sec01_ico_arrow.svg) no-repeat center/contain; content: ""; }

@media screen and (max-width: 600px) {
	#sec01 { padding: 15vw 0 12vw; }
	#sec01 .dot_illust { bottom: -5vw; left: 2vw; }
	#sec01 .illust { top: -10vw; right: 2vw; width: min(120px, 30vw); height: min(80px, 20vw); }
	#sec01 .tit { margin: 0 0 4vw; font-size: 23px; }
	#sec01 .tit span { font-size: 16px; }
	#sec01 .tit em { font-size: 33px; margin-left: 5px; }
	#sec01 .txt { text-align: left; }
	#sec01 .cnt { margin: 8vw 0 0; flex-wrap: wrap; gap: 5vw 4%; }
	#sec01 .cnt li { width: 48%; }
	#sec01 .cnt li .desc { padding: 1vw 20px 2vw; font-size: 15px; margin-bottom: 5px; }
	#sec01 .cnt li .img { margin-bottom: 2vw; }
	#sec01 .cnt li .txt { font-size: 13px; line-height: 1.4; }
	#sec01 .cnt li .btn { font-size: 13px; }
	#sec01 .cnt li .btn::after { width: 12px; height: 12px; }
}

/* ---------------------------------------------------
sec02
------------------------------------------------------ */
#sec02 { position: relative; padding: 170px 0 130px; }
#sec02 .cnt { margin-bottom: 100px; text-align: center; }
#sec02 .cnt .badge { display: inline-block; padding: 6px 24px; background: var(--color_pink); color: #fff; font-size: 15px; margin-bottom: 20px; letter-spacing: 0.1em; line-height: 1; }
#sec02 .cnt .tit { font-size: 35px; margin-bottom: 15px; line-height: 1; }
#sec02 .cnt + .txt { font-size: 20px; text-align: center; margin-bottom: 110px; }
#sec02 .card_wrap + .card_wrap { margin-top: 85px; }
#sec02 .card_wrap .photo_col { position: relative; }
#sec02 .card_wrap .photo_col img { border-radius: 20px 20px 0 0; }
#sec02 .card_wrap .label.v_rl { display: flex; position: absolute; top: -30px; right: max(-6%, -60px); z-index: 10; color: #fff; flex-direction: column; align-items: flex-start; line-height: 1; }
#sec02 .card_wrap .label .sub { padding: 10px; background: #fff; color: var(--card_color01); font-size: 17px; border: 1px solid var(--card_color01); }
#sec02 .card_wrap .label .main { padding: 40px 22px; background: var(--card_color01); font-size: 32px; border-radius: 0 0 100px 100px; }
#sec02 .card_wrap .point { position: absolute; }
#sec02 .card_wrap .point p { display: flex; width: 154px; height: 154px; background: #fff; color: var(--card_color01); border-radius: 50%; align-items: center; justify-content: center; text-align: center; font-size: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); line-height: 1.6; }
#sec02 .card_wrap .point:after { position: absolute; width: 110px; height: 50px; content: ""; }
#sec02 .card_wrap .point_col .point:nth-of-type(1):after { right: 50%; bottom: -50px; background-image: radial-gradient(circle, #ffffff 1.5px, transparent 1.5px), radial-gradient(circle, #ffffff 1.5px, transparent 1.5px); background-position: right top 3px, left 11px bottom; background-repeat: repeat-y, repeat-x; background-size: 3px 13px, 13px 3px; }
#sec02 .card_wrap .point_col .point:nth-of-type(2):after { top: -35px; left: 50%; background-image: radial-gradient(circle, #ffffff 1.5px, transparent 1.5px), radial-gradient(circle, #ffffff 1.5px, transparent 1.5px); background-position: left 8px top, left top 8px; background-repeat: repeat-x, repeat-y; background-size: 13px 3px, 3px 13px; }
#sec02 .card_wrap .txt_col { padding: 35px 80px 90px; background: var(--card_color01); color: #fff; line-height: 1.6; border-radius: 0 0 20px 20px; }
#sec02 .card_wrap .price { text-align: center; font-size: 25px; line-height: 1; }
#sec02 .card_wrap .price span { font-size: 67px; letter-spacing: 0; margin-right: 5px; }
#sec02 .card_wrap .point01 { margin-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.3); padding-top: 50px; }
#sec02 .card_wrap .point01 div + div { margin-top: 50px; }
#sec02 .card_wrap .point01 dt { display: inline-block; padding: 5px 20px; background: var(--card_color03); color: var(--card_color02); border-radius: 100px; margin-bottom: 10px; }
#sec02 .card_wrap .point_table { background: #fff; margin-top: 40px; }
#sec02 .card_wrap .point_table div { display: flex; }
#sec02 .card_wrap .point_table div:last-child :where(dd, dt) { border-bottom: none; }
#sec02 .card_wrap .point_table dt { display: flex; width: max(305px, 36%); padding: 20px 30px; background: var(--card_color02); color: #fff; border-bottom: 1px solid var(--card_color04); align-items: center; flex-shrink: 0; box-sizing: border-box; }
#sec02 .card_wrap .point_table dd { display: flex; padding: 20px 30px 20px 55px; color: var(--card_color01); flex-grow: 1; align-items: center; border-bottom: 1px solid var(--card_color05); box-sizing: border-box; }
#sec02 .card_wrap .point_table + p { padding: 0 10px; font-size: 13px; margin-top: 20px; }
#sec02 #sec02_01 { --card_color01: #bd8f20; --card_color02: #936f19; --card_color03: #dcc58e; --card_color04: #7b560f; --card_color05: #d5c598; }
#sec02 #sec02_02 { --card_color01: #896089; --card_color02: #634163; --card_color03: #cbb5cb; --card_color04: #4c2c4c; --card_color05: #c4afc4; }
#sec02 #sec02_03 { --card_color01: #999035; --card_color02: #787023; --card_color03: #cec891; --card_color04: #615814; --card_color05: #cec891; }
#sec02 .cutlery_col { display: flex; position: relative; width: fit-content; margin: 125px auto 0; align-items: center; justify-content: center; text-align: center; }
#sec02 .cutlery_col .tit { position: absolute; top: 7px; right: -40px; color: #f3a1a0; font-size: 17px; transform: rotate(38deg); line-height: 1; letter-spacing: 2px; }
#sec02 .cutlery_col .tit::before, #sec02 .cutlery_col .tit::after { position: absolute; width: 1px; height: 28px; content: ""; border-left: 1px dashed #f3a1a0; }
#sec02 .cutlery_col .tit::before { bottom: -20px; left: -20px; transform: rotate(-40deg); }
#sec02 .cutlery_col .tit::after { right: -20px; bottom: -18px; transform: rotate(60deg); }
#sec02 .cutlery_col .txt { padding: 42px 75px; background: url(../../food/img/sec02_illust01.webp) no-repeat center/contain; color: #fff; font-size: 20px; }
#sec02 > div[class^="dot_illust"]:nth-of-type(2) { bottom: 50%; left: max(-15px, calc(50% - 510px - 155px)); z-index: -1; }
#sec02 > div[class^="dot_illust"]:nth-of-type(3) { right: max(-15px, calc(50% - 510px - 155px)); bottom: 890px; z-index: -1; }

@media screen and (min-width: 601px) {
	#sec02 .card_wrap .label.v_rl { writing-mode: vertical-rl; }
	#sec02 .card_wrap .label .sub { border-left: none; }
	#sec02 #sec02_01.card_wrap .point:nth-of-type(1) { top: 20px; right: 85px; }
	#sec02 #sec02_01.card_wrap .point:nth-of-type(2) { bottom: -23px; left: 53px; }
	#sec02 #sec02_02.card_wrap .point:nth-of-type(1) { right: 60px; bottom: -25px; }
	#sec02 #sec02_02.card_wrap .point:nth-of-type(2) { top: 30px; left: 65px; }
	#sec02 #sec02_02.card_wrap .point:nth-of-type(1):after { top: -50px; bottom: auto; background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px), radial-gradient(circle, #fff 1.5px, transparent 1.5px); background-position: right bottom 3px, left 11px top; }
	#sec02 #sec02_02.card_wrap .point:nth-of-type(2):after { top: auto; bottom: -45px; background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px), radial-gradient(circle, #fff 1.5px, transparent 1.5px); background-position: left 8px bottom, left top 8px; }
	#sec02 #sec02_03.card_wrap .point:nth-of-type(1) { top: 20px; right: 85px; }
	#sec02 #sec02_03.card_wrap .point:nth-of-type(2) { bottom: -34px; left: 60px; }
}

@media screen and (max-width: 600px) {
	#sec02 { padding: 15vw 0 12vw; }
	#sec02 .cnt { margin-bottom: 10vw; }
	#sec02 .cnt .badge { padding: 5px 4%; font-size: 13px; margin-bottom: 10px; }
	#sec02 .cnt .tit { font-size: 24px; margin-bottom: 10px; }
	#sec02 .cnt + .txt { font-size: 16px; margin-bottom: 10vw; text-align: left; }
	#sec02 .card_wrap + .card_wrap { margin-top: 10vw; }
	#sec02 .card_wrap .photo_col img { border-radius: 10px 10px 0 0; aspect-ratio: 75 / 50; }
	#sec02 .card_wrap .label.v_rl { position: static; margin-bottom: 15px; }
	#sec02 .card_wrap .label .sub { padding: 5px 4%; font-size: 13px; border-bottom: none; }
	#sec02 .card_wrap .label .main { padding: 10px 8%; font-size: 18px; border-radius: 0 100px 100px 0; }
	#sec02 .card_wrap .point p { width: 24vw; height: 24vw; font-size: 3vw; letter-spacing: 0.04em; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4); border: 1px solid var(--card_color01); }
	#sec02 .card_wrap .point:after { width: 10vw; height: 10vw; }
	#sec02 .card_wrap .point_col .point:nth-of-type(1):after { right: 25%; bottom: -4vw; background-image: radial-gradient(circle, #ffffff 0.2vw, transparent 0.2vw), radial-gradient(circle, #ffffff 0.2vw, transparent 0.2vw); background-position: right top 1.2vw, left 1.2vw bottom; background-size: 0.4vw 1.9vw, 1.9vw 0.4vw; }
	#sec02 .card_wrap .point_col .point:nth-of-type(2):after { top: -4vw; left: 25%; background-image: radial-gradient(circle, #ffffff 0.2vw, transparent 0.2vw), radial-gradient(circle, #ffffff 0.2vw, transparent 0.2vw); background-position: left 1.2vw top, left top 1.2vw; background-size: 1.9vw 0.4vw, 0.4vw 1.9vw; }
	#sec02 .card_wrap .txt_col { padding: 10vw 6% 10vw; line-height: 1.4; border-radius: 0 0 10px 10px; }
	#sec02 .card_wrap .price { font-size: 16px; }
	#sec02 .card_wrap .price span { font-size: 32px; }
	#sec02 .card_wrap .point01 { margin-top: 4vw; padding-top: 4vw; }
	#sec02 .card_wrap .point01 div + div { margin-top: 3vw; }
	#sec02 .card_wrap .point01 dt { padding: 3px 15px; }
	#sec02 .card_wrap .point_table { margin-top: 4vw; }
	#sec02 .card_wrap .point_table div { flex-direction: column; }
	#sec02 .card_wrap .point_table dt { width: 100%; padding: 10px 6%; }
	#sec02 .card_wrap .point_table dd { padding: 10px 6%; }
	#sec02 .card_wrap .point_table + p { padding: 0 4% 0 calc(1em + 4%); font-size: 12px; margin-top: 10px; text-indent: -1em; }
	#sec02 > div > div:nth-child(2n + 1).card_wrap .point:nth-of-type(1) { right: 2%; bottom: calc(5px + 33.5vw); }
	#sec02 > div > div:nth-child(2n + 1).card_wrap .point:nth-of-type(2) { bottom: -9vw; left: 2%; }
	#sec02 > div > div:nth-child(2n).card_wrap .point:nth-of-type(1):after { top: -4vw; bottom: auto; background-image: radial-gradient(circle, #fff 0.2vw, transparent 0.2vw), radial-gradient(circle, #fff 0.2vw, transparent 0.2vw); background-position: right bottom 1.2vw, left 1.2vw top; }
	#sec02 > div > div:nth-child(2n).card_wrap .point:nth-of-type(2):after { top: auto; bottom: -4vw; background-image: radial-gradient(circle, #fff 0.2vw, transparent 0.2vw), radial-gradient(circle, #fff 0.2vw, transparent 0.2vw); background-position: left 1.2vw bottom, left top 1.2vw; }
	#sec02 > div > div:nth-child(2n).card_wrap .point:nth-of-type(1) { right: 3%; bottom: -9vw; }
	#sec02 > div > div:nth-child(2n).card_wrap .point:nth-of-type(2) { bottom: calc(5px + 33.5vw); left: 3%; }
	#sec02 .cutlery_col { width: 90%; margin: 12vw auto 0; }
	#sec02 .cutlery_col .tit { top: -1vw; right: -1vw; font-size: 3.2vw; transform: rotate(20deg); }
	#sec02 .cutlery_col .tit::before, #sec02 .cutlery_col .tit::after { height: 4vw; }
	#sec02 .cutlery_col .tit::before { bottom: -3vw; left: -3vw; }
	#sec02 .cutlery_col .tit::after { right: -1vw; bottom: -4vw; }
	#sec02 .cutlery_col .txt { width: 100%; padding: 5vw 6% 7vw; font-size: 3.5vw; background-image: url(../../food/img/sec02_illust01_sp.svg); }
	#sec02 > div[class^="dot_illust"]:nth-of-type(2), #sec02 > div[class^="dot_illust"]:nth-of-type(3) { display: none; }
}

/* ---------------------------------------------------
sec03
------------------------------------------------------ */
#sec03 { position: relative; padding: 140px 0; background: #f8f7f4; }
#sec03 .dot_illust { top: 155px; left: max(0px, calc(50% - 650px)); transform: rotate(-60deg); }
#sec03 .illust { position: absolute; right: 30px; bottom: -40px; width: 220px; height: 108px; background: url(../../food/img/sec03_illust01.png) no-repeat center/contain; }
#sec03 .tit_col { text-align: center; margin-bottom: 70px; line-height: 1; }
#sec03 .tit_col .badge { display: inline-block; padding: 5px 30px; background: var(--color_pink); color: #fff; margin-bottom: 20px; }
#sec03 .tit_col .main { font-size: 35px; margin-bottom: 25px; }
#sec03 .flex_box { display: flex; padding: 50px; background: #f7ded8; justify-content: center; gap: 45px; border-radius: 20px; padding-right: 70px; }
#sec03 .flex_box .photo { width: 38%; }
#sec03 .flex_box .photo img { border-radius: 15px; }
#sec03 .txt_col { flex: 1; margin-top: 5px; }
#sec03 .txt_col .label { margin-bottom: 15px; }
#sec03 .txt_col .name { display: flex; align-items: baseline; gap: 40px; border-bottom: 1px solid #c9b9b9; padding-bottom: 10px; margin-bottom: 15px; }
#sec03 .txt_col .name .txt { font-size: 20px; }
#sec03 .txt_col .name .txt span { font-size: 25px; letter-spacing: 0.24em; }
#sec03 .txt_col .name .en { font-size: 12px; opacity: 0.5; letter-spacing: 0.24em; text-transform: uppercase; }
#sec03 .txt_col .desc_txt { text-align: justify; margin-right: 10px; letter-spacing: 0.1em; }

@media screen and (max-width: 600px) {
	#sec03 { padding: 14vw 0 16vw; }
	#sec03 .dot_illust { top: 25vw; left: 0px; }
	#sec03 .illust { right: 4vw; bottom: -8vw; width: min(190px, 40vw); height: min(96px, 20vw); }
	#sec03 .tit_col { margin-bottom: 8vw; }
	#sec03 .tit_col .badge { padding: 5px 4%; margin-bottom: 10px; font-size: 14px; }
	#sec03 .tit_col .main { font-size: 24px; margin-bottom: 10px; }
	#sec03 .flex_box { padding: 8vw 8%; flex-direction: column; gap: 5vw; border-radius: 10px; padding-right: 8%; }
	#sec03 .flex_box .photo { width: 100%; }
	#sec03 .flex_box .photo img { border-radius: 10px; }
	#sec03 .txt_col { margin-top: 0; }
	#sec03 .txt_col .label { margin-bottom: 10px; }
	#sec03 .txt_col .name { flex-wrap: wrap; gap: 0 20px; }
	#sec03 .txt_col .name .txt { font-size: 14px; }
	#sec03 .txt_col .name .txt span { font-size: 20px; }
	#sec03 .txt_col .name .en { font-size: 10px; }
	#sec03 .txt_col .desc_txt { margin-right: 0; }
}

/* ---------------------------------------------------
sec04
------------------------------------------------------ */
#sec04 { padding: 135px 0 90px; }
#sec04 .tit_col { text-align: center; margin-bottom: 60px; line-height: 1; }
#sec04 .tit_col .main { font-size: 35px; margin-bottom: 20px; }
#sec04 .faq_list .faq_item { margin-bottom: 40px; border-bottom: 1px solid #dacbcc; padding-bottom: 40px; font-size: 16px; }
#sec04 .faq_list .faq_item:last-child { border-bottom: none; }
#sec04 .faq_list .faq_item dt { margin-bottom: 35px; }
#sec04 .faq_list .faq_item :where(dt, dd) { display: flex; gap: 20px; }
#sec04 .faq_list .faq_item :where(dt, dd)::before { width: 34px; height: 34px; content: ""; flex-shrink: 0; }
#sec04 .faq_list .faq_item dt::before { background: url(../../food/img/sec04_icon_q.svg) no-repeat center/contain; }
#sec04 .faq_item dd::before { background: url(../../food/img/sec04_icon_a.svg) no-repeat center/contain; }
#sec04 .faq_item dd a { color: #0062f4; text-decoration: underline; }
#sec04 .faq_item dd a:hover { text-decoration: none; }

@media screen and (max-width: 600px) {
	#sec04 { padding: 12vw 0 10vw; }
	#sec04 .tit_col { margin-bottom: 10vw; }
	#sec04 .tit_col .main { font-size: 24px; margin-bottom: 10px; }
	#sec04 .faq_list .faq_item { margin-bottom: 5vw; padding-bottom: 5vw; font-size: 14px; }
	#sec04 .faq_list .faq_item dt { margin-bottom: 3vw; }
	#sec04 .faq_list .faq_item :where(dt, dd) { gap: 10px; }
	#sec04 .faq_list .faq_item :where(dt, dd)::before { width: 24px; height: 24px; }
}

/* ---------------------------------------------------
sec05
------------------------------------------------------ */
#sec05 { position: relative; padding: 130px 0 115px; background: #f8f7f4; }
#sec05 .dot_illust { bottom: 45px; left: max(5px, calc(50% - 645px)); }
#sec05 .txt { text-align: center; font-size: 16px; }
#sec05 .tel_area { display: flex; width: fit-content; margin: 35px auto 60px; justify-content: center; align-items: center; gap: 10px; }
#sec05 .tel_area::before { display: block; width: 27px; height: 27px; background: url(../../food/img/sec05_tel.svg) no-repeat center/contain; content: ""; }
#sec05 .tel_area .tel_num { font-size: 38px; line-height: 1; }
#sec05 .btn_area { text-align: center; }
#sec05 .btn_area a { display: inline-block; padding: 20px 195px; background: var(--color_pink); color: #fff; font-size: 18px; text-align: center; border-radius: 100px; transition: background .5s; }
#sec05 .btn_area a:hover { background: #f16f51; }

@media screen and (max-width: 600px) {
	#sec05 { padding: 12vw 0 14vw; }
	#sec05 .dot_illust { bottom: 4vw; left: 1vw; }
	#sec05 .txt { font-size: 14px; text-align: left; }
	#sec05 .tel_area { margin: 5vw auto 7vw; }
	#sec05 .tel_area::before { width: 20px; height: 20px; }
	#sec05 .tel_area .tel_num { font-size: 26px; }
	#sec05 .btn_area a { padding: 2vw 10%; font-size: 16px; }
}