@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

.font1,
.font_serif,
.more a,
.top_cms_title h3,
#page_title h2{
    font-family: 'Kaisei Opti', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
.font2,
.top_cms_title p,
#page_title h3,
#page10 ul li a span{
    font-family: 'Caveat', cursive;
}
#footer .tel{
    font-family: 'Nanum Pen Script', cursive;
}

.linkStyle{
    color:#bf9d74;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

/*
#page-top{
    position:absolute;
}

.sample_txt{
    bottom:10%;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    z-index:2;
}
.sample_txt p:nth-child(2){
    font-size:2rem;
}
*/

/*--all page---------------------------
-------------------------------------*/
#wrap{
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
}
#footer_menu{
    background-color: #fb8a15!important;
}
#footer .d_flex{
    padding-bottom:30px;
}
#footer .grid_8{
    border-left:0!important;
}
#footer .grid_8 h2,
#footer .grid_8 p{
    color:#fff;
}
#footer .tel a{
    color: #f17d05;
    border-bottom:0;
    font-size:2.5rem;
}
#sns_links{
        background-color: #031e5c!important;
        padding-bottom:20px;
}


/*--top page---------------------------
-------------------------------------*/
#main_img::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.1);
    top:0;
    left:0;
    pointer-events:none;
    z-index:1;
}
.catch{
    top:50%;
    left:50%;
    z-index:2;
}
#contents1{
    background-image: url(./Dup/img/vege.png),url(./Dup/img/wood.jpg);
    background-repeat: no-repeat,repeat-Y;
    background-position: bottom left,top left,bottom;
    background-size:100% auto,100% 45%;
}
#contents1 h2 span{
    position:relative;
}
#contents1 h2 span::before{
    content:'';
    position:absolute;
    display:block;
    width:80px;
    height:90px;
    background-image:url(./Dup/img/item.png);
    background-size:contain;
    background-repeat:no-repeat;
    top:-15%;
    right:-65%;
    z-index:1;
}
#contents1 figure img{
    box-shadow:none!important;
}
#contents1 p{
    margin-top:-50px!important;
    margin-bottom:50px;
    margin-right:0;
    margin-left:auto;
}
#contents1 p span{
    padding:30px;
    background-color:#fff;
    border-radius:10px;
    position:relative;
}
#contents1 p span::before{
    content:'';
    position:absolute;
    display:block;
    width:30px;
    height:30px;
    background-image:url(./Dup/img/fukidashi.png);
    background-repeat:no-repeat;
    background-size:contain;
    top:-20px;
    left:10%;
}
.ninjin{
    bottom:5%;
    left:3%;
    width:5vw;
}
.papurika{
    bottom:3%;
    right:5%;
    width:7vw;
}
.broccory{
    bottom:11%;
    left:15%;
    width:5vw;
}
.papurika2{
    bottom:17%;
    left:30%;
    width:4vw;
}
#contents3 .sen{
    width:10vw;
    margin:auto;
}
.cms_6-c .cate_box:last-child{
    margin-bottom:0;
}

/*-----top page animation---------*/
/*ローディング後に拡大*/
.load-zoomInTrigger{opacity: 0;}
.load-zoomIn{
  animation-name:load-zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}
@keyframes load-zoomInAnime{
  from {
  transform: translate(-50%,-50%) scale(0.6);
  opacity: 0;
  }
  to {
    transform: translate(-50%,-50%) scale(1);
  opacity: 1;
  }
}

.swing_item {
    z-index: 2;
    transform-origin: center center;
    animation: swing 1s steps(2, start) infinite;
}
@keyframes swing{
0% {
    transform: rotate(20deg);
}
100% {
    transform: rotate(-10deg);
}
}
.swing_item2 {
    z-index: 2;
    transform-origin: center center;
    animation: swing2 1s steps(2, start) infinite;
}
@keyframes swing2{
0% {
    transform: rotate(-10deg);
}
100% {
    transform: rotate(20deg);
}
}

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}
@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }
  to {
    transform: scale(1);
  opacity: 1;
  }
}
.zoomInTrigger{
    opacity: 0;
}

/*--under page---------------------------
-------------------------------------*/
.u_page{
    background:url(./Dup/img/vege.png) no-repeat left bottom;
    background-size:100% auto;
    padding-bottom:200px;
}
#page_title h3{
    font-size:2rem;
}

