/* CSS Document */

html{
	overflow: auto;
}
html.scrollHidden {
	overflow: hidden; 
}
p{
	font-weight: 500;
}
#wrap #content p{
	margin-bottom: 0;
	line-height: 1.5;
}

img{
	border: 0;
    vertical-align: bottom;
	width: auto;
    max-width: 100%;
}
*:focus {
  outline: none;
}

#wrap #content a{
	display: block;
}
a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}
sub{
	vertical-align: baseline;
}
.dpc{
	display: block;
}
.dsp{
	display: none;
}
picture{
	display: block;
}
#wrap #content{
	color: #5d370c;
	font-family: YakuHanJP_Noto, "Noto Sans JP", sans-serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic" !important;
	width: 100%;
	background: url("../image/gungun_pattern01.png") repeat;
}
#wrap #content .inner{
	width: 100%;
}
#wrap #content section{
	width: 1020px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 75px;
}

#tplRequireProductInfo #tplRequireProductInfoWrap section{
	width: 740px;
}

#wrap #content h2{
	margin-bottom: 0;
}
#wrap #content p.att{
	font-size: 12px;
}
.content_inner{
	text-align: center;
	margin: 0 auto;
	background: url("../image/bg_figure011.png") no-repeat top -74px center;
}
span.red{
	color: #e60039;
}
.flex{
	display: flex;
	justify-content: space-between;
}
/*

nav
*/
.gungun_nav{
	display: none;
	position: fixed;
	width: 100%;
	height: 70px;
	top: 0;
	left: 0;
	right: 0;
	background: #0062b2;
	z-index:8888;
}
.gungun_nav .inner{
	height: 100%;
}
.gungun_nav .inner .flex{
	height: 100%;
	justify-content: center;
	align-items: center;
}
.gungun_nav .inner .flex a{
	padding: 5px 40px;
	border-right: solid 1px #fff;
}
.gungun_nav .inner .flex a:last-of-type{
	border: none;
}
/*//nav
*/
.gungun_mv{
	width: 1150px;
	text-align: center;
	margin: 0 auto;
	background: url('../image/gungun_main.png') no-repeat center top 55px;
	background-size: contain;
}
.gungun_mv .mv_inner{
	padding: 45px 0 0;
	height: 750px;
}
.gungun_mv .ri .top{
	position: relative;
    left: 128px;
    top: -34px;
}
.gungun_mv .ri{
	width: 740px;
	height: 100%;
	display: flex;
	justify-content: space-between;
    margin: 0 100px 0 auto;
    flex-direction: column;
	align-items: center;
}
.gungun_mv .btm{
	position: relative;
	margin: 0 0 50px auto;
}

.gungun_mv .btm a:hover::after{
	display: block;
    position: absolute;
    width: 405px;
    height: 155px;
    top: 0;
    content: '';
    background: url("../image/btn_movie1.png") no-repeat;
    -webkit-filter: brightness(0) invert(1) opacity(70%);
    filter: brightness(0) invert(1) opacity(70%);
    opacity: 0.4;
}

.mv_nav{
	max-width: 1150px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto 60px;
}

.product_contents .inner{
	width: 100%;
	margin: 0 auto;
}

/*////

sec01

////*/

.product_contents{
	background: url("../image/bg_figure021.png") no-repeat top 70px center;
}

#wrap #content section.sec01 h2{
	margin-bottom: 50px;
}
#wrap #content section.sec01{
	margin-bottom: 10px;
}
.sec01 .graph_box{
	position: relative;
}
.sec01 .graph_box::after{
   content: "";
   display: block;
   clear: both;
}
.sec01 .graph_box > div.left{
	position: absolute;
	left: 0;
	width: 52%;
	z-index: 1;
}
.sec01 .graph_box > div.right{
	width: 50%;
	z-index: 2;
	margin-bottom: 50px;
}
.sec01 .graph_box .pnt_box{
	background: #fffcfd;
	border-radius: 20px;
	padding: 30px 35px;
	text-align: left;
	box-shadow: 0px 0px 31px -7px rgba(0,98,178,0.3);
}
.sec01 .graph_box .pnt_box .main_ttl{
	text-align: center;
	margin-bottom: 20px;
}
.sec01 .graph_box .pnt_box picture:not(.main_ttl) img{
	width: auto;
	height: 25px;
	margin-bottom: 3px;
}
#wrap #content .sec01 .graph_box .pnt_box p{
	margin-bottom: 15px;
	letter-spacing: 1px;
}
#wrap #content .sec01 .graph_box .pnt_box p.mb0{
	margin-bottom: 2px;
}
#wrap #content .sec01 .graph_box .pnt_box p.att{
	color: #735d42;
	text-indent: -12px;
    padding-left: 12px;
	letter-spacing: -0.9px;
}
#wrap #content .sec01 .graph_box .pnt_box p:last-of-type{
	margin-bottom: 0;
}
.sec01 .graph_box .att_area{
	text-align: left;
	margin-top: 15px;
}
#wrap #content .sec01 .graph_box .att_area p{
	font-size: 12px;
	text-indent: -24px;
	padding-left: 24px;
}
#wrap #content .sec01 .graph_box .att_area p sub{
	vertical-align: baseline;
}
#wrap #content section.sec01 .movie_area{
	padding-top: 10px;
}
#wrap #content section.sec01 .movie_area h3{
	margin-bottom: 0;
}
.sec01 .movie_area .btn_box{
	position: relative;
	top: -10px;
	cursor: pointer;
}
.sec01 .movie_area .btn_box .btn{
	cursor: pointer;
	width: 78px;
	height: 78px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.sec01 .movie_area .btn_box:hover{
	opacity: 0.8;
}
.sec01 .movie_area .btn_box a img:hover{
	opacity: inherit;
}
/*////

sec02

////*/
#wrap #content section.sec02 h2{
	margin-bottom: 7px;
}
#wrap #content section.sec02 .inner{
	position: relative;
	z-index: 2;
}
#wrap #content .sec02 p.sub{
	letter-spacing: 1px;
	margin-bottom: 30px;
}
.sec02 .point_box{
	background: #fff;
	border-radius: 20px;
	margin-bottom: 30px;
	box-shadow: 0px 0px 31px -7px rgba(0,98,178,0.3);
}
.sec02 .point_box .ttl_area{
	padding: 30px 0;
}
.sec02 .point_box .exp_area{
	padding: 25px 60px 40px;
}
.sec02 .point_box.p02 .exp_area picture.image{
	padding-top: 20px;
}
#wrap #content .sec02 .point_box.p01 .exp_area p.att{
	padding-top: 13px;
}

