@charset "UTF-8";

/*====================================================================================

基本設定（文字サイズ、色など）　※ all size

====================================================================================*/
html, body{
  font-size: 18px;
  line-height: 1.9;
  color: #1c1714;
  background: #fff;
}
@media (max-width: 767px) {
  html, body{
    font-size: ;
    line-height: ;
    overflow-x: hidden;
  }
}
img{max-width: 100%;}
@media (max-width: 767px) {
  img{max-width: 100%;}
}
a{
  color: #f6773e;
  transition: background .3s;
}
a::after,a::before{
  transition: background .3s;
}
a:visited {color: #f6773e;}
a:hover,
a:focus{
  color: #ff8650;
  text-decoration: none;
}
.container{/*固定幅を記入*/
  width: 1100px;
  margin-right: auto;
  margin-left: auto;
  padding: 90px 0;
}
@media (max-width: 1099px) {/*固定幅-1を記入*/
  .container{width: auto;}
}
@media (max-width: 767px) {
  .container{
    width: auto;
    padding: 12% 5% 10%;
  }
}
.cp{/*common-padding 共通paddingを記入*/
  padding: 30px;
}
@media (max-width: 767px) {
  .cp{
    padding: 5%;
  }
}
iframe[name="google_conversion_frame"] {
  position: absolute;
  top: 0;
}


/* common　共通エレメント
-------------------------------------------------------*/
h2[class^="hd_"] {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.7;
  margin-bottom: 70px;
}
.hd_01{
  color: #fff;
}
.hd_02{
  color: #f6773e;
  border: 6px solid #f6773e;
  padding: 40px 20px;
  border-radius: 58px 58px 0 58px;
  background-color: #fff;
}
em{
  background: linear-gradient(transparent 75%, #fff636 75%);
}
em.orange{
  background: linear-gradient(transparent 75%, #f6773e 75%);
}
.number{
  font-family: 'Arial';
}
ruby rt{
  font-size: 0.35em;
}


/* .main
-------------------------------------------------------*/
.main{
  height: 670px;
  background-color: #f6773e;
  /*background-color: #ff7233;*/
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.main::before{
  content: "";
  position: absolute;
  /*background-color: #ff6738;*/
  background-color: #f76629;
  bottom: -150px;
  left: 0;
  height: 500px;
  width: 100vw;
  transform: skew(0deg, -8deg);
  z-index:-1;
}
.main .container{
  position: relative;
  height: 100%;
}
.main h1{
  position: absolute;
  top: 50px;
  left: 40px;
  display: block;
  opacity: 0;
}
.main h1 .capture{
  display: block;
  color: #fff;
  font-size: 0.6em;
  margin-bottom: 14px;
}
.main h1 .logo{
  width: 210px;
  display: block;
}

/* fron-page & page-contact */
.main .nav-header {
	position: absolute;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}
#food .main .nav-header {
	top: 50px;
	right: 0;
	transform: translateY(-5px);
}
#contact .main .nav-header {
	bottom: 51px;
	right: 0;
}
@font-face {
  font-family: 'eatgram';
  src: url('/wp-content/themes/twentynineteen/fonts/eatgram.eot?aw9n05');
  src: url('/wp-content/themes/twentynineteen/fonts/eatgram.eot?aw9n05#iefix') format('embedded-opentype'), url('/wp-content/themes/twentynineteen/fonts/eatgram.ttf?aw9n05') format('truetype'), url('/wp-content/themes/twentynineteen/fonts/eatgram.woff?aw9n05') format('woff'), url('/wp-content/themes/twentynineteen/fonts/eatgram.svg?aw9n05#eatgram') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.main .nav-header a {
	display: block;
	width: fit-content;
	padding: 3px 18px;
	color: #fff;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.125em;
	margin-right: 33px;
	position: relative;
}
#food .main .nav-header a {
	background-color: #fff;
	color: #f76629;
	padding: 2px 12px 1px;
	font-size: 13.5px;
	margin-right: 18px;
}
#food .main .nav-header a.link-food {
	pointer-events: none;
	background-color: transparent;
	color: #fff;
}
.main .nav-header a:last-child {
	margin-right: 0;
}
.main .nav-header a::before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'eatgram' !important;
  font-size: 27px;
  color: #fff;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
}
.main .nav-header a.link-food::before {
  /* use !important to prevent issues with browser extensions that change fonts */
  content: "\e901";
}
.main .nav-header a.link-spa::before {
  /* use !important to prevent issues with browser extensions that change fonts */
  content: "\e902";
}
#food .main .nav-header a::before {
	position: static;
	top: auto;
	left: auto;
	transform: none;
	display: inline-block;
	font-size: 15px;
	line-height: 1.9;
	vertical-align: middle;
	margin-right: 6px;
}
#food .main .nav-header a.link-spa::before {
	color: #f76629;
}
.main .nav-header a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left: 8px solid #fff;
	margin-left: 6px;
	margin-right: -6px;
}
#food .main .nav-header a::after {
	border: 5px solid transparent;
	border-left: 7px solid #f76629;
}
#food .main .nav-header a.link-food::after {
	display: none;
}
.main .nav-header a:hover {
	background-color: #fff;
	color: #f76629;
}
#food .main .nav-header a:hover {
	background-color: #f76629;
	color: #fff;
}
.main .nav-header a:hover::after {
	border-left-color: #f76629;
}
#food .main .nav-header a:hover::before {
	color: #fff;
}
#food .main .nav-header a:hover::after {
	border-left-color: #fff;
}

