@charset "UTF-8";



/*all----------------------------*/

html {

  font-size: 62.5%;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



footer {

  position: relative;

  z-index: 2;

}



.nav-top {

  display: none;

  z-index: 5;

}



:root {

  --font_regular: "Noto Sans JP", sans-serif;

  --font_serif: "Noto Serif JP", serif;

  --font_eng: "Roboto Slab", serif;

  --font_cursive: "Mrs Saint Delafield", cursive;

  --color_regular: #3C3C3C;

  --color_01_01: #CADCE3;

  --color_01_02: #C9DCE3;

  --color_01_03: #99B9CB;

  --color_01_04: #A8C4CF;

  --color_01_05: #EDFAFF;

  --color_02_01: #F8D897;

  --color_02_02: #F8D897;

  --color_02_03: #F5BC4A;

  --color_02_04: #FFD37B;

  --color_02_05: #FFF7E6;

  --color_03_01: #CAD6A5;

  --color_03_02: #CAD6A5;

  --color_03_03: #A4B674;

  --color_03_04: #B7C393;

  --color_03_05: #EFF2E4;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .05em;

}



.LP_page {

  padding: 4rem 0 10rem;

  background: #fff;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

  opacity: 0;

  transition: opacity 1s;

}



.LP_page.active {

  opacity: 1;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page sup {

  font-size: 1rem;

}



.LP_page .activePoint,

.LP_page .activeDelay {

  opacity: 0;

  transition: opacity 1s;

}



.LP_page .activeDelay.delay1 {

  transition-delay: .15s;

}



.LP_page .activeDelay.delay2 {

  transition-delay: .3s;

}



.LP_page .activeDelay.delay3 {

  transition-delay: .45s;

}



.LP_page .activeDelay.delay4 {

  transition-delay: .6s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

  opacity: 1;

}

/*----------------------------all*/



/*mv,lead------------------------*/

.main_ttl {

  width: 100rem;

  margin: 0 auto 4.5rem;

}



.main_lead {

  margin-bottom: 6.5rem;

  font-size: 1.6rem;

  line-height: 2;

  text-align: center;

}



/*------------------------mv,lead*/



/*navigation---------------------*/

.navigation_area {

  margin-bottom: 8rem;

}



.navigation_list {

  display: flex;

  justify-content: center;

  gap: 3rem;

}



.navigation_list li a {

  position: relative;

  width: 30rem;

  height: 26rem;

  border-radius: 3rem;

  padding-top: 3rem;

  text-align: center;

}



.navigation_list li a::before {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: 1.5rem;

  height: 1.5rem;

  margin-bottom: 1.5rem;

  border-right: solid var(--color_regular);

  border-bottom: solid var(--color_regular);

  border-width: .1rem;

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

  transition: margin .3s;

}



.navigation_list li a:hover::before {

  margin-bottom: .8rem;

}



.navigation_list li:nth-of-type(1) a {

  background: var(--color_01_01);

}



.navigation_list li:nth-of-type(2) a {

  background: var(--color_02_01);

}



.navigation_list li:nth-of-type(3) a {

  background: var(--color_03_01);

}



.navigation_list li a > div {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1.2rem;

  margin-bottom: 1rem;

}



.navigation_list li a > div figure {

  width: 12.4rem;

}



.navigation_list li a > div p {

  position: relative;

  margin-left: 2rem;

  font-size: 1.8rem;

  font-weight: 400;

  line-height: 1.5;

  color: #fff;

}



.navigation_list li:nth-of-type(1) a > div p {

  text-shadow: 0 0 5px var(--color_01_03);

}



.navigation_list li:nth-of-type(2) a > div p {

  text-shadow: 0 0 5px var(--color_02_03);

}



.navigation_list li:nth-of-type(3) a > div p {

  text-shadow: 0 0 5px var(--color_03_03);

}



.navigation_list li a > div p::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: 12rem;

  height: 12rem;

  mask-image: url(../img/bg_002.svg);

  mask-size: cover;

  mask-repeat: no-repeat;

  mask-position: center center;

  -webkit-mask-image: url(../img/bg_002.svg);

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center center;

  background: #fff;

  content: "";

}



.navigation_list li a h3 {

  font-family: var(--font_serif);

  font-size: 1.8rem;

  font-weight: 700;

  line-height: 1.5;

}

/*---------------------navigation*/



/*intro--------------------------*/

.each_sec {

  padding-top: 8rem;

}



.each_sec:nth-of-type(n+2) {

  margin-top: 12rem;

}



.intro_area {

  margin-bottom: 7.5rem;

}



#DreamyChamomile .intro_area {

  background: linear-gradient(transparent, var(--color_01_05), var(--color_01_05), transparent);

}



#ZestyLemon .intro_area {

  background: linear-gradient(transparent, var(--color_02_05), var(--color_02_05), transparent);

}



#GentlyGinger .intro_area {

  background: linear-gradient(transparent, var(--color_03_05), var(--color_03_05), transparent);

}



.intro_inner {

  position: relative;

  width: fit-content;

  margin: 0 auto;

  background: linear-gradient(to right, transparent, #fff, #fff, transparent);

}



.intro_inner::before {

  position: absolute;

  z-index: 4;

  bottom: 0;

  right: 0;

  width: 50.4rem;

  height: 23rem;

  margin: 0 -10rem 10rem 0;

  content: "";

  pointer-events: none;

}



#DreamyChamomile .intro_inner::before {

  background: url(../img/deco_101.svg) center center / cover no-repeat;

}



#ZestyLemon .intro_inner::before {

  background: url(../img/deco_201.svg) center center / cover no-repeat;

}



#GentlyGinger .intro_inner::before {

  background: url(../img/deco_301.svg) center center / cover no-repeat;

}



.intro_inner::after {

  position: absolute;

  z-index: 4;

  bottom: 0;

  left: 0;

  width: 20rem;

  height: 21rem;

  margin: 0 0 28rem -5rem;

  content: "";

  pointer-events: none;

}