.sec02 .point_box.p01 .exp_area .flex{
	padding-top: 40px;
	justify-content: center;
	align-items: flex-end;
}
.sec02 .point_box.p01 .exp_area .flex .le{
	margin-right: 20px;
}
.sec02 .point_box.p01 .exp_area .flex .ri{
	position: relative;
}

#wrap #content .sec02 .point_box.p01 .exp_area .flex .le p.att{
	text-align: left;
	padding-top: 15px;
}
#wrap #content .sec02 .point_box.p01 .exp_area .flex .le p.att.pt0{
	padding-top: 0;
}
#wrap #content .sec02 .point_box.p01 .exp_area .flex .ri .note_area{
	position: absolute;
	left: 25px;
	bottom: 25px;
}
#wrap #content .sec02 .point_box.p01 .exp_area .flex .ri p.att{
	text-align: left;
	padding-top: 0;
}


.sec02 .point_box.p02 .exp_area .flex{
	justify-content: center;
	align-items: center;
	text-align: left;
}
.sec02 .point_box.p02 .exp_area .flex > div{
	width: 50%;
}
.sec02 .point_box.p02 .exp_area .flex .le{
	margin-right: 40px;
}
.sec02 .point_box.p02 .exp_area .flex .le p.att{
	padding-top: 10px;
	text-indent: -24px;
	padding-left: 24px;
}
.sec02 .point_box.p02 .exp_area .flex .ri p.att{
	text-indent: -24px;
	padding: 15px 0 0 24px;
	position: relative;
	left: 37px;
}
.sec02 .point_box.p02 .exp_area .flex .ri p.att.pt0{
	padding-top: 5px;
}

.sec02 .point_box.p03 .flex{
	padding: 50px 0 45px;
	justify-content: center;
	align-items: center;
}
.sec02 .point_box.p03 .flex .le{
	width: 430px;
	margin-right: 30px;
}
.sec02 .point_box.p03 .flex .ri .image{
	margin-bottom: 5px;
}
.sec02 .point_box.p03 .exp_area{
	padding: 0;
}
#wrap #content .sec02 .point_box.p03 p.att{
	text-indent: -12px;
	padding :10px 0 0 12px;
	line-height: 1.2;
}
.sec02 .point_box.p04 .exp_area .flex{
	justify-content: center;
	padding: 25px 0 15px;
}
.sec02 .point_box.p04 .exp_area .flex .le{
	margin-right: 45px;
}
#wrap #content .sec02 .point_box.p04 p.att{
	text-align: left;
	text-indent: -24px;
	padding-left: 24px;
	margin-left: 10px;
}
#wrap #content .sec02 .point_box.p04 p.att sub{
	vertical-align: baseline;
}
.sec02 .point_box.p04 .exp_area .btm{
	position: relative;
	padding-top: 30px;
}
.sec02 .point_box.p04 .exp_area .btm p.att{
	position: absolute;
	left: 104px;
	bottom: 65px;
}

.sec02 .point_box.p05 .exp_area .image{
	padding: 25px 0 10px;
}
.sec02 .point_box.p05 .exp_area p.att{
	padding-top: 5px;
}


.sec02 .point_box.p01 .ttl_area{
	background: url("../image/pattern011.png") repeat;
	border-radius :20px 20px 0 0;
}
.sec02 .point_box.p02 .ttl_area{
	background: url("../image/pattern021.png") repeat;
	border-radius :20px 20px 0 0;
}
.sec02 .point_box.p03 .ttl_area{
	padding: 30px 40px;
	background: url("../image/pattern031.png") repeat;
	border-radius :10px;
	margin-bottom: 30px;
}
.sec02 .point_box.p04 .ttl_area{
	border-radius :20px 20px 0 0;
	background: url("../image/pattern04.png") repeat;
}
.sec02 .point_box.p05 .ttl_area{
	background: url("../image/pattern05.png") repeat;
	border-radius :20px 20px 0 0;
}