/*Reccomend page--------------*/
.cms_4-c .modal_bt,#cms_4-c .modal_bt{cursor: pointer}
.cms_4-c .modal_bg,#cms_4-c .modal_bg{
     top: 0;left: 0;
     background-color: rgba(0,0,0,0.8);
     z-index: 9998;
}
.cms_4-c .modal_box,#cms_4-c .modal_box{
     max-height: 80%;
     overflow-y: auto;
     z-index: 9999;
}
.cms_4-c .close_bt,#cms_4-c .close_bt{cursor: pointer}


/*relationship page-------------*/
#cms_6-c .cate_box,
.cms_6-c .cate_box{
    box-shadow:15px 15px #eee;
}
#cms_6-c .cate_box::before,
.cms_6-c .cate_box::before{
    content:'';
    position:absolute;
    display:block;
    width:98%;
    height:40px;
    background-image:url(./Dup/img/note.png);
    background-repeat:repeat-X;

    left:0;
    right:0;
    margin:auto;
    z-index:1;
}
#cms_6-c .cate_box::before{
    top:-2%;      
}
.cms_6-c .cate_box::before{
    top:-4%;      
}
.slide_img .thumbnail .swiper-wrapper {
    margin-left: 0!important;
    transform: none!important;
}
.swipe_img{
    position: relative;
    overflow: hidden;
    
}
.swipe_img img {
    position: relative;
    top: 50%!important;
    left: 50%!important;
    -ms-transform: translate(-50%,-50%)!important;
    -webkit-transform: translate(-50%,-50%)!important;
    transform: translate(-50%,-50%)!important;
}

.swiper-wrapper{transform: translate3d(0, 0px, 0px);}


/* slide_img */
.slide_img .main {
  margin-bottom: 10px;
}
.slide_img .thumbnail .swiper-slide {
  cursor: pointer;
  opacity: .7;
}
.slide_img .thumbnail .swiper-slide-active {
  opacity: 1;
}
.slide_img .thumbnail .swiper-wrapper {
  margin-left: calc(-37.5% - 5px);
}
.slide_img .thumbnail .swiper-wrapper{margin-left: 0!important;transform: none!important;}


#page10 ul li a span{
    font-size:1.5rem;
}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#header h1.active img{
    max-width:100px;
}
#header h1 span{
    padding:0;
}
#main_img{
    height:50vh;
}
#intro, 
#top_cms .top_cms_box .top_cms_title,
#loader{
    background-size:40% auto;
}
#contents1 p{
    margin-top:30px!important;
}
.broccory{
    bottom:6%;
    width:8vw;
}
.papurika2{
    left:31%;
    width:6vw;
}
#page_title,
#page_title::after{
    min-height:35vh;
}
#page_title > div {
    line-height:1.5;
}
#page_title .txt_vertical{
    writing-mode:horizontal-tb;
}
.u_page{
    padding-bottom:150px;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#intro,
#top_cms .top_cms_box .top_cms_title,
#loader,
#loader, 
#main_nav{
    background-size:60% auto;
}
/*
#header h1{
    position:absolute;
}
*/
#header h1.active img{
    max-width:70px;
}
#main_img{
    height:37vh;
}
.catch{
    width:65%;
}
.sample_txt{
    bottom:0;
    font-size:12px;
    line-height:1.2;
}
.sample_txt p:nth-child(2){
    font-size:1.2rem;
}
#contents1 h2 span::before{
    background-size:70%;
    right:-135%;
}
#contents1 p span{
    padding:20px;
}
#contents1 p span::before{
    left:80%;
}
.ninjin{
    bottom:15%;
    left:2%;
    width:12vw;
}
.papurika{
    bottom:3%;
    right:21%;
    width:7vw;
}
.broccory{
    bottom:3%;
    left:10%;
    width:9vw;
}
.papurika2{
    bottom:8%;
    left:87%;
    width:10vw;
}
#contents3 .sen{
    width:20vw;
}
#contents3::after{
    height:30%;
}
.top_cms_title{
    margin-bottom:20px;
}
.top_cms_title p{
    font-size:18px;
}
#cms_6-c .cate_box, 
.cms_6-c .cate_box{
    box-shadow:10px 10px #eee;
}
.cms_6-c .cate_box::before{
    width:97%;
}
#footer .tel a{
    font-size:1.8rem;
}
#page_title > div{
    padding-top:60px;
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
#top_cms .more a{
    padding-bottom:10px;
}
#contact_tel a{
    padding-top:35px;
}
}