@charset "UTF-8";
/*ーーーーーーーーーー
画面ロード
ーーーーーーーーーーー*/
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  transition: all 1.5s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; }

#loading.loaded {
  opacity: 0;
  visibility: hidden; }

#loading img {
  width: 100px; }

/*ーーーーーーーーーー
common
ーーーーーーーーーーー*/
body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: 300;
  color: #3e3a39;
  font-size: 15px;
  margin: 0 auto;
  max-width: 1800px;
  text-align: left;
  line-height: 1.6; }
  @media (max-width: 900px) {
    body {
      font-size: 14px; } }

.clearfix:after {
  content: "";
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden; }

.invisible {
  visibility: hidden; }

.inner {
  width: 1080px;
  max-width: 100%; }

.view-pc {
  display: block; }
  @media (max-width: 900px) {
    .view-pc {
      display: none; } }

.view-sp {
  display: none; }
  @media (max-width: 900px) {
    .view-sp {
      display: block; } }

img {
  max-width: 100%; }

a img {
  transition: .2s ease-in; }
  a img:hover {
    opacity: .6;
    transition: .2s ease-out; }

a {
  transition: .2s ease-in; }
  a:hover {
    opacity: .6;
    transition: .2s ease-out; }

.cont-area {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto; }

p {
  font-size: 18px;
  line-height: 1.8;
  padding: 0;
  margin: 0 0 1.5em;
  font-weight: 400; }
  @media (max-width: 900px) {
    p {
      font-size: 14px; } }
  p.notice {
    font-size: 90%;
    line-height: 1.6; }
  p a {
    text-decoration: underline; }
    p a:hover {
      text-decoration: none; }

