.magazine-contents div,
.magazine-contents li,
.magazine-contents a,
.magazine-contents dt,
.magazine-contents dd,
.magazine-contents p,
.magazine-contents em,
.magazine-contents span,
.magazine-contents strong{
	font-family: "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic ProN", "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	color: #000;
	letter-spacing: 0;
	line-height: 1.8;
	font-weight: normal;

}


.magazine-contents h1,
.magazine-contents h2,
.magazine-contents h3,
.magazine-contents h4,
.magazine-contents h5,
.magazine-contents h6{
	font-family: "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic ProN", "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	color: #000;
	letter-spacing: 0;
	line-height: 1;
	font-weight: normal;

}




.entry-body .profile dt,
.entry-body .profile dt span,
.entry-topics h3,
.entry-topics .topics-nav li a,
.entry-topics .topics-nav li a span,
.entry-col .col .col-inner > .txt p,
.topics-header h3 span,
.entry-col .col-2 figure + dl dt,
.entry-col .col-2 figure + dl dd,
.entry-col .col-3 .box-list-1 li,
.entry-col .attention dt strong,
body#magazine .entry-col .attention dd,
#page-nav li a,
.viewer-wrap .pointer strong,
.cap-list li dd,
.cap-list li dt span,
.number-list li dd,
.number-list li dt span,
.col-view figure span,
.col-view-flow figure span,
.flow-title h4 span,
.flow-title h4 strong,
.popup .view h5 span,
.popup .view h5 strong,
.img-title h4 strong,
.index-box .index-header .lead p,
.entry-col .attention figcaption,
figcaption{
	font-family: "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic ProN", "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}




.index-box .index-header p,
.entry-list dt{
	font-family: "ヒラギノUD角ゴ W3 JIS2004", "Hiragino UD Sans W3 JIS2004","ヒラギノUD角ゴ StdN W3",sans-serif;

}
.entry-list dt{
	font-family: "ヒラギノUD角ゴ W3 JIS2004", "Hiragino UD Sans W3 JIS2004","ヒラギノUD角ゴ StdN W3",sans-serif;

}
.entry-hatakenotsuchi dt,
.entry-list dd,
.entry-list .label{
	font-family:"ヒラギノUD角ゴ W5 JIS2004", "Hiragino UD Sans W5 JIS2004", "ヒラギノUD角ゴ StdN W5",sans-serif;
}



/*ヒラギノUD角ゴ W3 JIS2004
*/

@keyframes zoom{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(0.9);
	}
	100%{
		transform: scale(1);
	}
}

@keyframes sd{
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(8px);
	}
	100%{
		transform: translateY(0);
	}
}


