
/*会社情報*/
section.top-company{
  margin:10rem 0;
}
section.top-company ul{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin:5rem auto;
}
section.top-company ul li{
  width:30%;
}
section.top-company ul li a{
  width:100%;
  display: block;
  padding:2em 1em;
  background-color: #b49d6b;
  font-size:1.6rem;
  font-weight:bold;
  color:#fff;
  text-align: center;
  border-radius: 20px;
}
.top-none{
  display: none;
}
.news-box-ul-li02 .wp-block-group{
  padding:1em 0!important;
}
.news-box-ul-li02 .wp-block-post-date{
  color: #8e8e8e;
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-weight: bold;
}
.news-box-ul-li02 h2.wp-block-post-title{
  color: #606060;
  font-size: 1.5rem;
  margin: .3em 0 0;
  font-weight: bold;
}
.news-box-ul-li02 .wp-block-group {
    padding: 1em 0 !important;
    border-bottom: 1px solid #ddd;
}
.news-box-ul-li02 .wp-block-query{
    width: 100%;
}
.news-box-ul-li02 :root :where(.is-layout-grid) {
    gap: 0 !important;
}
.news-box-ul-li02 .columns-1{
    margin: 1em 0 0;
}

#footer{
  background-color: #f9f6f2!important;
}


/*=======================================================
==========================================================
　　　　　　　　　　　　　PC start
==========================================================
========================================================*/
@media screen and (min-width:768px) {
.top-main{
  position:relative;
  width:95%;
  margin:0 auto;
}
.top-main-ab{
  position:absolute;
  top: 0;
  left: 0;
}

/*NEWS*/
.news-box{
  margin:60px 0;
}
.news-box-ul{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 0 5rem;
}
.news-box-ul li.news-box-ul-li01{
  width:230px;
}
.news-box-ul li.news-box-ul-li02{
  width: calc(100% - 230px);
  display:flex;
  align-items: flex-end;
}
.eigo-h2{
  font-size:50px;
  color:#b49d6b;
  line-height: 1em;
  margin:0;
}
.news-box-ul li.news-box-ul-li02 p:nth-child(1){
  color:#8e8e8e;
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-weight:bold;
}
.news-box-ul li.news-box-ul-li02 p:nth-child(2){
  color:#606060;
  font-size: 1.5rem;
  margin:.3em 0 0;
  font-weight:bold;
}

/*NEWS*/
.ippun{
  padding: 80px 0 70px;
  background-color: #b49d6b;
}
.ippun-img01{
  max-width:80%;
}
.ippun ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.ippun-left{
  width:59%;
}
.ippun-left p{
  color:#fff;
  line-height: 2em;
  margin: 1.5em 4em 1.5em 0
}
.ippun-right{
  width:35%;
}


.slider-container{
  width:100%;
  margin:0 auto;
}

#slider img{
  width:100%;
}
#slider {
  background-color: #fff;
  border-radius: 10px;
}
#thumbs {
  width: 60%;
  margin:5rem auto;
}
#thumbs img{
  transition: .3s;
  padding:20px;
  margin:0 0 1em 0;
  opacity:.5;
  cursor: pointer;
}
#thumbs .slick-current img{
  filter: drop-shadow(0 0 10px rgba(255,255,255,.9));
  padding:15px;
  opacity:1;
}
#thumbs .slick-current{
    position:relative;
}


#thumbs .slick-current .a01::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\58F2\4E0A\9AD8';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.5rem;
  text-align: center;
  width:100%;
}
#thumbs .slick-current .a02::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\7537\5973\6BD4';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.5rem;
  text-align: center;
  width:100%;
}
#thumbs .slick-current .a03::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\5E97\8217\6570';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.5rem;
  text-align: center;
  width:100%;
}
#thumbs .slick-current .a04::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\88FD\9020\5E97\8217\200B';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.5rem;
  text-align: center;
  width:100%;
}
#thumbs .slick-current .a05::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\5236\5EA6\5145\5B9F\200B';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.5rem;
  text-align: center;
  width:100%;
}

