@charset "utf-8";

*{
	margin: 0px;
	padding: 0px;
}

html{
	font-size: 62.5%;
}

body {
	-webkit-text-size-adjust: 100%;
}

body, h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd,td,th{
	color: #333;
	font-size: 16px;
	font-family: 'Noto Sans JP','メイリオ',Meiryo,'ヒラギノ角ゴ ProN W3',Helvetica,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic', Osaka,sans-serif;
	text-align: justify;
	text-justify: distribute;
	letter-spacing: 0.15em;
	line-height: 1.85;
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
}

/* 画像 */
img{
	vertical-align: middle;
	width: 100%;
}

a img{
	border: none;
	transition: 0.5s;
}

a:hover img{
	filter:Alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.50;
}

/* テキストリンク */
a:link, a:visited{
	color: #231815;
	text-decoration: underline;
}

a:hover, a:active{
	text-decoration: none;
}

/* 背景を下まで伸ばす */
.is_lineup div:nth-child(2) ul{
	overflow: hidden;
}

.is_lineup div:nth-child(2) ul:after{
	content: "";
	display: block;
	clear: both;
	overflow: hidden;
}

/* 標準設定 */
.img_l{float: left;padding: 0px 20px 10px 0px;}
.img_r{float: right;padding: 0px 0px 10px 20px;}
.clear{clear: both;}

.px10{font-size: 71% !important;line-height: 114%;}
.px12{font-size: 86% !important;line-height: 142%;}
.px14{font-size: 100% !important;}
.px16{font-size: 114% !important;}
.px16{font-size: 128% !important;}
.px16{font-size: 142% !important;}

.t_center{text-align: center !important;}
.t_right{text-align: right !important;}

.pt0{padding-top: 0px !important;}
.pt5{padding-top: 5px !important;}
.pt10{padding-top: 10px !important;}
.pt20{padding-top: 20px !important;}
.pt25{padding-top: 25px !important;}
.pt40{padding-top: 40px !important;}
.pt60{padding-top: 60px !important;}