.viewer-wrap .pointer{
	animation: zoom 1000ms cubic-bezier(0.77, 0, 0.175, 1) infinite;
	animation-fill-mode: both;
}



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



	body#magazine{
		font-size: 15px;
		line-height: 1.8;

	}

	body.no-scroll{
		overflow: hidden;
	}

	.ignore-pc{
		display: none;
	}


	#magazine-wrap{
		position: relative;
		background: url(../img/hatakenotsuchi/bg_note.png) 50% 0 repeat;
	}

	.entry-col figure img{
		width: auto;
	}


	.bg-box1{
		padding: 25px;
		background: #f1e9c6;
		border-radius: 10px;
	}
	.entry-col .col .col-inner .bg-box .txt{
		font-size: 18px;
	}


	/* pankuzu
	---------------------------------------------------*/

	#pankuzu-nav{
		position: relative;
		background: #e2d6c7;
	}
	#pankuzu-nav:before{
		content: "";
		display: block;
		top: -3.5px;
		left: 0;
		width: 100%;
		height: 7px;
		background: url(../img/hatakenotsuchi/bg_frame_1_h.png) 50% 0 repeat-x;
	}
	#pankuzu-nav:after{
		content: "";
		display: block;
		bottom: -3.5px;
		left: 0;
		width: 100%;
		height: 7px;
		background: url(../img/hatakenotsuchi/bg_frame_1_h.png) 50% 0 repeat-x;
	}



	.pankuzu-nav-inner{
		margin: auto;
		padding: 0 15px;
		max-width: 980px;
		height: 30px;

		box-sizing: border-box;
	}
	#pankuzu-nav{
		font-size: 0;
	}
	#pankuzu-nav li{
		display: inline-block;
		font-size: 14px;
		line-height: 30px;
	}
	#pankuzu-nav li + li:before{
		content: "";
		margin: 0 0 0 10px;
		padding: 0 0 0 10px;
		width: 7px;
		height: 14px;
		display: inline-block;
		background: url(../img/common/arrow_pankuzu.svg) 0 0 no-repeat;
		vertical-align: middle;
	}					
	#pankuzu-nav a{
		color: #8d7756;
	}
	#pankuzu-nav li.active a,
	#pankuzu-nav li a:hover{
		color: #342b1a;
	}


	/* kv
	---------------------------------------------------*/


	.kv-wrap{
		position: relative;
		width: 100%;
		height: 650px;
	}

	
	.kv{
		position: absolute;
		z-index: 10;
	}
	.kv-1{
		top: 0;
		left: 0;
		width: 30%;
		height: 348px;
		background: url(../img/hatakenotsuchi/kv_1.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
	.kv-2{
		top: 0;
		left: 30%;
		width: 30%;
		height: 348px;
		background: url(../img/hatakenotsuchi/kv_2.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
	.kv-3{
		top: 348px;
		left: 0;
		width: 30%;
		height: 348px;
		background: url(../img/hatakenotsuchi/kv_3.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
	.kv-4{
		top: 348px;
		left: 30%;
		width: 30%;
		height: 348px;
		background: url(../img/hatakenotsuchi/kv_4.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
	.kv-5{
		top: 0;
		left: 60%;
		width: 40%;
		height: 696px;
		background: url(../img/hatakenotsuchi/kv_5.jpg) 50% 50% no-repeat;
		background-size: cover;
	}


	.contnets-title{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -50px;
		padding: 50px 0;
		width: 720px;
		text-align: center;
		background: #fff;
		border-radius: 24px;

		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		z-index: 50;
	}

	.contnets-title h2{
		margin: 0 0 30px;
		height: 78px;
	}
	.contnets-title h2 img{
		width: auto;
		height: 78px;
	}

	.contnets-title .catch{
		width: 100%;
		height: 34px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/catch.png) 50% 0 no-repeat;
	}


	.btn-sd{
		display: none;
	}



	/* index 
	---------------------------------------------------*/

	.hatakenotsuchi-top #magazine-wrap{
		position: relative;
		background: url(../img/common/bg_base.jpg) 50% 0 repeat;
		z-index: 0;
		padding: 0 0 30px;
	}
	.hatakenotsuchi-top .magazine-contents{
		position: relative;
		z-index: 100;
	}



	.index-box{
		position: relative;
		margin: -50px auto 30px;
		padding: 40px 30px;
		width: 980px;
		border-radius: 24px;
		box-sizing: border-box;
		background: #fff;
		z-index: 100;

	}
	.index-box .index-header{
		text-align: center;
	}
	.index-box .index-header h3{
		font-size: 22px;
		font-weight: bold;
	}
	.index-box .index-header .lead{
		margin: 30px 0;
	}
	.index-box .index-header .lead p{
		font-size: 18px;
		font-weight: bold;
		color: #4c402f;
	}
	.index-box .index-header .lead p + p{
		margin-top: 20px;
	}
	.index-box .index-header .credit{
		font-size: 14px;
	}
	.index-box .index-header .credit a{
		display: inline-block;
		margin: 0 0 0 20px;
	}

	.index-box .index-header .credit span{
		display: inline-block;
		margin: 0 0 0 10px;
		width: 70px;
		height: 15px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/logo_yasaidayori.png) 0 0 no-repeat;
		background-size: auto 100%;
		vertical-align: middle;
	}
	.index-box .index-header p a{
		margin: 5px 0 0;
		display: inline-block;
		font-size: 14px;
	}
	.index-box .index-header p a:hover{
		text-decoration: underline;
	}



	/* entry header
	---------------------------------------------------*/

	.entry-header{
		position: relative;
		background: #fff;

	}

	.entry-header-inner{
		position: relative;
		margin: 0 auto;
		width: 980px;
		box-sizing: border-box;
	}

	.entry-title-box{
		position: relative;
		display: inline-block;
	}


	.entry-header .logo-hatake-new{

		position: absolute;
		top: 50%;
		left: 0;

		width: 126px;
		height: 141px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/logo_hatake_new.jpg) 50% 0 repeat;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}

	


	.entry-header .logo-hatake{

		position: absolute;
		top: 50%;
		left: 0;

		width: 126px;
		height: 126px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/logo_hatake.jpg) 50% 0 repeat;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}



	.entry-header .entry-number{
		
		position: absolute;
		top: 50%;
		left: 136px;

		width: 45px;
		text-align: center;
		font-weight: bold;
		font-size: 27px;
		
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}
	.entry-header .entry-number span{
		display: inline-block;
		width: 46px;
		height: 46px;
		line-height: 46px;
		color: #fff;
		border-radius: 23px;
		background: #5e9e45;
		font-weight: bold;

	}

	.entry-header .entry-title{
		position: relative;
		top: 50%;
		padding: 40px 0 40px 190px;
		text-align: left;
		min-height: 107px;
		vertical-align: middle;
	}






	.entry-header .entry-title .catch{
		margin: 0 0 15px;
		width: 338px;
		height: 28px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/catch.png) 0 0 no-repeat;
		background-size: auto 100%;
	}
	.entry-header .entry-title h2{
		line-height: 1;
/*		font-size: 60px;
*/		font-size: 50px;
		font-weight: bold;
	}

	.entry-header .entry-title h2 br{
		display: none;
	}

	.entry-header:after{
		content: "";
		display: block;
		width: 100%;
		height: 10px;
		background: url(../img/hatakenotsuchi/line_1.png) 50% 0 repeat-x;

	}




	/* entry body
	---------------------------------------------------*/

	.entry-body{
		margin: 0 auto;
		padding: 0 10px;
	}

	.entry-body .col{
		margin: 0 auto;
		max-width: 1020px;
		min-width: 980px;
	}


	.entry-body .credit{
		padding: 15px 30px 0;
		font-size: 12px;
	}
	.entry-body .credit em{
		font-style: normal;
	}
	.entry-body .credit a{
		color: #5e9e45;
	}

	.entry-body .credit ul{
		font-size: 0;

	}
	.entry-body .credit li{
		display: inline-block;
		font-size: 12px;
	}
	.entry-body .credit li + li:before{
		content: "|";
		display: inline-block;
		margin: 0 0.7em;
		color: #000;
	}

	.entry-body .credit a{
		color: #5e9e45;
	}




	.entry-body .credit a:hover{
		text-decoration: underline;
	}
	.entry-body .lead{
		margin: 0 auto;
		padding: 50px 0 0;
		width: 710px;
		font-size: 20px;
		font-weight: bold;
	}
	.entry-body .lead p{
		font-weight: bold;
	}
	.entry-body .profile{
		position: relative;
		margin: 30px 0 0;
		padding: 20px;
		width: 650px;
		background: #e6e6e6;
	}


	.entry-body .profile:before{
		position: absolute;
		content: "";
		top: -3.5px;
		left: 0;
		display: block;
		width: 100%;
		height: 7px;
		background: url(../img/hatakenotsuchi/bg_frame_2_h.png) 50% 0 repeat-x;
	}
	.entry-body .profile:after{
		position: absolute;
		content: "";
		bottom: -3.5px;
		left: 0;
		display: block;
		width: 100%;
		height: 7px;
		background: url(../img/hatakenotsuchi/bg_frame_2_h.png) 50% 0 repeat-x;
	}
	.entry-body .profile .profile-inner:before{
		position: absolute;
		content: "";
		top: 0;
		left: -3.5px;
		display: block;
		width: 7px;
		height: 100%;
		background: url(../img/hatakenotsuchi/bg_frame_2_v.png) 50% 0 repeat-y;
	}
	.entry-body .profile .profile-inner:after{
		position: absolute;
		content: "";
		top: 0;
		right: -3.5px;
		display: block;
		width: 7px;
		height: 100%;
		background: url(../img/hatakenotsuchi/bg_frame_2_v.png) 50% 0 repeat-y;
	}




	.entry-body .profile-box:after{
		content: "";
		display: block;
		clear: both;
		visibility: hidden;
	}	
	.entry-body .profile figure{
		float: left;
		width: 160px;
	}
	.entry-body .profile figure img{
		width: 100%;
		height: auto;
	}
	.entry-body .profile dl{
		float: left;
		margin: 0 0 0 20px;
		width: 420px;

	}
	.entry-body .profile dt{
		font-size: 24px;
		vertical-align: middle;
	}
	.entry-body .profile dt span{
		margin: 0 5px 0 0;
		font-size: 18px;
		vertical-align: middle;
	}
	.entry-body .profile dd{
		margin: 5px 0 0;
	}

	.entry-box{
		display: block !important;
	}






	/*-------- entry-topics --------*/


	.entry-topics{
		position: relative;
		margin: 30px 0 0;
	}
	.entry-topics h3{
		position: absolute;
		margin: 0 0 0 75px;
		font-size: 75px;
		color: #e6e6e6;
		font-weight: 500;
	}
	.entry-topics .topics-nav{
		margin: 0 0 0 490px;
	}		
	.entry-topics .topics-nav li + li{
		margin: 8px 0 0;
	}	
	.entry-topics .topics-nav li a{
		position: relative;
		display: block;
		padding: 0 0 0 35px;
		width: 490px;
		height: 32px;
		border-radius: 10px;
		line-height: 32px;
		font-size: 18px;
		background: #e2d6c7;

		box-sizing: border-box;
	}

	.entry-topics .topics-nav li a span{
		position: absolute;
		display: inline-block;
		top: 50%;
		left: 15px;
		height: 33px;
		color: #5e9e45;
		font-size: 18px;
		line-height: 33px;
		font-weight: 100 !important;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}

	.entry-topics .topics-nav li a:after{
		content: "";
		display: inline-block;
		position: absolute;
		right: 20px;
		top: 50%;
		margin: -7px 0 0;
		width: 8.5px;
		height: 14px;
		background: url(../img/hatakenotsuchi/arrow_nav.svg) 50% 0 no-repeat;

		-webkit-transition: transform 200ms ease;
		-o-transition: transform 200ms ease;
		transition: transform 200ms ease;

	}

	.entry-topics .topics-nav li a:hover:after{
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
		transform: translateX(5px);

	}


	.entry-col{
		padding: 60px 0 0;
	}
	.entry-col .col + .col{
		padding: 40px 0 0;
	}


	.entry-col .col .col-inner + .col-inner{
		padding: 40px 0 0;
	}
	.entry-col .col .col-inner > header{
		position: relative;
	}
	.entry-col .col .col-inner .txt{
		font-size: 20px;
	}
	.entry-col .col .col-inner .txt + .txt{
		margin-top: 30px;
	}
	.entry-col .col .col-inner .txt p{
		text-indent: 1em;
	}

	.entry-col .col header + .txt{
		margin: 40px 0 0;
	}

	.entry-col .txt h5{
		color: #5e9e45;
		font-weight: bold;
		font-size: 24px;		
	}
	.entry-col .txt h5 + .txt-inner{
		margin: 10px 0 0;	
	}



	/*-------- topics-header --------*/


	.topics-header{
		margin: 0 auto;
		width: 660px;	
	}
	.topics-header h3{
		position: relative;
		font-size: 38px;
		font-weight: bold;
		line-height: 1.2;

	}
	.topics-header h3 span{
		position: absolute;
		left: -80px;
		top: -70px;
		font-size: 120px;
		line-height: 1;
		color: #d42119;
	}




	/*-------- col-1 背景あり--------*/


	.entry-col .col-1{
		position: relative;
		background: #e2d6c7;
	}
	.entry-col .col-1 .col-inner{
		padding: 40px 0;
		margin: 0 auto;
		width: 660px;
	}



	.entry-col .col-1:before{
		position: absolute;
		content: "";
		top: -3.5px;
		left: 0;
		display: block;
		width: 100%;
		height: 7px;
		background: url(../img/hatakenotsuchi/bg_frame_1_h.png) 50% 0 no-repeat;
	}
	.entry-col .col-1:after{
		position: absolute;
		content: "";
		bottom: -3.5px;
		left: 0;
		display: block;
		width: 100%;
		height: 7px;
		background: url(../img/hatakenotsuchi/bg_frame_1_h.png) 50% 0 no-repeat;
	}
	.entry-col .col-1 .col-inner:before{
		position: absolute;
		content: "";
		top: 0;
		left: -3.5px;
		display: block;
		width: 7px;
		height: 100%;
		background: url(../img/hatakenotsuchi/bg_frame_1_v.png) 50% 0 no-repeat;
	}
	.entry-col .col-1 .col-inner:after{
		position: absolute;
		content: "";
		top: 0;
		right: -3.5px;
		display: block;
		width: 7px;
		height: 100%;
		background: url(../img/hatakenotsuchi/bg_frame_1_v.png) 50% 0 no-repeat;
	}





	/*-------- col-2 --------*/


	.entry-col .col-2 .col-inner{
		margin: 0 auto;
		width: 900px;
	}
	.entry-col .col-2 .col-inner:after{
		content: "";
		display: block;
		visibility: hidden;
		clear: both;
	}
	.entry-col .col-2 .col-box figure{
		margin: 0 0 15px;
		text-align: center;
	}
	.entry-col .col-2 .col-box figure img{
		width: 100%;
		height: auto;
	}
	.entry-col .col-2 .col-box:nth-child(1){
		float: left;
		width: calc(50% - 30px);
	}
	.entry-col .col-2 .col-box:nth-child(2){
		float: right;
		width: calc(50% - 30px);

	}




	/*-------- col-3 --------*/

	.entry-col .col-3 .col-inner{
		margin: 0 auto;
		width: 715px;
	}

	.entry-col .col-3.col-advice h4{
		position: relative;
		padding: 25px 20px;
		font-size: 30px;
		font-weight: bold;
		color: #5e9e45;

		box-sizing: border-box;
	}

	.entry-col .col-3.col-merit h4{
		position: relative;
		padding: 20px;
		font-size: 36px;
		font-weight: bold;
		color: #d42119;

		box-sizing: border-box;
	}
	.entry-col .col-3 h4:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 7px;
		background: url(../img/hatakenotsuchi/line_2.png) 50% 0 repeat-x;
	}
	.entry-col .col-3 h4:after{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 7px;
		background: url(../img/hatakenotsuchi/line_2.png) 50% 0 repeat-x;
	}

	.entry-col .col-3 .txt-box{
		position: relative;
	}
	.entry-col .col-3 .txt-box:before{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 7px;
		background: url(../img/hatakenotsuchi/line_2.png) 50% 0 repeat-x;
	}

	.entry-col .col-3 ul.box-list-1{
		padding: 20px;
	}	
	.entry-col .col-3 .box-list-1 li{
		position: relative;
		font-size: 28px;
	}
	.entry-col .col-3 .box-list-1 li:before{
		content: "-";
		margin: 0 10px 0 0;
		color: #cb0c21;

	}


	.entry-col .col-3 .txt-box dl{
		padding: 10px 0;
	}
	.entry-col .col-3 .txt-box dl dt{
		display: inline-block;
		margin: 0 10px;
		padding: 0 20px;
		height: 42px;
		line-height: 42px;
		border-radius: 10px;
		font-size: 22px;
		background: #754c24;
		color: #fff;
	}
	.entry-col .col-3 .txt-box dl dd{
		margin: 10px 20px 0;
		font-size: 18px;
	}
	.entry-col .col-3 .txt-box + .attention{
		margin: 30px 0 0;
	}




	.entry-col .col-3 .txt-box-2:after{
		content: "";
		display: block;
		visibility: hidden;
		clear: both;
	}
	.entry-col .col-3 .price{
		display: block;
		font-size: 16px;
		letter-spacing: -1px;
	}
	.entry-col .col-3 .price span{
		color: #5e9e45;
	}
	.entry-col .col-3 .txt-box-2{
		padding: 30px 0;
	}
	.entry-col .col-3 .txt-box-2 dl{
		padding: 0;
		float: left;
		width: 480px;
	}
	.entry-col .col-3 .txt-box-2 dl dd{
		font-size: 18px;
		margin: 10px 0 0 20px;

	}
	.entry-col .col-3 .txt-box-2 ul{
		float: right;
		width: 200px;
		vertical-align: top;
	}
	.entry-col .col-3 .txt-box-2 ul li{
		position: relative;
		font-size: 22px;
		font-weight: bold;
		text-align: center;	
	}
	.entry-col .col-3 .txt-box-2 ul li:after{
		content: "";
		display: block;
		width: 100%;
		height: 5px;
		background: url(../img/hatakenotsuchi/line_3.png) 50% 0 repeat-x;

	}






	/*-------- col-4 --------*/

	.entry-col .col-4 .col-inner{
		margin: 0 auto;
		width: 700px;
	}



	/*-------- col-5 --------*/

	.entry-col .col-5{
		position: relative;
	}
	.entry-col .col-5 .col-inner{
		padding: 40px 0;
		margin: 0 auto;
		width: 900px;
	}





	/*-------- point-title --------*/


	.point-title h3{
		position: relative;
	}
	.point-title h3 span{
		display: inline-block;
		margin: 0 15px 0 0;
		width: 80px;
		height: 80px;
		border-radius: 50px;
		font-size: 16px;
		line-height: 80px;
		color: #fff;
		text-align: center;
		font-weight: bold;
		background: #d42119;
		vertical-align: middle;
	}
/*	.point-title h3 strong{
		display: inline-block;
		font-size: 36px;
		font-weight: bold;
		line-height: 1.2;
		vertical-align: middle;

	}*/
	.point-title h3 strong{
		position: absolute;
		top: 50%;
		left: 95px;
		display: inline-block;
		font-size: 36px;
		font-weight: bold;
		line-height: 1.4;
		vertical-align: middle;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}
	.bg-box .point-title h3 strong{
		font-size: 24px;		
	}
	.bg-box .point-title{
		margin-bottom: 20px;
	}
	



	/*-------- flow --------*/


	.flow-title + .txt{
		margin: 20px 0 0;
	}


	.flow-title h4{
		position: relative;
		font-size: 34px;
	}
	.flow-title h4 span{
		display: inline-block;
		margin: 0 25px 0 0;
		width: 65px;
		height: 65px;
		border-radius: 10px;
		text-align: center;
		font-size: 48px;
		line-height: 65px;
		color: #fff;
		background: #754c24;
		vertical-align: middle;

	}
	.flow-title h4 strong{
		vertical-align: middle;
	}

	.flow-list li{
		font-size: 18px;
	}
	.flow-list li span{
		color: #7c5641;
	}


	.flow-img:after{
		content: "";
		display: block;
		clear: both;
		visibility: hidden;
	}
	.flow-img figure span{
		position: absolute;
		display: inline-block;
		width: 32px;
		height: 32px;
		color: #754c24;
		font-size: 18px;
		text-align: center;
		line-height: 32px;	
		background: #fff;
	}
	.flow-img figure{
		position: relative;
	}

	.flow-img figure img{
		width: 100%;
		height: auto;
	}




	.flow-box{
		margin: 20px 0 0;
	}
	.flow-box dt{
		font-weight: bold;
		font-size: 20px;
	}
	.flow-box dd{
		margin: 20px 0 0;
	}







	/*-------- img title --------*/


	.img-title + .txt{
		margin: 20px 0 0;
	}


	.img-title h4{
		position: relative;
		font-size: 24px;
	}
	.img-title h4 span{
		display: inline-block;
		margin: 0 15px 0 0;
		padding: 0 10px;
		border-radius: 10px;
		text-align: center;
		font-size: 24px;
		color: #fff;
		background: #754c24;
		font-weight: bold;
		vertical-align: middle;

	}
	.img-title h4 strong{
		vertical-align: middle;
		font-weight: bold;
	}









	/*-------- attention --------*/



	.entry-col .attention{
		padding: 25px;
		background: #e6e6e6;
		border-radius: 10px;
	}
	.entry-col .attention dt,
	.entry-col .attention h6{
		position: relative;
		margin: 0 0 20px 0;
		font-size: 24px;
	}
	.entry-col .attention dd,
	.entry-col .attention .attention-txt p{
		text-indent: 1em;
	}

/*	.entry-col .attention dt strong,
	.entry-col .attention h6 strong{
		position: absolute;
		display: block;
		top: 50%;
		left: 105px;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}*/

	.entry-col .attention dt strong,
	.entry-col .attention h6 strong{
		position: relative;
		display: block;
		padding-left: 105px;

	}

	.entry-col .attention span{
		position: absolute;
		display: block;
		left: 0;
		top: 50%;
		width: 94px;
		height: 94px;
		border-radius: 47px;
		border: 6px solid #d42119;
		color: #d42119;
		font-size: 23px;
		font-weight: bold;
		text-align: center;
		line-height: 82px;
		box-sizing: border-box;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}


/*	.entry-col .attention span{
		position: relative;
		display: block;
		width: 94px;
		height: 94px;
		border-radius: 47px;
		border: 6px solid #d42119;
		color: #d42119;
		font-size: 23px;
		font-weight: bold;
		text-align: center;
		line-height: 82px;
		box-sizing: border-box;
	}
*/

	.entry-col .attention figure img{
		width: 100%;
		height: auto;
	}
	.entry-col .attention figcaption{
		margin-top: 10px;
		color: #000;
		font-size: 15px;
	}
	


	/*-------- important --------*/

	.entry-col .important{
		padding: 25px;
		background: #f1e9c6;
		border-radius: 10px;
	}
	.entry-col .important dt{
		position: relative;
		margin: 0 0 20px 0;
		font-size: 24px;

	}
	.entry-col .important dd{
		text-indent: 1em;
	}
	.entry-col .important dt strong{
		position: absolute;
		display: block;
		top: 50%;
		left: 105px;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}
	.entry-col .important span{
		position: relative;
		display: block;
		width: 94px;
		height: 94px;
		border-radius: 47px;
		color: #fff;
		font-size: 23px;
		font-weight: bold;
		text-align: center;
		line-height: 94px;
		box-sizing: border-box;
		background: #d42119;
	}





	/*-------- number-list --------*/


	.number-list{
		position: relative;
		margin: 20px 0 0;
		font-size: 0;
/*		background: rgba(255,255,255,0.8);
*/		z-index: 20;
	}
	.number-list li{
		display: inline-block;
		width: calc(50% - 15px);
		width: -webkit-calc(50% - 15px);
		margin: 10px 0 0;
		vertical-align: top;
	}
	.number-list li:nth-child(even){
		margin-left:15px;

	}
	.number-list li dt{
		margin: 0 0 10px;
		font-weight: bold;
		font-size: 22px;
		vertical-align: middle;
	}
	.number-list li dd{
		font-size: 16px;
	}
	.number-list li dt span{
		display: inline-block;
		margin: 0 10px 0 0;
		width: 34px;
		height: 34px;
		border-radius: 5px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		line-height: 34px;
		color: #fff;
		background: #549b35;
		font-weight: bold;
		vertical-align: middle;
	}
	.number-list li dt strong{
		font-weight: bold;
		vertical-align: middle;

	}





	/*-------- cap-list --------*/


	.cap-list{
		position: relative;
		margin: 20px 0 0;
		font-size: 0;
		z-index: 20;
	}
	.cap-list li{
		display: inline-block;
		width: calc(50% - 15px);
		width: -webkit-calc(50% - 15px);
		margin: 10px 0 0;
		vertical-align: top;
	}
	.cap-list li:nth-child(even){
		margin-left:15px;

	}
	.cap-list li dt{
		margin: 0 0 5px;
		font-weight: bold;
		font-size: 22px;
		vertical-align: middle;
	}
	.cap-list li dd{
		font-size: 16px;
	}
	.cap-list li dt span{
		display: inline-block;
		margin: 0 0 5px;
		padding: 0 15px;
		height: 34px;
		border-radius: 17px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 34px;
		color: #fff;
		background: #549b35;
		font-weight: bold;
		vertical-align: middle;
	}
	.cap-list li dt strong{
		display: block;
		font-weight: bold;
		vertical-align: middle;

	}








	/* btm-link
	---------------------------------------------------*/

	#btm-link{
		display: none;
	}



	/* page-nav
	---------------------------------------------------*/


	#magazine-pager{
		display: none;
	}

	#page-nav{
		margin: 80px auto 0;
		padding: 40px 0;
		font-size: 0;
		background: #eeeeee;
	}
	#page-nav .page-nav-inner{
		display: flex;
		padding: 0 20px;
		margin: 0 auto 0;
		width: 980px;
		box-sizing: border-box;
	}
	#page-nav ul{
		width: 50%;
		padding: 0 40px 0 0;
		box-sizing: border-box;
	}
	#page-nav li + li{
		margin: 20px 0 0;
	}
	#page-nav li h4{
		position: relative;
		display: flex;
	}
	#page-nav li strong{
		position: absolute;
		top: 50%;
		left: 0;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		margin: 0 15px 0 0;
		height: 30px;
		width: 65px;
		display: block;
		font-size: 16px;
		font-weight: bold;
		line-height: 30px;
	}
	#page-nav li strong i{
		position: absolute;
		display: inline-block;
		font-style: normal;
		height: 30px;
		line-height: 30px;
	}
	#page-nav li strong i:nth-child(1),
	#page-nav li strong i:nth-child(3){
		top: 0;
	}
	#page-nav li strong i:nth-child(1){
		left: 0;
	}
	#page-nav li strong i:nth-child(3){
		right: 0;
	}
	#page-nav li strong i:nth-child(2){
		left: 50%;
		top: 50%;
		height: 25px;
		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}

	#page-nav li strong img{
		width: auto;
		height: 25px;
		vertical-align: top;
	}
	#page-nav li a{
		position: relative;
		display: block;
		font-size: 16px;
		color: #212020;
		-webkit-transition: opacity 200ms ease;
		-o-transition: opacity 200ms ease;
		transition: opacity 200ms ease;
	}
	#page-nav li a em{
		font-style: normal;
		display: block;
		padding: 0 0 0 80px;
		height: 30px;
		line-height: 30px;
	}
	#page-nav li a em span{
		font-size: 12px;
		vertical-align: middle;
	}
	#page-nav li a .arrow{
		position: absolute;
		top: 50%;
		right: 0;
		display: block;
		width: 36px;
		height: 36px;
		background: #342b1a;
		border-radius: 5px;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#page-nav li a .arrow:after {
		content: "";
		position: absolute;
		margin: auto;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		display: block;
		width: 18px;
		height: 8px;
		background: url(../img/common/arrow_r.svg) 50% 50% no-repeat;
		-webkit-transition: transform 200ms ease;
		-o-transition: transform 200ms ease;
		transition: transform 200ms ease;
	}
	#page-nav li a:hover .arrow:after{
		-webkit-transform: translateX(3px);
		-ms-transform: translateX(3px);
		-o-transform: translateX(3px);
		transform: translateX(3px);
	}
	#page-nav li a:hover,
	#page-nav li a.active{
		opacity: 0.6;
	}
	#page-nav li strong.last{
		padding: 0 0 0 5px;
		border-radius: 6px;
		line-height: 30px;
		font-size: 14px;
		background: #342b1a;
		letter-spacing: 5px;
		text-align: center;
		color: #fff;
	}




	/* product
	---------------------------------------------------*/

	#product{
		margin: 100px auto;
		width: 750px;
	}


	#product h6{
		margin: 0 auto 30px;
		text-align: center;
		font-size: 28px;
		font-weight: bold;
	}

	#product .product-list:after{
		content: "";
		display: block;
		clear: both;
		visibility: hidden;
	}

	#product .product-list{
		padding: 25px;
		background: #fff;
		border: 3px solid #5e9e45;
		border-radius: 15px;
	}
	#product .product-list a{
		display: block;
		-webkit-transition: opacity 200ms ease;
		-o-transition: opacity 200ms ease;
		transition: opacity 200ms ease;
	}
	#product .product-list a:hover{
		opacity: 0.8;
	}



	#product figure{
		float: left;
		width: 250px;
	}

	#product dl{
		float: right;
		width: 420px;
	}

	#product dl dt{
		font-size: 20px;
		line-height: 1.4;
		font-weight: bold;
	}
	#product dl dd{
		margin: 10px 0 0;
		font-size: 16px;
	}






}