.sec02 .point_box.p05 .exp_area{
	padding-bottom: 30px;
}
/*////

sec03

////*/
#wrap #content section.sec03{
	position: relative;
	z-index: 1;
}
section.sec03::after{
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -70px;
  background: url(../image/gungun_pattern01.png) repeat;
	width: 100vw;
min-height: 300px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
border-bottom-right-radius: 2000px 300px;
border-bottom-left-radius: 2000px 300px;
padding-left: 200px;
padding-right: 200px;
	z-index: -1;
}
section.sec03 .inner{
	z-index: 1;
}

.sec03 .aco-btn{
	cursor: pointer;
	position: relative;
	height: 74px;
	background: #0062b2;
	border-radius: 100vh;
	z-index: 2;
}
.sec03 .aco-btn:hover{
	opacity: 0.8;
}
.sec03 .aco-btn picture{
	position: absolute;
	width: 100%;
	height: fit-content;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
.sec03 .aco-btn .icon{
	position: absolute;
	display: inline-block;
	width: 45px;
	height: 45px;
	top: 0;
	bottom: 0;
	background: #fffcfc;
	border-radius: 50%;
	right: 20px;
	margin: auto 0;
}
.sec03 .aco-btn .icon span{
	display: inherit;
	position: relative;
	height: 45px;
	transition: .2s ease-in;
}
.sec03 .aco-btn .icon span::before,.sec03 .aco-btn .icon span::after{
  display: block;
  content: '';
  background: #0062b2;
  border-radius: 10px;
  position: absolute;
  width: 26px;
  height: 5px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.sec03 .aco-btn .icon span::before{
  width: 5px;
  height: 26px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.sec03 .aco-btn.active .icon span::before{
	opacity: 0;
}

.sec03 .aco-btn.active:hover{
	opacity: 1;
}
.sec03 .aco-btn.active:hover::before{
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 100vh;
	background: #fff;
	opacity: 0.4;
	z-index: 3;
}
.sec03 .aco-table{
	display: none;
	position: relative;
	top: -38px;
}
#wrap #content .sec03 .aco-table .inner{
	width: auto;
	background: #fff;
	padding: 65px 60px 40px;
	border-radius: 0 0 20px 20px;
	box-shadow: 0px 0px 31px -7px rgb(0 98 178 / 30%);
}
.sec03 .aco-table .mtr_area{
	background: #f6fcff;
	margin-bottom: 20px;
}
#wrap #content .sec03 .aco-table .mtr_area .ttl{
	background: #74c5eb;
	color: #fff;
	height: 46px;
	font-size: 22px;
	line-height: 46px;
	border-radius: 4px 4px 0 0;
}
.sec03 .aco-table .mtr_area .txt{
	padding: 20px;
	text-align: left;
	font-size: 15px;
	border-radius: 0 0 4px 4px;
	border-right: solid 2px #74c5eb;
	border-left: solid 2px #74c5eb;
	border-bottom: solid 2px #74c5eb;
}
#wrap #content .sec03 .aco-table .mtr_area .txt sub {
    vertical-align: baseline;
	font-size: 10px;
}

/*
table*/

.sec03 table{
	border-collapse: separate;
	border: none;
}
.sec03 td,.sec03 th {
	font-weight: 500;
	line-height: 1.1;
	border-bottom: 2px solid #74c5eb;
	border-right: 2px solid #74c5eb;
	border-collapse: collapse;
}
.sec03 table.top tr > td:first-of-type {
    border-left: 2px solid #74c5eb;
}
.sec03 table.top tr > td:last-of-type{
	border-right: 2px solid #74c5eb;
}
.sec03 table.top tr:last-of-type > td:first-of-type{
	border-radius: 0 0 0 4px;
}
.sec03 table.top tr:last-of-type > td:last-of-type{
	border-radius: 0 0 4px 0;
}
.sec03 table.btm tr:first-of-type > td:first-of-type{
	border-radius: 4px 0 0 0;
}
.sec03 table.btm tr:first-of-type > td:last-of-type{
	border-radius: 0 4px 0 0;
}
.sec03 table.btm tr:first-of-type > td{
	border-top: 2px solid #74c5eb;
}
.sec03 table.btm tr > td:first-of-type {
    border-left: 2px solid #74c5eb;
}
.sec03 table.btm tr:last-of-type > td:first-of-type{
	border-radius: 0 0 0 4px;
}

.sec03 table.top tr > td.radi{
	border-radius: 0 0 4px 0;
}

.sec03 table.btm tr > td.radi{
	border-radius: 0 0 4px 0;
}