.main img[class^="ttl_"],
.main img[class^="img_"],
.main img[class^="txt_"]{
  position: absolute;
}
.main .ttl_01{
  width: 603px;
  left: -2px;
  top: 176px;
  position: absolute;
  /*opacity: 0;*/
}
.st0{
  fill:#fff;
}
path {
  fill: #fff;
  stroke: #fff;  /*線の色を指定する*/
  stroke-dasharray: 2000;  /*線の間隔を指定する*/
  stroke-dashoffset: 0;  /*線の位置を指定する(IEは効かない属性)*/
  stroke-width: 1;   /*線の太さを指定する*/
}
path.is_anim{
  -webkit-animation: hello 3s ease-in forwards;
  animation: hello 3s ease-in forwards;
}
 @-webkit-keyframes hello {
  0% {opacity: 1; stroke-dashoffset: 2000;fill:transparent; /*透過*/}
  50% {opacity: 1; fill:transparent;}
  100% {opacity: 1; stroke-dashoffset: 0;fill:#fff;}
}
@keyframes hello {
  0% {opacity: 1; stroke-dashoffset: 2000;fill:transparent;}
  50% {opacity: 1; fill:transparent;}
  100% {opacity: 1; stroke-dashoffset: 0;stroke-width: 0;fill:#fff;}
}
.main .ttl_02{
  width: 340px;
  left: 40px;
  top: 362px;
  opacity: 0;
}
.main .ttl_03{
  width: 420px;
  left: 40px;
  top: 450px;
  opacity: 0;
}
.main .ttl_04{
  width: 427px;
  left: 40px;
  top: 566px;
}
.main .txt_01{
  width: 145px;
  left: 40px;
  bottom: 70px;
}
.main .txt_02{
  width: 145px;
  left: 181px;
  bottom: 70px;
}
.main .txt_03{
  width: 145px;
  left: 322px;
  bottom: 70px;
}
.main .txt_01,
.main .txt_02,
.main .txt_03{
  opacity: 0;
}
.main .is_anim.txt_01,
.main .is_anim.txt_02,
.main .is_anim.txt_03{
  opacity: 1;
}
.main .img_01{
  width: 524px;
  right: 25px;
  top: 105px;
}
.main .img_02{
  width: 81px;
  right: 270px;
  top: 160px;
  opacity: 0;
}
.main .img_03{
  width: 81px;
  right: 210px;
  top: 160px;
  opacity: 0;
}
.main .img_main_img{
  width: 525px;
  right: 25px;
  top: 105px;
}
.main .img_main_beer{
  width: 38px;
  right: 242px;
  top: 348px;
  opacity: 0;
}
.main .img_main_p{
  width: 24px;
  right: 326px;
  top: 332px;
  opacity: 0;
}
.main .img_main_p_fukidashi{
  width: 62px;
  right: 308px;
  top: 338px;
  opacity: 0;
}



/* .problem
-------------------------------------------------------*/
.problem{
  height: 850px;
  background: url('imgs/lp/problem_bg_01.jpg') no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.problem .container{
  position: relative;
}
.problem .comment{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  width: 325px;
  height: 160px;
  border-radius: 58px 58px 0 58px;
  opacity: 0;
}
.problem .comment:nth-of-type(odd){
  color: #fff;
  background: rgba(246, 119, 62, 0.85);
}
.problem .comment:nth-of-type(even){
  color: #383838;
  background: rgba(255, 242, 67, 0.8);
}
.problem .c_01{
  top: 270px;
  left: -20px;
}
.problem .c_02{
  top: 270px;
  right: -20px;
}
.problem .c_03{
  top: 420px;
  left: 50%;
  margin-left: -162px;
}
.problem .c_04{
  top: 610px;
  left: 50px;
}
.problem .c_05{
  top: 610px;
  right: 50px;
}


/* .about
-------------------------------------------------------*/
.about{
  background-color: #edece8;
}
.about .blockWrap{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.about .block_about{
  width: 540px;
}
.block_about h3{
  background-color: #6d635d;
  color: #fff;
  font-size: 1.6em;
  font-weight: bold;
  padding: 20px 10px;
  margin-bottom: 5px;
}
.block_about .imgWrap{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  -o-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f6773e;
  height: 436px;
}
.about .description{
  background-color: #dedcd5;
  color: #f6773e;
  font-size: 1.2em;
  text-align: center;
  margin-top: 20px;
  padding: 50px 90px;
}
.about img.img_01{
  width: 68%;
}
.about img.img_02{
  width: 76%;
}


/* .merit
-------------------------------------------------------*/
.merit{
  background: url('imgs/lp/merit_bg_01.png') no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.merit::before{
  content: "";
  position: absolute;
  background: #edece8;
  top: -260px;
  left: 0;
  height: 500px;
  width: 100vw;
  transform: skew(0deg, -8deg);
  z-index:-1;
}
.merit::after{
  content: "";
  position: absolute;
  background: #fff;
  bottom: -510px;
  left: 0;
  height: 400px;
  width: 100vw;
  transform: skew(0deg, -8deg);
  z-index: 1;
}
.merit .container{
  padding-left: 50px;
  padding-right: 50px;
}
.merit .block_merit{
  display: table;
  width: 100%;
  background: rgba(58, 49, 48, 0.85);
  height: 190px;
  border-bottom: 2px solid #f68050;
  margin-bottom: 40px;
}
.merit .block_merit .item{
  display: table-cell;
  vertical-align: middle;
}
.merit .block_merit .number{
  width: 100px;
  color: #fff243;
  font-size: 2.4em;
  font-weight: bold;
}
.merit .block_merit .img{
  width: 128px;
}
.merit .block_merit .txt{
  flex-grow: 2;
  text-align: left;
  color: #fff;
  padding: 0 50px;
}
.merit .block_merit .txt h3{
  text-align: left!important;
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 5px;
}
.merit .cont_first{
  padding-bottom: 40px;
}
.merit .cont_last{
  background-color: #57555b;
}
.merit .cont_last .container{
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}
.merit .cont_last .block_merit{
  width: 630px;
  padding: 80px 0;
  transform: translateY(-40px)!important;
}
.merit .cont_last .block_merit .number{
  vertical-align: top;
  transform: translateY(-10px);
}
.merit .cont_last .block_merit .txt{
  padding-left: 0;
}
.merit .cont_last p.txt{
  color: #fff;
  line-height: 2.4;
  width: 550px;
  transform: translateY(-20px);
}
.merit .cont_last .img{
  position: absolute;
  width: 420px;
  top: 120px;
  right: 30px;
}


/* .recommend
-------------------------------------------------------*/
.recommend{
  padding-top: 220px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.recommend::before{
  content: "";
  position: absolute;
  background: #57555b;
  top: -290px;
  left: 0;
  height: 400px;
  width: 100vw;
  transform: skew(0deg, -8deg);
  z-index:-1;
}
.recommend .hd_03{
  padding-bottom: 20px;
}
.recommend .block_recommend{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  /*height: 400px;*/
  height: 35vw;
}
.recommend .block_recommend .imgWrap{
  width: calc(100%/3*2);
  height: 100%;
}
.recommend .block_recommend .imgWrap img{
  width: 100%;
  height: 100%;
  object-fit: cover; 
}
.recommend .block_recommend .txtWrap{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f6773e;
  color: #fff;
  font-size: 1.4em;
  width: calc(100%/3);
  height: 100%;
}
.recommend .block_recommend .txtWrap h3{
  font-weight: bold;
  text-align: center;
}
.recommend .block_recommend:nth-of-type(even) .imgWrap{
  order: 2;
}
.recommend .block_recommend:nth-of-type(even) .txtWrap{
  order: 1;
}


/* .case
-------------------------------------------------------*/
.case{
  padding-top: 80px;
  background-color: #edece8;
}
.case .container{
  padding-top: 0;
}
.case .block_case{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.case .block_case .imgWrap{
  width: 108%;
  margin-right: 20px;
}
.case .block_case .imgBox{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.case .block_case .txtWrap h3{
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 2px solid #f6783f;
  margin-top: 40px;
  margin-bottom: 10px;
}


/* .flow_use
-------------------------------------------------------*/
.flow_use .container{
  padding-bottom: 80px;
}
.flow_use .block_flow_use{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 380px;
  margin-bottom: 20px;
}
.flow_use .block_flow_use:last-of-type{
  margin-bottom: 0;
}
.flow_use .block_flow_use .imgWrap{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #6d635d;
  width: 380px;
  height: 100%;
}
.flow_use .block_flow_use .txtWrap{
  text-align: left;
  background-color: #edece8;
  width: 720px;
  height: 100%;
}
.flow_use .block_flow_use .txtWrap .hd{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #dedcd5;
  font-size: 1.6em;
  font-weight: bold;
  padding: 0 60px;
  height: 90px;
}
.flow_use .block_flow_use .txtWrap .step{
  font-size: 0.7em;
}
.flow_use .block_flow_use .txtWrap .number{
  color: #f6773e;
  background-color: #fff;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 1.5em;
  text-align: center;
  margin: 0 30px 5px 10px;
  vertical-align: middle;
}
.flow_use .block_flow_use .txtWrap .txt{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: bold;
  line-height: 2.2;
  padding: 0 60px;
  height: 290px;
}
.flow_use .img_01{
  width: 48%;
  transform: translate(25px, 5px);
}
.flow_use .img_02{
  width: 82%;
}
.flow_use .img_03{
  width: 85%;
  transform: translateY(5px);
}
.flow_use .img_04{
  width: 94%;
  transform: translate(5px, 5px);
}


/* .smaregi
-------------------------------------------------------*/
.smaregi{
  background-color: #ffe531;
}
.smaregi .block_smaregi{
  width: 800px;
  margin: 0 auto;
}
.smaregi .block_smaregi::after {
  content: "";
  display: table;
  clear: both;
}
.smaregi .block_smaregi .img{
  width: 145px;
  float: left;
  margin-right: 34px;
}
.smaregi .block_smaregi .txt{
  font-weight: bold;
  padding-top: 15px;
}
.smaregi .block_smaregi .txt span{
	display:block;
	padding-top:1rem;
}


/* .flow_start
-------------------------------------------------------*/
.flow_start{
  background-color: #edece8;
}
.flow_start .cont_first{
  position: relative;
}
.flow_start .cont_first .bg{
  position: absolute;
  width: 100vw;
  height: 120px;
  background-color: #ffe531;
  bottom: 0;
  right: 0;
  left: 0;
}
.flow_start .cont_last{
  background-color: #ffe531;
  margin-top: -130px;
}
.flow_start .cont_last .container{
  padding-top: 130px;
}
.flow_start .block_flow_start{
  background-color: #fff;
  margin-bottom: 80px;
  position: relative;
}
.flow_start .block_flow_start:last-of-type{
  margin-bottom: 0;
}
.flow_start .block_flow_start::after{
  position: absolute;
  content: " ";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 45px 0 45px;
  border-color: #f6773e transparent transparent transparent;
  bottom: -40px;
  left: 50%;
  margin-left: -45px;
}
.flow_start .block_flow_start .hd{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  background-color: #57555b;
  font-size: 1.6em;
  font-weight: bold;
  padding: 0 60px;
  height: 90px;
}
.flow_start .block_flow_start .number{
  color: #f6773e;
  background-color: #fff;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 1.5em;
  text-align: center;
  margin: 0 30px 5px 10px;
  vertical-align: middle;
}
.flow_start .block_flow_start .inner{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 64px 120px;
}
.flow_start .block_flow_start .inner .img{
  width: 220px;
  margin-right: 50px;
}
.flow_start .block_flow_start .inner .txt{
  font-weight: bold;
}
.flow_start .block_start{
  text-align: center;
  background-color: #f6773e;
  border-radius: 20px;
  padding: 60px 0 50px;
  position: relative;
  filter: drop-shadow(0 5px 0 rgba(96, 80, 0,0.12));
}
.flow_start .block_start .hd{
  font-size: 2em;
  font-weight: bold;
  background: #fff;
  width: 470px;
  height: 74px;
  line-height: 80px;
  border-radius: 37px;
  margin: 0 auto 30px;
}
.flow_start .block_start .txt{
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.flow_start .block_start img[class^="img_"]{
  position: absolute;
}
.flow_start .block_start .img_01{
  width: 152px;
  left: 105px;
  bottom: -50px;
}
.flow_start .block_start .img_02{
  width: 220px;
  right: 40px;
  bottom: 40px;
}


/* .faq
-------------------------------------------------------*/
.faq{
  background-color: #6d635d;
}
.faq .hd_03{
  color: #fff;
}
.faq .block_faq{
  color: #57555b;
  background-color: #fff;
  border-radius: 58px 58px 0 58px;
  padding: 50px;
  margin-bottom: 40px;
}
.faq .block_faq:last-of-type{
  margin-bottom: 0;
}
.faq .block_faq h3{
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 50px;
}
.faq .block_faq h3 span{
  border-bottom: 3px solid #57555b;
  padding: 0 6px 18px;
}
.faq .block_faq h3 span::before{
  content: "Q";
  color: #fff;
  background-color: #f6773e;
  line-height: 1.8;
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 15px;
}
.faq .block_faq .txt{
  text-align: center;
}


/* .cta
-------------------------------------------------------*/
.cta {
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%202000%20309%22%20style%3D%22enable-background%3Anew%200%200%202000%20309%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%2357555B%3B%7D%3C%2Fstyle%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%220%2C279.7%200%2C309%202000%2C309%202000%2C0%20%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: center bottom -6px;
  background-size: 2000px 309px;
  padding-bottom: 50px;
}
.cta .btn-cta {
  display: block;
  width: fit-content;
  padding: 24px 140px 24px 42px;
  text-align: left;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  background-color: #f6773e;
  border-radius: 10px;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
}
.cta .btn-cta strong {
	display: block;
	font-size: 27px;
	font-weight: 300;
}
.cta .btn-cta:before,
.cta .btn-cta:after {
	content: "";
	display: block;
}
.cta .btn-cta:before {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	bottom: 50%;
	right: 30px;
	transform: translateY(50%);
}
.cta .btn-cta:after {
	width: 0;
	height: 0;
	border: 16px solid transparent;
	border-left: 24px solid #f6773e;
	position: absolute;
	bottom: 50%;
	right: 38px;
	transform: translateY(50%);
}
.cta .btn-cta:hover {
  background-color: #ff6a27;
  transition: 0.3s;
}

/* .form
-------------------------------------------------------*/
.form{
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%202000%20309%22%20style%3D%22enable-background%3Anew%200%200%202000%20309%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%2357555B%3B%7D%3C%2Fstyle%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%220%2C279.7%200%2C309%202000%2C309%202000%2C0%20%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: center bottom -6px;
  background-size: 2000px 309px;
  padding-bottom: 10px;
}
.form form{
  width: 600px;
  margin: 0 auto;
}
.form form input{
  width: 100%;
  height: 50px;
  font-size: 1em;
  font-weight: 300;
  background-color: #edece8;
  border: none;
  padding: 0 20px;
}
.form form textarea{
  width: 100%;
  font-size: 1em;
  border-color: #dedcd5;
  padding: 20px;
  display: block;
}
.form form input[type="radio"]{
  width: auto;
  height: auto;
}
.wpcf7-radio label {
	margin-right: 20px;
}
.form form input[type="submit"]{
  width: 200px;
  display: block;
  font-size: 1em;
  color: #fff;
  background-color: #f6773e;
  border-radius: 10px;
  cursor: pointer;
  margin: 0 auto;
}
.form form input[type="submit"]:hover{
  background-color: #ff6a27;
  transition: 0.3s;
}
.form .optional{
  display: inline-block;
  font-size: 0.8em;
  line-height: 1.4;
  color: #fff;
  background-color: #6d635d;
  padding: 2px 5px;
  margin-right: 10px;
  transform: translateY(-2px);
}
.wpcf7-form p,
.mw_wp_form p{
  margin-bottom: 40px;
}
div.screen-reader-response{
  display: none;
}
div.wpcf7-response-output{
  display: none;
}
.wpcf7-not-valid-tip{
  display: block;
  font-size: 0.8em;
  color: #f63f45;
  text-align: center;
  background-color: #ffebeb;
  border: 1px solid #ffb4b7;
  padding: 5px 10px;
}

.privacy_policy{
  width: 600px;
  height: 210px;
  overflow-y: scroll;
  margin: 0 auto;
  font-size: 0.8em;
  background-color: #edece8;
  margin-bottom: 30px;
}
.privacy_policy p{
  margin-bottom: 20px;
}
.privacy_policy .ttl{
  text-align: center;
  font-weight: bold;
  background-color: #dad8d1;
  padding: 10px
}
.privacy_policy .inner{
  padding: 30px 50px;
}
.privacy_policy_list{
  border-top: 1px solid #bfbcbc;
  margin-top: 30px;
}
.privacy_policy_list h4{
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
}
.privacy_policy_list .inner_list{
  text-align: left;
}
.privacy_policy_list .inner_list li{
  font-size: 0.9em;
  margin-bottom: 10px;
}
.privacy_policy_list .circle{
  padding-left: 2em;
}
.privacy_policy_list .circle li{
  list-style-type: disc;
}
.privacy_policy_list .sub_list{
  padding-left: 2em;
}
.privacy_policy_list .sub_list li{
  list-style: none;
}
.privacy_policy_list .sub_list.circle li{
  list-style-type: circle
}
.privacy_policy_list .number{
  padding-left: 0;
}
.privacy_policy_list .number li{
  text-indent: -2.5em;
  padding-left: 2em;
}
.privacy_policy_list .infomation p{
  margin-bottom: 0;
}
.privacy_policy_list .infomation{
  font-size: 0.9em;
  line-height: 1.4;
}
.contact-message,
.contact-message-error {
  text-align: center;
  font-weight: bold;
  width: fit-content;
  margin: -30px auto 40px;
  padding: 20px 60px;
}
.contact-message {
  color: #b9a300;
  background-color: #fbf5e1;
}
.contact-message-error {
  color: #e70000;
  background-color: #fdeae4;
}
.contact-message-thanks {
  font-size: 21px;
  font-weight: bold;
  width: fit-content;
  margin: 0 auto;
  padding: 60px 90px;
  color: #00b920;
  background-color: #effbe1;
  box-shadow: inset 0 0 0 5px #00b920, 0 0 0 15px #fff;
  position: relative;

  display: flex;
  align-items: center;
  gap: 15px;
}
.contact-message-thanks::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 36px;
  background-color: #00b920;
}
.contact-message-thanks::after {
  content: "";
  display: block;
  width: 12px;
  height: 17px;
  border-right: 5px solid #fff;
  border-bottom: 5px solid #fff;

  position: absolute;
  top: 50%;
  left: 102px;

  transform: translate(0, -55%) rotate(45deg);
}

.mw_wp_form span.input {
  display: block;
}
.mw_wp_form_confirm span.input {
  min-height: 50px;
  padding: 12px 20px;
  border-bottom: 3px solid #edece8;
}
.mw_wp_form_confirm .privacy_policy {
  display: none;
}
.mw_wp_form span.error {
  margin-top: 6px;
  background-color: #f00;
  border-radius: 24px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: fit-content;
  padding: 0 12px;
  color: #fff;
}
.mw_wp_form span.error::before {
  content: "×";
  color: #f00;
  font-weight: bold;
  
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 21px;
  line-height: 1;
  letter-spacing: -1px;
  border-radius: 21px;
  background-color: #fff;
  margin-right: 6px;
}

/* footer
-------------------------------------------------------*/
footer{
  color: #fff;
  background-color: #57555b;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
footer .container{
  padding-top: 0;
}
footer .logo{
  margin-bottom: 30px;
}
footer .company_name{
  font-size: 1.1em;
  font-weight: bold;
}
footer .company_name span{
  display: inline-block;
  font-size: 0.7em;
  font-weight: normal;
  background-color: rgba(215, 215, 215, 0.2);
  padding: 0 12px;
  margin: 15px;
}
footer ul{
  font-size: 0.9em;
  margin-top: 15px;
}
footer .link{
  color: #fff;
}
footer .link:hover{
  color: #fff;
  text-decoration: underline;
}
footer .link:focus,
footer .link:visited{
  color: #fff;
}


/* ローディング
-------------------------------------------------------*/
.spinner {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -25px;
  margin-left: -25px;
}
.cube1, .cube2 {
  background-color: #fff;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}
.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
#loader-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background-color: #f6773e;
  z-index: 1;
}
@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}
@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}


/* animation
-------------------------------------------------------*/
/*** speech_balloon ***/
@keyframes speech_balloon_left {
   0% {-webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0;}
  10% {-webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1;}
  12% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
  20% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
  30% {-webkit-transform: scale(1); transform: scale(1); opacity: 0;}
  50% {-webkit-transform: scale(1); transform: scale(1); opacity: 0;}
}
@-webkit-keyframes speech_balloon_left { /* iOS8以下やAndroid4.4.4以下 */
   0% {-webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0;}
  10% {-webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1;}
  12% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
  20% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
  30% {-webkit-transform: scale(1); transform: scale(1); opacity: 0;}
  50% {-webkit-transform: scale(1); transform: scale(1); opacity: 0;}
}

/*** speech_balloon ***/
@keyframes speech_balloon_right {
  50% {-webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0;}
  60% {-webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1;}
  62% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
  70% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
  80% {-webkit-transform: scale(1); transform: scale(1); opacity: 0;}
  100% {-webkit-transform: scale(1); transform: scale(1); opacity: 0;}
}
@-webkit-keyframes speech_balloon_right { /* iOS8以下やAndroid4.4.4以下 */
  50% {-webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0;}
  60% {-webkit-transform: scale(1.1); transform: scale(1.1); opacity: 1;}
  62% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
  70% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
  80% {-webkit-transform: scale(1); transform: scale(1); opacity: 0;}
  100% {-webkit-transform: scale(1); transform: scale(1); opacity: 0;}
}

/*** beer ***/
@-webkit-keyframes beer {
  50% {opacity: 0;-webkit-transform: translate3d(30px, 0, 0);transform: translate3d(30px, 0, 0)}
  60% {opacity: 1;-webkit-transform: none;transform: none}
  80% {opacity: 1;}
  95% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes beer {
  50% {opacity: 0;-webkit-transform: translate3d(20px, 0, 0);-ms-transform: translate3d(20px, 0, 0);transform: translate3d(20px, 0, 0)}
  60% {opacity: 1;-webkit-transform: none;-ms-transform: none;transform: none}
  80% {opacity: 1;}
  95% {opacity: 0;}
  100% {opacity: 0;}
}

/*** txt_p ***/
@-webkit-keyframes txt_p {
  0% {opacity: 0;-webkit-transform: none;transform: none}
  12.5% {opacity: 1;-webkit-transform: translate3d(0, -10px, 0);transform: translate3d(0, -10px, 0)}
  25% {opacity: 0;-webkit-transform: none;transform: none}
}
@keyframes txt_p {
  0% {opacity: 0;-webkit-transform: none;transform: none}
  12.5% {opacity: 1;-webkit-transform: translate3d(0, -10px, 0);-ms-transform: translate3d(0, -10px, 0);transform: translate3d(0, -10px, 0)}
  25% {opacity: 0;-webkit-transform: none;-ms-transform: none;transform: none}
}

/*** p_fukidashi ***/
@-webkit-keyframes p_fukidashi {
  0% {opacity: 0;-webkit-transform: transform:scale(0);transform: transform:scale(0)}
  12.5% {opacity: 1;-webkit-transform: transform:scale(1.1);transform: transform:scale(1.1)}
  25% {opacity: 0;-webkit-transform: transform:scale(0);transform: transform:scale(0)}
}
@keyframes p_fukidashi {
  0% {opacity: 0;-webkit-transform: transform:scale(0);-ms-transform: transform:scale(0);transform: transform:scale(0)}
  12.5% {opacity: 1;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}
  25% {opacity: 0;-webkit-transform: transform:scale(0);-ms-transform: transform:scale(0);transform: transform:scale(0)}
}

/*** top_fadeInUp ***/
@-webkit-keyframes top_fadeInUp {
  0% {opacity: 0;-webkit-transform: translate3d(0, 20px, 0);transform: translate3d(0, 20px, 0)}
  100% {opacity: 1;-webkit-transform: none;transform: none}
}
@keyframes top_fadeInUp {
  0% {opacity: 0;-webkit-transform: translate3d(0, 20px, 0);-ms-transform: translate3d(0, 20px, 0);transform: translate3d(0, 20px, 0)}
  100% {opacity: 1;-webkit-transform: none;-ms-transform: none;transform: none}
}

/*** fadeInRight ***/
@-webkit-keyframes fadeInRight{
  0% {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0)}
  100% {opacity: 1; -webkit-transform: none; transform: none}
}
@keyframes fadeInRight{
  0% {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0)}
  100% {opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none}
}

/*** fadeInUp ***/
@-webkit-keyframes fadeInUp {
  0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}
  100% {opacity: 1;-webkit-transform: none;transform: none}
}
@keyframes fadeInUp {
  0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);-ms-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}
  100% {opacity: 1;-webkit-transform: none;-ms-transform: none;transform: none}
}

/*** fadeInUp_v2 ***/
@-webkit-keyframes fadeInUp_v2 {
  0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}
  100% {opacity: 1;-webkit-transform: translate3d(0, -40px, 0);transform: translate3d(0, -40px, 0)}
}
@keyframes fadeInUp_v2 {
  0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);-ms-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0)}
  100% {opacity: 1;-webkit-transform: translate3d(0, -40px, 0);-ms-transform: translate3d(0, -40px, 0);transform: translate3d(0, -40px, 0)}
}