.pb0{padding-bottom: 0px !important;}
.pb5{padding-bottom: 5px !important;}
.pb10{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb30{padding-bottom: 30px !important;}
.pb40{padding-bottom: 40px !important;}
.pb50{padding-bottom: 50px !important;}
.pb60{padding-bottom: 60px !important;}
.pb70{padding-bottom: 70px !important;}
.pb80{padding-bottom: 80px !important;}

.pl0{padding-left: 0px !important;}
.pl10{padding-left: 10px !important;}
.pl20{padding-left: 20px !important;}
.pl30{padding-left: 30px !important;}
.pl40{padding-left: 40px !important;}
.pl50{padding-left: 50px !important;}
.pl70{padding-left: 70px !important;}

.pr10{padding-right: 10px !important;}
.pr20{padding-right: 20px !important;}

.mt0{margin-top: 0px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}

.ml10{margin-left: 10px;}

.mr10{margin-right: 10px;}

.mb0{margin-bottom: 0px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}

li{list-style: none;}

.br_pc { display: block !important;}
.br_tab { display: none !important;}
.br_sp { display: none !important;}

@media screen and (max-width:767px){
	body, h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd,td,th{ font-size: 13px;}
	.br_pc { display: none !important;}
	.br_tab { display: none !important;}
	.br_sp { display: block !important;}
}


/*---------------------
スクロールアニメーション
---------------------*/
.is_scrollanime{
	opacity: 0 !important;
	transition: all .8s ease !important;
}

.is_scrollanime.show{
	opacity: 1 !important;
	transform: none !important;
}

.is_rl{         transform: translate(-100px, 0) !important;}
.is_rr{         transform: translate(100px, 0) !important;}
.is_up{         transform: translate(0, 100px) !important;}
.is_down{       transform: translate(0, -100px) !important;}
.is_scaleUp{    transform: scale(.8) !important;}
.is_scaleDown{  transform: scale(1.5) !important;}
.is_rotateL{    transform: rotate(180deg) !important;}
.is_rotateR{    transform: rotate(-180deg) !important;}



/*---------------------
メインビジュアル
---------------------*/
.mvslider{
	opacity: 0;
	transition: opacity .3s linear;
}
.mvslider.slick-initialized{
	opacity: 1;
}

.slick-arrow.slick-prev{
	background: url(../img/yaji_l.png) center center / cover no-repeat !important;
	left: -7% !important;
}

.slick-arrow.slick-next{
	background: url(../img/yaji_r.png) center center / cover no-repeat !important;
	right: -7% !important;
}

.mvslider .slick-arrow.slick-prev{
	left: 10% !important;
}

.mvslider .slick-arrow.slick-next{
	right: 10% !important;
}

.mvslider .slick-dots{
	bottom: 10px !important;
}

.slick-arrow.slick-prev:hover,
.slick-arrow.slick-next:hover{
	transition: 0.5s;
	filter:Alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.50;
}

.slick-prev:before, .slick-next:before{
	display: none;
}

@media screen and (max-width: 1200px) {
	.slick-arrow.slick-prev{
	    left: -2%;
	}
	
	.slick-arrow.slick-next{
	    right: -2%;
	}
	
	ul.arrangeslider .slick-track li{
	    margin: 5px;
	    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
	    border: #fff 4px solid;
	}
	
	.slick-dots{
	    bottom: -30px;
	}
	
	.l_arrange{
		margin-top: 40px;
	}
	
	.l_arrange h1{
		width: 100%;
	}
	
	.mvslider .slick-arrow.slick-prev{
	    left: 10% !important;
	}
	
	.mvslider .slick-arrow.slick-next{
	    right: 10% !important;
	}
	
	.mvslider .slick-dots{
	    bottom: 10px !important;
	}
}

@media screen and (max-width: 767px) {
	.mvslider .slick-arrow.slick-prev{
	    left: 2% !important;
	}
	
	.mvslider .slick-arrow.slick-next{
	    right: 2% !important;
	}
}


/*---------------------
フッター
---------------------*/
.l_footer{
	background: #c3dfcc;
	padding: 20px 4%;
}

.l_footer ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.l_footer ul li{
	margin: 0 10px;
}

.l_footer ul li a{
	font-size: 85%;
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	vertical-align: middle;
	text-decoration: none;
}

.l_footer ul li a::before,
.l_footer ul li a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.l_footer ul li a::before{
	left: 3px;
	width: 4px;
	height: 4px;
	border-top: #389456 2px solid;
	border-right: #389456 2px solid;
	transform: rotate(45deg);
}

.l_footer ul li a:hover{
	opacity: 0.5;
}

.l_footer p.is_copy{
	font-size: 70%;
	text-align: center;
	margin-top: 40px;
}


@media screen and (max-width: 767px) {
	.l_footer{
		padding: 10px 4% 20px 4%;
	}
	
	.l_footer ul{
		display: block;
	}
	
	.l_footer ul li{
		margin: 10px 0;
	}
	
	.l_footer p.is_copy{
		text-align: left;
	}
}


/*---------------------
ページトップへ戻る
---------------------*/
#is_pagetop{
	position: fixed;
	z-index: 9999;
	right: 2.5%;
}

#is_pagetop a{
	width: 80px;
	height: 80px;
	display: block;
	text-decoration: none;
}

@media screen and (max-width: 767px) {
	#is_pagetop a{
		width: 50px;
		height: 50px;
	}
}


/*---------------------
外枠
---------------------*/
.l_main{
	display: block;
	clear: both;
	overflow: hidden;
}

.md_cont,
.l_bread,
.l_use,
.l_policy{
	max-width: 1200px;
	width: 92%;
	margin: 0 auto;
}