.sec03 td,.sec03 th{
	height: 50px;
}
.sec03 th {
	background: #f0e6cc;
}
.sec03 .aco-table .table_area{
	margin-bottom: 30px;
}
.sec03 .aco-table .table_area table{
	font-size: 18px;
	width: 100%;
    table-layout: fixed;
	border-radius: 4px;
}
.sec03 table .ttl td{
	font-size: 22px;
	background: #74c5eb;
	height: 46px;
	line-height: 46px;
	color: #fff;
	border-radius: 4px 4px 0 0;
}
.sec03 table .ttl td span{
	font-size: 16px;
}
.sec03 table td.comp{
	background: #f6fcff;
}
.sec03 table.top{
	margin-bottom: 10px;
}
.sec03 table.btm{
	border: none;
}
.sec03 .aco-table .table_area table td sub{
	vertical-align: baseline;
	font-size: 12px;
}

.sec03 table.top tr > td.lst{
	border-bottom: none;
	border-right: none;
	background: none;
}
.sec03 table.top tr > td.val.lst{
	border-left: none;
}
.sec03 table.btm tr > td.lst{
	border-bottom: none;
	border-right: none;
	background: none;
}
.sec03 table.btm tr > td.val.lst{
	border-left: none;
}
.sec03 table.btm tr > td.lst.bl0{
	border-left: none;
}
.sec03 .aco-table .others_area{
	text-align: left;
	margin-bottom: 5px;
}
#wrap #content .sec03 .aco-table .others_area p.ttl{
	font-size: 20px;
	color: #74c5eb;
	margin-bottom: 5px;
}
#wrap #content .sec03 .aco-table .others_area p.txt{
	margin-bottom: 20px;
}
#wrap #content .sec03 .aco-table .others_area p.txt:last-of-type{
	margin-bottom: 30px;
}

.sec03 .aco-table .allergen_btn{
	display: inline-block;
	width: 100%;
    height: 66px;
    border-radius: 100vh;
	background: #cddce7;
	z-index: 0;
}
.sec03 .aco-table .allergen_btn div{
	position: relative;
	top: -4px;
    height: 66px;
    background: #0062b2;
    color: #fff;
    border-radius: 100vh;
    letter-spacing: 1px;
	z-index: 1;
}
.sec03 .aco-table .allergen_btn div:hover{
	opacity: 0.8;
}

#wrap #content .sec03 .aco-table .allergen_btn div p{
	display: inline-block;
    font-size: 22px;
    line-height: 66px;
	position: relative;
	
}
.sec03 .aco-table .allergen_btn div p::before{
	content: '';
	position: absolute;
	display: inline-block;
	top: 0;
	bottom: 0;
	left: -20px;
	width: 11px;
	height: 13px;
	margin: auto 0;
	background: url("../image/gungun_icon02.png") no-repeat;
	background-size: contain;
}

/*////

sec04

////*/
#wrap #content section.sec04{
	width: 100%;
	padding: 130px 0 80px;
	background: url('../image/gungun_pattern02.png') repeat;
}
section.sec04 .flex{
	justify-content: center;
	align-items: flex-start;
}
#wrap #content section.sec04 .flex p{
	font-size: 19px;
}
section.sec04 .flex.top .le{
	position: relative;
	top: -40px;
	margin-right: 60px;
}
section.sec04 .flex.top .ri{
	position: relative;
	left: -40px;
	padding-top: 30px;
}
section.sec04 .flex.btm{
	margin-bottom: 30px;
}
section.sec04 .flex.btm .le{
	position: relative;
	top: -30px;
	margin-right: 50px;
}
section.sec04 .flex.btm .ri{
	position: relative;
	padding-top: 40px;
}
section.sec04 .flex.btm .ri p{
	position: relative;
    top: -20px;
}
section.sec04 .flex.btm .ri .btn_recipe{
	position: absolute;
	left: 83px;
    bottom: 82px;
}

section.sec04 .flex.btm .ri a:hover .btn_recipe picture{
	position: relative;
}
section.sec04 .flex.btm .ri a:hover .btn_recipe picture::after{
	display: block;
    position: absolute;
    width: 405px;
    height: 155px;
    top: 0;
    content: '';
    background: url(../image/btn_recipe1.png) no-repeat;
    -webkit-filter: brightness(0) invert(1) opacity(70%);
    filter: brightness(0) invert(1) opacity(70%);
    opacity: 0.4;
}
/*////

sec05

////*/
#wrap #content section.sec05{
	padding-top: 60px;
}
#wrap #content section.sec05 h2{
	margin-bottom: 10px;
}
#wrap #content section.sec05 a p.txt{
	position: relative;
	font-size: 15px;
	display: inline-block;
	letter-spacing: 1px;
	margin-bottom: 30px;
	color: #5d370c;
}
#wrap #content section.sec05 p.txt::before{
	position: absolute;
	content: '';
	display: inline-block;
	width: 100%;
	height: 1px;
	background: #5d370c;
	right: 0;
	left: 0;
	bottom: -5px;
	margin: 0 auto;
}
#wrap #content .sec05 .product_linkarea > p{
	margin-bottom: 5px;
}
#wrap #content .sec05 .product_linkarea > p:nth-of-type(2){
	margin-bottom: 10px;
}
#wrap #content .sec05 .product_linkarea > p:nth-of-type(3){
	margin-bottom: 50px;
}
.bread_area{
	width: 100%;
	background: url(../image/gungun_pattern01.png) repeat;
	padding-bottom: 30px;
	border-bottom: solid 1px #e7e7e7;
}
#brand_footer{
	border-top: none;
}
.group-breadcrumbs{
	margin-bottom: 0;
}

