/*
Theme Name: 横山食品株式会社
Theme URI:
Author: Akira Yoneda
Author URI: https://akira-yoneda.akikei.life/
Description: Description
Version: 1.0.0
License: Akira Yoneda
License URI: https://akira-yoneda.akikei.life/
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;

  vertical-align: baseline;

  border: 0;

  font-size: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
  display: none;
}

body {
  line-height: 1.5;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-spacing: 0;

  border-collapse: collapse;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html, body {
  position: relative;
}

body {
  margin: 0 auto;

  color: #111;
  background-color: #fff;

  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 16px;
  font-weight: normal;
}
a{
  cursor : pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  color: #111;
}
.recapcha a{
  cursor : pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  color: #ccc;
}
a:hover {
  color: #111;
}
a:focus, *:focus { outline:none!important; }
p{
  line-height: 2;
}
img{
  max-width: 100%;
  margin: 0;
	padding: 0;

	vertical-align: bottom;
}
.wrap {
  position: relative;

  overflow: hidden;
}
.container {
  width: 100%;
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
}
.container-mr{
  margin: 0 0 0 calc(50% - 50vw);
  padding: 0 0 0 calc(50vw - 50%);
}
.container-ml{
  margin: 0 calc(50% - 50vw) 0 0;
  padding: 0 calc(50vw - 50%) 0 0;
}
.bd-rd-right{
  overflow: hidden;

  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}
.bd-rd-left{
  overflow: hidden;

  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}
@media (max-width: 1100px) {
  .container {
    padding-right: 30px;
    padding-left: 30px;
  }
  .container-sp{
    padding-right: 20px;
    padding-left: 20px;
  }
}
@media (max-width: 768px) {
  .container {
    padding-right: 20px;
    padding-left: 20px;
  }
  .text-box{
    padding-right: 20px;
    padding-left: 20px;
  }
}
@media (max-width: 768px) {
  .container-mr{
    width: calc(100% + 40px);
    margin: 0 0 0 -20px;
    padding: 0 20px;
  }
  .container-ml{
    width: calc(100% + 40px);
    margin: 0 0 0 -20px;
    padding: 0 20px;
  }
  .bd-rd-right{
    overflow: hidden;

    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .bd-rd-left{
    overflow: hidden;

    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}
.main-content{
  padding-top: 50px;
  padding-bottom: 50px;
}

/*********
 MODULES
 *********/
/* Font */
h1, h2, h3, h4, h5{
  font-weight: bold;
}
h1.top-title{
  color: #004160;

  font-size: 40px;
  font-weight:700;
}
p{
  color: #111;

  font-size: 16px;
  line-height: 1.9;
}
.josefin{
  font-family: 'Josefin Sans', sans-serif;
}
.main-content h2{
  padding-bottom: 54px;

  text-align: center;

  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 32px;
}
.main-content h2 span{
  display: block;

  padding-bottom: 8px;

  color: #C64C00;

  font-family: "Montserrat","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .main-content h2{
    padding-bottom: 40px;

    text-align: center;

    font-size: 28px;
  }
  .main-content h2 span{
    font-size: 18px;
  }
}
.main-content .bg h2 span{
  color: white;
}
.main-content h3, .page .product .main-content h3{
  margin-bottom: 0;

  font-size: 50px;
}
.main-content h3 span{
  display: block;

  padding-top: 10px;
  padding-bottom: 50px;

  font-size: 24px;
}
.title-underbar{
  width: 30px;
  height: 5px;
  margin-bottom: 44px;

  background: #C64C00;
}
@media screen and (max-width: 768px) {
  .main-content h3, .page .product .main-content h3{
    text-align: center;

    font-size: 34px;
  }
  body.page .main-content h3 {
    font-size: 26px;
  }
  .main-content h3 span{
    padding-bottom: 40px;

    text-align: center;

    font-size: 22px;
  }
  .title-underbar{
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto;
  }
}
.txt-center{
  text-align: center;
}
.txt-right{
  text-align: right;
}
.txt-left{
  text-align: left;
}

/* Display */
.inline-block{
  display: inline-block;
}
.no-pc{
  display: none!important;
}
.no-sp{
  display: block!important;
}
@media screen and (max-width: 768px) {
  .no-pc{
    display: block!important;
  }
  .no-sp{
    display: none!important;
  }
}

/* BackGround Color */
.bg-orange{
  color: white;
  background: #C64C00;
}
.bg-yellow{
  color: white;
  background: #D58936;
}

/* Button */
.btn{
  position: relative;

  display: block;

  width: 300px;
  height: 60px;
  max-width: 100%;

  -webkit-transition: 0.3s;
  transition: 0.3s;

  color:#111;
  border: solid 3px #111;
  border-radius: 100px;
  background-color: #fff;

  font-size: 16px;
  font-weight: bold;

}
.btn.center{
  margin: 0 auto;
}
.btn span{
  position: absolute;
  top: 50%;
  left: 0;

  width: 100%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
}
.btn:hover{
  color:#fff;
  background-color: #111;
}
.btn.white{
  color: white;
  border-color: white;
  background: rgba(0, 0, 0, 0);
}
.btn.white:hover{
  color:#111;
  background-color: #fff;
}
.btn.blue{
  color: #309293;
  border-color: #309293;
  background: rgba(0, 0, 0, 0);
}
.btn.blue:hover{
  color:#fff;
  background-color: #309293;
}
.btn.yellow{
  color: #D58936;
  border-color: #D58936;
  background: rgba(0, 0, 0, 0);
}
.btn.yellow:hover{
  color:#fff;
  background-color: #D58936;
}
.btn.white:hover.h-orange{
  color:#C64C00;
}
.btn.contact{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 138px;
  height: auto;
  padding: 16px 0;

  color: white;
  border: none;
  background-color: #B1272B;
}
.btn.contact span{
  position: relative;
  top: 0;

  transform: translateY(0);
}
.btn.contact:hover{
  color: #B1272B;
  border: solid 3px #B1272B;
  background-color: rgba(0, 0, 0, 0);
}
.home-menu-bar .level-item:hover .btn.contact span{
  color: #B1272B;
}
@media screen and (max-width: 768px) {
  a.btn{
    margin-right: auto;
    margin-left: auto;
  }
}

/*---------- 20250305追加 ------------*/
.tfplus-list .items .item .button-block .btn img,
.tfplus-shop-link .button-block .btn img {
  position: absolute;
  top: 30%;
  transform: translateX(-50%);
  left: 50%;
  width: 198px;
}
.tfplus-list .items .item .button-block .btn:hover img,
.tfplus-shop-link .button-block .btn:hover img {
  filter: invert(100%);
}
/*---------- 20250305追加 ------------*/


/* Image */
img{
  max-width: 100%;
}

/* Flexbox */
.flexbox{
  display: -webkit flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* Page Part Template */
.page-header-1 .main-content{
  padding-bottom: 0;
}

/*********
 Menu
 *********/
.head, .home-menu-bar, .home-menu-bar .level-left, .home-menu-bar .level-right{
  height: 80px;
}
.home-menu-bar{
  position: fixed;
  z-index: 10000000;
  top: 0;
  left: 0;

  width: 100%;
  padding: 0 14px 0 32px;

  background: white;

  font-size: 15px;

  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.home-menu-bar::-webkit-scrollbar{
  display: none;
}
.menu-logo{
  max-width: 260px;
}
.home-menu-bar .level-right .level-item{
  height: 100%;
  padding: 0 18px;

  text-align: center;

  font-weight: bold;
}
.home-menu-bar .level-right .level-item span{
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.home-menu-bar .level-right .level-item:last-child{
  padding: 0 0 0 18px;
}
.level-right .level-item .subtitle{
  display: block;

  color: #959595;

  font-size: 12px;
  font-weight: bold;
}
.home-menu-bar .sub-menu-mark{
  position: relative;
}
.home-menu-bar .sub-menu-mark:after{
  position: absolute;
  top: 50%;
  right: -12px;

  content: ' ';
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);

  border-top: 4px solid #C64C00;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.sub-menu .sub-menu-box{
  display: none;

  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.sub-menu{
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.home-menu-bar .sub-menu:hover .sub-menu-box, .home-menu-bar .sub-menu-box:hover{
  position: fixed;
  z-index: 1000000;
  bottom:-100%;
  top: 80px;
  left: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 80px;
  padding: 10px 0;
}
.sub-menu-box.bg-orange{
  background: #4A3624;
}
.sub-menu-box li{
  display: inline-block;

  text-align: center;
}
.sub-menu-box li a{
  color: white;
}
.sub-menu-box li:after{
  display: inline-block;

  padding: 0 36px;

  content: '/';

  font-weight: normal;
}
.sub-menu-box li:last-child:after{
  display: none;
}
.home-menu-bar .sub-menu:hover .sub-menu-mark:after{
  position: absolute;
  top: 50%;
  right: -12px;

  content: ' ';
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);

  border-top: none;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #C64C00;
  border-left: 4px solid transparent;
}
.home-menu-bar .level-item:hover span{
  color: #C64C00;
}

#nav-drawer{
  display: none;
}
.news-bar .bg-yellow a{
  display: none;

  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateX(105%);
      -ms-transform: translateX(105%);
          transform: translateX(105%);
}
.news-bar .bg-yellow a.active-article{
  display: block;

  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-animation: slide-in-left 0.8s;
          animation: slide-in-left 0.8s;
}
@-webkit-keyframes slide-in-left{
  0%{
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);

    opacity: 0;
  }
  100%{
    -webkit-transform: translateY(0%);
            transform: translateY(0%);

    opacity: 1;
  }
}
@keyframes slide-in-left{
  0%{
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);

    opacity: 0;
  }
  100%{
    -webkit-transform: translateY(0%);
            transform: translateY(0%);

    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .home-menu-bar{
    position: fixed;
    z-index: 10000000;
    top: 0;
    left: 0;

    width: 100%;
    padding: 0;

    background: white;

    font-size: 15px;

    Overflow: initial;
  }
  .head, .home-menu-bar, .home-menu-bar .level-left, .home-menu-bar .level-right{
    height: 60px;
  }
  .level-left{
    position: relative;
    z-index: 100000;
  }
  .level-right{
    position: relative;
    z-index: 100000;

    width: 60px;
    height: 60px;

    text-align: center;

    background: #C64C00;
  }
  .menu-logo{
    padding-top: 6px;
    padding-left: 20px;
  }
  .level-right .level-item{
    display: none;
  }
  #nav-drawer{
    position: relative;

    display: inline-block;

    width: 100%;

    text-align: center;
  }

  /*チェックボックス等は非表示に*/
  .nav-unshown {
    display:none;
  }

  /*アイコンのスペース*/
  #nav-open {
    display: inline-block;

    width: 20px;
    height: 14px;

    cursor: pointer;
    text-align: center;
    vertical-align: middle;
  }

  /*ハンバーガーアイコンをCSSだけで表現*/
  #nav-open span.humb-menu, #nav-open span.humb-menu:before, #nav-open span.humb-menu:after {
    position: absolute;

    display: block;

    width: 20px;/*長さ*/
    height: 2px;/*線の太さ*/

    content: '';
    cursor: pointer;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;

    border-radius: 3px;
    background: #fff;
  }
  #nav-open span.humb-menu:before {
    bottom: -6px;
  }
  #nav-open span.humb-menu:after {
    bottom: -12px;
  }
  /*中身*/
  #nav-content {
    position: fixed;
    z-index: -1;/*最前面に*/
    top: 60px;
    right: 0;

    display: none;
    overflow: auto;

    width: 100%;/*右側に隙間を作る（閉じるカバーを表示）*/
    height: 0px;

    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-animation: drop-out .3s ease-in-out;
            animation: drop-out .3s ease-in-out;

    background: #C64C00;/*背景色*/
  }
  #nav-input:checked ~ #nav-content {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    width: 100%;
    height: auto;
    max-height: 100%;

    -webkit-animation: drop-in .3s ease-in-out;
            animation: drop-in .3s ease-in-out;
  }
  #nav-input:checked ~ #nav-content .nav-content-box{
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    height: 100%;
  }
  #nav-input:checked ~ #nav-open span.humb-menu, #nav-input:checked ~ #nav-open span.humb-menu:before, #nav-input:checked ~ #nav-open span.humb-menu:after {
    display: none;

    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  #nav-input.close-btn .x-mark {
    display: none;

    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  #nav-input:checked ~ .close-btn .x-mark {
		top:0px;
		left:0px;

		display:inline-block;

		width:20px;
		height: 14px;
		margin:0;
		padding:0;

		cursor:pointer;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;

		border:0;
		border-radius:32px;
  }
  #nav-input:checked ~ .close-btn .x-mark span::before,
  #nav-input:checked ~ .close-btn .x-mark span::after {
		position:absolute;
		top:0;
		left:50%;

    display: block;
		display:inline-block;

		width:2px;
		height:28px;
		margin:0;
		padding:0;

    content:"";

		border:0;
		background-color:white;
  }
  #nav-input:checked ~ .close-btn .x-mark span::before{
		-webkit-transform: translateX(-50%) rotate(45deg);
		-ms-transform: translateX(-50%) rotate(45deg);
		    transform: translateX(-50%) rotate(45deg);
  }
  #nav-input:checked ~ .close-btn .x-mark span::after{
		-webkit-transform: translateX(-50%) rotate(-45deg);
		-ms-transform: translateX(-50%) rotate(-45deg);
		    transform: translateX(-50%) rotate(-45deg);
  }
  .sp-menu-item, ul.sub-menu-sp-box li{
    position: relative;

    padding: 0 20px;

    text-align: left;

    border-bottom: solid 1px white;
  }
  .sp-menu-item:last-child ,ul.sub-menu-sp-box li:last-child{
    border-bottom: none;
  }
  details.sub-menu-sp{
    -webkit-transition: .5s;
    transition: .5s;
  }
  .sp-menu-item a, details.sub-menu-sp summary span{
    display: inline-block;

    padding: 20px 0 20px 20px;

    color: #fff;

    font-weight: bold;
  }
  details[open].sub-menu-sp summary span{
    position: relative;

    display: inline-block;

    width: 100%;
  }
  details[open].sub-menu-sp summary span:before{
    position: absolute;
    bottom: 0;
    left: -20px;

    width: calc(100% + 40px);
    height: 1px;

    content: ' ';

    background: white;
  }
  .sp-menu-item span{
    font-size: 16px;
  }
  details.sub-menu-sp{
    list-style: none;

    -webkit-transition: .3s;
    transition: .3s;
  }
  details.sub-menu-sp summary{
    position: relative;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;

    list-style: none;

    -webkit-transition: .3s;
    transition: .3s;
    text-align: left;
  }
  details.sub-menu-sp summary:after{
    position: absolute;
    top: 50%;
    right: 0;

    width: 13px;
    height: 13px;

    content: '+';
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    text-align: center;

    color: #fff;
    border: solid 1px white;

    font-size: 13px;
    font-weight: 300;
    line-height: 0.9;
  }
  details[open] summary:after {
    content: "-";

    color: #fff;

    line-height: 0.8;
  }
  details.sub-menu-sp summary::-webkit-details-marker {
    display: none;
  }
  ul.sub-menu-sp-box li{
    position: relative;

    padding-left: 20px;

    color: white;
  }ul.sub-menu-sp-box li a{
    padding-left: 0;
  }
  ul.sub-menu-sp-box li a:before{
    position: relative;

    display: inline-block;

    margin-right: 0.75rem;

    content: '-';

    font-weight: bold;
  }
  details.sub-menu-sp .sub-menu-sp-box.company{
    -webkit-animation: drop-in-251 .3s ease-in-out;
            animation: drop-in-251 .3s ease-in-out;
  }
  details.sub-menu-sp .sub-menu-sp-box.product{
    -webkit-animation: drop-in-377 .3s ease-in-out;
            animation: drop-in-377 .3s ease-in-out;
  }
}
@-webkit-keyframes drop-in-80 {
  0% {
    bottom: 80px;

    height:0;
  }
  100% {
    bottom: -100%;

    height:70px;
  }
}
@keyframes drop-in-80 {
  0% {
    bottom: 80px;

    height:0;
  }
  100% {
    bottom: -100%;

    height:70px;
  }
}
@-webkit-keyframes drop-out-80 {
  0% {
    height: 0;
  }
  100% {
    height: 70px;
  }
}
@keyframes drop-out-80 {
  0% {
    height: 0;
  }
  100% {
    height: 70px;
  }
}
@-webkit-keyframes drop-in {
  0% {
    height: 0;
  }
  100% {
    height: 454px;
  }
}
@keyframes drop-in {
  0% {
    height: 0;
  }
  100% {
    height: 454px;
  }
}
@-webkit-keyframes drop-out {
  0% {
    height: 454px;
  }
  100% {
    height: 0;
  }
}
@keyframes drop-out {
  0% {
    height: 454px;
  }
  100% {
    height: 0;
  }
}

