@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;900&display=swap');


html {
	scroll-behavior: smooth;
	overflow-y: scroll!important;
	width: 100%;
	box-sizing: border-box;
/*	font-family: "M PLUS 1p","Noto Sans JP","游ゴシック","メイリオ",serif;*/
	/*font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho",
	"游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;*/
}
/*html {
  --top-spacing: 110px;
  scroll-padding-top: var(--top-spacing);
}*/
body{
	font-family: 'Zen Maru Gothic','Zen Kaku Gothic New','Zen Kaku Gothic',"M PLUS 1p","Noto Sans JP","游ゴシック","メイリオ",serif!important;
}

a{
	text-decoration: none;
	transition: 0.7s;
}
a:hover{
	opacity: 0.7;
}

body{
	background-color: #fafafa;
	/*overflow: auto;
  scrollbar-gutter: stable;*/
}
*{
	padding: 0;
	margin: 0;
}
p{
	color: #333;
	line-height: 1.7;
}

img{
	width: 100%;
	vertical-align:top;
}

.sp{
	display: none;
}
.sp_only{
	display: none;
}
.tb_sp{
	display: none;
}

/*フェードイン*/
.js-fade {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 2s,visibility 2s, transform 2s;
}
.scroll {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}
.fadein{
  	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 1s,visibility 2s, transform 2s;
}
.fadein.in{
 	 opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}


	/*ハンバーガーメニュー*/
.menu_btn{
	background-color: #fff;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	position: fixed;
	top: 15px;
	right: 15px;
	padding: 15px;
	cursor: pointer;
	transition: .5s;
	z-index: 20;
}
.menu_btn span{
	width: 25px;
	height: 4px;
	background-color: #ff8500;
	border-radius: 15px;
	display: block;
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	transition: .5s;
}
.active .menu_btn{
	background-color: #ff8500;
}
.active .menu_btn span{
	background-color: #fff;
}
.menu_btn span:nth-of-type(1){
	top: 30%;
}
.menu_btn span:nth-of-type(2){
	top: 45%;
}
.menu_btn span:nth-of-type(3){
	top: 62%;
}
.menu_btn.active{
	background-color: #fff;
}
.menu_btn.active span{
	background-color: #ff8500;
}
.menu_btn.active span:nth-of-type(1){
	top: 46%;
	transform: rotate(45deg);
}
.menu_btn.active span:nth-of-type(2){
	opacity: 0;
}
.menu_btn.active span:nth-of-type(3){
	top: 46%;
	transform: rotate(-45deg);
}

/* 広がる色のための要素 */
.hirogari{
	background-color: #fff;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	position: fixed;
	top: 17px;
	right: 17px;
	padding: 15px;
	cursor: pointer;
	transition: .5s;
	z-index: 19;
}
/* 広がる色の準備 */
.hirogari::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: #ff8500; /* 広がる色 */
    border-radius: 50%; /* 円形にする */
    transform: translate(-50%, -50%) scale(0); /* 初期状態は中央に縮小 */
    opacity: 1; /* 初期状態は非表示 */
    transition: all 0.7s ease-out; /* アニメーションの時間とイージング */
    z-index: 0; /* ハンバーガーメニューの裏に配置 */
}
/* active クラスが追加された時のアニメーション */
.hirogari.active::before {
    width: 500vw; /* 画面全体を覆うくらい大きく */
    height: 500vw; /* 画面全体を覆うくらい大きく */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}


header{
	padding-bottom: 1px;
	position: relative;
}
.top_waku{
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	background-position: center top;
	position: relative;
}
.top_waku a.top_logo_name{
	content: '';
	background-image: url(../img/mp_top_logom.png);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	width: 21%;
	max-width: 379px;
	padding-top: 21%;
	z-index: 10;
}
.top_waku a.top_logo_name:hover{
	opacity: 1;
}
.top_waku:after{
	content: '';
	background-image: url(../img/top_waku.png?06);
	background-size: 115%;
  background-repeat: no-repeat;
  background-position: center top;
	position: absolute;
	top: 0;
/*	bottom: 0;*/
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	padding-top: 59%;
	max-width: 1920px;
}
.top_animation{
	background-image: url(../img/top_animation.gif?0710);
	width: 100%;
	max-width: 1920px;
	padding-top: 55%;
	background-position: center;
	background-size: 90%;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	/*position: absolute;
	top: 0;
	left: 0;
	right: 0;*/
	margin: auto;
	/*	bottom: 0;*/
}

.fuwa1{
	animation:fuwa1 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes fuwa1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20%);
  }
}
.fuwa2{
	animation:fuwa2 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes fuwa2 {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(0px);
  }
}

.fuwa_top:nth-of-type(1){
	position: absolute;
	top: 5%;
	left: 25%;
	width: 10%;
	max-width: 189px;
	z-index: 10;
}
.fuwa_top:nth-of-type(2){
	position: absolute;
	top: 52.5%;
	left: 3.5%;
	width: 8%;
	max-width: 150px;
	z-index: 10;
}
.fuwa_top:nth-of-type(3){
	position: absolute;
	bottom: 5%;
	left: 4%;
	width: 11%;
	max-width: 205px;
	z-index: 10;
}
.fuwa_top:nth-of-type(4){
	position: absolute;
	top: 8%;
	right: 27%;
	width: 7%;
	max-width: 119px;
	z-index: 10;
}
.fuwa_top:nth-of-type(5){
	position: absolute;
	top: 16%;
	right: 3%;
	width: 13%;
	max-width: 237px;
	z-index: 10;
}
.fuwa_top:nth-of-type(6){
	position: absolute;
	bottom: 28%;
	right: 3%;
	width: 8%;
	max-width: 139px;
	z-index: 10;
}
.fuwa_top:nth-of-type(7){
	position: absolute;
	bottom: 5%;
	right: 2%;
	width: 11%;
	max-width: 189px;
	z-index: 10;
}


.cloud1{
	animation:cloud1 1.5s ease-in-out infinite alternate-reverse;
}
@keyframes cloud1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10%);
  }
}
.cloud2{
	animation:cloud2 1.5s ease-in-out infinite alternate-reverse;
}
@keyframes cloud2 {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0px);
  }
}
.kumo_top1{
	position: absolute;
	top: 19%;
	left: 16%;
	width: 10%;
	max-width: 141px;
	z-index: 0;
}
.kumo_top2{
	position: absolute;
	top: 26%;
	left: 25%;
	width: 9%;
	max-width: 135px;
	z-index: 0;
}
.kumo_top3{
	position: absolute;
	top: 26%;
	right: 25%;
	width: 7%;
	max-width: 95px;
	z-index: 0;
}
.kumo_top4{
	position: absolute;
	top: 18%;
	right: 16%;
	width: 11%;
	max-width: 161px;
	z-index: 0;
}

.kikyu{
	position: absolute;
	top: 0;
	max-width: 114px;
	width: 12%;
	animation: kik 20s linear infinite;
}
@keyframes kik {
  0% {
    transform: translateX(100vw) translateY(-50%); /* 画面右端から開始 */
    top: 24%;
  }
  20% {
  	top: 25%;
  }
  25% {
  	top: 26;
  }
  30% {
  	top: 25%;
  }
  50% {
  	top: 24%;
  }
  70% {
  	top: 25%;
  }
  75% {
  	top: 26%;
  }
  80% {
  	transform: translateX(-100%) translateY(-50%); /* 要素が完全に左に移動するまで */
    top: 25%;
    opacity: 1;
  }
  81% {
  	opacity: 0;
  }
  100% {
  	transform: translateX(-200%) translateY(-50%) rotate(-18deg); /* 要素が完全に左に移動するまで */
  }
}


/*スクロール誘導*/
/*スクロールダウン全体の場所*/
.scrolldown1{
	/*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:0;
	right: 0;
	bottom: 9%;
	margin: auto;
/*	top: -140px;*/
	/*全体の高さ*/
/*	height:50px;*/
	z-index: 10;
	text-align: center;
}

/*Scrollテキストの描写*/
.scrolldown1 img{
	/*描画位置*/
	position: relative;
  /*left: 0;
  right: 0;*/
/*  left: -25px;*/
/*  top: -10px;*/
    margin-bottom: 1.1%;
max-width: 72px;
width: 4%;
}

