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

/*==================================
	base
==================================*/
#mv { padding-bottom: 120px; position: relative;}
#mv .illust { width: 137px; left: calc( 50% + 450px); bottom: 30px; position: absolute; z-index: 1;}
#mv img { width: 100%;}
#mv .pc { display: block;}
#mv .sp { display: none;}
@media screen and (max-width: 1200px) {
#mv .illust { width: 12vw; max-width: 137px; left: auto; right: 2%;}
}
@media screen and (max-width: 799px) {
#mv { padding-bottom: 20px;}
#mv .pc { display: none;}
#mv .sp { display: block;}
}

/*==================================
	product
==================================*/
#product { padding-bottom: 150px; position: relative; z-index: 15;}
#product:before { left: calc(50% + 100px); bottom: -160px; width: 193px; height: 127px; background: url("../img/top/info_illust.webp") no-repeat; position: absolute; content: "";}
#product .hidden { overflow: hidden; padding-bottom: 1px;}
#product .head { position: relative;}
#product .head .tit { font-size: 36px; position: relative; z-index: 1; font-weight: 600;}
#product .head .txt { font-size: 240px; left: calc( 50% - 440px); bottom: -70px; color: #feecdb; font-family: "Outfit"; font-weight: 700; position: absolute; line-height: 1; pointer-events: none; position: absolute;}
#product .head .list { padding-right: 220px; margin: 80px 0 40px 0; position: relative; z-index: 1;}
#product .head .list input[type="radio"] { display: none;}
#product .head .list label.radio-button { margin-right: 10px; margin-bottom: 20px; min-width: 130px; display: inline-block; padding: 10px; background-color: rgba(255, 245, 235, 0.6); border: 1px solid #222; border-radius: 30px; cursor: pointer; text-align: center;}
#product .head .list input[type="radio"]:checked + label.radio-button { background-color: #222; color: #fff; border-color: #222;}
#product .head .more { position: absolute; right: 0; bottom: 30px; z-index: 5;}
#product .head .more { font-size: 16px; text-align: right;}
#info .more a {}
#product .head .more a .arr { padding: 15px 40px 15px 30px; position: relative;}
#product .head .more a .arr:after { width: 100%; height: 2px; left: 0; bottom: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #222;}
#product .head .more a .arr:before { width: 20px; height: 2px; bottom: 0; right: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #222; transform: rotate(45deg); transform-origin: calc(100% - 1px) 50%;}
#product .itemSlider { position: relative; z-index: 1;}
@media screen and (max-width: 1299px) {
#product .head .txt { font-size: 18.66vw; left: calc( 50% - 40vw);}
}
@media screen and (max-width: 899px) {
#product { padding-bottom: 70px;}
#product:before { left: auto; right: 8%; bottom: -40px; width: 112px; height: 70px; background-size: cover;}
#product .head .tit { font-size: 24px;}
#product .head .txt { font-size: 18.66vw; bottom: -14vw;}
#product .head .list { padding-right: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
#product .head .list label.radio-button { font-size: 13px; margin-right: 0; margin-bottom: 10px; min-width: inherit; width: 31.5%; padding: 8px 5px;}
#product .head .more { top: 10px; bottom: auto;}
#product .head .more a .arr { padding: 10px 20px 10px 15px;}
#product .head .more a .arr:before { width: 15px;}
#product .head .more { font-size: 14px;}
}