/*-----------矢印表示----------*/
.slick-next:before{
  background: url(../img/yajirushi-tsugi.png)!important;
  background-size: cover!important;
  background-repeat: no-repeat;
}
.slick-prev:before{
  background: url(../img/yajirushi-mae.png)!important;
  background-size: cover!important;
  background-repeat: no-repeat;
}
.slick-arrow{
  z-index:2!important;
  width:50%!important;
  height:0!important;
  padding-top: 16%!important;
}
.slick-arrow:before{
  content:""!important;
  width: 100%!important;
  height: 100%!important;
  position: absolute;
  top: 0;
  left: 0;
  opacity:1!important;
}
.slick-prev{
  left:0!important;
}
.slick-next{
  right:0!important;
}
.slick-prev{
  top: auto!important;
  left:0!important;
  bottom: -120px!important;
  transition: .3s;
}
.slick-next{
  top: auto!important;
  right:0!important;
  bottom: -120px!important;
  transition: .3s;
}
.slick-prev:hover,.slick-next:hover{
  opacity: .8;
}
.ippun-view{
  margin:100px 0 0 auto;
}
.ippun-view:hover{
  color:#fff;
}
/*-五感・カカオティエゴカン*/
section.top-about{
  margin:10rem 0;
}
section.top-about ul{
  padding:20px 0;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
section.top-about ul li{
  width:47%;
  margin: 25px 0;
  transition:.3s;
}
section.top-about ul li:hover{
  margin: 20px 0 30px;
}
section.top-about ul li:nth-child(3):hover{
  margin: 25px 0;
}
.top-about-li-box{
  background-color: #b49d6b;
  border-radius:0 0 20px 20px;
  margin: -2px 0 0 0;
  padding:20px 35px 20px 35px;
  color:#fff;
}
.top-about h3{
  margin:15px 0 15px 0;
  font-size:1.6rem;
}
.top-about h3 span{
  font-size:1.3rem;
  font-weight: normal;
  margin-left: 1em;
}
.top-about p{
  margin:0 0 15px 0;
  font-size:1.9rem;
  font-weight:bold;
  line-height: 1.7em;
  color:#fff;
}
.top-about-li02{
  background-image: url("../img/top-about-back.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: auto;
  padding: 78px 3em 0 0 ;
}

p.top-about-li02-p{
  color: #606060;
  font-size: 1.7rem;
  letter-spacing: 1px;
  padding: 15px 0 40px;
  background-image: linear-gradient(to right, #b49d6b 4px, transparent 3px);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
section.gokan-omoi{
  margin:5rem auto;
}
.top-about p.h2-p2 {
  position: relative;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b49d6b;
  line-height: 1em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

/*社員インタビュー*/
.top-interview{
  background-color: #f9f6f2;
  padding:105px 0;
}
.top-interview ul{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  margin:30px 0;
}
.top-interview ul li{
  width:31%;
  border:4px solid #606060;
  border-radius:20px;
  background-color: #fff;
  transition: .3s;
  cursor: pointer;
  margin:15px calc(7% / 2) 15px 0;
}
.top-interview ul li:nth-child(3n){
  margin:15px 0 15px 0;
}
.top-interview ul li:hover{
  margin:10px calc(7% / 2) 20px 0;
}
.top-interview ul li:hover:nth-child(3n){
  margin:10px 0 20px 0;
}
.top-interview ul li img{
  width:calc(100% - 40px);
  margin:20px 20px -20px 20px;
  border-radius:20px;
  position:relative;
  z-index:0;
}
.top-interview ul li p:nth-child(2){
  padding: .4em 0;
  background-color: #b49d6b;
  margin: 0;
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  width: 86%;
  text-align: center;
}
.top-interview ul li p:nth-child(3){
  width:fit-content;
  padding:0 20px;
  margin:.9em 0 .3em 0;
  color:#606060;
  font-weight:bold;
  font-size:1.7rem;
}
.top-interview ul li p:nth-child(4){
  width:fit-content;
  padding:0 20px 30px 20px;
  margin:0;
  color:#606060;
  font-weight:bold;
  font-size:1.5rem;
  line-height: 1.6em;
  letter-spacing: normal;
}


}/*=======================================================
==========================================================
　　　　　　　　　　　　　PC end
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
　　　　　　　　　　　　　SPstart
==========================================================
========================================================*/
@media screen and (max-width:768px) {
.top-main{
  position:relative;
  width:100%;
  margin:0 auto;
}
.top-main-ab{
  position:absolute;
  top: 0;
  left: 0;
}

/*NEWS*/
.news-box{
  margin:40px 0;
}
.news-box-ul{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
}
.news-box-ul li.news-box-ul-li01{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.news-box-ul li.news-box-ul-li02{
  width: 100%;
  display:flex;
  align-items: flex-end;
}
.eigo-h2{
  font-size:40px;
  color:#b49d6b;
  line-height: 1em;
  margin:0;
}
.news-box-ul li.news-box-ul-li02 p:nth-child(1){
  color:#8e8e8e;
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-weight:bold;
  margin: 20px 0 0;
}
.news-box-ul li.news-box-ul-li02 p:nth-child(2){
  color:#606060;
  font-size: 1.5rem;
  margin:.3em 0 0;
  font-weight:bold;
}

/*NEWS*/
.ippun{
  padding: 70px 0 35px;
  background-color: #b49d6b;
}
.ippun-img01{
  max-width: 450px;
  width: 80%;
  margin: 0 auto;
}
.ippun ul{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.ippun-left{
  width:100%;
}
.ippun-left p{
  color:#fff;
  line-height: 2em;
}
.ippun-right{
  width: 100%;
  margin: 5% 0;
  max-width: 500px;
}


.slider-container{
  width:100%;
  margin:0 auto;
}

#slider img{
  width:100%;
}
#slider {
  background-color: #fff;
  border-radius: 10px;
}
#thumbs {
  width:100%;
}
#thumbs img{
  transition: .3s;
  padding:10%;
  margin:0 0 1em 0;
  opacity:.5;
  cursor: pointer;
}
#thumbs .slick-current img{
  filter: drop-shadow(0 0 3px rgba(255,255,255,.9));
  padding:6%;
  opacity:1;
}
#thumbs .slick-current{
    position:relative;
}


#thumbs .slick-current .a01::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\58F2\4E0A\9AD8';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.3rem;
  text-align: center;
  width:100%;
}
#thumbs .slick-current .a02::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\7537\5973\6BD4';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.3rem;
  text-align: center;
  width:100%;
}
#thumbs .slick-current .a03::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\5E97\8217\6570';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.3rem;
  text-align: center;
  width:100%;
}
#thumbs .slick-current .a04::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\88FD\9020\5E97\8217\200B';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.3rem;
  text-align: center;
  width:100%;
}
#thumbs .slick-current .a05::before{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '\5236\5EA6\5145\5B9F\200B';
  display: block;
  color:#fff;
  font-weight: bold;
  font-size:1.3rem;
  text-align: center;
  width:100%;
}