.sem{
	width: 3px;
	margin: 0 auto;
	padding-top: 4%;
/*	height: 70px;*/
	background: #fff;
	animation: scrollDown 5s ease infinite;
/*    margin: 0 auto; //---you can romove this line---*/
}
.dli-chevron-down {
	display: inline-block;
	vertical-align: middle;
	color: #333;
	line-height: 1;
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(135deg);
	position: absolute;
	z-index: 10;
	right: 0;
	left: 0;
	bottom: -47px;
	color: #fff;
	margin: auto;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes scrollDown{
	0%{
		transform-origin: top;
		transform: scaleY(0);
	}
	45%{
		transform-origin: top;
		transform: scaleY(1);
	}
	55%{
		transform-origin: bottom;
		transform: scaleY(1);
	}
	100%{
		transform-origin: bottom;
		transform: scaleY(0);
	}
}


.header_menu{
	position: relative;
	z-index: 10;
}
.hmenu_wrap{
	width: 85%;
	max-width: 1220px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
  z-index: 10;
  bottom: -1%;
  right: 0;
  left: 0;
  margin: auto;
}
.hmenu_tec{
	display: flex;
	align-items: center;
	transition: 0.7s;
}
.hmenu_tec:nth-of-type(1){
	max-width: 258px;
	width: 22%;
}
.hmenu_tec:nth-of-type(2){
	max-width: 119px;
	width: 10%;
}
.hmenu_tec:nth-of-type(3){
	max-width: 202px;
	width: 17%;
}
.hmenu_tec:nth-of-type(4){
	max-width: 119px;
	width: 10%;
}
.hmenu_tec:nth-of-type(5){
	max-width: 178px;
	width: 15%;
}
.hmenu_tec:nth-of-type(6){
	max-width: 65px;
	width: 6%;
	position: relative;
	top: -7px;

}
.hmenu_tec:hover{
	opacity: 1;
}
.hmenu_tec.htv:hover{
	opacity: 0.5;
}
.hmenu_tec .top_hd{
	transition: all 0.5s ease-in-out 0s
}
.hmenu_tec:hover .top_hd{
/*	color: #ff8400;*/
/*	filter: brightness(0) saturate(100%) invert(54%) sepia(30%) saturate(2874%) hue-rotate(359deg) brightness(102%) contrast(103%);*/
	filter: invert(47%) sepia(92%) saturate(1164%) hue-rotate(1deg) brightness(103%) contrast(104%);
}


.headerman{
	background-color: #fafafa;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 50;
  transition: 0.5s;
  box-shadow: 0px 5px 10px -6px rgba(0, 0, 0, 0.3);
  transform: translateY(-100%);
}
.headerman.active{
  transform: translateY(0%);
}
.header_wrapper {
  max-width: 1250px;
  padding: 1.5% 20px;
/*  height: 110px;*/
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hmenu_men{
	display: flex;
	align-items: center;
}
.hmenu_men:nth-of-type(1){
	max-width: 288px;
	width: 18%;
}
.hmenu_men:nth-of-type(2){
	max-width: 258px;
	width: 16%;
}
.hmenu_men:nth-of-type(3){
	max-width: 119px;
	width: 8%;
}
.hmenu_men:nth-of-type(4){
	max-width: 202px;
	width: 13%;
}
.hmenu_men:nth-of-type(5){
	max-width: 119px;
	width: 8%;
}
.hmenu_men:nth-of-type(6){
	max-width: 178px;
	width: 11%;
}
.hmenu_men:nth-of-type(7){
	max-width: 65px;
	width: 4%;
	position: relative;
	top: -5px;
}
.hmenu_men:hover{
	opacity: 1;
}
.hmenu_men.mentv:hover{
	opacity: 0.7;
}
.hmenu_men.mentv:hover .top_hd{
	filter: unset;
}
.hmenu_men .top_hd{
	transition: all 0.5s ease-in-out 0s
}
.hmenu_men:hover .top_hd{
/*	color: #ff8400;*/
/*	filter: brightness(0) saturate(100%) invert(54%) sepia(30%) saturate(2874%) hue-rotate(359deg) brightness(102%) contrast(103%);*/
	filter: invert(47%) sepia(92%) saturate(1164%) hue-rotate(1deg) brightness(103%) contrast(104%);
}


/*麦パン工房について*/
#about{
	margin: 0 auto 40px;
	padding-top: 9%;
	max-width: 1515px;
	position: relative;
}
#about:before{
	content: '';
	background-image: url(../img/boya2.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 10%;
	right: 4%;
	max-width: 317px;
  width: 17%;
  padding-top: 18%;
}
#about:after{
	content: '';
	background-image: url(../img/boya1.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: 350px;
  width: 22%;
  padding-top: 25%;
}
.about_fuwawrap{
	margin: 0 auto;
	max-width: 1020px;
	padding-bottom: 115px;
	position: relative;
}
.cont_wrap{
/*	padding-bottom: 115px;*/
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.cont_title{
	text-align: center;
}
#about .cont_title img{
	max-width: 369px;
	width: 38%;
	margin: 0 auto 40px;
}
#about .cont_title p{
	color: #ff8400;
	font-weight: bold;
	font-size: 32px;
	margin-bottom: 40px;
	text-align: center;
	line-height: 1.5;
}
.cont_text p{
	font-size: 20px;
	line-height: 38px;
	letter-spacing: 0.5px;
	font-weight: bold;
	color: #a8854f;
	text-align: center;
}

.abo1{
	animation:abo1 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes abo1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15%);
  }
}
.abo2{
	animation:abo2 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes abo2 {
  0% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(0px);
  }
}
.fuwa_about:nth-of-type(1){
	position: absolute;
	top: 10%;
	left: 2%;
	width: 11%;
	max-width: 107px;
	z-index: 10;
}
.fuwa_about:nth-of-type(2){
	position: absolute;
	bottom: 4.5%;
	left: 1%;
	width: 12%;
	max-width: 118px;
	z-index: 10;
}
.fuwa_about:nth-of-type(3){
	position: absolute;
	top: 23%;
	right: 1%;
	width: 12%;
	max-width: 113px;
	z-index: 10;
}
.fuwa_about:nth-of-type(4){
	position: absolute;
	bottom: 4%;
	right: 3%;
	width: 8%;
	max-width: 81px;
	z-index: 10;
}


/*商品紹介*/
#item{
	margin-bottom: 115px;
	padding-top: 6%;
  margin-top: -6%;
}
#item .cont_title img{
	max-width: 170px;
	width: 38%;
	margin: 0 auto 40px;
}
.item_wrap .splide__list{
	display: flex!important;
	justify-content: space-between!important;
	max-width: 1030px!important;
	width: 100%!important;
	margin: 0 auto!important;
}
.item_cont{
	width: 32%;
	border-radius: 35%/15%;
	background-color: #ffdece;
	padding: 30px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.item_cont.item_cont2{
	background-color: #ffe39c;
}
.item_cont.item_cont3{
	background-color: #dcecc1;
}
.item_img{
	text-align: center;
}
.item_img img{
	max-width: 310px;
	margin: 0 auto;
}
/*.item_cont.item_cont2 .item_img img{
	max-width: 210px;
}
.item_cont.item_cont3 .item_img img{
	max-width: 310px;
}*/
.item_name{
	font-size: 32px;
	font-weight: bold;
	color: #ff4343;
	text-align: center;
	margin-bottom: 10px;
}
.item_cont.item_cont2 .item_name,.item_cont.item_cont2 .item_btn p{
	color: #ff6900;
}
.item_cont.item_cont3 .item_name,.item_cont.item_cont3 .item_btn p{
	color: #548d47;
}
.item_cate{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-grow: 1;
}
.item_cate p{
	text-align: center;
	background-color: #ff4343;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	padding: 3px 10px;
	border-radius: 10px;
	margin-bottom: 7px;
	max-width: fit-content;
	height: fit-content;
}
.item_cont.item_cont2 .item_cate p{
	background-color: #ff6900;
}
.item_cont.item_cont2 .item_cate p:nth-of-type(2){
	margin-right: 7px;
}
.item_cont.item_cont3 .item_cate p{
	background-color: #548d47;
}
.retu1{
	margin: 0 35px 7px;
}

.item_btn{
	position: relative;
	background-color: #fff;
	border-radius: 50px;
	max-width: 210px;
	width: 100%;
	margin: 15px auto 0;
	padding: 10px 20px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	transition: transform ease 0.4s;
}
.item_cont:hover .item_btn{
	transform: scale(1.05);
}
.item_btn p{
	font-size: 18px;
	font-weight: bold;
	color: #ff4343;
}
.item_yaji {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.item_yaji:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background-color: #ffdece;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0, 0);
  transition: transform ease 0.4s;
}
.item_cont.item_cont2 .item_yaji:after{
	background-color: #ffe39c;
}
.item_cont.item_cont3 .item_yaji:after{
	background-color: #dcecc1;
}
.item_cont:hover .item_btn .item_yaji:after {
  transform: translate(-50%, -50%) scale(1.1, 1.1);
}
.yajiji {
  display: inline-block;
  vertical-align: middle;
  color: #ff4343;
  line-height: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 12px;
  height: 2px;
  background: currentColor;
  z-index: 10;
  transition: transform ease 0.4s;
}
.item_cont.item_cont2 .yajiji{
	color: #ff6900;
}
.item_cont.item_cont3 .yajiji{
	color: #548d47;
}
.yajiji::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  transform-origin: top right;
  position: absolute;
  top: 50%;
  right: -0.05em;
  box-sizing: border-box;
}