/* slider */
#product .itemSliderArea { left: calc(50% - 600px); position: relative; width: calc(50% + 600px);}
#product .itemSliderArea .itemSlider { padding-left: 130px;}
#product .itemSliderArea .arrow { width: 90px; height: 90px; top: 180px; position: absolute;transform: translateY(-50%); z-index: 10; border-radius: 50%; border: none; background-color: rgba(197, 150, 108, 0.9); padding: 0; cursor: pointer;}
#product .itemSliderArea .slick-list { margin: 0 -30px;}
#product .itemSliderArea .slick-slide { margin: 0 30px;}
#product .itemSliderArea .arrowArea {}
#product .itemSliderArea .prev { left: 45px;}
#product .itemSliderArea .next { left: 1038px;}
#product .itemSliderArea .arr { position: relative;}
#product .itemSliderArea .arr:after { width: 37px; height: 2px; left: -16px; bottom: 0; top: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #fff;}
#product .itemSliderArea .prev .arr:before { width: 14px; height: 2px; bottom: 0; top: 0; left: -29px; content: ""; position: absolute; border-radius: 9999px; background-color: #fff; transform: rotate(135deg); transform-origin: calc(100% - 1px) 50%;}
#product .itemSliderArea .next .arr:before { width: 14px; height: 2px; bottom: 0; top: 0; right: -22px; content: ""; position: absolute; border-radius: 9999px; background-color: #fff; transform: rotate(45deg); transform-origin: calc(100% - 1px) 50%;}
@media screen and (max-width: 1199px) {
#product .itemSliderArea { left: 5%; position: relative; width: calc(100% - 5%);}
#product .itemSliderArea .itemSlider { padding-left: 45px;}
#product .itemSliderArea .arrow { width: 70px; height: 70px;}
#product .itemSliderArea .prev { left: -10px;}
#product .itemSliderArea .next { left: 920px;}
#product .itemSliderArea .arr:after { width: 26px; height: 2px; left: -14px; bottom: 0; top: 0;}
#product .itemSliderArea .prev .arr:before { width: 12px; height: 2px; bottom: 0; top: 0; left: -24px;}
#product .itemSliderArea .next .arr:before { width: 12px; height: 2px; bottom: 0; top: 0; right: -13px;}
#product .itemSliderArea .slick-list { margin: 0 -18px;}
#product .itemSliderArea .slick-slide { margin: 0 18px;}
}
@media screen and (max-width: 1099px) {
#product .itemSliderArea .itemSlider { padding-left: 25px;}
#product .itemSliderArea .prev { left: -3%;}
#product .itemSliderArea .next { left: auto; right: 2%;}
#product .itemSliderArea .arr { padding: 10px 20px 10px 15px;}
#product .itemSliderArea .slick-list { margin: 0 -15px;}
#product .itemSliderArea .slick-slide { margin: 0 15px;}
#product .itemSliderArea .arr:after { left: 4px; top: 22px;}
#product .itemSliderArea .prev .arr:before { top: 21px; left: -6px;}
#product .itemSliderArea .next .arr:before { top: 21px; right: 4px;}
}
@media screen and (max-width: 899px) {
#product .itemSliderArea .arrow { top: 100px; width: 45px; height: 45px;}
#product .itemSliderArea .arr:after { width: 18px; left: 8px;}
#product .itemSliderArea .prev { left: -4%;}
#product .itemSliderArea .next { right: 1%;}
#product .itemSliderArea .prev .arr:before { width: 10px; top: 21px; left: 0;}
#product .itemSliderArea .next .arr:before { width: 10px; top: 21px; right: 8px;}
}
	