#DreamyChamomile .intro_inner::after {

  background: url(../img/deco_102.svg) center center / cover no-repeat;

}



#ZestyLemon .intro_inner::after {

  background: url(../img/deco_202.svg) center center / cover no-repeat;

}



#GentlyGinger .intro_inner::after {

  background: url(../img/deco_302.svg) center center / cover no-repeat;

}



.itm_efficacy {

  position: absolute;

  z-index: 3;

  top: 0;

  right: 0;

  display: flex;

  align-items: center;

  margin: -1rem 32rem 0 0;

}



.itm_efficacy .itm_img {

  position: relative;

  z-index: 1;

  width: 18rem;

  order: 2;

  rotate: 8deg;

}



.itm_efficacy .ttl_txt {

  position: relative;

  display: grid;

  place-items: center;

  width: 20rem;

  height: 20rem;

  margin-right: -4rem;

  font-size: 3rem;

  font-weight: 600;

  line-height: 1.5;

  text-align: center;

}



#DreamyChamomile .itm_efficacy .ttl_txt {

  color: var(--color_01_03);

}



#ZestyLemon .itm_efficacy .ttl_txt {

  color: var(--color_02_03);

}



#GentlyGinger .itm_efficacy .ttl_txt {

  color: var(--color_03_03);

}



.itm_efficacy .ttl_txt::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  mask-image: url(../img/bg_002.svg);

  mask-size: cover;

  mask-repeat: no-repeat;

  mask-position: center center;

  -webkit-mask-image: url(../img/bg_002.svg);

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center center;

  content: "";

}



#DreamyChamomile .itm_efficacy .ttl_txt::before {

  background: var(--color_01_03);

}



#ZestyLemon .itm_efficacy .ttl_txt::before {

  background: var(--color_02_03);

}



#GentlyGinger .itm_efficacy .ttl_txt::before {

  background: var(--color_03_03);

}



.sec_img_wrap {

  display: flex;

}



.sec_img_wrap .sec_img:nth-of-type(1) {

  order: 2;

}



.sec_img_wrap .sec_img:nth-of-type(2) {

  margin-right: -8.7rem;

  translate: 0 18rem;

}



.sec_img {

  width: 40rem;

}



.itm_detail {

  position: relative;

  z-index: 2;

  width: 40rem;

  height: 40rem;

  margin: -3.8rem 0 0 auto;

}



.itm_detail a {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  height: 100%;

  text-align: center;

}



.itm_detail a::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  mask-image: url(../img/bg_001.svg);

  mask-size: cover;

  mask-repeat: no-repeat;

  mask-position: center center;

  -webkit-mask-image: url(../img/bg_001.svg);

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center center;

  content: "";

}



#DreamyChamomile .itm_detail a::before {

  background: var(--color_01_02);

}



#ZestyLemon .itm_detail a::before {

  background: var(--color_02_02);

}



#GentlyGinger .itm_detail a::before {

  background: var(--color_03_02);

}



.itm_detail a > div {

  padding-top: 2rem;

}



.itm_detail .itm_name {

  margin-bottom: 1.5rem;

  font-family: var(--font_serif);

  font-size: 2.8rem;

  font-weight: 600;

  line-height: 1.5;

}



.itm_detail .itm_price {

  margin-bottom: 2.5rem;

  font-family: var(--font_serif);

  font-size: 2.8rem;

  font-weight: 600;

}



.itm_detail .itm_price .txt_S {

  font-size: 1.7rem;

}



.itm_detail .itm_btn {

  display: grid;

  place-items: center;

  width: 14rem;

  height: 5rem;

  border-radius: 50%;

  border: solid #fff;

  border-width: .2rem;

  margin: 0 auto;

  background: #fff;

  font-family: var(--font_eng);

  font-size: 2.6rem;

  transition: background-color .3s, color .3s;

}



.itm_detail a:hover .itm_btn {

  background: transparent;

  color: #fff;

}



.about_list {

  display: flex;

  margin: -21.2rem 0 0 -10.7rem;

}



.about_list li:nth-of-type(1) {

  order: 2;

}



.about_list li:nth-of-type(2) {

  margin: 12.2rem -5.5rem 0 0;

} 



.about_list li a {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 26.4rem;

  height: 26.4rem;

  text-align: center;

  color: #fff;

}



.about_list li a::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  mask-image: url(../img/bg_001.svg);

  mask-size: cover;

  mask-repeat: no-repeat;

  mask-position: center center;

  -webkit-mask-image: url(../img/bg_001.svg);

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center center;

  content: "";

}



#DreamyChamomile .about_list li:nth-of-type(1) a::before {

  background: var(--color_01_03);

}



#DreamyChamomile .about_list li:nth-of-type(2) a::before {

  background: var(--color_01_04);

}



#ZestyLemon .about_list li:nth-of-type(1) a::before {

  background: var(--color_02_03);

}



#ZestyLemon .about_list li:nth-of-type(2) a::before {

  background: var(--color_02_04);

}



#GentlyGinger .about_list li:nth-of-type(1) a::before {

  background: var(--color_03_03);

}



#GentlyGinger .about_list li:nth-of-type(2) a::before {

  background: var(--color_03_04);

}



.about_list li a > span {

  position: relative;

  padding: 2rem 0 4.5rem;

  font-family: var(--font_serif);

  font-size: 1.5rem;

  line-height: 1.5;

}



.about_list li a > span::before {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  display: grid;

  place-items: center;

  width: 8.4rem;

  height: 3rem;

  border: solid #fff;

  border-width: .1rem;

  border-radius: 50%;

  font-family: var(--font_eng);

  font-size: 1.3rem;

  content: "CLICK";

  transition: scale .3s;

}



.about_list li a:hover > span::before {

  scale: 1.1;

}



.about_list li a .txt_eng {

  display: block;

  margin-bottom: .5rem;

  font-family: var(--font_eng);

  font-size: 3.6rem;

}



body.no_scroll {

  height: 100vh;

  overflow: hidden;

}



.LP_page.modalOpen,

