@charset "UTF-8";

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*pc限定*/
.sp {display: none!important;}
.ssp {display: none;}

/*コンテナ*/
.container {width: 1100px; max-width: 90%;}

/*--------------------------------------------------------------------------
パララックス＆ホバーアニメーション
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
部品
--------------------------------------------------------------------------*/

/*------------------------------------
NEWS
------------------------------------*/
.post-navigation .nav-previous span,
.post-navigation .nav-next span {font-size: 20px;}

/*------------------------------------
SNSリンク
------------------------------------*/
.socials-list {margin: 50px auto;}

/*------------------------------------
MORE
------------------------------------*/
.more {height: 50px; line-height: 50px; font-size: 20px;}

/*------------------------------------
ページトップに戻るボタン
------------------------------------*/
.scroll-up {width: 60px; right: 20px;}

@media screen and (min-width: 1530px) {
	.scroll-up { left: calc(50vw + 690px); right: auto;}
}

/*--------------------------------------------------------------------------
グローバルナビ
--------------------------------------------------------------------------*/
#site-navigation {width: 100%; position: relative; background: #000; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: 100;}
#site-navigation.fixed {position: fixed; top: 0; left: 0; background: rgb(0 0 0 / 90%); z-index: 100;}
#site-navigation.hide {transform: translateY(-100%);}
#site-navigation #top-menu {width: 1080px; height: 70px; max-width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
#site-navigation #top-menu .menu-item a {font-size: 23px; opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
/*#site-navigation #top-menu .menu-item a:after {content: ""; width: 0; height: 1px; position: absolute; left: 0; bottom: 5px; background: #fff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}*/
#site-navigation #top-menu .menu-item a:hover {opacity: 0.7;}
#site-navigation #top-menu .menu-item a:hover:after {width: 100%;}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {width: 100%; left: 0;}
header.other {background: rgb(253 255 255 / 0.8);}
header.other {margin-top: 20px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}

header #hamburger {display: none;}

/*--------------------------------------------------------------------------
メイン
--------------------------------------------------------------------------*/
body.page:not(.twentyseventeen-front-page) .entry-title {margin-bottom: 90px; font-size: 33px!important;}


/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer#colophon {padding: 40px 0 0; background: url(../img/bg_f_pc.jpg) top center; background-size: cover;}

footer#colophon .container {width: 1380px; max-width: 100%;}

footer#colophon .office-info-wrap {justify-content: center;}
footer#colophon .office-info-wrap .site-logo {display: block; width: 351px; margin-top: 10px;}
footer#colophon .office-info-wrap .site-logo img {width: 100%; height: auto;}
footer#colophon .office-info-wrap .office-info {margin-left: 48px;}
footer#colophon .office-info-wrap .office-info * {font-size: 20px; line-height: 2;}
footer#colophon .footer-nav {margin-top: 70px;}
footer#colophon .footer-nav .menu {display: flex; justify-content: space-around; font-size: 20px;}
footer#colophon .footer-nav .menu a {font-size: 20px;}
footer#colophon .socials-list {margin: 70px auto 60px;}

footer#colophon .copyright {padding: 0 0 80px; font-size: 15px;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

img[src$=".svg"].mask-sp {display: none;}

/*------------------------------------
main
------------------------------------*/
.page:not(.home) .contents-wrap {padding: 8.2654% 13.6363%;}

/*------------------------------------
HERO HERDER
------------------------------------*/
#front .page-heading .video {height: 90%;}
#front .page-heading .video iframe.sp {display: none;}

/*------------------------------------
scroll
------------------------------------*/
.home .scroll {bottom: 78px;}
.home .scroll a.has-animation {font-size: 30px;}
.home .scroll a.has-animation:before, .home .scroll a:after {width: 30px; height: 2px;}
.home .scroll a.has-animation:before {margin-left: -23px;}
.home .scroll a.has-animation:after {margin-right: -22px;}
.home .scroll a.animation-cover {width: 34px; height: 50px; top: 42px; margin-left: -17px;}
@keyframes scrollAnimation {0% {bottom: -1vh; opacity: 0;} 5% {bottom: -1vh; opacity: 0;} 50% {opacity: 1;} 95% {bottom: -4vh; opacity: 0;} 100% {bottom: -4vh; opacity: 0;}}