/*==================================
	info
==================================*/
#info { padding: 160px 0 220px 0; position: relative;}
#info:before,
#info:after { width: 100%; position: absolute; content: ""; z-index: 1;}
#info:before { height: 103px; background: url("../img/top/info_bg_top.webp") center center repeat-x; top: 0;}
#info:after { height: 99px; background: url("../img/top/info_bg_btm.webp") center center repeat-x; bottom: 0;}
#info .inner { position: relative;}
#info .tit { position: relative;}
#info .tit:before { width: 86px; height: 66px; left: 420px; background: url("../img/top/info_stamp.webp") no-repeat; content: ""; position: absolute;}
#info .tit .jp { font-size: 36px; margin-bottom: 10px; line-height: 1; position: relative; z-index: 1; font-weight: 600;}
#info .tit .en { font-size: 60px; position: relative; z-index: 1;}
#info .tit .en .line { color: #e7624c;}
#info .tit .en .line:before { width: 750px; height: 20px; bottom: -5px; left: -20px; position: absolute; content: ""; background: url("../img/top/info_line.webp")no-repeat;}
#info .more { position: absolute; right: 0; top: 50px; z-index: 10;}
#info .more { font-size: 16px; margin-top: 30px; text-align: right;}
#info .more a {}
#info .more a .arr { padding: 15px 40px 15px 30px; position: relative;}
#info .more a .arr:after { width: 100%; height: 2px; left: 0; bottom: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #222;}
#info .more a .arr:before { width: 20px; height: 2px; bottom: 0; right: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #222; transform: rotate(45deg); transform-origin: calc(100% - 1px) 50%;}
#info .infoSliderArea { margin-top: 60px; overflow: hidden; position: relative; z-index: 10;}
#info .infoSliderArea .infoSlider {}
#info .infoSliderArea .infoSlider .slide { width: 430px;}
#info .infoSliderArea .infoSlider .slide.new a { position: relative; text-align: center;}
#info .infoSliderArea .infoSlider .slide.new a:before { width: 80px; height: 80px; left: 20px; top: 0; content: ""; position: absolute; color: #fff; background: url("../img/top/info_new.webp")no-repeat;}
#info .infoSliderArea .infoSlider .slide a .ph { width: 368px; height: 336px; border-radius: 150px; background: url("../img/top/about_logo_sp.webp") center center no-repeat; background-size: 60% auto; background-color: #fff; margin: 0 auto;}
#info .infoSliderArea .infoSlider .slide a .ph img { width: 368px; height: 336px; border-radius: 150px; object-fit: cover;}
#info .infoSliderArea .infoSlider .slide a .txt { font-size: 24px; margin-top: 20px; font-weight: 400; text-align: center;}
@media screen and (max-width: 899px) {
#info {padding: 50px 0 90px 0;}
#info .inner { width: 90%;}
#info:before { display: none;}
#info:after { background: url("../img/top/info_bg_btm_sp.webp") no-repeat; background-size: 100% 12vw; height: 12vw;}
#info .tit:before { width: 43px; height: 33px; left: 70px; top: -10px; background-size: cover;}
#info .tit .jp { font-size: 18px; margin-bottom: 5px;}
#info .tit .en { font-size: 30px;}
#info .tit .en .line:before { width: 90px; height: 10px; left: -10px; background-size: cover;}
#info .more { top: 0;}
#info .more a .arr { padding: 10px 20px 10px 15px;}
#info .more a .arr:before { width: 15px;}
#info .more { font-size: 14px;}
#info .infoSliderArea { margin-top: 20px;}
#info .infoSliderArea .infoSlider .slide { width: 220px;}
#info .infoSliderArea .infoSlider .slide.new a:before { width: 40px; height: 40px; left: 10px; background-size: cover;}
#info .infoSliderArea .infoSlider .slide a .ph { width: 184px; height: 168px; border-radius: 150px;}
#info .infoSliderArea .infoSlider .slide a .ph img { width: 184px; height: 168px; border-radius: 150px;}
#info .infoSliderArea .infoSlider .slide a .txt { font-size: 12px; margin-top: 10px;}
}