#FooterWrap.modalOpen {

  overflow-y: scroll;

  height: 100%;

}



header.hide,

#share.hide,

.navigation_area_fixed.hide {

  opacity: 0;

  pointer-events: none;

  transition: opacity 0s !important;

}



.modal_outside.hide {

  opacity: 0;

  pointer-events: none;

  overflow-y: auto;

}



.modal_outside {

  position: fixed;

  z-index: 100;

  top: 0;

  left: 0;

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

  transition: opacity .5s;

  overflow-y: scroll;

}



.modal_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(70, 70, 70, .4);

  backdrop-filter: blur(2px);

  -webkit-backdrop-filter: blur(2px);

  content: "";

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_wrap {

  margin: 0 auto;

  max-height: 100%;

  padding: 4rem 0;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_wrap::-webkit-scrollbar {

  display:none;

}



.modal_inner {

  position: relative;

}



.modal_close {

  position: fixed;

  z-index: 2;

  width: 3rem;

  height: 3rem;

  margin: 1.5rem 0 0 95.5rem;

  border: none;

  background: transparent;

  cursor: pointer;

}



.modal_close::before,

.modal_close::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  background: var(--color_regular);

  rotate: 45deg;

  content: "";

}



.modal_close::before {

  width: 2.5rem;

  height: .1rem;

}



.modal_close::after {

  width: .1rem;

  height: 2.5rem;

}



.modal_content {

  display: flex;

  width: 100rem;

  padding: 6rem 0;

  background: #fff;

}



.modal_content section {

  width: 50%;

  text-align: center;

}



.modal_content section:nth-of-type(2) {

  border-left: dashed rgba(60, 60, 60, .3);

  border-width: .1rem;

}



.modal_content section h4 {

  margin-bottom: 2.5rem;

  font-family: var(--font_serif);

  font-size: 1.5rem;

  font-weight: 400;

}



#DreamyChamomile .modal_content section h4 {

  color: var(--color_01_03);

}



#ZestyLemon .modal_content section h4 {

  color: var(--color_02_03);

}



#GentlyGinger .modal_content section h4 {

  color: var(--color_03_03);

}



.modal_content section h4 .txt_eng {

  display: block;

  margin-bottom: 1rem;

  font-family: var(--font_eng);

  font-size: 3.6rem;

}



.modal_content section p {

  margin-bottom: 2rem;

  font-size: 1.5rem;

  line-height: 1.75;

}



.modal_content section figure {

  margin: 0 auto;

}



.modal_content .taste_area figure {

  width: 21rem;

}



.modal_content .effect_area figure {

  width: 15rem;

}



#DreamyChamomile .modal_content .effect_area figure {

  width: 23rem;

}

/*--------------------------intro*/



/*recipe-------------------------*/

.recipe_area {

  width: 100rem;

  margin: 0 auto;

}



.recipe_area h5 {

  position: relative;

  display: flex;

  align-items: center;

  width: fit-content;

  margin: 0 auto 7.5rem;

}



.recipe_area h5::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: 45rem;

  height: 16rem;

  mask-image: url(../img/deco_001.svg);

  mask-size: cover;

  mask-repeat: no-repeat;

  mask-position: center center;

  -webkit-mask-image: url(../img/deco_001.svg);

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center center;

  content: "";

  pointer-events: none;

}



#DreamyChamomile .recipe_area h5::before {

  background: var(--color_01_03);

}



#ZestyLemon .recipe_area h5::before {

  background: var(--color_02_03);

}



#GentlyGinger .recipe_area h5::before {

  background: var(--color_03_03);

}



.recipe_area h5 .ttl_img {

  width: 7rem;

}



.recipe_area h5 .ttl_txt {

  font-family: var(--font_serif);

  font-size: 1.8rem;

  font-weight: 400;

  line-height: 1.5;

}



.recipe_name {

  position: relative;

  width: fit-content;

  margin: 0 auto 2rem;

  font-size: 3.6rem;

  font-family: var(--font_serif);

  font-weight: 700;

  line-height: 1.5;

  text-align: center;

}



.recipe_name::before {

  position: absolute;

  top: 0;

  right: 100%;

  width: 3rem;

  height: 3rem;

  margin-right: 1rem;

  border-top: solid var(--color_regular);

  border-left: solid var(--color_regular);

  border-width: .1rem;

  content: "";

}



.recipe_name::after {

  position: absolute;

  bottom: 0;

  left: 100%;

  width: 3rem;

  height: 3rem;

  margin-left: 1rem;

  border-right: solid var(--color_regular);

  border-bottom: solid var(--color_regular);

  border-width: .1rem;

  content: "";

}



.recipe_time {

  width: fit-content;

  margin: 0 auto 2.5rem;

  padding: .5rem 1.2rem .6rem;

  font-size: 1.4rem;

  font-weight: 700;

  color: #fff;

}



.recipe_time .txt_S {

  font-size: 1.1rem;

}



#DreamyChamomile .recipe_time {

  background: var(--color_01_03);

}



#ZestyLemon .recipe_time {

  background: var(--color_02_03);

}



#GentlyGinger .recipe_time {

  background: var(--color_03_03);

}



.recipe_lead {

  margin-bottom: 5rem;

  font-size: 1.6rem;

  text-align: center;

  line-height: 1.75;

}



.ingredient_outside {

  display: flex;

  align-items: center;

  gap: 5rem;

  margin-bottom: 6rem;

}



.howtoCook_outside {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 5rem;

  margin-bottom: 6rem;

}



.recipe_main_img {

  position: relative;

  width: 51rem;

  padding: 1.5rem;

}



#DreamyChamomile .recipe_main_img {

  background: var(--color_01_01);

}



#ZestyLemon .recipe_main_img {

  background: var(--color_02_01);

}



#GentlyGinger .recipe_main_img {

  background: var(--color_03_01);

}



.recipe_main_img::before,

.recipe_main_img::after {

  position: absolute;

  z-index: 2;

  width: .2rem;

  height: 8rem;

  rotate: 45deg;

  content: "";

}



