@charset "UTF-8";

/* ▽ 初期設定 --------------*/

#buri {
  position: relative;
  /* padding-bottom: 120px; */
  width: 100vw;
  color: #333;
  margin-left: calc(50% - 50vw) !important;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  overflow: hidden;
}

#buri a {
  transition: ease-in-out .3s;
}

#buri a:hover {
  opacity: 0.8;
}

#buri * {
  box-sizing: border-box;
}

#buri img {
  display: block;
  width: 100%;
  max-width: 100%;
}

#buri a img {
  opacity: 1;
  transition: 0.3s ease-in-out;
}

#buria:hover img {
  opacity: 0.8;
  transition: 0.3s ease-in-out;
}

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

@media screen and (max-width: 767px) {
  #buri {
    padding: 0 0 0 0;
  }

  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
}

.area_fade {
  opacity: 0;
  transform: translateY(50px);
  transition: ease-in-out .4s;
}

.area_fade.active {
  opacity: 1;
  transform: translateY(0);
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

/*--------------------------
レイアウト
--------------------------*/

#buri section {
  width: 100%;
  margin: 0;
  padding: 0;
}

#buri .l_container {
  max-width: 1280px;
  margin: 0 auto;
}

#buri .l_inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 calc(20/1280*100%);
  position: relative;
}

#buri .l_inner720 {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 calc(20/1280*100%);
  position: relative;
}

@media screen and (max-width: 767px) {
  #buri .l_inner, #buri .l_inner720 {
    padding: 0 calc(20/375*100%);
  }
}

/*--------------------------
メソッド
--------------------------*/

:root {
  --base: #004989;
  --s_blue: #b2e0f8;
  --black: #000;
  --white: #fff;
}

/* ▽ キービジュアル --------------*/

#buri h1 {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* ▽ セクション1 --------------*/

#buri .sec01 {
  width: 100%;
  background-color: var(--base);
  padding: calc(35/1440*100%) 0 calc(170/1440*100%);
}

@media screen and (max-width: 767px) {
  #buri .sec01 {
    padding:calc(20/335*100%) 0 calc(90/375*100%);
  }
}

.sec01_banner {
  width: calc(720/1024*100%);
  margin: 0 auto;
  display: block;
}

@media screen and (max-width: 767px) {
  .sec01_banner {
    width: calc(295/335*100%);
  }
}

.sec01_lead_sub {
  position: relative;
  font-size: 24px;
  line-height: 1;
  color: var(--white);
  font-weight: 700;
  text-align: center;
  margin: calc(130/1024*100%) auto 0;
}

@media screen and (max-width: 1000px) {
  .sec01_lead_sub {
    font-size: 2.4vw;
  }
}

@media screen and (max-width: 767px) {
  .sec01_lead_sub {
    font-size: 4.8vw;
    line-height: 1.3;
    text-align: center;
    margin: calc(50/335*100%) auto 0;
  }
}

.sec01_lead_sub:before,
.sec01_lead_sub:after {
  content: "";
  position: absolute;
  background: url(/cp/buri/img/sec01_slash.png) no-repeat center / contain;
  width: calc(21/1024*100%);
  padding-top: calc(29/1024*100%);
  bottom:0;
}

.sec01_lead_sub:before {
  margin: 0 0 calc(-2/1024*100%) calc(-35/1024*100%);
}

.sec01_lead_sub:after {
  transform:scale(-1, 1);
  margin: 0 calc(-35/1024*100%) calc(-2/1024*100%) 0;
}

@media screen and (max-width: 767px) {
  .sec01_lead_sub:before,
  .sec01_lead_sub:after {
    width: calc(18/335*100%);
    padding-top: calc(24/335*100%);
  }

  .sec01_lead_sub:before {
    margin: 0 0 0 calc(-55/335*100%);
  }

  .sec01_lead_sub:after {
    transform:scale(-1, 1);
    margin: 0 calc(-55/335*100%) 0 0;
  }
}


.sec01_ttl {
  font-size: 45px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  text-align: center;
  margin: calc(25/1024*100%) auto 0;
}