/*==================================
	features
==================================*/
#features { margin-bottom: -380px; padding: 40px 0 500px 0; overflow: hidden; position: relative; z-index: 5;}
#features .inner { position: relative;}
#features .tit { font-size: 36px; position: relative; z-index: 1; font-weight: 600;}
#features .txt { font-size: 200px; left: -120px; color: #fdf4eb; font-family: "Outfit"; font-weight: 700; position: absolute; line-height: 1; pointer-events: none;}
#features .pc { display: block;}
#features .sp { display: none;}
#features .slick-list { overflow: visible;}
#features .featuresSliderArea { padding: 120px 0; position: relative;}
#features .featuresSliderArea img { width: 100%; max-width: 895px; height: auto; margin: 0 auto;}
#features .featuresSliderArea .featuresSlider .slick-list { margin: 0 -25px;}
#features .featuresSliderArea .featuresSlider .slick-slide { margin: 0 25px;}
#features .featuresSliderArea .featuresSlider .slick-dots { width: 260px; left: calc( 50% + 220px); bottom: -130px; text-align: right;}
#features .featuresSliderArea .featuresSlider .slick-dots li { width: 32px; height: 30px; margin: 0 10px;}
#features .featuresSliderArea .featuresSlider .slick-dots li button { width: 32px; height: 30px; padding: 0;}
#features .featuresSliderArea .featuresSlider .slick-dots li button::before { width: 32px; height: 30px; background: url("../img/top/features_icon.webp")no-repeat; background-size: cover; content: "";}
#features .featuresSliderArea .featuresSlider .slick-dots li.slick-active {}
#features .featuresSliderArea .slick-num { font-size: 20px; width: 80px; left: calc( 50% + 100px); bottom: 65px; position: absolute; text-align: right; font-family: "Outfit"; font-weight: 700; }
#features .free_phArea {}
#features .free_phArea:before {}
#features .free_phArea:before,
#features .free_phArea:after { content: ""; position: absolute;}
#features .free_phArea:before { width: 309px; height: 309px; right: calc( 50% + 310px); bottom: 100px; background: url("../img/top/free_spoon.webp") no-repeat; background-size: cover;}
#features .free_phArea:after { width: 488px; height: 546px; left: calc( 50% + 320px); bottom: 0; background: url("../img/top/free_dish.webp") no-repeat; background-size: cover;}
@media screen and (max-width: 2000px) {
#features .featuresSliderArea .featuresSlider .slick-dots { left: calc( 50% + 190px); }
}
@media screen and (max-width: 1900px) {
#features .featuresSliderArea .featuresSlider .slick-dots { left: calc( 50% + 150px); }
}
@media screen and (max-width: 1200px) {
#features .featuresSliderArea .featuresSlider .slick-dots { left: calc( 50% + 120px); }
#features .featuresSliderArea .slick-num { left: calc( 50% + 80px); bottom: 60px;}
}
@media screen and (max-width: 1000px) {
#features .featuresSliderArea .featuresSlider .slick-dots { left: calc( 50% + 80px); }
#features .featuresSliderArea .slick-num { left: calc( 50% + 40px); bottom: 56px;}
}
@media screen and (min-width: 900px) {
#features .featuresSliderArea:before { width: 158px; height: 163px; left: calc(50% + 200px); top: 70px; position: absolute; content: ""; background: url("../img/top/features_illust.webp") no-repeat; z-index: 10;}
#features .featuresSlider { transform: rotate(calc(9deg * -1));}
#features .featuresSlider .slick-slide { transform: rotate(calc(-9deg * -1));}

#features .featuresSlider .slick-dots { transform: rotate(calc(-9deg * -1));}
#features .featuresSlider .slick-dots li button:before { font-size: 20px;}
}
@media screen and (max-width: 899px) {
#features { margin-bottom: -40vw; padding: 90px 0 65vw 0;}
#features:before { height: 12vw;}
#features .tit { font-size: 24px;}
#features .txt { font-size: 18.66vw; left: -7%; top: 0;}
#features .pc { display: none;}
#features .sp { display: block;}
#features .featuresSliderArea { padding: 60px 0 0 0;}
#features .featuresSliderArea img { width: 65vw;}
#features .featuresSliderArea .featuresSlider .slick-list { margin: 0 -13px;}
#features .featuresSliderArea .featuresSlider .slick-slide { margin: 0 13px;}
#features .featuresSliderArea .featuresSlider .slick-dots { width: 130px; left: calc( 50% + 100px); bottom: -50px;}
#features .featuresSliderArea .featuresSlider .slick-dots li { width: 16px; height: 15px; margin: 0 5px;}
#features .featuresSliderArea .featuresSlider .slick-dots li button { width: 16px; height: 15px;}
#features .featuresSliderArea .featuresSlider .slick-dots li button::before { width: 16px; height: 15px;}
#features .featuresSliderArea .slick-num { font-size: 12px; width: 50px; left: calc( 50% + 40px); bottom: -55px;}
#features .free_phArea::before { width: 31.33vw; height: 31.33vw; right: calc( 50% + 29.33vw); bottom: 0;}
#features .free_phArea::after { width: 33.33vw; height: 57.73vw; left: calc( 50% + 17.33vw); bottom: 0;}
}
@media screen and (max-width: 650px) {
#features .featuresSliderArea img { width: 78vw;}
#features .featuresSliderArea .featuresSlider .slick-dots { left: auto; right: 10%;}
#features .featuresSliderArea .slick-num { left: auto; right: calc(10% + 140px);}
}

/*==================================
	about
==================================*/
#about { margin-bottom: -120px;position: relative; overflow: hidden;}
@media screen and (max-width: 1299px) {
#about { margin-bottom: -80px;}
}
@media screen and (max-width: 899px) {
#about { margin-bottom: -5vw;}
}

