/*======================================
-----レイアウトの骨組みのみここに記載-----
======================================*/

.mamapan{
  overflow:hidden;
}

/*======================================
-------------フッターifarme-------------
======================================*/
/*.iframeWrap5 {
    padding-bottom: 52%;
}*/
@media screen and (max-width: 1024px) {
    .iframeWrap5 {
        padding-bottom: 100%;
    }   
}


/*======================================
---------------ここからレイアウト---------------
======================================*/

/*10pxアキのグリッドレイアウトにする*/
.grd_gp10 {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/*20pxアキのグリッドレイアウトにする*/
.grd_gp20 {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
/*25pxアキのグリッドレイアウトにする*/
.grd_gp25 {
  display: grid;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

/*50pxアキのグリッドレイアウトにする*/
.grd_gp50 {
  display: grid;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
}


/*80pxアキのグリッドレイアウトにする*/
.grd_gp80 {
  display: grid;
  grid-column-gap: 80px;
  grid-row-gap: 80px;
}



/*均等2分割*/
.grd_col_2fr{
  grid-template-columns: 1fr 1fr;  
}
.grd_col_2fr_r{
  grid-template-columns: 1fr 1fr; 
  grid-template-areas:
    "areaA areaB";
}
/*均等3分割*/
.grd_col_3fr{
  grid-template-columns: 1fr 1fr 1fr;
}
/*均等4分割*/
.grd_col_4fr{
  grid-template-columns: 1fr 1fr 1fr 1fr; 
}
/*3:2の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_3_2_l {
  grid-template-columns: 3fr 2fr;
}
/*2:3の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_2_3_l {
  grid-template-columns: 2fr 3fr;
}
/*3:2の2分割レイアウト（スマホ表示にしたとき、右の要素を上に表示）※直下のdivにgrd_itm1,grd_itm2などでエリア指定を行う*/
.grd_col_3_2_r {
  grid-template-columns: 3fr 2fr;
  grid-template-areas:
    "areaA areaB";
}
/*2:3の2分割レイアウト（スマホ表示にしたとき、右の要素を上に表示）※直下のdivにgrd_itm1,grd_itm2などでエリア指定を行う*/
.grd_col_2_3_r {
  grid-template-columns: 2fr 3fr;
  grid-template-areas:
    "areaA areaB";
}
/*1:4の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_1_4_l {
  grid-template-columns: 1fr 4fr;
}
/*4:1の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_4_1_l {
  grid-template-columns: 4fr 1fr;
}

/*均等2分割の画像小さいサイズ*/
.grd_col_5fr{
  grid-template-columns: 0.4fr 1fr;  
}
.grd_col_5fr_r{
  grid-template-columns: 1fr 1fr; 
  grid-template-areas:
    "areaA areaB";
}


.grd_itm1{
  grid-area:areaA;
}
.grd_itm2{
  grid-area:areaB;
}
/*均等3分割SNS用*/
.grd_sns{
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}
/*sns内の画像サイズを40%に*/
.grd_sns img{
  width:40%;
}

@media (max-width: 767px){
/*スマホ表示の際、分割せず縦並び*/
.grd_sp1fr{
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

/*スマホ表示の際、分割せず縦並び*/
.grd_sp1fr_r{
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas:
  "areaB"
  "areaA";
}


/*スマホ表示の際、均等2分割横並び*/
.grd_sp2fr{
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/*スマホ表示の際、右の要素を上に表示*/
.grd_col_3_2_r, .grd_col_2_3_r, .grd_col_2fr_r {
  grid-template-areas:
   "areaB"
  "areaA";
}
.grd_sns{
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.grd_sns img{
  width:60%;
}
}

/*----------中央寄せ----------*/
.blk_center{
  text-align: center;
}
.txt_center{
  text-align: center; /*インライン要素自体にかけると、要素内のテキストに反映される*/
}

/*----------上下アキ----------*/
.row_bottom{
  margin-bottom:15px;
}
.row_bottom30{
  margin-bottom:30px;
}
.row_bottom40{
  margin-bottom:40px;
}
.row_bottom50{
  margin-bottom:50px;
}
.row_bottom80{
  margin-bottom:80px;
}
.row_bottom100{
  margin-bottom:100px;
}
.row_top{
  margin-top:15px;
}
.row_top30{
  margin-top:30px;
}
.row_top50{
  margin-top:50px;
}
.row_top80{
  margin-top:80px;
}
.row_top100{
  margin-top:100px;
}

/*----------左右アキ----------*/

@media (max-width: 767px){
.margin_side{
  margin-right:10px;
  margin-left:10px;
}
}

/*----------PC・スマホ調整----------*/
@media only screen and (min-width : 320px) {
.pc_h{
  display:none;
}
.smp_h{
  display:inline;
}
}

@media only screen and (min-width : 992px) {
.pc_h{
  display:inline;
}
.smp_h{
  display:none;
}
}

@media only screen and (min-width : 1200px) {
.pc_h{
  display:inline;
}
.smp_h{
  display:none;
	}
}


/*======================================
---------------ここまでレイアウト---------------
======================================*/

/*============================================*/
/* テキスト基本設定 */
/*============================================*/
body * {box-sizing : border-box;}
p {
  font-size: 1.3rem;
  line-height: 2.0em;
  letter-spacing: 2px;
  text-align: justify;
  font-feature-settings: "palt";
}
p01 {
  font-size: 0.9rem;
  line-height: 2.0em;
  letter-spacing: 1px;
  text-align: justify;
  font-feature-settings: "palt";
}

p02 {
  font-size: 0.9rem;
  line-height: 10.0em;
  letter-spacing: 1px;
  font-feature-settings: "palt";
  text-align: right;
}
p span{
  font-size:1.3rem;
}
.bold{
  font-weight: bold;
}

@media screen and (max-width: 640px) {
p{
  font-size: 1.0rem;
  line-height: 2.0em;
}
p01 {
  font-size: 0.8rem;
  line-height: 2.2em;
}
p02 {
  font-size: 0.8rem;
  line-height: 6.0em;
}
p span{
  font-size:1.0rem;
}
}


/* リード部分 ============================================*/
.lead-sentence{
  width: 100%;
  padding: 20px 0;
  color:#000;
  font-family: "Shippori Mincho", serif;
  font-style: normal;
  text-align: center;
}
.lead-sentence p{
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1.0rem;
  text-align: center;
  font-weight:bold;
  line-height: 2.0rem;
}
.lead-sentence h3{
  font-size: 30px;
  font-weight:600;
  /*margin:1.5% 0 4% 0;*/
  text-align:center;
}
.lead-sentence h4{
  font-family: "Zen Antique Soft", serif;
  font-size: 40px;
  text-align:center;
  line-height:85%;
  margin-top:0%;
  margin-bottom:0%;
  padding:0.6rem 0; /*上下の余白 左右の余白*/
  /*border-top:solid 1px #333333; /*線の種類 太さ 色*/
  /*border-bottom:solid 1px #333333; /*線の種類 太さ 色*/
  line-height: 1.5em;
}
.intro {
  font-size: 1.0rem;
  line-height: 2.0rem;
  text-align: center;
  font-feature-settings: "palt";
}


/*-------スマホの時-------------*/
@media screen and (max-width: 768px) {
.lead-sentence p{
  font-size: 0.7rem;
  line-height: 1.5rem;
}
.lead-sentence h3{
  font-size:1.0rem;
}	
.lead-sentence h4{
  font-weight: 400;
  font-size:1.6rem;
}
.intro {
  font-size: 1.0rem;
  line-height: 2.0rem;
  text-align: center;
  font-feature-settings: "palt";
}
}

/* 講師プロフ部分 ============================================*/
.prof{
  width: 100%;
  font-style: normal;
}
.prof_name{
  font-family: "Shippori Mincho", serif;
  font-weight:500;
  font-size:2.2rem;
  color:#546569;
}
.prof_name span{
  font-size:1.2rem;
  padding:0 1% ;
}
.prof_shop{
  font-family: "Shippori Mincho", serif;
  font-weight:500;
  font-size:1.2rem;
  margin-bottom:4%;
  color:#546569;
}
.prof p{
  font-size:1.2rem;
}

/*sns*/
.prof_insta{
  font-family: "Zen Antique Soft", serif;
  font-size:0.9rem;
  font-weight:400;
  line-height:1.4rem;	
  color:#546569;
  margin-bottom:4%;
}
.insta {
  padding-left: 4%;
  background: url("https://www.mamapan.jp/html/contents/report_bellot/img/insta_logo.svg") no-repeat ;
  background-size:3%;
}	

@media screen and (max-width: 768px) {
.prof{
   width: 95%;
}
.prof_name{
   font-size:1.8rem;
}
.prof_name span{
   font-size:1.0rem;
}
.prof_shop{
   font-size:1.0rem;
}
.prof p{
   font-size:0.9rem;
}

/*sns*/
.prof_insta{
   font-size:0.8rem;
}
.insta {
   padding-left: 7%;
   background-size:5%;
   background-position: 0 2px;
}	
}

.bellot h2{
   font-family: "Shippori Mincho", serif;
   font-weight:500;
   font-size:3.0rem;
   text-align:center;
   margin-bottom:8%;
}
.bellot h3{
   font-family: "Zen Antique Soft", serif;
   font-weight:500;
   font-size:1.5rem;
   text-align:center;
   margin-bottom:4%;
   padding: 0.5rem 1rem;/*文字まわり（上下左右）の余白*/
}
.bellot h3::before{
   content:"｜";
   padding:5% 5%;
}
.bellot h3::after{
   content:"｜";
   padding:5% 5%;
}

.bellot h4{
   font-family: "Shippori Mincho", serif;
   font-weight:600;
   font-size:1.0rem;
   text-align:center;
   margin-top:6%;
   margin-bottom:2%;
}

.bellot h5{
   font-family: "Zen Antique Soft", serif;
   font-weight:500;
   font-size:1.5rem;
   text-align:center;
   margin-bottom:4%;
   padding: 0.5rem 1rem;/*文字まわり（上下左右）の余白*/
}
.bellot h5::before{
   content:"｜";
   padding:5% 5%;
}
.bellot h5::after{
   content:"｜";
   padding:5% 5%;
}

@media screen and (max-width: 768px) {
.bellot h2{
   font-size:2.2rem;
   margin:2% 0;
   margin-bottom:10%;
}

.bellot h3{
   font-size:1.5rem;
   padding: 0.5rem 0.5rem;/*文字まわり（上下左右）の余白*/
}
.bellot h3::before{
   content:"｜";
   padding:5% 0%;
}
.bellot h3::after{
   content:"｜";
   padding:5% 0%;
}

.bellot h4{
  /* margin-top:12%;*/
}

.bellot h5{
   font-size:1.2rem;
   padding: 1.3rem 0rem;/*文字まわり（上下左右）の余白*/
   margin-bottom:0%;
}
.bellot h5::before{
   content:"｜";
   padding:5% 0%;
}
.bellot h5::after{
   content:"｜";
   padding:5% 0%;
}


}

.bellot2 h1{
   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" "MS PGothic", sans-serif;
   font-weight:bold;
   font-size:3.0rem;
   text-align:left;
   letter-spacing:0.0rem;
   margin-bottom:6%;
}

@media screen and (max-width: 768px) {
.bellot2 h1{
   font-size:2.0rem;
   margin-bottom:8%;
   margin-top:4%;
}
}

/* 見出し ============================================*/
.intro_title{
  font-family: serif;
  font-size: 2.0rem;
  line-height: 20px;
  letter-spacing: 2.5px;
  text-align: left;
  vertical-align: bottom;
  color:#546569;
}
.intro_title span{
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.8px;
  margin-left: 20px;
  border-left: solid 1px #333333;
  padding-left: 20px;
}

@media (max-width: 768px) {
.intro_title{
  font-size: 1.4rem;
}
.intro_title span{
  font-size: .9rem;
  margin-left: 10px;
  padding-left: 10px;
}
}

/* 講義部分※主にレシピ名※ ============================================*/
.lec_ttl {
  font-size: 2.3rem;
  font-weight: bold;
  text-align:center;
  display: inline-block;
  margin-top:6%;
  margin-bottom:3%;
}
.lec_ttl::before {
  content: "";
  width: 10px;
  height: 40px;
  background: #168362;
  margin: 0 auto 10px;
  display: block;
}
.lec_ttl p{
  font-size: 1.5rem;
  color:#168362;
  font-weight: bold;
  text-align:center;
  margin: 1% 0;
}

/*-------スマホの時-------------*/
@media screen and (max-width: 768px) {
.lec_ttl {
  font-size: 1.6rem;
  margin-bottom:8%;
}
.lec_ttl::before {
  margin-top:10%;
}
}

/* lunch部分*/
.block_ttl_lunch{
  font-family: serif;	
  font-weight: bold;
  font-size:3rem;
  position: relative;
  text-align:center;
}
.block_ttl_lunch_p{
  font-size: 1.2rem;
  font-family: serif;	
  margin-bottom:4%;
  text-align:center;
}

/*-------スマホの時-------------*/
@media screen and (max-width: 768px) {
.block_ttl_lunch{
  font-size:2.0rem;
}
.block_ttl_lunch_p{
  font-size: 1.0rem;
  margin-bottom:10%;
}
}


body {
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0.5px;
  background: #ffffff;
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}




/*============================================*/
/* メニュー・ナビボタン */
/*============================================*/
.nav{
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 640px) {
.nav{
  display: block;
  text-align: center;
}
}
.nav ul{
  display: flex;
  width: 80%;
  justify-content: space-between;
}
.nav li{
  display: flex;
  padding: 15px 20px;
  margin: 0px 3px;
  border: solid 1px #999;
}
@media screen and (max-width: 640px) {
.nav li{
  display: block;
  width: 100%;
  margin: 10px 0px;
}
}
.nav li:hover{
  background-color: #f9fff4;
  border: solid 1px #111;
  box-shadow: 2px 2px 0.5px #839e71;
  color: #000;
}
.nav a{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  text-decoration: none;
  color: #125b2c;
}
.nav a:hover{color: #000;}
@media screen and (max-width: 640px) {
.nav a{
  font-size: 13px;
  letter-spacing: 0.5px;
}
}

/* 背景色 */
.lead-bg01 { background-color: #f2eee9; padding: 30px 0; margin-bottom:0%;}
.lead-bg02 { background-color: #f2eee9; padding: 30px 0; margin-bottom:4%;}
.lead-bg03 { background-color: #e3e3e3; padding: 5% 0;}
.lead-bgsns { background-color: #f3f3f3; padding: 30px 0px;}

@media (max-width: 767px){
.lead-bg01 { background-color: #f2eee9; padding: 5px 0; margin-bottom:0%;}
.lead-bg03 { background-color: #e3e3e3; padding: 20% 0;}

/*区切り罫線*/
.partition-b {
  border-bottom: solid 1px #333333;
  margin-top:100px;
  margin-bottom:100px;
}
}

@media (max-width: 767px){
.partition-b {
  margin-bottom:70px;
}
}

/*============================================*/
/*SNS */
/*============================================*/
.sns{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.sns-box00{
  display: block;
  width: 20%;
  text-align: center;
  border-right: solid 1px #333;
}
.sns-box01{
  display: inline-block;
  width: 15%;
  padding: 10px;
  text-align: center;
}
.sns img{width: 40%;}
.sns h2{
  font-family: "Shippori Mincho", serif;
  font-size: 25px;
  text-shadow: none;
  margin: 40px 0px 30px 0px;
}
.sns h2::before{content: none;}
.sns h4{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0px;
  text-shadow: none;
  margin-bottom: 20px;
}
@media screen and (max-width: 640px) {
.sns img{width: 80%;}
.sns h2{margin: 10px 0px;}
.sns-box00{width: 25%;}
.sns-box01{width: 18%;}
.sns h4{font-size: 11px;}
}



/* ボタン設定 ============================================*/
/*グレー/ワイン*/
.gray-btn a {
  background: #eee;
  border-radius: 3px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
   /*max-width: 280px;*/
  margin:2% 0;
  margin-top:4%;
  padding: 10px 20px;
  color: #313131;
  transition: 0.3s ease-in-out;
  font-weight: bold;
}
.gray-btn a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1.6rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.gray-btn a:hover {
  background: #cd212f;
  color: #FFF;
}
.gray-btn a:hover:after {
  right: 1.4rem;
}

/*紺色/白*/
.navy-btn a {
  background: #2a3263;
  border-radius: 3px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  padding: 10px 20px;
  color: #fff;
  transition: 0.3s ease-in-out;
  font-weight: bold;
}
.navy-btn a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1.6rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.navy-btn a:hover {
  background: #eee;
  color: #2a3263;
}
.navy-btn a:hover:after {
  right: 1.4rem;
}
.txt_frame1{
  background-color:#546569;
  padding:2%;
  margin:1% 0;
  color:#fff;
}
.inquiry h3{
  font-family:serif;
  font-size:1.5rem;
  text-align:left;
  font-weight:bold;
  margin:4% 0;
  color:#2a3263;
}
.inquiry p{
  font-size:1.0rem;
  color:#333333;
  margin-bottom:5%;
}

/*-------スマホの時-------------*/
@media screen and (max-width: 768px) {
.inquiry{
  width:100%;
}
.inquiry h3{
  font-size:1.2rem;
  /*text-align:center;*/
  margin:6% 0;
}
.inquiry p{
  font-size:0.9rem;
  margin-bottom:5%;
}
}


/*ボタン*/

.item-btn a {
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /*max-width: 280px;*/
	margin:2% 0;
	margin-top:4%;
    padding: 10px 20px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: bold;
}
.item-btn a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1.6rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.item-btn a:hover {
  background: #157e5e;
  color: #FFF;
}
.item-btn a:hover:after {
  right: 1.4rem;
}


.recipe-btn a {
    background: #ae585f;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    padding: 10px 20px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: bold;
}
.recipe-btn a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1.6rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.recipe-btn a:hover {
  background: #eee;
  color: #ae585f;
}
.recipe-btn a:hover:after {
  right: 1.4rem;
}

/*============================================*/
/* スライダー */
/*============================================*/
.swiper-container-pro {
    margin-inline: auto;
    max-width: 100%;
    height: auto;
    position: relative;
}
/*@media screen and (max-width: 850px) {
.swiper-container-pro{
    max-width: 500px;
}
}
@media screen and (max-width: 500px) {
.swiper-container-pro{
    max-width: 280px;
}
}
*/
.swiper {
    width: 100%;
    height: auto;
  /*width: min(100%, 900px);
  height: 300px;*/
}
/*@media screen and (max-width: 850px) {
.swiper {
  width: min(100%, 500px);
  height: 150px;
}
}
@media screen and (max-width: 500px) {
.swiper {
  width: min(100%, 280px);
  height: 130px;
}
}*/
.swiper-slide {
  width:100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
}

/* スライダー上にpng画像 */
.slide-on {
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*=============
横揺れ防止
=============*/
.mamapan {
  overflow: hidden;
  /*font-family: "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;*/
}

/*余白調整*/
.row {
  margin-right: 0;
  margin-left: 0;
}