@charset "utf-8";



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

	header > div{
		min-width: 770px;
	}

}



@media screen and (max-width: 768px){
	.for-pc{
		display:none !important;
	}
	.for-sp{
		display: block;
	}
	br.for-sp{
		display: inline-block;
	}
	body{
		min-width: 0;
	}

	/* header */
	header > div{
		position: relative;
		min-width: 0 !important;
	}
    header > div h1 img{
	    margin-top: 7px !important;
	    width: 140px;
    }
	header > nav{
		top:0;
		left: 0;
		width: 100%;
		padding:70px 0 0 20px;
		background: url(../img/bg_nav.png) no-repeat 0 0 scroll;
		background-size: cover;
	}
	header > div h1 a,
	header > div h1 img{
		transform: scale(1) !important;
	}
	
	header.show_search #btn-search span::before,
	 header.show_search #btn-search span::after {
		right:0 !important;
	}
	header > nav li{
		margin: 0 0 18px;
		text-align: right;
	}
	header > nav li a{
		overflow: visible;
		display: inline-block;
		height:28px;
		padding: 3px;
	}
	header > nav li a svg{
		right:14px;
	}
	header > nav li a.active{
		background: #fff;
	}
	header #txt-g-weare{
		width: 162px;
	}
	header #txt-g-recipe{
		width: 200px;
	}
	header #txt-g-column{
		width:222px;
	}
	header #txt-g-whats{
		width: 230px;
	}
	header #txt-g-news{
		width: 142px;
	}

	/* header menu svg */
	
   header > nav li a#txt-g-service svg{
	  width: 96px;
	}
	header > nav li a#txt-g-weare svg{
		width: 83px;
		right:11px;
	}
	header > nav li a#txt-g-column svg{
		width: 105px;
		right:11px;
	}
	header #txt-g-recipe svg{
		width: 92px;
		right:14px;
	}
	header > nav li a#txt-g-whats svg{
		width: 90px;
		right:11px;
	}
	header > nav li a#txt-g-news svg{
		width: 77px;
	}
	header > nav li a span{
		position: absolute;
		top: 38px;
		right: 15px;
		width: 200px;
		display: inline-block;
		color: #fff ;
		line-height: 1.2;
		font-size: 1.1rem;
	}
	header > nav li a:hover::before{
		background: rgba(255,255,255,0.3);
	}
	header > nav li a#txt-g-whats span{
		/* top: 32px; */

	}
	header #btn-x2{
		background: url(../img/icon-x-w.svg) no-repeat 0 0 scroll;
		background-size: 18px auto;
	}
	header #btn-camera2{
		background: url(../img/icon_camera-w.svg) no-repeat 0 0 scroll;
		background-size: 18px auto;
	}
	
	header.show_search #btn-search span::before,
	header.show_search #btn-search span::after{
		left: 0;
	}
	header nav li svg polygon,
	header nav li svg path{
		fill: #fff !important;
	    stroke-width: 0px !important;
	}
	header #side-box{
		top: 65px;
		right:0;
		width: 100%;
		transform: scale(1) !important;
	}
	header #side-box ul{
		display:block;
		width:100%;
		margin:0;
		padding:0;
		font-size:0;
	}
	header #side-box ul li{
		display:inline-block;
		position:relative;
		width:23%;
		text-align:center;
		padding:0;
		box-sizing: border-box;
	}
	header #side-box ul li:first-child{
		width:30%;
	}
	header #side-box ul li:last-child{
		width:20%;
	}
	header #side-box ul li:after{
		position:absolute;
		right: 0;
		top:0;
	}
	header #side-box ul li:nth-child(2) img,
	header #side-box ul li:nth-child(3) img{
		margin-left: -25px;
	}
	header #side-box ul li:nth-child(4):after,
	header #side-box ul li:last-child{
		display:none;
	}
	header #btn-menu{
		position: fixed !important;
		top: 15px;
		right: 18px;
		min-width:0;
		width:24px;
		z-index: 600;
		margin:0;
		padding:0 0 40px;
		font-size: 1.1rem;
		font-weight: 600;
	}
	header #btn-menu > span{
		height: 24px;
	}
	header #btn-menu > span::before, header #btn-menu > span::after {
		width: 24px;
	  }
	header #btn-menu img{
		width:30px;
	}
	header #btn-x,
	header #btn-camera{
		display:none !important;
	}
	header.show_nav #btn-menu > span::before,
	header.show_nav #btn-menu > span::after{
		background-color: #fff;
		animation-duration: 0.3s;
		animation-timing-function: ease-in-out;
		animation-fill-mode:forwards;
		transform: rotate(0deg);
	}
	@keyframes showNavBtnSpanBeforeAnimation {
		0% {top: 22px;transform: rotate(0deg);left:0;}
		100% {top: 15px;transform: rotate(45deg);left:10px;}
	}
	@keyframes showNavBtnSpanAfterAnimation {
		0% {top: 30px;transform: rotate(0deg);left:10px;}
		100% {top: 15px;transform: rotate(-45deg);left:10px;}
	}
	header #btn-search{
		position: absolute;
		top: 22px;
		left:auto;
		right:65px;
		width: 26px;
		min-width:0;
		height: 26px;
		margin:0;
		padding: 0;
		background: url(../img/icon_zoom_sp.svg) no-repeat 0 0 scroll;
		background-size: 24px auto;
	}
	header.show_nav #btn-search{
		animation-name: showNavBtnSearchAnimation;
		animation-duration: 0.3s;
		animation-timing-function: ease-in-out;
		animation-fill-mode:forwards;
	}
	
	header.pos_fix.show_search #btn-search{
		top: 10px!important;
		margin-left: 0;
		left:auto;
		right: 20px;
	}
	
	header.show_search #btn-search{
		top: 15px;
		left:auto;
		right: 10px;
		z-index:602;
	}
	header.show_search #btn-search span::before,
	header.show_search #btn-search span::after{
		width: 30px;
		top: 12px !important;
	}
	
	header #btn-mailmagazine{
		position: absolute;
		top:20px;
		bottom: auto;
		left:64px;
		display: none !important;
		min-width: 0;
		width: 30px;
		height: 30px;
		padding-bottom:0;
		background: url(../img/icon_mail_magazine-sp.svg) no-repeat center bottom scroll;
		background-size: 30px auto;
	}
	header #btn-mailmagazine img{
		display:none;
	}
	header #btn-camera{
		top: 18px;
		right: 60px;
		padding-right: 0;
		width:24px;
		height: 26px;
		background: url(../img/icon_camera-sp.svg) no-repeat right 3px scroll;
		background-size: 24px auto;
		text-align: right;
		font-size: 1.7rem;
	}
	header #btn-camera span{
		display: none;
	}
	header #header-form{
		position: absolute;
		left:0;
		top:0;
		z-index: 601;
		display: none;
		width: 100%;
		height: 55px;
		padding: 5px 10px;
		box-sizing: border-box;
		background: #fff;
	}
	header #header-form div{
		padding-left: 35px
	}
	header.show_search #header-form div.form-bg{
		position: absolute;
		top:55px;
		left: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
	}
	header.show_search #header-form div.form-bg::before{
		display: none;
	}
	header #header-form input[type="text"]{
		width: 260px;
		height: 40px;
		padding: 4px 0 0 8px;
		border: none;
		border-radius:  0;
		font-size: 1.5rem;
		line-height: 40px;
	}
	
	header #header-form input[type="submit"]{
		right: auto;
		top: 12px;
		left: 5px;
		width: 20px;
		height: 20px;
		margin-top: 0;
		padding: 0;
		margin: 0;
		background: url(../img/icon_zoom.svg) no-repeat 0 center scroll;
		box-shadow: none;
		background-size:  cover;
	}
	header.pos_fix{
		height:95px;
	}
	header.pos_fix #side-box{
		top:50px;
	}
	header h1{
		padding-left: 15px !important;
	}
	header h1 a{
		display: inline-block;
		padding-top: 16px;
	}
	header h1 img{
	    margin: 0 !important;
	}
	header.pos_fix h1 img{
	    margin: 0 !important;
	    width: 130px;
	}
	header #btn-search.for-sp{
		display:block;
	}
	header.pos_fix #btn-search{
		top: 10px;
	}
	header.pos_fix #btn-search span{
		margin-top: 5px;
	}
	header.pos_fix.show_nav #btn-menu > span{
		display: block;
		margin-top: 10px;
	}
	header #btn-menu.for-sp{
		display:block;
	}
	header #btn-menu span::before{
		top: 8px;
	}header #btn-menu span span {
		top: 18px;
	  }
	header #btn-menu span::after{
		top: 27px;
	}
	
	header #side-box ul li img {
		height: 32px;
		width: auto;
		margin-top: 2px;
		vertical-align: top;
	 }
	 header #side-box ul li img.icon-recipe {
		margin-top: 5px;
		height: 32px;
	}header #side-box ul li::after {
		display: inline-block;
		width: 20px;
		height: 32px;
		margin-left: 25px;
		background: url(../img/line-slash.svg) no-repeat center bottom scroll;
		vertical-align: top;
		content: "";
	}
	header #side-box ul li img.icon-whats {
		margin-top: 6px;
		height: 29px;
	}
	header.pos_fix #header-form{
		top:0;
	}
	header.pos_fix #btn-camera{
		top: 7px;
		right: 66px;
	}
	header.pos_fix #btn-menu{
		top: 7px;
	}
    .top-page header.pos_fix #btn-mailmagazine,
	header.pos_fix #btn-mailmagazine{
		top:7px;
		left: 72px;
		padding: 0 0;
		margin-top: 0;
		background-color: transparent;
		background-position: center 0;
	}
	.page-article header.pos_fix >  nav,
	.page-list header.pos_fix >  nav,
	.page-list-has-mv header.pos_fix >  nav,
	.page-article header > nav,
	.page-list header > nav,
	.page-list-has-mv header > nav,
	header.pos_fix >  nav{
		top:0;
		left: 0;
		width: 100%;
		padding: 60px 0 0 20px;
		background-color: none
	}


    /* footer */
    footer div{
	    min-width: 0;
	    padding: 25px 0;
    }
    footer > ul{
		width:auto;
		margin: 25px 15px 0;
		text-align: center;
    }
	
    footer div.sub-box{
	    padding-bottom: 35px;
    }
	
    footer #btn-contanct-footer,
    footer div.sub-box a:nth-child(2){
		display:block;
		width:253px;
		margin: 0 auto 25px;
		text-align:left;
	}
    footer div.sub-box a:nth-child(2){
		margin: 0 auto 35px;
	}

	
	footer #btn-camera-footer.for-sp{
		display: inline-block;
		width:28px;
		height:28px;
		margin-left: 0;
		background-size: 28px auto;
	}
	footer #btn-x-footer.for-sp{
		display: inline-block;
		height: 28px;
		width: 28px;
		margin-top: auto;
		margin-left: 18px;
		background-size: 28px auto;
	
	}

    footer > ul li{
    	margin: 0 15px 5px 0;
	    font-size: 1.3rem;
    	vertical-align: top;
    }
    footer hr{
		margin:  20px 0;
    }
    footer > P{
	    font-size: 1.1rem
    }
    footer div p span{
	    display: block;
	    text-align: center;
	    font-size:0.9rem;
    }
    footer div p img{
	    width: 153px;
	    margin: 10px auto 0;
    }
	footer div p img.txt-footer-catch{
		width: 130px;
	}



	/*pankuzu */
    .pankuzu ul{
	    padding: 12px 15px  2px;
    }
    .pankuzu ul li{
		vertical-align: top;
		margin-bottom: 10px;
    }
    .pankuzu ul li:after{
		vertical-align: top;
    }
	





	/* content */
	section > div{
		width: calc(100% - 30px);
		min-width: 0;
		margin: 0 15px;
		padding-left: 0;
		padding-right: 0;
	}

	



    /* btn */
    a[class*="btn-"]{
	    display: block;
	    height: 30px;
	    padding: 0 18px;
	    line-height: 30px;
	    border-radius: 15px;
	    font-size: 1.3rem;
    }
	a[class*="btn-"] span{
	    height: 30px;
	    line-height: 29px;
	}
    a[class*="btn-"] span:after,
    a[class*="btn-"] span:before{
	    height:10px;
    }
    a[class*="btn-"] span:after{
    	right:-2px;
	    margin-top: -3px;
    }
    a[class*="btn-"] span:before{
	    top: 50%;
	    right:-2px;
	    margin-top: -10px;
    }
    a.btn-small{
    	width:130px;
    }
    a.btn-wide{
	    width:320px;
	    line-height: 29px;
    }

	
	/* baloon-box */
	.baloon-box{
		position: static;
		display: inline-block;
		width: 320px;
		margin-top: 25px;
		font-size: 1.3rem;
	}
	.baloon-box span{
		display: block;
		padding: 10px 20px 12px;
		text-align:center
	
	}
	.baloon-box span img{
		display: inline-block;
	}


    /* list-thumb-block */
	
    .list-thumb-swiper {
	    margin-top: 30px;
	    width: 100%;
		height: auto;
    }
    .list-thumb-block{
		height: auto;
    }
    .list-thumb-block li{
	    /*height: 360px;
	    width: 360px;
		max-width:280px;
	    margin: 0 20px 0 0;*/
	    font-size: 1.6rem;
	}
	
    .list-thumb-block li.swiper-slide{
	    height: auto;
	    margin: 0;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
	}
	.list-thumb-block li label{
		width:140px;
		height: 30px;
		line-height: 30px;
		font-size: 1.4rem;
	}
	.list-thumb-block li .txt-exp > span{
		font-size:1.4rem;
	}
	.list-thumb-block li a{
		width: 260px;
		height: 260px;
		
	}
	.list-thumb-block li figure{
		width: 260px;
		height: 260px;
		margin: 0  auto!important;
	}
	.list-thumb-block.with-tag li .tag-box span.tag{
		margin-top: 5px;
		padding: 2px 8px 2px 20px;
		font-size: 1.1rem;
	}
	.list-thumb-block.with-tag li .tag-box span.tag:before{
		top: 2px;
	}
	
	
	
	.list-thumb-block li > a > p {
		bottom: 10px;
		padding: 0 15px;
		font-size: 1.4rem;
	}
	
    /* pageSkipper */
    #pageSkipper{
	    right: 15px;
    	bottom: 15px;
	    width: 40px;
    	height:40px;
	    line-height: 40px;
	    font-size: 1.2rem;
    }
	#pageSkipper img{
		width: 30px;
	}



	/*  pagenation */
    .pagenation{
		display: block;
		width: 100%;
	    padding: 40px 0 !important;
		margin: 0 !important;
    }
	.pagenation > div{
		padding: 0;
	}
    .pagenation li{
		margin: 5px;
	    font-size: 1.6rem;
    }
    .pagenation li a{
	    width: 35px;
	    height: 35px;
	    line-height:  35px;
    }
    .pagenation li a.btn-prev::before,
    .pagenation li a.btn-prev::after,
    .pagenation li a.btn-next::before,
    .pagenation li a.btn-next::after{
	    width: 12px;
	    margin-left: -4px;
    }
	.pagenation li a.btn-next::after,
    .pagenation li a.btn-prev::before{
	    margin-top: 4px;
    }
	.pagenation li a.btn-next::before,
    .pagenation li a.btn-prev::after{
	    margin-top: -4px;
    }
    .pagenation li a.btn-prev::before,
    .pagenation li a.btn-prev::after{
	    margin-left: -6px;
	}

	/* box-notfound */
    .box-notfound{
	    margin-top:90px;
	    padding: 90px 0;
    }
    .box-notfound figure{
	    padding-bottom: 80px;
    }
    .box-notfound figure img{
	    width:300px;
    }
    .box-notfound div.txt-massage{
		padding: 0 40px;
	}
    .box-notfound div.txt-massage p{
	    font-size: 1.2rem;
    }
    .box-notfound .btn-container{
	    padding-top: 60px;
    }
    .box-notfound .btn-container img{
	    width: 280px;
    }
	

     /* modal */ 
    .modal-container{
		max-width: 340px !important;
	    width: 100%!important;
		margin-left: -170px !important;
    }
    .modal-header{
	    height:50px;
	    padding-top: 15px;
    }
	.modal-header p{
		font-size: 1.8rem;
	}
    .modal-header img{
	   width: 140px;
    }
    .modal-header button{
	    top: 15px;
	    left: 15px;
	    width: 20px;
	    height: 20px;
    }
    .modal-body{
	    padding: 0 15px 35px;
	    font-size: 1.6rem;
		max-width: 340px;
    }
	.modal-mailmagazine .modal-body{
		padding-right: 10px!important;
		padding-left: 10px!important;
	}
    .modal-body .txt-notation{
	    font-size: 1.2rem;
    }
    .modal-body input[type="submit"],
    .modal-body button{
		display: block;
	    width: 100%;
		max-width: 400px;
    	height: 40px;
	    margin: 35px auto 0;
		box-sizing: border-box;
    	line-height: 40px;
	    font-size: 1.6rem;
    }
    .modal-body dt{
	    font-size: 1.6rem
    }
    .modal-body .txt-required{
	    font-size: 1.2rem
    }
    .modal-body dd > div{
	    margin-top: 15px;
    }
	
    .modal-body .box-for-sp{
	    display: block;
		margin-top: 15px
    }
    .modal-body input[type="text"]{
	    height:40px;
     	line-height: 40px;
	    font-size: 1.4rem;
    }
    .modal-body .txt-warning{
	    font-size: 1.3rem;
    }
    .modal-body input[type="text"].size-herf{
	    width: 150px;
    }
    .modal-body .box-for-sp .txt-concate{
		margin-left: 0;
	}
    .modal-body .txt-footage{
	    margin-top: 15px;
		text-align: left;
	    font-size: 1.3rem;
    }
	
    .modal-body iframe{
		overflow-x: hidden;
		overflow-y: scroll
	}

	
    /* mordal mordal-mailmagazine */
    .modal-mailmagazine .modal-container{
	    max-width: 600;
    }
	.modal-mailmagazine .modal-body input[type="text"].size-herf{
        width: calc(100% - 45px);
	}
	
    .modal-mailmagazine .box-confirm dd{
	    margin-bottom: 30px;
	    font-size: 2.4rem;
    }

	
    /*  modal-tags  */
    .modal-tags .modal-container{
	    width: calc((100% - 30px));
    }
	
    .modal-tags .box-input{
    	margin-top: 20px;
	    padding-bottom: 30px;
    }
    .modal-tags .box-input span{
	    font-size: 1.2rem;
		line-height: 40px;
    }
    .modal-tags .box-input input[type="text"]{
		width: auto !important;
	    padding-right: 40px;
    }
    .modal-tags .box-input input[type="submit"]{
	    width:40px;
	    height: 40px;
	    margin: -20px 0 0;
    	background-size: 25px auto;
     }
    .modal-tags dl{
	    display:block;
	    width: auto;
	    margin: 0;
		margin-bottom: 20px;
    }
    .modal-tags dt{
	    display:block;
    	width: auto;
		padding-top: 0;
    	font-size: 1.4rem;
    }
    .modal-tags  dd{
	    display:block;
		font-size: 0;
    }
    .modal-tags  dd .tag{
		padding-left: 18px;
		margin-right: 5px;
		margin-bottom: 10px;
		font-size: 1.1rem;
	}
	.modal-tags .modal-customscroll{
		overflow: hidden;
		height: 320px;
		overflow-y:scroll;
	}
	
	

}