/* free */
#about .free { padding-top: 170px; text-align: center; position: relative;}
#about .free .pc { display: block;}
#about .free .sp { display: none;}
#about .free .tit { font-size: 44px; position: relative; z-index: 5; line-height: 1; font-weight: 600;}
#about .free .tit .en { font-size: 88px; font-weight: 500;}
#about .free .tit .line { padding-bottom: 20px; background: url("../img/top/free_line.webp")center bottom no-repeat; background-size: 100% auto;}
#about .free .txt { font-size: 170px; top: 280px; color: #feecdb; font-family: "Outfit"; font-weight: 700; position: absolute; line-height: 1; left: 0; right: 0; margin: auto; pointer-events: none;}
#about .free .iconList { margin-top: 140px; gap: 30px; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index: 5;}
#about .free .iconList li {}
@media screen and (max-width: 899px) {
#about .free { padding-top: 20vw;}
#about .free .pc { display: none;}
#about .free .sp { display: block;}
#about .free .tit { font-size: 6.4vw;}
#about .free .tit .line { font-size: 8vw; padding-bottom: 10px;}
#about .free .tit .line .en { font-size: 12.26vw;}
#about .free .txt { font-size: 18.66vw; top: 44vw;}
#about .free .iconList { margin-top: 18vw; gap: 5.33vw;}
#about .free .iconList li { width: 21.33vw;}
#about .free .iconList li img { width: 100%;}
}

/* concept */
#about .concept { margin: 220px 0 180px 0; position: relative;}
#about .concept:before { width: 600px; height: 700px; right: calc( 50% + 120px); top: 0; position: absolute; content: ""; background: url("../img/top/about_ph.webp") no-repeat;}
#about .concept .inner { position: relative; z-index: 1;}
#about .concept .pc { display: block;}
#about .concept .sp { display: none;}
#about .concept .phArea {}
#about .concept .phArea:before { position: absolute; content: "";}
#about .concept .phArea .copy { right: calc( 50% - 20px); position: absolute; text-align: left; writing-mode: vertical-rl;}
#about .concept .phArea .copy span { font-size: 54px; padding: 15px 8px 0 8px; margin: 0 10px; color: #fff; background: #e7624c; display: inline-block; line-height: 1.2;}
#about .concept .phArea .txt { font-size: 170px; color: #f5dfca; font-family: "Outfit"; font-weight: 700; position: absolute; line-height: 1; pointer-events: none;}
#about .concept .phArea .logo { width: 300px; position: absolute;}
#about .concept .phArea .logo img { width: 100%;}
#about .concept .txtArea { margin-top: 40px; padding-left: calc( 50% + 100px); position: relative; z-index: 10;}
#about .concept .txtArea .tit { font-size: 36px; margin-bottom: 40px; font-weight: 600;}
#about .concept .txtArea .txt { line-height: 1.8;}
#about .concept .txtArea .more { font-size: 16px; margin-top: 30px; text-align: right;}
#about .concept .txtArea .more a {}
#about .concept .txtArea .more a .arr { padding: 15px 40px 15px 30px; position: relative;}
#about .concept .txtArea .more a .arr:after { width: 100%; height: 2px; left: 0; bottom: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #222;}
#about .concept .txtArea .more a .arr:before { width: 20px; height: 2px; bottom: 0; right: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #222; transform: rotate(45deg); transform-origin: calc(100% - 1px) 50%;}
@media screen and (max-width: 1299px) {
#about .concept {}
}
@media screen and (max-width: 1219px) {
#about .concept .phArea .copy { right: calc( 50% + 20px);}
#about .concept .phArea .copy span { font-size: 46px; margin: 0 5px;}
#about .concept .phArea .logo { width: 250px;}
#about .concept .txtArea { margin-top: 20px; padding-left: 50%;}
#about .concept .txtArea .tit { font-size: 32px; margin-bottom: 20px;}
}
@media screen and (min-width: 900px) {
#about .concept .inner { min-height: 700px;}
#about .concept .phArea { min-height: 700px; position: absolute; width: 100%;}
#about .concept .phArea:before { right: calc( 50% + 220px); top: -100px; width: 165px; height: 126px; background: url("../img/top/about_illust.webp") no-repeat;}
#about .concept .phArea .copy { top: -70px;}
#about .concept .phArea .txt { bottom: 0; left: calc( 50% + 45px); z-index: 5;}
#about .concept .phArea .logo { right: calc( 50% - 80px); bottom: -90px;}
#about .concept .txtArea .txt { padding-right: 50px;}
#about .concept .txtArea .more {}
}
@media screen and (max-width: 899px) {
#about .concept { margin: 80px 0 90px 0;}
#about .concept:before { width: 80vw; height: 93.33vw; left: 0; right: auto; background-size: cover;}
#about .concept .pc { display: none;}
#about .concept .sp { display: block;}
#about .concept .inner { min-height: 93.33vw;}
#about .concept .phArea { min-height: 93.33vw;}
#about .concept .phArea:before { right: calc( 50% + 35vw); top: 84vw; width: 22vw; height: 16.8vw; background: url("../img/top/about_illust_sp.webp") no-repeat; background-size: cover;}
#about .concept .phArea .copy { right: -5vw; top: 10vw;}
#about .concept .phArea .copy span { font-size: 7.2vw; padding: 10px 5px 0 5px;}
#about .concept .phArea .txt { font-size: 18.66vw; bottom: 0; left: -8%;}
#about .concept .phArea .logo { width: 34vw; right: 0; top: 70vw;}
#about .concept .txtArea { margin-top: 60px; padding: 0;}
#about .concept .txtArea .tit { font-size: 24px; margin-bottom: 40px;}
#about .concept .txtArea .txt { line-height: 2;}
#about .concept .txtArea .more {}
#about .concept .txtArea .more a .arr { padding: 10px 20px 10px 15px;}
#about .concept .txtArea .more a .arr:before { width: 15px;}
#about .concept .txtArea .more { font-size: 14px;}
}