/* lightSpeedIn */
@-webkit-keyframes lightSpeedIn {
  0% {-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);transform: translate3d(100%, 0, 0) skewX(-30deg);opacity: 0}
  60% {-webkit-transform: skewX(20deg);transform: skewX(20deg);opacity: 1}
  80% {-webkit-transform: skewX(-5deg);transform: skewX(-5deg);opacity: 1}
  100% {-webkit-transform: none;transform: none;opacity: 1}
}
@keyframes lightSpeedIn {
  0% {-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);-ms-transform: translate3d(100%, 0, 0) skewX(-30deg);transform: translate3d(100%, 0, 0) skewX(-30deg);opacity: 0}
  60% {-webkit-transform: skewX(20deg);-ms-transform: skewX(20deg);transform: skewX(20deg);opacity: 1}
  80% {-webkit-transform: skewX(-5deg);-ms-transform: skewX(-5deg);transform: skewX(-5deg);opacity: 1}
  100% {-webkit-transform: none;-ms-transform: none;transform: none;opacity: 1}
}

/* pulse */
@-webkit-keyframes pulse {
  0% {opacity: 0}
  25% {-webkit-transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);opacity: 0.5}
  50% {-webkit-transform: scale3d(1.05, 1.05, 1.05);-ms-transform: scale3d(1.05, 1.05, 1.05);transform: scale3d(1.05, 1.05, 1.05);opacity: 1}
  100% {-webkit-transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}
}
@keyframes pulse {
  0% {opacity: 0}
  25% {-webkit-transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);opacity: 0.5}
  50% {-webkit-transform: scale3d(1.05, 1.05, 1.05);-ms-transform: scale3d(1.05, 1.05, 1.05);transform: scale3d(1.05, 1.05, 1.05);opacity: 1}
  100% {-webkit-transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1)}
}