/*ポップアップ*/
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
/*	max-width: 1760px;*/
/*	max-height: 90vh;*/
  /*overflow: hidden;
  overflow-y: scroll;
  margin: auto;
  height: 85vh;
	width: 95%;
	max-height: fit-content;*/
}
/*閉じるボタン*/
.mfp-close{
  background-color: #ff4343!important;
  border-radius: 50%!important;
  right: -10px!important;
  top: -10px!important;
  transition: 0.7s;
  font-size: 18px!important;
  line-height: 18px!important;
  font-weight: bold;
  font-family: Arial, sans-serif!important;
}
#pan2 .mfp-close{
	background-color: #ff6900!important;
}
#pan3 .mfp-close{
	background-color: #548d47!important;
}
button.mfp-close:hover{
  opacity: 0.7!important;
}
.mfp-close-btn-in .mfp-close{
  color: #fff!important;
  opacity: 1!important;
}
.mfp-close-btn-in .mfp-close{
  width: 45px;
  height: 45px;
  line-height: 37px;
}
/*ポップアップフェードインアニメーションの為の記述*/
/* オーバーレイ 初期状態 */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: .5;
}
/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content,
.mfp-fade.mfp-wrap .gallery-arrow {
  opacity: 0;

  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content,
.mfp-fade.mfp-wrap.mfp-ready .gallery-arrow {
  opacity: 1;
}
/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content,
.mfp-fade.mfp-wrap.mfp-removing .gallery-arrow {
  opacity: 0;
}

/*矢印カスタム*/
.gallery-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
  cursor: pointer;
  transition: 0.7s;
}
.gallery-arrow-left{
  left: 2%;
}
.gallery-arrow-left:before{
  content: '';
  background-image: url(../img/item_yaji.png?08);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: -5px;
  bottom: 0;
  margin: auto;
  width: 31px;
  height: 50px;
/*  border-top: 12px solid #ff8e44;*/
/*  border-right: 12px solid #ff8e44;*/
/*  -webkit-transform: rotate(225deg);*/
  transform: rotate(180deg);
  z-index: 5;
}
.gallery-arrow-right{
  right: 2%;
}
.gallery-arrow-right:before{
  content: '';
  background-image: url(../img/item_yaji.png?08);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: -5px;
  bottom: 0;
  margin: auto;
  width: 31px;
  height: 50px;
/*  border-top: 12px solid #ff8e44;*/
/*  border-right: 12px solid #ff8e44;*/
/*  -webkit-transform: rotate(45deg);*/
/*  transform: rotate(45deg);*/
  z-index: 5;
}
.gallery-arrow:hover{
	opacity: 0.7;
}

.mfp-container{
	max-width: 1450px;
	margin: auto;
	right: 0;
	left: 0;
}
.mfp-inline-holder .mfp-content{
	width: 95%;
	max-width: 1260px;
	margin: auto;
}
.popy {
/*  max-width: 1760px;*/
/*	max-width: 1260px;*/
/*  width: 95%;*/
	width: 100%;
  margin: auto;
}
/*.popwrap{
	padding: 30px;
	max-width: 1760px;
	width: 100%;
	margin: 0 auto;
}*/
#pan1 .popwrap{
	background-color: #ffdece;
}
#pan2 .popwrap{
	background-color: #ffebb8;
}
#pan3 .popwrap{
	background-color: #ebf4db;
}

.popwrap{
/*	max-width: 1620px;*/
/*	margin: 0 auto;*/
	margin: 0 0 0 0;
  padding: 35px 40px 50px;
	border-radius: 25px;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  max-height: 90vh !important;
}
.pop_top{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	margin-bottom: 30px;
	border-bottom: solid 4px #ff4343;
}
#pan2 .pop_top{
	border-color: #ff6900;
}
#pan3 .pop_top{
	border-color: #548d47;
}
.pop_title{
	display: flex;
	align-items: center;
	width: 60%;
}
.pop_title img:nth-of-type(1){
	max-width: 374px;
/*	margin-right: 30px;*/
	margin-right: 15px;
/*	width: 36%;*/
	width: 34%;
}

#pan2 .pop_title img:nth-of-type(1){
	max-width: 132px;
	margin-right: 5%;
	width: 19%;
}
#pan3 .pop_title img:nth-of-type(1){
	max-width: 374px;
}
.pop_title img:nth-of-type(2){
	max-width: 635px;
/*	width: 62%;*/
	width: 67%;
}
#pan2 .pop_title img:nth-of-type(2){
	width: 75%;
}
#pan3 .pop_title img:nth-of-type(2){
	width: 65%;
}
.noegg{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	border-radius: 10px;
	padding: 15px;
	box-sizing: border-box;
	max-width: 480px;
	width: 36%;
}
.pop_top .noegg img:nth-of-type(1){
	max-width: 122px;
	width: 26%;
/*	height: fit-content;*/
}
.noegg p{
	color: #a8854f;
/*	font-size: 17px;*/
	font-size: 14px;
	font-weight: bold;
	width: 71%;
}
.pop_bottom{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pop_img{
/*	width: 50%;*/
	width: 49%;
/*	height: 554px;*/
	height: 480px;
	background-image: url(../img/pan_img1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 45px;
}
#pan2 .pop_img{
	background-image: url(../img/pan_img2.jpg);
}
#pan3 .pop_img{
	background-image: url(../img/pan_img3.jpg);
}
.pop_tex{
	width: 48%;
}
.pop_mintitle{
/*	font-size: 52px;*/
	font-size: 40px;
	font-weight: bold;
	color: #ff4343;
}
#pan2 .pop_mintitle{
	color: #ff6900;
	letter-spacing: -2.5px;
}
#pan3 .pop_mintitle{
	color: #548d47;
}
.item_cont.item_cont2 .pop_mintitle{
	color: #ff6900;
}
.item_cont.item_cont3 .pop_mintitle{
	color: #548d47;
}
.point{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px dashed #a7662d;
}
.point:last-child{
	border-bottom: none;
}
.point img{
	max-width: 115px;
/*	width: 25%;*/
	width: 17%;
	margin-right: 15px;
}
.point p{
	text-align: left;
/*	font-size: 23px;*/
	font-size: 20px;
	font-weight: bold;
	color: #a8854f;
	width: 100%;
}
.point p span{
	font-size: 16px;
}
.popup-modal-dismiss{
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #c6b269;
	cursor: pointer;
	z-index: 2;
}
.popup-modal-dismiss span{
	background-color: #fff;
	width: 15px;
	height: 2px;
	transform: rotate(45deg);
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.popup-modal-dismiss span:nth-of-type(2){
	transform: rotate(-45deg);
}
.popup-modal-dismiss:hover{
	opacity: 0.5;
}


/*ポップアップここまで*/



/*美味しさの秘密*/
#secret{
	background-color: #fff6e1;
	position: relative;
	z-index: 15;
}
.sc_wrap{
	padding: 115px 0 160px;
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
}
#secret:before{
	content: '';	
	background-image: url(../img/sc_nami.png);
	background-size: cover;
	position: absolute;
	top: -21px;
	right: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 21px;
}
#secret .cont_title img{
	max-width: 289px;
	width: 38%;
	margin: 0 auto 55px;
}
.sc_cont p{
	color: #a8854f;
	font-size: 23px;
	font-weight: bold;
	text-align: center;
	line-height: 52px;
}
.sc_img:nth-of-type(1){
	position: absolute;
  top: 7%;
  left: 6%;
  width: 25%;
  max-width: 461px;
  z-index: 10;
}
.sc_img:nth-of-type(2){
	position: absolute;
  top: 40%;
  left: 2%;
  width: 13%;
  max-width: 243px;
  z-index: 10;
}
.sc_img:nth-of-type(3){
	position: absolute;
  bottom: 9%;
  left: 7%;
  width: 22%;
  max-width: 396px;
  z-index: 10;
}
.sc_img:nth-of-type(4){
	position: absolute;
  top: 5%;
  right: 15%;
  width: 15%;
  max-width: 268px;
  z-index: 10;
}
.sc_img:nth-of-type(5){
	position: absolute;
  top: 20%;
  right: 3%;
  width: 19%;
  max-width: 345px;
  z-index: 10;
}
.sc_img:nth-of-type(6){
	position: absolute;
  bottom: 8%;
  right: 8%;
  width: 18%;
  max-width: 327px;
  z-index: 10;
}