@media screen and (max-width: 1200px){
	.md_cont{
		width: 92%;
		padding: 0 4%;
	}
}

@media screen and (max-width: 767px) {
	.l_main{
		overflow: hidden;
	}
}



/*---------------------
トップページ
---------------------*/
/* 忙しい日々の強～い味方！ */
.l_ally{
	border-top: #389456 6px solid;
	background: #F8F5E4;
	padding: 50px 0;
}

.l_ally h1{
	max-width: 715px;
	width: 60%;
	margin: 0 auto;
}

.md_ally{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: -20px;
}

.md_ally div:nth-child(1){
	width: 54%;
}

.md_ally div:nth-child(2){
	width: 42%;
	margin-left: 4%;
}

.md_ally p strong.is_green{
	color: #389456;
	font-size: 125%;
}

.md_ally p strong.is_orange{
	color: #EF5A24;
}

.md_ally p strong.is_time{
	font-size: 200%;
	line-height: 1;
	letter-spacing: 0.01em;
	vertical-align: top;
}

.md_ally p span{
	font-size: 86%;
}

.l_ally .is_allyvoice{
	background: #fff;
	padding: 30px 40px;
	border-radius: 30px;
}


/* 人気の3つのポイント */
.l_point{
	padding: 50px 0;
}

.l_point h1{
	max-width: 600px;
	width: 50%;
	margin: 0 auto;
}

.t_point{
	color: #e9851e;
	font-size: 125%;
	font-weight: bold;
	text-align: center;
	margin-top: -40px;
}

.t_point span{
	font-size: 200%;
}

.t_point:before,
.t_point:after {
	position: relative;
	display: inline-block;
	content: "";
	background: #e9851e;
	width: 2px;
	height: 2em;
	margin: 0 1em;
	margin-top: -.2em;
	vertical-align: middle;
}
 
.t_point:before{
	transform: rotate(-35deg);
}
 
.t_point:after{
	transform: rotate(35deg);
}

.l_point h2{
	color: #000;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	transform: rotate(0.03deg);
	font-size: 200%;
	line-height: 1;
	text-align: center;
	border-bottom: 5px solid #e9851e;
	background: #fff;
	margin-bottom: 40px;
	padding-bottom: 10px;
	position: relative;
}

.l_point h2:before{
	content: "";
	position: absolute;
	bottom: -42px;
	left: calc(50% - 22px);
	margin-left: -4px;
	border: 22px solid transparent;
	border-top: 22px solid #fff;
	z-index: 2;
}

.l_point h2:after{
	position: absolute;
	border: 24px solid transparent;
	border-top-color: #e9851e;
	border-bottom-width: 0;
	bottom: -27px;
	content: "";
	left: calc(50% - 27px);
	z-index: 1;
}

.md_point1{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 80px;
}

.md_point1 > div:nth-child(1){
	width: 56%;
}

.md_point1 > div:nth-child(2){
	width: 40%;
}

.md_point1 > div:nth-child(2) p:nth-child(1){
	margin-bottom: 10px;
}

.md_point1 > div:nth-child(2) p strong{
	color: #ef5a24;
	font-size: 125%;
	background:linear-gradient(transparent 80%, #fbf164 80%);
}

p span.is_att{
	font-size: 83%;
	margin-bottom: 20px;
}

.md_point2_2{
	display: flex;
	align-items: center;
	margin-bottom: 80px;
}

.md_point2_2 > div:nth-child(1){
	width: 58%;
}

.md_point2_2 > div:nth-child(2){
	width: 46%;
	z-index: 9;
}

.md_point2_2 > div:nth-child(2) div{
	width: 84%;
	background: #f8dabb;
	z-index: 9;
	display: inline-block;
	margin-left: 4%;
	padding: 6%;
	border-radius: 20px;
	position: relative;
}

.md_point2_2 > div:nth-child(2) div:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -15px;
	border: 20px solid transparent;
	border-right: 30px solid #f8dabb;
}