.content {
  width: 92%;
  max-width: 850px;
  margin: 0 auto;
  margin-bottom: 4em; }
  @media (max-width: 900px) {
    .content {
      margin-bottom: 3em; } }
  .content h3 {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4em;
    padding: 0 0 1.5em 0;
    color: #00407E; }
    @media (max-width: 900px) {
      .content h3 {
        font-size: 18px; } }
  .content p {
    line-height: 1.8em;
    padding: 0 0 1.5em 0; }
    .content p.wide {
      line-height: 2.4em; }
  .content ul.half {
    width: 100%; }
    .content ul.half li {
      float: left;
      width: 47%;
      margin: 0 1.5% 20px; }

.caution {
  display: flex;
  gap: 0 1%;
  align-items: center;
  margin-bottom: 1.5em; }
  .caution .icon {
    width: 40px; }
  .caution p {
    font-size: 90%;
    line-height: 1.6;
    margin: 0;
    padding: 0; }
  .caution.red {
    background: #c1272d;
    padding: 6px 12px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto; }
    .caution.red .icon {
      width: 50px;
      padding-right: 6px; }
    .caution.red p {
      font-size: 115%;
      line-height: 1.5;
      margin: 0;
      padding: 0;
      color: #fff; }
      @media (max-width: 900px) {
        .caution.red p {
          font-size: 100%; } }
    .caution.red a {
      color: #fff; }

.f-red {
  color: #c1272d; }

.border-note {
  border: 1px solid #bbb;
  padding: 15px;
  margin-bottom: 1.5em; }
  .border-note p {
    font-size: 90%;
    line-height: 1.6;
    margin: 0;
    padding: 0; }

.layout-50-50 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 3%; }
  .layout-50-50 .left {
    width: 48.5%; }
    @media (max-width: 900px) {
      .layout-50-50 .left {
        width: 100%; } }
  .layout-50-50 .right {
    width: 48.5%; }
    @media (max-width: 900px) {
      .layout-50-50 .right {
        width: 100%; } }
  .layout-50-50 .full {
    width: 70%;
    text-align: center;
    margin: 0 15%; }
    @media (max-width: 900px) {
      .layout-50-50 .full {
        width: 100%;
        margin: 0; } }
  .layout-50-50 img {
    padding-bottom: 6px; }

.layout-60-40 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 3%; }
  .layout-60-40 .left {
    width: 58.5%; }
    @media (max-width: 900px) {
      .layout-60-40 .left {
        width: 100%; } }
  .layout-60-40 .right {
    width: 38.5%; }
    @media (max-width: 900px) {
      .layout-60-40 .right {
        width: 100%; } }
  .layout-60-40 img {
    padding-bottom: 6px; }

.text-l {
  text-align: left; }

.text-c {
  text-align: center; }

.text-r {
  text-align: right; }

@media (max-width: 930px) {
  h1.logo img {
    width: 120px; } }

@media (max-width: 930px) {
  .fixed_hd nav ul .parent_navi {
    margin-right: 20px; } }

@media (max-width: 930px) {
  .fixed_hd nav ul .parent_navi .ruby {
    font-size: 0.9rem; } }

/*ーーーーーーーーーー
TOPページ
ーーーーーーーーーーー*/
.main-v {
  width: 100%;
  position: relative;
  padding: 0;
  margin: -95px auto 50px; }
  @media (max-width: 900px) {
    .main-v {
      margin: 0px auto 40px; } }
  .main-v h1 {
    position: absolute;
    color: #fff;
    font-weight: 200;
    font-size: 42px;
    text-align: center;
    text-shadow: 0 2px 16px rgba(77, 47, 6, 0.89);
    width: 100%;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }
    @media (max-width: 900px) {
      .main-v h1 {
        font-size: 21px;
        line-height: 1.4;
        text-shadow: 0 2px 10px rgba(77, 47, 6, 0.89);
        top: 78%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%); } }

.top-lead {
  display: flex;
  gap: 0 1%;
  align-items: center;
  margin: 0 auto 80px; }
  @media (max-width: 900px) {
    .top-lead {
      margin: 0 auto 50px; } }
  .top-lead .img-l {
    width: 21%; }
    @media (max-width: 900px) {
      .top-lead .img-l {
        width: 0;
        display: none; } }
  .top-lead .lead-text {
    width: 56%; }
    @media (max-width: 900px) {
      .top-lead .lead-text {
        width: 92%;
        margin: 0 4%; } }
  .top-lead .img-r {
    width: 21%; }
    @media (max-width: 900px) {
      .top-lead .img-r {
        width: 0;
        display: none; } }
  .top-lead h2 {
    font-weight: 200;
    font-size: 36px;
    text-align: center;
    margin: 0;
    padding: 0 0 20px;
    color: #533a2d; }
    @media (max-width: 900px) {
      .top-lead h2 {
        font-size: 20px; } }
  .top-lead p {
    font-size: 16px;
    text-align: center; }
    @media (max-width: 900px) {
      .top-lead p {
        font-size: 14px; } }

.top-prd {
  display: flex;
  flex-wrap: wrap;
  gap: 50px 0; }
  .top-prd h3 {
    position: relative;
    display: inline-block;
    width: 20em;
    margin: 0 auto 20px;
    padding: 10px;
    background-color: #7a6a56;
    text-align: center;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff; }
    @media (max-width: 900px) {
      .top-prd h3 {
        font-size: 15px; } }
    .top-prd h3::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      border-style: solid;
      border-width: 12px 7.5px 0 7.5px;
      border-color: #7a6a56 transparent transparent;
      translate: -50% 100%; }
  .top-prd h4 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: #7a6a56;
    font-size: 50px;
    line-height: 1.2;
    margin: 0;
    padding: 0; }
    @media (max-width: 900px) {
      .top-prd h4 {
        font-size: 30px; } }
  .top-prd h5 {
    color: #7a6a56; }
  .top-prd li {
    width: 50%;
    text-align: center;
    background: #efe0cf;
    padding: 0 4px 40px; }
    @media (max-width: 900px) {
      .top-prd li {
        width: 100%; } }
    .top-prd li .fuki {
      margin-top: -22px; }
    .top-prd li .img-prd {
      width: 90%;
      max-width: 600px;
      margin: 10px auto; }
    .top-prd li.glass {
      background: #e4e3e0; }
      .top-prd li.glass h3 {
        background-color: #948f88; }
        .top-prd li.glass h3::after {
          border-color: #948f88 transparent transparent; }
      .top-prd li.glass h4 {
        color: #948f88; }
      .top-prd li.glass h5 {
        color: #948f88; }
  .top-prd dl {
    display: flex;
    width: 80%;
    margin: 0 auto 30px;
    flex-wrap: wrap;
    gap: 10px 2%;
    background: rgba(255, 255, 255, 0.4);
    padding: 20px; }
    .top-prd dl dt {
      width: 4%; }
      @media (max-width: 900px) {
        .top-prd dl dt {
          width: 6%;
          margin-top: -3px; } }
    .top-prd dl dd {
      width: 94%;
      text-align: left;
      font-weight: 400; }
      @media (max-width: 900px) {
        .top-prd dl dd {
          width: 92%; } }

a.top-prd-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #3e3a39;
  width: 18em;
  font-size: 17px;
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  border-radius: 25px;
  text-align: center; }
  @media (max-width: 900px) {
    a.top-prd-btn {
      font-size: 15px; } }
  a.top-prd-btn span {
    width: 18px;
    position: absolute;
    right: 10px;
    top: 30%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%); }
    @media (max-width: 900px) {
      a.top-prd-btn span {
        width: 15px; } }
  a.top-prd-btn:hover {
    color: #3e3a39; }

/*ーーーーーーーーーー
個別ページ
ーーーーーーーーーーー*/
#grill h3, #grill h4, #grill h5 {
  color: #533a2d; }
#grill .num {
  color: #533a2d;
  border-bottom: 4px solid #533a2d; }

#glass h3, #glass h4, #glass h5 {
  color: #4c4946; }
#glass .num {
  color: #4c4946;
  border-bottom: 4px solid #4c4946; }

.header-img.head-grill {
  background: url("../img/head_grill2.jpg") no-repeat;
  background-position: bottom center;
  background-size: cover;
  text-align: center;
  padding: 180px 0 160px;
  margin: -90px auto 60px; }
  @media (max-width: 900px) {
    .header-img.head-grill {
      /*padding: 100px 0 60px;*/
      margin: -90px auto 40px; } }
  @media (max-width: 768px) {
    .header-img.head-grill {
      margin: 0px auto 40px;
      padding: 90px 0 60px; } }
.header-img.head-glass {
  background: url("../img/head_glass2.jpg") no-repeat;
  background-position: bottom center;
  background-size: cover;
  text-align: center;
  padding: 180px 0 160px;
  margin: -90px auto 60px; }
  @media (max-width: 900px) {
    .header-img.head-glass {
      /*padding: 100px 0 60px;*/
      margin: -90px auto 40px; } }
  @media (max-width: 768px) {
    .header-img.head-glass {
      margin: 0px auto 40px;
      padding: 90px 0 60px; } }
.header-img h2 {
  font-size: 64px;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  color: #fff;
  text-shadow: 0 2px 12px rgba(77, 47, 6, 0.89);
  line-height: 1.2;
  margin: 0;
  padding: 0; }
  @media (max-width: 900px) {
    .header-img h2 {
      font-size: 36px; } }
.header-img h1 {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 2px 10px rgba(77, 47, 6, 0.89); }
  @media (max-width: 900px) {
    .header-img h1 {
      font-size: 16px; } }

h3.text-about {
  font-size: 28px;
  font-weight: 200; }
  @media (max-width: 900px) {
    h3.text-about {
      font-size: 18px; } }
h3.obi {
  font-size: 28px;
  font-weight: 200;
  line-height: 1.2;
  padding: 0.4em;
  background: #ebe9e6;
  text-align: center;
  margin-bottom: 1em; }
  @media (max-width: 900px) {
    h3.obi {
      font-size: 18px; } }

h4.category {
  font-size: 56px;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  text-align: center;
  line-height: 1.1; }
  @media (max-width: 900px) {
    h4.category {
      font-size: 32px; } }

h5.category {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  margin: 0;
  padding: 0 0 1.5em; }
  @media (max-width: 900px) {
    h5.category {
      font-size: 15px; } }

#about {
  margin-bottom: 80px; }
  @media (max-width: 900px) {
    #about {
      margin-bottom: 50px; } }

.about-grill {
  display: flex;
  gap: 20px 4%;
  margin-bottom: 40px;
  flex-wrap: wrap; }
  .about-grill .text {
    width: 60%; }
    @media (max-width: 900px) {
      .about-grill .text {
        width: 100%; } }
  .about-grill .img {
    width: 36%; }
    @media (max-width: 900px) {
      .about-grill .img {
        width: 70%;
        margin-left: 15%; } }

.about-glass {
  width: 100%;
  position: relative; }
  .about-glass .img-about-glass {
    position: absolute;
    right: 0;
    top: -30px;
    width: 35%;
    max-width: 310px; }
    @media (max-width: 900px) {
      .about-glass .img-about-glass {
        display: none; } }

.three {
  display: flex;
  gap: 20px 3%;
  margin-bottom: 30px; }
  .three li {
    width: 31.333%;
    text-align: center; }
  .three img {
    margin-bottom: 4px; }

.bg-grill {
  background: #f4ebe2; }

.bg-glass {
  background: #efefef; }

#feature {
  margin-bottom: 80px;
  padding: 60px 0 20px; }
  @media (max-width: 900px) {
    #feature {
      margin-bottom: 50px;
      padding: 30px 0 10px; } }

.point {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  padding: 28px 32px;
  margin-bottom: 70px; }
  @media (max-width: 900px) {
    .point {
      padding: 35px 24px 20px;
      margin-bottom: 50px; } }
  .point h3 {
    font-size: 30px;
    font-weight: 200;
    line-height: 1.5;
    margin: 0;
    padding: 0 0 20px; }
    @media (max-width: 900px) {
      .point h3 {
        font-size: 18px; } }
  .point p {
    font-size: 16px; }
    @media (max-width: 900px) {
      .point p {
        font-size: 14px; } }
  .point .layout-point {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 4%;
    align-items: center; }
    .point .layout-point.reveres {
      flex-wrap: wrap-reverse; }
    .point .layout-point .img {
      width: 42%; }
      @media (max-width: 900px) {
        .point .layout-point .img {
          width: 100%; } }
    .point .layout-point .text {
      width: 54%; }
      @media (max-width: 900px) {
        .point .layout-point .text {
          width: 100%; } }
  .point .num {
    position: absolute; }
    .point .num.posi-l {
      top: -62px;
      left: -25px; }
      @media (max-width: 900px) {
        .point .num.posi-l {
          top: -40px;
          left: -8px; } }
    .point .num.posi-r {
      top: -62px;
      right: -25px; }
      @media (max-width: 900px) {
        .point .num.posi-r {
          top: -40px;
          right: -8px; } }
    .point .num p {
      font-size: 80px;
      font-family: "Lato", sans-serif;
      font-weight: 700;
      line-height: 1.1;
      margin: 0;
      padding: 0; }
      @media (max-width: 900px) {
        .point .num p {
          font-size: 50px; } }
      .point .num p span {
        font-size: 30px;
        padding-right: 5px; }
        @media (max-width: 900px) {
          .point .num p span {
            font-size: 18px; } }

#lineup {
  margin: 0 auto 80px; }
  @media (max-width: 900px) {
    #lineup {
      margin: 0 auto 50px; } }

h5.spec {
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  padding: 0 2px 15px; }

.img-lineup {
  width: 90%;
  max-width: 550px;
  margin: 0 auto 20px;
  padding-top: 10px; }

.table-spec {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 10px;
  font-weight: 400; }
  .table-spec dt {
    width: 15%;
    border-bottom: 1px solid #ccc;
    padding: 15px 2px; }
    @media (max-width: 900px) {
      .table-spec dt {
        width: 25%; } }
  .table-spec dd {
    width: 85%;
    border-bottom: 1px solid #ccc;
    padding: 15px 2px; }
    @media (max-width: 900px) {
      .table-spec dd {
        width: 75%; } }

.btn-lineup {
  display: flex;
  width: 100%;
  max-width: 800px;
  gap: 0 4%;
  margin: 30px auto; }
  .btn-lineup li {
    width: 48%; }
  .btn-lineup a.top-prd-btn {
    background: #7a6a56;
    border: 1px solid #7a6a56;
    width: 100%;
    color: #fff; }
    .btn-lineup a.top-prd-btn:hover {
      color: #fff; }

#glass .btn-lineup a.top-prd-btn {
  background: #82807e;
  border: 1px solid #82807e;
  width: 100%;
  color: #fff; }
  #glass .btn-lineup a.top-prd-btn:hover {
    color: #fff; }

.btn-manual {
  width: 80%;
  max-width: 350px;
  padding: 15px 0;
  text-align: center;
  /*border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;*/
  border: 1px solid #ccc;
  font-size: 90%;
  margin: 0 auto 40px;
  /*background: rgba(255,255,255,1);*/
  background: #EBE8E3; }
  .btn-manual a.top-prd-btn {
    position: relative;
    background: white;
    border: 1px solid #3e3a39;
    width: 17em;
    font-size: 14px;
    display: block;
    margin: 5px auto 0;
    padding: 8px 0;
    border-radius: 20px;
    text-align: center; }
    @media (max-width: 900px) {
      .btn-manual a.top-prd-btn {
        font-size: 12px; } }
    .btn-manual a.top-prd-btn i {
      padding: 0 0 0 8px; }
      .btn-manual a.top-prd-btn i img {
        width: 15px;
        vertical-align: baseline; }
    .btn-manual a.top-prd-btn:hover {
      color: #3e3a39; }

#howto {
  padding: 60px 0 30px; }
  @media (max-width: 900px) {
    #howto {
      padding: 40px 0 20px; } }

.howto-grill {
  display: flex;
  /*align-items: center;*/
  gap: 20px 1%;
  margin-bottom: 30px;
  flex-wrap: wrap;
  justify-content: center; }
  .howto-grill li {
    width: 24.25%;
    font-size: 90%;
    line-height: 1.3; }
    @media (max-width: 900px) {
      .howto-grill li {
        width: 49.5%; } }
    .howto-grill li h5 {
      font-size: 17px;
      padding-bottom: 4px; }
      @media (max-width: 900px) {
        .howto-grill li h5 {
          font-size: 15px; } }
  .howto-grill dl {
    display: flex;
    /*align-items: center;*/
    gap: 0px;
    margin: 4px 0 0; }
    .howto-grill dl dt {
      width: 38px;
      font-size: 32px;
      font-weight: 600;
      color: #7a6a56; }
      @media (max-width: 900px) {
        .howto-grill dl dt {
          width: 32px;
          font-size: 24px; } }
    .howto-grill dl dd {
      padding-top: 9px; }
      @media (max-width: 900px) {
        .howto-grill dl dd {
          padding-top: 4px; } }
  .howto-grill.glass li {
    width: 19.2%;
    font-size: 90%;
    line-height: 1.3; }
    @media (max-width: 900px) {
      .howto-grill.glass li {
        width: 49.5%; } }
  .howto-grill.glass dl dt {
    color: #4c4946; }

#cooking-time {
  margin-top: -30px;
  padding-top: 30px; }
  @media (max-width: 900px) {
    #cooking-time {
      margin-top: -10px;
      padding-top: 10px; } }

.meyasu {
  margin: 80px auto 40px;
  border: 2px solid #949290;
  border-radius: 20px;
  padding: 0 25px 25px; }
  @media (max-width: 900px) {
    .meyasu {
      margin: 40px auto 40px;
      padding: 0 10px 10px; } }
  .meyasu h4 {
    width: 60%;
    max-width: 240px;
    margin: -30px auto 25px; }
    @media (max-width: 900px) {
      .meyasu h4 {
        margin: -23px auto 15px; } }
  .meyasu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 1.5%; }
    .meyasu ul li {
      width: 32.333%;
      background: #fff;
      text-align: center;
      padding: 8px;
      border-radius: 6px; }
      @media (max-width: 900px) {
        .meyasu ul li {
          width: 49.25%; } }
      .meyasu ul li img {
        width: 100%;
        max-width: 290px; }
      .meyasu ul li.hosoku {
        margin-left: -2%;
        width: 17.35%;
        text-align: left;
        padding: 10px 10px 0 15px; }
        @media (max-width: 900px) {
          .meyasu ul li.hosoku {
            width: 51.25%; } }
      .meyasu ul li.half {
        width: 49.25%; }
        @media (max-width: 900px) {
          .meyasu ul li.half {
            width: 100%; } }
        @media (max-width: 900px) {
          .meyasu ul li.half img.img-half {
            width: 55%; } }
      .meyasu ul li h5 {
        background: #eae9e7;
        padding: 0.2em 0; }
      .meyasu ul li p {
        font-size: 95%;
        border-top: 1px dashed #aaa;
        border-bottom: 1px dashed #aaa;
        margin: 0 0 10px;
        padding: 0.2em 0; }
      .meyasu ul li .notice {
        font-size: 90%; }
        .meyasu ul li .notice.align-l {
          text-align: left; }
      .meyasu ul li dl {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 2%;
        margin-bottom: 8px;
        width: 100%;
        max-width: 290px;
        margin-left: auto;
        margin-right: auto; }
        @media (max-width: 900px) {
          .meyasu ul li dl {
            max-width: 100%; } }
        .meyasu ul li dl dt {
          width: 17%; }
          @media (max-width: 900px) {
            .meyasu ul li dl dt {
              width: 25%; } }
        .meyasu ul li dl dd {
          width: 29%;
          text-align: left;
          font-size: 21px;
          font-weight: 700; }
          @media (max-width: 900px) {
            .meyasu ul li dl dd {
              width: 71%;
              font-size: 18px;
              margin-left: 2%; } }
        .meyasu ul li dl.rice-detail {
          max-width: 440px;
          gap: 15px 2%; }
          .meyasu ul li dl.rice-detail dt {
            width: 12%; }
            @media (max-width: 900px) {
              .meyasu ul li dl.rice-detail dt {
                width: 12%; } }
          .meyasu ul li dl.rice-detail dd {
            width: 86%;
            text-align: left;
            font-size: 21px;
            font-weight: 700;
            line-height: 1.0; }
            @media (max-width: 900px) {
              .meyasu ul li dl.rice-detail dd {
                width: 84%;
                font-size: 15px;
                line-height: 1.1; } }
            .meyasu ul li dl.rice-detail dd span {
              text-align: left;
              font-size: 14px;
              font-weight: 300; }
              @media (max-width: 900px) {
                .meyasu ul li dl.rice-detail dd span {
                  font-size: 12px; } }
      @media (max-width: 900px) {
        .meyasu ul li.half dl.tori
        dt {
          width: 12%; } }
      @media (max-width: 900px) {
        .meyasu ul li.half dd {
          width: 34%;
          margin-left: 0; } }

.fcaj {
  text-align: center; }
  .fcaj ul {
    display: inline-flex;
    align-items: center;
    gap: 0 15px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 15px 5px;
    margin-bottom: 30px;
    max-width: 90%; }
    .fcaj ul li img {
      width: 120px; }
      @media (max-width: 900px) {
        .fcaj ul li img {
          width: 90px; } }

/*ーーーーーーーーーー
YouTube埋め込み
ーーーーーーーーーーー*/
.youtube {
  width: 92%;
  max-width: 800px;
  margin: 40px auto 60px;
  aspect-ratio: 16 / 9; }
  .youtube iframe {
    width: 100%;
    height: 100%; }

/*ーーーーーーーーーー
RECIPE
ーーーーーーーーーーー*/
#recipe {
  width: 100%;
  /*max-width: 840px;*/
  margin: 0 auto;
  padding: 70px 0 160px; }
  @media (max-width: 900px) {
    #recipe {
      width: 100%;
      /*max-width: 850px;*/
      margin: 0 auto;
      padding: 60px 0 120px; } }
  #recipe .recipe-slider {
    margin: 0;
    padding: 0;
    position: relative; }
    #recipe .recipe-slider li {
      padding: 0 20px;
      margin: 0;
      text-align: center; }
      @media (max-width: 900px) {
        #recipe .recipe-slider li {
          padding: 0 10px; } }
      #recipe .recipe-slider li img {
        text-align: center;
        margin: 0 auto; }
      #recipe .recipe-slider li h3 {
        font-weight: 400;
        font-size: 20px;
        text-align: center;
        padding: 20px 0 0 0;
        line-height: 1.2; }
        @media (max-width: 900px) {
          #recipe .recipe-slider li h3 {
            font-size: 16px; } }
        #recipe .recipe-slider li h3::after {
          content: "";
          display: block;
          border-bottom: 4px solid #533a2d;
          width: 4em;
          margin: 20px auto; }
      #recipe .recipe-slider li p {
        text-align: left;
        font-size: 16px;
        line-height: 1.5;
        min-height: 110px; }
        @media (max-width: 900px) {
          #recipe .recipe-slider li p {
            font-size: 14px;
            min-height: 130px; } }
      #recipe .recipe-slider li.recipe-name {
        opacity: .2;
        transition: opacity .3s; }
        #recipe .recipe-slider li.recipe-name.slick-center {
          opacity: 1; }
  #recipe .recipe-detail p {
    font-size: 15px;
    padding-bottom: 0.5em;
    line-height: 1.6; }
    #recipe .recipe-detail p strong {
      font-size: 140%; }
    @media (max-width: 900px) {
      #recipe .recipe-detail p {
        font-size: 14px; } }
  #recipe .recipe-detail h4 {
    font-size: 18px;
    font-weight: 500; }
    @media (max-width: 900px) {
      #recipe .recipe-detail h4 {
        font-size: 16px; } }
  #recipe .recipe-detail table.material {
    font-size: 15px;
    margin-bottom: 2em;
    line-height: 1.5;
    width: auto; }
    @media (max-width: 900px) {
      #recipe .recipe-detail table.material {
        font-size: 13px; } }
    #recipe .recipe-detail table.material th {
      font-weight: 400;
      padding-right: 2.0em;
      padding-top: 10px;
      vertical-align: top; }
      @media (max-width: 900px) {
        #recipe .recipe-detail table.material th {
          padding-right: 1.5em; } }
    #recipe .recipe-detail table.material td {
      font-weight: 400;
      padding-top: 10px;
      vertical-align: top; }
  #recipe .howto {
    position: relative;
    font-weight: 500;
    font-size: 14px;
    display: inline-block;
    border: 1px solid #533a2d;
    text-align: center;
    cursor: pointer;
    padding: 6px 20px;
    border-radius: 18px;
    background: #fff; }
    #recipe .howto span {
      font-size: 14px; }
      #recipe .howto span.plus {
        display: inline-block; }
      #recipe .howto span.minus {
        display: none; }
  #recipe .recipe-active .howto span.plus {
    display: none; }
  #recipe .recipe-active .howto span.minus {
    display: inline-block; }
  #recipe .border-howto {
    border-top: 1px solid #533a2d; }
    #recipe .border-howto .inner-howto {
      margin-top: -20px; }
  #recipe img.prev-arrow {
    z-index: 1000;
    position: absolute;
    top: 34%;
    left: 17%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%); }
    @media (max-width: 900px) {
      #recipe img.prev-arrow {
        width: 23px;
        top: 21%;
        left: 4%; } }
  #recipe img.next-arrow {
    z-index: 1000;
    position: absolute;
    top: 34%;
    right: 17%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%); }
    @media (max-width: 900px) {
      #recipe img.next-arrow {
        width: 23px;
        top: 21%;
        right: 4%; } }