/*------------------------------------
Youtube channel
------------------------------------*/
#front #youtube-channel {padding: 100px 0; align-items: center; background: url(../img/bg_top_youtube_pc.jpg) top center; background-size: cover;}
#front #youtube-channel .youtube-channel-list {display: flex; flex-wrap: wrap; justify-content: space-between;}
#front #youtube-channel .youtube-channel-list li {width: calc(50% - 20px);}
#front .youtube-channel .youtube-channel-list li:nth-child(even) {animation-delay: 0.6s;}
#front #youtube-channel .youtube-channel-list .video-title {margin: 20px 0 60px;}

#front #youtube-channel .link-btn .more {width: 450px; font-size: 23px;}

/*------------------------------------
recommended item
------------------------------------*/
#front .recommend-item {padding-top: 46.875%; background: url(../img/bg_top_rec_pc.jpg) top center; background-size: cover;}
#front .recommend-item .recommend-item-img {width: 14.7%; top: -5%; left: 64.5%;}
#front .recommend-item .recommend-item-img a {width: 18%; bottom: 4%; right: 116%;}
#front .recommend-item .award-img {width: 17.738%; right: 64%; bottom: -31%;}

/*------------------------------------
commit-top
------------------------------------*/
#front .commit-top {padding-top: 46.875%; background: url(../img/bg_top_kodawari_pc.jpg) center bottom fixed; background-size: cover;}
#front .commit-top .commit-top-img {width: 8.854%; left:70%; bottom: -9%;}
#front .commit-top .commit-top-img a {width: 50px; height: 350px; top: 42%; right: 130%;}

/*------------------------------------
茶師
------------------------------------*/
#front .tea-master {padding-top: 36.4583%; background: url(../img/bg_top_tea-master_pc.jpg) center bottom; background-size: cover;}
#front .tea-master .tea-master-name-wrap {width: 7.2%; top: 24%; right: 72%;}

/*------------------------------------
online shop
------------------------------------*/
#front .online-shop-top {height: 700px; background: url(../img/bg_top_ec_pc.jpg) top center; background-size: cover;}
#front .online-shop-top .wrapper .sec-title {font-size: 33px;}
#front .online-shop-top .wrapper .sec-title:before {width: 36px; height: 35px; margin-right: 6px;}
#front .online-shop-top .wrapper .banner {width: 729px; margin: 2.5% 0;}
#front .online-shop-top .wrapper .more {width: 200px; margin-top: 3%; font-size: 21px;}

/*------------------------------------
page link
------------------------------------*/
#front .page-link {height: 600px; background: url(../img/bg_top_page-link_pc.jpg) top center; background-size: cover;}
#front .page-link .page-link-list {width: 100%; justify-content: space-between;}
#front .page-link .page-link-list li {width: calc(50% - 47px);}
#front .page-link .page-link-list li:nth-child(even) {animation-delay: 0.6s;}
#front .page-link .page-link-list li .page-title {margin-top: 5%;}

/*------------------------------------
news top
------------------------------------*/
#front .news-top {height: 850px; background: url(../img/bg_top_news_pc.jpg) top center fixed; background-size: cover;}
#front .news-top .wrapper .container {justify-content: space-between;}
#front .news-top .wrapper .container .sec-section.news-list-wrap {width: 48.1818%; height: 500px; padding: 30px 47.5px 0 46.5px;}
#front .news-top .wrapper .container .sec-section.news-list-wrap:before {width: 160px; height: 138px; left: -40px; bottom: -60px;}
#front .news-top .wrapper .container .sec-section.news-list-wrap .sec-title {font-size: 23px;}
#front .news-top .wrapper .container .sec-section.news-list-wrap .sec-title span,
#front .news-top .wrapper .container .sec-section.news-list-wrap .entry time,
#front .news-top .wrapper .container .sec-section.news-list-wrap .entry .post-title {font-size: 20px;}
#front .news-top .wrapper .container .sec-section.news-list-wrap .more {width: 200px; font-size: 21px;}
#front .news-top .wrapper .container .sec-section.embedded-facebook {width: 46.29629%; animation-delay: 0.6s;}
#front .news-top .wrapper .container .sec-section.embedded-facebook .fb-frame {width: 100%; padding-top: 100%;}

