@charset "UTF-8";
/*==================================================
First View
==================================================*/
.sec_fv{
    background-image: url(../img/product/fv.webp);
}
.sec_fv::after{
    background: rgba(255, 255, 255, 0.5);    
}
/*==================================================
slogan
==================================================*/
.art_slogan {
    padding: 1px;
}
.slogan_txt_wrap {
    position: relative;
    z-index: 4;
}
.slogan_txt_wrap {
    margin: min(15vw,180px) auto min(24vw,360px);
    width: min(94%, 1000px);
}
.slogan_ttl {
    font-size: min(6.5vw,50px);
    line-height: 150%;
    margin-bottom: min(6.5vw,48px);
}
.slogan_txt {
    font-size: min(4.5vw, 20px);
    line-height: min(8vw, 260%);
}
/*----------------波の画像---*/
.slogan_wave {
    position: absolute;
    z-index: 1;
    width: 40%;
    height: auto;
    top: 22vw;
    bottom: 0;
    right: 5vw;
    margin: auto;
}
@media (max-width:840px){
.slogan_wave {
    top: auto;
    bottom: 30vw;
    width: 100%;
}
}
/*----------------カニの写真---*/
.slogan_img_wrap {
    position: absolute;
    z-index: 2;
    width: 53%;
    top: min(12vw, 120px);
    right: 0;
}
img.slogan_img{
    transition: all cubic-bezier(0.22, 1, 0.36, 1) 800ms;
    transform-origin: center;
}
img.slogan_img01 {
    width: 80%;
    max-width: 640px;
    margin-left: calc(35% + 66px);
}
img.slogan_img02 {
    width: 90%;
    max-width: 760px;
}
@media (max-width:840px){
.art_slogan {
    padding-bottom: min(55vw, 320px);
}
.slogan_img_wrap {
    width: 70%;
    left: 0;
    right: auto;
    bottom: 0;
    top: auto;
}
img.slogan_img01 {
    margin-bottom: max(-5vw, -30px);
}
}
/*----------------横に流れる文字---*/
.txtslider_wrap{
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: min(10vw,180px);
    left: 0;    
}
.lot_txtslide {
    color: #e6e1da;
    font-size: 9.65vw;
    line-height: 130%;
    white-space: nowrap;
    font-weight: 800;
}