@media screen and (max-width: 1000px) {
  .sec01_ttl {
    font-size: 4.5vw;
  }
}

@media screen and (max-width: 767px) {
  .sec01_ttl {
    font-size: 7.4vw;
    font-weight: 900;
    color: var(--white);
    line-height: 1.4;
    margin: calc(10/335*100%) auto 0;
  }
}

.sec01_lead {
  margin: calc(45/1024*100%) auto 0;
  font-size: 24px;
  color: var(--white);
  line-height: 2.15;
  font-weight: 500;
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .sec01_lead {
    font-size: 2.4vw;
  }
}

@media screen and (max-width: 767px) {
  .sec01_lead {
    margin: calc(30/335*100%) auto 0;
    font-size: 3.8vw;
    color: var(--white);
    line-height: 2;
  }
}

.sec01_illust {
  width: calc(419/1024*100%);
  margin: calc(36/1024*100%) calc(46/1024*100%) 0 auto;
}

@media screen and (max-width: 767px) {
  .sec01_illust {
    width: calc(198/335*100%);
    margin: calc(30/335*100%) calc(5/335*100%) 0 auto;
  }
}

.sec01_youtube_ttl {
  font-size: 45px;
  font-weight: 700;
  text-align: center;
  color: var(--white);
  margin: calc(40/1024*100%) auto 0;
}

@media screen and (max-width: 1000px) {
  .sec01_youtube_ttl {
    font-size: 4.5vw;
  }
}

@media screen and (max-width: 767px) {
  .sec01_youtube_ttl {
    font-size: 7.4vw;
    margin: calc(45/335*100%) auto 0;
  }
}

.sec01_youtube_wrap {
  max-width: 720px;
  margin: calc(25/1024*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec01_youtube_wrap {
    max-width: 100%;
    width: calc(320/335*100%);
    margin: calc(10/335*100%) auto 0;
  }
}

.sec01_youtube_comment {
  max-width: 720px;
  margin: calc(22/1024*100%) auto 0;
  position: relative;
}

@media screen and (max-width: 767px) {
  .sec01_youtube_comment {
    max-width: 100%;
    width: calc(320/335*100%);
    margin: calc(20/335*100%) auto 0;
  }
}

.sec01_pattern {
  width: calc(158/720*100%);
  position: absolute;
  bottom: 0;
  right:0;
  margin: 0 calc(-137/720*100%) calc(-60/720*100%) 0;
}

@media screen and (max-width: 767px) {
  .sec01_pattern {
    width: calc(62/335*100%);
    position: absolute;
    bottom: auto;
    right:auto;
    top: 0;
    left:0;
    margin: calc(-300/335*100%) 0 0 calc(20/335*100%);
  }
}

.sec01_himitsu_container {
  width: calc(958/1024*100%);
  margin: calc(150/1024*100%) auto 0;
  padding: calc(24/910*100%);
  filter:drop-shadow(10px 13px 13px rgba(1, 12, 109, 0.75));
  background-color: var(--s_blue);
  position: relative;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_container {
    width: calc(314/335*100%);
    margin: calc(90/335*100%) auto 0;
    padding: calc(14/335*100%);
    filter:drop-shadow(2px 3px 3px rgba(1, 12, 109, 0.75));
  }
}

.sec01_himitsu_inner {
  background: url(/cp/buri/img/sec01_himitsu_bg_pc.jpg) no-repeat center top / cover;
  padding: calc(160/862*100%) calc(71/862*100%) calc(55/862*100%);
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_inner {
    background: url(/cp/buri/img/sec01_himitsu_bg_sp.jpg) no-repeat center top / cover;
    padding: calc(50/285*100%) calc(10/285*100%) calc(20/285*100%);
  }
}

.sec01_himitsu_ttl {
  position: absolute;
  width: calc(1024/910*100%);
  margin: 0 auto 0 calc(-57/910*100%) ;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_ttl {
    position: absolute;
    width: calc(358/314*100%);
    margin: calc(-40/314*100%) auto 0 calc(-22/314*100%) ;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }
}

.sec01_himitsu_flex01 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}