/*麦パンTV*/
#tv{
	padding: 115px 0;
	position: relative;
	overflow-x: clip;
	background-color: #fff;
	height: 100%;
}
#tv .cont_title img{
	max-width: 191px;
	width: 38%;
	margin: 0 auto 55px;
}
.tv_vision{
	position: relative;
	width: 100%;
	text-align: center;
}
.tv_movie{
	position: relative;
	z-index: 5;
}
.tv_vision img{
	max-width: 725px;
	margin: 0 auto;
	width: 100%;
}

.loop_tex{
	width: 100%;
	padding: 10px;
	height: 111px;
	text-align: center;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}
.loop_tex div{
	background-image: url(../img/tv_backtex.png);
	background-repeat: repeat-x;
	background-size: contain;
	/*background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	max-width: 1731px;*/
	position: absolute;
	left: 0;
	width: 100%;
	height: 111px;
	margin: 0 auto;
	animation: 60s linear infinite waveMove;
	
}

@keyframes waveMove {
  0%     { background-position-x: 1921px;}
  100% { background-position-x: 0px;}
}

.caten{
	background: url(../img/tvk_left.png) no-repeat left top, url(../img/tvk_right.png) no-repeat right top;
	background-size: contain;
	width: 100vw;
  height: 929px;
	position: absolute;
	top: 0;
	z-index: 2;
}
.maku{
	width: 100vw;
/*  height: 953px;*/
  position: absolute;
  top: 0;
  z-index: 10;
  pointer-events: none;
  height: 100%;
}
.maku div.makuLeft {
	content: '';
  width: 50.5vw;
  height: 953px;
  background-image: url(../img/maku_left.png);
  background-position: right top;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}
.act .maku div.makuLeft{
  animation: makuLeft 2.5s ease-in forwards 0.9s;
}
@keyframes makuLeft {
	20% {
	    left: -20px;
	    transform: rotate(-1deg);
	}
	100% {
	    left: -100vw;
	}
}
.maku div.makuRight {
    width: 50.5vw;
    height: 953px;
  	background-image: url(../img/maku_right.png);
  	background-position: left top;
  	background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
}
.act .maku div.makuRight{
	animation: makuRight 2.5s ease-in forwards 0.9s;
}
@keyframes makuRight {
	20% {
	    right: -20px;
	    transform: rotate(1deg);
	}
	100% {
	    right: -100vw;
	}
}

/*tv_boyフェードイン*/
.tv_boy.js-fade {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 1s,visibility 1s, transform 1s;
}
.finiwo .tv_boy.js-fade.scroll {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}
.tv_boy:nth-of-type(1){
	position: absolute;
  top: 23%;
  left: 23%;
  width: 8%;
  max-width: 148px;
  z-index: 6;
	transition: opacity 1s,visibility 1s, transform 1s;
}
.tv_boy:nth-of-type(2){
	position: absolute;
  bottom: 13%;
  left: 20%;
  width: 8%;
  max-width: 140px;
  z-index: 6;
  transition: opacity 1.2s,visibility 1.2s, transform 1.2s;
}
.tv_boy:nth-of-type(3){
	position: absolute;
  top: 22%;
  right: 25%;
  width: 8%;
  max-width: 104px;
  z-index: 6;
  transition: opacity 2.2s,visibility 2.2s, transform 2.2s;
}
.tv_boy:nth-of-type(4){
	position: absolute;
  bottom: 11%;
  right: 19%;
  width: 8%;
  max-width: 141px;
  z-index: 6;
  transition: opacity 2s,visibility 2s, transform 2s;
}
/*.js-fades{
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 5s,visibility 5s, transform 5s;
}
.scrolls {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}*/