/*-----------矢印表示----------*/
.slick-next:before{
  background: url(../img/yajirushi-tsugi.png)!important;
  background-size: cover!important;
  background-repeat: no-repeat;
}
.slick-prev:before{
  background: url(../img/yajirushi-mae.png)!important;
  background-size: cover!important;
  background-repeat: no-repeat;
}
.slick-arrow{
  z-index:2!important;
  width:50%!important;
  height:0!important;
  padding-top: 16%!important;
}
.slick-arrow:before{
  content:""!important;
  width: 100%!important;
  height: 100%!important;
  position: absolute;
  top: 0;
  left: 0;
  opacity:1!important;
}
.slick-prev{
  left:0!important;
}
.slick-next{
  right:0!important;
}
.slick-prev{
  top: auto!important;
  left:0!important;
  bottom: -26%!important;
  transition: .3s;
}
.slick-next{
  top: auto!important;
  right:0!important;
  bottom: -26%!important;
  transition: .3s;
}
.slick-prev:hover,.slick-next:hover{
  opacity: .8;
}
.ippun-view{
  margin:30% 0 0 auto;
}
.ippun-view:hover{
  color:#fff;
}

/*-五感・カカオティエゴカン*/
section.top-about ul{
  padding: 35px 0 50px;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
section.top-about ul li{
  width: 100%;
  margin: 0 0 25px;
  transition: .3s;
}
.top-about-li-box{
  background-color: #b49d6b;
  border-radius: 0 0 20px 20px;
  margin: -2px 0 0 0;
  padding: 4% 7%;
  color: #fff;
}
.top-about h3{
  margin:8px 0 8px 0;
  font-size:1.4rem;
}
.top-about h3 span{
  font-size:1.2rem;
  font-weight: normal;
  margin-left: .5em;
}
.top-about p{
  margin:0 0 0;
  font-size:1.5rem;
  font-weight:bold;
  line-height: 1.7em;
  color:#fff;
}
.top-about-li02{
  background-image: url("../img/top-about-back.png");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 75%;
  padding: 62px 3% 10px;
}

p.top-about-li02-p{
  color: #606060;
  font-size: 1.5rem;
  letter-spacing: 1px;
  padding: 5px 0 0;
}
section.top-about{
  margin:10rem 0 3rem;
}
section.gokan-omoi{
  margin:5rem auto;
}
.top-about p.h2-p2 {
  position: relative;
  font-size: 1.3rem;
  font-weight: bold;
  color: #b49d6b;
  line-height: 1em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}
section.top-company {
        margin: 9rem 0 0rem;
    }
/*社員インタビュー*/
.top-interview{
  background-color: #f9f6f2;
  padding:65px 0;
}
.top-interview-ul{
  margin:5% 0;
}
.top-interview-ul li{
  width:60vw;
  border:3px solid #606060;
  border-radius:20px;
  background-color: #fff;
  transition: .3s;
  cursor: pointer;
}
.top-interview-ul li:hover{
  margin:-5px 0 5px 0;
}
.top-interview-ul li img{
  width: calc(100% - 26px);
  margin: 13px 13px -20px 13px;
  border-radius: 20px;
  position: relative;
  z-index: 0;
}
.top-interview-ul li p:nth-child(2){
  width: 80%;
  text-align: center;
  padding: 0.5em 0;
  background-color: #b49d6b;
  margin: 0;
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
}
.top-interview-ul li p:nth-child(3){
  width:fit-content;
  padding:0 20px;
  margin:.9em 0 .3em 0;
  color:#606060;
  font-weight:bold;
  font-size:1.5rem;
}
.top-interview-ul li p:nth-child(4){
  width:fit-content;
  padding:0 20px 30px 20px;
  margin:0;
  color:#606060;
  font-weight:bold;
  font-size:1.23rem;
}

#footer {
    background-color: #f9f6f2;
}



}/*=======================================================
==========================================================
　　　　　　　　　　　　　SP end
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
  　　　　　　　　　　　　IPAD start
========================================================
========================================================*/
@media screen and (min-width:768px) and ( max-width:1190px) {
.top-main {
    width: 100%;
}
.header-right-btn01 {
    margin-right: 1.2em;
}
.news-box {
    margin: 50px 0;
}
.ippun {
    padding: 50px 0 40px;
}
.slick-prev,.slick-next {
    bottom: -28%!important;
}
.ippun-view {
    margin: 30% 0 0 auto;
}
.ippun-view:hover{
  color:#fff;
}
#thumbs img {
    padding: 15px;
}
#thumbs .slick-current img {
    filter: drop-shadow(0 0 5px rgba(255,255,255,.9));
    padding: 5px;
}

section.top-about ul {
    padding: 65px 0;
}
.top-interview {
    padding: 80px 0;
}





}/*=======================================================
==========================================================
　　　　　　　　　　　　　IPAD end
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
==========================================================
　　　　　　　　　　　　　共通コード
==========================================================
========================================================*/



/*=======================================================
==========================================================
　　　　　　　　　　　　　共通end
==========================================================
========================================================*/