.is_anim.speech_balloon_left{
  -webkit-animation: speech_balloon_left 5s ease infinite; /* iOS8以下やAndroid4.4.4以下 */
  animation: speech_balloon_left  5s ease infinite;
  opacity: 0;
}
.is_anim.speech_balloon_right{
  -webkit-animation: speech_balloon_right 5s ease infinite;
  animation: speech_balloon_right  5s ease infinite;
  opacity: 0;
}
.is_anim.beer{
  -webkit-animation: beer 5s both infinite;
  animation: beer 5s both infinite;
  opacity: 0;
}
.is_anim.txt_p{
  -webkit-animation: txt_p 5s both infinite;
  animation: txt_p 5s both infinite;
  opacity: 0;
}
.is_anim.p_fukidashi{
  -webkit-animation: p_fukidashi 5s both infinite;
  animation: p_fukidashi 5s both infinite;
  opacity: 0;
}
.is_anim.top_fadeInUp{
  -webkit-animation: top_fadeInUp 1.5s both;
  animation: top_fadeInUp 1.5s both;
  opacity: 0;
}
.is_anim.fadeInRight{
  -webkit-animation: fadeInRight 0.8s both!important;
  animation: fadeInRight 0.8s both!important;
  opacity: 0;
}
.is_anim.fadeInUp{
  -webkit-animation: fadeInUp 1.5s both;
  animation: fadeInUp 1.5s both;
  opacity: 0;
}
.is_anim.fadeInUp_v2{
  -webkit-animation: fadeInUp_v2 1.5s both;
  animation: fadeInUp_v2 1.5s both;
  opacity: 0;
}
@media (max-width: 767px){
  .is_anim.fadeInUp_v2{
  -webkit-animation: fadeInUp 1.5s both;
  animation: fadeInUp 1.5s both;
  opacity: 0;
}
}
.is_anim.fadeInUp_fast{
  -webkit-animation: fadeInUp 1s both;
  animation: fadeInUp 1s both;
  opacity: 0;
}
.is_anim.lightSpeedIn {
  -webkit-animation: lightSpeedIn 1s ease-out;
  animation: lightSpeedIn 1s ease-out;
  opacity: 0;
}
.is_anim.pulse {
  -webkit-animation: pulse 1s both;
  animation: pulse 1s both;
  opacity: 1;
}