/*会社案内*/
#company{
	padding: 115px 0 150px;
	position: relative;
	overflow: hidden;
}
#company .cont_title img{
	max-width: 171px;
	width: 12%;
	margin: 0 auto 55px;
}
.company_wrap{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
.company_cont{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}
.comtex{
	width: 42%;
}
.comtex img{
	max-width: 236px;
	margin-right: 10px;
}
.comtex p:nth-of-type(1){
	font-weight: bold;
	margin-bottom: 20px;
	font-size: 24px;
  line-height: normal;
  color: #834a2c;
}
.comtex p:nth-of-type(2){
	color: #a8854f;
	font-size: 20px;
}
.comtex a{
	text-decoration: none;
	pointer-events: none;
}
.comap{
	width: 55%;
	max-width: 540px;
}
.comap iframe{
	width: 100%;
	height: 300px;
	border-radius: 50px;
}
.compee{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
.compee_tex{
	width: 48%;
	border-bottom: solid 1px #a8854f;
	display: flex;
	justify-content: space-between;
}
.compee p{
	color: #a8854f;
	font-size: 20px;    
	padding: 13px 0 10px;
	width: 50%;
}



/*お問い合わせ*/
#contact{
	padding: 0px 0 115px;
	overflow: hidden;
	background-color: #fff6e1;
/*	border-radius: 60% 50% 0 0/25% 25% 0 0;*/
	position: relative;
	width: 100%;
}
/*#contact:before{
	content: '';
  background-image: url(../img/driving_road.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 12%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
}*/
#contact .cont_title img{
	max-width: 254px;
	width: 17%;
	margin: 0 auto 55px;
}
.contact_tex{
	text-align: center;
	position: relative;
	width: fit-content;
	margin: 0 auto;
}
.contact_tex:before{
	content: '';
	background-image: url(../img/contact_img2.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 20%;
	max-width: 127px;
	padding-top: 28%;
	position: absolute;
	left: -25%;
	bottom: 5%;
}
.contact_tex:after{
	content: '';
	background-image: url(../img/contact_img1.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 16%;
	max-width: 101px;
	padding-top: 11%;
	position: absolute;
	right: -19%;
	top: -45%;
}
.contact_tex p{
	color: #a8854f;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
.contact_tex a{
	background-color: #834a2c;
	max-width: 400px;
	width: 100%;
	color: #fff;
	padding: 20px;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
	border-radius: 50px;
	font-size: 22px;
	font-weight: bold;
	margin-top: 45px;
}
.drive_car{
	background-image: url(../img/driving_road.png);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 12%;
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.drive_car img{
	position: absolute;
	top: 0;
	max-width: 203px;
	width: 12%;
	animation: moveLeftToRight2 10s linear infinite;
}
@keyframes moveLeftToRight2 {
  0% {
    transform: translateX(100vw) translateY(-50%) rotate(8deg); /* 画面右端から開始 */
    top: 90%;
  }
  10%{
  	top: 60%;
  }
  18.75% {
  	top: 42%;
  }
  33.75% {
  	top: 29%;
  }
  41.25% {
  	top: 29%;
  }
  56.25% {
  	top: 42%;
  }
  67.5% {
    top: 65%;
  }
  75% {
  	transform: translateX(-100%) translateY(-50%) rotate(-22deg); /* 要素が完全に左に移動するまで */
    top: 95%;
    opacity: 1;
  }
  76% {
  	opacity: 0;
  }
  100% {
  	transform: translateX(-200%) translateY(-50%) rotate(-18deg); /* 要素が完全に左に移動するまで */
  }
}
@keyframes moveLeftToRight {
  0% {
    transform: translateX(100vw) translateY(-50%) rotate(5deg); /* 画面右端から開始 */
    top: 28%;
  }
  18.75% {
  	top: 14%;
  }
  33.75% {
  	top: 10%;
  }
  41.25% {
  	top: 10%;
  }
  56.25% {
  	top: 14%;
  }
  67.5% {
    top: 23%;
  }
  75% {
  	transform: translateX(-100%) translateY(-50%) rotate(-18deg); /* 要素が完全に左に移動するまで */
    top: 32%;
    opacity: 1;
  }
  76% {
  	opacity: 0;
  }
  100% {
  	transform: translateX(-200%) translateY(-50%) rotate(-18deg); /* 要素が完全に左に移動するまで */
  }
}


/*フッター*/
footer{
	background-color: #ff8400;
/*	padding: 60px 20px 30px;*/
	padding: 45px 20px 30px;
}
.footer_wrap{
	max-width: 1130px;
	margin: 0 auto;
	width: 100%;
	display: flex;
/*	justify-content: space-between;*/
	justify-content: center;
	align-items: flex-start;
}
.footer_logo{
	width: 32%;
/*	max-width: 361px;*/
	max-width: 240px;
}
.footer_cont{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 60%;
}
.footer_cont a{
	width: 32%;
	font-size: 20px;
	color: #fff;
	font-weight: bold;
	margin-bottom: 25px;
	display: flex;
	align-items: flex-end;
}
.footer_cont a:hover{
	color: #ffff00;
	opacity: 1;
}
.mugitvs{
	max-width: 226px;
	width: 32%;
}
.mugitvs a{
	width: 100%;
	background-color: #fcfcfc;
	padding: 5px 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ff8400;
	font-weight: bold;
	font-size: 18px;
	border-radius: 50px;
	text-align: center;
	box-sizing: border-box;
}
.mugitvs a:hover{
	background-color: #ffff00;
	color: #ff8400;
}
.mugitvs a img{
	max-width: 27px;
	margin-right: 10px;
}
.dum_f{
	width: 32%;
}
.rese{
/*	font-size: 18px;*/
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	text-align: center;
/*	margin-top: 65px;*/
	margin-top: 20px;
}




@media screen and (min-width: 1921px){
	.top_animation{
/*		background-position: top center;*/
		padding-top: 50%;
	}
	.top_waku:after{
		background-size: 100%;
	}
	.hmenu_wrap{
		bottom: 2%;
	}
	#about{
		padding-top: 85px;
	}
}
@media screen and (max-width: 1750px){
	.sc_cont p{
		font-size: 20px;
		line-height: 45px;
	}
}
@media screen and (max-width: 1650px){
	.sc_cont p{
		line-height: 38px;
	}
	.sc_img:nth-of-type(5){
		top: 19%;
	}
}
@media screen and (max-width: 1600px){
	.hmenu_wrap{
		bottom: -5%;
	}
	.top_animation{
		padding-top: 55%;
		background-size: 100%;
	}
	#about{
		padding-top: 11%;
	}
}
@media screen and (max-width: 1500px){
	/*ポップアップ等倍縮小　固定値（px） / 基準幅（1880px） × 100vw*/
	.hmenu_tec:nth-of-type(6){
		top: -0.46vw;
	}
	.sem{
		width: 0.2vw;
	}
	.hmenu_men:nth-of-type(7){
		top: -0.33vw;
	}
	#about {
    margin: 0 auto 2.6vw;
	}	
	#about .cont_title img{
		margin: 0 auto 2.6vw;
	}
	#about .cont_title p{
		margin-bottom: 2.6vw;
		font-size: 2.13vw;
	}
	.about_fuwawrap{
		padding-bottom: 7.66vw;
		max-width: 68vw;
	}
	.cont_text p {
    font-size: 1.33vw;
    line-height: 2.53vw;
    letter-spacing: 0.033vw;
	}
	#secret{
		padding: 0 1.33vw;
	}
	#item{
		margin-bottom: 7.66vw;
		padding: 6% 1.33vw 0;
	}
	#item .cont_title img{
		margin: 0 auto 2.66vw;
		width: 12%;
	}
	.item_wrap .splide__list{
		max-width: 68.66vw!important;
	}
	.item_cont{
		padding: 2vw 0.66vw 2.8vw;
	}
	.item_name {
    font-size: 2.13vw;
    margin-bottom: 0.66vw;
	}
	.item_cate p {
    font-size: 1.33vw;
    padding: 0.2vw 0.66vw;
    border-radius: 0.66vw;
    margin-bottom: 0.46vw;
	}
	.item_btn {
    border-radius: 3.33vw;
    max-width: 14vw;
    margin: 1vw auto 0;
    padding: 0.66vw 1.33vw;
	}
	.item_btn p{
		font-size: 1.2vw;
	}
	.item_yaji {
    right: 1vw;
    width: 1.46vw;
    height: 1.46vw;
	}
	.yajiji::before {
    width: 0.46vw;
    height: 0.46vw;
	}
	.yajiji {
    width: 0.8vw;
    height: 0.13vw;
	}
	.item_yaji:after {
    width: 1.6vw;
    height: 1.6vw;
	}
	.retu1 {
    margin: 0 2.4vw 0.46vw;
	}
	#secret .cont_title img{
		max-width: 19.26vw;
		margin: 0 auto 3.66vw;
	}
	.sc_wrap{
		padding: 7.66vw 0 10.66vw;
	}
	.sc_cont p{
		line-height: 2.53vw;
		font-size: 1.33vw;
	}


#tv{
	padding: 7.66vw 0;
}
#tv .cont_title img{
	margin: 0 auto 3.6vw;
	width: 14%;
}
.loop_tex{
	padding: 0.66vw;
	height: 7.4vw;
}
.loop_tex div{
	left: 0;
	height: 7.4vw;
	animation: 60s linear infinite waveMove;
	
}
.tv_vision img{
	max-width: 48.33vw;
}

@keyframes waveMove {
  0%     { background-position-x: 1921px;}
  100% { background-position-x: 0px;}
}

.caten{
  height: unset;
  padding-top: 62%;
}
.maku{
  height: unset;
  padding-top: 100%;
}
.maku div.makuLeft{
	height: unset;
	padding-top: 65%;
}
@keyframes makuLeft {
	20% {
	    left: -1.33vw;
	    transform: rotate(-1deg);
	}
	100% {
	    left: -100vw;
	}
}
.maku div.makuRight{
	height: unset;
	padding-top: 65%;
}
@keyframes makuRight {
	20% {
	    right: -1.33vw;
	    transform: rotate(1deg);
	}
	100% {
	    right: -100vw;
	}
}

.tv_boy:nth-of-type(1){
  top: 25%;
  left: 25%;
  width: 8%;
}
.tv_boy:nth-of-type(2){
  bottom: 13%;
  left: 16%;
  width: 8%;
}
.tv_boy:nth-of-type(3){
  top: 22%;
  right: 25%;
  width: 8%;
}
.tv_boy:nth-of-type(4){
  bottom: 11%;
  right: 15%;
  width: 8%;
}


#company{
	padding: 7.66vw 0 10vw;
}
#company .cont_title img{
	width: 12%;
	margin: 0 auto 3.66vw;
}
.company_wrap{
	max-width: 66.66vw;
}
.company_cont{
	margin-bottom: 2vw;
}
.comtex{
	width: 42%;
}
.comtex img{
	max-width: 15.73vw;
	margin-right: 0.66vw;
}
.comtex p:nth-of-type(1){
	margin-bottom: 1.33vw;
	font-size: 1.6vw;
}
.comtex p:nth-of-type(2){
	font-size: 1.33vw;
}
.comap iframe{
	height: 20vw;
	border-radius: 3.33vw;
}
.compee{
	max-width: 66.66vw;
}
.compee_tex{
	border-bottom: solid 0.06vw #a8854f;
}
.compee p{
	font-size: 1.33vw;    
	padding: 0.86vw 0 0.66vw;
	width: 50%;
}


#contact{
	padding: 0 0 7.66vw;
}
#contact .cont_title img{
	margin: 0 auto 3.66vw;
}
.contact_tex:before{
	width: 20%;
	padding-top: 28%;
	left: -25%;
	bottom: 5%;
}
.contact_tex:after{
	width: 16%;
	padding-top: 11%;
	right: -19%;
	top: -45%;
}
.contact_tex p{
	font-size: 1.33vw;
}
.contact_tex a{
	width: 61vw;
	max-width: 26.66vw;
	padding: 1.33vw;
	border-radius: 50px;
	font-size: 1.46vw;
	margin-top: 3vw;
}
.drive_car{
	/*top: 0;
	width: 12%;*/
	padding-top: 12.4%;
}