.recipe_main_img::before {

  top: 0;

  left: 0;

  margin: .6rem 6.5rem;

  transform-origin: top center;

}



.recipe_main_img::after {

  bottom: 0;

  right: 0;

  margin: 0 6.5rem .6rem 0;

  transform-origin: bottom center;

}



#DreamyChamomile .recipe_main_img::before,

#DreamyChamomile .recipe_main_img::after {

  background: var(--color_01_05);

}



#ZestyLemon .recipe_main_img::before,

#ZestyLemon .recipe_main_img::after {

  background: var(--color_02_05);

}



#GentlyGinger .recipe_main_img::before,

#GentlyGinger .recipe_main_img::after {

  background: var(--color_03_05);

}



.recipe_area .ttl_wrap {

  margin-bottom: 4.5rem;

}



.recipe_area h6 {

  position: relative;

  z-index: 1;

  width: fit-content;

  font-family: var(--font_serif);

  font-size: 2.6rem;

  font-weight: 500;

}



.recipe_area h6 span {

  position: absolute;

  z-index: -1;

  top: 100%;

  left: 100%;

  rotate: -6deg;

  margin: -1.5rem 0 0 -1.2rem;

  font-family: var(--font_cursive);

  font-size: 3.6rem;

  white-space: nowrap;

  opacity: .4;

}



#DreamyChamomile .recipe_area h6 span {

  color: var(--color_01_03);

}



#ZestyLemon .recipe_area h6 span {

  color: var(--color_02_03);

}



#GentlyGinger .recipe_area h6 span {

  color: var(--color_03_03);

}



.ingredient_wrap {

  flex: 1;

  padding-right: 5rem;

}



.each_recipe:nth-of-type(n+2) {

  margin-top: 4rem;

}



.each_recipe p {

  width: fit-content;

  margin-bottom: 1.8rem;

  padding: .4rem 1.5rem;

  border-radius: 10rem;

  font-size: 1.2rem;

}



#ZestyLemon .each_recipe p {

  background: var(--color_02_03);

}



.ingredient_list li,

.howtoCook_list li {

  display: flex;

  border-bottom: dashed rgba(60, 60, 60, .3);

  border-width: .1rem;

  padding-bottom: 1rem;

  font-size: 1.5rem;

  line-height: 1.5;

}



.ingredient_list li {

  justify-content: space-between;

  align-items: flex-end;

}



.howtoCook_list li {

  gap: .5rem;

}



.ingredient_list li:nth-of-type(n+2),

.howtoCook_list li:nth-of-type(n+2) {

  margin-top: 1.5rem;

}



.ingredient_list li a,

.howtoCook_list li a {

  display: inline;

  text-decoration: underline;

  text-decoration-skip-ink: none;

  line-height: 1.5;

}



#DreamyChamomile .ingredient_list li a,

#DreamyChamomile .howtoCook_list li a {

  color: var(--color_01_03);

}



#ZestyLemon .ingredient_list li a,

#ZestyLemon .howtoCook_list li a {

  color: var(--color_02_03);

}



#GentlyGinger .ingredient_list li a,

#GentlyGinger .howtoCook_list li a {

  color: var(--color_03_03);

}



.ingredient_list li a:hover,

.howtoCook_list li a:hover {

  opacity: .7 !important;

}



.ingredient_list li span,

.howtoCook_list li span {

  line-height: 1.5;

}



.howtoCook_wrap {

  flex: 1;

  padding-left: 5rem;

}



.howtoCook_wrap .notes_list {

  margin-top: 2.5rem;

}



.howtoCook_wrap .notes_list li {

  display: flex;

  gap: .5rem;

  font-size: 1.2rem;

  line-height: 1.75;

}



.howtoCook_wrap .notes_list li span {

  line-height: 1.75;

}



.howtoCook_wrap .notes_list li:nth-of-type(n+2) {

  margin-top: 1.5rem;

}



.recipe_img_wrap {

  width: 45rem;

}



.recipe_img_wrap .recipe_img {

  height: fit-content;

}



.recipe_img_wrap .recipe_img:nth-of-type(n+2) {

  margin-top: 2rem;

}



.recipe_comment_wrap {

  position: relative;

  display: flex;

  align-items: center;

  gap: 3rem;

  width: 70rem;

  margin: 0 auto 9rem;

  padding: 4rem 5rem;

  border: solid;

  border-width: .1rem;

}



#DreamyChamomile .recipe_comment_wrap {

  border-color: var(--color_01_03);

  background: var(--color_01_05);

}



#ZestyLemon .recipe_comment_wrap {

  border-color: var(--color_02_03);

  background: var(--color_02_05);

}



#GentlyGinger .recipe_comment_wrap {

  border-color: var(--color_03_03);

  background: var(--color_03_05);

}



.recipe_comment_wrap::before {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: 8.4rem;

  height: 3.6rem;

  margin-top: -1.5rem;

  mask-image: url(../img/deco_002.svg);

  mask-size: cover;

  mask-repeat: no-repeat;

  mask-position: center center;

  -webkit-mask-image: url(../img/deco_002.svg);

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center center;

  content: "";

}



#DreamyChamomile .recipe_comment_wrap::before {

  background: var(--color_01_04);

}



#ZestyLemon .recipe_comment_wrap::before {

  background: var(--color_02_04);

}



#GentlyGinger .recipe_comment_wrap::before {

  background: var(--color_03_04);

}



.profile_img {

  width: 12rem;

  margin-bottom: 1rem;

  border-radius: 50%;

  overflow: clip;

  border: solid;

  border-width: .2rem;

}



#DreamyChamomile .profile_img {

  border-color: var(--color_01_03);

}



#ZestyLemon .profile_img {

  border-color: var(--color_02_03);

}



#GentlyGinger .profile_img {

  border-color: var(--color_03_03);

}



.profile_name {

  font-size: 1.2rem;

  text-align: center;

}



.recipe_comment {

  flex: 1;

  font-size: 1.5rem;

  line-height: 1.75;

  text-align: justify;

}

