@charset "utf-8";

/* ==================================================

■ 共通
- heading
- top-button
■ mv
■ concept
■ rollcake
■ material
■ news
■ shop
■ 編集画面用CSS

■ 内容ページ
- 素材へのこだわり
- 農ブランドのこだわり
- ロールケーキ
- 店舗情報
- 取組み（SDGs）

================================================== */

/* ==================================================
  ■ 共通
================================================== */

/* heading
---------------------------------------------------- */

.cmshtml div.heading h2 {
    font-size: clamp(1.25rem,2vw,2.215rem);
}

.cmshtml div.heading h3 {
    position: relative;
    padding-left: 50px;
    font-size: clamp(0.75rem,1vw,1.25rem);
    color: var(--i_gray_color);
    font-weight: 100;
}

.cmshtml .heading h3::before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 40px;
    height: 1px;
    background: var(--i_gray_color);
}

@media only screen and (max-width: 768px) {
  .cmshtml .main_content .heading {
    padding-bottom: 40px;
  }

  .cmshtml .heading h3 {
    padding-left: 25px;
  }

  .cmshtml .heading h3::before {
    width: 20px;
  }
}

/* top-button
---------------------------------------------------- */
.cmshtml .top-button a {
  position: relative;
  padding: 10px 0;
}

.cmshtml .top-button a:hover {
  opacity: 0.7;
}

.cmshtml .top-button a::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #333;
  animation: arrowlong01 2s ease infinite
}

@keyframes arrowlong01{
  0%{width:0;opacity:0}
  20%{width:0;opacity:1}
  80%{width:105%;opacity:1}
  100%{width:105%;opacity:0}
}


/* ==================================================
  ■ mv
================================================== */

.cmshtml .rdslide .rdsp-buttons {
  display: none;
}

.cmshtml .mv_outer .rdslide {
  height: 100dvh;
}

.cmshtml .mv_img {
  z-index: 1;
}

.cmshtml .mv_img img {
  width: clamp(120px,23vw,300px);
}

@media screen and (max-width: 768px){
  .cmshtml .mv_outer .rdslide {
    height: 75vh;
  }
}


/* ==================================================
  ■ concept
================================================== */

.cmshtml .top-concept {
  position: relative;
}

.cmshtml .top-concept::before,
.cmshtml .top-concept::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(//2201a028901.ggserver.net/data/202210/bg_concept.png) no-repeat;
  background-position: right top;
  background-size: clamp(234px,30vw,470px);
}

.cmshtml .top-concept::after {
  background: url(//2201a028901.ggserver.net/data/202210/cow.png) no-repeat;
  background-position: right bottom;
  max-width: 1200px;
  left: 50%;
  transform: translateX(-50%);
  background-size: clamp(105px,30vw,190px);
}

.cmshtml .top-concept .inner-text p {
  max-width: 825px;
}


/* ==================================================
  ■ rollcake
================================================== */
.cmshtml .top-rollcake {
  width: 100%;
  background: beige;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 2fr 1fr 1fr;
}

.cmshtml div.box1 {
  grid-row: 1/3;
  width: 100%;
  padding-bottom: 100vh;
  position: relative;
}

.cmshtml div.box1 img,.cmshtml div.box2 img,.cmshtml div.box3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmshtml div.box1 img {
  position: absolute;
  height: 100vh;
  height: 100dvh;
}
.cmshtml div.box2 {
  aspect-ratio: 1/1;
}

.cmshtml div.box3 {
  aspect-ratio: 1/1;
}

.cmshtml div.box4 {
  grid-column: 2/4;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 768px){
  .cmshtml .top-rollcake {
    height: auto;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr 1fr;
  }

  .cmshtml div.box1 {
    grid-row: 1/2;
    grid-column: 1/3;
  }

  .cmshtml div.box2 {
    grid-row: 2/3;
    grid-column: 1/2;
  }

  .cmshtml div.box3 {
    grid-row: 2/3;
    grid-column: 2/3;
  }

  .cmshtml div.box4 {
    grid-row: 3/4;
    grid-column: 1/3;
    padding: 60px 2%;
  }
}


/* ==================================================
  ■ material
================================================== */

.cmshtml .top-material .fbArea {
    column-gap: 30px;
    row-gap: 40px;
    flex-wrap: wrap;
}

.cmshtml .top-material .fbArea > .rdblock {
    width: calc(50% - 15px);
}

.cmshtml .material-number {
  font-size: clamp(1rem,2vw,1.5rem);
  font-weight: bold;
  position: relative;
  padding-bottom: 5px;
}

.cmshtml .material-number::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--i_txt_color);
  transform: translateX(-50%);
}