/*====================================================================================

pc only

====================================================================================*/
      @media (min-width: 768px) {
        
      }/* pc only end */


/*====================================================================================

 sp only

====================================================================================*/
@media (max-width: 767px){
      body{
        font-size: 0.8em;
      }
      /* common　共通エレメント
      -------------------------------------------------------*/
      h2[class^="hd_"] {
        font-size: 1.6em;
        margin-bottom: 10%;
      }
      .hd_02{
        font-size: 1.2em;
        border: 5px solid #f6773e;
        padding: 8% 5%;
        border-radius: 50px 50px 0 50px;
      }
      h2.hd_03{
        font-size: 1.8em;
        line-height: 1.6;
        padding-top: 8%;
      }
      
      /* .main
      -------------------------------------------------------*/
      .main{
        height: 170vw;
      }
      .main .container{
        height: 100%;
      }
      .main h1{
        width: 28%;
        height: auto;
        top: auto;
        bottom: 3%;
        right: 0px;
        left: auto;
      }
      .main h1 .capture{
        text-align: left;
        width: 100%;
        white-space: nowrap;
        font-size:10px
        -webkit-transform: scale(0.35) translate(0px, 10px);
        transform: scale(0.35) translate(-76px, 49px);
      }
      .main h1 .logo{
        width: 88%;
      }

#contact .main .container {
	padding-top: 3%;
}
#contact .main h1 {
	width: fit-content;
	margin: 0 auto;
	position: static;
}
#contact .main h1 .capture {
	text-align: center;
	transform: scale(1) translate(0, 0);
	margin-bottom: 3px;
}
#contact .main h1 a {
	display: block;
	width: 50%;
	margin: 0 auto;
}
#contact .main h1 .logo {
	width: 100%;
}
/* fron-page & page-contact */
.main .nav-header {
	
}
#food .main .nav-header {
	top: auto;
	bottom: 3%;
	left: 12px;
	transform: none;
}
#contact .main .nav-header {
	margin-top: 72px;
	position: static;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