/*-------------------------recipe*/



/*link button--------------------*/

.itm_link {

  width: fit-content;

  margin: 0 auto;

}



.itm_link a {

  position: relative;

  display: grid;

  place-items: center;

  width: 50rem;

  height: 9.4rem;

  border-radius: 10rem;

  font-size: 1.1rem;

  text-align: center;

  color: #fff;

}



.itm_link a::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  rotate: 45deg;

  width: 1.5rem;

  height: 1.5rem;

  margin-right: 2.5rem;

  border-top: solid #fff;

  border-right: solid #fff;

  border-width: .2rem;

  box-sizing: border-box;

  content: "";

  transition: margin .3s;

}



.itm_link a:hover::before {

  margin-right: 1.5rem;

}



.itm_link a::after {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 12.6rem;

  height: 12.6rem;

  margin: 0 0 1rem 1rem;

  rotate: -8deg;

  content: "";

}



#DreamyChamomile .itm_link a::after {

  background: url(../img/itm_001.png) center center / cover no-repeat;

}



#ZestyLemon .itm_link a::after {

  background: url(../img/itm_002.png) center center / cover no-repeat;

}



#GentlyGinger .itm_link a::after {

  background: url(../img/itm_003.png) center center / cover no-repeat;

}



.itm_link a:hover::after {

  rotate: 0deg;

}



.itm_link a .txt_eng {

  display: block;

  margin-bottom: .8rem;

  font-family: var(--font_eng);

  font-size: 3.6rem;

}



#DreamyChamomile .itm_link a {

  background: var(--color_01_04);

}



#ZestyLemon .itm_link a {

  background: var(--color_02_04);

}



#GentlyGinger .itm_link a {

  background: var(--color_03_04);

}

/*--------------------link button*/



/*banner Me today----------------*/

.logo_mt {

  width: 29rem;

  margin: 14rem auto 2.5rem;

}



.bnr_mt_wrap {

  width: 60rem;

  margin: 0 auto;

}



.bnr_mt_wrap a {

  position: relative;

}



.bnr_mt_wrap a::before {

  position: absolute;

  z-index: 1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 17rem;

  background: linear-gradient(transparent, #000);

  opacity: .4;

  content: "";

}



.bnr_mt_wrap a figure {

  overflow: clip;

}



.bnr_mt_wrap a img {

  transition: scale 1s;

}



.bnr_mt_wrap a:hover img {

  scale: 1.1;

}



.bnr_mt_wrap a p {

  position: absolute;

  z-index: 1;

  bottom: 0;

  right: 0;

  margin: 0 2rem 2rem 0;

  padding-right: 1.8rem;

  font-family: var(--font_serif);

  font-size: 2.6rem;

  font-weight: 600;

  color: #fff;

}



.bnr_mt_wrap a p::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: 1rem;

  height: 1rem;

  border-top: solid #fff;

  border-right: solid #fff;

  border-width: .1rem;

  rotate: 45deg;

  content: "";

  transition: margin .3s;

}



.bnr_mt_wrap a:hover p::before {

  margin-right: -.5rem;

}

/*----------------banner Me today*/



/*navigation_area_fixed----------*/

.navigation_area_fixed {

  position: fixed;

  z-index: 5;

  bottom: 0;

  left: 50%;

  width: 120rem;

  translate: -50% 0;

}



.navigation_area_fixed .navigation_list {

  position: absolute;

  bottom: 0;

  left: 100%;

  display: block;

  padding-bottom: 2rem;

  translate: 0 100%;

  transition: translate .8s;

}



.navigation_area_fixed .navigation_list.active {

  translate: 0 0;

}



.navigation_area_fixed .navigation_list li:nth-of-type(n+2) {

  margin-top: 1rem;

}



.navigation_area_fixed .navigation_list li a {

  display: flex;

  align-items: center;

  gap: .5rem;

  width: 18rem;

  height: 8rem;

  border-radius: 1rem;

  padding: 0 0 0 1.5rem;

  text-align: left;

}



.navigation_area_fixed .navigation_list li a::before {

  display: none;

}



.navigation_area_fixed .navigation_list li a figure {

  width: 6.4rem;

}



.navigation_area_fixed .navigation_list li a h3 {

  font-size: 1.5rem;

}



/*----------navigation_area_fixed*/







/*Smart phone---------------------------------------------*/

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

/*all----------------------------*/

.LP_page .only_pc {

  display: none;

}



#share {

  z-index: 5 !important;

  transition: translate .5s;

}



#share.move {

  translate: 0 calc(-60 * (100vw / 430));

}



.share-txt {

  margin: 0 !important;

  padding-bottom: calc(20 * (100vw / 430));

  background: var(--color_bg_04);

}



.LP_page {

  padding: 0 0 calc(60 * (100vw / 430));

}

/*----------------------------all*/



/*mv,lead------------------------*/

.main_ttl {

  width: auto;

  margin: 0 auto calc(40 * (100vw / 430));

}



.main_lead {

  margin-bottom: calc(55 * (100vw / 430));

  font-size: calc(14 * (100vw / 430));

}



/*------------------------mv,lead*/



/*navigation---------------------*/

.navigation_area {

  margin-bottom: calc(70 * (100vw / 430));

}



.navigation_list {

  gap: calc(4 * (100vw / 430));

}



.navigation_list li a {

  width: calc(138 * (100vw / 430));

  height: calc(140 * (100vw / 430));

  border-radius: calc(20 * (100vw / 430));

  padding-top: calc(15 * (100vw / 430));

}



.navigation_list li a::before {

  width: calc(7 * (100vw / 430));

  height: calc(7 * (100vw / 430));

  margin-bottom: calc(12 * (100vw / 430));

  border-width: calc(1 * (100vw / 430));

}



.navigation_list li a:hover::before {

  margin-bottom: calc(8 * (100vw / 430));

}



.navigation_list li a > div {

  gap: calc(5 * (100vw / 430));

  margin-bottom: calc(10 * (100vw / 430));

}