/*------------------------------------
販売店舗
------------------------------------*/
#front .shop-list {height: 630px; background: url(../img/bg_top_shop-list_pc.jpg) top center; background-size: cover;}
#front .shop-list .inner .sec-title {font-size: 33px;}
#front .shop-list .inner p {margin-top: 30px; font-size: 23px;}
#front .shop-list .inner .entry {margin-top: 30px;}
#front .shop-list .inner .entry a {position: relative; font-size: 26px; opacity: 1; transition: 0.3s all ease;}
#front .shop-list .inner .entry a:hover {opacity: 0.6;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
新着情報個別ページ (single.php)
--------------------------------------------------------------------------*/
.single #main-area {padding: 90px;}
.single .wrap {width: 1500px;}
.single .single-page-title {margin-bottom: 40px; font-size: 33px;}
.single .post-content-wrap {padding: 6% 10%;}
.single .entry-meta time {font-size: 20px;}
.single .entry-title {font-size: 30px;}
.single .entry-content * {line-height: 2;}
.single.has-sidebar:not(.error404) #primary {width: calc(90% - 250px)!important;}
.single.has-sidebar #secondary {width: 250px!important;}
.single.has-sidebar #secondary .widget-title {font-size: 23px;}
.single #archives-3:after {top: 70px;}

/*--------------------------------------------------------------------------
新着情報アーカイブページ (archive.php)
--------------------------------------------------------------------------*/
.archive #main-area {padding: 90px;}
.archive .wrap {width: 1500px;}
.archive .archive-page-title {margin-bottom: 40px; font-size: 33px;}
.archive .post-content-wrap {padding: 6% 10%;}
.archive .entry-meta time {font-size: 20px;}
.archive .entry-title {font-size: 30px;}
.archive .entry-content * {line-height: 2;}
.archive.has-sidebar:not(.error404) #primary {width: calc(90% - 250px)!important;}
.archive.has-sidebar #secondary {width: 250px!important;}
.archive.has-sidebar #secondary .widget-title {font-size: 23px;}
.archive #archives-3:after {top: 70px;}


/*--------------------------------------------------------------------------
新着情報固定ページ (page-news.php)
--------------------------------------------------------------------------*/
body:not(.has-sidebar):not(.page-one-column).blog .page-header {float: none; width: 100%;}
.blog #content.site-content {padding: 0!important;}
.blog #content.site-content #main-area {padding: 90px!important;}
.blog .wrap {width: 1500px;}
.blog .archive-page-title {margin-bottom: 40px; font-size: 33px;}
.blog .post-content-wrap {padding: 6% 10%;}
.blog .entry-meta time {font-size: 20px;}
.blog .entry-title {font-size: 30px;}
.blog .entry-content * {line-height: 2;}
.blog #primary {width: calc(90% - 250px)!important; float: left;}
.blog #secondary {width: 250px!important; float: right;}
.blog #secondary .widget-title {font-size: 23px;}
.blog #archives-3:after {top: 70px;}


/*--------------------------------------------------------------------------
固定ページ (page.php)
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
body.page:not(.twentyseventeen-front-page) .entry-title {font-size: 33px!important;}

/*--------------------------------------------------------------------------
いまくま茶園のこだわり
--------------------------------------------------------------------------*/
.page:not(.home) #content.site-content #main-area {padding: 90px 0;}
.page:not(.home).page-id-77 #main-area:before {height: 750px; background: url(../img/ko_bg_top_pc.jpg) top center; background-size: cover; z-index: 2;}
.page:not(.home).page-id-77 #main-area .wrap {width: 1200px; max-width: 100%!important; padding: 0;}
.page:not(.home).page-id-77 .sec-main-img.kodawari .flame .message {width: 28%; position: absolute; top: -10%; right: 10%;}
.page:not(.home).page-id-77 .sec-main-img.kodawari {max-width: 80vw; margin: 5.7vw auto 80px;}

.kodawari .contents-row .inner {justify-content: space-between;}
.kodawari .contents-row .inner .contents-row-txt {width: 46.3636%;}
.kodawari .contents-row .inner .contents-row-img {width: 50%;}

.kodawari p {font-size: 26px; line-height: 2;}
.kodawari .container {max-width: 96vw;}
.kodawari .s-title, .kodawari .s-title span {font-size: 50px;}
.kodawari .ss-title {font-size: 45px;}
.kodawari .l-title,
.kodawari .l-sub-title {font-size: 50px; margin-bottom: 40px;}
.kodawari .g-h {width: 128%; height: 50px; margin: 0 0 40px -14%; font-size: 30px; line-height: 50px;}

.kodawari .sec-section.contents-row {margin-bottom: 80px;}

.kodawari .sec-sub-img.full-size,
.kodawari .sec-main-img.full-size {margin-bottom: 80px;}

.kodawari .our-commitment .sec-sub-img.full-size img {height: 600px;}
.kodawari .our-commitment .kyushu-map {width: 50%;}