@media screen and (max-width: 767px) {
  .sec01_himitsu_flex01 {
    flex-direction: column;
  }
}

.sec01_himitsu_flex02 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(100/720*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_flex02 {
    flex-direction: column;
    margin: calc(90/265*100%) auto 0;
  }
}

.sec01_himitsu_flex03 {
  display: flex;
  justify-content: center;
  gap:calc(16/720*100%);
  margin: calc(30/720*100%) auto 0;
  list-style: none;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_flex03 {
    flex-direction: column;
    gap:4vw;
    margin: calc(20/265*100%) auto 0;
    padding: 0 calc(5/265*100%);
  }
}

.sec01_himitsu_flex03 li {
  width: calc(352/720*100%);
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_flex03 li {
    width: 100%;
  }
}

.sec01_himitsu_flex04 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(140/720*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_flex04 {
    flex-direction: column;
    margin: calc(85/265*100%) auto 0;
  }
}

.sec01_himitsu_flex_image01 {
  width: calc(400/720*100%);
  margin: 0 0 0 calc(-33/720*100%) ;
}

.sec01_himitsu_flex_image02 {
  width: calc(361/720*100%);
  margin: 0 0 0 calc(-30/720*100%) ;
}

.sec01_himitsu_flex_image03 {
  width: calc(367/720*100%);
  margin: 0 0 0 calc(-30/720*100%) ;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_flex_image01,
  .sec01_himitsu_flex_image02,
  .sec01_himitsu_flex_image03 {
    width: 100%;
    margin: 0 auto ;
  }
}

.sec01_himitsu_flex_text {
  width: calc(340/720*100%);
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_flex_text {
    width: 100%;
  }
}

.sec01_himitsu_flex_text p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 1em;
}

@media screen and (max-width: 1000px) {
  .sec01_himitsu_flex_text p {
    font-size: 2.0vw;
  }
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_flex_text p {
    font-size: 4.26vw;
    line-height: 1.5;
    padding: 0 .5em;
  }
}

.sec01_himitsu_flex_ttl {
  font-size: 28px;
  font-weight: 900;
  color: var(--base);
  position: relative;
}

@media screen and (max-width: 1000px) {
  .sec01_himitsu_flex_ttl {
    font-size: 2.8vw;
  }
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_flex_ttl {
    font-size: 5.8vw;
    text-align: center;
  }
}

.sec01_himitsu_flex_ttl::after {
  content: "";
  position: absolute;
  background: url(/cp/buri/img/dot_line_pc.png) no-repeat left bottom / cover;
  width: 100%;
  padding-top: calc(5/340*100%);
  bottom: 0;
  left: 0;
  margin: 0 0 calc(-7/340*100%) 0;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_flex_ttl::after {
    content: "";
    position: absolute;
    background: url(/cp/buri/img/dot_line_sp.png) no-repeat left bottom / cover;
    padding-top: calc(4/265*100%);
    bottom: 0;
    left: 0;
    margin: 0 0 calc(-7/265*100%) 0;
  }
}