@media screen and (min-width: 737px) and (max-width: 1080px){





}





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




	body#magazine{
		font-size: 13px;
		line-height: 1.8;
	}

	body.no-scroll{
		overflow: hidden;
	}

	.ignore-sp{
		display: none;
	}

	#magazine-wrap{
		position: relative;
		background: url(../img/hatakenotsuchi/bg_note.png) 50% 0 repeat;

	}

	.col figure img{
		width: auto;
	}


	.bg-box1{
		padding: 15px;
		background: #f1e9c6;
		border-radius: 10px;
	}


	footer,#footer,header{
		position: relative;
	}






	/* pankuzu
	---------------------------------------------------*/

	#pankuzu-nav{
		position: relative;
		background: #e2d6c7;
	}
	#pankuzu-nav:before{
		content: "";
		display: block;
		top: -1.5px;
		left: 0;
		width: 100%;
		height: 3px;
		background: url(../img/hatakenotsuchi/bg_frame_1_h.png) 50% 0 repeat-x;
		background-size: auto 100%; 
	}
	#pankuzu-nav:after{
		content: "";
		display: block;
		bottom: -1.5px;
		left: 0;
		width: 100%;
		height: 3px;
		background: url(../img/hatakenotsuchi/bg_frame_1_h.png) 50% 0 repeat-x;
		background-size: auto 100%; 
	}


	.pankuzu-nav-inner{
		margin: auto;
		padding: 0 5px;
		max-width: 980px;
		height: 36px;

		box-sizing: border-box;
	}
	#pankuzu-nav{
		font-size: 0;

	}
	#pankuzu-nav ul{
	
	}
	#pankuzu-nav li{
		display: inline-block;
		font-size: 10px;
		line-height: 36px;
	    overflow: hidden;

	}

	#pankuzu-nav li:nth-child(3){
	  	text-overflow: ellipsis;
	    white-space: nowrap;
	    width: 32%;			
	}

	#pankuzu-nav li + li:before{
		content: "";
		margin: 0 0 0 10px;
		padding: 0 0 0 10px;
		width: 5px;
		height: 9px;
		display: inline-block;
		background: url(../img/common/arrow_pankuzu.svg) 0 50% no-repeat;
		vertical-align: middle;
	}					
	#pankuzu-nav a{
		color: #8d7756;
	}
	#pankuzu-nav li.active a,
	#pankuzu-nav li a.touched{
		color: #342b1a;
	}





	/* kv
	---------------------------------------------------*/


	.kv-wrap{
		position: relative;
		width: 100%;
	}

	.kv{
		display: none;
	}
	.kv-sp{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../img/hatakenotsuchi/kv_sp.jpg) 50% 50% no-repeat;
		background-size: cover;
	}


	.contnets-title{
		position: fixed;
		left: 50%;
		top: 50%;
		padding: 0 12px;
		width: 100%;
		text-align: center;

		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);

		box-sizing: border-box;
		z-index: 10;
	}

	.contnets-title .title-inner{
		padding: 20px 0;
		width: 100%;
		border-radius: 12px;
		background: #fff;
	}


	.contnets-title h2{
		margin: 0 0 17px;
		height: 46px;
	}
	.contnets-title h2 img{
		width: auto;
		height: 46px;
	}

	.contnets-title .catch{
		width: 100%;
		height: 19px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/catch.png) 50% 0 no-repeat;
		background-size: auto 100%;
	}


	.btn-sd{
		position: fixed;
		display: block;
		left: 0;
		bottom: 10px;
		z-index: 10;
	}
	.btn-sd{
		display: block;
		left: 50%;
		margin-left: -28px;
		bottom: 20px;
		width: 56px;
		height: 43px;
		background: url(../img/hatakenotsuchi/btn_sd.png) 50% 0 no-repeat;
		background-size: auto 100%;
		z-index: 10;

		animation: sd 1400ms ease infinite;
		animation-fill-mode: both;

	}
	.btn-sd a{
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
	}


	/* index 
	---------------------------------------------------*/



	.hatakenotsuchi-top #magazine-wrap{
		position: relative;
		background: none;
		z-index: 0;
	}

	.hatakenotsuchi-top .magazine-inner{
		position: relative;
/*		padding-top: 1px;
*/		background: url(../img/common/bg_base.jpg) 50% 0 repeat;
		z-index: 50;
	}

	.hatakenotsuchi-top .magazine-contents{
		position: relative;
		padding: 30px 0;
		z-index: 100;
	}

	.index-box{
		position: relative;
		margin: 0 12px 30px;
		padding: 30px 15px;
		border-radius: 12px;
		box-sizing: border-box;
		background: #fff;
	}
	.index-box .index-header{
		text-align: center;
	}

	.index-box .index-header h3{
		font-size: 17px;
		font-weight: bold;
	}
	.index-box .index-header .lead{
		margin: 20px 0 15px;
	}
	.index-box .index-header .lead p{
		font-size: 12px;
		font-weight: bold;
		color: #4c402f;
	}
	.index-box .index-header .lead p + p{
		margin-top: 20px;
	}

