@charset "UTF-8";
html,
body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif; }

html .mincho,
body .mincho {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, serif;
  font-weight: bold; }

body {
  position: relative; }

@media (min-width: 768px) {
  body {
    font-size: 1.25rem; } }
img {
  width: 100%;
  height: auto; }

/* 非表示 */
@media (max-width: 767px) {
  .visible_sp {
    display: block; }

  .visible_pc {
    display: none; } }
@media (min-width: 768px) {
  .visible_sp {
    display: none; }

  .visible_pc {
    display: block; } }
/*
* BUTTON
******************************************************/
.button__wrapper {
  margin: 25px 0 40px; }

/* list button */
.list-button {
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
  position: relative; }

.list-button a {
  text-align: center;
  text-decoration: none;
  display: block;
  color: #323232;
  border: 2px solid #323232;
  padding: 11px 0 8px 0;
  transition: all 0.3s; }

.list-button a:hover {
  text-align: center;
  text-decoration: none;
  display: block;
  color: #922E41;
  border: 2px solid #922E41;
  padding: 11px 0 8px 0;
  background-color: #FFF; }

.list-button a::before {
  position: absolute;
  display: block;
  content: '';
  width: 30px;
  height: 2px;
  background-color: #323232;
  top: 50%;
  right: 30px;
  margin: 0;
  transition: .2s; }

.btn-arrow {
  position: relative;
  padding-right: 60px; }

.button-arrow::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 2px #323232;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 32px;
  margin-top: -4px;
  transition: .2s; }

.button-arrow:hover:before {
  width: 30px;
  right: 10px;
  color: #323232; }

.button-arrow:hover:after {
  right: 12px;
  color: #323232; }

/*
* animation
******************************************************/
.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s; }

.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px); }

/*
* base CSS
******************************************************/
.txt_4r {
  font-size: 4em; }

.txt_3r {
  font-size: 3em; }

.txt_2r {
  font-size: 2em; }

.txt_center {
  text-align: center; }

.txt_left {
  text-align: left; }

.txt_rigth {
  text-align: right; }

.button a {
  font-size: 1em; }

h2,
h3,
h4,
h5,
h6 {
  text-align: center; }

th {
  width: 10em;
  font-weight: 400; }

span.br {
  display: block; }

.ph_caption {
  font-size: .75em;
  text-align: center; }