.navigation_list li a > div figure {

  width: calc(60 * (100vw / 430));

}



.navigation_list li a > div p {

  margin-left: calc(15 * (100vw / 430));

  font-size: calc(10 * (100vw / 430));

}



.navigation_list li a > div p::before {

  width: calc(64 * (100vw / 430));

  height: calc(64 * (100vw / 430));

}



.navigation_list li a h3 {

  font-size: calc(11 * (100vw / 430));

}

/*---------------------navigation*/



/*intro--------------------------*/

.each_sec {

  padding-top: calc(50 * (100vw / 430));

}



.each_sec:nth-of-type(n+2) {

  margin-top: calc(100 * (100vw / 430));

}



.intro_area {

  margin-bottom: calc(90 * (100vw / 430));

}



#DreamyChamomile .intro_area,

#ZestyLemon .intro_area,

#GentlyGinger .intro_area {

  background: none;

}



.intro_inner {

  margin-left: calc(-8 * (100vw / 430));

  background: none;

}



.intro_inner::before {

  width: calc(242 * (100vw / 430));

  height: calc(160 * (100vw / 430));

  margin: 0 calc(3 * (100vw / 430)) calc(-30 * (100vw / 430)) 0;

}



#DreamyChamomile .intro_inner::before {

  background: url(../img/deco_101_sp.svg) center center / cover no-repeat;

}



#ZestyLemon .intro_inner::before {

  background: url(../img/deco_201_sp.svg) center center / cover no-repeat;

}



#GentlyGinger .intro_inner::before {

  background: url(../img/deco_301_sp.svg) center center / cover no-repeat;

}



.intro_inner::after {

  display: none;

}



.itm_efficacy {

  margin: calc(-30 * (100vw / 430)) calc(30 * (100vw / 430)) 0 0;

}



.itm_efficacy .itm_img {

  width: calc(144 * (100vw / 430));

  margin-right: calc(-35 * (100vw / 430));

  rotate: -8deg;

}



.itm_efficacy .ttl_txt {

  order: 2;

  width: calc(132 * (100vw / 430));

  height: calc(132 * (100vw / 430));

  margin-right: 0;

  font-size: calc(18 * (100vw / 430));

}



.sec_img_wrap .sec_img:nth-of-type(2) {

  margin-right:0;

  margin-left: calc(-54 * (100vw / 430));

  translate: 0 calc(115 * (100vw / 430));

  order: 2;

}



.sec_img {

  position: relative;

  width: calc(250 * (100vw / 430));

}



.sec_img::before,

.itm_detail::before {

  position: absolute;

  top: 0;

  width: calc(250 * (100vw / 430));

  height: calc(250 * (100vw / 430));

  mask-image: url(../img/bg_001.svg);

  mask-size: cover;

  mask-repeat: no-repeat;

  mask-position: center center;

  -webkit-mask-image: url(../img/bg_001.svg);

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-position: center center;

  content: "";

  pointer-events: none;

}



#DreamyChamomile .sec_img::before,

#DreamyChamomile .itm_detail::before {

  background: var(--color_01_05);

}



#ZestyLemon .sec_img::before,

#ZestyLemon .itm_detail::before {

  background: var(--color_02_05);

}



#GentlyGinger .sec_img::before,

#GentlyGinger .itm_detail::before {

  background: var(--color_03_05);

}



.sec_img_wrap .sec_img:nth-of-type(1)::before {

  left: 0;

  margin: calc(115 * (100vw / 430)) 0 0 calc(-195 * (100vw / 430));

}



.sec_img_wrap .sec_img:nth-of-type(2)::before {

  right: 0;

  margin: calc(115 * (100vw / 430)) calc(-195 * (100vw / 430)) 0 0;

}



.itm_detail::before {

  left: 0;

  margin: calc(115 * (100vw / 430)) 0 0 calc(-195 * (100vw / 430));

}





.itm_detail {

  width: calc(250 * (100vw / 430));

  height: calc(250 * (100vw / 430));

  margin: calc(-22 * (100vw / 430)) 0 0;

}



.itm_detail a > div {

  padding-top: calc(15 * (100vw / 430));

}



.itm_detail .itm_name {

  margin-bottom: calc(10 * (100vw / 430));

  font-size: calc(18 * (100vw / 430));

}



.itm_detail .itm_price {

  margin-bottom: calc(20 * (100vw / 430));

  font-size: calc(18 * (100vw / 430));

}



.itm_detail .itm_price .txt_S {

  font-size: calc(10 * (100vw / 430));

}



.itm_detail .itm_btn {

  width: calc(90 * (100vw / 430));

  height: calc(30 * (100vw / 430));

  border-width: calc(2 * (100vw / 430));

  font-size: calc(18 * (100vw / 430));

}



.about_list {

  display: flex;

  margin: calc(-22 * (100vw / 430)) 0 0;

}



.about_list li:nth-of-type(1) {

  order: 2;

  margin-left: calc(-54 * (100vw / 430));

  translate: 0 calc(-115 *(100vw / 430));

}



.about_list li:nth-of-type(2) {

  margin: 0;

} 



.about_list li a {

  width: calc(250 * (100vw / 430));

  height: calc(250 * (100vw / 430));

}



.about_list li a > span {

  padding: calc(15 * (100vw / 430)) 0 calc(40 * (100vw / 430));

  font-size: calc(13 * (100vw / 430));

}



.about_list li a > span::before {

  width: calc(70 * (100vw / 430));

  height: calc(25 * (100vw / 430));

  border-width: calc(1 * (100vw / 430));

  font-size: calc(13 * (100vw / 430));

  content: "TAP";

}



.about_list li a .txt_eng {

  margin-bottom: calc(5 * (100vw / 430));

  font-size: calc(30 * (100vw / 430));

}



.modal_wrap {

  padding: calc(30 * (100vw / 430)) 0;

}



.modal_close {

  width: calc(20 * (100vw / 430));

  height: calc(20 * (100vw / 430));

  margin: calc(15 * (100vw / 430)) 0 0 calc(365 * (100vw / 430));

}