.md_point2_1 p strong,
.md_point2_2 p strong{
	color: #ee5a24;
	font-size: 125%;
	background:linear-gradient(transparent 80%, #fff 80%);
}

.md_point2_1{
	flex-direction: row-reverse;
	margin-bottom: 40px;
}

.md_point2_1 > div:nth-child(2) div{
	margin-left: 0;
}

.md_point2_1 > div:nth-child(2) div:before{
	left: 100%;
	border-left: 30px solid #f8dabb;
	border-right: none;
}


/* 利用した組合員さんの声 */
.l_voice{
	background: url(../img/bg_voice_pc.png);
	background-size: 100% 100%;
	padding: 50px 0 100px 0;
}

.l_voice h1{
	max-width: 770px;
	width: 64%;
	margin: 0 auto;
}

.l_btn{
	margin: 40px 0;
}

.l_btn p{
	text-align: center;
}

.l_btn p a{
	color: #fff;
	font-size: 150%;
	text-decoration: none;
	display: inline-block;
	background: #d82024;
	margin: 0 auto;
	padding: 20px 80px;
	border-radius: 20px;
	box-shadow: 0 8px 0 0 #9b1f24;
	position: relative;
}

.l_btn p a:hover{
	opacity: 0.5;
    transition: 0.5s;
}

.l_btn p a::before,
.l_btn p a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.l_btn p a::before{
	left: 30px;
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border: 6px solid transparent;
	border-left: 10px solid #fff;
}


@media screen and (max-width: 767px) {
	/* 忙しい日々の強～い味方！ */
	.l_ally{
		padding: 30px 0;
	}
	
	.l_ally h1{
		width: 100%;
	}
	
	.md_ally{
		display: block;
	    margin-top: 0;
	}
	
	.md_ally div:nth-child(1){
		width: 80%;
		margin: 10px auto;
	}
	
	.md_ally div:nth-child(2){
		width: 100%;
		margin-left: 0;
	}
	
	.md_ally div:nth-child(2) p{
		text-align: center;
	}
	
	.l_ally .is_allyvoice{
		margin-top: 20px;
		padding: 4%;
		border-radius: 20px;
	}
	
	/* 人気の3つのポイント */
	.l_point{
		padding: 20px 0 30px 0;
	}
	
	.l_point h1{
		width: 88%;
	}
	
	.t_point{
		font-size: 100%;
		margin-top: -20px;
	}
	
	.l_point h2{
		margin-bottom: 30px;
	}
	
	.md_point1{
		display: block;
	}
	
	.md_point1 > div:nth-child(1),
	.md_point1 > div:nth-child(2){
		width: 100%;
	}
	
	.md_point1 > div:nth-child(1){
		margin-bottom: 10px;
	}
	
	.md_point1 > div:nth-child(2) p{
		font-size: 100%;
		text-align: center;
	}
	
	.md_point1 > div:nth-child(2) p span.is_att{
		font-size: 83%;
		margin-bottom: 20px;
	}
	
	.md_point2_2{
		display: block;
	}
	
	.md_point2_2 > div:nth-child(1),
	.md_point2_2 > div:nth-child(2){
		width: 100%;
	}
	
	.md_point2_2 > div:nth-child(2) div{
		width: 100%;
		margin-left: 0;
		padding: 10px 0;
		background: none;
	}
	
	.md_point2_2 p{
		text-align: center;
	}
	
	.md_point2_1 p strong,
	.md_point2_2 p strong{
		background: linear-gradient(transparent 80%, #fbf164 80%);
	}
	
	.md_point2_2 > div:nth-child(2) div:before{
		display: none;
	}
	
	/* 利用した組合員さんの声 */
	.l_voice{
		background: url(../img/bg_voice_sp.png);
		background-size: 100% 100%;
		padding: 20px 0 50px 0;
	}
	
	.l_voice h1{
		width: 100%;
	}
	
	.l_btn p a{
		width: 80%;
		padding: 20px;
		box-shadow: 0 4px 0 0 #9b1f24;
	}
}


/*---------------------
パンくずリスト
---------------------*/
.md_bread{
	z-index: 9999;
	position: relative;
	margin: 14px 0;
	display: flex;
}

.md_bread ol li{
	font-size: 86%;
	float: left;
}

.md_bread ol li:before{
    padding: 0 5px;
    content: "＞";
}

.md_bread ol li:nth-child(1):before{
	display: none;
}

.md_bread ol li a{
	text-decoration: none;
}

.md_bread ol li a:hover{
	opacity: 0.5;
}


/*---------------------
下層ページ
---------------------*/
.l_page header h1{
	color: #fff;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 500;
	font-size: 150%;
	line-height: 150%;
	text-align: center;
	transform: rotate(0.03deg);
	background: #389456;
	padding: 20px 4%;
}


/*---------------------
生協の食材セット（ミールキット）を利用できる生協
---------------------*/
.l_use > ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.l_use > ul > li{
	width: 38%;
	margin: 2%;
	padding: 4%;
	box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.3);
}

.l_use ul li p.is_name{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 183%;
	font-weight: 800;
	line-height: 125%;
	text-align: center;
	transform: rotate(0.03deg);
	border-bottom: #333333 1px solid;
	padding-bottom: 10px;
}

.l_use ul li p.is_name span{
	font-size: 73%;
	font-weight: 500;
	display: block;
}

.l_use ul li p.is_logo{
	max-width: 375px;
	width: 80%;
	margin: 20px auto;
}

.l_use ul li ul{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.l_use ul li ul li{
	width: 31%;
}

.l_use ul li ul li a{
	color: #fff;
	font-size: 14px;
	line-height: 125%;
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
	background: #e9851e;
	padding: 15px 10px 15px 5px;
	display: flex;
    justify-content: center;
	align-items: center;
}

.l_use ul li ul li a img{
	margin-left: 10px;
	width: 15px;
}

.l_use ul li ul li a:hover{
	opacity: 0.5;
}

.l_use ul li ul li:nth-child(2) a{
	background: #e55658;
}

.l_use ul li ul li:nth-child(3) a{
	background: #389456;
}

.l_banner{
	border-top: #333333 1px solid;
	padding: 80px 0;
}

.l_banner p a{
	max-width: 670px;
	width: 60%;
	margin: 0 auto;
	display: block;
	border: #389456 3px solid;
}

.l_banner p a:hover{
	opacity: 0.5;
}


@media screen and (max-width: 767px) {
	.l_use > ul{
		display: block;
	}
	
	.l_use > ul > li{
		width: 91%;
		margin: 0 0 40px 0;
	}
	
	.l_use ul li ul{
		display: block;
	}
	
	.l_use ul li ul li{
		width: 100%;
		margin-bottom: 10px;
	}
	
	.l_banner{
		padding: 40px 0;
	}
	
	.l_banner p a{
		width: 91%;
	}

}


/*---------------------
プライバシーポリシー
---------------------*/
.l_policy{
	margin-top: 40px;
	margin-bottom: 40px;
}

.l_policy h1{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 200%;
	font-weight: 800;
	text-align: center;
	transform: rotate(0.03deg);
	position: relative;
	display: block;
	margin-bottom: 80px;
}

.l_policy h1:before{
	content: '';
	display: inline-block;
	transform: translateX(-50%);
	background: #333;
	width: 25%;
	height: 1px;
	position: absolute;
	bottom: -30px;
	left: 50%;
}

.l_policy dt{
	color: #389456;
	font-size: 125%;
	font-weight: bold;
}

.l_policy dd{
	margin: 0 0 20px 2.5em;
}

.l_policy dd ul{
  counter-reset: count 0;
}

.l_policy ul li{
	margin-top: 10px;
	text-indent: -1.5em;
	padding-left: 1.5em;
}

.l_policy ul li:before {
	content: counter(count) "）";
	counter-increment: count 1;
}


@media screen and (max-width: 767px) {
	.l_policy h1{
		font-size: 175%;
	}

}


/*---------------------
レシピ
---------------------*/
.md_lineup{
	clear: both;
	max-width: 1200px;
	width: 92%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.md_lineup > div{
	width: 48%;
}

.md_lineup img{
	border-radius: 20px;
}

.movie-wrap{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.movie-wrap iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.is_lineup{
	margin-top: 20px;
}

.is_lineup div:nth-child(2) h1{
	font-size: 200%;
	font-weight: bold;
	line-height: 125%;
}

.is_lineup div:nth-child(2) ul{
	margin: 20px 0;
}

.is_lineup div:nth-child(2) ul li{
	border: #389456 1px solid;
	width: 26%;
    margin-right: 4%;
	padding: 2%;
	border-radius: 20px;
	float: left;
}

.is_lineup div:nth-child(2) ul li:last-child{
    margin-right: 0;
}

.is_lineup div:nth-child(2) ul li p{
	text-align: center;
	line-height: 125%;
}

.is_lineup div:nth-child(2) ul li p:nth-child(1){
	color: #389456;
}

.is_lineup div:nth-child(2) ul li p img{
	display: block;
	margin: 0 0 10px 0;
	height: 30px;
	border-radius: 0;
}

.is_lineup div:nth-child(2) ul li p:nth-child(2){
	margin-top: 10px;
}

.is_lineup div:nth-child(2) ul li p:nth-child(2) strong{
	color: #389456;
	font-size: 150%;
	font-weight: bold;
}

.is_lineup div:nth-child(2) ul li:nth-child(1) p:nth-child(2){
	margin-top: 20px;
}

.is_material{
	margin-top: 2%;
	margin-bottom: 2%;
}

.is_material div:nth-child(1){
	background: #f2efe6;
	width: 40%;
	padding: 4%;
}

.is_material div:nth-child(1) p.t_material{
	color: #389456;
	font-size: 125%;
	font-weight: bold;
    line-height: 125%;
	display: flex;
	justify-content: center;
	align-content: center;
}

.is_material div:nth-child(1) p.t_material img{
	margin-right: 10px;
	width: 40px;
    border-radius: 0;
}

.is_material table{
	width: 100%;
	margin: 20px 0;
	border-collapse: collapse;
}

.is_material table th{
	padding: 10px 2%;
	border-bottom: #ccc 1px solid;
}

.is_material table td{
	text-align: right;
	border-bottom: #ccc 1px solid;
	width: 28%;
	padding: 5px;
}

.is_material table th a{
	color: #39b052;
	text-decoration: none;
}

.is_material table th a:hover{
	text-decoration: underline;
}

.is_material table + p{
	font-size: 86%;
}

.icon_a{
	color: #fff;
	background: #d44830;
	margin-left: 10px;
	padding: 0 2px 0 4px;
	font-size: 86%;
}

.icon_b{
	color: #fff;
	background: #305fac;
	margin-left: 10px;
	padding: 0 2px 0 4px;
	font-size: 86%;
}

.icon_c{
	color: #fff;
	background: #ffba00;
	margin-left: 10px;
	padding: 0 2px 0 4px;
	font-size: 86%;
}

.l_lineup h2{
	color: #fff;
	font-size: 125%;
	font-weight: bold;
    line-height: 125%;
	background: #389456;
	padding: 5px 10px;
	display: flex;
	justify-content: center;
	align-content: center;
}

.l_lineup h2 img{
	margin-right: 10px;
	width: 30px;
	border-radius: 0;
}

h2.is_advice{
	margin: 40px 0 10px 0;
}

.is_how{
	max-width: 1200px;
	width: 92%;
	margin: 60px auto 0 auto;
}

.is_how h2 img{
	width: 50px;
}

.is_how dl{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 30px;
	counter-reset: count 0;
}

.is_how dl dt,
.is_how dl dd{
	border-bottom: #389456 1px solid;
	width: 48%;
	margin: 0 0 30px 0;
}

.is_how dl dt{
	padding: 0 2% 30px 0;
}

.is_how dl dd{
	padding: 0 0 30px 2%;
	counter-increment: count 1;
}

.is_how dl dd::before{
	content: counter(count);
	color: #fff;
	font-size: 112%;
	font-weight: bold;
	background: #389456;
	margin-bottom: 20px;
	padding: 5px 15px;
	display: block;
	width: 20px;
	text-align: center;
}

.is_how dt img{
	border-radius: 20px;
}

.t_sns{

}
.t_sns{
	font-size: 125%;
	font-weight: bold;
	text-align: center;
	margin-top: 40px;
}

.t_sns:before,
.t_sns:after {
	position: relative;
	display: inline-block;
	content: "";
	background: #333;
	width: 2px;
	height: 2em;
	margin: 0 1em;
	margin-top: -.2em;
	vertical-align: middle;
}
 
.t_sns:before{
	transform: rotate(-35deg);
}
 
.t_sns:after{
	transform: rotate(35deg);
}

.l_sns ul{
	display: flex;
	justify-content: center;
}

.l_sns ul li{
	padding: 10px;
}

.l_sns ul li:nth-child(1){
	margin-top: -8px;
}

.l_sns p.is_banner a{
	max-width: 670px;
	width: 60%;
	margin: 40px auto 80px auto;
	display: block;
	border: #389456 3px solid;
}

.l_sns p.is_banner a:hover{
	opacity: 0.5;
}


@media screen and (max-width: 1200px){
	.md_lineup{
		width: 92%;
		padding: 0 4%;
	}
}

@media screen and (max-width: 980px){
	.is_lineup div:nth-child(2) ul li p{
		font-size: 76%;
	}
}


@media screen and (max-width: 767px) {
	.md_lineup{
		display: block;
		width: 100%;
		padding: 0;
	}
	
	.is_lineup div:nth-child(2){
		width: 92%;
		padding: 2% 4%;
	}
	
	.is_material,
	.md_lineup div{
		width: 100%;
	}
	
	.is_material div:nth-child(1){
		width: 84%;
		margin: 0 4% 40px 4%;
	}
	
	.is_material div:nth-child(2){
		width: 100%;
	}
	
	.is_material div:nth-child(2) table{
		width: 92%;
		margin: 0 4%;
	}
	
	h2.is_advice + p{
		margin: 0 4% 4% 4%;
	}
	
	.is_lineup{
		margin-top: 0;
	}
	
	.is_lineup div:nth-child(1) img{
	    border-radius: 0;
	}
	
	.is_lineup div:nth-child(2) ul li p{
		font-size: 100%;
	}
	
	.is_how{
	    width: 100%;
	}
	
	.is_how dl{
		width: 92%;
		margin: 30px auto;
	}
	
	.is_how dl dt{
		width: 100%;
		border: none;
		margin-bottom: 10px;
		padding: 0;
	}
	
	.is_how dl dd{
		width: 100%;
		padding: 0 0 30px 5em;
	}
	
	.is_how dt img{
		border-radius: 10px;
	}
	
	.is_how dl dd::before{
		float: left;
		margin-left: -4.5em;
	}
	
	.is_how dl dd:last-child{
		margin-bottom: 0;
	}
	
	.is_how p.t_right{
		padding: 0 4%;
	}
	
	.l_sns ul li:nth-child(1){
		margin-top: -4px;
	}
	
	.l_sns p.is_banner a{
		width: 92%;
	}
	
}