/* faq */
#about .faq { padding-bottom: 60px; text-align: center; position: relative;}
#about .faq a { font-size: 36px; max-width: 1000px; width: 76%; padding: 15px; margin: 0 auto; background: #ab8269; color: #fff;}
#about .faq a .line { padding: 110px 50px 50px 50px; border: solid 1px #fff; display: block; position: relative;}
#about .faq a .line:before { width: 66px; height: 61px; top: 40px; background: url("../img/top/faq_icon.webp") no-repeat; background-size: 100% auto; position: absolute; left: 0; right: 0; margin: auto; content: ""; display: inline-block;}
#about .faq a .line .arr { width: 70px; height: 2px; right: 20px; bottom: 0; top: 0; margin: auto;content: ""; position: absolute; border-radius: 9999px; background-color: #fff;}
#about .faq a .line .arr:before { width: 20px; height: 2px; bottom: 0; right: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #fff; transform: rotate(45deg); transform-origin: calc(100% - 1px) 50%;}
#about .faq .illust { left: calc( 50% + 400px); bottom: 0; position: absolute;}
#about .faq .illust img { width: 100%; max-width: 224px;}
#about .faq .illust .pc { display: block;}
#about .faq .illust .sp { display: none;}
@media screen and (max-width: 1299px) {
#about .faq a { font-size: 28px;}
#about .faq .illust { left: calc( 50% + 31vw);}
}
@media screen and (max-width: 899px) {
#about .faq { padding-bottom: 30px;}
#about .faq a { font-size: 18px;}
#about .faq a .line { padding: 60px 5% 25px 5%;}
#about .faq a .line:before { width: 33px; height: 31px; top: 20px;}
#about .faq a .line .arr { width: 35px; height: 2px; right: 20px;}
#about .faq a .line .arr:before { width: 10px; height: 2px;}
#about .faq .illust { width: 30%; max-width: 150px; left: 0;}
#about .faq .illust .pc { display: none;}
#about .faq .illust .sp { display: block;}
}