footer{
	padding: 3vw 1.33vw 2vw;
}
.footer_wrap{
	max-width: 75.33vw;
	width: 100%;
}
.footer_logo{
	width: 32%;
/*	max-width: 24.06vw;*/
	max-width: 16vw;
}
.footer_cont{
	width: 60%;
}
.footer_cont a{
	width: 32%;
	font-size: 1.33vw;
	margin-bottom: 1.66vw;
}
.mugitvs{
	max-width: 226px;
	width: 32%;
}
.mugitvs a{
	width: 100%;
	padding: 0.33vw 1vw;
	font-size: 1.2vw;
	border-radius: 3.33vw;
}
.mugitvs a img{
	max-width: 1.8vw;
	margin-right: 0.66vw;
}
.rese{
	font-size: 1.2vw;
	margin-top: 1.33vw;
}
}
@media screen and (max-width: 1400px){
	.mfp-inline-holder .mfp-content{
		max-width: 90vw;
	}
	.gallery-arrow-left:before{
		width: 20px;
		height: 33px;
		left: -3px;
/*		border-top: 8px solid #ff8e44;*/
/*    border-right: 8px solid #ff8e44;*/
	}
	.gallery-arrow-right:before{
		width: 20px;
		height: 33px;
		right: -3px;
/*		border-top: 8px solid #ff8e44;*/
/*    border-right: 8px solid #ff8e44;*/
	}
	.pop_mintitle{
		font-size: 2.8vw;
	}
}
@media screen and (max-width: 1350px){
	/*ポップアップ等倍縮小　固定値（px） / 基準幅（1350px） × 100vw*/
.mfp-inline-holder .mfp-content{
	max-width: 90vw;
}
.popy {
/*  max-width: 1760px;*/
/*	max-width: 93.33vw;*/
	width: 100%;
}
.popwrap{
	margin: 0 0 0 0;
  padding: 2.59vw 2.96vw 3.70vw;
	border-radius: 1.85vw;
}
.pop_top{
	padding-bottom: 1.48vw;
	margin-bottom: 2.22vw;
	border-bottom: solid 0.30vw #ff4343;
}
.pop_title img:nth-of-type(1){
	max-width: 27.70vw;
	margin-right: 1.11vw;
}
.pop_title img:nth-of-type(2){
	max-width: 47.04vw;
}
.noegg{
	border-radius: 0.74vw;
	padding: 1.11vw;
	max-width: 35.56vw;
}
.pop_top .noegg img:nth-of-type(1){
	max-width: 9.037vw;
}
.noegg p{
	font-size: 1.04vw;
}
.pop_img{
	height: 35.56vw;
	border-radius: 3.33vw;
}
.pop_mintitle{
/*	font-size: 2.96vw;*/
}
#pan2 .pop_mintitle{
	letter-spacing: -0.2vw;
}
.point{
	padding: 1.48vw 0;
}
.point img{
	max-width: 8.52vw;
	margin-right: 1.11vw;
}
.point p{
	font-size: 1.48vw;
}
.point p span{
	font-size: 1.18vw;
}
.popup-modal-dismiss{
	top: 1.48vw;
	right: 1.48vw;
	width: 2.96vw;
	height: 2.96vw;
}
.popup-modal-dismiss span{
	width: 1.11vw;
	height: 0.14vw;
}
.mfp-close{
  right: -0.74vw!important;
  top: -0.74vw!important;
}
.mfp-close-btn-in .mfp-close{
  width: 3.33vw;
  height: 3.33vw;
  line-height: 1.33vw;
}
.mfp-close{
	font-size: 1.33vw!important;
}
}
@media screen and (max-width: 1023px){
	.tb_sp{
		display: block;
	}
	.pc_only{
		display: none;
	}
	
	.top_waku a.top_logo_name{
		width: 24%;
		padding-top: 24%;
	}
	#about{
		padding-top: 13%;
	}
	#about:before{
		top: 20%;
	}
	#about .cont_title img{
		width: 32%;
		margin: 0 auto 3.2vw;
	}
	.about_fuwawrap{
		max-width: 90vw;
		padding-bottom: 10.66vw;
	}
	#about .cont_title p{
		font-size: 2.5vw;
		margin-bottom: 3.2vw;
	}
	.cont_text p{
		font-size: 1.7vw;
    line-height: 3.2vw;
	}
	.fuwa_about:nth-of-type(1){
		top: 10%;
		left: 6%;
		width: 9%;
	}
	.fuwa_about:nth-of-type(2){
		bottom: 10.5%;
		left: 5%;
		width: 10%;
	}
	.fuwa_about:nth-of-type(3){
		top: 23%;
		right: 5%;
		width: 10%;
	}
	.fuwa_about:nth-of-type(4){
		bottom: 14%;
		right: 8%;
		width: 6%;
	}

	#item{
		margin-bottom: 12.66vw;
	}
	.item_wrap .splide__list{
		max-width: 80vw!important;
	}
	#item .cont_title img {
      margin: 0 auto 3.2vw;
      width: 15%;
  }
	.item_name{
		font-size: 2.5vw;
		margin-bottom: 1vw;
	}
	.item_cate p{
		font-size: 1.6vw;
		margin-bottom: 1vw;
		padding: 0.2vw 1vw;
		border-radius: 1vw;
	}
	.item_btn p{
		font-size: 1.6vw;
	}
	.item_btn{
		max-width: 17vw;
	}

	#secret{
		overflow-x: clip;
	}
	.sc_cont p {
    line-height: 3.2vw;
    font-size: 1.7vw;
  }
  #secret .cont_title img {
    max-width: 22.26vw;
  }
  .sc_wrap {
     padding: 7.66vw 0 15.66vw;
  }
  .sc_img:nth-of-type(1){
  top: 7%;
  left: -4%;
  width: 30%;
}
.sc_img:nth-of-type(2){
  top: 38%;
  left: -3%;
  width: 16%;
}
.sc_img:nth-of-type(3){
  bottom: 9%;
  left: -5%;
  width: 26%;
}
.sc_img:nth-of-type(4){
  top: 5%;
  right: 10%;
  width: 18%;
}
.sc_img:nth-of-type(5){
  top: 23%;
  right: -3%;
  width: 22%;
}
.sc_img:nth-of-type(6){
  bottom: 8%;
  right: 2%;
  width: 22%;
}

#tv .cont_title img{
	width: 17%;
}
.tv_vision img {
    max-width: 60.33vw;
}
.tv_boy:nth-of-type(4){
	bottom: 10%;
	right: 12%;
}
.tv_boy:nth-of-type(3){
	top: 19%;
	right: 18%;
}
.tv_boy:nth-of-type(2){
	bottom: 10%;
  left: 12%;
}
.tv_boy:nth-of-type(1) {
  top: 24%;
  left: 17%;
}
.caten{
	background: url(../img/tvk_left_sp.png) no-repeat left top, url(../img/tvk_right_sp.png) no-repeat right top;
	background-size: contain;
	padding-top: 81%;
}
.maku div.makuLeft {
    padding-top: 83%;
}
.maku div.makuRight {
    padding-top: 83%;
}

#company {
  padding: 10.66vw 0 10vw;
}
#company .cont_title img{
	width: 15%;
	margin: 0 auto 4.2vw;
}
.comap iframe{
	height: 25vw;
}
.comtex img{
	max-width: 17.73vw;
}
.company_wrap{
	max-width: 80vw;
}
.comtex p:nth-of-type(2){
	font-size: 1.7vw;
}
.compee{
	max-width: 80vw;
}
.compee p{
	font-size: 1.7vw;
}
.contact_tex p{
	font-size: 1.7vw;
}
.comtex p:nth-of-type(1){
	font-size: 1.7vw;
}
.mfp-close-btn-in .mfp-close{
	width: 3.3vw;
	height: 3.3vw;
}
.mfp-close {
        font-size: 1.5vw !important;
    }
.contact_tex a{
	font-size: 2vw;
	margin-top: 4vw;
}
#contact .cont_title img{
	width: 22%;
}
.footer_wrap{
	max-width: 85vw;
}
.footer_cont a{
	font-size: 1.7vw;
}
.rese{
	font-size: 1.5vw;
}
}