#contact .main .nav-header a {
	padding: 3px 12px;
	letter-spacing: 0;
	margin-right: 0;
}
#food .main .nav-header a.link-food {
	display: none;
}
.main .nav-header a:hover {
	background-color: inherit;
}
#food .main .nav-header a:hover,
#food .main .nav-header a:hover::before {
	color: #f76629;
}
#contact .main .nav-header a:hover {
	color: #fff;
}

.contact-message,
.contact-message-error {
  font-size: 15px;
  margin-top: 0;
}
.contact-message {
  padding: 60px 42px;
}
.contact-message-error {}
.contact-message-thanks {
  flex-direction: column;
  font-size: 18px;
  text-align: center;
  padding: 60px 42px;
  box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 15px #00b920;
}
.contact-message-thanks::before {}
.contact-message-thanks::after {
  top: 68px;
  left: 50%;
  transform: translate(-50%, 0) rotate(45deg);
}

.mw_wp_form span.input {}
.mw_wp_form_confirm span.input {
  background-color: #fff;
}

.mw_wp_form_confirm .privacy_policy {}
.mw_wp_form span.error {
  margin-right: auto;
  margin-left: auto;
}
.mw_wp_form span.error::before {
  width: 15px;
  height: 15px;
  line-height: 0.8;
  letter-spacing: 0;
  border-radius: 15px;
}
.mwform-radio-field {
  padding-top: 10px;
  display: block;
}
.mwform-radio-field > label {
  display: block;
  padding: 12px 0;
}
.mw_wp_form .input .horizontal-item + .horizontal-item {
  margin-left: 0;
}
      .main .ttl_01{
        width: 90%;
        left: 50%;
        margin-left: -45%;
        top: 3%;
      }
      .main .ttl_02{
        width: 60%;
        left: 50%;
        margin-left: -30%;
        top: 18%;
      }
      .main .ttl_03{
        width: 76%;
        left: 50%;
        margin-left: -38%;
        top: 27%;
      }
      .main .ttl_04{
        width: 70%;
        left: 50%;
        margin-left: -35%;
        top: 38%;
      }
      .main .txt_01{
        width: 23%;
        left: 15.5%;
        top: 38%;
        bottom: auto;
      }
      .main .txt_02{
        width: 23%;
        left: 38.5%;
        top: 38%;
        bottom: auto;
      }
      .main .txt_03{
        width: 23%;
        left: 61.5%;
        top: 38%;
        bottom: auto;
      }
      .main .img_01{
        width: 76%;
        right: center;
        left: 50%;
        margin-left: -38%;
        top: 44%;
      }
      .main .img_02{
        width: 12%;
        right: auto;
        left: 40%;
        top: 48%;
      }
      .main .img_03{
        width: 12%;
        right: 40%;
        top: 48%;
      }
      .main .img_main_img{
        width: 76%;
        right: 50%;
        margin-right: -38%;
        top: 44%;
      }
      .main .img_main_beer{
        width: 5.4%;
        right: 43.5%;
        top: 66%;
      }
      .main .img_main_p{
        width: 3%;
        right: 56%;
        top: 64.5%;
      }
      .main .img_main_p_fukidashi{
        width: 9%;
        right: 53%;
        top: 65%;
      }
      .main::before{
       background: #f36337;
        bottom: -350px;
      }
      
      /* .problem
      -------------------------------------------------------*/
      .problem{
        height: auto;
      }
      .problem .container{
        padding-bottom: 8%;
      }
      .problem .comment{
        position: static;
        width: 80%;
        height: 120px;
        border-radius: 50px 50px 0 50px;
        margin: 0 auto 5%;
      }
      .problem .comment:nth-of-type(odd){
        transform: translateX(-30px);
        margin-right: 50px;
      }
      .problem .comment:nth-of-type(even){
        transform: translateX(30px);
        margin-left: 50px;
      }
      
      /* .about
      -------------------------------------------------------*/
      .about .hd_02{
        margin-bottom: 8%;
      }
      .about .blockWrap{
        display: block;
      }
      .about .block_about{
        width: auto;
        margin-bottom: 20px;
      }
      .block_about h3{
        font-size: 1.4em;
        margin-bottom: 0;
      }
      .block_about .imgWrap{
        padding: 5%;
        height: 60vw;
      }
      .about .description{
        text-align: left;
        padding:5% 8%;
      }
      .block_about .img_01{
        transform: translateX(10px)
      }
      .block_about .img_02{
        transform: translateX(5px)
      }
      
      /* .merit
      -------------------------------------------------------*/
      .merit::before{
        top: -360px;
      }
      .merit .container{
        padding: 0;
      }
      .merit .block_merit{
        display: block;
        height: auto;
        margin-bottom: 5%;
        text-align: center;
      }
      .merit .block_merit .item{
        display: block;
      }
      .merit .block_merit .number{
        width: 100px;
        margin: 0 auto;
      }
      .merit .block_merit .img{
        width: 128px;
        margin: 0 auto 3%;
      }
      .merit .block_merit .txt{
        padding-bottom: 4%;
      }
      .merit .block_merit .txt h3{
        text-align: center!important;
      }
      .merit .cont_first{
        padding-bottom: 0;
      }
      .merit .cont_last{
        background-color: #57555b;
      }
      .merit .cont_last .container{
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
      }
      .merit .cont_last .block_merit{
        width: auto;
        padding: 0 5% 5%;
        transform: translateY(0px);
      }
      .merit .cont_last .block_merit .number{
        vertical-align: top;
        transform: translateY(0px);
      }
      .merit .cont_last .block_merit .txt{
        padding: 0 0 3%;
      }
      .merit .cont_last p.txt{
        color: #fff;
        line-height: 2.4;
        width: auto;
        padding: 3% 5%;
        margin-bottom: 3%;
        transform: translateY(0px);
      }
      .merit .cont_last .img{
        position: static;
        width: 80%;
        margin-bottom: 3%;
      }
      
      /* .recommend
      -------------------------------------------------------*/
      .recommend{
        padding-top: 26%;
      }
      .recommend::before{
        content: "";
        position: absolute;
        background: #57555b;
        top: -350px;
        left: 0;
        height: 400px;
        width: 100vw;
        transform: skew(0deg, -8deg);
        z-index:-1;
      }
      .recommend .hd_03{
        padding-bottom: 2%;
      }
      .recommend .block_recommend{
        display: block;
        width: 100%;
        height: auto;
      }
      .recommend .block_recommend .imgWrap{
        width: auto;
        height: 100%;
      }
      .recommend .block_recommend .txtWrap{
        width: 100%;
        height: 120px;
      }
  
      /* .case
      -------------------------------------------------------*/
      .case{
        padding-top: 8%;
      }
      .case .block_case{
        display: block;
      }
      .case .block_case .imgWrap{
        width: 100%;
      }
      
      /* .flow_use
      -------------------------------------------------------*/
      .flow_use .container{
        padding-bottom: 12%;
      }
      .flow_use .block_flow_use{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
        -webkit-box-pack: start;
           -ms-flex-pack: start;
        justify-content: flex-start;
        height: auto;
        margin-bottom: 5%;
      }
      .flow_use .block_flow_use .imgWrap{
        width: 100%;
        height: 60vw;
      }
      .flow_use .block_flow_use .txtWrap{
        width: 100%;
        height: auto;
      }
      .flow_use .block_flow_use .txtWrap .hd{
        -webkit-box-pack: center;
           -ms-flex-pack: center;
        justify-content: center;
        font-size: 1.4em;
        padding: 4% 5%;
        height: auto;
      }
      .flow_use .block_flow_use .txtWrap .number{
        width: 30px;
        height: 30px;
        line-height: 1.4em;
        margin: 0 10px 3px 10px;
      }
      .flow_use .block_flow_use .txtWrap .txt{
        padding: 8%;
        height: auto;
      }
      .flow_use .img_01{
        width: 36%;
        transform: translate(25px, 2px);
      }
      .flow_use .img_02{
        width: 67%;
        transform: translateX(7px);
      }
      .flow_use .img_03{
        width: 66%;
        transform: translate(5px, 2px);
      }
      .flow_use .img_04{
        width: 82%;
        transform: translate(6px, 2px);
      }
      
      /* .smaregi
      -------------------------------------------------------*/
      .smaregi .block_smaregi{
        width: auto;
        margin: 0 auto;
      }
      .smaregi .block_smaregi .img{
        width: 30%;
        margin-right: 5%;
      }
      .smaregi .block_smaregi .txt{
        padding-top: 0;
        transform: translateY(-5px);
        overflow: hidden;
      }
      
      /* .flow_start
      -------------------------------------------------------*/
      .flow_start .block_flow_start{
        margin-bottom: 13%;
      }
      .flow_start .block_flow_start::after{
        border-width: 40px 35px 0 35px;
        bottom: -30px;
        margin-left: -30px;
      }
      .flow_start .block_flow_start .hd{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff;
        background-color: #57555b;
        font-size: 1.2em;
        padding: 0 2%;
        height: 90px;
      }
      .flow_start .block_flow_start .number{
        width: 30px;
        height: 30px;
        line-height: 1.7em;
        margin: 0 10px 2px 0;
      }
      .flow_start .block_flow_start .inner{
        display: block;
        padding: 10% 5%;
      }
      .flow_start .block_flow_start .inner .img{
        float: left;
        width: 30%;
        margin-right: 5%;
        margin-bottom: 3%;
      }
      .flow_start .block_flow_start .inner .txt{
        overflow: hidden;
      }
      .flow_start .block_start{
        margin-top: 3%;
        padding: 12% 5% 8%;
      }
      .flow_start .block_start .hd{
        font-size: 1.4em;
        width: 90%;
        height: 40px;
        line-height: 40px;
        border-radius: 37px;
        margin-bottom: 8%;
      }
      .flow_start .block_start .txt{
        width: 60%;
        margin: 0 auto;
      }
      .flow_start .block_start .img_01{
        width: 20%;
        bottom: -30px;
        left: 20px;
      }
      .flow_start .block_start .img_02{
        width: 34%;
        bottom: -24px;
        right: -14px;
      } 
      
      /* .faq
      -------------------------------------------------------*/
      .faq .block_faq{
        border-radius: 50px 50px 0 50px;
        padding: 8% 7%;
        margin-bottom: 5%;
      }
      .faq .block_faq h3{
        font-size: 1.1em;
        margin-bottom: 10%;
        position: relative;
      }
      .faq .block_faq h3::after{
        position: absolute;
        content: "";
        display: block;
        width: 96%;
        height: 3px;
        background-color: #57555b;
        left: 2%;
        bottom: -15px;
      }
      .faq .block_faq h3 span{
        border-bottom: none;
        padding: 0;
      }
      .faq .block_faq h3 span::before{
        width: 30px;
        height: 30px;
        margin-right: 5px;
      }
      .faq .block_faq .txt{
        text-align: center;
      }
      
			/* .cta
			-------------------------------------------------------*/
			.cta .btn-cta {
			  padding: 15px 62px 15px 24px;
			  font-size: 21px;
			}
			.cta .btn-cta strong {
				font-size: 16px;
			}
			.cta .btn-cta:before {
				width: 40px;
				height: 40px;
				right: 10px;
			}
			.cta .btn-cta:after {
				border: 8px solid transparent;
				border-left: 12px solid #f6773e;
				right: 14px;
			}
			
      /* .form
      -------------------------------------------------------*/
      .form form{
        width: 100%;
      }
      .form form input{
      }
      .form form input[type="submit"]{
        margin-bottom: 6%;
      }
      .privacy_policy{
        width: auto;
      }
      .privacy_policy .inner{
        padding: 5%;
      }
      
      /* footer
      -------------------------------------------------------*/
      footer{
        padding-bottom: 3%;
      }
      footer .container{
        padding-top: 2%;
      }
      footer .logo{
        width: 30%;
        margin-bottom: 3%;
      }
      footer ul{
        font-size: 0.8em;
        margin-top: 0;
      }
    
    
    
      @media (max-width: 640px){
      }
      @media (max-width: 414px){
      }
      @media (max-width: 375px){
      }
      @media (max-width: 320px){
        body{font-size: 0.7em;}
      }
  
}/* sp only end */