/*-------------------
recipe
---------------------*/
.recipe-detail.animated.fadetotop {
  -webkit-animation: fadetotop 0.4s ease-out 0.2s 1 normal both;
  animation: fadetotop 0.4s ease-out 0.2s 1 normal both; }

.recipe-detail {
  visibility: hidden;
  display: none;
  max-height: 0;
  opacity: 0;
  /*border-top:1px solid #000;*/
  padding: 1.5em 0 0;
  transition: all 0.3s;
  background: #fff;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 55%; }
  @media (max-width: 900px) {
    .recipe-detail {
      width: 76%;
      margin: 0 auto;
      /*margin-bottom: 200px;*/
      min-height: 100vh; } }
  @media (max-width: 900px) {
    .recipe-detail p {
      width: 90%;
      margin: 0 auto 1.5em; } }

.recipe-tab01,
.recipe-tab02,
.recipe-tab03,
.recipe-tab04,
.recipe-tab05,
.recipe-tab06,
.recipe-tab07,
.recipe-tab08,
.recipe-tab09,
.recipe-tab10 {
  display: block;
  opacity: 1;
  visibility: visible; }

.open-recipe01 .recipe-tab02,
.open-recipe01 .recipe-tab03,
.open-recipe01 .recipe-tab04,
.open-recipe01 .recipe-tab05,
.open-recipe01 .recipe-tab06,
.open-recipe01 .recipe-tab07,
.open-recipe01 .recipe-tab08,
.open-recipe01 .recipe-tab09,
.open-recipe01 .recipe-tab10 {
  visibility: hidden;
  opacity: 0; }
.open-recipe01 .recipe-detail.recipe01 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.open-recipe02 .recipe-tab01,
.open-recipe02 .recipe-tab03,
.open-recipe02 .recipe-tab04,
.open-recipe02 .recipe-tab05,
.open-recipe02 .recipe-tab06,
.open-recipe02 .recipe-tab07,
.open-recipe02 .recipe-tab08,
.open-recipe02 .recipe-tab09,
.open-recipe02 .recipe-tab10 {
  visibility: hidden;
  opacity: 0; }
.open-recipe02 .recipe-detail.recipe02 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.open-recipe03 .recipe-tab01,
.open-recipe03 .recipe-tab02,
.open-recipe03 .recipe-tab04,
.open-recipe03 .recipe-tab05,
.open-recipe03 .recipe-tab06,
.open-recipe03 .recipe-tab07,
.open-recipe03 .recipe-tab08,
.open-recipe03 .recipe-tab09,
.open-recipe03 .recipe-tab10 {
  visibility: hidden;
  opacity: 0; }
.open-recipe03 .recipe-detail.recipe03 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.open-recipe04 .recipe-tab01,
.open-recipe04 .recipe-tab02,
.open-recipe04 .recipe-tab03,
.open-recipe04 .recipe-tab05,
.open-recipe04 .recipe-tab06,
.open-recipe04 .recipe-tab07,
.open-recipe04 .recipe-tab08,
.open-recipe04 .recipe-tab09,
.open-recipe04 .recipe-tab10 {
  visibility: hidden;
  opacity: 0; }
.open-recipe04 .recipe-detail.recipe04 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.open-recipe05 .recipe-tab01,
.open-recipe05 .recipe-tab02,
.open-recipe05 .recipe-tab03,
.open-recipe05 .recipe-tab04,
.open-recipe05 .recipe-tab06,
.open-recipe05 .recipe-tab07,
.open-recipe05 .recipe-tab08,
.open-recipe05 .recipe-tab09,
.open-recipe05 .recipe-tab10 {
  visibility: hidden;
  opacity: 0; }
.open-recipe05 .recipe-detail.recipe05 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.open-recipe06 .recipe-tab01,
.open-recipe06 .recipe-tab02,
.open-recipe06 .recipe-tab03,
.open-recipe06 .recipe-tab04,
.open-recipe06 .recipe-tab05,
.open-recipe06 .recipe-tab07,
.open-recipe06 .recipe-tab08,
.open-recipe06 .recipe-tab09,
.open-recipe06 .recipe-tab10 {
  visibility: hidden;
  opacity: 0; }
.open-recipe06 .recipe-detail.recipe06 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.open-recipe07 .recipe-tab01,
.open-recipe07 .recipe-tab02,
.open-recipe07 .recipe-tab03,
.open-recipe07 .recipe-tab04,
.open-recipe07 .recipe-tab05,
.open-recipe07 .recipe-tab06,
.open-recipe07 .recipe-tab08,
.open-recipe07 .recipe-tab09,
.open-recipe07 .recipe-tab10 {
  visibility: hidden;
  opacity: 0; }
.open-recipe07 .recipe-detail.recipe07 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.open-recipe08 .recipe-tab01,
.open-recipe08 .recipe-tab02,
.open-recipe08 .recipe-tab03,
.open-recipe08 .recipe-tab04,
.open-recipe08 .recipe-tab05,
.open-recipe08 .recipe-tab06,
.open-recipe08 .recipe-tab07,
.open-recipe08 .recipe-tab09,
.open-recipe08 .recipe-tab10 {
  visibility: hidden;
  opacity: 0; }
.open-recipe08 .recipe-detail.recipe08 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.open-recipe09 .recipe-tab01,
.open-recipe09 .recipe-tab02,
.open-recipe09 .recipe-tab03,
.open-recipe09 .recipe-tab04,
.open-recipe09 .recipe-tab05,
.open-recipe09 .recipe-tab06,
.open-recipe09 .recipe-tab07,
.open-recipe09 .recipe-tab08,
.open-recipe09 .recipe-tab10 {
  visibility: hidden;
  opacity: 0; }
.open-recipe09 .recipe-detail.recipe09 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.open-recipe10 .recipe-tab01,
.open-recipe10 .recipe-tab02,
.open-recipe10 .recipe-tab03,
.open-recipe10 .recipe-tab04,
.open-recipe10 .recipe-tab05,
.open-recipe10 .recipe-tab06,
.open-recipe10 .recipe-tab07,
.open-recipe10 .recipe-tab08,
.open-recipe10 .recipe-tab09 {
  visibility: hidden;
  opacity: 0; }
.open-recipe10 .recipe-detail.recipe10 {
  display: block;
  max-height: 1000vh;
  opacity: 1;
  transition: all 0.3s;
  visibility: visible;
  margin-top: 0px; }

.slick-dots {
  bottom: -40px !important; }

.slick-dots li {
  padding: 0 15px !important;
  color: #dfdddb !important; }

.slick-dots li button:before {
  font-size: 15px !important;
  color: #999; }

/*ーーーーーーーーーー
footer
ーーーーーーーーーーー*/
footer {
  border-top: 1px solid #cccac6; }

p#page-top {
  width: 48px;
  position: fixed;
  right: 15px;
  bottom: 10px;
  opacity: .9;
  padding: 0;
  margin: 0; }
  @media (max-width: 900px) {
    p#page-top {
      width: 38px;
      right: 12px;
      bottom: 8px; } }

.cmn_ft .right_box .logo_doshisha {
  margin-top: 50px; }