@media screen and (max-width: 800px){
}
@media screen and (max-width: 700px) {
  .sp_only{
  	display: block;
  }
  .pc_tb{
  	display: none;
  }


	.headerman{
		z-index: unset;
		position: absolute;
	}
  .headerman,.headerman.active{
  	transform: unset;
  	background-color: unset;
    box-shadow: unset;
  }
  .headerman .header_wrapper{
  	opacity: 0;
  	transition: 0.7s;
/*  	background-color: #ff8500;*/
  	height: 55%;
  	max-height: 355px;
  	top: 25%;
  	flex-direction: column;
  	position: fixed;
    box-sizing: border-box;
    width: 100%;
    z-index: -1;
  }
  .headerman .header_wrapper.active{
  	opacity: 1;
    z-index: 20;
  }
  .hmenu_men{
  	filter: brightness(0) invert(1);
  }
  .hmenu_men:nth-of-type(1){
  	max-width: 36px;
		width: 100%;
  }
	.hmenu_men:nth-of-type(2){
		max-width: 155px;
		width: 100%;
	}
	.hmenu_men:nth-of-type(3){
		max-width: 71px;
		width: 100%;
	}
	.hmenu_men:nth-of-type(4){
		max-width: 121px;
		width: 100%;
	}
	.hmenu_men:nth-of-type(5){
		max-width: 71px;
		width: 100%;
	}
	.hmenu_men:nth-of-type(6){
		max-width: 107px;
		width: 100%;
	}
	.hmenu_men:nth-of-type(7){
		max-width: 47px;
		width: 100%;
		filter: unset;
		position: unset;
	}

  .hmenu_men {
	  opacity: 0;
	  transform: translateY(30px);
	  transition: opacity 0.4s ease, transform 0.4s ease;
	}
	.header_wrapper.active .hmenu_men {
	  opacity: 1;
	  transform: translateY(0);
	}
	.header_wrapper.active .hmenu_men:nth-of-type(1) { transition-delay: 0.5s; }
  .header_wrapper.active .hmenu_men:nth-of-type(2) { transition-delay: 0.6s; }
	.header_wrapper.active .hmenu_men:nth-of-type(3) { transition-delay: 0.7s; }
	.header_wrapper.active .hmenu_men:nth-of-type(4) { transition-delay: 0.8s; }
	.header_wrapper.active .hmenu_men:nth-of-type(5) { transition-delay: 0.9s; }
	.header_wrapper.active .hmenu_men:nth-of-type(6) { transition-delay: 1.0s; }
	.header_wrapper.active .hmenu_men:nth-of-type(7) { transition-delay: 1.1s; }


	
  #about{
  	padding-top: 7%;
  }
  #about .cont_title p {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .cont_text p{
  	font-size: 14px;
  	line-height: 1.7;
  }
  .about_fuwawrap{
  	padding-bottom: 130px;
  }
  .fuwa_about:nth-of-type(1){
		top: unset;
		bottom: 10%;
		left: 14%;
		width: 9%;
	}
	.fuwa_about:nth-of-type(2){
		bottom: 10.5%;
		left: 33%;
		width: 10%;
	}
	.fuwa_about:nth-of-type(3){
		top: unset;
		bottom: 10%;
		right: 33%;
		width: 10%;
	}
	.fuwa_about:nth-of-type(4){
		bottom: 14%;
		right: 14%;
		width: 6%;
	}

	.item_wrap .splide__list{
		max-width: 90vw!important;
	}
	.retu1 {
      margin: 0 22px 0.46vw;
  }
	.item_cate p{
		font-size: 1.8vw;
	}
	.item_btn p{
		font-size: 13px;
	}
	.item_btn{
		max-width: 123px;
	}

	#secret{
		padding: 0;
	}
	.sc_wrap{
		padding: 20px 0 50px;
	}
	.sc_cont{
		padding: 0 20px;
	}
	.sc_cont p{
		line-height: 1.7;
		font-size: 14px;
	}
	.sc_img_sp{
		margin-bottom: 45px;
		width: 100%;
	}
	.sc_img_sp:nth-of-type(2){
		margin-top: 45px;
		margin-bottom: 0;
	}

	.company_wrap{
		max-width: 90vw;
	}
	.comtex p:nth-of-type(2){
		font-size: 13px;
	}
	.comtex img {
    max-width: 21.73vw;
  }
  .comtex p:nth-of-type(1) {
    font-size: 13px;
  }
	.compee{
		max-width: 90vw;
	}
	.compee p{
		font-size: 13px;
	}

	.contact_tex p{
		font-size: 12px;
	}

	.footer_wrap{
		width: 90vw;
/*		flex-direction: column;*/
	}
	.footer_cont{
		width: 100%;
	}
	.footer_cont a{
		width: 48%;
		font-size: 12px;
		margin-bottom: 15px;
	}
	.footer_logo{
/*		margin-bottom: 20px;*/
		width: 40%;
		max-width: unset;
	}
	.dum_f{
		display: none;
	}
	.footer_cont .mugitvs{
		width: 100%;
		max-width: unset;
		order: 1;
	}
	.footer_cont .mugitvs a{
		width: 100%;
		padding: 5px 20px;
	}
}

