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

body {
    background: #f5ede6;
}

/* トップスライダー */

/* スライダーPC・スマホ共通設定 */

/* スライダー左右共通の設定 */
.slider-left > div,
.slider-right > div {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
}

.slider-left img,
.slider-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* about */

#top_about {
    position: relative;
    background: #FFF;
}


#top_about:before {
    content: "";
    display: block;
    position: absolute;
    width:100%;
    aspect-ratio: 13 / 1 ;
    top:1px;
    left:50%;
    transform: translate(-50%, -100%); 
    background-image: url("../img/top_about_head.svg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}

#top_about:after {
    content: "";
    display: block;
    position: absolute;
    width:25%;
    max-width: 360px;
    aspect-ratio: 1 / 1 ;
    top:1px;
    left:50%;
    transform: translate(-50%, -75%); 
    background-image: url("../img/top_about_img01.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 北研の特長 */

#top_feature {
    background: #FFF;
    position: relative;
}

section#top_feature {
    padding-bottom: 100px;
}

.tf_row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.tf_col {
    flex-basis: 31%;
    text-align: center;
}

.tf_title {
    display: block;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.3rem;
    letter-spacing: 1px;
    padding-bottom:100px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 80px;
    margin-bottom: 10px;
}

.tf_col01 .tf_title { background-image: url("../img/top_feature_fig01.svg"); }
.tf_col02 .tf_title { background-image: url("../img/top_feature_fig02.svg"); }
.tf_col03 .tf_title { background-image: url("../img/top_feature_fig03.svg"); }

.tf_fig {
    font-size: 1.2rem;
    font-weight: bold;
}

.tf_fig span {
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 5rem;
    color: #1695d4;
}

.scroll_txt {
  display: flex;
  position: absolute;
  bottom:0;
  left:0;
  width: 100%;
  heigh:1em;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  margin-bottom: -10px;
}
.st_wrapper {
  display: flex;
  animation: scroll_txt 20s linear infinite;
}
.double-content {
  display: inline-block;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 6rem;
  color: #f5ede6;
  white-space: nowrap;
  margin-right: 0.6em;
  line-height: 1;
}

@keyframes scroll_txt {
0% {
    transform: translateX(0%);
}
100% {
    transform: translateX(-50%);
}
}

/* 生産者インタビュー */

#top_interview {
    position: relative;
}

.top_interview_title {
    position: absolute;
    width:45%;
    height:auto;
    top:0;
    right:0;
}

.top_inteview_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.top_inteview_list .top_itv_box:nth-child(1) {
  margin-bottom: 200px;
}

.top_inteview_list .top_itv_box:nth-child(2) {
  margin-top: 200px;
}

.top_inteview_list .top_itv_box:nth-child(3) {
  margin-top: -120px;
}

.top_itv_box {
    position: relative;
    width: 45%;
    padding-bottom: 50px;
    overflow:hidden;
}

.top_itv_box .ti_img {
    width: 100%;
    aspect-ratio: 4 / 3 ;
}

.top_itv_box .ti_img img {
    width: 100%;
    height:auto;
    object-fit: cover;
    transition:0.2s;
}

.top_itv_box:hover img {
	transform:scale(1.1);
}

.top_itv_box .ti_txt {
    position: absolute;
    width:60%;
    height:auto;
    bottom:0;
    left:0;
    background-color: #f5ede6;
    padding:15px 20px;
    border-radius: 0 15px 0 0;
}

.top_itv_box .ti_txt h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* お知らせ(リストスタイルはstyle.css) */

#top_news {
    background-color: #FFF;
}



/* 採用 */

#top_recruit {
    background-color: #FFF;
}

.tr_wrapper {
    position: relative;
    background-image: url("../img/recruit_bg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #FFF !important;
    padding:50px 0;
}

.tr_wrapper:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    backdrop-filter: brightness(50%);
    transition: backdrop-filter 0.3s ease;
}

.tr_wrapper:hover::before {
  backdrop-filter: brightness(80%);
}

#top_recruit .h_sub {
    color: #FFF;
    border-bottom:1px solid #FFF;
}

.tr_txt {
    text-align: center;
}

.tr_txt h3 {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.2rem;
    line-height: 1.7;
}

/* CSR */

#top_csr {
    background-color: #FFF;
}

/* EC */

section#top_ec {
    background-color: #FFF;
    padding:0 0 60px;
}

@media screen and (min-width: 1480px) {

.top_slider {
    overflow: visible;
}

}

