@charset "utf-8";
/* CSS Document */

/*--------------共通---------------*/
/*IE対応画像はみだし対応*/
.w980 table{
	table-layout: fixed;
}
.w980{
	width:100%;
	max-width:980px;
	margin:0 auto;
}
.w500_title {
    width: 500px;
    margin: 50px 0 50px auto;
    background-image: url(../img/bg_75.png);
    padding: 30px 60px;
}
.bg_img {
	width:100%;
	position:relative;
}
.main_pc{
	display:block;
}
.main_sp{
	display:none;
	position:relative;
}

.white_contents {
	background-color:#fff;
	width:100%;
	padding:40px 60px;
	display:inline-block;
}
.title_2 {
	margin-bottom:15px;
}
.top_margin {
	max-width:none;
	position:relative;
}
.vol_absolute{
	position:absolute;
	top:0;
	width:100%;
	margin:0 auto;
}
.menu_area{
	box-shadow:none!important;
}
.pan_link{
	background:#FADBDA;
}
.br_sp {
	display:none;
}

.sub_title{
	font-size: 16px;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 20px;
}
.okura_point .sub_title{
	margin-top: 0;
}
.left{
	float: left;
}
.right{
	float: right;
}
.shortcomment .recipe{
	margin-bottom: 20px;
}

.show768, .show480, .show540,.show860{
	display: none;
}
.read_text {
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 5px;
    margin-top: 15px;
    line-height: 1.4;
}
 .block2, .block3{
	margin-bottom: 90px;
}
.line{
	border-top: 1px dashed #999999;
  width: 100%;
  margin: 90px 0;
}
.s_img{
	margin: 20px 0px;
}
.bg_img img {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}
/* 共通おわり */
/* title共通*/

/* title共通 */
/* ここから今回分 メイン*/
.w500_title .img_box {
    width: 77%;
	margin: 0 auto 20px auto;
}
#section1 .optext{
	padding-top: 20px;
}
#section1 .text_box span {
    font-weight: bold;
    font-size: 20px;
	margin-bottom: 7px;
	letter-spacing: 0.4;
	color: #0076ba;
	display: inline-block;
}
#section1 .float{
	margin: 50px 0px 100px 0;
}
#section1 .left{
	float: left;
	width: calc(35% - 30px);
	margin-bottom: 20px;
}
#section1 .left span {
    color: #0076ba;
    font: 20px;
    font-weight: bold;
    font-size: 18px;
    display: block;
	line-height: 1.4;
    margin-bottom: 13px;
}
#section1 .right {
    float: right;
    width: 65%;
}

/* section2CSS */
/* コンテンツ共通 */
#section2 .topic1 .left{
	 width: 48.5%;
	 margin-top: 30px;
}
#section2 .topic1 .right{
	 width: 48.5%;
	 margin-top: 30px;
}
#section2 .topic1 .respd {
	border-radius: 10px;
}
#section2 .title{
	margin-bottom: 10px;
}
/* コンテンツ共通終わり */

/* ブロック1 */
#section2 .block1 .img_box{
	margin-bottom: 40px;
	width: 80%;
}
#section2 .block1 .title{
    background-color: #fff5de;
    padding: 13px 16px;
    margin: 12px 10px;
}
#section2 .block1 .left {
    width: calc(57% - 15px);
}
#section2 .block1 .right {
    width: 40%;
    margin-top: -20%;
}
/* ブロック2 */
#section2 .block2 .title {
		background-color: #fff8d7;
	 	padding: 11px 13px;
}
#section2 .block2 .title .left {
	width: calc(100% - 376px);
}

#section2 .title .right {
    width: 345px;
    margin-top: 3%;
}
#section2 .block2 {
    margin-top: 90px;
}
#section2 .block2 .read_text {
  color: #cbaf22;
}
/* トピック１ */
#section2 .block2 .topic1 {
    background-color: #fff;
    border-radius: 1em;
}

/* ブロック3 */
#section2 .block3 .title {
		background-color: #ffe7ea;
	 	padding: 11px 13px;
}
#section2 .block3 .title .left {
    width: calc(100% - 349px);
}
#section2 .block3 .read_text {
  color: #c60f28;
}
/* ブロック4 */
#section2 .block4 .title {
		background-color: #fff1d5;
	 	padding: 11px 13px;
}
#section2 .block4 .cap{
	font-size: 11px;
	margin-top: 5px;
}
#section2 .block4 .title .left {
    width: calc(100% - 349px);
}
#section2 .block4 .read_text {
  color: #cbaf22;
}