.cmshtml .material-inner {
  position: relative;
  overflow: hidden;
}

.cmshtml .material-inner::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0);
  z-index: -1;
}

.cmshtml .material-inner > .rdplaneimage {
  aspect-ratio: 4/3;
}

.cmshtml .material-inner:hover .material-textArea {
  bottom: 0;
  background: rgb(255 255 255 / 90%);
}

.cmshtml .material-inner:hover img {
  opacity: 0.7;
}

.cmshtml div.material-inner img {
  transition: .7s ease;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.cmshtml .material-textArea {
  position: absolute;
  bottom: -200px;
  width: 100%;
  pointer-events: none;
  transition: .4s ease;
}

.cmshtml .material-heading {
  height: 108px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.cmshtml .material-text {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30px;
}

.cmshtml .material-heading p {
    font-size: 1rem;
    font-weight: 600;
}

.cmshtml .material-heading .rdplanetitle h3 {
    font-size: clamp(1rem,1vw,1.125rem);
}

@media screen and (max-width: 1080px){
  .cmshtml .material-textArea {
    position: static;
  }

  .cmshtml .material-inner::before {
    content: none;
  }
}

/* ==================================================
  ■ news
================================================== */

.cmshtml .top-news .slider .rdplaneimage img {
  object-fit: cover;
  aspect-ratio: 1/1;
}

.cmshtml .top-news .fbArea {
  column-gap: 30px;
  row-gap: 30px;
  flex-wrap: wrap;
}

.cmshtml .top-news .fbArea > .rdblock {
  width: calc(50% - 15px);
  transition: .3s ease;
}

.cmshtml .top-news .fbArea > .rdblock:hover {
  opacity: 0.8;
}

.cmshtml .top-news .fbArea .rdplaneimage {
  aspect-ratio: 135/41;
}

.cmshtml .top-news .fbArea img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background: #fff;
}

.top-news + div .rdplaneimage {
    margin-bottom: 10px;
}

@media screen and (max-width: 768px){
  .cmshtml .top-news .slider {
    padding-bottom: 30px;
  }
}

@media (min-width: 1px) and (max-width: 576px) {
  .cmshtml .slick-slide.rdblock {
    max-width: 33.3vw !important;
  }
}

/* ==================================================
  ■ shop
================================================== */


.cmshtml .top-shop .fbArea {
    column-gap: 30px;
    row-gap: 40px;
    flex-wrap: wrap;
}

.cmshtml .top-shop .fbArea > .rdblock {
    width: calc(33.3% - 20px);
}

.cmshtml .top-shop .rdplaneimage {
  overflow: hidden;
  aspect-ratio: 4/3;
}

.cmshtml .top-shop img {
  transition: .7s ease;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.cmshtml .top-shop a:hover img {
    transform: scale(1.15);
}

.cmshtml div.top-shop h5 {
    font-size: clamp(12px,2vw,1rem);
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 0 15px;
}

.cmshtml .top-shop h5::before, .cmshtml .top-shop h5::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background: #DEB887;
    border-radius: 5px;
    top: calc(50% - 3px);
    left: 0;
    transform: translateY(-50%);
}

.cmshtml .top-shop h5::after {
  left: auto;
  right: 0;
}

.cmshtml div.top-shop h4 {
    font-size: 1rem;
}

@media screen and (min-width: 769px){
  .top-shop br {
    display: none;
  }
}

@media screen and (max-width: 768px){
  .cmshtml div.top-shop h4 {
      font-size: 0.6rem;
  }
}

@media screen and (max-width: 568px){
  .cmshtml .top-shop .fbArea {
    column-gap: 10px;
  }

  .cmshtml .top-shop .fbArea > .rdblock {
    width: calc(50% - 5px) !important;
    flex: 0 0 auto;
  }
}

@media screen and (max-width: 576px){
  .cmshtml .top-shop .fbArea {
      column-gap: 10px;
  }

  .cmshtml .top-shop .fbArea > .rdblock {
      width: calc(50% - 5px) !important;
      flex: 0 0 auto;
  }

  .cmshtml .top-shop .rdplaneimage {
      margin-bottom: 10px;
  }
}


/* ==================================================
  ■ 編集画面用CSS
================================================== */

/*base*/
#editView .cmshtml #header {
  float: initial;
  background: #deb887;
}