.modal_close::before {

  width: calc(20 * (100vw / 430));

  height: calc(1 * (100vw / 430));

}



.modal_close::after {

  width: calc(1 * (100vw / 430));

  height: calc(20 * (100vw / 430));

}



.modal_content {

  display: block;

  width: calc(400 * (100vw / 430));

  padding: calc(40 * (100vw / 430)) 0;

}



.modal_content section {

  width: auto;

}



.modal_content section:nth-of-type(2) {

  border-left: none;

  margin-top: calc(50 * (100vw / 430));

}



.modal_content section h4 {

  margin-bottom: calc(20 * (100vw / 430));

  font-size: calc(12 * (100vw / 430));

}



.modal_content section h4 .txt_eng {

  margin-bottom: calc(8 * (100vw / 430));

  font-size: calc(32 * (100vw / 430));

}



.modal_content section p {

  margin-bottom: calc(15 * (100vw / 430));

  font-size: calc(14 * (100vw / 430));

}



.modal_content .taste_area figure {

  width: calc(168 * (100vw / 430));

}



.modal_content .effect_area figure {

  width: calc(128 * (100vw / 430));

}



#DreamyChamomile .modal_content .effect_area figure {

  width: calc(196 * (100vw / 430));

}

/*--------------------------intro*/



/*recipe-------------------------*/

.recipe_area {

  width: auto;

}



.recipe_area h5 {

  margin: 0 auto calc(60 * (100vw / 430));

}



.recipe_area h5::before {

  width: calc(367 * (100vw / 430));

  height: calc(130 * (100vw / 430));

}



.recipe_area h5 .ttl_img {

  width: calc(64 * (100vw / 430));

}



.recipe_area h5 .ttl_txt {

  font-size: calc(14 * (100vw / 430));

}



.recipe_name {

  margin: 0 auto calc(15 * (100vw / 430));

  font-size: calc(28 * (100vw / 430));

}



.recipe_name::before {

  width: calc(20 * (100vw / 430));

  height: calc(20 * (100vw / 430));

  border-width: calc(1 * (100vw / 430));

  margin-right: calc(10 * (100vw / 430));

}



.recipe_name::after {

  width: calc(20 * (100vw / 430));

  height: calc(20 * (100vw / 430));

  border-width: calc(1 * (100vw / 430));

  margin-left: calc(10 * (100vw / 430));

}



.recipe_time {

  margin: 0 auto calc(25 * (100vw / 430));

  padding: calc(5 * (100vw / 430)) calc(12 * (100vw / 430)) calc(6 * (100vw / 430));

  font-size: calc(11 * (100vw / 430));

}



.recipe_time .txt_S {

  font-size: calc(10 * (100vw / 430));

}



.recipe_lead {

  margin-bottom: calc(25 * (100vw / 430));

  font-size: calc(14 * (100vw / 430));

}



.ingredient_outside {

  display: block;

  margin-bottom: 0;

}



.howtoCook_outside {

  display: block;

  margin-bottom: calc(50 * (100vw / 430));

}



.recipe_main_img {

  width: calc(400 * (100vw / 430));

  margin: 0 auto calc(40 * (100vw / 430));

  padding: calc(15 * (100vw / 430));

}



.recipe_main_img::before,

.recipe_main_img::after {

  width: calc(2 * (100vw / 430));

  height: calc(60 * (100vw / 430));

}



.recipe_main_img::before {

  margin: calc(6 * (100vw / 430)) 0 0 calc(50 * (100vw / 430));

}



.recipe_main_img::after {

  margin: 0 calc(50 * (100vw / 430)) calc(6 * (100vw / 430)) 0;

}



.recipe_area .ttl_wrap {

  position: relative;

  margin-bottom: 0;

  padding-bottom: calc(30 * (100vw / 430));

  transition: margin .3s;

}



.recipe_area .open .ttl_wrap {

  margin-bottom: calc(15 * (100vw / 430));

}



.recipe_area .ttl_wrap > div {

  position: absolute;

  top: 0;

  right: 0;

  width: calc(28 * (100vw / 430));

  height: calc(28 * (100vw / 430));

  border-radius: 50%;

  margin: 0 0 0 auto;

}



#DreamyChamomile .recipe_area .ttl_wrap > div {

  background: var(--color_01_04);

}



#ZestyLemon .recipe_area .ttl_wrap > div {

  background: var(--color_02_04);

}



#GentlyGinger .recipe_area .ttl_wrap > div {

  background: var(--color_03_04);

}



.recipe_area .ttl_wrap > div::before,

.recipe_area .ttl_wrap > div::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: calc(15 * (100vw / 430));

  height: calc(1 * (100vw / 430));

  background: #fff;

  content: "";

}



.recipe_area .ttl_wrap > div::after {

  rotate: 90deg;

  transition: rotate .3s;

}



.recipe_area .open .ttl_wrap > div::after {

  rotate: 0deg;

}



.recipe_area h6 {

  font-size: calc(26 * (100vw / 430));

}



.recipe_area h6 span {

  margin: calc(-15 * (100vw / 430)) 0 0 calc(-12 * (100vw / 430));

  font-size: calc(36 * (100vw / 430));

}



.accordion_outside {

  position: relative;

}



.accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .3s;

  border-bottom: dashed rgba(60, 60, 60, .3) calc(1 * (100vw / 430));

}



.open .accordion_wrap {

  grid-template-rows: 1fr;

  border-bottom: none;

}



.accordion_inner {

  overflow: hidden;

}



.ingredient_wrap {

  width: calc(390 * (100vw / 430));

  margin: 0 auto calc(30 * (100vw / 430));

  padding-right: 0;

  transition: margin .3s;

}



.ingredient_wrap.open {

  margin-bottom: calc(60 * (100vw / 430));

}



.each_recipe:nth-of-type(n+2) {

  margin-top: calc(40 * (100vw / 430));

}