/*
	.index-box .index-header .lead{
		margin: 0 0 15px;
		font-size: 12px;
	}*/
	.index-box .index-header .credit{
		margin: 0 0 20px;
		font-size: 10px;
	}
	.index-box .index-header .credit a{
		display: inline-block;
		margin: 0 0 0 15px;
	}
	.index-box .index-header .credit span{
		display: inline-block;
		margin: 0 0 0 5px;
		width: 47px;
		height: 10px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/logo_yasaidayori.png) 0 0 no-repeat;
		background-size: auto 100%;
		vertical-align: middle;
	}
	.index-box .index-header p a{
		margin: 5px 0 0;
		display: inline-block;
		font-size: 10px;
	}



	/* entry header
	---------------------------------------------------*/

	.entry-header{
		position: relative;
		width: 100%;
		background: #fff;
	}
	.entry-header-inner{
		position: relative;
		padding: 0 10px;
		text-align: left;
	}

	.entry-title-box{
		position: relative;
		display: inline-block;
	}



	.entry-header .logo-hatake-new{

		position: absolute;
		top: 50%;
		left: 0;

		width: 56.5px;
		height: 63px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/logo_hatake_new.jpg) 50% 0 repeat;
		background-size: 100% 100%; 


		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}


	.entry-header .logo-hatake{

		position: absolute;
		top: 50%;
		left: 0;

		width: 56.5px;
		height: 56.5px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/logo_hatake.jpg) 50% 0 repeat;
		background-size: 100% 100%; 

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}





	.entry-header .entry-number{
		
		position: absolute;
		top: 50%;
		left: 62px;

		width: 21px;
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}
	.entry-header .entry-number span{
		display: inline-block;
		width: 21px;
		height: 21px;
		line-height: 21px;
		color: #fff;
		border-radius: 12px;
		font-weight: bold;

		background: #5e9e45;

	}

	.entry-header .entry-title{
		position: relative;
		top: 50%;
		padding: 15px 0 15px 88px;
		text-align: left;
		vertical-align: middle;
	}
	.entry-header .entry-title .catch{
		margin: 0 0 10px;
		width: 100%;
		height: 13px;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/catch.png) 0 0 no-repeat;
		background-size: auto 100%; 
	}
	.entry-header .entry-title h2{
		line-height: 1;
		font-size: 26px;
		font-weight: bold;
		text-align: left;

	}
	.entry-header:after{
		content: "";
		display: block;
		width: 100%;
		height: 10px;
		background: url(../img/hatakenotsuchi/line_1.png) 50% 0 repeat-x;

	}




	/* entry body
	---------------------------------------------------*/

	.entry-body{
		margin: 0 auto;
		padding: 0 20px;
	}

	.entry-body .col{
		margin: 0 auto;
	}


	.entry-body .credit{
		margin: 0 -10px;
		padding: 15px 0 0;
		font-size: 7px;
	}
	.entry-body .credit em{
		display: inline-block;
		font-size: 7px;
		text-align: left;
		font-style: normal;
	}

	.entry-body .credit ul{
		font-size: 0;

	}
	.entry-body .credit li{
		display: inline-block;
		font-size: 7px;
	}
	.entry-body .credit li:first-child{
		display: block;
	}	
	.entry-body .credit li:after{
		content: "|";
		display: inline-block;
		margin: 0 0.5em;
		color: #000;
	}
	.entry-body .credit li:last-child:after{
		display: none;
	}	

	.entry-body .credit a{
		color: #5e9e45;
	}

	.entry-body .lead{
		margin: 0 auto;
		padding: 20px 0 0;
		font-size: 13px;
		font-weight: bold;
	}
	.entry-body .lead p{
		font-weight: bold;
	}
	.entry-body .profile{
		position: relative;
		margin: 30px 0 0;
		padding: 15px;
		background: #e6e6e6;
	}
	.entry-body .profile-box:after{
		content: "";
		display: block;
		clear: both;
		visibility: hidden;
	}	



	.entry-body .profile:before{
		position: absolute;
		content: "";
		top: -1.5px;
		left: 0;
		display: block;
		width: 100%;
		height: 3px;
		background: url(../img/hatakenotsuchi/bg_frame_2_h.png) 50% 0 repeat-x;
		background-size: auto 100%;
	}
	.entry-body .profile:after{
		position: absolute;
		content: "";
		bottom: -1.5px;
		left: 0;
		display: block;
		width: 100%;
		height: 3px;
		background: url(../img/hatakenotsuchi/bg_frame_2_h.png) 50% 0 repeat-x;
		background-size: auto 100%;
	}
	.entry-body .profile .profile-inner:before{
		position: absolute;
		content: "";
		top: 0;
		left: -1.5px;
		display: block;
		width: 3px;
		height: 100%;
		background: url(../img/hatakenotsuchi/bg_frame_2_v.png) 50% 0 repeat-y;
		background-size: 100% auto;
	}
	.entry-body .profile .profile-inner:after{
		position: absolute;
		content: "";
		top: 0;
		right: -1.5px;
		display: block;
		width: 3px;
		height: 100%;
		background: url(../img/hatakenotsuchi/bg_frame_2_v.png) 50% 0 repeat-y;
		background-size: 100% auto;
	}



	.entry-body .profile figure{
		float: left;
		width: 120px;
	}
	.entry-body .profile figure img{
		width: 100%;
		height: auto;
	}
	.entry-body .profile dl{
		float: right;
		margin: 0 0 0 15px;
		width: calc(100% - 135px);

	}
	.entry-body .profile dt{
		font-size: 12px;
	}
	.entry-body .profile dt span{
		margin: 0 2px 0 0;
		font-size: 12px;
	}
	.entry-body .profile dd{
		margin: 5px 0 0;
		font-size: 11px;
	}

	/*-------- entry-topics --------*/


	.entry-topics{
		margin: 20px 0 0;
	}
	.entry-topics h3{
		font-size: 25px;
/*		color: #5e9e45;
*/		color: #e6e6e6;
		font-weight: 500;
	}
	.entry-topics .topics-nav{
		margin: 10px 0 0;
	}		
	.entry-topics .topics-nav li + li{
		margin: 8px 0 0;
	}	
	.entry-topics .topics-nav li a{
		position: relative;
		display: block;
		padding: 0 0 0 28px;
		height: 26px;
		border-radius: 5px;
		line-height: 26px;
		font-size: 12px;
		background: #e2d6c7;

		box-sizing: border-box;
	}

	.entry-topics .topics-nav li a span{
		position: absolute;
		display: inline-block;
		top: 50%;
		left: 9px;
		color: #5e9e45;
		font-size: 20px;
		line-height: 1;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}

	.entry-topics .topics-nav li a:after{
		content: "";
		display: inline-block;
		position: absolute;
		right: 10px;
		top: 50%;
		margin: -4.5px 0 0;
		width: 6px;
		height: 9px;
		background: url(../img/hatakenotsuchi/arrow_nav.svg) 50% 0 no-repeat;

		-webkit-transition: transform 200ms ease;
		-o-transition: transform 200ms ease;
		transition: transform 200ms ease;

	}

	.entry-topics .topics-nav li a.touched:after{
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		-o-transform: translateX(5px);
		transform: translateX(5px);

	}


	.entry-col{
		padding: 60px 0 0;
	}


	.entry-col .col .col-inner + .col-inner{
		padding: 20px 0 0;
	}
	.entry-col .col .col-inner > header{
		position: relative;
	}
	.entry-col .col .col-inner .txt{
		margin: 15px 0 0;
		font-size: 13px;
	}
	.entry-col .col .col-inner .txt p{
		text-indent: 1em;
	}

	.entry-col .col + .col{
		padding: 20px 0 0;
	}

	.entry-col .col header + .txt{
		margin: 20px 0 0;
	}
	.entry-col .txt h5{
		color: #5e9e45;
		font-weight: bold;
		font-size: 14px;	
	}
	.entry-col .txt h5 + .txt-inner{
		margin: 10px 0 0;	
	}



	/*-------- topics-header --------*/


	.topics-header{
		margin: 0 auto;
/*		width: 660px;	
*/	}
	.topics-header h3{
		position: relative;
		padding: 0 0 0 50px;
		font-size: 24px;
		font-weight: bold;
		line-height: 1.2;

	}
	.topics-header h3 span{
		position: absolute;
		top: -40px;
		left: 0;
		font-size: 80px;
		line-height: 1;
		color: #d42119;
	}





	/*-------- col-1 --------*/

	.entry-col .col-1{
		position: relative;
		margin: 0 -20px;
		background: #e2d6c7;
	}

	.entry-col .col-1 .col-inner{
		padding: 20px;
	}

	.entry-col .col-1:before{
		position: absolute;
		content: "";
		top: -1.5px;
		left: 0;
		display: block;
		width: 100%;
		height: 3px;
		background: url(../img/hatakenotsuchi/bg_frame_1_h.png) 50% 0 no-repeat;
		background-size: auto 100%; 
	}
	.entry-col .col-1:after{
		position: absolute;
		content: "";
		bottom: -1.5px;
		left: 0;
		display: block;
		width: 100%;
		height: 3px;
		background: url(../img/hatakenotsuchi/bg_frame_1_h.png) 50% 0 no-repeat;
		background-size: auto 100%; 

	}





	/*-------- col-2 --------*/


	.entry-col .col-2 .col-box figure{
		margin: 0 0 10px;
		text-align: center;
	}
	.entry-col .col-2 .col-box figure img{
		width: 100%;
		height: auto;
	}
	.entry-col .col-2 .col-box + .col-box{
		margin-top: 30px;
	}






	/*-------- col-3 --------*/

	.entry-col .col-3 .col-inner{
		margin: 0 -10px;
	}

	.entry-col .col-3.col-advice h4{
		position: relative;
		padding: 10px 22px;
		font-size: 15px;
		font-weight: bold;
		color: #5e9e45;

		box-sizing: border-box;
	}

	.entry-col .col-3.col-merit h4{
		position: relative;
		padding: 10px 22px;
		font-size: 18px;
		font-weight: bold;
		color: #d42119;

		box-sizing: border-box;
	}
	.entry-col .col-3 h4:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 3.5px;
		background: url(../img/hatakenotsuchi/line_2.png) 50% 0 repeat-x;
		background-size: auto 100%;
	}
	.entry-col .col-3 h4:after{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 3.5px;
		background: url(../img/hatakenotsuchi/line_2.png) 50% 0 repeat-x;
		background-size: auto 100%;
	}

	.entry-col .col-3 .txt-box{
		position: relative;
	}
	.entry-col .col-3 .txt-box:before{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 3.5px;
		background: url(../img/hatakenotsuchi/line_2.png) 50% 0 repeat-x;
		background-size: auto 100%;
	}

	.entry-col .col-3 ul.box-list-1{
		padding: 10px 20px 13px 20px;
	}	
	.entry-col .col-3 .box-list-1 li{
		position: relative;
		font-size: 16px;
	}
	.entry-col .col-3 .box-list-1 li:before{
		content: "-";
		margin: 0 10px 0 0;
		color: #cb0c21;

	}


	.entry-col .col-3 .txt-box dl{
		padding: 10px 0;
	}
	.entry-col .col-3 .txt-box dl dt{
		display: inline-block;
		margin: 0 5px;
		padding: 0 10px;
		height: 21px;
		line-height: 21px;
		border-radius: 5px;
		font-size: 14px;
		background: #754c24;
		color: #fff;
	}
	.entry-col .col-3 .txt-box dl dd{
		margin: 10px 10px 0;
		font-size: 13px;
	}

	.entry-col .col-3 .txt-box-2:after{
		content: "";
		display: block;
		visibility: hidden;
		clear: both;
	}
	.entry-col .col-3 .price{
		display: block;
		font-size: 12px;
		letter-spacing: -1px;
	}
	.entry-col .col-3 .price span{
		color: #5e9e45;
	}
	.entry-col .col-3 .txt-box-2{
		padding: 15px 0 18px;
	}
	.entry-col .col-3 .txt-box-2 dl{
		padding: 0;
	}
	.entry-col .col-3 .txt-box-2 dl dd{
		margin: 10px 10px 0;
		font-size: 13px;

	}
	.entry-col .col-3 .txt-box-2 ul{
		margin: 15px auto 0;
		width: 200px;
	}
	.entry-col .col-3 .txt-box-2 ul li{
		position: relative;
		font-size: 12px;
		font-weight: bold;
		text-align: center;	
	}
	.entry-col .col-3 .txt-box-2 ul li:after{
		content: "";
		display: block;
		width: 100%;
		height: 5px;
		background: url(../img/hatakenotsuchi/line_3.png) 50% 0 repeat-x;

	}





	/*-------- col-5 --------*/

	.entry-col .col-5{
		position: relative;
	}
	.entry-col .col-5 .col-inner{
		padding: 20px 0;
		margin: 0 auto;
		width: 100%;
	}




	/*-------- point-title --------*/




	.point-title h3 span{
		display: inline-block;
		margin: 0 10px 0 0;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		font-size: 8px;
		line-height: 40px;
		color: #fff;
		text-align: center;
		font-weight: bold;
		background: #d42119;
		vertical-align: middle;
	}
	.point-title h3 strong{
		display: inline-block;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.2;
		vertical-align: middle;

	}





	/*-------- flow --------*/


	.flow-title h4{
		position: relative;
		font-size: 18px;
	}
	.flow-title h4 span{
		display: inline-block;
		margin: 0 10px 0 0;
		width: 34px;
		height: 34px;
		border-radius: 5px;
		text-align: center;
		font-size: 24px;
		line-height: 34px;
		color: #fff;
		background: #754c24;
		vertical-align: middle;

	}
	.flow-title h4 strong{
		vertical-align: middle;
	}

	.flow-list li{
		font-size: 13px;
	}
	.flow-list li span{
		color: #7c5641;
	}

	.flow-img figure span{
		position: absolute;
		display: inline-block;
		width: 24px;
		height: 24px;
		color: #754c24;
		font-size: 13px;
		text-align: center;
		line-height: 24px;	
		background: #fff;
	}

	.flow-img figure img{
		width: 100%;
		height: auto;
	}



	.flow-box{
		margin: 20px 0 0;
	}
	.flow-box dt{
		font-weight: bold;
		font-size: 16px;
		line-height: 1.5;
	}
	.flow-box dd{
		margin: 10px 0 0;
	}
	.flow-box .flow-img:after{
		content: "";
		display: block;
		visibility: hidden;
		clear: both;
	}
	.flow-box .flow-img{
		margin: 20px auto 0;
		width: 70%;
	}
	.flow-box .flow-img figure + figure{
		margin-top: 15px; 
	}	


	/*-------- img title --------*/


	.img-title + .txt{
		margin: 20px 0 0;
	}


	.img-title h4{
		position: relative;
		font-size: 16px;
	}
	.img-title h4 span{
		display: inline-block;
		margin: 0 10px 0 0;
		padding: 0 10px;
		border-radius: 10px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		background: #754c24;
		font-weight: bold;
		vertical-align: middle;

	}
	.img-title h4 strong{
		vertical-align: middle;
		font-weight: bold;
	}







	/*-------- attention --------*/


	.entry-col .attention{
		margin: 15px 0 0;
		padding: 15px;
		background: #e6e6e6;
		border-radius: 5px;
	}
	.entry-col .attention dt,
	.entry-col .attention h6{
		position: relative;
		margin: 0 0 10px 0;
		font-size: 14px;
	}
	.entry-col .attention dd,
	.entry-col .attention .attention-txt p{
		text-indent: 1em;
	}

	.entry-col .attention dt strong,
	.entry-col .attention h6 strong{
		position: relative;
		display: block;
		padding-left: 55px;

	}



	.entry-col .attention span{
		position: absolute;
		display: block;
		left: 0;
		top: 50%;
		width: 46px;
		height: 46px;
		border-radius: 23px;
		border: 3px solid #d42119;
		color: #d42119;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		line-height: 40px;
		box-sizing: border-box;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}

	.entry-col .attention figure{
		max-width: 375px;
		margin: 15px auto 0;

	}
	.entry-col .attention figure img{
		width: 100%;
		height: auto;
	}
	.entry-col .attention figcaption{
		max-width: 375px;
		margin: 10px auto 0;
		color: #000;
		font-size: 13px;
	}
	



	/*-------- important --------*/

	.entry-col .important{
		padding: 25px;
		background: #f1e9c6;
		border-radius: 5px;
	}
	.entry-col .important dt{
		position: relative;
		margin: 0 0 10px 0;
		font-size: 14px;

	}
	.entry-col .important dd{
		text-indent: 1em;
	}
	.entry-col .important dt strong{
		position: absolute;
		display: block;
		top: 50%;
		left: 56px;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

	}
	.entry-col .important span{
		position: relative;
		display: block;
		width: 46px;
		height: 46px;
		border-radius: 23px;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		line-height: 46px;
		box-sizing: border-box;
		background: #d42119;
	}




	/* pager
	---------------------------------------------------*/


	#magazine-pager{
		padding: 30px 12px;
		font-size: 0;
		text-align: center;
	}
	#magazine-pager li{
		display: inline-block;
		vertical-align: top;

	}
	#magazine-pager li.page + li.page{
		margin: 0 0 0 12px;
	}
	#magazine-pager li.page a{
		display: block;
		width: 23px;
		height: 23px;
		font-size: 23px;
		line-height: 23px;
		color: #b3b3b3;
	}
	#magazine-pager li.prev{
		margin: 0 50px 0 0;
		width: 12px;
		height: 22.5px;
	}
	#magazine-pager li.prev a{
		display: block;
		width: 12px;
		height: 22.5px;
		font-size: 23px;
		color: #b3b3b3;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/arrow_prev.svg) 50% 0 no-repeat;

	}
	#magazine-pager li.prev.hide a{
		display: none;
	}

	#magazine-pager li.next{
		margin: 0 0 0 50px;
		width: 12px;
		height: 22.5px;
	}
	#magazine-pager li.next a{
		display: block;
		width: 12px;
		height: 22.5px;
		font-size: 23px;
		color: #b3b3b3;
		text-indent: -9999px;
		background: url(../img/hatakenotsuchi/arrow_next.svg) 50% 0 no-repeat;

	}
	#magazine-pager li.next.hide a{
		display: none;
	}

	#magazine-pager li.on a,
	#magazine-pager li a:hover{
		display: block;
		color: #000;

	}






	/*-------- number-list --------*/


	.number-list{
		position: relative;
		margin: 20px 0 0;
		font-size: 0;
		background: rgba(255,255,255,0.8);
		z-index: 20;
	}
	.number-list li{
		vertical-align: top;
	}
	.number-list li + li{
		margin-top : 10px;

	}
	.number-list li dt{
		margin: 0 0 10px;
		font-weight: bold;
		font-size: 16px;
		vertical-align: middle;
	}
	.number-list li dd{
		font-size: 13px;
	}
	.number-list li dt span{
		display: inline-block;
		margin: 0 10px 0 0;
		width: 28px;
		height: 28px;
		border-radius: 5px;
		text-align: center;
		font-size: 18px;
		line-height: 28px;
		color: #fff;
		background: #549b35;
		vertical-align: middle;
	}
	.number-list li dt strong{
		font-weight: bold;

	}



	/*-------- cap-list --------*/


	.cap-list{
		position: relative;
		margin: 20px 0 0;
		font-size: 0;
		z-index: 20;
	}
	.cap-list li{
		vertical-align: top;
	}
	.cap-list li + li{
		margin-top : 20px;

	}
	.cap-list li dt{
		margin: 0 0 5px;
		font-weight: bold;
		font-size: 16px;
		vertical-align: middle;
	}
	.cap-list li dd{
		font-size: 13px;
	}
	.cap-list li dt span{
		display: inline-block;
		margin: 0 0 5px;
		padding: 0 15px;
		height: 28px;
		border-radius: 17px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		line-height: 28px;
		color: #fff;
		background: #549b35;
		font-weight: bold;
		vertical-align: middle;
	}
	.cap-list li dt strong{
		display: block;
		font-weight: bold;
		vertical-align: middle;

	}







	/* btm-link
	---------------------------------------------------*/

	#btm-link{
		padding: 45px 0;
		background: #e6e6e6;
	}
	#btm-link li{
		text-align: center;
	}
	#btm-link li + li{
		margin: 30px 0 0;
	}
	#btm-link a{
		color: #000;
		font-size: 12px;
		font-weight: bold;
	}




	/* page-nav
	---------------------------------------------------*/

