@charset "UTF-8";
:root {
  --mc: #586642;
}

#about .timeline div {
  display: inline;
}

@media screen and (max-width: 1280px) {
  #about .row1 .left img {
    width: 100%;
    height: auto;
    left: revert;
  }
  #about .row2 .right img {
    width: 100%;
    height: auto;
    right: revert;
  }
  #about .row2 .right img:last-child {
    display: none;
  }
}
@media screen and (max-width: 1100px) {
  #policy .crop_R {
    width: 100%;
    padding-right: 0;
  }
  #store .crop_R {
    width: 100%;
    max-width: 1030px;
  }
  #store .row .left, #store .row .right {
    width: 48.5%;
  }
  #store .info {
    overflow: hidden;
    height: revert;
    padding-bottom: 40vw;
    background-size: 100% auto;
  }
}
@media screen and (min-width: 1024px) {
  #hb_menu {
    display: none !important;
  }
  .gnav {
    display: block !important;
  }
}
@media screen and (max-width: 1023px) {
  .pc_only {
    display: none !important;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  .box {
    box-sizing: border-box;
    width: 100%;
    max-width: 980px;
    padding-left: 4%;
    padding-right: 4%;
  }
  #side {
    width: 5.5vw;
  }
  #gnavbox {
    height: auto;
  }
  #index_header {
    padding-bottom: 0;
  }
  header {
    margin-top: 22px;
    padding-bottom: 12px;
  }
  #hb_menu {
    z-index: 100002;
    position: fixed;
    right: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background: var(--mc);
    padding: 21px 17px 0;
    cursor: pointer;
  }
  #hb_menu span {
    height: 2px;
    background: #fff;
    display: block;
    margin-bottom: 5px;
    transition: 0.4s ease;
  }
  #hb_menu.open {
    background: #aaa;
  }
  #hb_menu.open span:nth-child(1) {
    transform: translate(0, 8px) rotate(45deg);
  }
  #hb_menu.open span:nth-child(2) {
    opacity: 0;
  }
  #hb_menu.open span:nth-child(3) {
    transform: translate(0, -6px) rotate(-45deg);
  }
  .gnav {
    display: none;
    position: fixed;
    width: 100%;
    z-index: 100001;
    top: 0;
    left: 0;
    padding-bottom: 0;
  }
  .gnav .inr {
    width: 100%;
    max-width: 980px;
  }
  .gnav ul {
    margin-bottom: 0;
  }
  .gnav ul li {
    border-left: none;
    border-bottom: solid 1px var(--mc);
    float: revert;
    width: revert;
  }
  .gnav ul li a {
    display: block;
    padding: 20px;
  }
  .gnav ul li.last {
    border-right: none;
    width: revert;
  }
  footer {
    height: revert;
  }
  footer .left {
    float: none;
    text-align: center;
  }
  footer .right {
    float: none;
  }
  #fnav .inr {
    width: 100%;
  }
  #fnav ul {
    height: revert;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-wrap: wrap;
    padding: 40px 0;
    gap: 20px;
  }
  #fnav ul li {
    line-height: 1;
    float: revert;
    margin: 0;
  }
  #index_header {
    height: auto;
  }
  #index_header .txt img, #index_header .logo img {
    width: 100%;
  }
  #index_header .txt {
    text-align: center;
    margin-left: revert;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80vw;
    top: 20vw;
  }
  #index_header .txt img {
    max-width: 100%;
    height: auto;
  }
  #index_header .logo {
    text-align: center;
    margin-left: revert;
    left: 50%;
    transform: translate(-50%, 0);
    width: 30vw;
    top: 30vw;
  }
  #index_header ul li {
    height: 60vw;
  }
  #index .box .inr {
    width: 100%;
    max-width: 880px;
  }
  #index .passion {
    margin-bottom: 80px;
    padding-top: 50px;
    height: auto;
    display: flex;
    justify-content: space-between;
  }
  #index .passion .txt, #index .passion .img {
    float: revert;
    width: revert;
  }
  #index .passion .txt {
    width: 60%;
  }
  #index .passion .txt img {
    margin-bottom: 30px;
  }
  #index .passion .img {
    width: 38%;
    right: auto;
  }
  #index .passion .img img {
    width: 100%;
  }
  #index .policy {
    position: relative;
    height: auto;
    margin-bottom: 80px;
  }
  #index .policy h3, #index .policy .inr {
    float: revert;
  }
  #index .policy h3 {
    position: absolute;
    left: 4%;
    top: 0;
    width: 8vw;
  }
  #index .policy .row {
    height: auto;
    display: grid;
    right: auto;
    padding-left: 10vw;
  }
  #index .policy .column {
    float: revert;
    width: auto;
    margin-right: 0;
    display: flex;
    align-items: center;
    gap: 0 30px;
  }
  #index .policy .column .img {
    width: 30%;
  }
  #index .policy .column p {
    width: 58%;
    padding-right: 0;
  }
  #index .rice {
    position: relative;
    height: auto;
    padding-bottom: 80px;
    margin-bottom: 80px;
  }
  #index .rice h3, #index .rice .inr {
    float: revert;
  }
  #index .rice .inr {
    padding-left: 8vw;
  }
  #index .rice .inr .row {
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: space-between;
  }
  #index .rice .inr .left, #index .rice .inr .right {
    width: 48%;
    position: revert;
  }
  #index .rice h3 {
    position: absolute;
    left: 4%;
    top: 0;
    width: 8vw;
  }
  #index .rice .txt {
    color: #fff;
    text-align: left;
  }
  #index .news {
    position: relative;
    padding: 0 4%;
    z-index: revert;
  }
  #index .news h3, #index .news .inr {
    float: revert;
  }
  #index .news .inr {
    padding-left: 8vw;
    padding-top: 0;
  }
  #index .news .inr .left, #index .news .inr .right {
    float: revert;
    margin: 0 auto;
  }
  #index .news .inr .left {
    margin-bottom: 50px;
  }
  #index .news h3 {
    position: absolute;
    left: 4%;
    top: 0;
    width: 8vw;
  }
  #index .cook {
    position: relative;
    padding: 0 4%;
    height: auto;
    margin-bottom: 80px;
  }
  #index .cook h3, #index .cook .inr {
    float: revert;
  }
  #index .cook .inr {
    padding-left: 8vw;
    padding-top: 0;
  }
  #index .cook .column {
    width: auto;
    margin-right: 0;
  }
  #index .cook .column.last {
    float: revert;
  }
  #index .cook h3 {
    position: absolute;
    left: 4%;
    top: 0;
    width: 8vw;
  }
  #index .cook .btn {
    float: revert;
    text-align: center;
  }
  #index .blog {
    position: relative;
    padding: 0 4%;
    height: auto;
    margin-bottom: 20px;
    z-index: revert;
  }
  #index .blog h3, #index .blog .inr {
    float: revert;
  }
  #index .blog .inr {
    padding-left: 8vw;
    padding-top: 0;
  }
  #index .blog h3 {
    position: absolute;
    left: 4%;
    top: 0;
    width: 8vw;
  }
  #index .blog .post {
    height: auto;
    display: flex;
    justify-content: space-between;
  }
  #index .blog .post .img {
    position: relative;
    width: 30%;
  }
  #index .blog .post .img .frame {
    width: 100%;
    height: 100%;
  }
  #index .blog .post .img .frame a:hover {
    background-size: cover;
    font-size: 0;
    line-height: 1;
  }
  #index .blog .post .img img {
    width: 100%;
    border-radius: 50%;
  }
  #index .blog .post .text {
    width: 68%;
  }
  #breadcrumb .inr {
    width: 100%;
    max-width: 980px;
  }
  #breadcrumb .inr h2 {
    height: 90px;
    background-size: auto 30px;
  }
  #about .crop_R, #about .crop_L {
    height: auto;
  }
  #about .box.row1, #about .box.row2 {
    height: auto;
    display: flex;
    justify-content: space-between;
  }
  #about .box.row1 .left, #about .box.row1 .right, #about .box.row2 .left, #about .box.row2 .right {
    float: revert;
    width: 48%;
    padding-top: 0;
  }
  #about .box.row1 .left p, #about .box.row1 .right p, #about .box.row2 .left p, #about .box.row2 .right p {
    font-size: 15px;
  }
  #about .box.row1 {
    margin-bottom: 60px;
  }
  #about .box.row2 {
    margin-bottom: 80px;
  }
  #about .info {
    overflow: hidden;
    height: auto;
    background-size: 100% auto;
    padding-bottom: 42vw;
  }
  #about .staff {
    margin-bottom: 80px;
  }
  #about .staff .wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  #about .staff .wrapper .img {
    width: auto;
    float: revert;
    margin: 0;
  }
  #about .staff .wrapper .name {
    padding-right: 0;
  }
  #about .grandma {
    display: flex;
    justify-content: space-between;
    gap: 0 30px;
  }
  #about .grandma .txt, #about .grandma .img {
    width: auto;
    float: revert;
    margin: 0;
  }
  #product #mainproduct .row:nth-child(1) .img, #product #mainproduct .row:nth-child(1) .txt, #product #mainproduct .row:nth-child(2) .img, #product #mainproduct .row:nth-child(2) .txt {
    float: revert;
    width: 100%;
    margin-bottom: 20px;
  }
  #product #mainproduct .row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
  }
  #product #mainproduct .row:nth-child(3) .column {
    width: 31%;
    margin-right: 3%;
  }
  #product #mainproduct + div {
    padding: 0 4%;
  }
  #product .original .row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    gap: 0 30px;
  }
  #product .original .row h3 {
    width: 100%;
    text-align: center;
  }
  #product .original .row .column {
    margin-right: 0;
  }
  #product .original .design {
    width: 100%;
  }
  #product .voice {
    padding: 60px 4% 0;
  }
  #product .voice .row .column {
    margin: 0;
    float: revert;
    width: 100%;
  }
  #product .voice .row .column:nth-child(1) {
    gap: 0 20px;
    display: flex;
  }
  #product .voice .row .column img {
    margin-top: 0;
  }
  #policy .left, #policy .right {
    float: revert;
  }
  #policy .row h3 {
    width: revert;
  }
  #policy .row:has(.txt.left) {
    flex-direction: row-reverse;
  }
  #policy .row:has(.txt) {
    display: flex;
    justify-content: space-between;
  }
  #policy .row:has(.txt) > div {
    width: 42%;
  }
  #policy .row:has(.txt) > div:has(p) {
    width: 55%;
  }
  #policy .crop_R, #policy .crop_L {
    padding: 0;
    width: revert;
    height: auto;
    display: flex;
    justify-content: space-between;
    left: revert;
    right: revert;
  }
  #policy .crop_R .right {
    width: 10%;
  }
  #policy .crop_R .left {
    width: 85%;
  }
  #policy .crop_L .left {
    width: 10%;
  }
  #policy .crop_L .right {
    width: 85%;
  }
  #term {
    position: relative;
  }
  #term h3 {
    float: revert;
    position: absolute;
    left: 4%;
    top: 0;
    width: 8vw;
  }
  #term .inr {
    padding-top: 0;
    float: revert;
    width: revert;
    padding-left: 10vw;
  }
  #term .border {
    width: revert;
  }
  #blog #sidebar {
    width: 24%;
  }
  #blog #main {
    width: 72%;
  }
}
@media screen and (min-width: 768px) {
  .sp_only {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #side {
    width: 36px;
    height: auto;
  }
  #gnavbox {
    height: auto;
  }
  .footer_bn {
    padding: 0 4%;
  }
  #facebook {
    width: 200px;
    left: 20px;
  }
  footer .logo img {
    max-width: 200px;
  }
  footer .tel {
    height: auto;
  }
  footer .tel .phone {
    margin-right: 0;
  }
  #copyright {
    font-size: 12px;
  }
  #index_header .txt {
    width: 90vw;
    top: 30vw;
  }
  #index_header img {
    max-width: 100%;
    height: auto;
  }
  #index_header .logo {
    width: 50vw;
    top: 48vw;
  }
  #index_header ul {
    height: 100vw;
  }
  #index_header ul li {
    height: 100vw;
  }
  #index .passion {
    display: block;
    padding-top: 0;
  }
  #index .passion .txt, #index .passion .img {
    display: block;
    width: 100%;
  }
  #index .passion .txt img {
    display: block;
    max-width: 60vw;
    margin: 0 auto 5px;
  }
  #index .passion .txt p {
    margin-bottom: 30px;
  }
  #index .policy {
    padding-left: 4%;
  }
  #index .policy h3 {
    position: revert;
    margin: 0 auto 20px;
    width: 11vw;
  }
  #index .policy .row {
    padding-left: 0;
    gap: 40px 0;
  }
  #index .policy .column {
    display: block;
  }
  #index .policy .column .img, #index .policy .column p {
    width: 100%;
  }
  #index .policy .column .img {
    text-align: center;
  }
  #index .rice {
    padding: 60px 0;
  }
  #index .rice .inr {
    padding: 0;
  }
  #index .rice .inr .row {
    margin-bottom: 0;
    display: grid;
    gap: 20px 0;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }
  #index .rice .inr .row .left, #index .rice .inr .row .right {
    width: 100%;
  }
  #index .rice h3 {
    position: revert;
    margin: 0 auto 20px;
    width: 11vw;
  }
  #index .news {
    position: relative;
    margin-bottom: 60px;
  }
  #index .news .inr {
    padding-left: 0;
  }
  #index .news .inr .left, #index .news .inr .right {
    width: 100%;
  }
  #index .news h3 {
    position: revert;
    margin: 0 auto 40px;
    width: 11vw;
  }
  #index .news .border {
    border: none;
    padding: 0;
  }
  #index .news .left img, #index .news .right img {
    width: auto;
    height: 20px;
    margin-bottom: 10px;
  }
  #index .news .right .btn {
    float: revert;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  #index .news .right .btn img {
    width: 100%;
    height: auto;
  }
  #index .cook {
    position: relative;
    margin-bottom: 60px;
  }
  #index .cook .inr {
    padding-left: 0;
  }
  #index .cook .inr .left, #index .cook .inr .right {
    width: 100%;
  }
  #index .cook h3 {
    position: revert;
    margin: 0 auto 40px;
    width: 11vw;
  }
  #index .cook .column {
    text-align: center;
    margin-bottom: 20px;
  }
  #index .cook p {
    padding-top: 10px;
    text-align: left;
  }
  #index .cook .btn {
    margin-top: 20px;
  }
  #index .blog {
    position: relative;
    margin-bottom: 60px;
  }
  #index .blog .inr {
    padding-left: 0;
    display: grid;
    gap: 40px 0;
  }
  #index .blog .inr .left, #index .blog .inr .right {
    width: 100%;
  }
  #index .blog h3 {
    position: revert;
    margin: 0 auto 40px;
    width: 11vw;
  }
  #index .blog .post {
    display: block;
  }
  #index .blog .post .img, #index .blog .post .text {
    float: revert;
    width: 100%;
  }
  #index .blog .post .img {
    width: 190px;
    margin-left: auto;
    margin-right: auto;
  }
  #index .blog .post .text .ttl {
    line-height: 1.6;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  #index .blog .post .text .ttl .date {
    float: revert;
    display: block;
    margin-top: 5px;
  }
  #index .blog .post .text p {
    margin-bottom: 0;
  }
  #index .blog .post .btn {
    float: revert;
    text-align: right;
  }
  #breadcrumb .inr h2 {
    background-size: auto 22px;
    height: 70px;
  }
  #about .box.row1, #about .box.row2 {
    flex-wrap: wrap;
  }
  #about .box.row1 .left, #about .box.row1 .right, #about .box.row2 .left, #about .box.row2 .right {
    width: 100%;
  }
  #about .box.row1 .left p, #about .box.row1 .right p, #about .box.row2 .left p, #about .box.row2 .right p {
    margin-top: 20px;
  }
  #about .box.row2 .left img {
    height: 20px;
    width: auto;
  }
  #about .info {
    padding-bottom: 66vw;
  }
  #about .info h3 img {
    height: 20px;
    width: auto;
  }
  #about .info .wrapper {
    width: 100%;
    float: revert;
  }
  #about .info .wrapper .timeline {
    float: revert;
  }
  #about .info .wrapper .timeline br:not(:first-child) {
    display: none;
  }
  #about .info .wrapper .timeline > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    line-height: 1.6;
  }
  #about .info .wrapper .timeline > div div:first-child {
    width: 65px;
  }
  #about .info .wrapper .timeline > div div:last-child {
    width: calc(100% - 65px);
  }
  #about .info .left, #about .info .right {
    width: 100%;
    float: revert;
  }
  #about .staff h3 img {
    height: 20px;
    width: auto;
  }
  #about .staff .wrapper {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #about .grandma {
    display: block;
  }
  #about .grandma .ttl img {
    height: 20px;
    width: auto;
  }
  #about .grandma .img {
    text-align: center;
  }
  #product #mainproduct .row:nth-child(1), #product #mainproduct .row:nth-child(2) {
    font-size: 14px;
  }
  #product #mainproduct .row:nth-child(1) .img img, #product #mainproduct .row:nth-child(2) .img img {
    max-width: 180px;
  }
  #product #mainproduct .row:nth-child(1) .row .left, #product #mainproduct .row:nth-child(1) .row .right, #product #mainproduct .row:nth-child(2) .row .left, #product #mainproduct .row:nth-child(2) .row .right {
    width: 100%;
    float: revert;
  }
  #product #mainproduct .row:nth-child(1) .row .right, #product #mainproduct .row:nth-child(2) .row .right {
    margin-top: 20px;
  }
  #product #mainproduct .row:nth-child(3) h3 img {
    height: 20px;
    width: auto;
  }
  #product #mainproduct .row:nth-child(3) .column {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    text-align: center;
  }
  #product #mainproduct .row:nth-child(3) .column p {
    text-align: left;
  }
  #product #mainproduct .row:nth-child(3) .column img:nth-of-type(2) {
    height: 16px;
    width: auto;
  }
  #product #mainproduct + div {
    padding: 0 4%;
    text-align: left;
  }
  #product .btn {
    width: 100%;
    text-align: center;
    margin: 10px 0 10px;
  }
  #product .btn br {
    display: none;
  }
  #product .original .row {
    gap: 30px 0;
  }
  #product .original .row h3 img {
    height: 20px;
    width: auto;
  }
  #product .original .row .column {
    width: 100%;
  }
  #product .original .row .column .step + p {
    text-align: center;
  }
  #product .original .design {
    width: 100%;
    padding-bottom: 50px;
  }
  #product .original .design .row {
    max-width: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  #product .original .design .row + p {
    font-size: 13px;
    text-align: left;
    margin-bottom: 30px;
  }
  #product .original .design .row .column img {
    width: 100%;
  }
  #product .voice {
    padding: 60px 4% 0;
  }
  #product .voice .crop_R {
    margin-bottom: 0;
  }
  #product .voice h3 img {
    height: 20px;
    width: auto;
  }
  #product .voice .row .column:nth-child(1) {
    margin-bottom: 30px;
  }
  #product .voice .row .column:nth-child(1) p:first-child {
    width: calc(100% - 150px);
  }
  #product .voice .row .column:nth-child(1) p:last-child {
    width: 120px;
  }
  #product .award_history {
    font-size: 12px;
  }
  #product .award_history > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    line-height: 1.6;
    margin-bottom: 8px;
  }
  #product .award_history > div span:nth-child(odd) {
    width: 65px;
  }
  #product .award_history > div span:nth-child(even) {
    width: calc(100% - 65px);
  }
  #policy .row {
    margin-bottom: 60px;
  }
  #policy .row h3 {
    width: revert;
  }
  #policy .row:has(.txt.left) {
    flex-direction: row-reverse;
  }
  #policy .row:has(.txt) {
    flex-wrap: wrap;
  }
  #policy .row:has(.txt) > div {
    width: 100%;
  }
  #policy .row:has(.txt) > div:has(p) {
    width: 100%;
  }
  #policy .row .txt {
    margin-bottom: 20px;
  }
  #policy .row .txt img {
    height: 15vw;
    width: auto;
  }
  #policy .row:nth-child(6) .txt img {
    height: 22.5vw;
    width: auto;
  }
  #policy .crop_R, #policy .crop_L {
    flex-wrap: wrap;
  }
  #policy .crop_R .left, #policy .crop_R .right, #policy .crop_L .left, #policy .crop_L .right {
    width: 100%;
  }
  #policy .crop_R {
    flex-direction: column-reverse;
  }
  #policy .crop_R .right img {
    max-width: 15vw;
  }
  #policy .crop_L .left img {
    max-width: 15vw;
  }
  #term {
    position: relative;
  }
  #term h3 {
    width: 11vw;
  }
  #term .inr {
    padding-left: 16vw;
  }
  #term .ttl ul {
    margin-bottom: 20px;
  }
  #term .border {
    font-size: 3vw;
    height: 67vw;
    padding: 20px;
    line-height: 1.8;
  }
  #blog .box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    gap: 50px 0;
  }
  #blog #sidebar, #blog #main {
    width: 100%;
    float: revert;
  }
  #blog .wp-caption {
    width: 100% !important;
  }
  #blog .category {
    float: revert;
    display: block;
    margin-top: 5px;
  }
  #faq .faq_box {
    width: 100%;
    max-width: 700px;
    padding-left: 4%;
    padding-right: 4%;
  }
  #faq h3 img {
    height: 18px;
    width: auto;
  }
  #faq ul li {
    font-size: 15px;
    padding-left: 45px;
  }
  #store .crop_R {
    text-align: left;
    padding: 0;
    margin: 20px 0 0;
    top: revert;
    margin-bottom: 30px;
  }
  #store .info {
    padding-bottom: 60vw;
  }
  #store .info .wrapper {
    float: revert;
    width: 100%;
    max-width: 650px;
  }
  #store .info .wrapper h3 img {
    height: 18px;
    width: auto;
  }
  #store .info .store_info, #store .info .access {
    width: 100%;
    float: revert;
    margin-bottom: 20px;
  }
  #store .info .link {
    width: 100%;
    max-width: 600px;
  }
  #store .info .link .ttl {
    font-size: 18px;
    width: revert;
  }
  #store .info .link div {
    float: revert;
    width: 100%;
  }
  #contact .box {
    max-width: 650px;
    width: 100%;
  }
  #contact .top .img:first-child {
    text-align: left;
  }
  #contact .top .img:first-child img {
    display: none;
  }
  #contact .top .img:first-child:before {
    content: "商品のこと、お米のこと、経験豊かなスタッフと米職人にお気軽にお問い合わせください。 また、ギフトラッピング、熨斗、法人様のご依頼も対応させていただいております。";
  }
  #contact .top .tel, #contact .top .mail {
    margin-bottom: 18px;
  }
  #contact .top .tel img, #contact .top .mail img {
    height: 18px;
    width: auto;
  }
  #contact .top .number img {
    width: 250px;
  }
  #contact .top .hours {
    font-size: 12px;
  }
  #contact .info {
    text-align: left;
  }
  #contact .ttl {
    float: revert;
  }
  #contact input, #contact textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }
}

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