/*********
 *********

 Home Page

 *********
 *********/
/* News Bar */
.news-bar{
  position: relative;

  padding-top: 0.75rem;
}
.news-bar .columns{
  padding: 0;
}
.news-bar .columns .column.is-one-fifth-desktop{
  width: 11%;
}
.news-bar .column:first-child{
  padding: 0 0 0 3%;

  border-right: 1px solid #D58936;
}
.news-bar .column:last-child{
  padding: 0.5rem 36px 0.5rem 24px;
}
.news-bar-title, .news-bar-navigation, .news-bar-navigation, .news-bar-item{
  display: inline-block;

  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;

  vertical-align: middle;
}
.news-bar-title, .news-bar-navigation{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

  border-right: 1px solid #D58936;
}
.news-bar-title{
  width: 63%;
  height: 100%;

  font-size: 14px;
}
.news-bar-title h2{
  margin-top: 2px;
}
.news-bar-navigation{
  width: 15%;
  height: 100%;

  text-align: center;
}
.news-bar-navigation:last-child{
  width: 14%;

  border: none;
}
.news-bar-navigation span.sp-center {
  position: relative;

  display: inline-block;

  width: 100%;
  height: 100%;
}
.news-bar-navigation a{
  position: relative;

  display: inline-block;

  width: 100%;
  height: 100%;
}
.news-bar-navigation span.arrow{
  position: absolute;
  top:50%;
  left: 50%;

  width: 10px;
  height: 10px;

  -webkit-transform: translate(-50%,-50%) rotate(-135deg);
  -ms-transform: translate(-50%,-50%) rotate(-135deg);
  transform: translate(-50%,-50%) rotate(-135deg);

  border: 0px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
}
.news-bar-navigation:last-child span.arrow{
  left: 5%;

  -webkit-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
.news-bar-item{
  padding-right: 1.25rem;
}
a .news-bar-item{
  color: white;
}
.news-bar-item .date{
  font-size: 14px;
}
.news-bar-item .cat{
  position: relative;
  top: -1px;

  padding: 4px;

  border: solid 1px #fff;

  font-size: 11px;
}
.news-bar-item .news-title{
  font-size: 15px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .news-bar .columns .column.is-one-quarter-mobile{
    width: 30%;
  }
  .news-bar-title, .news-bar-navigation{
    padding: 0;
  }
  .news-bar-item {
    padding-right: 0;
  }
  .news-bar .column:last-child {
    padding: 0.5rem 10px 0.5rem 10px;
  }
  .news-bar-title{
    position: relative;

    width: 62%;
    height: 100%;
    padding-left: 10px;

    font-size: 12px;
  }
  .news-bar-navigation{
    position: relative;

    width: 15%;
    height: 100%;

    text-align: center;
  }
  .news-bar-navigation:last-child{
    width: 14%;

    border: none;
  }
  .news-bar .columns .column.is-one-quarter-mobile .sp-center{
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .news-bar .columns .column.is-one-quarter-mobile .news-bar-navigation span.sp-center{
    top: 48%;
    left: 30%;
  }
  .news-bar .columns .column.is-one-quarter-mobile .news-bar-navigation span.sp-center.right{
    left: 50%;
  }
  .news-bar-navigation span.arrow{
    width: 6px;
    height: 6px;

    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .news-bar-navigation:last-child span.arrow{
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .news-bar-item .date {
    padding-right: 10px;

    font-size: 12px;
  }
  .news-bar-item .cat {
    font-size: 10px;
    font-weight: bold;
  }
  .news-bar-item .news-title {
    font-size: 13px;
  }
}

/* First View */
.first-view{
  position: relative;

  margin-top: 0.75rem;
}
.first-view, .first-view-bg-wrap, .first-view-bg-1, .first-view-bg-2, .first-view-bg-3{
  width: 100%;
  height: 720px;
}
.first-view-bg-wrap, .first-view-bg-1, .first-view-bg-2, .first-view-bg-3{
  margin: 0;
  padding: 0;
}
.first-view-bg-1{
  background: url(./assets/img/Firstview-1.png) top center no-repeat;
  background-size: cover;
}
.first-view-bg-1{
  background: url(./assets/img/Firstview-1.png) top center no-repeat;
  background-size: cover;
}
.first-view-bg-2{
  background: url(./assets/img/Firstview-2.png) top center no-repeat;
  background-size: cover;
}
.first-view-bg-3{
  background: url(./assets/img/Firstview-3.png) top center no-repeat;
  background-size: cover;
}
.first-view .container{
  height: 720px;
}
.first-view .inner-content{
  position:absolute;
  bottom: 130px;

  width: 50%;
}
.first-view .inner-content h2{
  padding-bottom: 40px;

  font-size: 30px;
}
.first-view .inner-content h2 span{
  display: block;

  font-size: 104px;
  font-weight: 500;
  line-height: 1.3;
}
.first-view .inner-content p{
  font-size: 18px;
  font-weight: bold;
  line-height: 35px;
}
.first-view-nav{
  position: absolute!important;
  top: 660px;
  left: 50%;

  width: 100%;
  max-width: 1080px;
  margin: 0 auto;

  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.first-view-nav-item{
  position: relative;

  width: 323px!important;
  margin-right: 55px;

  text-align: left;
}
.first-view-nav-item .bar{
  position: absolute;
  z-index: 1000;
  bottom: 0;

  width: 100%;
  height: 4px;

  background: #CCCCCC;
}
.first-view-nav-item .bar-bg{
  position: absolute;
  bottom: 0;

  width: 100%;
  height: 4px;

  content: ' ';

  background: #CCCCCC;
}
.first-view-nav-item:last-child{
  margin-right: 0;
}
.first-view-nav-item .img-box{
  position: relative;

  display: inline-block;

  width: 90px;
  height: 90px;

  vertical-align: middle;
  /* background: url(assets/img/firstview-nav-breadcrumbs.png) center center no-repeat; */

  background-size: cover;
}
.first-view-nav-item .img-box span{
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;

  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

  color: white;
  background: rgba(0,0,0,0);

  font-size: 24px;
}
.first-view-nav-item.slick-current .img-box:before{
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  content: ' ';

  background: rgba(30,30,30,0.6);
}
.first-view-nav-item .text-box{
  position: relative;

  display: inline-block;

  width: 233px;
  height:90px;
  margin-left: -5px;
  padding-left: 20px;

  vertical-align: middle;

  background: white;
}
.first-view-nav-item .text-box p{
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);

  font-size: 18px;
  font-weight: bold;
}
.first-view-nav-item .text-box span{
  display: block;

  font-size: 13px;
}

.first-view-nav .slick-track{
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;

  -webkit-transform: translate3d(0px, 0px, 0px)!important;
          transform: translate3d(0px, 0px, 0px)!important;
}
@media screen and (min-width: 769px) {
  .first-view .slick-dots {
    position: absolute;
    top: 50%;
    right: 28px;
    bottom: auto;

    display: block;

    width: 16px;
    margin: 0;
    padding: 0;

    list-style: none;

    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    text-align: center;
  }
  .first-view .slick-dots li button {
    width: 16px;
    height: 16px;
  }
  .first-view .slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;

    width: 16px;
    height: 16px;

    content: ' ';
    text-align: center;

    opacity: 1;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50%;

    font-family: slick;
    font-size: 6px;
    line-height:16px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .first-view .slick-dots li button:after {
    position: absolute;
    top: 8px;
    left: 8px;

    width: 8px;
    height: 8px;

    content: ' ';
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    opacity: 0;
    color: #fff;
    border-radius: 50%;
    background-color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .first-view .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
  }
  .first-view .slick-dots li.slick-active button:after {
    opacity: 1;
    color: #fff;
  }
}
@media screen and (max-width: 768px) {
  .first-view{
    width: 100%;
    height: 450px;

    background: url(./assets/img/firstview-nav-breadcrumbs-sp.png) top center no-repeat;
    background-size: 100%;
  }
  .first-view, .first-view-bg-wrap, .first-view-bg-1, .first-view-bg-2, .first-view-bg-3{
    width: 100%;
    height: 450px;
  }
  .first-view-bg-1{
    background: url(./assets/img/firstview-nav-breadcrumbs-sp.png) top center no-repeat;
    background-size: cover;
  }
  .first-view-bg-2{
    background: url(./assets/img/Firstview-2-sp.png) top center no-repeat;
    background-size: cover;
  }
  .first-view-bg-3{
    background: url(./assets/img/Firstview-3-sp.png) top center no-repeat;
    background-size: cover;
  }
  .first-view .container{
    height: 450px;
  }
  .first-view .inner-content{
    position:absolute;
    bottom: 60px;

    width: 80%;
  }
  .first-view .inner-content h2{
    padding-bottom: 30px;

    font-size: 26px;
    line-height: 1;
  }
  .first-view .inner-content h2 span{
    display: block;

    font-size: 84px;
    font-weight: 500;
    line-height: 1.3;
  }
  .first-view .inner-content p{
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
  }
  .first-view-nav{
    position: absolute;
    top: 420px;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
  }
  .first-view-nav-item{
    width: 70px!important;
    height: 70px;
  }
  .first-view-nav-item .img-box{
    position: relative;

    width: 70px;
    height: 70px;

    vertical-align: middle;
    /* background: url(assets/img/firstview-nav-breadcrumbs.png) center center no-repeat; */

    background-size: cover;
  }
  .first-view-nav-item .img-box span{
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    color: white;

    font-size: 24px;
  }
  .first-view-nav-item .text-box{
    display: none;
  }
  .first-view-nav .slick-track{
    width: 100%!important;
  }
  .first-view-nav-item .bar{
    display: none;
  }
  .first-view-nav-item .bar-bg{
    display: none;
  }
  .first-view .slick-dots {
    display: none!important;
  }
}

/* Message */
.home-message{
  color: white;
}
.home-message .main-content{
  margin-top: 50px;
}
.home-message .bg{
  background: url(./assets/img/home-message.png) top center no-repeat;
  background-size: cover;
}
.home-message .inner-content{
  padding: 120px 0;

  text-align: center;
}
.home-message p{
  padding-bottom: 60px;

  color: white;

  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .home-message p{
    padding-bottom: 0px;
  }
}

/* Product */
.home-product .inner-box{
  position: relative;
}
.home-product .inner-box:last-child{
  margin-top: 64px;
  margin-bottom: 60px;
}
.home-product .bc-img-box{
  position: absolute;
  top: 0;
  right: 0;

  width: 55%;
}
.home-product .bc{
  padding-top: 48px;
}
.is-2columns p{
  padding-bottom: 40px;
}
.home-product p{
  width: 75%;
}
.home-product .tf-img-box{
  position: absolute;
  top: 0;
  left: 0;

  width: 55%;
}
.home-product .bc-img-box img,
.home-product .tf-img-box img{
  display: block;
  max-height: 520px;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .home-product .columns {
    margin-top: 0rem;
    margin-right: 0rem;
    margin-left: 0rem;
  }
  .home-product .column {
    padding: 0;
  }
  .home-product img.sp-img{
    position: relative;

    display: block;

    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
  }
  .home-product img.sp-img.tf{
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin: 0 0 0 -20px;
  }
  .home-product p {
    width: 100%;
  }
  .home-product .bc {
    padding-top: 20px;
  }
}

/* Recipe */
.home-recipe{
  text-align: center;

  background: #C64C00;
}
.home-recipe .main-content{
  padding-top: 70px;
  padding-bottom: 70px;
}

.home-recipe h2, .home-recipe h2 span{
  color: white;
}
.recipe-list{
  overflow: hidden;

  height: 100%;

  border-radius: 20px;
  background: white;
}
.recipe-list a .text-box h4, .recipe-list a .text-box p{
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.recipe-list a:hover .text-box h4, .recipe-list a:hover .text-box p{
  color: #D58936;
}
.recipe-list .img-box{
  height: 200px;
}
.recipe-list .text-box{
  padding: 20px;

  text-align: left;
}
.recipe-list .text-box .cat{
  padding: 6px;

  color: white;
  border-radius: 25px;
  background: #D58936;

  font-size: 12px;
  font-weight: bold;
}
.recipe-list .text-box h4{
  padding: 16px 0;

  font-size: 20px;
}
.recipe-list .text-box p{
  color: #959595;

  font-size: 14px;
  line-height: 2;
}
.home-recipe .columns{
  padding-bottom: 48px;
}
@media screen and (max-width: 768px) {
  .home-recipe .main-content{
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .home-recipe .columns {
    padding-bottom: 26px;
  }
}

/* News */
.home-news{
  background: #F7F7F7;
}
.home-news h2{
  padding-bottom: 24px;

  text-align: left;

  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 24px;
}
.home-news h2 span{
  display: inline;

  padding-left: 8px;

  text-align: left;

  color: #111;

  font-size: 12px;
}
.home-news a.more{
  vertical-align: middle;

  font-size: 14px;
  font-weight: bold;
}
.home-news a.more span{
  display: inline-block;

  width: 8px;
  height: 8px;
  margin-left: 4px;

  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  vertical-align: middle;

  border: 0px;
  border-top: solid 1px #C64C00;
  border-right: solid 1px #C64C00;
}
.home-news-list{
  margin-bottom: 20px;
}
.home-news-list:last-child{
  margin-bottom: 0px;
}
.home-news-item{
  display: inline-block;

  margin-right: 20px;

  vertical-align: middle;
}
.home-news-item .date{
  font-size: 14px;
}
.home-news-item .cat{
  position: relative;
  top: -2px;

  padding: 5px 10px;

  color: white;
  border-radius: 25px;
  background-color: #111;

  font-size: 10px;
  font-weight: bold;
}
.home-news-item .news-title{
  font-size: 15px;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .home-news h2{
    display: inline-block;

    width: 48%;
    padding-bottom: 14px;

    font-size: 24px;
  }
  .home-news h2 span{
    display: inline-block;

    font-size: 12px;
  }
  .home-news a.more{
    position: relative;
    right: 0;

    display: inline-block;

    width: 50%;

    text-align: right;

    font-size: 14px;
  }
  .home-news-item:last-child{
    width: 100%;
    padding-top: 8px;

    font-weight: bold;
  }
}

/* Home Bottom Menu */
.home-bottom-menu-item:before{
  position: absolute;

  width: 100%;
  height: 100%;

  content: ' ';
  -webkit-transition: 0.3s;
  transition: 0.3s;

  border-radius: 40px;
  background-color: rgba(0, 0, 0, 00);
}
a.hover-filter:hover .home-bottom-menu-item:before{
  background-color: rgba(0, 0, 0, 0.35);
}
.home-bottom-menu-item{
  position: relative;

  height: 280px;

  color: white;
  border-radius: 40px;
}
.home-bottom-menu-item h2{
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;
  padding: 0;

  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

  font-family: "Montserrat","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 24px;
}
.home-bottom-menu-item h2 span{
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .home-bottom-menu .main-content{
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Footer */
footer{
  color: white;
  background: #4A3624;
}
footer .column.is-two-fifths{
  width: 27%;
}
.infomation{
  padding-top: 24px;

  font-size: 13px;
  font-weight: bold;
}
.infomation .cat{
  padding: 5px;

  border: solid 1px #fff;

  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}
.infomation p{
  padding-top: 12px;

  color: white;

  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 13px;
  line-height: 2.0;
}
.infomation .sns{
  padding-top: 8px;
}
.infomation .sns img{
  padding-right: 8px;
}
footer ul{
	margin: 1em 0;
	padding-left: 1rem;

  font-size: 14px;
}
footer li{
  position: relative;
}
footer li:before{
  position: relative;

  display: inline-block;

  margin-left: -1rem;
  padding-right: 0.75rem;

  content: '-';
}
footer a{
  color: white;
}
footer a:hover{
  color: white;
}
.footer-bottom .columns{
  -webkit-box-align: end;
          align-items: flex-end;
      -ms-flex-align: end;
}
.footer-bottom .column{
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
}
.footer-bottom p{
  text-align: center;

  color: white;

  font-size: 12px;
}
footer .btn{
  width: 218px;
}
@media screen and (min-width:769px) {
  footer .footer-top .column.small{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;

    width: 15%;
  }
  footer .footer-top .column.big{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;

    width: 25%;
  }
  footer .footer-bottom .column.big{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;

    width: 45%;
  }
}

@media screen and (max-width: 768px) {
  footer .column.is-two-fifths{
    width: 100%;
    margin-bottom: 30px;

    text-align: center;
  }
  footer .btn {
    width: 296px;
    height: 50px;
    margin-bottom: 25px;
  }
  footer .main-content{
    padding-top: 50px;
    padding-bottom: 70px;
  }
  .infomation {
    padding-top: 36px;
  }
  .infomation .sns {
    padding-top: 20px;
  }
}

/*********
 *********

 News List Page

 *********
 *********/
/* パンくずリスト */
.breadcrumb{
  width: 100%;
  margin: 0!important;
  padding: 9px 0;

  background: #F7F7F7;
}
.breadcrumb li+li::before {
    display: none;
}
.breadcrumb li{
  display: inline-block;

  vertical-align: middle;

  font-size: 12px;
}
.breadcrumb li a{
  display: inline-block;

  color: #111;
}
.breadcrumb li:after{
  position: relative;
  top: -1px;
  left: -2px;

  display: inline-block;

  width: 8px;
  height: 8px;
  margin-right: 8px;

  content: ' ';
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  vertical-align: middle;

  border: 0px;
  border-top: solid 1px #111;
  border-right: solid 1px #111;
}
.breadcrumb li:last-child:after{
  display: none;
}
/* ヘッダー */
.header-title{
  padding: 48px 0;
}
.header-title h2{
  font-size: 36px;
}
.header-title span{
  display: block;

  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .header-title{
    height: 233px;
    padding-top: 84px;
    padding-bottom: 0;
  }
  .header-title h2{
    text-align: center;

    font-size: 32px;
  }
  .header-title.page-header-1{
    padding-top: 53px;
  }
}

/* 記事一覧 */
.archive h1{
  margin-bottom: 20px;
}
body.page .article-list, body.archive .article-list{
  background: #F7F7F7;
}
.article-box{
  padding-right: 24px;
}
.article-list-item{
  display: block;

  margin-bottom: 20px;
}
.article-list-item .columns{
  margin: 0;
}
.article-list-item .column{
  padding: 0;
}
.article-list-item .text-box{
  padding: 20px 30px 25px;

  background-color: white;
}
.article-list-item .date, .article-list-item p{
  color: #959595;
}
.article-list-item .date{
  font-size: 12px;
}
.page .main-content .article-list-item h3, .archive .main-content .article-list-item h3{
  padding: 20px 0 14px;

  text-align: left;

  font-size: 16px;
}
.article-list-item p{
  padding-bottom: 14px;

  font-size: 14px;
}
.article-list-box .cat{
  padding: 5px 10px;

  color: white;
  border-radius: 80px;
  background: #111;

  font-size: 10px;
  font-weight: bold;
}
.article-list-side{
  padding-left: 24px;
}
.page .main-content .article-list-side h3, .single .main-content .article-list-side h3, .archive .main-content .article-list-side h3{
  margin-bottom: 10px;

  border-bottom: solid #C64C00 2px;

  font-size: 18px;
}
.article-list-side .widget{
  padding-bottom: 40px;
}
.article-list-side li{
  padding: 8px 0;

  border-bottom: solid 1px #CCCCCC;

  font-size: 15px;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .article-list-item .columns{
    padding: 20px;

    background: white;
  }
  .article-list-item .text-box{
    padding: 0px 0px 5px 10px;

    background-color: white;
  }
  .page .main-content .article-list-item h3, .archive .main-content .article-list-item h3{
    margin-bottom: 0px;
    padding: 10px 0 14px;
  }
  .article-list-side{
    padding-right: 20px;
    padding-left: 20px;
  }
  .page .main-content .article-list-side h3, .single .main-content .article-list-side h3, .archive .main-content .article-list-side h3{
    text-align: left;
  }
}


/*********
 *********

 Single News

 *********
 *********/
.article-single{
  background: white;
}
.article-single .main-content{
 padding-top: 30px;
}
.page-title-bar{
  width: calc(200px + 50vw - 50%);
  margin: 0 0 0 calc(50% - 50vw);
  padding: 0 0 0 calc(50vw - 50%);

  color: white;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  background:#C64C00;
}
.article-single .page-title-bar{
  margin-bottom: 30px;
}
.page-title-bar h3{
  padding: 12px 0;

  font-size: 20px;
}
.article-single .article-header .date{
  font-size: 14px;
  font-weight: bold;
}
.article-single .article-header h1{
  margin: 20px 0 25px;

  font-size: 32px;
  line-height: 1.5;
}
.article-single .article-header .cat{
  padding: 7px 14px;

  color: white;
  border-radius: 80px;
  background-color: #111;

  font-size: 12px;
  font-weight: bold;
}
.article-single .article-header img{
  margin: 30px 0;
}
.article-content {
  padding-bottom: 80px;

  text-align: left;

  font-size: 16px;
}
.article-content h2{
  margin: 40px 0;
  padding: 0.25em 0.5em;

  text-align: left;

  color: #111;
  border-left: solid 4px #C64C00;
  background: transparent;

  font-size: 24px;
}
.article-content h3{
  margin: 40px 0 30px;

  text-align: left;

  font-size: 20px;
}
.pagination{
  -webkit-box-pack: justify;
  -webkit-box-pack: center;
      -ms-flex-pack: justify;
      -ms-flex-pack: center;
          justify-content: space-between;
          justify-content: center;

  width: auto;
  height: 32px;
  margin: 60px auto 0;
}
.pagination .pager{
  width: 34px;
  margin: 0 6px;

  color: #959595;

  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.pagination .pager:hover{
  color: #111;
}
.pagination .current{
  position: relative;

  color: #111;
}
.pagination .current:after{
  position: absolute;
  bottom: -5px;
  left: 50%;

  width: 10px;
  height: 2px;

  content: '';
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);

  background-color: #111;
}
.pagination .abb{
  color: #959595;

  font-size: 14px;
}
.pagination .pg-arrow{
  position: relative;

  width: 32px;
  height: 32px;

  -webkit-transition: .3s;
  transition: .3s;

  color: #C64C00;
  border: solid 2px #C64C00;
  border-radius: 50%;

  font-weight: bold;
}
.pagination .pg-arrow:hover{
  background: #C64C00;
}
.pagination .pg-arrow.prev{
  margin-right: 20px;
}
.pagination .pg-arrow.next{
  margin-left: 20px;
}
.pagination .pg-arrow::after {
  position: absolute;
  top: 50%;
  left: 43%;

  width: 8px;
  height: 8px;

  content: ' ';

  line-height: 32px;
}
.pagination .pg-arrow.next::after {
  left: 43%;

  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
      transform: translate(-50%, -50%) rotate(45deg);

  border-top: 2px solid #C64C00;
  border-right: 2px solid #C64C00;
}
.pagination .pg-arrow.prev::after {
  left: 53%;

  -webkit-transform: translate(-50%, -40%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
      transform: translate(-50%, -50%) rotate(45deg);

  border-bottom: 2px solid #C64C00;
  border-left: 2px solid #C64C00;
}
.pagination .pg-arrow:hover::after{
  border-color: white;
}
@media screen and (max-width: 768px) {
  .article-content h2{
    font-size: 22px;
  }
  .article-content h3{
    text-align: left;
  }
  .article-single .article-header h1 {
    margin: 20px 0 25px;

    font-size: 28px;
  }
  .article-box {
    padding-right: 0px;
  }
  .article-single .column.is-three-quarters{
    padding-bottom: 60px;
  }
  .article-content {
    padding-bottom: 60px;
  }
  .page-title-bar h3{
    text-align: left;
  }
  .page-title-bar {
    width: 238px;
    margin: 0 0 0 -20px;
    padding: 0 0 0 20px;

    color: white;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    background: #C64C00;
  }
  body.page .page-title-bar h3 {
    padding: 12px 0;

    font-size: 20px;
  }
  .article-single .article-header img{
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin: 30px 0 30px -20px;
  }
  .article-list .main-content{
    padding-bottom: 0;
  }
  .pagination .pager{
    width: auto;
    margin: 0;
  }
  .article-list-box{
    margin-bottom: 48px;
  }
  .article-list-side{
    width: calc(100% + 40px);
    margin: 0 0 0 -20px;
    padding: 60px 40px;

    background: white;
  }
  .widget{
    position: relative;
    z-index: 10;
  }
  .pagination{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    width: 100%;
    margin-top: 40px;
    padding: 0 32px;
  }
}

/*********
 *********

 Company

 *********
 *********/

 .page p, .profile{
   font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
 }

/* Greeting */
.company-greeting{
  position: relative;
}
.company-greeting .main-content{
  padding-bottom: 24px;
}
h3 span.title-bg-orange{
  display: inline-block;

  margin-bottom: 30px;
  padding: 6px 18px;

  color: white;
  background: #C64C00;

  font-size: 16px;
}
.page .main-content h3{
  margin-bottom: 24px;

  font-size: 32px;
}
.page-thumb_1{
  position: relative;
  top: -160px;
  right: 0;

  width: 156%;

  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
}
.page-header-1 .text-box{
  width: 80%;
}
.company-greeting p{
  margin-bottom: 30px;
}
.company-greeting .representative{
  display: block;
  font-size: 18px;
  font-weight: bold;
}
.company-greeting .representative .name{
  font-size: 24px;
}
@media screen and (max-width: 768px) {
  .company-greeting .main-content{
    padding-bottom: 30px;
  }
  section.page-header-1 .page-thumb_1{
    top: auto;

    width: calc(100% + 20px);
    margin-top: -120px;
    margin-bottom: 30px;
  }
  .page-header-1 .text-box{
    width: 100%;
  }
  h3 span.title-bg-orange{
    display: inline-block;

    margin-bottom: 20px;
    padding: 6px 18px;

    color: white;
    background: #C64C00;

    font-size: 16px;
  }
}

/* Philosophy */
.border-box-wrap-left .column.is-two-fifths{
  width: 45%;
}
.border-box-wrap-left .column.is-three-fifths{
  width: 55%;
}
.border-box-wrap-left .img-box{
  position: relative;
  z-index: 10;
  top: -60px;
}
.border-box-wrap-left .text-box{
  position: relative;
  z-index: 1;
  left: -20%;

  width: calc(100% + 20%);
  padding: 60px 60px 60px 25%;

  border: solid 4px #C64C00;
  border-radius: 40px;
}
.company-philosophy ul{
  margin: 1em 0;
	padding-left: 1rem;

  list-style-type: decimal;

  font-weight: bold;
}
.border-box-wrap-right .column.is-three-fifths{
  width: 55%;
}
.border-box-wrap-right .column.is-two-fifths{
  width: 45%;
}
.border-box-wrap-right .img-box{
  position: relative;
  z-index: 10;
  top: -60px;
}
.border-box-wrap-right .text-box{
  position: relative;
  z-index: 1;
  /* right: -20%; */

  width: calc(100% + 20%);
  padding: 60px 25% 60px 60px;

  border: solid 4px #C64C00;
  border-radius: 40px;
}
.company-vision .main-content{
  padding-top: 100px;
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .company-vision .main-content{
    padding-top: 30px;
    padding-bottom: 60px;
  }
  .border-box-wrap-left .column.is-two-fifths{
    width: 100%;
  }
  .border-box-wrap-left .column.is-three-fifths{
    width: 100%;
  }
  .border-box-wrap-right .column.is-three-fifths{
    width: 100%;
  }
  .border-box-wrap-right .column.is-two-fifths{
    width: 100%;
  }
  .border-box-wrap-left .img-box{
    position: relative;
    z-index: 10;
    top: 0px;
  }
  .border-box-wrap-right .img-box{
    position: relative;
    z-index: 10;
    top: 0px;
  }
  .border-box-wrap-right .text-box, .border-box-wrap-left .text-box{
    position: relative;
    z-index: 1;
    left: auto;

    width: 100%;
    padding: 8px 20px 0px 20px;

    border: none;
    border-radius: none;
  }
}

/* Company Profile */
.company-profile{
  background-color: #FAFAFA;
}
.company-profile .main-content{
  padding-top: 80px;
  padding-bottom: 80px;
}
.profile .columns{
  padding-top: 1rem;
  padding-bottom: 1rem;

  border-top: solid 1px #CCCCCC;
}
.profile .column{
  padding-right: 0;
}
.profile .columns .columns{
  margin: 0;
  padding: 2rem 0 0 0;

  border: none;
}
.profile .columns .columns:first-child{
  padding-top: 0;
}
.profile .column .column{
  padding: 0;
}
.profile .column .column:first-child{
  padding-right: 16px;
}

.profile .column.is-one-quarter{
  padding-left: 32px;

  font-weight: bold;
}
.profile a{
  display: block;
}
.profile p{
  padding-top: 2rem;
}
.profile p:first-child{
  padding-top: 0;
}
a.address{
  text-decoration: underline;
}
a.address:hover{
  color: #C64C00;
}
a.address img{
  display: inline-block;

  width: 20px;
  margin-left: 12px;

  vertical-align: middle;
}
a.link-orange{
  display: inline-block;

  color: #C64C00;

  font-weight: bold;
}
a.link-orange span{
  position: relative;
  top: -1.5px;

  display: inline-block;

  width: 8px;
  height: 8px;
  margin-left: 4px;

  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  vertical-align: middle;

  border: 0px;
  border-top: solid 1px #C64C00;
  border-right: solid 1px #C64C00;
}
a.link-orange:hover{
  color: #C64C00;
}
.map {
  width: 100%;
  height: 240px;
  padding-top: 16px;
}
.position-wrap .position{
  display: inline-block;
}
.position-wrap .position:nth-child(odd){
  width: 45%;
}
.position-wrap .position:nth-child(even){
  width: 50%;
}
.position-wrap .position .inline-block:first-child{
  width: 40%;
}
.position-wrap .position .inline-block:last-child{
  width: 55%;
}
.profile .org{
  position: relative;
  top: -60px;

  width: 100%;
}
@media screen and (max-width: 769px) {
  .company-profile .main-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .profile .columns {
    margin: 0;
  }
  .profile .column.is-one-quarter {
    padding-right: 0.75rem;
    padding-bottom: 0;
    padding-left: 0.75rem;

    font-weight: bold;
  }
  .profile .column {
    padding-right: 0.75rem;
  }
  .profile img {
    padding-top: 2rem;
  }
  .profile .position-wrap .position{
    display: block;

    width: 100%;
    margin-bottom: 0.5rem;
  }
  a.address img {
    display: inline-block;

    width: 20px;
    margin-left: 12px;
    padding-top: 0;

    vertical-align: middle;
  }

}

/* Company History */
.company-history .main-content{
  padding-top: 100px;
  padding-bottom: 100px;
}
img.no-display{
  display: none;

  -webkit-transition: .3s;
  transition: .3s;
}
img.no-display.active{
  display: block!important;

  -webkit-transition: .3s;
  transition: .3s;
}
a.short-view{
  display: none;
}
@media screen and (max-width: 768px) {
  .company-history .main-content{
    padding-top: 60px;
    padding-bottom: 60px;
  }
  a.more-view{
    position: relative;

    margin-top: 20px;

    border-color: #C64C00;
  }
  a.more-view span{
    color: #C64C00;
  }
  a.more-view span:before{
    position: absolute;
    top: 50%;
    right: 80px;

    width: 16px;
    height: 16px;

    content: '+';
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    text-align: center;

    color: #C64C00;
    border: solid 1px #C64C00;

    font-size: 16px;
    font-weight: 300;
    line-height: 0.9;
  }
  a.more-view.active{
    display: none!important;
  }
  a.short-view{
    position: relative;

    display: none;

    margin-top: 20px;

    border-color: #C64C00;
  }
  a.short-view span{
    color: #C64C00;
  }
  a.short-view span:before{
    position: absolute;
    top: 50%;
    right: 80px;

    width: 16px;
    height: 16px;

    content: '-';
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    text-align: center;

    color: #C64C00;
    border: solid 1px #C64C00;

    font-size: 16px;
    font-weight: 300;
    line-height: 0.9;
  }
  a.short-view.active{
    display: block!important;
  }
  .company-group .main-content{
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* Company History */
.company-env{
  background: url(./assets/img/company-env-bg.png) center center no-repeat;
  background-size: cover;
}
.company-env h2, .company-env h2 span{
  color: white;
}
.company-env .main-content{
  padding-top: 100px;
  padding-bottom: 100px;
}
.company-env .columns{
  -webkit-box-align: center;
          align-items: center;
      -ms-flex-align: center;
}
.company-env p{
  color: white;

  font-size: 18px;
  font-weight: bold;
}

/* Company Group */
.company-group .main-content{
  padding-top: 100px;
  padding-bottom: 100px;
}

/*********
 *********

 Restaurant

 *********
 *********/
.restaurant-head .page-thumb_1{
  width: 157%;
}
.restaurant-head .main-content{
  padding-bottom: 0;
}
.restaurant-head p{
  font-size: 18px;
  font-weight: bold;
}
.restaurant-menu .main-content{
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .restaurant-menu .columns{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .restaurant-menu .columns .column{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;

    width: 47%;
  }
}
@media screen and (max-width: 768px) {
  .restaurant-head .page-thumb_1 {
    width: calc(100% + 20px);
  }
  .restaurant-head .main-content{
    padding-bottom: 30px;
  }
}
.restaurant-menu .img-box{
  padding-bottom: 32px;
}
.restaurant-menu .text-box{
  padding-bottom: 48px;
}
.restaurant-menu .text-box h3{
  margin: 0;
  padding-bottom: 8px;

  font-size: 20px;
}

.orange-banner{
  margin-bottom: 50px;
  padding: 40px 0;

  background: #C64C00;
}
.restaurant-sub-title h3{
  text-align: center;

  color: white;

  font-size: 20px;
}
.shop-infomation .header-img{
  display: block;

  margin-bottom: 64px;
}
.shop-infomation .main-content{
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .restaurant-menu .text-box {
    padding-bottom: 32px;
  }
  .restaurant-menu .main-content{
    padding-top: 30px;
    padding-bottom: 20px;
  }
  .orange-banner.restaurant-sub-title{
    margin-bottom: 0px;
  }
  .shop-infomation .main-content {
    padding-bottom: 60px;
  }
  .restaurant-menu .text-box h3 {
    text-align: left;
  }
}

/*********
 *********

 Product / 商品一覧

 *********
 *********/
@media screen and (min-width: 768px) {
 .product .is-2columns .is-two-fifths.left{
   width: 47%;
   padding-right: 36px;
 }
 .product .is-2columns .is-two-fifths.right{
   width: 47%;
   padding-left: 36px;
 }
}

/*********
 *********

 Bread Crumbs / パン粉

 *********
 *********/
.bread-business .main-content{
  padding-top: 0;
}
.bread-business .bg{
 position: relative;

 height: 600px;

 background: url(./assets/img/bread-business.png) top center no-repeat;
 background-size: cover;
}
.bread-business .inner-content{
  position: absolute;
  right: 80px;
  bottom: 100px;

  width: 340px;

  color: white;
}
.bread-business .title-underbar, .bread-home .title-underbar, .bread-bottom .title-underbar{
  background-color: white;
}
.bread-business .inner-content p, .bread-home .inner-content p, .bread-bottom .inner-content p{
  padding-bottom: 60px;

  color: white;

  font-weight: bold;
}
.bread-home .bg{
 position: relative;

 height: 600px;

 background: url(./assets/img/bread-home.png) top center no-repeat;
 background-size: cover;
}
.bread-home .inner-content{
  position: absolute;
  bottom: 100px;
  left: 80px;

  width: 340px;

  color: white;
}
.bread-bottom{
  text-align: center;

  color: white;
}
.bread-picky .inner-content{
  padding: 80px;

  border-radius: 40px;
  background: url(./assets/img/bread-particular.png) top center no-repeat;
  background-size: cover;
}
.bread-bottom .inner-content p{
  padding-bottom: 40px;
}
.bread-bottom .title-underbar{
  margin-right: auto;
  margin-left: auto;
}
.bread-process .main-content{
  padding-bottom: 100px;
}
.bread-process .inner-content{
  padding: 80px;

  border-radius: 40px;
  background: url(./assets/img/bread-flow.png) top center no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .bread-home .main-content {
    padding-top: 0;
    padding-bottom: 0;
  }
  .bread-business .main-content {
    padding-top: 40px;
    padding-bottom: 0px;
  }
  .bread-business .inner-content, .bread-home .inner-content{
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;
    padding: 80px 0;

    text-align: center;

    color: white;
  }
  .bread-business .bg, .bread-home .bg{
    position: relative;

    height: auto;
  }
  .bread-business .bg:before, .bread-home .bg:before{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: ' ';

    background: rgba(0, 0, 0, 0.2);
  }
  .bread-picky .main-content, .bread-process .main-content{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .bread-picky .main-content{
    padding-bottom: 10px;
  }
  .bread-process .main-content{
    padding-top: 10px;
  }
  .bread-picky .inner-content, .bread-process .inner-content{
    padding: 80px 20px;

    border-radius: 40px;
    background-size: cover;
  }
  .bread-business .inner-content p, .bread-home .inner-content p, .bread-bottom .inner-content p{
    text-align: center;
  }
  .bread-bottom .btn{
    width: 100%;
  }
}

/*********
 *********

 Theaflavin / テアフラビン

 *********
 *********/
.theaflavin-about .main-content{
  padding-top: 0;
}
.theaflavin-column .main-content{
  padding-top: 100px;
  padding-bottom: 100px;
}
.theaflavin-column.border-box-wrap-left .main-content{
  padding-top: 50px;
  padding-bottom: 100px;
}
.theaflavin-ty1 .bg{
  height: 618px;
  background: url(./assets/img/theaflavin-ty1.png) top center no-repeat;
  background-size: cover;
}
.theaflavin-ty1 .inner-content{
  position: absolute;
  right: 80px;
  bottom: 40px;

  width: 340px;

  color: white;
}
.theaflavin-ty1 .inner-content h3{
  line-height: 1.6;
}
.theaflavin-tiful .bg{
  height: 618px;
  background: url(./assets/img/theaflavin-tiful.png) top center no-repeat;
  background-size: cover;
}
.theaflavin-tiful .main-content{
  padding-bottom: 100px;
}
.theaflavin-tfplus .bg{
  height: 618px;
  background: url(./assets/img/theaflavin-tfplus.png) top center no-repeat;
  background-size: cover;
}
.theaflavin-tfplus .main-content{
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .theaflavin-about .main-content, .theaflavin-column .main-content {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .theaflavin-column.border-box-wrap-left .main-content {
    padding-top: 20px;
    padding-bottom: 0px;
  }
  .theaflavin-ty1 .inner-content {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px;

    color: white;
  }
  .theaflavin-ty1 h3, .theaflavin-tiful h3{
    line-height: 1;
  }
  .theaflavin-ty1 .bg {
    height: 610px;

    background: url(./assets/img/theaflavin-ty1-sp.png) top center no-repeat;
    background-size: cover;
  }
  .bread-business .bg:before, .bread-home .bg:before {
    display: none;

    content: ' ';
  }
  .theaflavin-ty1 .inner-content p, .theaflavin-tiful .inner-content p {
    padding-bottom: 40px;

    text-align: left;
  }
  .theaflavin-tiful .bg {
    height: 610px;

    background: url(./assets/img/theaflavin-tiful-sp.png) top center no-repeat;
    background-size: cover;
  }
  .theaflavin-tiful .main-content {
    padding-bottom: 0px;
  }
  .theaflavin-tfplus .bg {
    height: 610px;

    background: url(./assets/img/theaflavin-tfplus-sp.png) top center no-repeat;
    background-size: cover;
  }
  .theaflavin-tfplus.bread-home .inner-content {
    padding-top: 116px;
  }
  .theaflavin-tfplus .main-content {
    padding-bottom: 0px;
  }
  .page .theaflavin-about .main-content h3, .page .theaflavin-column .main-content h3{
    margin-bottom: 20px;
  }
}

/*********
 *********

 Particular / パン粉へのこだわり

 *********
 *********/
.page .page-title-bar h3{
  padding: 12px 0;

  font-size: 20px;
}
.page-header-2 .main-content{
  padding-bottom: 0;
}
.page-header-2 .main-content h2 {
  padding-bottom: 0;

  text-align: left;

  font-size: 36px;
}
.particular-strength .main-content h2{
  padding-bottom: 140px;
}
.particular-strength .container .main-content{
  padding-bottom: 100px;
}
.particular-strength .container .main-content.first{
  padding-top: 0;
}
.page .particular-strength h3{
  color: #C64C00;

  font-size: 24px;
}
.page-num{
  position: absolute;
  top: -60px;
  left: -70px;

  width: 137px;
  height: 137px;

  text-align: center;

  color: white;
  border-radius: 50%;
  background: #C64C00;

  font-weight: bold;
}
.page-num-inner{
  position: relative;

  width: 100%;
  height: 100%;
}
.page-num-inner div{
  position: absolute;
  top: 50%;
  left: 50%;

  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);

  font-size: 50px;
}
.page-num span{
  position: relative;
  top: 10px;

  display: block;

  font-size: 14px;
}
.page-num.right{
  position: absolute;
  right: -70px;
  left: auto;
}
.yokoyama.bg h2 span{
  color: white;
}
.yokoyama .main-content{
  padding-top: 100px;
}
.page .bg .border-box-wrap-right .text-box, .page .bg .border-box-wrap-left .text-box{
  color: white;
  border-color: white;
}
.page .bg .border-box-wrap-right .text-box h3, .page .bg .border-box-wrap-left .text-box h3,
.page .bg .border-box-wrap-right .text-box p, .page .bg .border-box-wrap-left .text-box p{
  color: white;

  font-weight: bold;
}
.page .bg .border-box-wrap-right .page-num, .page .bg .border-box-wrap-left .page-num,
.page .bg .border-box-wrap-right .page-num span, .page .bg .border-box-wrap-left .page-num span{
  color: #C64C00;
  background: white;
}

.particular-bottom .main-content{
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .particular-strength .main-content h2 {
    padding-bottom: 40px;
  }
  .particular-strength .border-box-wrap-right .text-box, .particular-strength .border-box-wrap-left .text-box {
    position: relative;
    z-index: 100;
    left: auto;

    width: 100%;
    padding: 30px 0 0px 0;

    border: none;
    border-radius: none;
  }
  .page-num ,.page-num.right{
    position: static;
    z-index: 100;
    top: auto;
    right: auto;
    left: auto;

    display: block;

    width: 110px;
    height: 110px;
    margin: 0 auto;
    margin-top: -100px;
    margin-bottom: 20px;
  }
  .page-num-inner div {
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);

    font-size: 40px;
  }
  .page-num span {
    font-size: 12px;
  }
  .particular-strength .container .main-content {
    padding-top: 0;
    padding-bottom: 40px;
  }
  .particular-strength .container .main-content:last-child {
    padding-bottom: 10px;
  }
  .yokoyama .main-content {
    padding-top: 60px;
  }

  .particular-bottom .main-content{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .particular-bottom .home-bottom-menu-item, .flow-bottom .home-bottom-menu-item {
    height: 188px;
  }
}

/*********
 *********

 FLOW / パン粉ができるまで

 *********
 *********/
 .flow{
   text-align: center;
 }
 .flow img{
   display: block;

   margin: 0 auto;
 }
.flow-bottom{
  background-color: #FAFAFA;
}
.flow-bottom .main-content{
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .flow-bottom{
    background: none;
  }
  .flow-bottom .main-content {
    padding-top: 20px;
    padding-bottom: 20px;
}
}

/*********
 *********

 Danish Crumbs / デニッシュクラム

 *********
 *********/
.danish-about .main-content{
  padding-top: 0;
  padding-bottom: 50px;
}
.is-3column .column{
  position: relative;
}
@media screen and (min-width:768px) {
  .is-3column .columns{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .is-3column .column{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;

    width: 28.5%;
  }
}
.is-3column .img-box{
  padding-bottom: 16px;
}
.is-3column .text-box{
  font-weight: bold;
}
.is-3column ul{
	margin: 0;
	padding-left: 1rem;

  font-size: 14px;
}
.is-3column ul li{
  position: relative;

  font-weight: normal;
}
.is-3column ul li:before{
  position: relative;

  display: inline-block;

  margin-left: -1rem;
  padding-right: 0.75rem;

  content: '-';
}
.is-3column .page-num{
  top: -24px;
  left: -30px;

  width: 90px;
  height: 90px;
}
.is-3column .page-num-inner div{
  font-size: 30px;
}
.is-3column .page-num span{
  position: relative;
  top: 5px;

  display: block;

  font-size: 12px;
}
.home-message.danish-sweets .bg{
  background: url(./assets/img/sweets.png) top center no-repeat;
  background-size: cover;
}
.danish-big-bg .columns{
  width: 80%;
  margin: 0 auto;
}
.danish-big-bg p{
  font-weight: bold;
}
.home-message.danish-fries .bg{
  background: url(./assets/img/fries.png) top center no-repeat;
  background-size: cover;
}
.home-message.danish-arrange .bg{
  background: url(./assets/img/arrange.png) top center no-repeat;
  background-size: cover;
}
.danish-pick_up{
  text-align: center;

  font-weight: bold;
}
.danish-pick_up h4{
  padding: 60px 0 20px;

  font-size: 24px;
}
.danish-pick_up .main-content{
  padding-bottom: 100px;
}
.danish-specification{
  background: #FAFAFA;
}
.danish-specification .main-content{
  padding-top: 100px;
  padding-bottom: 100px;
}
.danish-big-bg .title-underbar {
    margin: 0 auto;
    margin-bottom: 40px;

    background: #fff;
}
.danish-pick_up h4{
  padding-bottom: 40px;
}
.danish-pick_up table{
  width: 490px;

  table-layout: fixed;
}
.danish-pick_up table, .danish-pick_up table tr, .danish-pick_up table td{
  border:1px solid #C64C00;
}
.danish-pick_up table tr th, .danish-pick_up table tr td{
  height: 64px;

  text-align: center;
  vertical-align: middle;

  font-size: 14px;
}
.danish-pick_up table tr:nth-child(1) td:first-child, .danish-pick_up table tr:nth-child(3) td:first-child{
  font-weight: normal;
}
.danish-pick_up table tr th:first-child{
  width: 150px;
}
.danish-pick_up table thead tr{
  background: #C64C00;
}
.danish-pick_up table thead tr th{
  color: white;
  border-right: solid 1px white;
}
.danish-pick_up table thead tr th:last-child{
  color: white;
  border-right: solid 1px #C64C00;
}
.danish-pick_up table tbody tr.strong td:last-child{
  color: #C64C00;
}
.danish-pick_up table tbody tr.border{
  border-bottom: solid 3px #C64C00;
}
.danish-pick_up span.reference{
  font-size: 14px;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .is-3column .column:nth-child(n+2) {
    padding-top: 30px;
  }
  .is-3column .img-box {
    position: relative;

    margin-top: 50px;
    padding-bottom: 20px;
  }
  .is-3column .page-num, .is-3column .page-num.right{
    position: absolute;
    top: 40px;
    right: auto;
    left: 50%;

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .danish-about .main-content {
    padding-top: 0;
    padding-bottom: 60px;
  }
  .home-message .main-content {
    margin-top: 0px;
    margin-bottom: 0;
    padding-top: 0px;
    padding-bottom: 0;
  }
  .home-message.top-margin .main-content {
    margin-top: 50px;
    margin-bottom: 0;
    padding-top: 50px;
    padding-bottom: 0;
  }
  .danish-big-bg p {
    padding-bottom: 40px;
  }
  .danish-big-bg .columns {
    width: 100%;
    margin: 0 auto;
  }
  .home-message .inner-content {
    padding: 60px 0;

    text-align: center;
  }
  .profile .column, .profile .column.is-one-quarter {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/*********
 *********

  Dressing / ドレッシング

 *********
 *********/
.dressing-about .main-content{
  padding-top: 0;
  padding-bottom: 50px;
}
.dressing-about h4{
  font-size: 20px;
}
.dressing-about p{
  font-weight: normal;
}
.dressing-tastes{
  background: #FAFAFA;
}
.dressing-tastes .img-box{
  width: 40%;

  vertical-align:  text-top;
}
.dressing-tastes .text-box{
  width: 58%;
  padding-bottom: 10px;

  vertical-align: middle;
}
.dressing-tastes .flexbox{
  -webkit-box-align: end;
          align-items: flex-end;
      -ms-flex-align: end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.dressing-tastes .text-box h3{
  line-height: 1.3;
}
.dressing-tastes .text-box span{
  padding-bottom: 20px;
}
.dressing-tastes .text-box p{
  padding-bottom: 48px;
}
.dressing-tastes .text-box a{
  width: 100%;

  border-color: #D58936;
  background: rgba(0, 0, 0, 0);
}
.dressing-tastes .text-box a span{
  padding-bottom: 0;

  color: #D58936;
}
.dressing-tastes .text-box a:hover{
  background: #D58936;
}
.dressing-tastes .text-box a:hover span{
  color: white;
}
.dressing-specification .main-content{
  padding-top: 100px;
  padding-bottom: 100px;
}
@media screen and (min-width:768px) {
  .dressing-specification-wrap{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .dressing-specification-box{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;

    width: 46.5%;
  }
}
@media screen and (max-width: 768px) {
  .dressing-tastes .img-box, .dressing-tastes .text-box {
    display: block;

    width: 100%;

    text-align: center;
  }
  .dressing-tastes .img-box{
    padding-bottom: 40px;
  }
  .dressing-tastes .img-box img{
    width: 182px;
  }
  body.page .dressing-tastes .main-content h3 {
    margin-bottom: 0;

    font-size: 32px;
  }
  .dressing-tastes .text-box {
    padding-bottom: 60px;
    padding-left: 20px;
  }
  .dressing-tastes .text-box p {
    padding-bottom: 30px;
  }
  .dressing-tastes .main-content{
    padding-bottom: 0;
  }
  .dressing-specification .main-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/*********
 *********

  Other / かんすい/その他

 *********
 *********/
.other-head{
  color: white;
  background: url(./assets/img/kansui.png) top center no-repeat;
  background-size: cover;
}
.other-head .main-content{
  padding-top: 64px;
  padding-bottom: 64px;
}
.other-head h3, .other-head p{
  color: white;

  font-weight: bold;
}
.other-head p{
  width: 440px;

  font-size: 18px;
}
.other-head .title-underbar{
  background: white;
}
.page .table-wrap{
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  max-width: 1080px;

  white-space: nowrap;
}
.other table{
  width: 1080px;

  table-layout: fixed;

  white-space: normal;
}
.other-product table thead tr td{
  height: 55px;

  text-align: center!important;

  background: #FAFAFA;

  font-size: 15px!important;
  font-weight: normal!important;
}
.other-product table tr td{
  height: 131px;

  vertical-align: middle;
}
.other table, .other table tr td{
  border:1px solid #CCCCCC;
  border-collapse: collapse;
}
.other-product table tr td:first-child{
  width: 36px;

  text-align: center;

  font-size: 14px;
}
.other span.num{
  position: relative;
  z-index: 100;
}
.other span.num:after{
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;

  width: 18px;
  height: 18px;

  content: ' ';
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);

  border-radius: 50%;
  background: white;
}
.other .purple{
  color: #6761A8;
  background: #6761A8;
}
.other .orange{
  color: #B46B3C;
  background: #B46B3C;
}
.other .gold{
  color: #AD9356;
  background: #AD9356;
}

.other-product table tr td:nth-child(2){
  width: 213px;

  text-align: center;

  font-weight: bold;
}
.other-product table tr td:nth-child(3){
  width: 135px;

  text-align: center;

  font-size: 15px;
}
.other-product table tr td:nth-child(4){
  width: 434px;
  padding: 0 20px;

  text-align: left;
}
.other-product table tr td:nth-child(5){
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 182px;
  padding: 0 20px;

  text-align: left;

  font-size: 14px;
}
.other-product .comp-name{
  display: inline-block;

  width: 90%;
}
.other-product table tr td .comp-num{
  display: inline-block;

  width: 25%;
  margin-bottom: 2px;

  text-align: right;
}
.page .other-use h3{
  font-size: 24px;
}
.other-use h3 span{
  display: inline-block;

  padding-top: 0px;
  padding-bottom: 0px;

  vertical-align: middle;
}
.other-use h3 span.cat{
  display: inline-block;

  margin-right: 20px;
  padding: 10px 20px;

  vertical-align: middle;

  color: white;
  border-radius: 10px;
  background: #C64C00;

  font-size: 18px;
  line-height: 1;
}
.other-use .table-wrap{
  margin: 36px 0;
}
.other-use thead tr{
  padding: 40px 0;
}
.other-use thead tr td{
  height: 55px;
  padding: 0 40px;

  vertical-align: middle;
}
.other-use table tr p{
  padding: 30px 40px;
}
.other-use .inline-block{
  padding-right: 20px;

  vertical-align: middle;

  color: white;

  font-weight: bold;
}
.other-use .inline-block{
  font-size: 20px;
}
.other-use .inline-block .num{
  position: relative;
  top: -1px;

  margin-right: 12px;

  vertical-align: middle;

  background: inherit;

  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
}
.other-use tr.bottom td{
  width: 61.7px;
  height: 40px;

  text-align: center!important;
  vertical-align: middle;

  font-size: 15px;
}
.other-use tr.bottom.wide td{
  width: 172.5px;
}
.other-use table tr.bottom td.pome{
  width: 216px;

  background: #FAFAFA;

  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
}
.other-use table tr.bottom td.konakan{
  height: 56px;

  background: #FAFAFA;

  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
}
.other-use .example{
  padding-bottom: 10px;
}
.other-use .example h4{
  margin-bottom: 10px;
}
.other-use .example p{
  margin-bottom: 30px;
}
.other-use table tr.bottom td.hope-pome{
  width: 151px;

  background: #FAFAFA;

  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
}
.other-head.part2{
  color: white;
  background: url(./assets/img/other.png) top center no-repeat;
  background-size: cover;
}
.other-product-2 .column.border{
  padding: 30px;

  border: solid 1px #ccc;
}
.other-product-2 .column.border:nth-of-type(n+2){
  border-left: none;
}
.other-product-2-cat{
  position: relative;

  width: 100%;
  height: 90px;

  text-align: center;

  color: #C64C00;
  border: solid 1px #C64C00;
  border-radius: 100px;

  font-size: 18px;
  font-weight: bold;
}
.other-product-2-cat span{
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;

  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.other-product-2 .img-box img{
  height: 317px;
}
.other-product-2 .img-box .bgimg{
  width: 100%;
  height: 317px;
}
.other-group-product .img-box{
  margin-top: 30px;
}
.other-group-product .img-box img{
  height: 270px;
}
.other-product-2 h4{
  padding-bottom: 10px;

  font-size: 18px;
}
.other-group-product h4{
  padding-top: 36px;
}
.other-product-2 .text-box p{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 14px;
}
h3.txt-center span.title-bg-orange{
  padding: 10px 36px;

  font-size: 24px;
}
.columns.row-2 .column.border{
  border-top: none;
}
.other-group-product .column.border .columns{
  margin: 0;
  padding-right: 1px;
}
.other-group-product .column.border .column:first-child{
  padding: 0 30px 0 0;
}
.other-group-product .column.border .column:last-child{
  padding: 0 0 0 30px;
}
.other-product-2 .column.border-trans-left{
  border-left: solid 1px rgba(0,0,0,0);
}
.other-product-2 .column.border-trans-right{
  border-right: solid 1px rgba(0,0,0,0);
}
.page .other-group-product .column.border-on{
  border-left: solid 1px #ccc;
}
.main-content.mix-special{
  padding-bottom: 100px;
}
.mix-special p{
  text-align: center;

  font-weight: bold;
}
.other-detergent{
  background: #fafafa;
}
.other-detergent .main-content{
  padding-top: 100px;
  padding-bottom: 100px;
}
.other-menu{
  margin-bottom: 0;
  padding: 60px 0;
}
.other-menu h3{
  margin: 0;
  padding: 0;

  text-align: center;

  color: white;

  font-size: 24px;
}
.other-product-2 .txt-center-sp{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
}
@media screen and (max-width: 768px) {
  .other-product-2 .columns {
    margin: 0;
  }
  .other-head p {
    width: 100%;
  }
  body.page .other .main-content{
    padding-bottom: 30px;
  }
  body.page .other .main-content h3 {
    text-align: left;

    font-size: 22px;
  }
  body.page .other .main-content h3 span {
    display: inline-block;
  }
  .other-use h3 span{
    width: 20%;
  }
  .other-use h3 span.h-title {
    display: inline-block;

    width: 70%;
    margin-top: 5px;
    margin-right: 0px;
    padding: 0;

    text-align: left;
    vertical-align: top;

    color: inherit;
    border-radius: 0px;
    background: none;

    font-size: inherit;
  }
  .page .other-product-2 .main-content h3 {
    margin-bottom: 10px;
  }
  .other-product-2 .column.border {
    text-align: center;
  }
  .other-product-2 .column.border:nth-of-type(n+2) {
    border-top: none;
    border-left: solid 1px #ccc;
  }
  .other-product-2 .img-box {
    text-align: center;
  }
  .other-product-2 .img-box img {
    height: auto;
    margin: 0 auto;

    text-align: center;
  }
  .other-product-2-cat span {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;

    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);

    line-height: 35px;
  }
  .other-product-2 .text-box {
    padding-right: 0px;
    padding-left: 0px;
  }
  .other-product-2 .text-box p{
    text-align: left;
  }
  .other-group-product .column.border .column:first-child {
    padding: 0 0px 0 0;
  }
  .other-group-product .column.border .column:last-child {
    padding: 0 0 0 0px;
  }
  .other-product-2 .column.border-trans-right {
    border-right: solid 1px #ccc;
  }
  .other-product-2 .main-content {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .other-group-product .img-box img{
    margin: 0 auto;

    text-align: center;
  }
  .main-content.mix-special{
    padding-bottom: 60px;
  }
  .other-detergent .main-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .other-product-2 .txt-center-sp{
    display: inline-block;

    text-align: center!important;

    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  }
}

/*********
 *********

  Powder / TY-1

 *********
 *********/

.powder-head{
  height: 494px;

  color: white;
  background: url(./assets/img/powder-head.png) top center no-repeat;
  background-size: cover;
}
.powder-head p{
  color: white;

  font-size: 18px;
  font-weight: bold;
}
.powder-head .main-content h2{
  padding-bottom: 40px;
}
.powder-head .title-underbar {
    margin-bottom: 40px;

    background: #fff;
}
@media screen and (min-width: 768px) {
  .powder-head p{
    width: 460px;
  }
}
.page-2column-2 .main-content h3{
  font-size: 24px;
}
@media screen and (min-width: 769px) {
  .page-2column-2 .columns.center{
    -webkit-box-align: center;
            align-items: center;
        -ms-flex-align: center;
  }
}
.main-content.page-4column{
  text-align: center;
}
.main-content.page-4column  h3{
  margin-bottom: 20px;

  font-size: 24px;
}
.main-content.page-4column h3 span{
  padding-bottom: 0.5rem;

  color: #C64C00;
}
.main-content.page-4column img{
  max-width: 70%;
}
.main-content.page-4column h4{
  margin: 40px 0 30px;

  font-size: 20px;
}
.main-content.page-4column p{
  text-align: left;
}

.powder-companent table{
  width: 430px;
}
.powder-companent table, .powder-companent table tr,.powder-companent table td, .powder-companent table th{
  border:1px solid #C64C00;
  border-collapse: collapse;
}
.powder-companent table tr{
  height: 56px;

  vertical-align: middle;
}
.powder-companent table td, .powder-companent table th{
  vertical-align: middle;
}
.powder-companent table thead th:first-child{
  border-right: 1px solid #fff;
}
.powder-companent table thead tr{
  text-align: center;

  color: white;
  background: #C64C00;

  font-weight: bold;
}
.powder-companent p.exert{
  padding-bottom:40px;

  text-align: center;

  font-size: 20px;
  font-weight: bold;
}
.powder-companent table thead tr th{
  text-align: center;

  color: white;

  font-weight: bold;
}
.powder-companent table tbody tr td:first-child{
  padding-left: 28px;

  text-align: left;
}
.powder-companent table tbody tr td:last-child{
  padding-right: 32px;

  text-align: right;

  font-weight: bold;
}
@media screen and (min-width: 769px) {
  .powder-companent .column:first-child{
    text-align: right;
  }
  .powder-companent .column:first-child .table-wrap{
    display: inline-block;
  }
}
.powder-companent .column:last-child .table-wrap table thead tr{
  text-align: center;

  color: white;
  background: #D58936;

  font-weight: bold;
}
.powder-companent .column:last-child table, .powder-companent .column:last-child table tr,.powder-companent .column:last-child table td, .powder-companent .column:last-child table th{
  border:1px solid #D58936;
  border-collapse: collapse;
}
.powder-companent .column:last-child table thead th:first-child{
  border-right: 1px solid #fff;
}
.powder-companent p.reference{
  width: 430px;
  padding-top: 20px;

  text-align: right;

  font-size: 14px;
}
.about-companent{
  margin: 80px 0 30px;
  padding: 50px 0;

  border-radius: 40px;
  background: #F7F7F7;
}
.about-companent .inner-box{
  width: 70%;
  margin: 0 auto;
}
.page .main-content .about-companent h3{
  text-align: left;

  font-size: 20px;
}
.about-companent .inline-block{
  vertical-align: top;

  line-height: 30px;
}
.about-companent .inline-block:first-child{
  width: 18%;
}
.about-companent .inline-block:nth-child(2){
  width: 2%;
}
.about-companent .inline-block:last-child{
  width: 79%;
}
@media screen and (max-width: 768px) {
  .about-companent .inline-block:last-child{
    width: 100%;
  }
  .about-companent .inline-block:first-child{
    width: auto;
  }
  .about-companent .inline-block:nth-child(2){
    width: auto;
  }
}
.powder-specification .profile p {
    padding-bottom: 0.5rem;
}
.powder-specification p.reference{
  font-size: 14px;
}
.powder-tiful .main-content{
  padding-top: 80px;
  padding-bottom: 80px;
}
.powder-tiful .inner-content{
  background: url(./assets/img/powder-tiful.png) top center no-repeat;
  background-size: cover;
}
.powder-tfplus .main-content{
  padding-top: 80px;
  padding-bottom: 80px;
}
.powder-tfplus .inner-content{
  background: url(./assets/img/powder-tfplus.png) top center no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .powder-head{
    color: white;
    background: url(./assets/img/powder-head-sp.png) top center no-repeat;
    background-size: cover;
  }
  .main-content.page-4column img {
    max-width: 60%;
  }
  .article-single .main-content, .page-header-2 .main-content {
    padding-top: 20px;
  }
  .page-header-2 .main-content {
    padding-bottom: 40px;
  }
  .page-header-2 .main-content h2 {
    text-align: center;

    font-size: 32px;
  }
  .powder-head{
    height: 625px;
  }
  .powder-companent table {
    width: 100%;
  }
  .powder-companent table td, .powder-companent table th {
    font-size: 12px;
  }
  .powder-companent p.reference {
    width: 100%;
  }
  .about-companent {
    margin: 40px 0 20px;
    padding: 40px 20px;

    border-radius: 30px;
  }
  .about-companent .inner-box {
    width: 100%;
  }
  .about-companent .inner-box li{
    padding-bottom: 1.5rem;
  }
  .danish-specification .main-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .bread-process.powder-tiful .main-content{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .bread-process.powder-tiful .inner-content {
    padding: 60px 20px;

    border-radius: 40px;
    background-size: cover;
  }
  .powder-tiful .inner-content{
    background: url(./assets/img/powder-tiful-sp.png) top center no-repeat;
    background-size: cover;
  }
  .bread-bottom.powder-tiful .inner-content p {
    text-align: center;
  }
  .bread-process.powder-tfplus .main-content{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .bread-process.powder-tfplus .inner-content {
    padding: 60px 20px;

    border-radius: 40px;
    background-size: cover;
  }
  .powder-tfplus .inner-content{
    background: url(./assets/img/powder-tfplus-sp.png) top center no-repeat;
    background-size: cover;
  }
  .bread-bottom.powder-tfplus .inner-content p {
    text-align: center;
  }
}

/*********
 *********

  Tiful / tiful

 *********
 *********/
.tiful-head{
 height: 494px;

 color: white;
 background: url(./assets/img/tiful-head.png) top center no-repeat;
 background-size: cover;
}
.page .tiful-tablet .main-content h3 {
    margin-bottom: 40px;

    font-size: 24px;
}
.tiful-tablet p{
  padding-bottom: 40px;
}
.tiful-tablet span.amount{
  display: inline-block;

  padding-bottom: 40px;

  font-weight: bold;
}
@media screen and (min-width: 769px) {
  .tiful-tablet .columns .column.is-three-fifths{
    width: 55%;
  }
}
.tiful-ty-1 .inner-content{
  background: url(./assets/img/tiful-ty-1.png) top center no-repeat;
  background-size: cover;
}
@media screen and (max-width: 769px) {
  .tiful-head{
     height: 625px;

     color: white;
     background: url(./assets/img/tiful-head-sp.png) top center no-repeat;
     background-size: cover;
  }
  .page .tiful-tablet .main-content h3, .page .powder-ty-1 .main-content h3{
    margin-bottom: 30px;

    font-size: 22px;
  }
  .tiful-tablet p {
    padding-bottom: 20px;
  }
  .bread-process.tiful-ty-1 .inner-content {
    padding: 60px 20px;
  }
  .page .tiful-ty-1 .main-content h3 {
    font-size: 22px;
  }
  .tiful-ty-1 .inner-content{
    background: url(./assets/img/tiful-ty-1-sp.png) top center no-repeat;
    background-size: cover;
  }
  .bread-bottom.tiful-ty-1 .inner-content p {
    text-align: center;
  }
}

/*********
 *********

  Tfplus / TFPLUS

 *********
 *********/
.tfplus-head {
  height: 494px;
  color: white;
  background: url(./assets/img/tfplus-head.jpg) top center no-repeat;
  background-size: cover;
}
.tfplus-list {
  background-color: #FAFAFA;
}
.tfplus-list .items {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(100% * -20 / 1080);
  margin-right: calc(100% * -20 / 1080);
}
.tfplus-list .items .item {
  width: calc(100% * 560 / 1120);
  padding-top: 26px;
  padding-left: calc(100% * 30 / 1120);
  padding-right: calc(100% * 30 / 1120);
  padding-bottom: 40px;
}
.tfplus-list .items .item.tea .image-block {
  background-image: url(./assets/img/theaflavin-list-tea.png);
}
.tfplus-list .items .item.drops .image-block {
  background-image: url(./assets/img/theaflavin-list-drops.png);
}
.tfplus-list .items .item .image-block {
  position: relative;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transition: 0.3s;
}
.tfplus-list .items .item .image-block:hover {
  opacity: .7;
}
.tfplus-list .items .item .image-block:before {
  content: '';
  display: block;
  padding-top: calc(100% * 260 / 500);
}
.tfplus-list .items .item .image-block:after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 36px;
  height: 36px;
  pointer-events: none;
  background-image: url(./assets/img/theaflavin-link-down.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.tfplus-list .items .item .image-block a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(100% * 40 / 500) / calc(100% * 40 / 260);
}
.tfplus-list .items .item .image-block .title .en {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.tfplus-list .items .item .image-block .title .jp {
  font-size: 20px;
  letter-spacing: .05em;
  text-align: center;
  color: #fff;
}
.tfplus-list .items .item .button-block {
  margin-top: 40px;
}
/*---------- 20250305追加 ------------*/
.tfplus-list .items .item .button-block--2 {
  margin-top: 10px;
}
/*---------- 20250305追加 ------------*/

.tfplus-item {
  margin-top: 80px;
}

.tfplus-item.tea .tfplus-item-head-image:after {
  background-image: url(./assets/img/theaflavin-tea-head.png);
  background-position: top left;
}
.tfplus-item.drops .tfplus-item-head-image:after {
  background-image: url(./assets/img/theaflavin-drops-head.png);
  background-position: top right;
}
.tfplus-item-head-image:after {
  content: '';
  display: block;
  width: 100%;
  padding-top: calc(100% * 400 / 1366);
  background-size: contain;
  background-repeat: no-repeat
}

.tfplus-product .main-content {
  padding-bottom: 0;
}
.tfplus-product .main-content h2 span.supplement {
  display: block;
  padding-bottom: 4px;
  color: #000000;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 18px;
}
.tfplus-product .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: calc(100% * -20 / 1080);
  margin-right: calc(100% * -20 / 1080);
}
.tfplus-product .items .item {
  width: calc(100% * 560 / 1120);
  padding-top: 26px;
  padding-left: calc(100% * 30 / 1120);
  padding-right: calc(100% * 30 / 1120);
  padding-bottom: 40px;
}

/*---------- 20250305追加 ------------*/
#tea .tfplus-product .items .item {
  width: 1160px;
}
/*---------- 20250305追加 ------------*/

.tfplus-product .items .item .image-block img {
  width: 100%;
  height: auto;
}
.tfplus-product .items .item .text-block {
  margin-top: 30px;
}

/*---------- 20250422追加 ------------*/
.tfplus-product .items .item .text-block .title .sub-title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .01em;
}
/*---------- 20250422追加 ------------*/

.tfplus-product .items .item .text-block .title .en {
  font-size: 32px;
  font-weight: bold;
}
.tfplus-product .items .item .text-block .title .jp {
  font-size: 20px;
  letter-spacing: .05em
}
.tfplus-product .items .item .text-block .text {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: .05em;
  font-weight: 500;
}
.tfplus-product .items .item .text-block .materials {
  margin-top: 20px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: .1em;
  font-weight: 500;
}

.tfplus-about .items {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(100% * -20 / 1080);
  margin-right: calc(100% * -20 / 1080);
}
.tfplus-about .items .item {
  width: calc(100% * 560 / 1120);
  padding-left: calc(100% * 30 / 1120);
  padding-right: calc(100% * 30 / 1120);
  padding-bottom: 40px;
}
.tfplus-about .items .item .image-block {
  padding-top: 26px;
  position: relative;
}
.tfplus-about .items .item .image-block .point {
  position: absolute;
  top: 0;
  left: -20px;
  z-index: 10;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  color: #ffffff;
  background-color: #C64C00;
}
.tfplus-about .items .item .image-block .point .point-number {
  font-size: 30px;
  line-height: 30px;
}
.tfplus-about .items .item .image-block img {
  width: 100%;
  height: auto;
}
.tfplus-about .items .item .text-block {
  margin-top: 30px;
}
.tfplus-about .items .item .text-block .title {
  font-size: 20px;
  font-weight: bold;
}
.tfplus-about .items .item .text-block .text {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: .05em;
  font-weight: 500;
}
.tfplus-about .items .item .text-block .text a {
  color: #C64C00;
}
.tfplus-about .items .item .text-block .text a:after {
  content: url('./assets/img/address.png');
  margin-left: 6px;
}

/************ 20250422追加 ************/
.tfplus-specification .wrapper {
  display: flex;
  gap: 40px;
  width: 100%;
}
.tfplus-specification .wrapper-contents {
  width: 50%;
}
/************ 20250422追加 ************/

.tfplus-specification .profiles {
  display: flex;
  justify-content: space-between;
}
.tfplus-specification .profiles .profile {
  width: 44.5%;
  padding-bottom: 30px;
}
.tfplus-specification .profiles .profile.full {
  width: 100%;
}
/*---------- 20250422編集 ------------*/
.tfplus-specification .profiles .profile.full .columns .column.is-one-quarter {
  width: 18%;
}
/*---------- 20250422編集 ------------*/
.tfplus-specification .profiles .profile .columns:last-child {
  border-bottom: 1px solid #cccccc;
}
.tfplus-specification .profiles .profile .materials {
  min-height: 177px;
}

.tfplus-shop-link {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #D58936;
  text-align: center;
}
/*---------- 20250305追加 ------------*/
.tfplus-shop-link .button-block--2 {
  margin-top: 10px;
}
/*---------- 20250305追加 ------------*/

.tfplus-shop-link p {
  margin-top: 27px;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: .05em;
  color: #ffffff;
  font-weight: bold;
}

.tfplus-float-menu {
  position: fixed;
  z-index: 5000;
  bottom: 35px;
  right: 20px;
}
.tfplus-float-menu ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  list-style-type: none;
}
.tfplus-float-menu ul li {
  display: block;
  position: relative;
  background-color: #C64C00;
  border-radius: 50%;
}
.tfplus-float-menu ul li + li {
  margin-top: 7px;
}
.tfplus-float-menu ul li:before {
  content: '';
  display: block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: .3s;
}
.tfplus-float-menu ul li:hover:before {
  opacity: 0;
}
.tfplus-float-menu ul li a {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
}
.tfplus-float-menu ul li a:after {
  content: '';
  display: block;
  border-top: 7px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin-top: 5px;
}
.tfplus-float-menu ul li.tea:before {
  background-image: url(./assets/img/bg_float_menu_tea.png);
}
.tfplus-float-menu ul li.drops:before {
  background-image: url(./assets/img/bg_float_menu_drops.png);
}


@media screen and (max-width: 769px) {
  .tfplus-float-menu {
    bottom: 0;
    right: 0;
    padding: 5px 13px;
    background-color: #fff;
    width: 100%;
  }
  .tfplus-float-menu ul {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 100%;
  }
  .tfplus-float-menu ul li {
    background-color: #C64C00;
    border-radius: 15px;
    width: calc(100% - 2px);
    height: 100%;
  }
  .tfplus-float-menu ul li + li {
    margin-top: 0;
    margin-left: 4px;
  }
  .tfplus-float-menu ul li:before {
    content: none;
  }
  .tfplus-float-menu ul li a {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    font-size: 13px;
  }
  .tfplus-float-menu ul li a:after {
    border: none;
    margin-top: 0;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-image: url(./assets/img/arrow_float_down.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .tfplus-float-menu ul li.tea:before {
    background-image: none;
  }
  .tfplus-float-menu ul li.drops:before {
    background-image: none;
  }
}


.bread-process.tfplus-ty-1 .main-content {
  padding-top: 100px;
}

.tfplus-ty-1 .inner-content{
  background: url(./assets/img/tfplus-ty-1.png) top center no-repeat;
  background-size: cover;
}
@media screen and (max-width: 769px) {
  .tfplus-head {
     height: 625px;

     color: white;
     background: url(./assets/img/tfplus-head-sp.jpg) top center no-repeat;
     background-size: cover;
  }
  .tfplus-list .items {
    margin-left: 0;
    margin-right: 0;
  }
  .tfplus-list .items .item {
    width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 20px;
  }
  .tfplus-list .items .item + .item {
    margin-top: 40px;
  }
  .tfplus-list .items .item .image-block:before {
    padding-top: calc(100% * 259 / 335);
  }
  .tfplus-list .items .item .image-block:after {
    width: 30px;
    height: 30px;
    bottom: 30px;
  }
  .tfplus-list .items .item .image-block .title .en {
    font-size: 28px;
  }
  .tfplus-list .items .item .image-block .title .jp {
    font-size: 16px;
    letter-spacing: .05em
  }
  .tfplus-list .items .item .button-block {
    margin-top: 30px;
  }
  /*---------- 20250305追加 ------------*/
  .tfplus-list .items .item .button-block--2 {
    margin-top: 10px;
  }
  /*---------- 20250305追加 ------------*/
  .tfplus-list .items .item.tea .image-block {
    background-image: url(./assets/img/theaflavin-list-tea-sp.png);
  }
  .tfplus-list .items .item.drops .image-block {
    background-image: url(./assets/img/theaflavin-list-drops-sp.png);
  }
  .tfplus-item {
    margin-top: 65px;
  }
  .tfplus-item.tea .tfplus-item-head-image:after {
    background-image: url(./assets/img/theaflavin-tea-head-sp.png);
    background-position: top left;
  }
  .tfplus-item.drops .tfplus-item-head-image:after {
    background-image: url(./assets/img/theaflavin-drops-head-sp.png);
    background-position: top right;
  }
  .tfplus-item-head-image:after {
    padding-top: calc(100% * 332 / 375);
  }
  .tfplus-product .main-content h2 span.supplement {
    font-size: 16px;
  }
  .tfplus-product .items {
    margin-left: 0;
    margin-right: 0;
  }
  .tfplus-product .items .item {
    width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .tfplus-product .items .item + .item {
    margin-top: 20px;
  }
  .tfplus-product .items .item .image-block img {
    width: 100%;
    height: auto;
  }
  .tfplus-product .items .item .text-block {
    margin-top: 30px;
  }
  .tfplus-product .items .item .text-block .title .en {
    font-size: 28px;
  }
  .tfplus-product .items .item .text-block .title .jp {
    font-size: 16px;
    letter-spacing: .05em
  }

  .tfplus-about .items {
    margin-left: 0;
    margin-right: 0;
  }
  .tfplus-about .items .item {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .tfplus-about .items .item + .item {
    margin-top: 20px;
  }
  .tfplus-about .items .item .image-block {
    padding-top: 70px;
  }
  .tfplus-about .items .item .image-block .point {
    left: 0;
    right: 0;
    margin: auto;
  }
  .tfplus-about .items .item .image-block img {
    width: 100%;
    height: auto;
  }
  .tfplus-about .items .item .text-block {
    margin-top: 30px;
  }
  .tfplus-about .items .item .text-block .title {
    font-size: 20px;
  }

  /************ 20250422追加 ************/
  .tfplus-specification .wrapper {
    flex-direction: column;
  }
  .tfplus-specification .wrapper-contents {
    width: 100%;
  }
  /************ 20250422追加 ************/

  .tfplus-specification .profiles {
    flex-direction: column;
  }
  .tfplus-specification .profiles .profile {
    width: 100%;
    padding-bottom: 20px;
  }
  .tfplus-specification .profiles .profile.full .columns .column.is-one-quarter {
    width: 100%;
  }
  .tfplus-specification .profiles .profile .columns {
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;

    /************ 20250422追加 ************/
    margin-left: 0;
    margin-right: 0;
    /************ 20250422追加 ************/
  }
  .tfplus-specification .profiles .profile .materials {
    height: auto;
  }

  .bread-process.tfplus-ty-1 .main-content {
    padding-top: 20px;
  }

  .page .tfplus-ty-1 .main-content h3 {
    font-size: 22px;
  }
  .tfplus-ty-1 .inner-content{
    background: url(./assets/img/tfplus-ty-1-sp.png) top center no-repeat;
    background-size: cover;
  }
  .bread-bottom.tfplus-ty-1 .inner-content p {
    text-align: center;
  }
}

/*********
 *********

  Recipe / レシピ

 *********
 *********/
@media screen and (min-width: 769px) {
  .recipe-head .btn{
    width: 100%;
    height: 110px;
  }
  .recipe-head .btn span:after{
    position: absolute;
    right: 50%;
    bottom: -10px;

    display: block;

    width: 4px;

    content: ' ';
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);

    border-top: 4px solid #D58936;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }
  .recipe-head .btn:hover span:after{
    border-top: 4px solid #fff;
  }
}
.recipe-list-box{
  padding: 30px 0;

  background: #FAFAFA;
}
.recipe-list-box .main-content h2 {
    padding-bottom: 40px;

    text-align: center;

    font-size: 32px;
}
.recipe-list-box .title-underbar{
  margin: 0 auto 40px;
}
.recipe-list-box .recipe-list-item{
  overflow: hidden;

  border-radius: 20px;
  background: white;
}
.recipe-list-box .columns{
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .recipe-list-box .main-content h2 {
    font-size: 26px;
  }
  .sp-recipe-cat-menu{
    position: relative;

    width: 100%;
  }
  .link_menu{
    position: relative;

  	width: 100%;
  	padding: 0px 10px 20px 0;

    text-align: center;

    color: #D58936;
  	border: none;
  	border-bottom: 3px solid #D58936;
  	border-radius: 0;
  	background-color: transparent;

  	font-family: inherit;
  	font-size: 16px;
    font-weight: bold;
  }
  .sp-recipe-cat-menu select::-ms-expand {
	  display: none;
  }
  .sp-recipe-cat-menu .link_menu {
  	-moz-appearance: none;
  	     appearance: none;
  	-webkit-appearance:none
  }
  .sp-recipe-cat-menu:after {
  	position: absolute;
  	top: 18px;
  	right: 25px;

  	width: 0;
  	height: 0;
  	padding: 0;

  	content: '';
  	pointer-events: none;

  	border-top: 6px solid #D58936;
  	border-right: 6px solid transparent;
  	border-left: 6px solid transparent;
  }
  .link_selectlabel {
  	position: absolute;
  	top: 10px;
  	left: 0;

  	-webkit-transition: 0.2s ease all;
  	transition: 0.2s ease all;
  	pointer-events: none;

  	color: #D58936;

  	font-size: 16px;
  	font-weight: normal;
  }
  .link_selectbar {
  	position: relative;

  	display: block;

  	width: 100%;
  }
  .link_selectbar:before {
  	left: 50%;
  }
  .link_selectbar:after {
  	right: 50%;
  }
  .link_menu:focus ~ .link_selectbar:before, .link_menu:focus ~ .link_selectbar:after {
  	width: 50%;
  }
  .link_highlight {
  	position: absolute;
  	top: 25%;
  	left: 0;

  	pointer-events: none;

  	opacity: 0.5;
  }
}

/*********
 *********

  RECRUITMENT / 採用情報

 *********
 *********/
.recruit-head{
  position: relative;

  width: 100%;
}
.recruit-head .main-content{
  padding-top: 70px;
  padding-bottom: 50px;
  z-index: 1;
}
.page .recruit-head .main-content h2{
  padding-bottom: 100px;

  text-align: left;

  color: #309293;

  font-size: 36px;
}
.page .recruit-head .main-content h2 span{
  padding-bottom: 20px;

  color: #309293;

  font-size: 60px;
}
.page .recruit-head .main-content h3{
  margin-bottom: 40px;
}
.page .recruit-head .main-content .title-underbar{
  background: #309293;
}
.page .recruit-head .main-content p{
  font-weight: bold;
}
.recruit-head .img-box{
  position: absolute;
  top: 10px;
  right: -76px;

  width: 57%;
  height: 680px;

  text-align: right;
}
.recruit-head .img-box img{
  display: block;
  max-width: 100%;
  max-height: 100%;
}
@media screen and (max-width: 768px) {
  .recruit-head .img-box{
    height: auto;
  }
  .recruit-head .img-box img{
    display: static;
    width: 100%;
    max-height: none;
  }
}
.about-work{
  background: #FAFAFA;
}
.main-content.recruit-navigate {
  padding-top: 80px;
}
.main-content.recruit-navigate  h2 span{
  color: #309293;
}
.main-content.recruit-navigate  h4{
  padding-bottom: 30px;

  text-align: center;

  font-size: 24px;
}
.main-content.recruit-navigate  p{
  padding-bottom: 60px;

  text-align: center;
}
.recruit-navigate .columns{
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.recruit-navigate .btn.blue span:after{
  position: absolute;
  top: 50%;
  right: 40px;

  display: block;

  width: 6px;

  content: ' ';
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);

  border-top: 6px solid #309293;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.recruit-navigate .btn.blue:hover span:after{
  border-top: 6px solid #fff;
}

.recruit-big-bg .container-mr {
  height: 608px;
  margin: 0 -70px 0 calc(50% - 50vw);
  padding: 0 0 0 calc(50vw - 50%);
}
.recruit-big-bg .container-ml {
  height: 608px;
  margin: 0 calc(50% - 50vw) 0 -70px;
  padding: 0 calc(50vw - 50%) 0 0;
}
.recruit-big-bg .main-content.container{
  position: relative;

  margin-top: 80px;
  margin-bottom: 80px;
  padding-top: 0;
  padding-bottom: 0;
}
.manufacturing-feature .bg{
  background: url(./assets/img/manufacturing.png) top center no-repeat;
  background-size: cover;
}
.recruit-big-bg .inner-content{
  position: absolute;
  top: 50%;
  left: 0%;

  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 20px;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.recruit-big-bg .columns .column{
  height: 360px;

  border: solid 3px #fff;
  border-radius: 40px;
}
@media screen and (min-width: 769px) {
  .recruit-big-bg .columns{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding-top: 48px;
  }
  .recruit-big-bg .columns .column{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;

    width: 46%;
    padding: 25px 30px;
  }
}
.recruit-big-bg h4{
  padding-bottom: 30px;

  font-size: 24px;
}
.recruit-big-bg h5{
  padding-bottom: 10px;

  font-size: 30px;
}
.recruit-big-bg h5 span{
  display: block;

  font-size: 14px;
  line-height: 1.1;
}
.about-work .recruit-big-bg .main-content p{
  padding-bottom: 0;

  text-align: left;
}
.research-dev .bg{
  background: url(./assets/img/research-dev.png) top center no-repeat;
  background-size: cover;
}
.quality-manage .bg{
  background: url(./assets/img/quality-manage.png) top center no-repeat;
  background-size: cover;
}
.sales .bg{
  background: url(./assets/img/sales.png) top center no-repeat;
  background-size: cover;
}
.manage .bg{
  background: url(./assets/img/manage.png) top center no-repeat;
  background-size: cover;
}
.about-work{
    padding-bottom: 40px;
}

/* 人を知る */
.interview{
  margin-bottom: 50px;
}
.interview-head{
  position: relative;

  height: 600px;
}
.interview-head .main-content{
  padding-bottom: 0;
}
.interview-head{
  margin-bottom: 180px;
}
.interview-head .interview-content .text-box{
  position: relative;
  top: 10px;
  right: 0;

  width: 512px;
  padding: 60px;

  color: white;
  border-radius: 40px;
  background: #309293;

  font-weight: bold;
}
.interview-head .interview-content .text-box.right{
  left: 0;
}
.interview-head .interview-content .text-box h3{
  text-align: right;

  font-size: 22px;
}
.interview-head .interview-content .text-box h3 span{
  display: inline-block;

  padding-top: 0;
  padding-bottom: 0;
  padding-left: 24px;

  vertical-align: middle;

  color: rgba(0,0,0,0);

  font-size: 140px;
  line-height: 1;
  /* width | color */

  -webkit-text-stroke: 3px #fff;
}
.interview-head .interview-content .text-box span.cat{
  padding: 8px 36px;

  color: #309293;
  border-radius: 80px;
  background: white;

  font-size: 14px;
}
.interview-head .interview-content .text-box h4{
  padding: 40px 0 30px;

  color: #fff;

  font-size: 24px;
  line-height: 1.1;
}
.interview-head .interview-content .text-box h4 span{
  display: inline-block;

  padding-left: 20px;

  vertical-align: baseline;

  color: #fff;

  font-size: 12px;
}
.interview-head .interview-content .text-box span.detail{
  color: #fff;

  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 14px;
  line-height: 1;
}
.interview-head .interview-content .text-box .title-underbar{
  margin: 36px 0 46px;

  background: white;
}
.interview-head .interview-content .text-box p{
  color: white;
}
.interview-body .main-content h3 {
  position: relative;

  width: 680px;
  margin: 0 auto;
  margin-bottom: 60px;
  padding: 25px 0;

  text-align: center;
  text-align: center;

  color: #309293;
  border: 3px solid #309293;
  border-radius: 100px;
  background: #fff;

  font-size: 30px;
}
/* 下三角 */
.interview-body .main-content h3:before{
    position: absolute;
    z-index: 2;
    bottom: -23px;
    left: 50%;

    content: "";

    border: 12px solid transparent;
    border-top: 12px solid #fff;
}
.interview-body .main-content h3:after {
    position: absolute;
    z-index: 1;
    bottom: -15px;
    left: 50%;

    content: "";

    border: 12px solid transparent;
    border-top-color: #309293;
    border-bottom-width: 0;
}
.interview-body .columns{
  padding-bottom: 60px;
}
.interview-body .main-content h4{
  padding-bottom: 20px;

  font-size: 20px;
  line-height: 1;
}
.interview-body .main-content h4:nth-child(n+2){
  padding-top: 60px;
}
@media screen and (min-width: 769px) {
  .interview-body .column.is-two-fifths{
    width: 45%;
  }
  .interview-body .column.pr-40{
    padding-left: 40px;
  }
}
.shioya{
  background: url(./assets/img/shioya.png) top center no-repeat;
  background-size: cover;
}
.yagi{
  background: url(./assets/img/yagi.png) top center no-repeat;
  background-size: cover;
}
.hosokawa{
  margin-bottom: 240px;

  background: url(./assets/img/hosokawa.png) top center no-repeat;
  background-size: cover;
}
.inoue{
  background: url(./assets/img/inoue.png) top center no-repeat;
  background-size: cover;
}
.nakajima{
  background: url(./assets/img/nakajima.png) top center no-repeat;
  background-size: cover;
}
.ohkawa{
  margin-bottom: 130px;

  background: url(./assets/img/ohkawa.png) top center no-repeat;
  background-size: cover;
}
.interview-body.ohkawa-body .main-content h3 {
  width: 800px;
}
.recruit-contact{
  text-align: center;

  border-top: solid 2px #ccc;
}
.recruit-contact h4{
  padding-bottom: 40px;

  font-size: 18px;
}
.recruit-contact .lead-message{
  display: block;

  padding-bottom: 8px;

  font-size: 18px;
  font-weight: bold;
}
.recruit-contact .tel{
  display: block;

  font-size: 38px;
  font-weight: bold;
}
.recruit-contact .time{
  display: block;

  font-size: 15px;
  font-weight: bold;
}
.recruit-contact .btn.contact{
  width: 370px;
  height: 70px;
  padding: 0;
}
.recruit-contact .btn.contact span{
  position: absolute;
  top: 50%;

  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .recruit-head .main-content{
    padding-top: 40px;
    padding-bottom: 0;
  }
  .page .recruit-head .main-content h2{
    padding-bottom: 0px;

    font-size: 22px;
  }
  .page .recruit-head .main-content h2 span{
    padding-bottom: 10px;

    font-size: 36px;
  }
  .recruit-head .main-content .img-box{
    position: relative;
    top: 0;
    right: -20px;

    width: calc(100% + 20px);
    margin: 0 auto;

    text-align: right;
  }
  .page .recruit-head .main-content h3 {
    text-align: left;

    font-size: 28px;
  }
  .page .recruit-head .main-content .title-underbar {
    margin: 0;
    margin-bottom: 40px;
  }
  .page .recruit-head .main-content .text-box{
    position: relative;
    top: -100px;
  }
  .link_menu.blue {
    color: #309293;
    border-bottom: 3px solid #309293;
  }
  .about-work {
    padding-bottom: 0px;
  }
  .sp-recipe-cat-menu.blue:after {
    top: 10px;

    border-top: 6px solid #309293;
  }
  .main-content.recruit-navigate {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .recruit-big-bg .container-mr, .recruit-big-bg .container-ml {
    width: calc(100% + 40px);
    height: auto;
    margin: 0 0 0 -20px;
    padding: 0 0 0 0;
  }
  .recruit-big-bg .inner-content {
    position: static;

    width: 100%;
    height: auto;
    padding: 60px 20px;

    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
  }
  .recruit-big-bg .inner-content .columns {
    margin-top: 0rem;
    margin-right: 0rem;
    margin-left: 0rem;
  }
  .recruit-big-bg .inner-content .column {
    height: auto;
    margin-bottom: 20px;
    padding: 40px 35px;
  }
  .recruit-big-bg h4 {
    padding-bottom: 30px;

    font-size: 22px;
  }
  .recruit-big-bg .main-content.container {
    margin-top: -1px;
    margin-bottom: 0px;
  }
  .manufacturing-feature .bg{
    background: url(./assets/img/manufacturing-sp.png) top center no-repeat;
    background-size: cover;
  }
  .research-dev .bg{
    background: url(./assets/img/research-dev-sp.png) top center no-repeat;
    background-size: cover;
  }
  .quality-manage .bg{
    background: url(./assets/img/quality-manage-sp.png) top center no-repeat;
    background-size: cover;
  }
  .sales .bg{
    background: url(./assets/img/sales-sp.png) top center no-repeat;
    background-size: cover;
  }
  .manage .bg{
    background: url(./assets/img/manage-sp.png) top center no-repeat;
    background-size: cover;
  }
  .page .interview-head{
    background: none;
  }
  .interview-head .columns {
    margin: 0;
  }
  .interview-head .column {
    padding: 0;
  }
  .interview-head .img-box{
    position: relative;
    z-index: 0;

    width: calc(100% + 40px);
    margin: 0 0 0 -20px;
  }
  .interview-head .interview-content .text-box {
    position: relative;
    z-index: 2;
    top: 0;
    right: auto;
    left: auto;

    width: 100%;
    margin-top: -80px;
    padding: 40px 35PX;

    background: #309293;
  }
  .interview-head .interview-content .text-box h3 span {
    display: inline-block;

    padding-top: 0;
    padding-bottom: 0;
    padding-left: 12px;

    vertical-align: middle;

    color: rgba(0,0,0,0);

    font-size: 100px;
    line-height: 1;

    -webkit-text-stroke: 3px #fff;
  }
  .interview-head .interview-content .text-box h3 {
    text-align: center;

    font-size: 16px;
  }
  .interview-head .interview-content .text-box h4 {
    padding: 28px 0 20px;
  }
  .interview-head .interview-content .text-box h4 span {
    display: block;

    margin-top: 16px;
    padding-left: 0px;

    font-size: 12px;
  }
  .interview-head .interview-content .text-box .title-underbar {
    margin: 30px 0 30px;

    background: white;
  }
  .interview-head {
    height: auto;
    margin-bottom: 40px;
  }
  body.page .interview-body .main-content h3 {
    width: 100%!important;

    font-size: 22px;
  }
  .interview-body .columns {
    margin-bottom: 0;
    padding: 0 20px 30px;
  }
  .interview-body .columns img {
    width: calc(100% + 40px);
    max-width: none;
    margin: 0 0 0 -20px;
    padding-bottom: 20px;
  }
  .interview-body .main-content h4{
    padding-bottom: 10px;

    line-height: 34px;
  }
  .interview-body .main-content h4:nth-child(n+2) {
    padding-top: 40px;
  }
  .interview-head .main-content {
    padding-top: 30px;
    padding-bottom: 0;
  }
  .interview-body  .main-content{
      padding-top: 20px;
      padding-bottom: 0px;
  }
  .interview-body .main-content h3:before {
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .interview-body .main-content h3:after {
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .ohkawa-body{
    padding-bottom: 30px;
  }
  .recruit-contact .btn.contact {
    width: 295px;
    height: 70px;
    padding: 0;
  }
  .recruit-contact .lead-message.right {
    padding-bottom: 20px;
  }
}

/*********
 *********

  Choose / パン粉の選び方

 *********
 *********/
.choose-body .main-content {
    padding-top: 80px;
    padding-bottom: 80px;
}
.choose-body .columns{
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.choose-body .column{
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

  padding-bottom: 28px;
}
.choose-select .select-box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;

  width: 720px;
  height: 50px;
  margin: 0 auto;

  border: solid 2px #C64C00;
  border-radius: 100px;
  background: white;
}
.choose-select a{
  display: block;

  width: 50%;
  height: 100%;
  padding: 11px 0;

  text-align: center;

  color: #C64C00;

  font-weight: bold;
}
.choose-select a.active{
  color: white;
  background-color: #C64C00;
}
.form-box{
  padding: 40px 30px;

  background-color: #FAFAFA;
}
.form-box h3{
  padding-bottom: 40px;

  text-align: center;

  color: #333;

  font-size: 24px;
}
.form-box .columns{
  padding-bottom: 20px;
}
.sp-recipe-cat-menu{
  position: relative;

  width: 100%;
}
.choose-search .sp-recipe-cat-menu{
  padding-top: 20px;
}
.choose-search .link_menu{
  position: relative;

  width: 100%;
  padding: 0px 10px 14px 0;

  text-align: center;

  color: #111;
  border: none;
  border-bottom: 3px solid #C64C00;
  border-radius: 0;
  background-color: transparent;

  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
}
.sp-recipe-cat-menu select::-ms-expand {
  display: none;
}
.sp-recipe-cat-menu .link_menu {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance:none
}
.search-title{
  display: inline-block;

  font-size: 18px;
  font-weight: bold;
}
.required{
  position: relative;
  top: -2px;

  display: inline-block;

  margin-left: 10px;
  padding: 4px 13px;

  color: white;
  border-radius: 40px;
  background: #B1272B;

  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}
.choose-search .sp-recipe-cat-menu:after {
  position: absolute;
  top: 28px;
  right: 5px;

  display: block;

  width: 6px;
  height: 6px;
  padding: 0;

  content: '';
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  pointer-events: none;

  border: none;
  border-top: 2px solid #C64C00;
  border-right: 2px solid #C64C00;
}
.link_selectlabel {
  position: absolute;
  top: 10px;
  left: 0;

  -webkit-transition: 0.2s ease all;
  transition: 0.2s ease all;
  pointer-events: none;

  color: #D58936;

  font-size: 16px;
  font-weight: normal;
}
.link_selectbar {
  position: relative;

  display: block;

  width: 100%;
}
.link_selectbar:before {
  left: 50%;
}
.link_selectbar:after {
  right: 50%;
}
.link_menu:focus ~ .link_selectbar:before, .link_menu:focus ~ .link_selectbar:after {
  width: 50%;
}
.link_highlight {
  position: absolute;
  top: 25%;
  left: 0;

  pointer-events: none;

  opacity: 0.5;
}
.form-box input.btn{
  background: rgba(0,0,0,0.0);
}
.form-box input.btn:hover{
  background: #111;
}
.choose-body{
  background: #FAFAFA;
}
.page .choose-body .main-content h3 {
    margin-bottom: 40px;

    text-align: center;
}
.title-underbar.center{
  margin: 0 auto;
  margin-bottom: 60px;
}
.choose-list{
  overflow: hidden;

  height: 720px;

  -webkit-transition: .3s;
  transition: .3s;

  border-radius: 40px;
  background-color: white;
}
.choose-list .img-box{
  position: relative;
  z-index: 10;

  height: 227px;

  -webkit-transition: .3s;
  transition: .3s;

  background-color: #E7EBEE;
}
.choose-list .img-box .item{
  width: 100%;
  height: 100%;
}
.choose-list .img-box .non-hover-img{
  -webkit-animation: fadein .5s;
          animation: fadein .5s;
}
.choose-list .img-box .hover-img{
  display: none;

  -webkit-animation: fadein .5s;
          animation: fadein .5s;
}
@-webkit-keyframes fadein {
  0%{
    opacity: 0%;
  }
  100%{
    opacity: 100%;
  }
}
@keyframes fadein {
  0%{
    opacity: 0%;
  }
  100%{
    opacity: 100%;
  }
}
.choose-list .text-box h4{
  padding-bottom: 20px;

  font-size: 20px;
}
.choose-list .text-box .title-underbar{
  height: 2px;
  margin-bottom: 20px;
}
.choose-list .text-box{
  padding: 28px 30px 20px;

  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
}

.choose-list .text-box .content-height{
  height: 205px;
  margin-bottom: 20px;

  line-height: 24px;
}
.choose-list .text-box .content-height.change{
  height: 184px;
}
.choose-list .text-box p{
  line-height: 24px;
}
.choose-list .text-box ul{
	margin: 1em 0;
	padding-left: 1rem;

  font-size: 14px;
}
.choose-list .text-box li{
  position: relative;
}
.choose-list .text-box li:before{
  position: relative;

  display: inline-block;

  margin-left: -1rem;
  padding-right: 0.75rem;

  content: '-';
}
.choose-list .text-box ul span{
  font-weight: bold;
}
.choose-list .text-box .columns{
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;

  width: 100%;
  margin: 0;
  padding-bottom: 18px;
}
.choose-list .text-box .columns.first{
  padding-top: 18px;
  padding-bottom: 10px;

  border-top: solid 2px #FAFAFA;
}
.choose-list .text-box .column{
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;

  width: 45%;
  padding: 0;
}
.choose-list .text-box .column span{
  display: inline-block;

  width: 45%;

  color: #bbb;

  font-size: 12px;
  font-weight: bold;
}
.choose-list .text-box .column span.cat{
  display: inline-block;

  width: 50%;
  padding: 4px 0;

  text-align: center;

  color: #111;
  border-radius: 100px;
  background: #f7f7f7;

  font-weight: bold;
}
.choose-list .text-box span.place{
  font-size: 14px;
  font-weight: bold;
}
.link_menu.place{
  color: #959595;
}
.freeze{
  position: relative;
  top: -2px;

  display: inline-block;

  padding: 4px 5px 3px;

  vertical-align: middle;

  color: #6EB7CC;
  border: solid 1px #6EB7CC;
  border-radius: 4px;

  font-size: 13px;
  line-height: 1;
}
h4 span.product-title{
  display: inline-block;

  margin-right: 5px;
}
.choose-call .main-content {
    padding-top: 60px;
    padding-bottom: 60px;
}
.choose-call .main-content h4{
    margin-bottom: 30px;

    text-align: center;

    font-size: 20px;
}
.choose-call .main-content .columns{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
.choose-call .main-content span{
  display: inline-block;

  vertical-align: middle;
}
.choose-call .main-content span.cat{
  margin-right: 20px;
  padding: 11px 14px;

  border: solid 2px #fff;

  font-weight: bold;
  line-height: 1;
}
.choose-call .main-content span.call{
    color: white;

    font-size: 32px;
    font-weight: bold;
}
@media screen and (min-width: 768px) {
  .choose-list .img-box:hover .hover-img{
    display: block;
  }
  .choose-list .img-box:hover .non-hover-img{
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .choose-select .select-box {
    width: 100%;
  }
  .choose-select a {
    height: 50px;
  }
  .choose-select .main-content {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .choose-search .main-content {
    padding-top: 40px;
    padding-bottom: 20px;
  }
  .choose-body .title-underbar.center {
    margin: 0 auto;
    margin-bottom: 40px;
  }
  .choose-list {
    height: auto;

      border-radius: 30px;
  }
  .choose-list .text-box .content-height{
    height: auto;
    margin-bottom: 30px;

    line-height: 24px;
  }
  .choose-list .text-box .content-height.change{
    height: auto;
  }
  .choose-list .text-box p {
    height: auto;
    margin-bottom: 0px;
  }
  .choose-body .main-content {
    padding-top: 60px;
    padding-bottom: 20px;
  }
  .choose-call .main-content .columns{
      width: 100%;
      margin-right: auto;
      margin-left: auto;
  }
  .choose-call .main-content span{
    display: inline-block;

    vertical-align: middle;
  }
  .choose-call .main-content span.cat{
    margin-right: 10px;
    padding: 0;

    border: none;

    font-size: 14px;
    font-weight: bold;
    line-height: 1;
  }
  .choose-call .main-content span.call{
    font-size: 22px;
    font-weight: bold;
  }
  .choose-call .column{
    padding: 10px 0;
  }
  .choose-call .container-sp{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: auto;
    margin-right: 20px;
    margin-left: 20px;
    padding: 17px 20px;

    border: solid 2px #fff;
    border-radius: 40px;
  }
  .choose-list .text-box .title-underbar{
    margin-right: 0;
    margin-left: 0;
  }
  .form-box input.btn {
    width: 100%;
  }
  .choose-list .img-box:active .hover-img{
    display: block;
  }
  .choose-list .img-box:active .non-hover-img{
    display: none;
  }
}

/*********
 *********

  Recipe / レシピ詳細ページ

 *********
 *********/

.recipe-single .page-title-bar{
  width: 800px;
}
.recipe-single .main-content h3 span {
    display: inline-block;

    padding-top: 0px;
    padding-bottom: 0px;

    font-size: 14px;
}
.recipe-single .recipe-header .cat{
  background: #D58936;
}
.recipe-single .recipe-header{
  font-size: 14px;
}
.recipe-single .recipe-header a, a.recipe-side-link{
  display: inline-block;

  color: #C64C00;

  font-size: 14px;
  font-weight: bold;
}
.recipe-single .recipe-header a:after, a.recipe-side-link:after{
  display: inline-block;

  width: 6px;
  height: 6px;
  margin-left: 8px;

  content: ' ';
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  vertical-align: middle;

  border-top: 1px solid #C64C00;
  border-right: 1px solid #C64C00;
}
.recipe-single .recipe-header .material{
  padding-top: 30px;
}
.recipe-single .recipe-header .material p{
  padding: 10px 0;
}
.recipe-content{
  padding-top: 60px;
  padding-bottom: 60px;
}
.recipe-content .page-num{
  position: static;

  display: inline-block;

  width: 91px;
  height: 91px;
  margin-right: 20px;

  vertical-align: middle;
}
.article-content.recipe-content h2 {
    margin:0;
    padding: 0;

    text-align: left;

    color: inherit;
    border-left: none;
    background: transparent;

    font-size: inherit;
}
.main-content .recipe-content h2 span {
    display: block;

    padding-bottom: 0px;

    color: inherit;

    font-family: "Montserrat","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
    font-size: inherit;
}
.recipe-content h2.step{
  margin-bottom: 20px;

  font-family: "Montserrat","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 24px;
}
.recipe-content .page-num-inner div {
    font-size: 30px;
}
.recipe-content h2 .page-num span {
    position: relative;
    top: 5px;

    display: block;

    font-size: 14px;
}
.recipe-content .bg-gray{
  margin-bottom: 40px;
  padding: 20px;

  background: #fafafa;

  font-weight: bold;
}
.recipe-content .is-img .bg-gray{
  margin-bottom: 0;
}
.columns:not(:last-child).is-img{
  margin-bottom: 0;
  padding-bottom: 40px;
}
h2.point .page-num{
  border: solid 4px #C64C00;
  background-color: white;
}
.recipe-content h2.point .page-num span {
    top: 0px;

    color: #C64C00;

    font-size: 14px;
}
.recipe-single .main-content {
    padding-bottom: 100px;
}
.single .recipe-single .main-content .article-list-side h3{
  border-color: #D58936;
}
.article-list-side .widget.last{
    padding-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .recipe-single .page-title-bar{
    width: calc(100% + 20px);
    margin-bottom: 20px;

    text-align: left;
  }
  .recipe-single .page-title-bar h3 span{
    display: block;

    text-align: left;
  }
  .recipe-single .recipe-header h1 {
    margin: 30px 0 20px;

    font-size: 32px;
  }
  .recipe-single .recipe-header .material {
    padding-top: 20px;
  }
  .recipe-content .page-num {
    display: block;

    margin: 0 auto 20px;
  }
  .recipe-content{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .recipe-content h2.step{
    text-align: center;
  }
  .recipe-single .column.is-three-quarters {
    padding-bottom: 10px;
  }
}
.s-1:after{
  content: '1';
}
.s-2:after{
  content: '2';
}
.s-3:after{
  content: '3';
}
.s-4:after{
  content: '4';
}
.s-5:after{
  content: '5';
}
.s-6:after{
  content: '6';
}
.s-7:after{
  content: '7';
}
.s-8:after{
  content: '8';
}
.s-9:after{
  content: '9';
}
.s-10:after{
  content: '10';
}

.brand-head{
  width: 100%;
  height: 656px;

  text-align: left;

  background: url(./assets/img/hokkaido-bg.png) top center no-repeat;
  background-size: cover;
}
.brand-head .main-content{
  padding-top: 52px;

  color: white;
}
.brand-head .main-content h2{
  padding-bottom: 86px;

  text-align: left;

  font-family: "Montserrat", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-size: 36px;
}
.brand-head .main-content h2 span{
  color: white;
}
.page .brand-head .main-content h3 {
  margin-bottom: 40px;
}
.brand-head .title-underbar{
  background: white;
}
.brand-head p{
  color: white;

  font-weight: bold;
}
.brand-head img{
  position: relative;
  top: 50%;

  display: block;

  width: 338.84px;
  margin: auto;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (min-width: 769px) {
  .brand-head p{
    width: 420px;
  }
}

.page .brand-product .main-content{
  padding-top: 80px;
  padding-bottom: 80px;
}
.page .brand-product .main-content h3{
  margin-bottom: 40px;
}
.brand-product img{
  display: block;

  height: 300px;
  margin: 0 auto;
  padding-bottom: 10px;
}
.brand-product p{
  height: 156px;
}
.brand-product h4{
  height: 65px;
  margin-bottom: 40px;

  text-align: center;

  font-size: 24px;
}
.brand-product span{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "PT Sans", sans-serif;
  font-weight: bold;
}
.brand-product a.btn{
  width: 231px;
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  .brand-product .columns{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    flex-wrap: wrap;
  }
  .brand-product .columns .column{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;

    width: 50%;
    padding: 0 9%;
    margin-bottom: 42px;
  }
}
.brand-mark{
  background: url(./assets/img/brand-bg.png) top center no-repeat;
  background-size: cover;
}
.brand-mark .main-content{
  padding-top: 100px;
  padding-bottom: 120px;
}
.page .brand-mark .main-content h3{
  margin-bottom: 40px;
}
.brand-mark h4{
  margin-bottom: 40px;

  text-align: center;

  font-size: 24px;
}
.brand-mark p{
  margin-bottom: 80px;

  text-align: center;
}
.brand-mark .brand-mark-box{
  height: 495px;
  padding: 60px 40px;

  border: solid 4px white;
  border-radius: 40px;
}
.brand-mark .brand-mark-box h4{
  height: 72px;
  margin-bottom: 20px;
}
.brand-mark .brand-mark-box h4 span{
  display: block;

  font-size: 14px;
  font-weight: bold;
}
.brand-mark .brand-mark-box p{
  margin-bottom: 32px;

  text-align: left;
}
.brand-mark .brand-mark-box h5{
  text-align: center;

  font-size: 18PX;
}
.brand-mark .brand-mark-box img.product{
  display: block;

  height: 250px;
  margin: 0 auto;
}
.brand-mark .brand-mark-box p.txt-center{
  text-align: center;
}

@media screen and (max-width: 768px) {
  .brand-head{
    height: auto;
  }
  .brand-head .main-content {
    padding-bottom: 60px;
  }
  .brand-head .main-content h2 {
    padding-bottom: 60px;

    text-align: center;

    font-size: 32px;
  }
  .brand-head .main-content h2 span{
    text-align: center;
  }
  .brand-head p {
    padding-bottom: 14px;
  }
  .brand-head img{
    position: relative;
    top: auto;

    display: block;

    width: 80%;
    max-width: 80%;
    margin: auto;

    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
  .brand-product h4 {
      height: auto;
      margin-bottom: 20px;

      text-align: center;

      font-size: 22px;
  }
  .brand-product p {
    height: auto;
  }
  .brand-product a.btn {
    width: 295px;
    margin-top: 30px;
    margin-bottom: 14px;
  }
  .page .brand-product .main-content{
    padding-top: 60px;
    padding-bottom: 46px;
  }
  .brand-mark .main-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .brand-mark p {
    margin-bottom: 40px;

    text-align: center;
  }
  .brand-mark .brand-mark-box p {
    margin-bottom: 32px;

    text-align: left;
  }
  .brand-mark .brand-mark-box p.last {
    margin-bottom: 0px;
  }
  .brand-mark h4{
    font-size: 22px;
  }
  .brand-mark .brand-mark-box h4 {
    height: auto;
    margin-bottom: 30px;
  }
  .brand-mark .img-box{
    margin-bottom: 40px;
  }
  .brand-mark .brand-mark-box {
    height: auto;
    padding: 40px 35px;

    border: solid 4px white;
    border-radius: 30px;
  }
}
@media screen and (min-width: 769px) {
  .page-normal .container{
    max-width: 820px;
  }
  .page-normal .main-content{
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .page-normal .columns{
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.contact .columns{
  padding-top: 80px;
  padding-bottom: 48px;
}
.contact .field{
  display: inline-block;

  width: 162px;

  font-weight: bold;
}
.contact .must{
  position: relative;
  top: -2px;

  display: inline-block;

  padding: 4px 13px;

  color: white;
  border-radius: 40px;
  background: #B1272B;

  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}
select.wpcf7-select{
  width: 80%;
  height: 30px;

  border: solid 1px #ccc;
  border-radius: 3px;
}
input.wpcf7-text{
  width: 80%;
  height: 30px;

  border: solid 1px #ccc;
  border-radius: 3px;
}
textarea.wpcf7-textarea{
  width: 80%;
  height: 200px;

  border: solid 1px #ccc;
  border-radius: 3px;
}
.title {
  color: inherit;

  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.title span {
  font-weight: bold;
}
.page-normal a{
  text-decoration: underline;
}
.wpcf7-acceptance{
  display: block;

  margin-top: 30px;
  margin-bottom: 60px;
}
.wpcf7-acceptance .wpcf7-list-item-label{
  margin-left: 10px;

  font-weight: bold;
}
.wpcf7-not-valid-tip{
  display: block;

  color: #B1272B;

  font-weight: bold;
}
.screen-reader-response{
  display: none;

  text-align: center;
}
.screen-reader-response ul{
  display: none;
}
.wpcf7-validation-errors{
  margin: 24px 0;
  padding: 12px 0;

  text-align: center;

  color: #B1272B;
  border: 4px solid #B1272B;
  border-radius: 3px;

  font-weight: bold;
}
.wpcf7-mail-sent-ok{
  margin: 24px 0;
  padding: 12px 0;

  text-align: center;

  color: #48c774;
  border: 4px solid #48c774;
  border-radius: 3px;

  font-weight: bold;
}
@media screen and (max-width: 768px) {
  select.wpcf7-select{
    width: 100%;
    height: 30px;

    border: solid 1px #ccc;
    border-radius: 3px;
  }
  input.wpcf7-text{
    width: 100%;
    height: 30px;

    border: solid 1px #ccc;
    border-radius: 3px;
  }
  textarea.wpcf7-textarea{
    width: 100%;
    height: 200px;

    border: solid 1px #ccc;
    border-radius: 3px;
  }
  .contact .columns {
    margin: 0;
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .contact .column {
    padding: 0.5rem 0 20px;
  }
  .contact .column.is-one-third {
    padding: 0.25rem 0;
  }
  .field:not(:last-child) {
    margin-bottom: 0rem;
  }
  .contact .field{
    width: 84%;
  }
  .contact .must{
    display: inline-block;

    text-align: right;
  }
  .wpcf7-acceptance {
    display: block;

    margin-top: 30px;
    margin-bottom: 40px;
  }
  .main-content {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.page-normal .privacy-head{
  text-align: center;
}
.page-normal .privacy-head h3{
  margin-bottom: 40px;

  font-size: 32px;
}
.page-normal .privacy-head{
  padding-bottom: 60px;
}
.page-normal .privacy-body h4{
  margin-bottom: 30px;

  font-size: 20px;
  line-height: 1;
}
.page-normal .privacy-body p{
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .page-normal .privacy-head, .page-normal .privacy-body{
    padding-right: 20px;
    padding-left: 20px;
  }
  .page-normal .privacy-body h4{
    margin-bottom: 30px;

    font-size: 20px;
    line-height: 34px;
  }
}

.comingSoon__text {
  text-align: center;
  font-size: 38px;
  font-weight: bold;
  margin: 140px auto 100px;
}

@media screen and (max-width: 768px) {
  .comingSoon__text {
    font-size: 24px;
    margin: 32px auto;
  }
}

@media screen and (min-width: 769px) {
  .dressing-tastes .text-box.heightMax {
      position: relative;
      height: 100%;
      padding-bottom: 70px;
  }

  .buttonAbsolute {
    position: absolute;
    bottom: 10px;
    left: 0;
  }
}

.teaPowderBuyBotton {
  text-align: center;
  margin: 56px auto 0;
}
.teaPowderBuyBotton__button {
  margin: 32px auto;
}

.recapcha, .recapcha * {
  font-size: 12px;
  color: #ccc;
}
.grecaptcha-badge {
  visibility: hidden;
}