/*	#magazine-pager{
		display: none;
	}*/

	#page-nav{
		margin: 50px auto 0;
		padding: 40px 0;
		font-size: 0;
		background: #eeeeee;
	}
	#page-nav .page-nav-inner{
		padding: 0 10px;
		margin: 0 auto 0;
		box-sizing: border-box;
	}
	#page-nav ul{
		width: 100%;
		box-sizing: border-box;
	}
	#page-nav ul + ul{
		margin: 20px 0 0;
	}
	#page-nav li + li{
		margin: 20px 0 0;
	}
	#page-nav li h4{
		position: relative;
		display: flex;
	}
	#page-nav li strong{
		position: absolute;
		top: 50%;
		left: 0;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		margin: 0 15px 0 0;
		height: 20px;
		width: 50px;
		display: block;
		font-size: 12px;
		font-weight: bold;
		line-height: 20px;
	}
	#page-nav li strong i{
		position: absolute;
		display: inline-block;
		font-style: normal;
		height: 20px;
		line-height: 20px;
	}
	#page-nav li strong i:nth-child(1),
	#page-nav li strong i:nth-child(3){
		top: 0;
	}
	#page-nav li strong i:nth-child(1){
		left: 0;
	}
	#page-nav li strong i:nth-child(3){
		right: 0;
	}
	#page-nav li strong i:nth-child(2){
		left: 50%;
		top: 50%;
		height: 25px;
		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}

	#page-nav li strong img{
		width: auto;
		height: 20px;
		vertical-align: top;
	}
	#page-nav li a{
		position: relative;
		display: block;
		font-size: 12px;
		color: #212020;
		-webkit-transition: opacity 200ms ease;
		-o-transition: opacity 200ms ease;
		transition: opacity 200ms ease;
	}
	#page-nav li a em{
		font-style: normal;
		display: block;
		padding: 0 0 0 60px;
		height: 20px;
		line-height: 20px;
	}
	#page-nav li a em span{
		font-size: 10px;
		vertical-align: middle;
	}
	#page-nav li a.active{
		opacity: 0.6;
	}
	#page-nav li strong.last{
		padding: 0 0 0 2px;
		border-radius: 6px;
		line-height: 20px;
		font-size: 11px;
		background: #342b1a;
		letter-spacing: 3px;
		text-align: center;
		color: #fff;
	}









	
	/* product
	---------------------------------------------------*/

	#product{
		margin: 50px auto;