/*==================================
	instagram
==================================*/
#instagram { padding-top: 290px; position: relative; overflow: hidden;}
#instagram:before { height: 154px; width: 100%; background: #222; position: absolute; bottom: 0; left: 0; right: 0; content: "";}
#instagram .outer { padding: 90px 90px 140px 90px; background: #fff; position: relative; z-index: 1; border-radius: 60px;}
#instagram .outer:before,
#instagram .outer:after { content: ""; position: absolute; z-index: 2;}
#instagram .outer .titArea { position: absolute; top: -110px; left: 0; right: 0; margin: auto; text-align: center;}
#instagram .outer .titArea .subtit { margin-bottom: 15px; display: block;}
#instagram .outer .titArea .subtit img { margin: 0 auto; max-width: 251px; width: 25%;}
#instagram .outer .titArea .tit { font-size: 60px; font-family: "Outfit"; font-weight: 700; letter-spacing: 0.08em;}
#instagram .outer .icon { margin-bottom: 50px; text-align: center;}
#instagram .outer .icon img { display: inline; width: auto;}
#instagram .more { font-size: 16px; margin-top: 100px; text-align: center;}
#instagram .more a {}
#instagram .more a .arr { padding: 15px 40px 15px 30px; position: relative;}
#instagram .more a .arr:after { width: 100%; height: 2px; left: 0; bottom: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #222;}
#instagram .more a .arr:before { width: 20px; height: 2px; bottom: 0; right: 0; content: ""; position: absolute; border-radius: 9999px; background-color: #222; transform: rotate(45deg); transform-origin: calc(100% - 1px) 50%;}
@media screen and (min-width: 900px) {
#instagram .outer:before { width: 423px; height: 481px; background: url("../img/top/ig_dish.webp") right top no-repeat; background-size: 100% auto; right: calc( 50% + 300px); top: -290px;}
#instagram .outer:after { width: 684px; height: 432px; background: url("../img/top/ig_spoon.webp") left top no-repeat; background-size: 100% auto; left: calc( 50% + 200px); bottom: 0;}
#instagram .outer .pcImg { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;}
#instagram .outer .pcImg li { width: 17.8%; }
#instagram .outer .pcImg li img { width: 100%;}
#instagram .outer .spImg { display: none;}
}
@media screen and (max-width: 1359px) {
#instagram { padding-top: 20vw;}
#instagram .outer { padding: 90px 6% 10vw 6%;}
#instagram .outer:before { width: 35%; height: 36vw; top: -20vw; right: calc( 50% + 28vw);}
#instagram .outer:after { width: 55%; height: 33vw; left: calc( 50% + 15vw);}
#instagram .outer .pcImg { gap: 15px 2.5%;}
#instagram .more { margin-top: 8vw;}
}
@media screen and (max-width: 899px) {
#instagram { padding-top: 26vw;}
#instagram:before { height: 20vw;}
#instagram .outer { padding: 10vw 0 18vw 0; border-radius: 30px;}
#instagram .outer:before { width: 26vw; height: 46vw; background: url("../img/top/ig_dish_sp.webp") no-repeat; background-size: 100% auto; right: -10%; top: -26vw;}
#instagram .outer:after { width: 32.8vw; height: 33vw; background: url("../img/top/ig_spoon_sp.webp") no-repeat; background-size: 100% auto; left: -10%; bottom: 15vw;}
#instagram .outer .titArea { top: -80px;}
#instagram .outer .titArea .tit { font-size: 45px;}
#instagram .outer .titArea .subtit { margin-bottom: 10px;}
#instagram .outer .titArea .subtit img { width: 40%; max-width: 150px;}
#instagram .outer .icon { margin-bottom: 5vw;}
#instagram .outer .icon img { width: 22px;}
#instagram .outer .pcImg { display: none;}
#instagram .outer .spImg { display: block;}
#instagram .outer .spImg img { width: 100%;}
#instagram .more { margin-top: 15vw;}
#instagram .more a .arr { padding: 10px 20px 10px 15px;}
#instagram .more a .arr:before { width: 15px;}
}
@media screen and (min-width: 750px) {
#instagram .outer .subtit .pc { display: block;}
#instagram .outer .subtit .sp { display: none;}
}
@media screen and (max-width: 749px) {
#instagram .outer .titArea { top: -55px;}
#instagram .outer .subtit .pc { display: none;}
#instagram .outer .subtit .sp { display: block;}
#instagram .outer .subtit img { width: 126px;}
#instagram .outer .titArea .tit { font-size: 30px;}
#instagram .more { font-size: 14px;}
}