.sec01_himitsu_figure01 {
  width: calc(620/720*100%);
  margin: calc(40/720*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_figure01 {
    width: calc(245/265*100%);
    margin: calc(20/265*100%) auto 0;
  }
}

.sec01_himitsu_figure02 {
  width: calc(654/720*100%);
  margin: calc(20/720*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_figure02 {
    width: 100%;
    margin: calc(15/265*100%) auto 0;
  }
}

.sec01_himitsu_illust {
  width: calc(680/720*100%);
  margin: calc(150/720*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec01_himitsu_illust {
    width: calc(260/265*100%);
    margin: calc(60/265*100%) auto 0;
  }
}

.sec01_recipe_container {
  max-width: 910px;
  margin: calc(150/1024*100%) auto 0;
  background: var(--white) url(/cp/buri/img/sec01_recipe_bg.png) repeat center / 3.4%;
  padding: calc(70/1024*100%) calc(100/1024*100%) calc(90/1024*100%);
}

@media screen and (max-width: 767px) {
  .sec01_recipe_container {
    max-width: 100%;
    width: 100%;
    background: var(--white) url(/cp/buri/img/sec01_recipe_bg.png) repeat center / 3.5%;
    margin: calc(55/335*100%) auto 0;
    padding: calc(20/335*100%);
  }
}

.sec01_recipe_ttl {
  font-size: 45px;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  color: var(--base);
}

@media screen and (max-width: 1000px) {
  .sec01_recipe_ttl {
    font-size: 4.5vw;
  }
}

@media screen and (max-width: 767px) {
  .sec01_recipe_ttl {
    font-size: 7.46vw;
  }
}

.sec01_recipe_flex {
  margin: calc(50/720*100%) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:calc(20/720*100%);
}

@media screen and (max-width: 767px) {
  .sec01_recipe_flex {
    margin: calc(20/295*100%) auto 0;
    flex-direction: column;
    gap:2.6vw;
  }
}

.sec01_recipe_image,
.sec01_recipe_image02 {
  width: calc(365/720*100%);
}

@media screen and (max-width: 767px) {
  .sec01_recipe_image,
  .sec01_recipe_image02{
    width: 100%;
  }

  .sec01_recipe_image02{
    order: 1;
  }
}

.sec01_recipe_text,
.sec01_recipe_text02 {
  flex: 1;
  font-size: 20px;
  line-height: 1.7;
  font-weight: 500;
}

@media screen and (max-width: 1000px) {
  .sec01_recipe_text,
  .sec01_recipe_text02 {
    font-size: 2.0vw;
  }
}

@media screen and (max-width: 767px) {
  .sec01_recipe_text,
  .sec01_recipe_text02 {
    font-size: 4.26vw;
    line-height: 1.6;
  }

  .sec01_recipe_text02 {
    order: 2;
  }
}

.sec01_recipe_name {
  font-size: 28px;
  font-weight: 700;
  color: var(--base);
  margin-bottom: .3em;
  line-height: 1.25;
}

@media screen and (max-width: 1000px) {
  .sec01_recipe_name {
    font-size: 2.8vw;
  }
}

@media screen and (max-width: 767px) {
  .sec01_recipe_name {
    font-size: 5.86vw;
  }
}

.sec01_recipe_name a {
  text-decoration: none;
}


/* ▽ セクション2 --------------*/

#buri .sec02 {
  width: 100%;
  background-color: var(--s_blue);
  position: relative;
  padding-bottom: calc(110/1440*100%);
}

@media screen and (max-width: 767px) {
  #buri .sec02 {
    padding-bottom: calc(50/335*100%);
  }
}

#buri .sec02:before,
#buri .sec02:after  {
  content: "";
  position: absolute;
  width: 100%;
  background: url(/cp/buri/img/sec02_head.png) no-repeat center top / cover;
  padding-top: 40px;
  left: 0;
  right: 0;
}

@media screen and (max-width: 1000px) {
  #buri .sec02:before,
  #buri .sec02:after  {
    padding-top: 4vw;
  }
}

@media screen and (max-width: 767px) {
  #buri .sec02:before,
  #buri .sec02:after  {
    padding-top: 10.6vw;
  }
}

#buri .sec02:before {
  top: 0;
  margin: -38px auto 0;
}

#buri .sec02:after {
  bottom: 0;
  transform: scale(1, -1);
  margin: 0 auto -38px;
}

@media screen and (max-width: 1000px) {
  #buri .sec02:before {
    margin: -3.8vw auto 0;
  }

  #buri .sec02:after {
    margin: 0 auto -3.8vw;
  }
}

@media screen and (max-width: 767px) {
  #buri .sec02:before {
    margin: -10.1vw auto 0;
  }

  #buri .sec02:after {
    margin: 0 auto -10.1vw;
  }
}

.sec02_ttl {
  padding-top: calc(90/1024*100%);
  font-size: 45px;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  color: var(--base);
}

@media screen and (max-width: 767px) {
  .sec02_ttl {
    padding-top: calc(35/335*100%);
    font-size: 7.46vw;
  }
}