.kodawari .organic-farming .sec-main-img.full-size .img {width: 50%; height: 600px;}
.kodawari .organic-farming .img-title img {width: 400px; margin: 0 auto 80px;}

.kodawari .sec-sub-img {margin-bottom: 80px;}
.kodawari .sec-sub-img-list li {width: 50%;}

.kodawari .youtube_movie-wraper {width: 800px; margin: 0 auto 80px;}
.kodawari .video-title {margin-top: 20px; font-size: 26px;}

.kodawari .tashiro .inner,
.kodawari .yagi-shiki .inner {margin-bottom: 80px;}
.kodawari .yagi-shiki .contents-row-img img {margin-bottom: 20px;}
.kodawari .yagi-shiki .yagi-shiki-comment {font-size: 20px;}

.kodawari .online-shop-news .new-items-wrap {position: relative; margin-bottom: 100px;}
.kodawari .online-shop-news .new-items-wrap .items-name {position: absolute; bottom: 20px; font-size: 40px;}
.kodawari .online-shop-news .new-items-wrap .items-name.green-tea {left: 23%;}
.kodawari .online-shop-news .new-items-wrap .items-name.oolong-tea {left: 58%;}
.kodawari .online-shop-news .new-items-wrap .items-name.tea {left: 99%;}


.kodawari .online-shop-news .items-list {max-width: calc(100% - 45px); margin-bottom: 100px;}
.kodawari .online-shop-news .items-list li {display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.kodawari .online-shop-news .items-list li:nth-child(2),
.kodawari .online-shop-news .items-list li:nth-child(3) {margin-left: -20px;}
.kodawari .online-shop-news .items-list li:nth-child(3) {z-index: 3;}
.kodawari .online-shop-news .items-list li:nth-child(3) .items-img {margin-left: 60px;}
.kodawari .online-shop-news .items-list li .items-img {height: 170px; margin-top: -124px}
.kodawari .online-shop-news .items-list li .items-name {position: absolute; font-size: 40px; bottom: 6px;}
.kodawari .online-shop-news .items-list li:first-child .items-name {left: 82%;}
.kodawari .online-shop-news .items-list li:nth-child(2) .items-name {right: 13%;}
.kodawari .online-shop-news .items-list li:nth-child(3) .items-name {left: 96%;}

.kodawari .online-shop-news .more.online-shop {padding: 0 30px; font-size: 23px;}

@media screen and (max-width: 1400px) {
	.kodawari .g-h {width: 100vw; margin-left: calc(50% - 50vw);}
}
@media screen and (max-width: 1300px) {
	.page-id-77 .sec-main-img.kodawari {margin-top: 100px; width: 90vw; margin: 100px auto 0;}
}
@media screen and (max-width: 1200px) {
	.kodawari .sec-sub-img.full-size,
	.kodawari .sec-main-img.full-size {width: 100%; margin: 0 0 80px 0;}
	.kodawari .online-shop-news .new-items-wrap {max-width: calc(100% - 45px);}
}

/*--------------------------------------------------------------------------
会社概要
--------------------------------------------------------------------------*/
.page:not(.home).page-id-48 .contents-wrap {padding: 8.2654% 11.6363%;}
.page-id-48 .wrap {padding: 0;}
.company dl .group dt,
.company dl .group dd,
.company dl .group dd span {font-size: 20px;}
.company dl .group dt,
.company dl .group dd {padding: 9px 0 7px;}

.company .our-company dl,
.company .our-history dl {margin: 51px 0 80px;}
.company .our-company dl .group dt,
.company .our-history dl .group dt,
.company .recruit dl .group dt {width: 25%;}
.company .our-company dl .group dd,
.company .our-history dl .group dd,
.company .recruit dl .group dd  {width: 75%;}

.company .inner {padding: 60px 0 80px;}
.company .inner .img.full-size {width: 100%; padding-top: 50%; margin-bottom: 40px;}

.company .our-award-history .inner {justify-content: space-between;}
.company .our-award-history .inner .img {width: 20%; height: auto;}
.company .our-award-history .inner .img img {width: 100%; height: auto;}
.company .our-award-history .inner dl {width: 75%;}
.company .our-award-history .inner dl .group {display: flex;}
.company .our-award-history .inner dl .group dt {margin-right: 1em;}

.company .our-vision .inner ol li {font-size: 20px;}

.company .our-concept .inner {justify-content: space-between;}
.company .our-concept .inner .img {width: 30%; height: auto;}
.company .our-concept .inner .img img {width: 100%; height: auto;}
.company .our-concept .inner dl {width: 62.5%;}
.company .our-concept .inner dl .group02:not(:last-child) {margin-bottom: 40px;}
.company .our-concept .inner dl .group02 dt,
.company .our-concept .inner dl .group02 dd {font-size: 20px;}

.company .tea-picking-experience p {margin-bottom: 40px; font-size: 20px;}
.company .tea-picking-experience .photo-list {margin-bottom: 50px; justify-content: space-between;}
.company .tea-picking-experience .photo-list li {width: 49%;}
.company .tea-picking-experience .photo-list li .img {width: 100%;}
.company .tea-picking-experience .youtube_movie-wrap .video-title {color: #333; font-size: 20px; margin-top: 30px;}

.company .recruit .inner p {margin-bottom: 40px; font-size: 20px;}
.company .recruit .inner .dt {margin-bottom: 20px; font-size: 20px;}
.company .recruit .inner dl .group {display: flex;}


/*--------------------------------------------------------------------------
お問い合わせ (contact.php)
--------------------------------------------------------------------------*/
.page:not(.home).page-id-38 #main-area:before {height: 600px; top: 0; background: url(../img/contact_bg_top_pc.jpg) center top; background-size: cover; z-index: 2;}
.page:not(.home).page-id-38 #main-area:after {height: 950px; background: url(../img/contact_bg_btm.jpg) center top; background-size: cover; z-index: 3;}
#contact h2 {margin-bottom: 50px;}
#contact form .group {margin-top: 50px;}
#contact p,
#contact form .group dt span,
#contact form .group dd {font-size: 20px;}
#contact form input[type="submit"] {font-size: 21px;}

/*--------------------------------------------------------------------------
プライバシーポリシー (privacy.php)
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
.error404 .search-form .search-submit {position: absolute; top: 43%; right: 10px;}

#notfound {padding: 140px 0 100px;}
#notfound h1 {font-size: 8.75em;}
#notfound h2 {font-size: 1.825em;}
#notfound p {font-size: 1rem; margin: 12px 0 100px;}
#notfound .link-to-top-page a {width: 177px;}

/*--------------------------------------------------------------------------
投稿 (single.php)
--------------------------------------------------------------------------*/
#post #single {padding: 140px 0}

/*--------------------------------------------------------------------------
投稿汎用要素
--------------------------------------------------------------------------*/
#single * {font-size: 1rem;}

#single h2 {margin: 50px 0 20px 0;}
#single h3 {margin: 45px 0 18px 0;}
#single h4 {margin: 40px 0 16px 0;}
#single h5 {margin: 35px 0 14px 0;}
#single h6 {margin: 30px 0 12px 0;}

#single h2:first-child {margin: 0 0 20px 0;}
#single h3:first-child {margin: 0 0 18px 0;}
#single h4:first-child {margin: 0 0 16px 0;}
#single h5:first-child {margin: 0 0 14px 0;}
#single h6:first-child {margin: 0 0 12px 0;}

#single h2 {font-size: 1.6rem;}
#single h3 {font-size: 1.45rem;}
#single h4 {font-size: 1.3rem;}
#single h5 {font-size: 1.15rem;}
#single h6 {font-size: 1rem;}
#single hr {margin: 60px 0;}

#single p {line-height: 1.75; margin: 0 0 30px 0;}


/*--------------------------------------------------------------------------
子テーマとしての調整
--------------------------------------------------------------------------*/
div#drawer-menu {height: 70px!important;}

/*応急措置*/
.main-navigation ul.sub-menu {max-height: 0; background: transparent!important; overflow: hidden; transition: 0.6s all ease;}
.main-navigation ul li.menu-item-has-children:hover > ul.sub-menu {max-height: 100vh; top: 112%!important; background: #14747c!important; opacity: 1;}
.main-navigation ul li#menu-item-75 ul.sub-menu {width: 216%; margin-left: -20%; padding: 15px 0 10px;}
.main-navigation ul li#menu-item-75 ul.sub-menu li a {width: 100%; padding: 5px 0 5px 34px!important;}
.main-navigation ul li#menu-item-147 ul.sub-menu {width: 290px;}
.main-navigation ul li#menu-item-147 ul.sub-menu li a {width: 100%; padding: 5px 0;text-align: center;}



.js .dropdown-toggle {width: 34px; top: 6%!important; pointer-events: none;}