/* ------------------------------
Header
--------------------------------*/

.header {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 24px 100px;
  position: relative;
  width: 100%;
}

.logo_dark-brown {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 16px;
  position: relative;
}

.logo_create {
  height: auto;
  position: relative;
  width: 46px;
}

.logo_dark-brown_catch {
  height: auto;
  position: relative;
  width: 288px;
}

.logo_plant-based {
  height: auto;
  position: relative;
  width: 106px;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {

}

@media screen and (max-width: 767px) {

  /* screen - sp */

  .header {
    padding: 10px 20px;
  }
    
  .logo_create {
    height: auto;
    width: 26px;
  }

  .logo_dark-brown {
    gap: 10px;
  }

  .logo_dark-brown_catch {
    height: auto;
    width: 170px;
  }

  .logo_plant-based {
    height: auto;
    width: 46px;
  }
}

/* ------------------------------
Mainvisual
--------------------------------*/

.mainvisual {
  align-items: center;
  align-self: stretch;
  background-color: var(--light-blue);
  background-image: url(../img/mainvisual/background.jpg);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 116px 160px;
  position: relative;
  width: 100%;
}

.mainvisual_inner {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  width: 1120px;
}

.mainvisual_title {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 41px;
  position: relative;
}

.mainvisual_subtitle {
  position: relative;
  width: fit-content;
}

.mainvisual_bg_leaf {
  height: 208px;
  left: 633px;
  position: absolute;
  top: 236px;
  width: 120px;
}

.mainvisual_bg_leaf-2 {
  display: none;
}

.mainvisual_product {
  height: auto;
  position: relative;
  max-width: 430px;
  width: 100%;
}


@media screen and (max-width: 1199px) {
  .mainvisual {
    background-image: none;
    padding: 50px 20px;
  }

  .mainvisual_inner {
    display: inline-flex;
    gap: 30px;
    width: 100%;
    flex-direction: column;
  }

  .mainvisual_title {
    align-items: center;
    gap: 14px;
  }

  .mainvisual_subtitle {
    text-align: center;
    font-size: var(--font-size-m);
  }

  .mainvisual_bg_leaf {
    width: 64px;
    height: auto;
    top: 50px;
    left: -50px;
  }

  .mainvisual_bg_leaf.leaf-2 {
    display: block;
    left: 178px;
    transform: scale(-1, 1);
  }

  .mainvisual_product {
    max-width: 190px;
    margin: 0 auto;
  }
  .mainvisual_product_outer {
    position: relative;
  }
}

@media screen and (max-width: 767px) {

}

/* ------------------------------
Subvisual
--------------------------------*/

.subvisual {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  position: relative;
}

.subvisual_item {
  width: 362px;
  height: auto;
}

.subvisual_item {
  height: 204px;
  object-fit: cover;
  position: relative;
}

@media screen and (max-width: 1199px) {
  .subvisual_item {
    width: 188px;
    height: 106px;
  }
}

/* ------------------------------
About
--------------------------------*/

.about {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 140px 100px 100px;
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.about_inner {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 68px;
  /* margin-left: -6.00px;
  margin-right: -6.00px; */
  position: relative;
}

.about_inner_text-box{
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 37px;
  position: relative;
  width: 100%;
}

.about_heading {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.about_heading_title {
  display: inline-block;
  padding: 6px 20px;
  background: var(--red);  

  color: var(--white);
  font-family: var(--font-family-hina_mincho);
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
}

.discription {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 17px;
  position: relative;
  width: 100%;
}


/* aboutの商品特徴紹介*/

.about_product {
  display: inline-flex;
  padding: 0px 0px 0px 312px;
  position: relative;
}

.about_product-list {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
}

.about_product-list_item {
  align-items: flex-start;
  background-color: var(--white);
  border-radius: 4px;
  display: flex;
  padding: 12px 30px 12px 150px;
  width: 700px;
}

.about_icon_armond {
  background-image: url(../img/about/icon_armond@2x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 37.2px;
  position: relative;
  width: 30px;
}

.about_product-list_item-text {
  position: relative;
  color: var(--brown);
  font-size: var(--font-size-m);
}

.about_product-list_item {
  align-items: center;
  background-color: var(--white);
  border-radius: 4px;
  display: flex;
  gap: 16px;
  padding: 12px 30px 12px 150px;
  width: 700px;
}


.about_product-list_item-title {
  flex: 0 0 auto;
  gap: 16px;
  position: relative;
  align-items: center;
  display: inline-flex;
}

.about_product-img {
  height: auto;
  left: 0;
  top: 0; 
  position: absolute;
  width: 433px;
}

@media screen and (max-width: 1199px) {
  .about {
    padding: 80px 20px;
  }
  
  .about_inner {
    align-items: center;
    display: flex;
    gap: 120px;
    max-width: 420px;
    width: 100%;
  }

  .about_heading_title {
    font-size: 16px;
  }
  
  .discription h3 {
    font-size: 24px;
  }

  /* aboutの商品特徴紹介*/
  .about_product {
    display: block;
    padding: 0;
    width: 100%;
  }
  
  .about_product-list {
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    position: relative;
    width: 100%;
  }
  
  .about_product-list_item {
    width: 100%;
    flex-flow: inherit;
    gap: 4px;
    padding: 12px 30px 12px 16px;
    align-items: flex-start;    
  }

  .about_product-img {
    position: relative;
    width: 100%;
    max-width: 256px;
    margin: 0 auto 20px;
  }
}

/* bg-spoonの大きさ・位置調整*/


.about_bg-spoon {
  background-image: url(../img/about/bg_spoon@2x.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 279px;
  left: 800px;
  position: absolute;
  top: 33px;
  width: 623px;
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  /*767px〜1199px*/
  .about_bg-spoon {
    height: 139px;
    left: 60vw;
    top: 440px;
    width: 311px;
  }
}

@media screen and (max-width: 767px) {
  /*0〜767px*/
  .about_bg-spoon {
    height: 139px;
    left: 50vw;
    top: 440px;
    width: 311px;
  }
}

/* ------------------------------
Feature
--------------------------------*/

.feature_inner {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-wrap: wrap;
  gap: 0px 0px;
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}

.feature_inner.feature02 {
  flex-direction: row-reverse;
}

.feature01_heading {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.feature_thumb {
  background-position: 50% 50%;
  background-size: cover;
  flex: 1;
  flex-grow: 1;
  position: relative;
}

.feature01_thumb {
  background-image: url(../img/feature/feature01@2x.jpg);
  height: 610px;
}

.feature02_thumb {
  background-image: url(../img/feature/feature02@2x.jpg);
  height: 480px;
}

.feature_text-box {
  align-items: flex-start;
  display: flex;
  position: relative;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 20px;  
}

.feature01_text-box {
  padding: 100px 60px 100px 100px;
}

.feature02_text-box {
  padding: 100px 100px 100px 60px;
}

.heading-2 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {

}
@media screen and (max-width: 767px) {
  .feature_inner {
    display: block;
  }
  .feature01_text-box,.feature02_text-box {
    padding: 60px 20px;
  }
  .feature01_thumb,.feature02_thumb {
    height: 230px;
  }
}

/* ------------------------------
Recommend
--------------------------------*/

.recommend {
  align-items: center;
  background-color: var(--light-orange);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 43px;
  padding: 120px 100px;
  width: 100%;
}

.recommend_heading {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 414px;
}

.recommend-list {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.recommend-list-item {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 20px;
  padding: 0px 10px;
  position: relative;
}

.img-reccomend {
  height: auto;
  position: relative;
  max-width: 340px;
}


.recommend-list-item-title {
  align-self: stretch;
  position: relative;
  text-align: center;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {

}
@media screen and (max-width: 767px) {
  .recommend-list {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }  
  
}

/* ------------------------------
Topic
--------------------------------*/

.topic {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--black-3);
  background-image: url(../img/topic/background.jpg);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 100px;
  position: relative;
  width: 100%;
}

.topic_inner {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 30px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0px 30px;
  position: relative;
  width: 100%;
}

.topic_text-box {
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 20px;
  /* min-width: 563px; */
  width: 45%;
}

.topic_heading {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  gap: 10px;
  width: 100%;
}

.topic_heading_en {
  color: var(--orange);
}

.topic_heading_en,
.topic_heading_jp,
.topic_leadtext,
.topic-graph_title,
.topic-graph_subtitle,
.topic-graph_repletion {
  text-shadow: 0px 0px 10px #00000080;  
}

.topic_heading_jp {
  color: var(--white);
  font-size: var(--font-size-heading-m);
}

.topic_leadtext {
  color: var(--white);
  font-size: var(--font-size-m);
}

.topic_graph-box {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 15px;
  position: relative;
  width: 45%;
}

.topic-graph_heading {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
}

.topic-graph_title {
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  width: fit-content;

  color: var(--white);
  font-size: var(--font-size-heading-s);
}

.topic-graph_subtitle {
  position: relative;
  width: fit-content;
  color: var(--white);
  font-size: var(--font-size-s);
}

.topic_obverse_pc {
  height: 353.4px;
  object-fit: cover;
  position: relative;
  width: 587px;
}

.topic-graph_repletion {
  align-self: stretch;
  position: relative;
  color: var(--white);
  font-size: var(--font-size-xs);
}

@media screen and (max-width: 1199px) {
  .topic_inner,.cv_inner,.cv_text-box_inner {
    flex-direction: column;
  }  
  .topic_heading {
    align-items: center;
  }

  .topic_graph-box {
    width: 100%;
  }
  .topic_inner {
    padding: 0 10px;
  }
  .topic_text-box {
    width: 100%;
    text-align: center;
  }
  .topic-graph_title {
    font-size: var(--font-size-heading-m);
  }

  .topic-graph_subtitle {
    font-size: var(--font-size-xs);
  }    

  .topic_heading_jp {
    font-size: var(--font-size-heading-l);
  }

  .topic_leadtext {
    font-size: var(--font-size-s);
  }
}
@media screen and (max-width: 767px) {


}

/* ------------------------------
Merit
--------------------------------*/
.merit {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 40px;
  padding: 120px 100px;
  position: relative;
  width: 100%;
}

.merit_inner {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;  
  position: relative;
  width: 100%;
}

.merit_main-text {
  align-items: center;
  text-align: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.merit_main-text_outer {
  align-items: center;
  background-color: var(--light-orange);
  display: inline-flex;
  flex: 0 0 auto;
  padding: 4px 20px;
  position: relative;
}

.merit_sub-text {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.merit_sub-text_item {
  text-align: center;
}

.sup {
  vertical-align: top;
  display: inline-block;
}

.merit .sup {
  font-size: var(--font-size-m);
  margin-top: -7px;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {

}
@media screen and (max-width: 767px) {
  .merit_sub-text_item {
    text-align: left;
  }
  .merit .sup {
    font-size: var(--font-size-xs);
    margin-top: 3px;    
  }  
}

/* ------------------------------
Information
--------------------------------*/

.information {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 110px 100px;
  width: 100%;
  background-color: var(--light-blue);
}

.information_inner {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex: 0 0 auto;
  gap: 60px;
  max-width: 1240px;
  margin: 0 auto; 
  padding: 100px 80px;
  position: relative;
  width: 100%;
}

.information_product {
  height: 269.86px;
  position: relative;
  width: 294px;
  margin: 0 auto;
}

.information_inner_tex-box {
  align-items: flex-start;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 30px;
}

.product_heading {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.text-22 {

  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.product_heading-title {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  margin-right: -4.00px;
  padding: 10px 0px;
  position: relative;
}

.product_heading-subtitle {
  color: var(--red);
  font-family: var(--font-family-hina_mincho);
  font-size: var(--font-size-heading-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
}


.information_inner_tex-box-inner {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 20px;
  position: relative;
  width: 100%;
  margin: 20px 0;
}


@media screen and (min-width: 768px) and (max-width: 1199px) {

}
@media screen and (max-width: 767px) {
  .information_inner {
    max-width: 420px;
    padding: 40px 20px;
    margin: 0 auto;
    flex-direction: column;
    gap: 40px;
  }
  .information_button_outer {
    align-items: center;
    text-align: center;

  }
}

/* ------------------------------
Recipe
--------------------------------*/

.recipe {
  align-items: center;
  align-self: stretch;
  background-color: var(--light-orange);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  padding: 120px 100px;
  position: relative;
  width: 100%;
}

.recipe_heading {
  align-items: center;
  display: inline-flex;
  gap: 12px;
}

.recipe-list {
  align-self: stretch;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 20px 20px;
  max-width: 1240px;
  margin: 0 auto; 
  width: 100%;

  align-items: flex-start;
  display: flex;
  position: relative;  
}

/*レシピカードUI*/

.recipe-item {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 1px;
  min-width: 320px;
  position: relative;
}

.recipe-item_thumb {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  position: relative;
  width: 100%;
}
.recipe-item_thumb-img {
  height: 253.65px;
  object-fit: cover;
  width: 100%;
}

.recipe-item_texbox {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 5px;
  justify-content: flex-end;
  padding: 14px 20px;
  position: relative;
  width: 100%;
}

.recipe-title {
  color: var(--black);
  font-size: var(--font-size-xl);

  height: 72px;  
}

.recipe-label-month {
  color: var(--white);
  font-size: var(--font-size-s);

  align-items: center;
  background-color: var(--brown);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 38px;
  justify-content: center;
  left: 0;
  padding: 10px;
  position: absolute;
  top: 0;
  width: 58px;
}

.recipe-label-time {
  color: var(--black);
  font-size: var(--font-size-s);

  align-items: center;
  background-color: var(--gray);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 5px 10px;
  position: relative;
}


@media screen and (min-width: 768px) and (max-width: 1199px) {

}
@media screen and (max-width: 767px) {
  .product_heading {
    align-items: center;
  }
}

/* ------------------------------
Profile
--------------------------------*/

.profile {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 30px;
  padding: 40px 0px 0px;
  position: relative;
  width: 100%;
}

.profile_inner {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex: 0 0 auto;
  gap: 40px;
  max-width: 1240px;
  margin: 0 auto; 
  padding: 40px;
  position: relative;
  width: 100%;
}

.profile_heading {
  text-align: center;
}

.profile_photo {
  height: auto;
  position: relative;
  width: 322px;
}

.profile_text-box {
  align-self: stretch;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;   
}

.profile_inner_heading {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.profile_job {
  flex: 1;
}

@media screen and (max-width: 1199px) {  
  .profile_photo {
    width: 100%;
  }
  .profile_inner_heading {
    gap: 0;
  }
  .profile_inner,.profile_inner_heading {
    flex-direction: column;
  }  
}
@media screen and (max-width: 767px) {

}

/* ------------------------------
Bottom-img
--------------------------------*/

.bottom-img {
  align-items: center;
  align-self: stretch;
  background-color: var(--black-3);
  background-image: url(../img/bottom-img/background.jpg);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.bottom-img_inner {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 160px;
  padding: 220px 0px 0px;
  position: relative;
  width: 100%;
}

.bottom-img_catch {
  color: var(--white);
  font-family: var(--font-family-hina_mincho);
  font-size: 60px;
  font-weight: 400;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  text-shadow: 0px 0px 10px #00000080;
  width: fit-content;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);  
}

.frame-625547 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.bottom-imgtext_plant-based-food {
  height: 90px;
  position: relative;
  width: 1400px;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .bottom-img_inner {
    padding-right: 80px;
    padding-left: 80px;
  }

}
@media screen and (max-width: 767px) {
  .bottom-img_inner {
    padding: 110px 0px 0px;
    gap: 96px;
  }
  .bottom-img_catch {
    font-size: 30px;
  }
  .bottom-imgtext_plant-based-food {
    height: auto;
    width: 100%;
  }  
}

/* ------------------------------
CV
--------------------------------*/

.cv {
  align-items: center;
  align-self: stretch;
  background-color: var(--light-blue);
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 80px 10px;
  position: relative;
  width: 100%;
}

.cv_inner {
  align-items: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  flex-wrap: wrap;
  gap: 44px 44px;
  justify-content: center;
  max-width: 1280px;
  position: relative;
}

.cv_product {
  height: 261px;
  position: relative;
  width: 284px;
}

.cv_text-box {
  flex-direction: column;
  gap: 32px;
  width: 754px;
  align-items: flex-start;
  display: flex;
  position: relative;   
}

.cv_text-box_inner {
  align-self: stretch;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 32px 32px;
  width: 100%;
  align-items: flex-start;
  display: flex;
  position: relative;   
}

.cv_text-box_inner-title {
  flex: 1;
  margin-top: -1.00px;
  position: relative;
}

@media screen and (max-width: 1199px) {
  .cv_text-box {
    width: 100%;
    align-items: center;
  }
  .cv_text-box_inner {
    align-items: center;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {

  
}

/* ------------------------------
Footer
--------------------------------*/

.footer {
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 45px 100px;
  width: 100%;
}

.footer-nav {
  display: inline-flex;
  gap: 20px;
  justify-content: center;
}

.footer-nav a {
  border-right: 1px solid #969696;
  display: inline-block;
  padding-right: 20px;
}
.footer-nav a:last-child {
  border-right: none;
}

.text-6 {
  cursor: pointer;

  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.line-5 {
  align-self: stretch;
  object-fit: cover;
  position: relative;
  width: 1px;
}

.copyright {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.logo_kokubu {
  height: 28px;
  position: relative;
  width: 225px;
}

.copyright-kokubu-gro {

  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

/*footer*/

.hiraginokakugothicpro-w3-normal-log-cabin-13px {
  color: var(--log-cabin);
  font-family: var(--font-family-hiragino_kaku_gothic_pro-w3);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
}

.hiraginokakugothicpro-w3-normal-log-cabin-11px {
  color: var(--log-cabin);
  font-family: var(--font-family-hiragino_kaku_gothic_pro-w3);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
}


@media screen and (min-width: 768px) and (max-width: 1199px) {

}
@media screen and (max-width: 767px) {
  
}


/* ------------------------------
common
--------------------------------*/
/* button */

.button {
  align-items: center;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--black-2);
  border-radius: 10px;
  display: inline-block;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 26px 80px;
  position: relative;
  transition: 0.5s;
  line-height: 1;
}

.button:visited {
  color: var(--black);
}

.button_inner_text::after {
  position: absolute;
  content: "";
  color: var(--red);
  width: 6px;
  height: 10px;
  background-image: url(../img/common/icon_arrow.svg);
  top: 50%;
  margin-top: -4px; 
  margin-left: 8px; 
} 

.button:hover {
  background-color: var(--red);
}

.button:hover .button_inner_text {
  color: var(--white);
}
.button:hover .button_inner_text::after {
  background-image: url(../img/common/icon_arrow_white.svg);  
}

.button_inner {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 0px 0px 4px;
  position: relative;
}

.button_inner_text {
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

a.button {
  color: var(--black);
}

/*text-link*/

.text-link:visited {
  color: var(--red);
}

.text-link {
  align-items: center;
  flex: 0 0 auto;
  gap: 13px;
  display: inline-block;
  position: relative;
}

.text-link::after {
  position: absolute;
  content: "";
  color: var(--red);
  width: 6px;
  height: 10px;
  background-image: url(../img/common/icon_arrow_pink.svg);
  top: 12px;
  right: -14px;
}

.text-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--red);
}

a.text-link {
  color: var(--red);
}


/*----------後で寄せる*/


.heading-common2 {
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.heading-common {
  flex: 0 0 auto;
  position: relative;
}


/* スマホ時の切り替え */

@media screen and (max-width: 767px) {

  /*section上下余白*/
  .about,
  .merit,
  .information,
  .recipe,
  .topic,
  .recommend,
  .cv {
    padding: 80px 20px;
  }
  .footer {
    padding: 45px 20px;    
  }
}


/* ------------------------------
modal detail　移植＆追記
--------------------------------*/

.m-modalDetail {
  display: flex;
  max-width: 1440px;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  
  font-family: var(--font-family-hina_mincho);
  font-size: var(--font-size-m);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--dark-brown);
}

.m-modalDetail__inner {
  display: flex;
  flex-direction: row;
}

.m-modalDetail__body {
  width: 100%;
  padding: 100px;
  gap: 32px;
  display: flex;
  flex-direction: column;  
}

.m-modalDetail__heading {
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.m-modalDetail__title {
  font-size: var(--font-size-heading-m);
  line-height: 1.6;
}

.m-modalDetail__title.-sub {
  font-size: var(--font-size-heading-s);
}

.m-modalDetail__title-en {
  font-size: 40px;
  font-family: var(--font-family-eb_garamond);
  letter-spacing: var(--letter-spacing-6);
  line-height: var(--line-height-100);
  color: var(--red);
}
.m-modalDetail__content {
  font-size: var(--font-size-m);
}

.modaal-content-container {
  padding: 0;
}

@media screen and (max-width: 1199px) {
  .m-modalDetail__title {
    font-size: var(--font-size-heading-m);
    line-height: var(--line-height);
  }
  
  .m-modalDetail__title.-sub {
    font-size: var(--font-size-heading-m);
  }
  .m-modalDetail__content {
    font-size: var(--font-size-s);
  }
  
}
@media screen and (max-width: 767px) {
  .m-modalDetail__inner {
    flex-direction: column;
  }
  .m-modalDetail__inner {
    display: flex;
    align-items: center; 
  }   
}

.m-modalDetail__image {
  display: flex;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .m-modalDetail__image {
    display: block;
    height: 30vh;
    width: 100%;
    overflow: hidden;    
  }
}

.m-modalDetail__body {
  padding: 20px;
  overflow-y: scroll;
  height: calc(100vh - 4vh - 225px - (40px + 30px)); 
}
@media screen and (min-width: 768px) {
  .m-modalDetail__body {
    padding: 60px 32px 40px 36px;
    flex: 1 1 auto;
  } 
}

ol.m-modalDetail__content {
  gap: 4px;
  display: flex;
  flex-direction: column;
  list-style: auto;
  padding-left: 20px;
}


/* 2024-07 instagramアイコン追加 */
.header-right {
  display: flex;
  gap: 24px;
}
.header-instagram {
  background-color: var(--dark-brown);
  display: flex;
  gap: 8px;
  padding: 10px 30px;
}

.header-instagram span {
  color: var(--white);
  line-height: 1;
  padding-bottom: 5px;
}

.icon_instagram {
  width: 20px;
  height: auto;
}

@media screen and (max-width: 768px) {
  .header {
    padding: 7px 20px;
  }
  .header-right {
    gap: 10px;
  }
  .header-instagram {
    padding: 8px;
  }  
  .header-instagram span {
    display: none;
  }
  .icon_instagram {
    width: 15px;
    height: auto;
  }
}