/*----------------

youtube-modal

----------------*/
#wrap #content .overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    display: none;
}
#wrap #content .overlay .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#wrap #content .overlay .close {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
	right: -35px;
    top: -35px;
    cursor: pointer;
    color: #fff;
    background: url(../image/modal_close.png) no-repeat;
    background-size: contain;
}
@media only screen and (max-width: 768px){
	
	#wrap #content .overlay .close{
		width: 4vw;
		height: 4vw;
		right: 0;
    	top: -6vw;
	}

}
/*----------------

///youtube-modal

----------------*/

/*----------------

animation

----------------*/
/*

top-anime
*/

.top_anime{
	animation-name:topAnime;
	animation-duration:0.7s;
	animation-delay: 0.2s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-out;
	opacity:0;
}

@keyframes topAnime{
  from {
    opacity: 0;
  transform: translateY(40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.top_bal{
  transform: scale(0);
}
.top_bal.active{
  	animation-name:top-bal-anime;
	animation-duration:0.6s;
	animation-fill-mode:forwards;
	animation-timing-function: ease;
}

@keyframes top-bal-anime{
  from {
  transform: scale(0);
  }

  to {
      transform: scale(1);
  }
}
/*

scroll-anime
*/
.fade-in{
	opacity:0;
}
.fade-in.active{
	animation-name:fadein;
	animation-duration:1s;
	animation-delay: 0.4s;
	animation-fill-mode:forwards;
}

@keyframes fadein{
  from {
    opacity: 0;
  transform: translateY(50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.blur-in{
	opacity: 0;
}
.blur-in.active{
	animation-name:blurin;
	animation-duration:0.9s;
	animation-fill-mode:forwards;
	animation-timing-function: ease-out;
}

@keyframes blurin{
  from {
    opacity: 0;
	filter: blur(80px);
  }

  to {
    opacity: 1;
	filter: blur(0);
  }
}
/*----------------

///animation

----------------*/

@media screen and (max-width: 1150px){
	.mv_nav > div{
		margin-right: 10px;
	}	
	.mv_nav > div:last-child{
		margin-right: 0
	}
}

@media screen and (max-width: 1024px){
	.gungun_mv{
		width: 107%;
	}
	.gungun_mv{
		background: url('../image/gungun_main.png') no-repeat left -22px top 80px;
		background-size: contain;
	}
	#wrap #content section{
		padding: 0;
	}
	
}

@media screen and (max-width: 1020px){
	.mv_nav{
		width: 1020px;
	}
	.gungun_nav{
		width: 1020px;
	}
}


@media screen and (max-width: 768px){
	
	a:hover{
		opacity: 1;
	}
	a img:hover{
		opacity: 1;
	}
	
	#wrap #content{
		width: 100%;
		overflow-x: hidden;
	}
	#wrap #content p{
		font-weight: 500;
		font-size: 3.4vw;
		padding: 0;
	}
	#wrap #content p.att{
		font-size: 2.6vw;
	}
	
.dpc{
	display: none;
}
.dsp{
	display: block;
}
	.gungun_nav{
		width: 100%;
		height: 13.33vw;
		line-height: 1;
	}
	.gungun_nav .inner .flex a{
		position: relative;
		padding: 0 3vw;
		border: none;
	}
	.gungun_nav .inner .flex a::after{
		position: absolute;
		display: inline-block;
		content: '';
		bottom: 0;
    	right: 0;
		top: 0;
		margin: auto 0;
		width: 1px;
		height: 3.4vw;
		background: #fff;
	}
	.gungun_nav .inner .flex a:last-of-type::after{
		display: none;
	}
	.content_inner {
    text-align: center;
    margin: 0 auto;
    background: url(../image/bg_figure01_sp1.png) no-repeat top -6.6vw center;
		background-size: contain;
}
	.gungun_mv{
		width: 100%;
		background: url(../image/gungun_main_sp.png) no-repeat top 4vw center;
		background-size: contain;
	}
	.gungun_mv .mv_inner {
    padding: 16.5vw 0 0;
    height: 140vw;
}
	.gungun_mv .ri .top{
		position: initial;
		width: 74.9vw;
		margin: 0 auto;
		padding-top: 1vw;
	}
	.gungun_mv .ri{
		width: 76.5vw;
		margin: 0 auto;
	}
	.gungun_mv .btm{
		position: initial;
		margin-bottom: 7vw;
	}
	.gungun_mv .btm a:hover::after{
		display: none;
	}
	.mv_nav{
		width: auto;
		margin-bottom: 6vw;
		flex-wrap: wrap;
		justify-content: center;
		
	}
	.mv_nav > div:first-child{
		width: 20vw;
		margin-right: 1.6vw;
		margin-bottom: 2.7vw;
	}
	.mv_nav > div:nth-child(2){
		width: 33.3vw;
		margin-right: 1.6vw;
		margin-bottom: 2.7vw;
	}
	.mv_nav > div:nth-child(3){
		width: 35.7vw;
		margin-bottom: 2.7vw;
		margin-right: 0;
	}
	.mv_nav > div:nth-child(4){
		width: 38.6vw;
		margin-right: 1.6vw;
	}
	.mv_nav > div:nth-child(5){
		width: 33.3vw;
		margin-right: 0;
	}
	.product_contents{
		background: none;
	}
	#wrap #content .inner{
		width: 100%;
	}
	#wrap #content section{
		width: auto;
		padding: 0 5.333vw;
	}
	#wrap #content h2 {
    background: none;
    padding: 0;
}
	#wrap #content h2 img{
		width: auto;
	}
	#wrap #content section.sec01 h2{
		margin-bottom: 5vw;
	}
	.sec01 .graph_box > div.left{
		float: none;
		position: initial;
		width: 100%;
		margin-left: 1vw;
	}
	.sec01 .graph_box > div.right{
		width: 100%;
		margin-bottom: 8vw;
	}
	.sec01 .graph_box .pnt_box{
		padding: 6vw 6vw 6.6vw;
		border-radius: 10px;
	}
	.sec01 .graph_box .pnt_box .main_ttl{
		margin-bottom: 4vw;
	}
	.sec01 .graph_box .pnt_box > picture:not(.main_ttl){
		padding-left: 1vw;
	}
	.sec01 .graph_box .pnt_box > picture:not(.main_ttl) img{
		height: 4.66vw!important;
	}
	#wrap #content .sec01 .graph_box .pnt_box p{
		padding-left: 1vw;
	}
	#wrap #content .sec01 .graph_box .pnt_box p{
		margin-bottom: 3.3vw;
	}
	#wrap #content .sec01 .graph_box .pnt_box p.att{
		font-size: 2.66vw;
		text-indent: -2.66vw;
    	padding-left: 2.66vw;
	}
	#wrap #content section.sec01 .movie_area{
		padding-top: 0;
	}
	#wrap #content section.sec01 .movie_area h3{
		padding: 0 4vw 4.6vw;
	}
	.sec01 .movie_area .btn_box{
		top: 0;
		margin-bottom: 0;
	}
	.sec01 .movie_area .btn_box picture{
		width: 110%;
		margin-left: -5%;
	}
	.sec01 .movie_area .btn_box .btn {
    width: 12vw;
    height: 12vw;
}
	.sec01 .graph_box .att_area{
		margin-top: 4vw;
	}
	#wrap #content .sec01 .graph_box .att_area p{
		font-size: 2.6vw;
		text-indent: -5.2vw;
    	padding-left: 5.2vw;
	}
	#wrap #content section.sec01{
		margin-bottom: 8vw;
	}
	#wrap #content section.sec02 h2{
		width: 51.6vw;
		margin: 0 auto 2.6vw;
	}
	#wrap #content .sec02 p.sub{
		padding: 0;
		margin-bottom: 4vw;
		letter-spacing: 0.2vw;
	}
	
	.sec02 .point_box{
		border-radius: 10px;
		margin-bottom: 5.33vw;
	}
	.sec02 .point_box.p01 .ttl_area {
    border-radius: 10px 10px 0 0;
}
	.sec02 .point_box.p02 .ttl_area {
    border-radius: 10px 10px 0 0;
}
	.sec02 .point_box.p03 .ttl_area {
    border-radius: 10px 10px 0 0;
}
	.sec02 .point_box.p04 .ttl_area {
    border-radius: 10px 10px 0 0;
}
	.sec02 .point_box.p05 .ttl_area {
    border-radius: 10px 10px 0 0;
}
	.sec02 .point_box.p01 .ttl_area h3{
		width: 60vw;
		margin: 0 auto;
	}
	.sec02 .point_box.p02 .ttl_area h3{
		width: 68.1vw;
		margin: 0 auto;
	}
	.sec02 .point_box.p03 .ttl_area h3{
		width: 83vw;
		margin: 0 auto;
	}
	.sec02 .point_box.p04 .ttl_area h3{
		width: 79.7vw;
		margin: 0 auto;
	}
	.sec02 .point_box.p05 .ttl_area h3{
		width: 56.5vw;
		margin: 0 auto;
	}
	.sec02 .point_box .ttl_area{
		padding: 6vw 0;
	}
	.sec02 .point_box .exp_area{
		padding: 5vw 6vw 6.6vw;
	}
	#wrap #content .sec02 .point_box .exp_area p{
		text-align: left;
	}
	#wrap #content .sec02 .point_box.p01 .exp_area p.att{
		padding-top: 4vw;
		text-indent: -5.2vw;
		padding-left: 5.2vw;;
	}
	.sec02 .point_box.p01 .exp_area .flex{
		display: block;
		padding-top: 6.6vw;
	}
	.sec02 .point_box.p01 .exp_area .flex .le{
		margin: 0;
	}
	#wrap #content .sec02 .point_box.p01 .exp_area .flex .le p.att {
    padding-top: 3vw;
}
	.sec02 .point_box.p01 .exp_area .flex .ri{
		padding-top: 6vw;
	}
	#wrap #content .sec02 .point_box.p01 .exp_area .flex .ri .note_area{
		left: 5.3vw;
		bottom: 6.3vw;
		padding-right: 5.3vw;
	}
	#wrap #content .sec02 .point_box.p01 .exp_area .flex .ri p.att.pt0{
		padding-top: 1vw;
	}
	
	.sec02 .point_box.p02 .exp_area .flex{
		display: block;
	}
	.sec02 .point_box.p02 .exp_area .flex > div{
		width: 100%;
	}
	.sec02 .point_box.p02 .exp_area .flex .le{
		margin-right: 0;
	}
	#wrap #content .sec02 .point_box.p02 .exp_area .flex .le p.att{
		text-indent: -5.2vw;
		padding-left: 5.2vw;
		padding-top: 2.5vw;
	}
	.sec02 .point_box.p02 .exp_area picture.image{
		padding-top: 4.7vw;
	}
	
	#wrap #content .sec02 .point_box p.att{
		font-size: 2.666vw;
		letter-spacing: normal;
	}
	#wrap #content .sec02 .point_box.p02 .exp_area .flex .ri p.att{
		text-indent: -5.2vw;
		padding-top: 3vw;
		padding-left: 5.2vw;
		left: 0
	}

	#wrap #content .sec02 .point_box.p02 .exp_area .flex .ri p.att.pt0{
		padding-top: 0;
	}
	.sec02 .point_box.p03 .flex{
		display: block;
		padding: 0;
	}
	.sec02 .point_box.p03 .flex .le{
		width: 100%;
		margin: 0;
	}
	.sec02 .point_box.p03 .ttl_area {
		padding: 6vw 0;
		margin-bottom: 6vw;
	}
	#wrap #content .sec02 .point_box.p03 .flex .le > p{
		padding: 0 6vw;
		text-align: left;
	}
	.sec02 .point_box.p03 .flex .ri{
		padding: 0 6vw;
	}
	#wrap #content .sec02 .point_box.p03 p.att {
		text-indent: -2.666vw;
		padding: 2vw 0 6.6vw 2.666vw;
		line-height: 1.5;
	}
	.sec02 .point_box.p04 .exp_area .flex{
		display: block;
		padding: 4vw 0;
	}
	.sec02 .point_box.p04 .exp_area .flex .le{
		margin: 0 0 5vw 0;
	}
	