#editView .cmshtml #header .header_icon {
    width: 50px;
    height: 50px;
}

#editView .cmshtml .fix_bg,
#editView .cmshtml .mv_img,
#editView .cmshtml .material-textArea {
  position: static;
  pointer-events: auto;
}

#editView .cmshtml .top-rollcake {
  height: auto;
}

#editView .cmshtml .fbArea {
  gap: 0 !important;
}

#editView .cmshtml .slider {
  display: flex;
  flex-wrap: wrap;
}

#editView .cmshtml .top-rollcake #are911-uazciwvtievmftmqhj8zshc9zfes5iuqg {
  grid-row: 1/3;
}

#editView .cmshtml .top-rollcake #are911-unjj6g63uw8fdjdnybjxha0ojlgng1dbk {
  grid-column: 2/4;
  display: flex;
  align-items: center;
}

#editView .cmshtml .footer_nav,
#editView .cmshtml .footer_right {
  display: block;
}

#editView .cmshtml .footer_inner>div {
  width: 50%;
}

.footer_left, .footer_right {
  width: 100%;
}

@media screen and (min-width: 769px){
  #editView .top-shop br {
    display: block;
  }
}





/* ==================================================
  ■ 内容ページ
================================================== */


/* 素材へのこだわり
---------------------------------------------------- */
.cmshtml .sozaiKodawari .rdflexareaChild {
    background-position: right 30px bottom 20px;
}


/* 農ブランドのこだわり
---------------------------------------------------- */
.kodawari_txtarea,.kodawari_txt {
  position: relative;
}

.cmshtml .kodawari_txt > div {
  padding-bottom: 130px;
}

/*niwatori*/
.kodawari_txtarea::before {
    position: absolute;
    content: "";
    bottom: 10px;
    left: 10%;
    width: 168px;
    height: 104px;
    background: url(https://2201a028901.ggserver.net/data/202211/img637344d65a6ff.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

/*wara*/
.kodawari_txtarea::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 60%;
    height: 100%;
    background: url(https://2201a028901.ggserver.net/data/202211/img6377237b0bea0.png);
    background-repeat: no-repeat;
  background-size: contain;
    background-position: bottom;
}


.kodawari_txt::before {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 10%;
    width: 66px;
    height: 45px;
    background: url(https://2201a028901.ggserver.net/data/202211/img637344ccb4a8d.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.kodawari_txt::after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 27%;
    height: 60px;
    width: 67px;
    background: url(https://2201a028901.ggserver.net/data/202211/img637344c552dd4.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.kodawari_txt::before {
  animation: 3s fuwafuwa infinite;
}

.kodawari_txt::after {
  animation: 3s fuwafuwa2 infinite;
}

.kodawari_txtarea::before {
  animation: 5s yurayura infinite;
}

@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes fuwafuwa2 {
  0% {
    transform: translateY(-6px);
  }
  20%,70% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-6px);
  }
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(3deg);
  }
  50%{
      transform: rotate(-3deg);
  }
}


@media screen and (max-width: 768px){
  .kodawari_txt::after {
      width: 47px;
      height: 40px;
  }

  .kodawari_txt::before {
      width: 46px;
      height: 35px;
  }

  .kodawari_txtarea::before {
      width: 140px;
      height: 85px;
  }
}

@media screen and (max-width: 576px){
  .cmshtml .kodawari_txt > div {
      padding-bottom: 50px;
  }

  .kodawari_txt::before,.kodawari_txt::after {
    bottom: -10px;
  }

  .kodawari_txtarea::after {
    width: 100%;
  }

  .kodawari_txtarea::before {
      width: 110px;
      height: 65px;
  }
}


/* ロールケーキ
---------------------------------------------------- */
.rollcake_cutroll .rdhorizontalarea {
    row-gap: 20px;
}



/* 店舗情報
---------------------------------------------------- */
.btn-list .content_btn02 a {
    min-width: 100%;
    font-size: 14px;
}

@media screen and (max-width: 768px){
  .cmshtml .btn-list > div {
      width: 50%;
  }
}


/* 取組み（SDGs）
---------------------------------------------------- */
@media screen and (max-width: 768px){
  .cmshtml .sdgs-list > div {
      width: 50%;
  }
}

@media (min-width: 1px) and (max-width: 576px){
  .cmshtml .sdgs-list > div {
      width: 50% !important;
      flex: 0 0 auto;
  }

  .cmshtml .sdgs-item .rdplaneimage {
      width: 50% !important;
      margin: auto !important;
  }
}