@charset "utf-8";
/* CSS Document */
/*=========== モバイル ============*/
@media screen and (max-width: 820px) {
	#contents{
		margin: 0;
	}
}
@media screen and (min-width: 769px) {
  .sp_main {
    display: none !important;
  }
  .ul_sp {
    display: none !important;
  }
  .m_photo_sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  body {
    background: none;
  }
  /* main */
  .pc_main {
    display: none;
  }
  .t_logo {
    left: 8%;
    top: 10%;
    width: 50%;
  }
  h3 {
    text-align: center;
    font-size: 2em;
    font-weight: 400;
    margin-top: 10%;
  }
  /* nav */
  .nav_logo {
    max-width: 80px;
  }
  .menu_btn {
    width: 40px;
    height: 45px;
    position: fixed;
    overflow: visible;
    line-height: 13px;
    font-size: 1px;
    float: right;
    cursor: pointer;
    -webkit-transition: all 400ms ease-out 0ms;
    -moz-transition: all 400ms ease-out 0ms;
    -o-transition: all 400ms ease-out 0ms;
    transition: all 400ms ease-out 0ms;
    top: 30px;
    right: 10px;
    z-index: 999;
  }
  .menu_btn .line:nth-child(1) {
    top: 30px;
    z-index: 2;
  }
  .menu_btn .line:nth-child(2) {
    top: 45px;
    z-index: 2;
  }
  .menu_btn .line:nth-child(3) {
    top: 60px;
    z-index: 2;
  }
  .menu_btn .line {
    position: fixed;
    background-color: rgba(204, 204, 204, 0.5);
    overflow: hidden;
    z-index: 999;
    width: 40px;
    height: 5px;
    -webkit-transition: all 400ms ease-out 0ms;
    -moz-transition: all 400ms ease-out 0ms;
    -o-transition: all 400ms ease-out 0ms;
    transition: all 400ms ease-out 0ms;
    top: 30px;
    right: 10px;
  }
  nav.sp_menu {
    position: fixed;
    width: 90%;
    height: 50%;
    top: 0;
    background-color: transparent;
    z-index: 99;
    display: none;
  }
  nav.sp_menu ul {
    display: block;
    margin: 10% auto 10%;
    height: 50vh;
  }
  nav.sp_menu ul li {
    width: 100%;
    padding-right: 3%;
	padding-top: 5%;
  }
  .menu_overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #000;
    opacity: 0.95;
    z-index: -1;
  }
  /*メニューオープン時のクリックボタン */
  .btn_wrapper.clicked .menu_btn .line:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(45deg) !important;
    transform: translateY(20px) rotate(45deg) !important;
    -webkit-transition: all 400ms ease-out 0ms;
    -moz-transition: all 400ms ease-out 0ms;
    -o-transition: all 400ms ease-out 0ms;
    transition: all 400ms ease-out 0ms;
    background-color: #FFFFFF;
  }
  .btn_wrapper.clicked .menu_btn .line:nth-child(2) {
    opacity: 0;
    -webkit-transition: all 400ms ease-out 0ms;
    -moz-transition: all 400ms ease-out 0ms;
    -o-transition: all 400ms ease-out 0ms;
    transition: all 400ms ease-out 0ms;
  }
  .btn_wrapper.clicked .menu_btn .line:nth-child(3) {
    -webkit-transform: translateY(-20px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
    -webkit-transition: all 400ms ease-out 0ms;
    -moz-transition: all 400ms ease-out 0ms;
    -o-transition: all 400ms ease-out 0ms;
    transition: all 400ms ease-out 0ms;
    background-color: #FFFFFF;
  }
  /*===========================
	link_area
============================*/
  .bnr_bottomarea li, .bnr_bottomarea_story li {
    width: 60%;
    margin: 0 auto;
  }
  .bnr_bottomarea_story li dl dt {
    width: 70%;
  }
  /* footer */
  #footer {
    width: 100%;
    text-align: left;
    font-size: 1em;
    line-height: 2.2em;
    background-color: #F2F6F5;
  }
  #footer ul {
    width: 95%;
    margin: 5% auto 0;
    display: flex;
  }
  #footer ul.f_menu li {
    width: 100%;
    text-align: left;
    font-size: 1em;
	margin-bottom: 8%;  
  }
  .footer_bottom {
    display: block !important;
  }
  .footer_bottom li {
    margin-left: 0 !important;
    width: 100%;
  }
  #footer .flogo {
    width: 60%;
  }
  .sns a img {
    width: 40px;
  }
  .mail_ttl {
    font-size: 1.3em;
    font-weight: 700;
  }
  .mail_ttl::before {
    content: '';
    width: 20px;
    height: 20px;
  }
  .mail {
    padding-left: 30px;
    font-size: 1em;
  }
  /* topics */
  .topics {
    overflow-y: scroll;
    margin: 10px 1.5% 13%;
    width: 97%;
    height: 120px;
  }
  .topics ul {
    padding: 0 2%;
  }
  .topics ul li {
    text-align: left;
    padding: 1em 0;
    border-bottom: 1px solid #EFEFEF;
    margin: 0 2%;
  }
  .date {
    display: block;
    width: 150px;
  }
  .h2_icon img {
    margin: 0 auto;
    width: 50%;
  }
  .lead {
    font-size: 1.5em;
    font-weight: 700;
    padding: 1em 0;
  }
  .d_btn_f {
    margin: 5% 0;
  }
  a.d_btn {
    padding: 1% 3%;
    border: 1px #000 solid;
    border-radius: 3px;
    color: #000;
    width: 80%;
	margin: 0 10%;  
  }
  a.d_btn:hover {
    color: #000;
  }
  a.d_btn::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    content: '';
    background: none;
    transform: none;
  }
  a.d_btn:hover::before {
    transform-origin: left top;
    transform: none;
  }
  .m_photo1_pc, .m_photo2_pc, .m_bg {
    display: none;
  }
  .m_photo_sp {
    width: 100%;
    display: flex;
  }
  .m_photo_sp li {
    width: 50%;
  }
  /* food */
  .food {
    margin-top: 10%;
  }
  .food h2 {
    margin: 0 auto 30px;
  }
  .food ul, .food ul li {
    display: block;
    width: 100% !important;
  }
  .food li:first-child {
	  margin: 0;
	}
  .food li:last-child {
    margin: 5% auto;
  }
  .p_txt {
    width: 80%;
    margin: 0 auto;
  }
  /*==========================
	ABOUT
===========================*/
  .ul_pc {
    display: none !important;
  }
  .row1, .row2, .row3 {
    width: 100%;
    margin: 7% 0% 3%;
  }
  .row1 ul, .row2 ul {
    width: 100%;
    display: block;
  }
  .ar_ttl {
    font-size: 1.5em;
    font-weight: 700;
    color: #FFF;
    background: #000;
    width: 60%;
    margin: 0 20% 5%;
  }
  .ar_txt {
    width: 80%;
    margin: 0 10% 5%;
    font-size: 1.1em;
    line-height: 2.5;
  }
  .row1 ul li:first-child, .row2 ul li:last-child {
    width: 100%;
  }
  .row1 ul li:last-child, .row2 ul li:first-child {
    width: 100%;
  }
  .row1 ul li img, .row2 ul li img {
    width: 60%
  }
  /*==========================
	GREEN TEA
===========================*/
  .f_img_area {
    height: auto;
  }
  .howtea_ttl {
    width: 50%;
    max-width: 558px;
  }
  .howtea ul {
    flex-wrap: wrap;
    width: 80%;
    margin: 0 10%;
  }
  .howtea ul li {
    width: 45%;
    padding: 1% 1%;
    border: 1px solid #FFFFFF;
    margin: 1% 2.5% 4%;
    text-align: left;
  }
  .point_txt {
    width: 80% !important;
  }
