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



/*===============================================
●PC版非表示
===============================================*/
.sp{ display:none!important;}
.abouttable{ display:none;}
.tblBusiness{ table-layout: fixed;}
/*.sp-navi{ display:none;}
.contactblock p.tel a{ pointer-events:none;}*/
/*===============================================
●レスポンシブ  画面の横幅が520pxまで
===============================================*/
@media screen and (max-width:520px){
body{ min-width:320px; background-image:none;}
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#wrapper{ padding-top: 80px;}
#page{ background-image:none;}
.sp-navi{ position:fixed; width:100%; background-color:#ffffff; height:55px; top:0; border-bottom: 3px solid #1d2087;}
.sp-navi li{ background-color:rgba(255,255,255,0.90)}
.pc{ display:none!important;}
.sp{ display:block!important;}
.sp .drawer-hamburger{ background-color:rgba(255,255,255,0.80); margin:7px 7px 0 0; padding: 12px .75rem 10px; z-index:9999;}
.drawer--right .drawer-nav{ z-index:10000;}
.drawer-hamburger i{ display:block; padding-top:15px; font-size:10px; font-weight:bold;}
.drawer-brand{ display:block; text-align:center; padding:30px 0 10px 0;}
.drawer-menu-item{ display:block; font-size:14px; margin:0 auto}
.drawer-menu-item i{ font-size:12px;}
.drawer-dropdown-menu{ padding-bottom:20px;}
.drawer-dropdown-menu-item{ line-height:40px; font-size:13px; height:40px; display:block; width:80%; margin:0 auto; padding:0!important}
.drawer-nav { background-color:rgba(255,255,255,0.90); overflow: scroll;}
.drawer-nav .branding { padding: 25px 0; text-align: center}
.drawer-nav .branding img{ width:80%; height:auto}
.drawer-nav .menu-main{ width:95%; margin: 0 auto;}
.drawer-nav .menu-main li{ border-bottom: 1px dotted #666666}
.drawer-nav .menu-main li a{ padding: 15px 0; display: block; color: #693905; font-size: 18px; letter-spacing: 2px;}
.drawer-nav .menu-main li a::before{ content: "▶"; color: #8ec31e; font-size: 14px;}
.drawer-nav .contactbox{ width:95%; margin: 0 auto; text-align: center; line-height: 1.5; padding: 15px 0}
.drawer-nav .contactbox dt{ font-size: 14px;}
.drawer-nav .contactbox dd{ font-size: 24px;}
.drawer-nav .contactbox dd a{ color: #f19625;}
.drawer-nav .contactbox dd i{ font-size: 14px; display: block; color: #666666;}
.drawer-nav .contactbox dd.tel { letter-spacing: 2px; padding: 15px 0; font-weight: bold}
.drawer-nav .contactbox dd.tel img{ width:36px; height: auto;}
.drawer-nav .contactbox dd.access img{ width:80%; height: auto}

#headerArea{ display: none; background-image: none;}
.drawer-nav #headerArea{ display: block; padding: 0; height: auto; width:auto; height: 325px;}
#logoMain{ position: relative; top:auto; left:auto; text-align: center; width:100%; padding:0 0 5px 0}
#globalNavi{ top:auto; right: auto; padding: 25px 0 ; border-bottom: 1px solid #918773; position: relative; margin: 0 auto}
#localNavi{ top:auto; right: auto; padding: 25px 0 ; position: relative; margin: 0 auto}
.syamei{ padding: 18px 2px 22px 18px; background-repeat: repeat-x; z-index: 1000; position: absolute; width: calc(100% - 20px);}
.syamei img{ width:auto;}
#mainImgArea{ height:75vw; background-size: cover}
.bgMain{ background-size: cover}
#mainImgBody{ width:100%}
#mainImgBody #ttlMainArea{ width:100%; float: none; height: 80vw;}
#mainImgBody #ttlMainArea #ttlMain{ right:auto; left:15px; bottom:15px; }
#mainImgBody #ttlMainArea #ttlMain img{ width:45px; height: auto}
#breadCrumb{ right:15px;}
.contentsBody{ width:100%; margin-top: 60px;}
#btPageTop{ background-position: right -480px bottom 0}
#btPageTop p{ width:80%;}
#footerInner{ width:100%; height:auto;}
#footerNavi{ width:80%; margin: 0 auto; position: relative; top:auto; background-image: none; padding-bottom: 25px;}
#footerNavi ul{ width:100%; float: none;}
#footerNavi1{margin-right:0}
#footerNavi2{margin-right:0}
#footerNavi3{margin-right:0}
#footerNavi4{margin-right:0}
#btFssc{ position: relative; clear: both; margin: 15px; top: auto; text-align: center;}
#footerLogoList{ position: relative; top:auto; text-align: center; width:100%}
#footerLogoList li{ margin: 25px 0; display: block}
#copyRight{ position: relative; clear: both; margin: 15px; text-align: center; bottom: auto;}
#footerNavi ul li{font-size: 16px; padding: 10px 0; border-bottom: 1px solid #ffffff;}
#footerNavi ul li ul{ width:80%; margin: 15px auto}
#footerNavi ul li ul li{ font-size: 15px;}
#footerNavi ul li ul li:last-child{ border: none;}


#contentsArea{ width:90%; margin: 0 auto; padding-top:70px;}
#mainContents{ width:100%; float: none;}

#jsChangeImg{ width:100%; left:0; margin-left: 0; top:80px; height: 80vw}
#jsChangeImg ul{ overflow: auto; height: 70vw;}
#jsChangeImg ul li{ width:150%!important; position: relative; height: 70vw;}
#jsChangeImg li img{ width:150%; overflow-x: hidden; position: absolute; left:-25%}
.bx-controls{ bottom: 50px; left:0;}
#jsSlideImg{ width:95%; margin: 0 auto;}
#jsSlideImg ul{ width:100%;}
#btBack{ display: block!important}
#btNext{ display: block!important}
#topContentsArea{ width:100%}
#topContentsArea h2 { text-align: center}
#topContentsArea h2 .sp{ width:95%; margin: 0 auto}
#productsNavi{ width:100%; text-align: center}
#topContents{ width:95%; margin: 45px auto}
#productsNavi li{ width:25%}
#productsNavi li.row{ margin: 10px auto 0 auto; width:95%;}
#spslide{background: url(../img/bg_slideimage.png) center top no-repeat;}
#spslide .prev-arrow{ position: absolute; left:15px; top:40%; z-index: 9999}
#spslide .next-arrow{ position: absolute; right:15px; top:40%; z-index: 9999}
.slick-track{padding-left:50%}
#spslide li { padding: 10px 0 }
#spslide li img{ width:95%; margin: 0 auto}
#ecList{ padding: 25px 0}
#ecList h2{ display: block}
#ecList h2 img{ width:30%}
#ecList .mainShop { display: flex; justify-content: space-around; flex-wrap: wrap; align-items: baseline; width:90%; margin: 0 auto;}
#ecList .mainShop li{ width:50%}
#ecList .leftArea{ margin-left: 0; text-align: center;}
#ecList .otherShop{ margin-left:0 ;}
#ecList .otherShop li{ display:block; margin: 3px auto; width:90%}
#ecList .otherShop li a{ display:block!important; padding:10px 0}
#newsArea{ float: none; width:100%}
#otherArea{ float: none; width:100%;}
#exteriorNavi .snsNavi li{ margin: 5px 0; width:50%; text-align: center }
#exteriorNavi .snsNavi li img{ width:95%; height: auto}
#businessuse{ background-color: #556816;background-image: none; margin-top: 25px;}
#businessuse dl{ background-image: none;}
#businessuse dt{ text-indent: -10px;}
#businessuse dt::before{ content: "> "; font-weight: bold;}


/*森半とは*/
#pageNavi li{ width:95%; padding-bottom: 15px; margin: 0 auto; display: block}
#pageNavi li p{ width:25%;}
#pageNavi li dl{ width:65%;}
#pageNavi li dl dd{ width:100%;}
#txtBody{ width:90%; margin: 0 auto}
#ttlMainArea #imgMorihan{ bottom:25px; width:45vw; left: 0; right: 0; margin: 0 auto;}
#txtMorihan{ background-position: bottom; padding-bottom:150px;}
#txtMorihan img{ width:350px; margin: 0 auto}

/*こだわり*/
.imgLTxtSet .imgL{ float: none;}
.imgLTxtSet .detailR{ width: calc(100% - 80px); margin: 15px auto;}
#kodawariSec{ background-size: cover}
#kodawariBody{ width: 100%}
#kodawariInner{ background:none;/*background-size:cover; background-position: right -200px top 0;*/ padding: 25px 0; height: auto}
#kodawariBody h2{ padding-top: 0; margin: 0 auto; width: calc(100% - 80px); }
#kodawariBody .imgLTxtSet{ width:calc(100% - 80px); margin: 0 auto}
#kodawariBody .imgLTxtSet .imgL{ float: left; width:25%; margin: 0 5% 0 0}
#kodawariBody .imgLTxtSet .detailR{ width:70%; margin: 0}
#kodawariBody .imgLTxtSet dt{ padding-top: 0}
.imgRTxtSet .imgR{ float: none; margin: 0 auto; width: calc(100% - 80px); }
.imgRTxtSet .detailL{ margin: 15px auto; width: calc(100% - 80px); }

/*品質保証*/
#sideNavi{ width:80%; margin: 0 auto}
.contentsBody #mainContents{ width: 100%; margin: 25px auto;}
.imgRTxtSet .imgR.mgl20{ margin-left:auto!important}
#mainImgArea.larger #mainImgBody.clearFix{ overflow: visible}
/*#mainImgArea.larger #ttlMain{ margin-bottom: -50px;}*/
.imgWideSet { width:calc(100% - 80px); margin: 0 auto 60px auto}
.imgtitle{ width:90%; text-align: center; margin: 0 auto}
#jasSec #leftBox{ width:calc(100% - 80px); margin: 0 auto 25px auto; float:none}
#jasSec #rightBox{ width:calc(100% - 80px); margin: 0 auto 25px auto; float:none}
.processList dt{ position:relative; width:100%; left: auto}
.processList dd{ padding: 15px 0 15px 0;}

/*工場案内*/
.detailR .mgt40{ margin-top: 0!important}
.detailR .mgr40{ margin-right: 0!important}

/*お茶のいろは*/
#irohaList{ text-align: center;}
#irohaList li{ margin: 0 auto 50px auto; text-align: left;}
#irohaList > .mgt40{ margin-top: 0!important}

/*お茶の歴史*/
.page-history #headTtl{ right:8%; top:60px; width:130px}
.page-history #mainImgBody #ttlMainArea #ttlMain{ top:auto}
.page-history #mainImgBody{ overflow: visible}
.page-history #mainImgArea{ height: 75vw;}
#history li dl{ background-image: none;}
#history dl dt{ background-color: #ae5959; width:100%; padding: 5px 0}
#history dl dd{ background-color: #ffffff; width:auto}
#history { background-position: right calc(50% + 32px ) top 0}

/*お茶の種類*/
.page-kind #headTtl{ right:20%; top:40px; width:80px}
.page-kind #mainImgBody #ttlMainArea #ttlMain{ top:auto}
.page-kind #mainImgBody{ overflow: visible}
.page-kind #mainImgArea{ height: 75vw;}
#tab li span{ background-image: url(../iroha/kind/img/navi_tab_sp.png); width:160px; height: 27px; margin-left:5px; margin-right: 0}
#tab li#tab2 span { background-position: -160px bottom;}
#tab li#tab2 span:hover, #tab li#tab2 span.select{ background-position: -160px top;}
#kindList{ width:calc( 100% - 80px); margin: 0 auto;}
#kindList li{ width:auto; margin: 35px 0 0 0;}
.page-kind .alignCenter.mgt40{ width:95%; margin: 0 auto}

/*お茶の美味しい淹れ方*/
.page-howto #headTtl{ right:10%; top:45px; width:50px}
.page-howto #mainImgBody #ttlMainArea #ttlMain{ top:auto}
.page-howto #mainImgBody{ overflow: visible}
.page-howto #mainImgArea{ height: 75vw; background-position: -560px;}
.page-howto .blockWide{ width:90%; margin: 0 auto; }
.page-howto .blockWide iframe{ width:100%; height:auto; 0 auto; }

/*3つのポイント*/
.page-point #headTtl{ right:10%; top:40px; width:110px}
.page-point #mainImgBody #ttlMainArea #ttlMain{ top:auto}
.page-point #mainImgBody{ overflow: visible}
.page-point #mainImgArea{ height: 75vw; background-position: -500px 0;}
.pointBox { width:90%; margin: 0 auto 25px auto;}
.pointBox h2{ overflow-x: hidden;}
.pointBox h2 img{ width:700px!important; max-width:600px; margin-left: -10px;}
.imgTxtSet li{ margin:15px auto; display:block}
.imgTxtSet li.turn{ margin:15px auto 0 auto;}
.page-point .imgLTxtSet .imgL{ margin: 0 auto; text-align: center}
.page-point .mgt20{ width:90%; margin: 0 auto}

/*お茶を使ったレシピ*/
.page-recipe #headTtl{ right:10%; top:50px; width:38px}
.page-recipe #mainImgBody #ttlMainArea #ttlMain{ top:auto}
.page-recipe #mainImgBody{ overflow: visible}
.page-recipe #mainImgArea{ height: 75vw; background-position: -530px 0;}
#recipeList{ width:90%; margin: 0 auto; float: none}
#recipeList li{ float: none;}
#recipeList h2 img{ display: block}
#recipeList li .leftSec{ width:100%; }
#recipeList li .rightSec{ width:100%; }
#recipeList li.typeNarrow{ width:calc(100% - 40px)}
#recipeList .photo img{ object-fit:cover; width:100%; height: 125px;}

/*楽しいお茶の使い方*/
.page-fun #headTtl{ right:10%; top:50px; width:65px}
.page-fun #mainImgBody #ttlMainArea #ttlMain{ top:auto}
.page-fun #mainImgBody{ overflow: visible}
.page-fun #mainImgArea{ height: 75vw;}
.page-fun .imgLTxtSet .imgL{ text-align: center; margin: 0 auto!important; width:calc(100% - 80px)}

/*店舗情報*/
.wrapper-shop h2{ width:calc(100% - 80px); margin: auto}
.wrapper-shop .imgLTxtSet .imgL{ width:calc(100% - 80px); margin: 0 auto!important}
.wrapper-shop .detailR { margin-bottom: 50px;}
.wrapper-shop #tblShop{ width:calc( 100% - 80px); margin: 0 auto}
.wrapper-shop #tblShop th{ display: block; padding-bottom: 0}
.wrapper-shop #tblShop td{ display: block; padding-top: 0}

/*ごあいさつ*/
.page-company #headTtl{ right:10%; top:90px; width:65px}
.page-company #mainImgBody{ overflow: visible}
.page-company #mainImgArea{ /*height: 300px;*/}
.wrapper-goaisatsu{ width:calc(100% - 80px); margin: 0 auto;}
.wrapper-goaisatsu .imgLTxtSet .imgL { text-align: center; margin: 0}
.wrapper-goaisatsu .detailR{ margin: 0; width: 100%; padding-top: 25px;}

/*会社概要*/
.wrapper-company h2{ width:calc(100% - 80px); margin: auto}
.wrapper-company table{ width:calc( 100% - 80px)!important; margin: 0 auto}
.wrapper-company th{ display: block; padding-bottom: 0!important}
.wrapper-company td{ display: block; padding-top: 0!important}

/*会社概要*/
.wrapper-history h2{ width:calc(100% - 80px); margin: auto}
.wrapper-history table{ width:calc( 100% - 80px)!important; margin: 0 auto}
.wrapper-history th{ width:125px!important}

/*行動指針*/
/*.page-guideline .bgMain{ background-position: -237px bottom;}
.page-guideline #mainImgArea{ background-size: 200%;}*/
.wrapper-guideline { width:calc(100% - 80px); margin: 0 auto}
.wrapper-guideline table{ width:100%; margin: 0 auto}
.wrapper-guideline th{ display: block; padding-bottom: 0!important; width: 100%!important}
.wrapper-guideline td{ display: block; padding-top: 0!important}

/*CSR*/
.wrapper-csr { width:calc(100% - 80px); margin: 0 auto}
.wrapper-kankyo { width:calc(100% - 80px); margin: 0 auto}
.wrapper-kankyo th{ width: 80px!important}
.wrapper-jisedai { width:calc(100% - 80px); margin: 0 auto}
.wrapper-jisedai th{ width: 80px!important}

/*採用情報*/
.wrapper-entry{ width:calc(100% - 80px); margin: 0 auto}
.wrapper-entry th{ width: 70px!important}

/*業務用商品*/
#businessBody{ width:90%}
#businessBody h2 .mgr20{ display: block; margin-bottom: 5px;}
.scrolltable{ width:100%; overflow-x:scroll;}
.scrolltable{}
.scrolltable::-webkit-scrollbar{height:10px;}/*バーの太さ*/
.scrolltable::-webkit-scrollbar-track{background:#849633;}/*バーの背景色*/
.scrolltable::-webkit-scrollbar-thumb{background:#4b560e;}/*バーの色*/
.abouttable{ display:block; font-size: 12px; font-weight:bold; margin-top:20px; }
.abouttable::before{ content: "●"; color:#4b560e; }
.tblBusiness{ margin-top: 10px; table-layout: fixed;}

}