/* タイトル設定*/
.title_flex{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin-bottom: 25px;
}
.flex_left{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 26%;
}
.flex_left.flex_left_single{
	width: 13%;
}
.flex_left img{
	display: block;
	width: calc(50% - 5px);
	margin-bottom: 10px;
}
.flex_left.flex_left_single img{
	width: calc(100% - 5px);
	margin-bottom: 0;
}
.flex_left img:nth-child(3),
.flex_left img:nth-child(4){
		margin-bottom: 0;
}
.flex_right{
	width: 70%;
	position: relative;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content:center;
}
.flex_right.flex_right_single{
	width: 83%;
	padding: 30px 13% 30px 0;
}
.abs_bg{
	position: absolute;
	left: 0;
	height: 10px;
	background-color: #fdd093;
    background-image: repeating-linear-gradient(-45deg,#fff, #fff 6px,transparent 0, transparent 11px);
	width: 100%;
}
.block2 .abs_bg{
	background-color: #ebce8e;
}
.block3 .abs_bg{
	background-color: #f3b5a4;
}
.abs_bg.abs_bg_top{
		top: 0;
}
.abs_bg.abs_bg_bottom{
		bottom: 0;
}
/* レスポンシブ対応 */
@media screen and (max-width: 860px) {
	.show860{
		display: block;
	}
	.hide860{
		display: none;
	}
	#section1 .float{
		float: none;
	}
	#section1 .left{
	   width: 100%;
		 margin-bottom: 20px;
	}
	#section1 .right {
	    width: 100%;
			display: inline-block;
			margin: 0 auto;
	}
	#section2 .block1 .img_box {
    width: 100%;
}
#section2 .block1 .right {
	    margin: -12% 0% 5% 0%;
}
#section2 .block1 .img_box {
    width: 100%;
		margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
			.show768{
				display: block;
			}
			.hide768{
				display: none;
			}
			.w500_title .img_box{
				width: 100%;
			}
			#section2 .block1 .right {
			    margin-right: 0px;
			}
			.main_pc{
				display:none;
			}
			.main_sp{
				display:block;
			}
			.w500_title{
				width:80%;
				margin:0 10%;
				padding:20px 20px 0;
				margin-top:-120px;
				display:inline-block;
				text-align:center;
			}
			.w980 {
				padding-top:0;
			}
			.white_contents{
				padding:40px 30px;
			}
	}
	@media screen and (max-width: 540px) {
			.show540{
				display: block;
			}
			.hide540{
				display: none;
			}
			#section1 .right {
				display: block;
			 max-width: 580px;
			 margin: auto;
			}
			#section2 .img_box{
				width: 100%;
			}
			#section2 .block1 .left {
				width: 100%;
				margin-top: 20px;
			}
			#section2 .topic1 .right {
				width: 100%;
				margin-top: 31px;
			}
			#section2 .topic1 .left {
				width: 100%;
				margin-top: 30px;
			}
			#section2 .block1 .right{
			width: 100%;
			float: none;
			margin: 20 auto;
			margin: 0 auto;
			}
			.imgsp{
			width: 100%;
			}
			.imgsp img{
			margin: 0 auto;
			}
			#section1 .left span {
			margin-bottom: 7px;
			}
			.imgsp{
				justify-content: space-between;
			}
			.title_flex{
					display: block;
			}
			.flex_left,.flex_right,
			.flex_left.flex_left_single,
			.flex_right.flex_right_single{
					width: 100%;
			}
			.flex_right,
			.flex_right.flex_right_single{
					padding: 30px 0;
			}
			.flex_left{
					margin-top: 15px;
					justify-content: center;
			}
			.flex_left img,
			.flex_left.flex_left_single img{
					width: calc(25% - 7.5px);
					margin: 0 5px;
			}
			.block4 .flex_left img,
			.flex_left.flex_left_single img{
					margin: 0 auto;
			}
			.flex_left.flex_left_full{
					justify-content: space-between;
			}
			.flex_left.flex_left_full img{
					margin: 0;
			}
			#section1 .float {
	    margin: 50px 0px 80px 0;
	}
		}
	@media screen and (max-width: 480px) {
		.w500_title {
			margin:-70px 6% 0;
			width:88%;
		}
		.white_contents {
			padding:40px 5%;
		}
		.line{
			margin: 60px 0;
		}
	.flex_left.flex_left_single img {
			margin: 0 auto;
		}
		.show480{
			display: block;
			width: 100%;
		}
		.hide480{
			display: none;
		}

}