#wrap #content .sec02 .point_box.p04 p.att {
    text-indent: -5.2vw;
    padding-left: 5.2vw;
    margin-left:0;
}
	.sec02 .point_box.p04 .exp_area .btm{
		padding-top: 5vw;
	}
	.sec02 .point_box.p04 .exp_area .btm p.att{
		left: 5vw;
    	bottom: 4vw;
	}
	.sec02 .point_box.p05 .exp_area .image{
		position: relative;
		left: -3vw;
		width: 93vw;
		padding: 4vw 0 3vw;
	}
	#wrap #content .sec02 .point_box p.att{
		text-indent: -2.666vw;
		padding-left: 2.666vw;
	}
	
	
	
	
	#wrap #content section.sec03{
		padding-bottom: 6vw;
	}
	.sec03 .aco-btn {
		height: 12vw;
		padding-right: 6vw;
	}
	.sec03 .aco-btn:hover{
		opacity: 1;
	}
	.sec03 .aco-btn.active:hover::before{
		display: none;
	}
	.sec03 .aco-btn picture{
		width: 68.4vw;
		margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
		padding-right: 6vw;
	}
	.sec03 .aco-btn .icon {
    width: 6.66vw;
    height: 6.66vw;
    right: 3vw;
}
	.sec03 .aco-btn .icon span{
    height: 6.66vw;
	}
	.sec03 .aco-btn .icon span::before, .sec03 .aco-btn .icon span::after {
    border-radius: 5px;
    width: 3.6vw;
    height: 0.8vw;
}
	.sec03 .aco-btn .icon span::before {
    width: 0.8vw;
    height: 3.6vw;
}
	.sec03 .aco-table{
		top: -6vw;
	}
	
	.sec03 .aco-table .table_area table td sub{
		font-size: 2vw;
	}
	#wrap #content .sec03 .aco-table .inner{
		padding: 10vw 4.8vw 7.3vw;
		border-radius: 10px;
	}
	.sec03 .aco-table .mtr_area{
		margin-bottom: 4vw;
	}
	#wrap #content .sec03 .aco-table .mtr_area .ttl {
	font-weight: 500;
    height: 8.8vw;
    font-size: 4.5vw;
    line-height: 8.8vw;
}
	.sec03 .aco-table .mtr_area .txt {
    padding: 4vw;
    text-align: left;
    font-size: 3.2vw;
	border-right: solid 1px #74c5eb;
    border-left: solid 1px #74c5eb;
    border-bottom: solid 1px #74c5eb;
}
	#wrap #content .sec03 .aco-table .mtr_area .txt sub{
		font-size: 2vw;
	}
	.sec03 .aco-table .table_area{
		margin-bottom: 4vw;
	}
	.sec03 table .ttl td {
    height: 8.8vw;
    font-size: 4.5vw;
    line-height: 8.8vw;
}
	.sec03 .aco-table .table_area table {
    	font-size: 3vw;
		letter-spacing: normal;
}
	.sec03 td, .sec03 th {
    height: 9vw;
}
	.sec03 .aco-table .table_area sub{
		font-size: 2vw;
    	vertical-align: baseline;
	}

	.sec03 td, .sec03 th {
		font-weight: 500;
    border-bottom: 1px solid #74c5eb;
    border-right: 1px solid #74c5eb;
}
	.sec03 table.btm tr > td:first-of-type{
    border-left: 1px solid #74c5eb;
	}
	.sec03 table.top tr > td:first-of-type {
    border-left: 1px solid #74c5eb;
}
	.sec03 table.top tr > td.lst {
    border-bottom: none;
    border-right: none;
    background: none;
}
	.sec03 table.top tr > td.val.lst {
    border-left: none;
    border-right: none;
}
	.sec03 table.btm tr:first-of-type > td {
    border-top: 1px solid #74c5eb;
}
	.sec03 table.top tr > td:last-of-type{
    border-right: 1px solid #74c5eb;
	}
	.sec03 table.btm tr > td.lst {
    border-right: none;
}
	.sec03 .aco-table .others_area{
		margin-bottom: 1.33vw;
	}
	#wrap #content .sec03 .aco-table .others_area p.ttl {
    font-size: 4vw;
		margin-bottom: 1.33vw;
		padding: 0;
}
	#wrap #content .sec03 .aco-table .others_area p.txt{
		margin-bottom: 5vw;
	}
	#wrap #content .sec03 .aco-table .others_area p.txt:last-of-type{
		margin-bottom: 6vw;
	}
	.sec03 .aco-table .allergen_btn {
    height: 100%;
		background: none;
}
	.sec03 .aco-table .allergen_btn div:hover{
		opacity: 1;
	}
	.sec03 .aco-table .allergen_btn div {
    height: 12vw;
		position: initial;
}
	#wrap #content .sec03 .aco-table .allergen_btn div p {
    font-size: 4.5vw;
    line-height: 12vw;
}
	.sec03 .aco-table .allergen_btn div p::before {
    left: -4vw;
    width: 2.26vw;
    height: 2.93vw;
}
	section.sec03::after {
    display: inline-block;
    bottom: -6vw;
    width: 100vw;
    height: 45vw;
    min-height: initial;
    border-bottom-right-radius: 100vw 45vw;
    border-bottom-left-radius: 100vw 45vw;
}
	#wrap #content section.sec03.active{
		padding-bottom: 0;
	}
	#wrap #content section.sec04 {
    width: auto;
    padding: 9.8vw 5.333vw 12vw;
}
	#wrap #content section.sec04 h2{
		width: 76vw;
		margin: 0 auto 2vw;
	}
	section.sec04 .flex{
		display: block;
	}
	section.sec04 .flex.top{
		margin-bottom: 0;
	}
	section.sec04 .flex.top .le{
		position: initial;
		margin-right: 0;
	}
	#wrap #content section.sec04 .flex p {
		letter-spacing: 0.01vw;
    font-size: 3.2vw;
}
	#wrap #content section.sec04 .flex picture{
		padding: 0 7vw;
	}
	section.sec04 .flex.top .ri{
		position: initial;
		padding-top: 4vw;
	}
	section.sec04 .flex.btm .le {
    position:initial;
	padding-top: 4vw;
	margin: 0;
}
	section.sec04 .flex.btm .ri {
    position: relative;
    padding-top: 4vw;
}
	#wrap #content section.sec04 .flex.btm .ri picture{
		padding: 0;
	}
	section.sec04 .flex.btm .ri .btn_recipe {
		width: 25.3vw;
		height: auto;
    position: absolute;
   	left: 13vw;
    bottom: 8.8vw;
}
	#wrap #content section.sec04 .flex.btm .ri .btn_recipe picture{
		padding: 0;
	}
	
	section.sec04 .flex.btm .ri a:hover .btn_recipe picture::after{
		display: none;
	}
	section.sec04 .flex.btm .ri p{
		position: relative;
    	top: -2vw;
	}
	section.sec04 .flex.btm{
		margin-bottom: 0;
	}
	section.sec04 .btn_make{
		padding-top: 2vw;
	}
	
	#wrap #content section.sec05 {
    padding-top: 9.3vw;
}
	#wrap #content section.sec05 h2 {
	width: 64vw;
	margin: 0 auto 3vw;
}
	#wrap #content section.sec05 a p.txt {
    font-size: 3.2vw;
    letter-spacing: normal;
    margin-bottom: 6vw;
	line-height: 2;
}
	#wrap #content section.sec05 p.txt::before{
		display: none;
	}
	#wrap #content section.sec05 p.txt span{
		position: relative;
	}
	#wrap #content section.sec05 p.txt span::before {
    position: absolute;
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #5d370c;
    right: 0;
    left: 0;
    bottom: -1vw;
    margin: 0 auto;
}
	
#wrap #content .sec05 .product_linkarea > p {
    margin-bottom: 2vw;
}
	#wrap #content .sec05 .product_linkarea > p:nth-of-type(2) {
    margin-bottom: 2.5vw;
}
	#wrap #content .sec05 .product_linkarea > p:nth-of-type(3) {
    margin-bottom: 8vw;
}
	.bread_area {
    padding-bottom: 3vw;
}
	.group-breadcrumbs {
    width: auto;
    padding: 0 5.333vw;
    margin: 0;
}

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}