.each_recipe p {

  margin-bottom: calc(18 * (100vw / 430));

  padding: calc(4 * (100vw / 430)) calc(15 * (100vw / 430));

  border-radius: calc(100 * (100vw / 430));

  font-size: calc(12 * (100vw / 430));

}



.ingredient_list li,

.howtoCook_list li {

  border-width: calc(1 * (100vw / 430));

  padding-bottom: calc(10 * (100vw / 430));

  font-size: calc(15 * (100vw / 430));

}



.howtoCook_list li {

  gap: calc(5 * (100vw / 430));

}



.ingredient_list li:nth-of-type(n+2),

.howtoCook_list li:nth-of-type(n+2) {

  margin-top: calc(15 * (100vw / 430));

}



.howtoCook_wrap {

  width: calc(390 * (100vw / 430));

  margin: 0 auto calc(40 * (100vw / 430));

  padding-left: 0;

}



.howtoCook_wrap .notes_list {

  margin-top: calc(25 * (100vw / 430));

}



.howtoCook_wrap .notes_list li {

  gap: calc(5 * (100vw / 430));

  font-size: calc(12 * (100vw / 430));

}



.howtoCook_wrap .notes_list li:nth-of-type(n+2) {

  margin-top: calc(15 * (100vw / 430));

}



.recipe_img_wrap {

  width: auto;

  display: flex;

}



.recipe_img_wrap .recipe_img:nth-of-type(1) {

  rotate: -4deg;

}



.recipe_img_wrap .recipe_img:nth-of-type(2) {

  rotate: 4deg;

}



.recipe_img_wrap .recipe_img:nth-of-type(n+2) {

  margin-top: calc(60 * (100vw / 430));

}



.recipe_comment_wrap {

  display: block;

  width: calc(390 * (100vw / 430));

  margin: 0 auto calc(50 * (100vw / 430));

  padding: calc(30 * (100vw / 430)) calc(25 * (100vw / 430));

  border-width: calc(1 * (100vw / 430))

}



.recipe_comment_wrap::before {

  width: calc(70 * (100vw / 430));

  height: calc(30 * (100vw / 430));

  margin-top: calc(-12 * (100vw / 430));

}



.profile_img {

  float: left;

  width: calc(90 * (100vw / 430));

  margin: 0 calc(20 * (100vw / 430)) calc(10 * (100vw / 430)) 0;

  border-width: calc(2 * (100vw / 430));

}



.profile_name {

  position: absolute;

  bottom: 0;

  right: 0;

  margin: 0 calc(15 * (100vw / 430)) calc(15 * (100vw / 430)) 0;

  font-size: calc(11 * (100vw / 430));

  text-align: center;

}



.recipe_comment {

  padding-top: calc(10 * (100vw / 430));

  font-size: calc(13 * (100vw / 430));

}

/*-------------------------recipe*/





/*link button--------------------*/

.itm_link a {

  width: calc(360 * (100vw / 430));

  height: calc(66 * (100vw / 430));

  border-radius: calc(100 * (100vw / 430));

  font-size: calc(10 * (100vw / 430));

}



.itm_link a::before {

  width: calc(10 * (100vw / 430));

  height: calc(10 * (100vw / 430));

  margin-right: calc(25 * (100vw / 430));

  border-width: calc(2 * (100vw / 430));

}



.itm_link a:hover::before {

  margin-right: calc(15 * (100vw / 430));

}



.itm_link a::after {

  width: calc(74 * (100vw / 430));

  height: calc(74 * (100vw / 430));

  margin: 0 0 calc(10 * (100vw / 430)) calc(10 * (100vw / 430));

}



.itm_link a .txt_eng {

  margin-bottom: calc(8 * (100vw / 430));

  font-size: calc(28 * (100vw / 430));

}

/*--------------------link button*/



/*banner Me today----------------*/

.logo_mt {

  width: calc(200 * (100vw / 430));

  margin: calc(100 * (100vw / 430)) auto calc(20 * (100vw / 430));

}



.bnr_mt_wrap {

  width: calc(350 * (100vw / 430));

}



.bnr_mt_wrap a::before {

  height: calc(70 * (100vw / 430));

}



.bnr_mt_wrap a p {

  margin: 0 calc(15 * (100vw / 430)) calc(15 * (100vw / 430)) 0;

  padding-right: calc(15 * (100vw / 430));

  font-size: calc(16 * (100vw / 430));

}



.bnr_mt_wrap a p::before {

  width: calc(8 * (100vw / 430));

  height: calc(8 * (100vw / 430));

  border-width: calc(1 * (100vw / 430));

}



.bnr_mt_wrap a:hover p::before {

  margin-right: calc(-5 * (100vw / 430));

}

/*----------------banner Me today*/



/*navigation_area_fixed----------*/

.navigation_area_fixed {

  left: 0;

  width: 100%;

  translate: 0 0;

}



.navigation_area_fixed .navigation_list {

  left: 0;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0;

  width: 100%;

  padding-bottom: 0;

  transition: translate .5s;

  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .5));

}



.navigation_area_fixed .navigation_list li:nth-of-type(n+2) {

  margin-top: 0;

}



.navigation_area_fixed .navigation_list li a {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: calc(5 * (100vw / 430));

  width: auto;

  height: calc(60 * (100vw / 430));

  border-radius: 0;

  padding: 0;

}



.navigation_area_fixed .navigation_list li a figure {

  width: calc(44 * (100vw / 430));

}



.navigation_area_fixed .navigation_list li a h3 {

  font-size: calc(11 * (100vw / 430));

}



/*----------navigation_area_fixed*/



}



/*---------------------------------------------Smart phone*/



/*PC------------------------------------------------------*/

@media screen and  (min-width:769px) {

  .only_sp {

    display: none;

  }



  #header_bottom .inner {

    width: 100%;

  }

}

/*------------------------------------------------------PC*/



/*レスポンシブ＆タブレット対応-------------------------------*/

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

  html {

    font-size: calc(10 * (100vw / 1600));

  }

}

/*-------------------------------レスポンシブ＆タブレット対応*/