@charset "UTF-8"; /* CSS Document */ @media (min-width:1051px) { /*メイン＋ビジネス*/ #lead_wrapper{} #lead_wrapper #movie_wrapper{position: relative;width: 100%; margin:0 auto;padding: 0;z-index:-1} #lead_wrapper #movie_wrapper video{position:fixed;top: 0;left: 0;width: 100%; height: 100%; min-width: 100%; min-height: 100%;object-fit: cover;object-position: center;border: none;} #lead_wrapper #main_image{width: 100%;height: 100vh;margin: 0 auto;padding: 0;} #lead_wrapper #main_image .inner{position: relative;width: 100%;height: 100%} #lead_wrapper #main_image .inner::before{content:'';position:absolute;top: 0%;left:0%;width:100%;height: 100%;background: rgba(0,0,0,0.15)} #lead_wrapper #main_image .inner .text_area{position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 80%;min-width: 1000px} /* #lead_wrapper #main_image .inner .text_area .catchcopy{color: white;font-size: clamp(55px,8vw, 95px);font-weight: 700;letter-spacing: 3px} #lead_wrapper #main_image .inner .text_area .catchcopy:nth-of-type(2){ color: #ff4800;} */ #lead_wrapper #main_image .inner .text_area .catchcopy{color: white;font-size: clamp(45px,4vw, 75px);font-weight: 700;letter-spacing: 3px} #lead_wrapper #main_image .inner .text_area .sub{margin: 0;padding: 0;font-size: clamp(38px, 2.8vw,48px);color:#ff4800;font-weight: 700;letter-spacing:1px;} #lead_wrapper #business_vision{width: 100%;height: 100vh;margin: 0 auto;padding: 0;} #lead_wrapper #business_vision .inner{position: relative;width: 100%;height: 100%;/*aspect-ratio: 3.5 / 1;*/} #lead_wrapper #business_vision .inner::before{content:'';position:absolute;top: 0%;left:0%;width:100%;height: 100%;background: rgba(0,0,0,0.15)} #lead_wrapper #business_vision .inner .logo{position:absolute;top: 50%;transform: translateY(-50%);right: 0%;width: 50%;overflow: hidden;} #lead_wrapper #business_vision .inner .logo img{height:auto;width:120%} #lead_wrapper #business_vision .inner .text_area{position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 80%} #lead_wrapper #business_vision .inner .text_area h2{margin: 0 0 40px 0;font-size:25px;color:#FF4800;font-weight: 900;letter-spacing: 2px} #lead_wrapper #business_vision .inner .text_area .message{margin: 0 0 30px 0;font-size: clamp(35px,3vw, 55px);color: white;font-weight: 700;letter-spacing: 3px} #lead_wrapper #business_vision .inner .text_area .sub{margin: 0 0 50px 0;width: 40%;font-size:20px;color: white;font-weight: 500;letter-spacing: 2px;line-height: 32px} #lead_wrapper #business_vision .inner .text_area .banner{width: 300px;margin: 0 auto 0 0;} #lead_wrapper #business_vision .inner .text_area .banner a{position:relative;display:block;background:white;padding:35px 0px;color:black;font-size:16px;letter-spacing:1px;text-decoration:none;font-weight:600;overflow:hidden;transition: color 0.3s ease;border-radius: 10px} #lead_wrapper #business_vision .inner .text_area .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#ff4800;transition: width 0.3s ease;z-index:1} #lead_wrapper #business_vision .inner .text_area .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:90%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:#ff4800;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #lead_wrapper #business_vision .inner .text_area .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #lead_wrapper #business_vision .inner .text_area .banner a:hover::before { width: 100%;} #lead_wrapper #business_vision .inner .text_area .banner a:hover::after{color:white} #lead_wrapper #business_vision .inner .text_area .banner a:hover span{color:white} /*ABOUT ANF*/ #about_us{width: 100%;margin: 0 auto;padding:100px 0 100px 0;background: white;} #about_us h3{margin: 0 auto 10px auto;padding:0;text-align: center;font-size: clamp(35px,3vw, 55px);color:black;font-weight: 900;letter-spacing: 3px;} #about_us .jpn{margin: 0 auto 30px auto;padding:0;text-align: center;font-size:25px;color:#FF4800;font-weight: 700;letter-spacing: 1px;} #about_us .data_group{width:100%;margin: 0 auto 50px auto; display: flex; overflow: hidden;} #about_us .data_group .data{ display: flex; animation:data 50s linear infinite;padding: 10px 0; width: max-content;} @keyframes data{ 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); }} #about_us .data_group .data .unit { width: 200px;height: 200px;border-radius: 10px;background: white;margin: 0 20px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); } #about_us .data_group .data .unit img { display: block; width: 98%; height: auto; margin: 0 auto;vertical-align: bottom;} #about_us .banner{width: 300px;margin: 0 auto;} #about_us .banner a{position:relative;display:block;background:#ff4800;padding:35px 0px;color: white;font-size: 16px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #about_us .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #about_us .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:85%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #about_us .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #about_us .banner a:hover::before { width: 100%;} #about_us .banner a:hover::after{color:white} #about_us .banner a:hover span{color:white} /*店舗*/ #stores_index{width: 100%;margin: 0 auto;padding:100px 0 100px 0;background:#F2F2F2} #stores_index h4{margin: 0 auto 10px auto;padding:0;text-align: center;font-size: clamp(35px,3vw, 55px);color:black;font-weight: 700;letter-spacing: 3px;} #stores_index .jpn{margin: 0 auto 30px auto;padding:0;text-align: center;font-size:25px;color:#FF4800;font-weight: 700;letter-spacing: 1px;} #stores_index .text{margin: 0 auto 50px auto;padding:0;text-align: center;font-size:14px;font-weight: 500;letter-spacing: 1px;line-height: 28px} #stores_index .inner{width: 80%;min-width: 1000px;margin: 0 auto 30px auto;display: flex; flex-wrap: wrap; justify-content: space-between;} #stores_index .inner .unit{width: 32%;margin-bottom: 40px} #stores_index .inner .unit a{display:block;text-decoration: none;color:black;} #stores_index .inner .unit a figure{position: relative;aspect-ratio:1.6/1;margin: 0 auto 0px auto;padding: 0;border-radius: 10px;overflow: hidden} #stores_index .inner .unit a figure::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:black;transition: width 0.3s ease;z-index:1} #stores_index .inner .unit a figure img{width: 100%;height: 100%;object-fit: cover;transition:1s all;} #stores_index .inner .unit a .icon{display: block; position: relative;width: 100%;background: red} #stores_index .inner .unit a .icon::before{content: '';position:absolute;top: -40px;left: 50%;transform: translateX(-50%);width: 70px;height:70px;background: url("../img/stores_hexagon.png") no-repeat;background-position: 50% 50%;background-size:100% auto;z-index:2} #stores_index .inner .unit a .icon::after{content:'';position:absolute;top:-20px;left: 50%;transform: translateX(-50%);width: 30px;height:30px;background: url("../img/stores_cutlery.png") no-repeat;background-position: 50% 50%;background-size:100% auto;z-index:2} #stores_index .inner .unit a .name{display: block; text-align: center;font-size:24px;font-weight: 700;letter-spacing: 1px;margin: 40px auto 0 auto} #stores_index .inner .unit a:hover figure::before{width: 100%;background: rgba(000,000,000,0.6)} #stores_index .inner .unit a:hover figure img{transform:scale(1.2,1.2); transition:0.5s all;} #stores_index .inner .unit a:hover .name{color:#808080} #stores_index .banner{width: 300px;margin: 0 auto;} #stores_index .banner a{position:relative;display:block;background:#ff4800;padding:35px 0px;color: white;font-size: 16px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #stores_index .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #stores_index .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:85%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #stores_index .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #stores_index .banner a:hover::before { width: 100%;} #stores_index .banner a:hover::after{color:white} #stores_index .banner a:hover span{color:white} /*採用*/ #recruit{width: 100%;height: 650px;margin: 0 auto;padding:0px 0 0px 0;background:white;} #recruit .inner{position: relative;width: 100%;height: 100%;} #recruit .inner #slider_wrapper{position: absolute;top: 50%;transform: translateY(-50%);right:0%;width: 100%;height:100%;overflow: hidden;display: flex; align-items: center; justify-content: center;} #recruit .inner #slider_wrapper #all_loop{width: 800px;margin: 0 10% 0 auto;display: flex;justify-content: space-between;transform: rotate( 12deg );} #recruit .inner #slider_wrapper #all_loop .loop{width: 250px} @keyframes vertical-animation { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes vertical-animation_reverse{ from { transform: translateY(-100%); } to { transform: translateY(0%); } } #recruit .inner #slider_wrapper .slider-container { height: 900px; overflow: hidden;} #recruit .inner #slider_wrapper .slider-wrapper { display: grid; animation: vertical-animation 30s linear infinite;} #recruit .inner #slider_wrapper .slider-wrapper_reverse{display:grid;animation:vertical-animation_reverse 30s linear infinite;} #recruit .inner #slider_wrapper .slide { width:100%; margin: 0 auto 20px;} #recruit .inner #slider_wrapper .slide img { width: 100%; height:266px; object-fit: cover; vertical-align: bottom;} #recruit .inner #text_wrapper{position: absolute;top: 50%;transform: translate(-50%,-50%);left:50%;width:50%;max-width: 1100px; min-width: 1050px} #recruit .inner #text_wrapper h5{margin: 0 auto 30px 0;padding: 0;font-size:25px;color:#FF4800;font-weight: 700;letter-spacing: 1px;} #recruit .inner #text_wrapper .message{margin: 0 auto 0px 0;padding: 0;font-size: clamp(35px,3vw, 55px);color:black;font-weight: 700;letter-spacing: 3px;line-height: 1.2/*line-height: 1.2*/} #recruit .inner #text_wrapper .message span{/*display:block;*/} #recruit .inner #text_wrapper .sub{margin: 30px auto 80px 0;padding: 0;font-size:18px;color:black;font-weight: 600;letter-spacing: 1px} #recruit .inner #text_wrapper .banner{width: 300px;} #recruit .inner #text_wrapper .banner a{position:relative;display:block;background:#ff4800;padding:35px 0px;color: white;font-size: 16px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #recruit .inner #text_wrapper .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #recruit .inner #text_wrapper .banner a::after{content:"\f08e";position:absolute;top:50%;transform:translateY(-50%);left:85%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #recruit .inner #text_wrapper .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #recruit .inner #text_wrapper .banner a:hover::before { width: 100%;} #recruit .inner #text_wrapper .banner a:hover::after{color:white} #recruit .inner #text_wrapper .banner a:hover span{color:white} /*ニュース*/ #news_index{width: 100%;margin: 0 auto;padding:100px 0 80px 0;background:#f2f2f2;} #news_index .inner{width: 80%;min-width: 1000px;margin: 0 auto;} #news_index .inner .lead{display: flex; justify-content:space-between;align-items: center;margin: 0 auto 50px auto;} #news_index .inner .lead .title{width: 50%} #news_index .inner .lead .title h6{margin: 0 auto 5px auto;padding: 0;font-size: clamp(35px,3vw, 55px);letter-spacing: 3px} #news_index .inner .lead .title .jpn{margin: 0;padding: 0;font-size: 16px;letter-spacing: 2px;color: #ff4800;font-weight: 700} #news_index .inner .lead .banner{width: 200px;} #news_index .inner .lead .banner a{position:relative;display:block;background:#ff4800;padding:30px 0px;color: white;font-size: 15px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #news_index .inner .lead .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #news_index .inner .lead .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:80%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #news_index .inner .lead .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #news_index .inner .lead .banner a:hover::before { width: 100%;} #news_index .inner .lead .banner a:hover::after{color:white} #news_index .inner .lead .banner a:hover span{color:white} #news_index .inner .list{display: flex; justify-content:space-between;margin: 0 auto;} #news_index .inner .list .unit{width: 32%} #news_index .inner .list .unit a{display:block;text-decoration: none;font-weight: 500} #news_index .inner .list .unit a figure{width: 100%;aspect-ratio:1.6/1;margin:0 auto 20px auto;padding: 0;border-radius: 10px;overflow: hidden;} #news_index .inner .list .unit a figure img{width:100% ;height:100%;object-fit: cover;transition:1s all;transform:scale(1.2,1.2);} #news_index .inner .list .unit a .text{display:block;font-size:16px;letter-spacing: 1px;color: #333333;margin:0 auto 5px auto;} #news_index .inner .list .unit a .date{display:block;font-size:14px;letter-spacing: 1px;color: #000000;} #news_index .inner .list .unit a:hover figure img{transform:scale(1.3,1.3); transition:0.5s all;} } @media screen and (min-width:701px) and ( max-width:1050px) { /*メイン＋ビジネス*/ #lead_wrapper{} #lead_wrapper #movie_wrapper{position: relative;width: 100%; margin:0 auto;padding: 0;z-index:-1} #lead_wrapper #movie_wrapper video{ position:fixed;top: 0;left: 0;width: 100%; height: 100%; min-width: 100%; min-height: 100%;object-fit: cover;object-position: center;border: none;} #lead_wrapper #main_image{width: 100%;height: 100vh;margin: 0 auto;padding: 0;} #lead_wrapper #main_image .inner{position: relative;width: 100%;height: 100%} #lead_wrapper #main_image .inner::before{content:'';position:absolute;top: 0%;left:0%;width:100%;height: 100%;background: rgba(0,0,0,0.15)} #lead_wrapper #main_image .inner .text_area{position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 90%;} /*#lead_wrapper #main_image .inner .text_area .catchcopy{color: white;font-size: clamp(55px,8vw, 95px);font-weight: 700;letter-spacing: 3px} #lead_wrapper #main_image .inner .text_area .catchcopy:nth-of-type(2){ color: #ff4800;}*/ #lead_wrapper #main_image .inner .text_area .catchcopy{color: white;font-size: clamp(30px,4.8vw, 70px);font-weight: 700;letter-spacing: 1px} #lead_wrapper #main_image .inner .text_area .sub{margin: 0;padding: 0;font-size: clamp(38px, 2.8vw,48px);color:#ff4800;font-weight: 700;letter-spacing:1px;} #lead_wrapper #business_vision{width: 100%;height: 100vh;margin: 0 auto;padding: 0;} #lead_wrapper #business_vision .inner{position: relative;width: 100%;height: 100%;/*aspect-ratio: 3.5 / 1;*/} #lead_wrapper #business_vision .inner::before{content:'';position:absolute;top: 0%;left:0%;width:100%;height: 100%;background: rgba(0,0,0,0.15)} #lead_wrapper #business_vision .inner .logo{position:absolute;top: 50%;transform: translateY(-50%);right: 0%;width: 50%;overflow: hidden;} #lead_wrapper #business_vision .inner .logo img{height:auto;width:120%} #lead_wrapper #business_vision .inner .text_area{position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 80%} #lead_wrapper #business_vision .inner .text_area h2{margin: 0 0 40px 0;font-size:25px;color:#FF4800;font-weight: 900;letter-spacing: 2px} #lead_wrapper #business_vision .inner .text_area .message{margin: 0 0 30px 0;font-size: clamp(40px,3.5vw, 65px);color: white;font-weight: 700;letter-spacing: 3px} #lead_wrapper #business_vision .inner .text_area .sub{margin: 0 0 50px 0;width: 60%;font-size: clamp(18px,0.6vw, 26px);color: white;font-weight: 500;letter-spacing: 2px;line-height: 32px} #lead_wrapper #business_vision .inner .text_area .banner{width: 300px;margin: 0 auto 0 0;} #lead_wrapper #business_vision .inner .text_area .banner a{position:relative;display:block;background:white;padding:35px 0px;color:black;font-size:16px;letter-spacing:1px;text-decoration:none;font-weight:600;overflow:hidden;transition: color 0.3s ease;border-radius: 10px} #lead_wrapper #business_vision .inner .text_area .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#ff4800;transition: width 0.3s ease;z-index:1} #lead_wrapper #business_vision .inner .text_area .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:90%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:#ff4800;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #lead_wrapper #business_vision .inner .text_area .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #lead_wrapper #business_vision .inner .text_area .banner a:hover::before { width: 100%;} #lead_wrapper #business_vision .inner .text_area .banner a:hover::after{color:white} #lead_wrapper #business_vision .inner .text_area .banner a:hover span{color:white} /*ABOUT ANF*/ #about_us{width: 100%;margin: 0 auto;padding:100px 0 100px 0;background: white;} #about_us h3{margin: 0 auto 10px auto;padding:0;text-align: center;font-size: clamp(40px,4.5vw, 85px);color:black;font-weight: 900;letter-spacing: 3px;} #about_us .jpn{margin: 0 auto 30px auto;padding:0;text-align: center;font-size: clamp(18px,0.8vw, 30px);color:#FF4800;font-weight: 700;letter-spacing: 1px;} #about_us .data_group{width:100%;margin: 0 auto 50px auto; display: flex; overflow: hidden;} #about_us .data_group .data{ display: flex; animation:data 50s linear infinite;padding: 10px 0; width: max-content;} @keyframes data{ 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); }} #about_us .data_group .data .unit { width: 200px;height: 200px;border-radius: 10px;background: white;margin: 0 20px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); } #about_us .data_group .data .unit img { display: block; width: 98%; height: auto; margin: 0 auto;vertical-align: bottom;} #about_us .banner{width: 300px;margin: 0 auto;} #about_us .banner a{position:relative;display:block;background:#ff4800;padding:35px 0px;color: white;font-size: 16px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #about_us .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #about_us .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:85%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #about_us .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #about_us .banner a:hover::before { width: 100%;} #about_us .banner a:hover::after{color:white} #about_us .banner a:hover span{color:white} /*店舗*/ #stores_index{width: 100%;margin: 0 auto;padding:100px 0 100px 0;background:#F2F2F2} #stores_index h4{margin: 0 auto 10px auto;padding:0;text-align: center;font-size: clamp(40px,4.5vw, 85px);color:black;font-weight: 700;letter-spacing: 3px;} #stores_index .jpn{margin: 0 auto 10px auto;padding:0;text-align: center;font-size: clamp(18px,0.8vw, 30px);color:#FF4800;font-weight: 700;letter-spacing: 1px;} #stores_index .text{margin: 0 auto 30px auto;padding:0;text-align: center;font-size: clamp(14px,0.6vw, 20px);font-weight: 500;letter-spacing: 1px;line-height: 28px} #stores_index .inner{width:80%;margin: 0 auto 30px auto;display: flex; flex-wrap: wrap; justify-content: space-between;} #stores_index .inner .unit{width: 49%;margin-bottom: 20px} #stores_index .inner .unit a{display:block;text-decoration: none;color:black;} #stores_index .inner .unit a figure{position: relative;aspect-ratio:1.6/1;margin: 0 auto 0px auto;padding: 0;border-radius: 10px;overflow: hidden} #stores_index .inner .unit a figure::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:black;transition: width 0.3s ease;z-index:1} #stores_index .inner .unit a figure img{width: 100%;height: 100%;object-fit: cover;transition:1s all;} #stores_index .inner .unit a .icon{display: block; position: relative;width: 100%;background: red} #stores_index .inner .unit a .icon::before{content: '';position:absolute;top: -40px;left: 50%;transform: translateX(-50%);width: 70px;height:70px;background: url("../img/stores_hexagon.png") no-repeat;background-position: 50% 50%;background-size:100% auto;z-index:2} #stores_index .inner .unit a .icon::after{content:'';position:absolute;top:-20px;left: 50%;transform: translateX(-50%);width: 30px;height:30px;background: url("../img/stores_cutlery.png") no-repeat;background-position: 50% 50%;background-size:100% auto;z-index:2} #stores_index .inner .unit a .name{display: block; text-align: center;font-size:24px;font-weight: 700;letter-spacing: 1px;margin: 40px auto 0 auto} #stores_index .inner .unit a:hover figure::before{width: 100%;background: rgba(000,000,000,0.6)} #stores_index .inner .unit a:hover figure img{transform:scale(1.2,1.2); transition:0.5s all;} #stores_index .inner .unit a:hover .name{color:#808080} #stores_index .banner{width: 300px;margin: 0 auto;} #stores_index .banner a{position:relative;display:block;background:#ff4800;padding:35px 0px;color: white;font-size: 16px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #stores_index .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #stores_index .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:85%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #stores_index .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #stores_index .banner a:hover::before { width: 100%;} #stores_index .banner a:hover::after{color:white} #stores_index .banner a:hover span{color:white} /*採用*/ #recruit{width: 100%;/*height: 650px;*/margin: 0 auto;padding:0px 0 0px 0;background:white;} #recruit .inner{/*position: relative;*/width: 100%;/*height: 100%;*/} #recruit .inner #slider_wrapper{/*position: absolute;top: 50%;transform: translateY(-50%);right:0%;*/width: 100%;aspect-ratio:2.5/1;overflow: hidden;display: flex; align-items: center; justify-content: center;} #recruit .inner #slider_wrapper #all_loop{width:80%;margin: 0 auto;display: flex;justify-content: space-between;transform: rotate( 16deg );} #recruit .inner #slider_wrapper #all_loop .loop{width:32%} @keyframes vertical-animation { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes vertical-animation_reverse{ from { transform: translateY(-100%); } to { transform: translateY(0%); } } #recruit .inner #slider_wrapper .slider-container { height: 800px; overflow: hidden;} #recruit .inner #slider_wrapper .slider-wrapper { display: grid; animation: vertical-animation 30s linear infinite;} #recruit .inner #slider_wrapper .slider-wrapper_reverse{display:grid;animation:vertical-animation_reverse 30s linear infinite;} #recruit .inner #slider_wrapper .slide { width:100%; margin: 0 auto 20px;} #recruit .inner #slider_wrapper .slide img { width: 100%; height:266px; object-fit: cover; vertical-align: bottom;} #recruit .inner #text_wrapper{/*position: absolute;top: 50%;transform: translate(-50%,-50%);left:50%;*/width:70%;margin: 0 auto;padding: 80px 0} #recruit .inner #text_wrapper h5{margin: 0 auto 30px 0;padding: 0;font-size:25px;color:#FF4800;font-weight: 700;letter-spacing: 1px;} #recruit .inner #text_wrapper .message{margin: 0 auto 0px 0;padding: 0;font-size: clamp(40px,4.5vw, 85px);color:black;font-weight: 700;letter-spacing: 3px;line-height: 1.2/*line-height: 1.2*/} #recruit .inner #text_wrapper .message span{/*display:block;*/} #recruit .inner #text_wrapper .sub{margin: 30px auto 30px 0;padding: 0;font-size:18px;color:black;font-weight: 600;letter-spacing: 1px} #recruit .inner #text_wrapper .banner{width: 300px;} #recruit .inner #text_wrapper .banner a{position:relative;display:block;background:#ff4800;padding:35px 0px;color: white;font-size: 16px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #recruit .inner #text_wrapper .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #recruit .inner #text_wrapper .banner a::after{content:"\f08e";position:absolute;top:50%;transform:translateY(-50%);left:85%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #recruit .inner #text_wrapper .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #recruit .inner #text_wrapper .banner a:hover::before { width: 100%;} #recruit .inner #text_wrapper .banner a:hover::after{color:white} #recruit .inner #text_wrapper .banner a:hover span{color:white} /*ニュース*/ #news_index{width: 100%;margin: 0 auto;padding:80px 0 50px 0;background:#f2f2f2;} #news_index .inner{width:90%;margin: 0 auto;} #news_index .inner .lead{display: flex; justify-content:space-between;align-items: center;margin: 0 auto 50px auto;} #news_index .inner .lead .title{width: 50%} #news_index .inner .lead .title h6{margin: 0 auto 5px auto;padding: 0;font-size: clamp(40px,4.5vw, 85px);letter-spacing: 3px} #news_index .inner .lead .title .jpn{margin: 0;padding: 0;font-size: clamp(18px,0.8vw, 30px);;letter-spacing: 2px;color: #ff4800;font-weight: 700} #news_index .inner .lead .banner{width: 300px;} #news_index .inner .lead .banner a{position:relative;display:block;background:#ff4800;padding:30px 0px;color: white;font-size: 15px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #news_index .inner .lead .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #news_index .inner .lead .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:80%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #news_index .inner .lead .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #news_index .inner .lead .banner a:hover::before { width: 100%;} #news_index .inner .lead .banner a:hover::after{color:white} #news_index .inner .lead .banner a:hover span{color:white} #news_index .inner .list{display: flex; justify-content:space-between;margin: 0 auto;} #news_index .inner .list .unit{width: 32%} #news_index .inner .list .unit a{display:block;text-decoration: none;font-weight: 500} #news_index .inner .list .unit a figure{width: 100%;aspect-ratio:1.6/1;margin:0 auto 20px auto;padding: 0;border-radius: 10px;overflow: hidden;} #news_index .inner .list .unit a figure img{width:100% ;height:100%;object-fit: cover;transition:1s all;transform:scale(1.2,1.2);} #news_index .inner .list .unit a .text{display:block;font-size:14px;letter-spacing: 1px;color: #333333;margin:0 auto 5px auto;} #news_index .inner .list .unit a .date{display:block;font-size:13px;letter-spacing: 1px;color: #000000;} #news_index .inner .list .unit a:hover figure img{transform:scale(1.3,1.3); transition:0.5s all;} } @media (max-width: 700px) { /*メイン＋ビジネス*/ #lead_wrapper{} #lead_wrapper #movie_wrapper{position: relative;width: 100%; margin:0 auto;padding: 0;z-index:-1} #lead_wrapper #movie_wrapper video{ position:fixed;top: 0;left: 0;width: 100%; height: 100%; min-width: 100%; min-height: 100%;object-fit: cover;object-position: center;border: none;} #lead_wrapper #main_image{width: 100%;height: 100vh;margin: 0 auto;padding: 0;} #lead_wrapper #main_image .inner{position: relative;width: 100%;height: 100%} #lead_wrapper #main_image .inner::before{content:'';position:absolute;top: 0%;left:0%;width:100%;height: 100%;background: rgba(0,0,0,0.15)} #lead_wrapper #main_image .inner .text_area{position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 90%;} /*#lead_wrapper #main_image .inner .text_area .catchcopy{color: white;font-size:11vw;font-weight: 700;letter-spacing: 0px} #lead_wrapper #main_image .inner .text_area .catchcopy:nth-of-type(2){ color: #ff4800;}*/ #lead_wrapper #main_image .inner .text_area .catchcopy{color: white;font-size:4.5vw;font-weight: 700;letter-spacing: 0px} #lead_wrapper #main_image .inner .text_area .sub{margin: 0;padding: 0;font-size:4vw;color:#ff4800;font-weight: 700;letter-spacing:1px;} #lead_wrapper #business_vision{width: 100%;height: 100vh;margin: 0 auto;padding: 0;} #lead_wrapper #business_vision .inner{position: relative;width: 100%;height: 100%;/*aspect-ratio: 3.5 / 1;*/} #lead_wrapper #business_vision .inner::before{content:'';position:absolute;top: 0%;left:0%;width:100%;height: 100%;background: rgba(0,0,0,0.15)} #lead_wrapper #business_vision .inner .logo{position:absolute;top: 50%;transform: translateY(-50%);right: 0%;width: 50%;overflow: hidden;} #lead_wrapper #business_vision .inner .logo img{height:auto;width:120%} #lead_wrapper #business_vision .inner .text_area{position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 90%} #lead_wrapper #business_vision .inner .text_area h2{margin: 0 0 40px 0;font-size:8vwx;color:#FF4800;font-weight: 900;letter-spacing: 2px} #lead_wrapper #business_vision .inner .text_area .message{margin: 0 0 30px 0;font-size:9vw;color: white;font-weight: 700;letter-spacing: 3px} #lead_wrapper #business_vision .inner .text_area .sub{margin: 0 0 50px 0;width: 90%;font-size:4vw;color: white;font-weight: 500;letter-spacing: 1px;line-height: 1.8} #lead_wrapper #business_vision .inner .text_area .banner{width:90%;margin: 0 auto;} #lead_wrapper #business_vision .inner .text_area .banner a{position:relative;display:block;background:white;padding:35px 0px;color:black;font-size:16px;letter-spacing:1px;text-decoration:none;font-weight:600;overflow:hidden;transition: color 0.3s ease;border-radius: 10px} #lead_wrapper #business_vision .inner .text_area .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#ff4800;transition: width 0.3s ease;z-index:1} #lead_wrapper #business_vision .inner .text_area .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:90%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:#ff4800;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #lead_wrapper #business_vision .inner .text_area .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #lead_wrapper #business_vision .inner .text_area .banner a:hover::before { width: 100%;} #lead_wrapper #business_vision .inner .text_area .banner a:hover::after{color:white} #lead_wrapper #business_vision .inner .text_area .banner a:hover span{color:white} /*ABOUT ANF*/ #about_us{width: 100%;margin: 0 auto;padding:40px 0;background: white;} #about_us h3{margin: 0 auto 0px auto;padding:0;text-align: center;font-size:8vw;color:black;font-weight: 900;letter-spacing: 1px;} #about_us .jpn{margin: 0 auto 20px auto;padding:0;text-align: center;font-size:4vw;color:#FF4800;font-weight: 700;letter-spacing: 1px;} #about_us .data_group{width:100%;margin: 0 auto 30px auto; display: flex; overflow: hidden;} #about_us .data_group .data{ display: flex; animation:data 50s linear infinite;padding: 10px 0; width: max-content;} @keyframes data{ 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); }} #about_us .data_group .data .unit { width: 160px;height: 160px;border-radius: 5px;background: white;margin: 0 20px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1); } #about_us .data_group .data .unit img { display: block; width: 98%; height: auto; margin: 0 auto;vertical-align: bottom;} #about_us .banner{width:80%;margin: 0 auto;} #about_us .banner a{position:relative;display:block;background:#ff4800;padding:30px 0px;color: white;font-size: 16px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #about_us .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #about_us .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:85%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #about_us .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #about_us .banner a:hover::before { width: 100%;} #about_us .banner a:hover::after{color:white} #about_us .banner a:hover span{color:white} /*店舗*/ #stores_index{width: 100%;margin: 0 auto;padding:40px 0;background:#F2F2F2} #stores_index h4{margin: 0 auto 0px auto;padding:0;text-align: center;font-size:8vw;color:black;font-weight: 700;letter-spacing: 1px;} #stores_index .jpn{margin: 0 auto 20px auto;padding:0;text-align: center;font-size:4vw;color:#FF4800;font-weight: 700;letter-spacing: 1px;} #stores_index .text{margin: 0 auto 30px auto;padding:0;text-align: center;font-size:2.5vw;font-weight: 500;letter-spacing: 1px;line-height: 1.7} #stores_index .inner{width:90%;margin: 0 auto 10px auto;display: flex; flex-wrap: wrap; justify-content: space-between;} #stores_index .inner .unit{width: 49%;margin-bottom: 20px} #stores_index .inner .unit a{display:block;text-decoration: none;color:black;} #stores_index .inner .unit a figure{position: relative;aspect-ratio:1.6/1;margin: 0 auto 0px auto;padding: 0;border-radius: 10px;overflow: hidden} #stores_index .inner .unit a figure::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:black;transition: width 0.3s ease;z-index:1} #stores_index .inner .unit a figure img{width: 100%;height: 100%;object-fit: cover;transition:1s all;} #stores_index .inner .unit a .icon{display: block; position: relative;width: 100%;background: red} #stores_index .inner .unit a .icon::before{content: '';position:absolute;top: -30px;left: 50%;transform: translateX(-50%);width: 50px;height:50px;background: url("../img/stores_hexagon.png") no-repeat;background-position: 50% 50%;background-size:100% auto;z-index:2} #stores_index .inner .unit a .icon::after{content:'';position:absolute;top:-15px;left: 50%;transform: translateX(-50%);width: 20px;height:20px;background: url("../img/stores_cutlery.png") no-repeat;background-position: 50% 50%;background-size:100% auto;z-index:2} #stores_index .inner .unit a .name{display: block; text-align: center;font-size:3.8vw;font-weight: 700;letter-spacing: 1px;margin: 30px auto 0 auto} #stores_index .inner .unit a:hover figure::before{width: 100%;background: rgba(000,000,000,0.6)} #stores_index .inner .unit a:hover figure img{transform:scale(1.2,1.2); transition:0.5s all;} #stores_index .inner .unit a:hover .name{color:#808080} #stores_index .banner{width: 80%;margin: 0 auto;} #stores_index .banner a{position:relative;display:block;background:#ff4800;padding:30px 0px;color: white;font-size: 16px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #stores_index .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #stores_index .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:85%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #stores_index .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #stores_index .banner a:hover::before { width: 100%;} #stores_index .banner a:hover::after{color:white} #stores_index .banner a:hover span{color:white} /*採用*/ #recruit{width: 100%;/*height: 650px;*/margin: 0 auto;padding:0px 0 0px 0;background:white;} #recruit .inner{/*position: relative;*/width: 100%;/*height: 100%;*/} #recruit .inner #slider_wrapper{/*position: absolute;top: 50%;transform: translateY(-50%);right:0%;*/width: 100%;aspect-ratio:1.8/1;overflow: hidden;display: flex; align-items: center; justify-content: center;} #recruit .inner #slider_wrapper #all_loop{width:80%;margin: 0 auto;display: flex;justify-content: space-between;transform: rotate( 16deg );} #recruit .inner #slider_wrapper #all_loop .loop{width:32%} @keyframes vertical-animation { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes vertical-animation_reverse{ from { transform: translateY(-100%); } to { transform: translateY(0%); } } #recruit .inner #slider_wrapper .slider-container { height: 800px; overflow: hidden;} #recruit .inner #slider_wrapper .slider-wrapper { display: grid; animation: vertical-animation 30s linear infinite;} #recruit .inner #slider_wrapper .slider-wrapper_reverse{display:grid;animation:vertical-animation_reverse 30s linear infinite;} #recruit .inner #slider_wrapper .slide { width:100%; margin: 0 auto 10px;} #recruit .inner #slider_wrapper .slide img { width: 100%; height:150px; object-fit: cover; vertical-align: bottom;} #recruit .inner #text_wrapper{/*position: absolute;top: 50%;transform: translate(-50%,-50%);left:50%;*/width:80%;margin: 0 auto;padding: 40px 0} #recruit .inner #text_wrapper h5{margin: 0 auto 20px 0;padding: 0;font-size:4vw;color:#FF4800;font-weight: 700;letter-spacing: 1px;} #recruit .inner #text_wrapper .message{margin: 0 auto 20px 0;padding: 0;font-size:7vw;color:black;font-weight: 700;letter-spacing: 3px;line-height: 1} #recruit .inner #text_wrapper .message span{/*display:block;*/} #recruit .inner #text_wrapper .sub{margin: 00px auto 30px 0;padding: 0;font-size:3.5vw;color:black;font-weight: 600;letter-spacing: 1px} #recruit .inner #text_wrapper .banner{} #recruit .inner #text_wrapper .banner a{position:relative;display:block;background:#ff4800;padding:30px 0px;color: white;font-size: 16px;letter-spacing: 1px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #recruit .inner #text_wrapper .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #recruit .inner #text_wrapper .banner a::after{content:"\f08e";position:absolute;top:50%;transform:translateY(-50%);left:85%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #recruit .inner #text_wrapper .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #recruit .inner #text_wrapper .banner a:hover::before { width: 100%;} #recruit .inner #text_wrapper .banner a:hover::after{color:white} #recruit .inner #text_wrapper .banner a:hover span{color:white} /*ニュース*/ #news_index{width: 100%;margin: 0 auto;padding:40px 0 20px 0;background:#f2f2f2;} #news_index .inner{width:80%;margin: 0 auto;} #news_index .inner .lead{margin: 0 auto 20px auto;} #news_index .inner .lead .title{width: 50%;margin: 0 auto 0 0} #news_index .inner .lead .title h6{margin: 0 auto 5px auto;padding: 0;font-size:8vw;letter-spacing:1px} #news_index .inner .lead .title .jpn{margin: 0;padding: 0;font-size:4vw;letter-spacing: 2px;color: #ff4800;font-weight: 700} #news_index .inner .lead .banner{width:50%;margin: 0 0 0 auto} #news_index .inner .lead .banner a{position:relative;display:block;background:#ff4800;padding:24px 0px;color: white;font-size: 13px;letter-spacing: 0px;text-decoration: none;font-weight: 600;overflow: hidden; transition: color 0.3s ease;border-radius: 10px} #news_index .inner .lead .banner a::before{ content: ""; position: absolute; top: 0;left: 0%; width:0%; height: 100%;background:#0f0f0f;transition: width 0.3s ease;z-index:1} #news_index .inner .lead .banner a::after{content:"\f105";position:absolute;top:50%;transform:translateY(-50%);left:80%;z-index:0;font-family:'Font Awesome 5 Free';font-weight:900;color:white;font-size:16px;transition: left 0.2s ease-out, color 0.3s ease;z-index: 2} #news_index .inner .lead .banner a span{display: block; content: ""; position: absolute; top: 50%;transform: translateY(-50%);left: 10%; width:90%; z-index:3;} #news_index .inner .lead .banner a:hover::before { width: 100%;} #news_index .inner .lead .banner a:hover::after{color:white} #news_index .inner .lead .banner a:hover span{color:white} #news_index .inner .list{} #news_index .inner .list .unit{margin: 0 auto 20px auto} #news_index .inner .list .unit a{display:block;text-decoration: none;font-weight: 500} #news_index .inner .list .unit a figure{width: 100%;aspect-ratio:1.8/1;margin:0 auto 10px auto;padding: 0;border-radius: 5px;overflow: hidden;} #news_index .inner .list .unit a figure img{width:100% ;height:100%;object-fit: cover;transition:1s all;transform:scale(1.2,1.2);} #news_index .inner .list .unit a .text{display:block;font-size:3.2vw;letter-spacing: 1px;color: #333333;margin:0 auto 0px auto;} #news_index .inner .list .unit a .date{display:block;font-size:2.8vw;letter-spacing: 1px;color: #000000;} #news_index .inner .list .unit a:hover figure img{transform:scale(1.3,1.3); transition:0.5s all;} }