@media screen and (max-width: 600px){
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}

	.top_animation{
		padding-top: 175%;
		background-size: cover;
		background-image: url(../img/top_animation_sp.gif);
	}
	.top_waku:after{
		background-image: url(../img/top_waku_sp.png?07);
		padding-top: 184%;
		background-size: 100%;
	}
	.top_waku a.top_logo_name{
		background-image: url(../img/mp_top_logom_sp.png);
    width: 37%;
    padding-top: 43%;
    max-width: 219px;
    left: -3%;
    top: -2%;
	}
	.scrolldown1{
		bottom: 8%;
	}
	.scrolldown1 img{
		width: 12%;
	}
	.sem{
		width: 1px;
		padding-top: 15%;
	}

	.fuwa_top:nth-of-type(1){
		top: 5%;
    left: 34%;
    width: 18%;
	}
	.fuwa_top:nth-of-type(2){
		top: unset;
    left: 26.5%;
    bottom: 1%;
    width: 17%;
	}
	.fuwa_top:nth-of-type(3){
		width: 20%;
	}
	.fuwa_top:nth-of-type(4){
		top: 37%;
    right: unset;
    left: 2%;
    width: 12%;
	}
	.fuwa_top:nth-of-type(5){
		top: 13%;
    right: 3%;
    width: 20%;
	}
	.fuwa_top:nth-of-type(6){
		top: 30%;
    right: 3%;
    width: 15%;
	}
	.fuwa_top:nth-of-type(7){
		width: 19%;
	}

	.kumo_top1{
		position: absolute;
		top: 24%;
    left: 20%;
    width: 17%;
		max-width: 141px;
		z-index: 0;
	}
	.kumo_top2{
		position: absolute;
		top: 32%;
    left: 13%;
    width: 13%;
		max-width: 135px;
		z-index: 0;
	}
	.kumo_top3{
		position: absolute;
		top: 31%;
    right: 11%;
    width: 11%;
		max-width: 95px;
		z-index: 0;
	}
	.kumo_top4{
		position: absolute;
		top: 25%;
    right: 21%;
    width: 15%;
		max-width: 161px;
		z-index: 0;
	}

	#about .cont_title img{
		max-width: 256px;
		width: 71%;
		margin: 0 auto 25px;
	}
	#item .cont_title img{
		max-width: 118px;
		width: 30%;
		margin: 0 auto 25px;
	}
	#secret .cont_title img {
    max-width: 201px;
    width: 51%;
    margin: 0 auto 30px;
	}
	#tv .cont_title img {
    max-width: 132px;
    width: 33%;
    margin: 0 auto 9%;
	}
	#company .cont_title img {
    max-width: 119px;
    width: 30%;
    margin: 0 auto 30px;
	}
	#contact .cont_title img {
    max-width: 177px;
    width: 45%;
    margin: 0 auto 30px;
	}

	#about{
		padding-top: 18%;
	}
	#about:before{
		top: 3%;
		right: 0%;
		width: 33%;
		padding-top: 33%;
	}
	#about:after{
		bottom: 0;
		left: 0%;
		width: 33%;
		padding-top: 33%;
	}
	#about .cont_title p{
		font-size: 23px;
	}
	.about_fuwawrap {
    padding-bottom: 40%;
 	}
  .fuwa_about:nth-of-type(1){
		top: unset;
		bottom: 10%;
		left: 6%;
		width: 14%;
		z-index: 1;
	}
	.fuwa_about:nth-of-type(2){
		bottom: 10.5%;
		left: 30%;
		width: 15%;
	}
	.fuwa_about:nth-of-type(3){
		top: unset;
		bottom: 10%;
		right: 30%;
		width: 15%;
	}
	.fuwa_about:nth-of-type(4){
		bottom: 14%;
		right: 6%;
		width: 12%;
	}
	.cont_text p,.sc_cont p{
		text-align: left;
		font-size: 16px;
		line-height: 1.9;
	}

	.item_cont {
      padding: 4.16vw 2.6vw 6.5vw;
  }
	.item_name{
		font-size: 6.4vw;
		margin-bottom: 1.5vw;
	}
	.item_cate p{
		font-size: 3.8vw;
  	margin-bottom: 1.33vw;
  	padding: 0.2vw 2.2vw;
  	border-radius: 2vw;
	}
	.item_btn p {
    font-size: 3.4vw;
  }
  .item_btn{
  	max-width: 38vw;
  	margin-top: 2.8vw;
  	border-radius: 50px;
  	padding: 1.5vw 1.5vw;
  }
	.retu1 {
      margin: 0 9.16vw 0.46vw;
  }

	.item_yaji {
	  right: 2.5vw;
	  width: 3.66vw;
	  height: 3.66vw;
	}
	.item_yaji:after {
	  width: 4vw;
	  height: 4vw;
	}
	.yajiji {
	  width: 2vw;
	  height: 0.33vw;
	}
	.yajiji::before {
	  width: 1.16vw;
	  height: 1.16vw;
	}
	.splide__pagination{
		bottom: -7%!important;
	}
	.mfp-inline-holder .mfp-content{
		max-width: 85vw;
	}
	.gallery-arrow-left:before{
		width: 17px;
		height: 28px;
/*		border-top: 6px solid #ff8e44;*/
/*    border-right: 6px solid #ff8e44;*/
	}
	.gallery-arrow-right:before{
		width: 17px;
		height: 28px;
/*		border-top: 6px solid #ff8e44;*/
/*    border-right: 6px solid #ff8e44;*/
	}
	.gallery-arrow-left{
		left: 2.5%;
	}
	.gallery-arrow-right{
		right: 2.5%;
	}

	#item{
		padding: 15% 0 9%;
		margin-bottom: 70px;
	}

  .pop_top{
  	flex-direction: column;
  }
  .pop_title{
  	flex-direction: column;
  	width: 100%;
  }
  .pop_title img:nth-of-type(1){
  	width: 80%;
  	max-width: unset;
  	margin-right: 0;
  	margin-bottom: 12px;
  }
  .pop_title img:nth-of-type(2){
  	max-width: unset;
  	margin-bottom: 15px;
  }
  #pan2 .pop_title img:nth-of-type(1){
  	width: 80%;
  	max-width: 132px;
  	margin: 0 0 12px;
  }
  .noegg{
  	border-radius: 10px;
  	max-width: unset;
  	width: 100%;
  	padding: 10px;
  }
  .noegg p{
  	font-size: 12px;
  	line-height: 1.5;
  }
  .popwrap{
  	padding: 30px 20px 25px;
  	border-radius: 20px;
  	margin: 0 0 0 0;
  	max-height: 80vh !important;
  }
  .pop_top .noegg img:nth-of-type(1){
  	max-width: unset;
  }
  .pop_top{
  	padding-bottom: 15px;
  	margin-bottom: 15px;
  }
  .pop_bottom{
  	flex-direction: column;
  }
  .pop_img{
  	background-image: url(../img/pan_img1sp.png);
  	width: 100%;
    background-size: contain;
    padding-top: 19%;
  }
  .pop_tex{
  	width: 100%;
  }
  .pop_mintitle{
/*  	font-size: 5.5vw;*/
		font-size: 5vw;
  	margin-top: 10px;
  	text-align: center;
  }
  .mfp-close-btn-in .mfp-close{
  	width: 35px;
  	height: 35px;
  	top: -10px!important;
  	right: -10px!important;
  	font-size: 14px !important;
  }
  .point{
  	padding: 10px 0;
  }
  .point img{
  	max-width: 75px;
  	width: 100%;
  	margin-right: 18px;
  }
  .point p{
  	font-size: 14px;
  }
  .point p span{
  	font-size: 12px;
  }

	#secret:before{
		height: 10px;
		top: -10px;
	}
	.sc_wrap {
    padding: 30px 0 65px;
 	}

 	#tv{
 		padding: 26% 0 40%;
 	}
 	.caten{
		background: url(../img/tvk_left_sp.png) no-repeat left -4.33vw top, url(../img/tvk_right_sp.png) no-repeat right -4.33vw top;
		background-size: contain;
 		padding-top: 162%;
 	}
 	.maku div.makuLeft,.maku div.makuRight{
 		padding-top: 162%;
 	}
 	.tv_vision img{
 		max-width: 77vw;
 	}
 	.tv_boy:nth-of-type(1){
	  top: 28%;
	  left: 13%;
	  width: 18%;
	  z-index: 0;
	}
	.tv_boy:nth-of-type(2){
	  bottom: 8%;
	  left: 19%;
	  width: 20%;
	}
	.tv_boy:nth-of-type(3){
	  top: 26%;
	  right: 17%;
	  width: 14%;
	  z-index: 0;
	}
	.tv_boy:nth-of-type(4){
	  bottom: 9%;
	  right: 17%;
	  width: 19%;
	}

 	.company_cont{
 		flex-direction: column;
 		margin-bottom: 40px;
 	}
 	#company {
    padding: 90px 0 5%;
  }
 	.comtex img{
 		max-width: 180px;
 	}
 	.comtex p:nth-of-type(1){
 		font-size: 18px;
 	}
 	.comtex p:nth-of-type(2){
 		font-size: 14px;
 	}
 	.comap{
 		width: 100%;
 	}
 	.comap iframe {
    height: 220px;
 	}
 	.comtex{
 		width: 100%;
 		margin-top: 15px;
 	}
 	.compee_tex{
 		width: 100%;
 	}
 	.compee p{
 		font-size: 14px;
 		padding: 15px 0 6px;
 	}

 	#contact {
    padding: 0px 0 155px;
  }
 	.contact_tex{
 		padding: 0 20px;
 	}
 	.contact_tex p{
 		font-size: 16px;
 	}
 	.contact_tex a{
 		font-size: 18px;
 		margin-top: 30px;
 		width: 100%;
 		max-width: 230px;
 		padding: 10px;
 	}
 	.contact_tex:before{
 		left: 41%;
 		bottom: -60%;
 	}
 	.contact_tex:after{
 		right: 16%;
    bottom: -30%;
    top: unset;
 	}
 	.drive_car{
 		margin-bottom: 7%;
 		background-image: url(../img/driving_road_sp.png);
 		padding-top: 26%;
 	}
 	.drive_car img{
 		width: 21%;
 	}
 	@keyframes moveLeftToRight2 {
  	0% {
  	  transform: translateX(100vw) translateY(-50%) rotate(8deg); /* 画面右端から開始 */
  	  top: 88%;
  	}
  	10%{
  		top: 78%;
  	}
  	18.75% {
  		top: 68%;
  	}
  	33.75% {
  		top: 62%;
  	}
  	41.25% {
  		top: 62%;
  	}
  	56.25% {
  		top: 68%;
  	}
  	67.5% {
  	  top: 78%;
  	}
  	75% {
  		transform: translateX(-100%) translateY(-50%) rotate(-22deg); /* 要素が完全に左に移動するまで */
  	  top: 88%;
  	  opacity: 1;
  	}
  	76% {
  		opacity: 0;
  	}
  	100% {
  		transform: translateX(-200%) translateY(-50%) rotate(-22deg); /* 要素が完全に左に移動するまで */
  	}
	}

 	footer {
    padding: 30px 20px 20px;
 	}
 	.footer_logo{
/* 		margin-bottom: 25px;*/
/*		max-width: 210px;*/
 		width: 100%;
 		max-width: 160px;
 	}
 	.footer_cont a{
 		font-size: 14px;
 	}
 	.mugitvs a{
    margin-top: 10px;
 	}
 	.mugitvs a img {
    max-width: 20px;
    margin-right: 5px;
  }
  .rese{
  	font-size: 12px;
  }
}