/*==================================================
flow
==================================================*/
.sec_flow {
    margin-bottom: max(-45vw,-260px);
}
.sec_flow + section {
    padding-top: min(45vw,260px);
}
.art_flow {
    background: #fff;
    padding: min(9vw, 85px) 0 min(10vw, 80px) 5vw;
    z-index: 5;
}
@media (min-width: 1297px) {
    .art_flow {
        border-radius: min(4vw, 20px) 0 0 min(4vw, 20px);
        margin-left: calc(calc(100vw - 66px - 1230px) / 2);
    }
}
.flow_ttl_wrap {
    margin-bottom: min(5vw, 40px);
}
.flow_ttl {
    line-height: 1;
    font-size: min(6vw, 30px);
}
.flow_subttl {
    line-height: 1em;
    margin-top: min(4vw, 25px);
    font-size: min(4vw, 20px);
}
.flow_slider_outer {
    position: relative;
}
.flow_slider_wrap{
    width: min(100%, 1330px);
    overflow: hidden;
}
.flow_slider {
    width: min(95%, 1010px);
}
.flow_slider .slick-list{
    overflow: unset !important;
}
.flow_slide {
    position: relative;
    margin-right: min(2vw,25px);
}
.flow_num {
    position: absolute;
    line-height: 1;
    font-size: min(5vw, 34px);
    color: #fff;
    background: #f00;
    width: min(10vw,70px);
    height: min(10vw,70px);
    padding: min(1vw,7px);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.flow_name {
    line-height: 1;
    font-size: min(4vw, 20px);
    font-weight: 500;
    margin-top: min(2.5vw, 20px);
}
/*ボタンカスタマイズ*/
.flow_arrow{
    width: min(95%, 987px);
    position: absolute;
    top: min(19vw, 140px);
}
.flow_arrow .slick-arrow {
    text-indent: -999999px;
    width: min(10vw,60px);
    aspect-ratio:1/1;
    border: 1px solid #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    background:  url(../img/cmn/arw_black.svg) no-repeat center / 45%;
    background-color: rgba(255,255,255,0.7);
    transition: all ease 300ms;
}
.flow_arrow .slick-arrow:hover{
    background-color: rgba(255,255,255,1);
}
.flow_arrow .slick-prev {
    left: max(-5vw, -30px);
    transform: rotate(90deg);
}
.flow_arrow .slick-next {
    right: max(-5vw, -30px);
    transform: rotate(-90deg);
}

/*==================================================
department
==================================================*/
.sec_department{
    background: #fd343e;
}
.art_department{
    padding: min(20vw,165px) 0 min(7vw,55px);
}
.dep_ttl_wrap {
    padding-left: min(7vw, 160px);
    color: #fff;
}
.dep_contents_wrap {
    width: min(90%, 1100px);
    margin: 0 auto;
        padding-top: min(5vw, 95px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
.dep_expert {
    width: 47%;
}
.dep_photo_wrap{
    position: absolute;
    width: min(47%, 517px);
    transition: all ease 300ms;
}
.dep_expert.toTop:not(.scrollEnd) .dep_photo_wrap {
    position: fixed;
    top: min(5vw, 95px);
}
.dep_num {
    line-height: 1.1;
    position: absolute;
    width: min(25vw, 190px);
    aspect-ratio: 1 / 1;
    top: max(-2vw, -20px);
    right: max(-2vw, -30px);
    background: linear-gradient(45deg, rgba(253, 52, 62, 0) 0%, rgba(253, 52, 62, 0) 50%, rgba(253, 52, 62, 1) 50%, rgba(253, 52, 62, 1) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    font-size: min(5vw, 30px);
    padding: 0 0 min(2vw, 30px) min(2vw, 30px);
    color: #2d2d2d;
    font-weight: 700;
}
.dep_num .big {
    font-size: 290%;
    line-height: 1;
}
.dep_deta {
    width: 43%;
    color: #fff;
}
.dep_detail_wrap {
    margin-top: min(8vw,120px);
    padding-bottom:min(12vw,130px);
    position: relative;
}
.dep_name {
    font-size: min(6vw, 40px);
    padding-bottom: min(5vw, 30px);
    border-bottom: 1px solid;
    margin-bottom: min(5vw, 30px);
}
.dep_subname {
    font-weight: bold;
    font-size: min(6vw, 26px);
    line-height: 1.6;
    margin-bottom: min(4vw, 30px);
}
.dep_detail_wrap .txt {
    line-height: min(8vw, 220%);
}
.dep_detail_wrap .subimg {
    margin-top: min(4vw, 30px);
}
@media (min-width:761px){
 .dep_photo_wrap.sp_only{
     display: none !important;
 }
}
@media (max-width:760px){
.dep_expert{
    display: none !important;
}
.dep_deta {
    width: 100%;
}
.dep_photo_wrap.sp_only {
    position: static;
    width: 100%;
    margin-bottom: 5vw;
}
.dep_photo {
        position: relative;
/*
    margin-left: 10%;
    margin-right: 10%;
 */
}
.dep_photo::before {
    content: "";
    display: block;
    background: linear-gradient(45deg, rgba(253, 52, 62, 0) 0%, rgba(253, 52, 62, 0) 50%, rgba(253, 52, 62, 1) 50%, rgba(253, 52, 62, 1) 100%);
    width: 15vw;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    right: 0;
}
.dep_detail_wrap{
    padding-top: 11.4vw;  
}
.dep_ttl_wrap .fv_ttl {
    font-size: 12vw;
}
.dep_name {
    width: calc(100% - 25vw);
    position: absolute;
    top: 0;
    border-bottom: none;
}
.dep_num {
    z-index: 2;
}
}

/*スクロール中のあれこれ*/
:where(.dep_expert) .dep_photo_wrap:not(:first-child){
    opacity: 0;
}
:where(.dep_expert) .dep_photo_wrap:not(:first-child).looked{
    opacity: 1;
}
.dep_expert.toTop.scrollEnd .dep_photo_wrap {
    bottom: min(12vw,130px);
}
/*==================================================
PRODUCT
==================================================*/
.art_product {
    padding-top: min(20vw, 170px);
    margin-bottom: min(15vw,120px);
}
.prod_ttl_wrap {
    padding-left: min(7vw, 160px);
    margin-bottom: min(12vw, 100px);
}
.art_prod_list {
    width: 94%;
    max-width: calc(100% - min(7vw, 160px)* 2);
    margin: 0 auto;
}
.p_cat_ttl_wrap {
    border-left: min(1.5vw, 9px) solid #fd343e;
    padding: 0 min(4vw, 24px) min(1vw, 7px);
    border-bottom: 1px solid;
    margin-bottom: min(7vw, 45px);
}
.p_cat_ttl {
    font-size: min(5vw, 30px);
    font-weight: 400;
    line-height: 1.4;
}
.product_list_wrap {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: min(12vw, 100px);
}
.product_list {
    width: min(48%, 240px);
    text-align: center;
    margin-bottom: 50px;
    margin-right: min(2%, 20px);
}
.p_list_img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: min(3vw, 20px);
    transition: all ease 300ms;
}
.product_list:hover .p_list_img {
    transform: scale(1.05);
}
.p_list_name {
    font-size: min(4vw, 21px);
    font-weight: 500;
    line-height: 1.2;
}
/*-------------------------------ポップアップ---*/
.mfp-container {
    transition: all ease 300ms;
    overflow: scroll;
}

.pop_wrap{
    color: #fff;
    width: min(94%,1020px);
    margin-left: auto;
    margin-right: auto;
}
.pop_list_flex {
    display: flex;
    justify-content: space-between;
    width: min(100%, 900px);
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    flex-wrap: wrap;
    transition: all ease 200ms;
    transform: translateY(80px);
    opacity: 0;
}
.pop_list_slide{
    width: 50%;
    margin-bottom: auto;
}
.pop_list_detail {
    width: 41.7%;
}
.pop_list_name {
    font-size: min(5vw, 30px);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: min(3vw, 30px);
}
.pop_list_txt {
    font-size: min(3.5vw, 18px);
    line-height: min(6vw, 230%);
}
.pop_wrap.move{
    opacity: 0;
}
.pop_wrap.moved{
    opacity: 1;
}

.art_prod_list .mfp-hide {
    display: block !important;
    visibility: hidden;
    position: absolute;
    z-index: -1;
}

.pop_wrap.moved .pop_list_flex{
    transform: translateY(0);
    transition-delay: 200ms;
    opacity: 1;
}
.mfp-container button.mfp-arrow {
    text-indent: -9999px;
    width: min(10vw, 60px);
    height: min(10vw, 60px);
    border: 1px solid #000;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    background: url(../img/cmn/arw_black.svg) no-repeat center / 45%;
    background-color: rgba(255, 255, 255, 1);
    transition: all ease 300ms;
}
.mfp-container button.mfp-arrow.mfp-arrow-left {
    left: 1vw;
    transform: rotate(90deg);
}
.mfp-container button.mfp-arrow.mfp-arrow-right{
    right: 1vw;
    transform: rotate(-90deg);
}
.mfp-container button.mfp-arrow::before,
.mfp-container button.mfp-arrow::after{
    display: none;
}
body .mfp-bg {
    width: 94% !important;
    top: 3svh !important;
    left: 3%;
    border-radius: 20px;
    height: 95vh !important;
    position: fixed !important;
}
body .mfp-wrap {
    max-height: 95vh;
    overflow: hidden;
    position: fixed !important;
    top: 3svh !important;
}
body .mfp-auto-cursor .mfp-content {
    width: min(94%, 1020px);
    padding: 4% 0;
    animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    animation: zoomIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.mfp-container::after {
    content: "";
    display: block;
    color: #fff;
    position: absolute;
    width: 30px;
    height: 30px;
    top: min(5vw, 50px);
    right: 5vw;
    z-index: 10;
    font-size: min(5vw, 60px);
    cursor: pointer;
    background: url(../img/cmn/ico_close.svg) no-repeat center / 100% auto;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}

.pop_list_slide .slick-dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.pop_list_slide .slick-dots button {
    text-indent: -1000vw;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    margin: 5px;
}
.pop_list_slide .slick-dots li.slick-active button {
    background: #fd343e;
}
@media (min-width:841px){
body .mfp-bg {
    height: 94svh !important;
}
}
@media (max-width:840px){
.pop_list_slide{
    width: min(80%, 580px);
    margin-left: auto;
    margin-right: auto;
}
.pop_list_slide .slick-dots {
    margin-top: 0;
    margin-bottom: 4vw;
}
.pop_list_img {
    margin: 0 auto 2vw;
}
.pop_list_detail {
    width: 100%;
}
.mfp-container button.mfp-arrow.mfp-arrow-left {
    left: min(5vw, 30px);
}
.mfp-container button.mfp-arrow.mfp-arrow-right{
    right: min(5vw, 30px);
    }
}