/*		width: 750px;
*/	}


	#product h6{
		margin: 0 auto 20px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}

	#product .product-list:after{
		content: "";
		display: block;
		clear: both;
		visibility: hidden;
	}

	#product .product-list{
		padding: 10px;
		background: #fff;
		border: 2px solid #5e9e45;
		border-radius: 10px;
	}
	#product .product-list a{
		display: block;
		-webkit-transition: opacity 200ms ease;
		-o-transition: opacity 200ms ease;
		transition: opacity 200ms ease;
	}
	#product .product-list a.touched{
		opacity: 0.8;
	}


	#product figure{
		float: left;
		width: 120px;
	}

	#product dl{
		float: right;
		width: calc(100% - 130px);
		width: -webkit-calc(100% - 130px);
	}

	#product dl dt{
		font-size: 14px;
		line-height: 1.4;
		font-weight: bold;
	}
	#product dl dd{
		margin: 5px 0 0;
		font-size: 12px;
	}





}





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




	.contnets-title h2{
		height: 36px;
	}
	.contnets-title h2 img{
		width: auto;
		height: 36px;
	}


	.entry-header .entry-title h2{
		font-size: 21px;
	}
	.entry-header .entry-number{
		margin: 0 0 0 4px;
	}
	.entry-header .entry-title{
		margin: 0 0 0 4px;
	}


	.pankuzu-nav-inner{
		padding: 0 5px;
	}
	.entry-body{
		padding: 0 10px;
	}
	.entry-col .col-1{
		margin: -10px;
	}
	.entry-col .col-3 .col-inner{
		margin: 0;
	}




}