/* link color */
a {
  color: #bc1339; }

.button a, header a, footer a {
  color: #333; }

a:hover {
  color: #bc1339; }

/* kagetsu & TOMO base color */
.txt_kgt {
  color: #922E41; }

.bg_kgt {
  background-color: #922E41; }

.txt_tomo-red {
  color: #b64e42; }

.bg_tomo-red {
  background-color: #b64e42; }

.txt_tomo-blue {
  color: #00406a; }

.bg_tomo-blue {
  background-color: #00406a; }

.txt_tomo-yellow {
  color: #f1cf00; }

.bg_tomo-yellow {
  background-color: #f1cf00; }

.txt_tomo-brown {
  color: #7e624b; }

.bg_tomo-brown {
  background-color: #7e624b; }

.txt_color-wh {
  color: #FFF; }

/* common */
.sec_block {
  padding-top: 3em;
  padding-bottom: 3em; }

.sec_block_out {
  margin-top: 3em;
  margin-bottom: 3em; }

/* googlemap */
.googlemap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative; }

.googlemap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%; }

.copyright {
  background-color: #efefef; }
  .copyright a {
    text-decoration: underline; }
  .copyright h2 {
    font-size: .75rem;
    padding-top: 16px;
    margin-bottom: 0;
    font-weight: 400; }

/* header */
#block_header {
  opacity: 1; }

#block_logo {
  position: absolute;
  top: 0;
  z-index: 1000; }

#block_logo img {
  width: 70px;
  max-width: 70px;
  height: auto;
  margin-top: 15px;
  margin-left: 10px; }

@media (min-width: 769px) {
  #block_logo img {
    width: 110px;
    max-width: 110px;
    height: auto;
    margin-left: 30px;
    margin-top: 25px; } }
a.logo_img img {
  margin: 10px 0 0 10px;
  width: 72px;
  height: auto; }

/*-----------------------------
menu*/
.menu {
  height: 20px;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  z-index: 9999; }

.menu__line {
  background: #000;
  display: block;
  height: 2px;
  position: absolute;
  transition: transform .3s;
  width: 100%; }

.menu__line--center {
  top: 9px; }

.menu__line--bottom {
  bottom: 0; }

.menu__line--top.active {
  top: 8px;
  transform: rotate(45deg); }

.menu__line--center.active {
  transform: scaleX(0); }

.menu__line--bottom.active {
  bottom: 10px;
  transform: rotate(135deg); }

/*gnav*/
.gnav {
  background: rgba(255, 255, 255, 0.9);
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9998; }

.gnav__wrap {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%; }

.gnav__menu__item {
  margin: 40px 0; }

.gnav__menu__item a {
  color: #333;
  font-size: 1.5em;
  font-weight: bold;
  padding: 40px;
  text-decoration: none;
  transition: .5s; }

.gnav__menu__item a:hover {
  color: #666; }

.SP_nav_menu a.menu {
  position: fixed;
  top: 20;
  right: 20; }

/*.gnav__menu__item li*/
li.gnav__menu__item,
.PC_nav_menu li {
  list-style-type: none; }

/*.menu .gnav PC bisiblty */
@media (min-width: 768px) {
  .menu {
    display: none; } }
@media (max-width: 767px) {
  .PC_nav_menu {
    display: none; } }
.PC_nav_menu {
  position: absolute;
  /* fixed;*/
  top: 0;
  right: 0;
  width: auto;
  z-index: 9998; }

.PC_nav_menu ul {
  display: flex; }

.PC_nav_menu li {
  font-size: 1em;
  padding-top: 20px; }

.PC_nav_menu li:after {
  content: '/'; }

.PC_nav_menu li:last-child:after {
  content: none; }

.PC_nav_menu li a {
  color: #000;
  padding-right: 10px;
  padding-left: 10px; }

.PC_nav_menu li a:hover,
.PC_nav_menu li a:active {
  color: #999;
  text-decoration: none; }

/* footer_info */
.footer_nav {
  padding: 10px 0;
  font-size: .75em; }
  .footer_nav ul.footer_nav_menu {
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center; }
    .footer_nav ul.footer_nav_menu li {
      list-style-type: none;
      padding-right: 20px;
      padding-left: 20px; }

.footer_info {
  text-align: center;
  margin-top: 1em; }

.footer_info h2 {
  font-size: 1em;
  font-weight: 400; }

.footer_info h3,
.footer_info p {
  font-size: .9em;
  font-weight: 400; }

.footer_info .address {
  font-size: .85rem;
  letter-spacing: .1rem; }

.footer_info a {
  text-decoration: underline; }

/* 
brand_tomo */
.brand_copy {
  margin-bottom: 2em; }

.brand_tomo h2 {
  margin-top: 100px; }

.brand_tomo h2 img {
  max-width: 200px;
  height: auto; }

.brand_tomo .copy01 {
  font-size: 2.4em;
  margin-left: 1rem; }

.brand_tomo .copy04 {
  margin-top: 2em; }

@media (min-width: 768px) {
  .brand_copy {
    margin-bottom: 6em; }

  .brand_tomo h2 {
    margin-top: 300px; }

  .brand_tomo h2 img {
    max-width: 40%;
    height: auto; }

  .brand_tomo .copy01 {
    font-size: 4.4em; }

  .brand_tomo .copy04 {
    margin-top: 6em; } }
.brand_tomo .copy02 {
  font-weight: 400; }

/*brand_tomo bg*/
.brand_tomo {
  background-image: url(../images/tomo_dr.jpg), url(../images/tomo_momigara.png), url(../images/tomo_kome.png);
  background-repeat: no-repeat;
  background-size: 52%, 18%, 46%;
  background-position: 0 0, left 320px, right 10px; }

@media (min-width: 768px) {
  .brand_tomo {
    background-size: 40%, 16%, 38%;
    background-position: 0 0, left 496px, right 20px; } }
@media (min-width: 768px) {
  .bg_kstr {
    background: transparent url(../images/tomo_ks.jpg) no-repeat top right;
    background-size: contain; } }
/*
kokoro */
.kokoro {
  background: transparent url(../images/bg_kokoro2.jpg) no-repeat top center;
  background-size: cover; }

.bg_kamon {
  background: transparent url(../images/logo_mon.svg) no-repeat top center;
  background-size: auto 90%;
  opacity: .7; }

.kokoro h2 {
  font-weight: 400; }

.bg_kamon h3 {
  padding: 2em 0;
  font-weight: 400;
  margin-top: 1em; }

.history_kagetsu {
  background-color: rgba(255, 255, 255, 0.8);
  padding-bottom: 2em; }
  .history_kagetsu table th {
    width: 10em;
    font-weight: 400;
    vertical-align: top;
    letter-spacing: .1rem; }

.history_kagetsu table th,
.history_kagetsu table td {
  font-size: .8em;
  padding: 8px 0; }

.history_kagetsu h3 {
  padding: 1.6em 0 1em 0;
  margin: 1em auto .8em auto; }

.history_kagetsu .shopinfo {
  font-size: 1rem;
  margin-top: 3em;
  border-left: 1px solid #666;
  padding-left: 20px; }

.shopinfo .address {
  letter-spacing: .1rem; }

/* product */
.product {
  background: transparent url(../images/prd_bg.jpg) no-repeat 0 -100px;
  background-size: 100%; }

@media (max-width: 767px) {
  .product {
    background: transparent url(../images/prd_bg.jpg) no-repeat top center; } }
.product img.logo_tomo_svg {
  max-height: 108px;
  width: auto; }

.product h1 {
  text-align: center;
  font-size: 28px; }

@media (max-width: 767px) {
  .product h1 {
    font-size: 18px; } }
.product .logo_tomo {
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 100px; }

@media (max-width: 767px) {
  .product .logo_tomo {
    padding-top: 60px;
    padding-bottom: 60px; } }
.product .logo_tomo02 {
  text-align: center; }

.product .logo_tomo02 img {
  margin-bottom: 60px; }

.prd_item {
  background-color: #FFF;
  padding-top: 2rem; }

.prd_name img {
  width: 60%;
  height: auto; }

@media (max-width: 767px) {
  .product .item_dryk h2.prd_name img {
    max-height: 28px;
    width: auto; }

  .product .item_kstr h2.prd_name img {
    max-height: 24px;
    width: auto; } }
.product h2.prd_name {
  text-align: left; }

.prd_item_ph {
  text-align: center;
  padding-top: 10px; }

.prd_item_ph img {
  max-height: 260px;
  width: auto; }

@media (max-width: 767px) {
  .item_kstr {
    margin-top: 4em; } }
@media (max-width: 767px) {
  .item_dryk .prd_item_ph img {
    max-width: 260px;
    height: auto; } }
.prd_item_stt {
  max-height: 58px;
  width: auto;
  text-align: right; }

dl.type_dryk,
dl.type_kstr {
  display: flex;
  margin-bottom: 0; }
  dl.type_dryk dt,
  dl.type_kstr dt {
    display: flex-box; }
    dl.type_dryk dt img,
    dl.type_kstr dt img {
      max-width: 20px;
      height: auto;
      margin-right: 6px;
      margin-bottom: 4px; }
  dl.type_dryk dd,
  dl.type_kstr dd {
    display: flex-box;
    margin-bottom: 0; }

.product .material_info {
  margin-top: 1em;
  font-size: .9rem; }

.product .lineup {
  border-top: 1px dotted #bbb;
  border-bottom: 1px dotted #bbb;
  padding: .8em 0; }

/* concept */
.concept {
  background: transparent url(../images/bg_kojocho.jpg) no-repeat top center;
  background-size: cover; }

.concept h2 {
  margin-top: 80px;
  margin-bottom: 80px; }

.concept h3 {
  margin-top: 2em;
  text-align: left; }

.logo_tomo03 {
  background-color: #fff;
  padding: 80px 40px; }

.logo_tomo03 img {
  max-height: 150px; }

/* material */
.material h2 img {
  max-height: 120px;
  width: auto;
  margin-top: 140px;
  margin-bottom: 100px; }

@media (max-width: 767px) {
  .material h2 img {
    max-height: 60px;
    width: auto;
    margin-top: 70px;
    margin-bottom: 50px; } }
.material h3 {
  text-align: left;
  position: relative;
  margin-bottom: 2rem;
  margin-top: 6rem; }

.material .mtr01 h3 {
  margin-top: 2rem; }

.material h3 span.number {
  display: block;
  position: absolute;
  top: -48px;
  left: 0; }

.material h3 span.number img {
  max-height: 108px;
  width: auto;
  opacity: .5; }

.material .mtr01 figure {
  text-align: center; }

.material .mtr01 img {
  max-width: 380px;
  height: auto; }

.material .mtr03 .saibaimai {
  font-size: .8em;
  margin-top: 2em; }

.material .mtr03 figure {
  text-align: center; }

@media (max-width: 767px) {
  .farmer {
    max-height: 320px;
    width: auto; } }
/* making */
.bg_mkg_bg {
  background: transparent url(../images/bg_mrk02.jpg) no-repeat left top;
  background-size: cover; }

.making {
  background-color: #e2dad2;
  margin-top: 2em; }

.making .sec_block {
  padding-top: 0; }

.making h2 img {
  max-height: 120px;
  width: auto;
  margin-top: 140px;
  margin-bottom: 100px; }

@media (max-width: 767px) {
  .making h2 img {
    max-height: 60px;
    width: auto;
    margin-top: 70px;
    margin-bottom: 60px; } }
@media (max-width: 767px) {
  .mkg_detail_dryk {
    margin-top: 2em; } }
/* main_slider */
.area_slide {
  /*    width: 100vw;
  height: 100vh;*/
  overflow-x: hidden;
  position: relative;
  /* z-index: 99!important;*/
  margin-bottom: -8px;
  /* ＊ */ }

.mainslider {
  opacity: 0;
  transition: 3s; }

.slick-initialized {
  opacity: 1; }

.area_slide .mainslider img {
  width: 100vw;
  height: 100vh; }

.slider_fixedlogo {
  position: absolute;
  bottom: 60px;
  right: 10px; }

.slider_fixedlogo img {
  max-height: 280px;
  width: auto; }

@media (min-width: 768px) {
  .slider_fixedlogo img {
    max-height: 400px; } }
.object-fit-img {
  object-fit: cover;
  /* object-position: bottom;*/
  font-family: "object-fit: cover; object-position: bottom;"; }

.pagetop {
  display: none;
  position: fixed;
  bottom: 0px;
  right: 10px; }

.pagetop a {
  display: block;
  background-color: #efefef;
  text-align: center;
  color: #333;
  font-size: .6875em;
  text-decoration: none;
  padding: 20px 25px;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5; }

@media (max-width: 767px) {
  .pagetop a {
    padding: 15px 20px; } }
/* thumbnail photogallery */
.mainImage img, .mainImage02 img {
  text-align: center; }

.thumbnails, .thumbnails02 {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center; }

.thumbnails img, .thumbnails02 img {
  display: block;
  width: 80px;
  height: auto;
  border: 1px solid #CCC;
  margin-right: 4px; }

.thumbnails img.active, .thumbnails02 img.active {
  border: 1px solid #ff0000; }

/* facebook */
.facebook {
  border-top: 1px solid #000;
  text-align: center; }

.fb-container {
  margin: 0 auto; }

/* スマホ用 */
@media screen and (max-width: 767px) {
  .fb-container .fb-page {
    width: 100%;
    max-width: 500px; } }
/* PC用 */
@media screen and (min-width: 768px) {
  .fb-container .fb-page {
    width: 500px; } }

/*# sourceMappingURL=sitestyle.css.map */