@media screen and (max-width: 1479px) {

.top_slider {
    overflow: hidden;
}

}


@media screen and (min-width: 769px) {

body.top {
	padding:130px 0 0 0;
}

}

@media screen and (max-width: 768px) {

#top_about:after {
    content: "";
    display: block;
    position: absolute;
    width:40%;
    aspect-ratio: 1 / 1 ;
    top:1px;
    left:50%;
    transform: translate(-50%, -60%); 
    background-image: url("../img/top_about_img01.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 北研の特長 */

.tf_row {
    justify-content: space-around;
}

.tf_col {
    flex-basis: 48%;
    margin-bottom: 40px;
}

.tf_title {
    font-size: 1.2rem;
}

.tf_fig span {
    font-size: 4rem;
}

/* 生産者インタビュー */

.top_itv_box {
    width: 47%;
    padding-bottom: 50px;
}

.top_itv_box .ti_txt {
    width:90%;
    padding:10px 20px;

}

.top_itv_box .ti_txt h3 {
    font-size: 1.1rem;
}



/* 採用情報 */

.tr_txt h3 {
    font-size: 5.5vw;
}


}

@media screen and (min-width: 481px) {

/* トップスライダー */

.top_slider {
    position: relative;
    width: 100%;
    max-width: 1400px;
    aspect-ratio: 5 / 4;
    margin: 0 auto 10%;
    display: flex;
    z-index: -1;
    justify-content: space-around;
}

.top_slider_inner {
    position: relative;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height:100%;
}

.slider_cover {
    position: absolute;
    width: 105%;
    height:auto;
    top:0;
    left:50%;
    transform: translateX(-50%);
    z-index: 2;
}

.slider_cover_sp {
    display: none;
}

.slider_cover img {
    width: 100%;
    height:auto;
}

.slider-left {
    width: 58%;
    margin: 5% 0 0 0;
}

.slider-right {
    width: 37%;
    margin: 5% 2% 0 0;
}
.slider-left img,
.slider-right img {
    width: 100%;
    display: block;
}

.top_slider .top_copy {
    position: absolute;
    bottom:20%;
    right:10%;
    width:30%;
    height:auto;
    text-align: center;
    color: #333;
    z-index: 1;
}

}

@media screen and (max-width: 480px) {

body.top {
	padding:60px 0 0 0;
}

/* トップスライダー */

.top_slider {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 2;
    margin: 0 auto 5%;
    z-index: -1;
}

.top_slider_inner {
    position: relative;
    display: block;
    width: 100%;
    height:100%;
}

.slider_cover {
    display: none;
}

.slider_cover_sp {   
    position: absolute;
    width: 105%;
    height:auto;
    top:0;
    left:50%;
    transform: translateX(-50%);
    z-index: 2;
    overflow: hidden;
}

.slider_cover_sp img {
    width: 100%;
    height:auto;
}

.slider-left {
    width: 80%;
    padding: 7% 0 0 3%;
}

.slider-right {
    width: 55%;
    margin: -1% 0 0 43%;
}
.slider-left img,
.slider-right img {
    width: 100%;
    display: block;
}

.top_slider .top_copy {
    position: absolute;
    bottom:17%;
    left:10%;
    width:70%;
    height:auto;
    z-index: 1;
}

#top_about:after {
    content: "";
    display: block;
    position: absolute;
    width:60%;
    aspect-ratio: 1 / 1 ;
    top:1px;
    left:50%;
    transform: translate(-50%, -60%); 
    background-image: url("../img/top_about_img01.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* 北研の特長 */

.tf_col {
    flex-basis: 100%;
    justify-content: center;
}

.tf_col01, .tf_col02 {
    padding-bottom:30px;
    border-bottom: 1px solid #ddd;
}

/* 生産者インタビュー */

.top_interview_title {
    position: relative;
    width:100%;
    text-align: center;
    margin-bottom: 30px;
}

.top_inteview_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.top_inteview_list .top_itv_box:nth-child(1) {
  margin: 0 0 30px;
}

.top_inteview_list .top_itv_box:nth-child(2) {
  margin: 0 0 30px;
}

.top_inteview_list .top_itv_box:nth-child(3) {
  margin: 0;
}

.top_itv_box {
    position: relative;
    width: 100%;
    overflow:hidden;
}

.top_itv_box .ti_txt {
    width:80%;
    padding:15px 20px;
}

.top_itv_box .ti_txt h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 20px;
}


}