/*========================
	MIKAN
=========================*/
	.sec_story {
		flex-direction: column;
	}
	.sec_storyImage{
	width: 100%;
	}
	.sec_project {
		width: 80%;
		margin: 15% 10%;
	}
}

@media screen and (min-width: 601px) {
	.pc_none{
		display: none;
	}
}
@media screen and (max-width: 600px) {
	.sp_none{
		display: none;
	}	
  body {
    font-size: 12px;
    letter-spacing: 0.05em;
  }
  .t_logo {
    left: 3%;
    top: 3%;
    width: 60%;
  }
  .h_logo {
    margin-left: 3%;
  }
  /* wrapper */
  #wrapper, #wrapper2 {
    padding: 0 0 0 0;
    margin: auto;
    position: relative;
    min-width: 0px;
  }
  /*.d_btn_f {
    display: grid;
  }
  /* massage */
  .lead {
    font-size: 1.4em;
  }
  /*=========================
	nav
=========================*/
  .menu_overlay {
    height: 100%;
  }
  /* scroll bar */
  nav.sp_menu ul::-webkit-scrollbar {
    width: 5px;
  }
  /*===========================
	link_area
============================*/
  .bnr_bottomarea, .bnr_bottomarea_story {
    display: block;
  }
  .bnr_bottomarea li, .bnr_bottomarea_story li {
    width: 90%;
    margin: 5% auto 0;
  }
  .bnr_bottomarea_story li dl dt {
    width: 70%;
  }
  /*=========================
	footer
=========================*/
  #footer ul.f_menu {
    padding-left: 100px;
    display: block;
    margin: 0;
    padding: 0 10%;
  }
  #footer ul.f_menu {
    display: block;
    padding: 3% 7%;
  }
  .f_subheading {
    display: block;
  }
  /*=========================
	ABOUT
==========================*/
  .h_logo {
    width: 40%
  }
  .a_tarea p {
    width: 80%;
    margin: 0 10%;
  }
  .a_ttl {
    margin: 0 5% 0;
    font-size: 2em;
  }
  .ar_txt {
    width: 80%;
    margin: 0 10% 5%;
    font-size: 1em;
    line-height: 2;
  }
  .row1 ul li img, .row2 ul li img {
    width: 100%
  }

	
  /*========================
	GREEN TEA
=========================*/
  .ar_ttl {
    width: 80%;
    margin: 6% auto 10%;
    font-size: 1.4em;
  }
  .howtea ul li:last-child {
    margin-bottom: 10%;
  }
  .howtea_ttl {
    width: 90%;
  }
  .howtea ul li {
    width: 100%;
    padding: 1% 1%;
    border: 1px solid #FFFFFF;
    margin: 1% 2.5% 4%;
    text-align: left;
  }
  .howtea ul li dl dd {
    width: 40%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 374px) {
  body {
    font-size: 11px;
  }
}
@media screen and (min-width: 471px) and (max-width: 1280px) {
  body {
    font-size: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1680px) {
  .f_img_area {
    height: auto;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1300px) {
  body {
    font-size: 12.18px;
  }
}
@media screen and (min-width: 1301px) and (max-width: 1325px) {
  body {
    font-size: 12.36px;
  }
}
@media screen and (min-width: 1326px) and (max-width: 1350px) {
  body {
    font-size: 12.54px;
  }
}
@media screen and (min-width: 1351px) and (max-width: 1375px) {
  body {
    font-size: 12.72px;
  }
}
@media screen and (min-width: 1376px) and (max-width: 1400px) {
  body {
    font-size: 12.9px;
  }
}
@media screen and (min-width: 1401px) and (max-width: 1425px) {
  body {
    font-size: 13.08px;
  }
}
@media screen and (min-width: 1426px) and (max-width: 1450px) {
  body {
    font-size: 13.26px;
  }
}
@media screen and (min-width: 1451px) and (max-width: 1475px) {
  body {
    font-size: 13.44px;
  }
}
@media screen and (min-width: 1476px) and (max-width: 1500px) {
  body {
    font-size: 13.62px;
  }
}
@media screen and (min-width: 1501px) and (max-width: 1525px) {
  body {
    font-size: 13.8px;
  }
}
@media screen and (min-width: 1526px) and (max-width: 1550px) {
  body {
    font-size: 13.98px;
  }
}
@media screen and (min-width: 1551px) and (max-width: 1575px) {
  body {
    font-size: 14.16px;
  }
}
@media screen and (min-width: 1576px) and (max-width: 1600px) {
  body {
    font-size: 14.34px;
  }
}
@media screen and (min-width: 1601px) and (max-width: 1625px) {
  body {
    font-size: 14.52px;
  }
}
@media screen and (min-width: 1626px) and (max-width: 1650px) {
  body {
    font-size: 14.7px;
  }
}
@media screen and (min-width: 1651px) and (max-width: 1675px) {
  body {
    font-size: 14.88px;
  }
}
@media screen and (min-width: 1676px) and (max-width: 1700px) {
  body {
    font-size: 15px;
  }
  .t_logo {
    position: absolute;
    left: 25%;
    top: 130px;
    width: 00%;
    z-index: 2;
  }
}