.sec02_image {
  width: 100%;
  margin: calc(30/1024*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec02_image {
    margin: calc(35/335*100%) auto 0;
  }
}

.sec02_cp_name {
  margin: calc(50/1024*100%) auto 0;
  font-size: 66px;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  color: var(--base);
}

@media screen and (max-width: 1000px) {
  .sec02_cp_name {
    font-size: 6.6vw;
  }
}

@media screen and (max-width: 767px) {
  .sec02_cp_name {
    margin: calc(20/335*100%) auto 0;
    font-size: 9.06vw;
    line-height: 1.2;
  }
}

.sec02_cp_ttl {
  margin: calc(85/1024*100%) auto 0;
  font-size: 28px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  color: var(--base);
  letter-spacing: .3em;
}

@media screen and (max-width: 1000px) {
  .sec02_cp_ttl {
      font-size: 2.8vw;
    }
}

@media screen and (max-width: 767px) {
  .sec02_cp_ttl {
    margin: calc(35/335*100%) auto 0;
    font-size: 5.3vw;
  }
}

.sec02_quo01 {
  width: calc(446/1024*100%);
  margin: calc(30/1024*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec02_quo01 {
    width: calc(254/335*100%);
    margin: calc(10/335*100%) auto 0;
  }
}

.sec02_quo02 {
  width: calc(450/1024*100%);
  margin: calc(20/1024*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec02_quo02 {
    width: calc(257/335*100%);
    margin: calc(20/335*100%) auto 0;
  }
}

.sec02_quo_text {
  width: calc(316/1024*100%);
  margin: calc(15/1024*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec02_quo_text {
    width: calc(186/335*100%);
    margin: calc(10/335*100%) auto 0;
  }
}

.sec02_cp_day {
  width: calc(489/1024*100%);
  margin: calc(25/1024*100%) auto 0 ;
}

@media screen and (max-width: 767px) {
  .sec02_cp_day {
    width: calc(261/335*100%);
    margin: calc(10/335*100%) auto 0 ;
  }
}

.sec02_btn_cp {
  width: calc(545/1024*100%);
  margin: calc(150/1024*100%) auto 0;
  display: block;
}

@media screen and (max-width: 767px) {
  .sec02_btn_cp {
    width: calc(295/335*100%);
    margin: calc(45/335*100%) auto 0;
    display: block;
  }
}


/* ▽ セクション3 --------------*/

#buri .sec03 {
  width: 100%;
  background-color: var(--base);
  padding-bottom: calc(110/1440*100%);
}

@media screen and (max-width: 767px) {
  #buri .sec03 {
    padding-bottom: calc(55/375*100%);
  }
}

.sec03_comment {
  width: calc(785/1024*100%);
  margin: 0 auto;
  padding-top: calc(135/1024*100%) ;
}

@media screen and (max-width: 767px) {
  .sec03_comment {
    width: 100%;
    margin: 0 auto;
    padding-top: calc(80/335*100%) ;
  }
}

.sec03_here {
  width: calc(408/1024*100%);
  margin: calc(115/1024*100%) auto 0;
}

@media screen and (max-width: 767px) {
  .sec03_here {
    width: calc(266/335*100%);
    margin: calc(60/335*100%) auto 0;
  }
}

.sec03_banner {
  width: calc(546/1024*100%);
  margin: calc(15/1024*100%) auto 0;
  display: block;
}

@media screen and (max-width: 767px) {
  .sec03_banner {
    width: 100%;
    margin: calc(10/335*100%) auto 0;
  }
}

.sec03_pattern {
  position: absolute;
  width: calc(158/1024*100%);
  top: 0;
  left: 0;
  margin: calc(92/1024*100%) 0 0 0;
}

@media screen and (max-width: 767px) {
  .sec03_pattern {
    position: absolute;
    width: calc(62/335*100%);
    top: 0;
    left: auto;
    right:0;
    margin: calc(60/335*100%) calc(20/335*100%) 0 0;
  }
}

.sec03_pattern02 {
  display: none;
}

@media screen and (max-width: 767px) {
  .sec03_pattern02 {
    position: absolute;
    display: block;
    width: calc(62/335*100%);
    bottom: 0;
    left:0;
    margin: 0 0 calc(150/335*100%) calc(22/335*100%);
  }
}