@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p,h2,h4{
font-family: 'YuGothic'; 
font-weight: normal;
ont-family: Arial, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    line-height: 1.6;
    letter-spacing: .05em;
}

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

@media screen and (max-width:767px){
	img.img-sp{
		display: block;
	}
	img.img-pc{
		display: none !important;
	}
}

@media screen and (min-width:768px){
	img.img-pc{
		display: block;
	}
	img.img-sp{
		display: none !important;
	}
}

body{
	color: #000;
}

img{
	max-width: 100%;
	height: auto;
    display: block;
	/*max-width: 100%;*/
}

/*--トップ--*/
section.contents-all {
    margin-top: 100px;
}

/*--sec01--*/

/*--全体--*/
.contents-box_01, section.contents-box_03 {
  	position: relative;
  	overflow: hidden;
}

/*.contents-box_01{
	z-index: -999;
}*/

/*--背景--*/
.contents-box_01 .background {
  position: relative;
  z-index: 0;
}

.contents-box_01 .background img {
  width: 100%;
  height: auto; /* 比率固定 */
  display: block; /* 下の隙間防止 */
}

/*--テキスト--*/
section.contents-box_01 p.txt {
  position: absolute;
  inset: 0; /* 背景全体にかぶせる */
  z-index: 1;
  display: flex;
  align-items: center; /* 縦中央 */
  justify-content: center; /* 横中央 */
  text-align: center;
  margin: 0;
  padding: 0 16px;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: bold;
  font-size: 15pt;
  line-height: 2.8em;
  letter-spacing: 0px;
  color: #fff;
  /* 少し上に寄せて、トップの空白を防ぐ */
  transform: translateY(-19%);
}

/*--sec01--*/

/*--sec02--*/
section.contents-box_02{
	margin-top: -5%;
}

section.contents-box_02 h2{
	margin-bottom: 74px;
	text-align: center;
	font-size: 30pt;
	font-family: "aralet-n", sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #006837;
	z-index: 1;
}

ul.main-box {
    max-width: 1180px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
}

li.main-list {
    width: 30%;
}

li.main-list p{
	margin-top: 31px;
	text-align: center;
	font-size: 13pt;
	line-height: 2;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	
}

.main-content {
    margin-bottom: 50px;
}

/*--sec02--*/

/*--sec04--*/
section.contents-box_04 {
	position: absolute;
    margin-top: 98px;
	z-index: 1;
}

.bg-ft {
    position: absolute;
    z-index: 1;
}

section.contents-box_04 h2{
	margin-bottom: 65px;
	font-size: 35pt;
	font-family: "aralet-n", sans-serif;
    font-weight: 400;
    font-style: normal;
	text-align: center;
	color: #006837;
}

section.contents-box_04 h3{
	display: flex;
    align-items: center;
	margin-bottom: 17px;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bold;
	font-size: 14pt;
	color: #009245;
}

section.contents-box_04 h3.blue{
	color: #425c9e;
}

section.contents-box_04 h3::before,
section.contents-box_04 h3::after{
	content: "";
    width: 21%;
    height: 3px;
	margin: auto;
	background-position: left bottom;
	background: repeating-linear-gradient(to right, #009245 0 8px, transparent 8px 15px);
	color: #009245;
}

section.contents-box_04 h3.blue::before,
section.contents-box_04 h3.blue::after{
	content: "";
    width: 24%;
    height: 3px;
	margin: auto;
	background-position: left bottom;
	background: repeating-linear-gradient(to right, #425c9e 0 8px, transparent 8px 15px);
	color: #425c9e;
}

section.contents-box_04 h3:before {
    margin-right: 0.6em;
}

section.contents-box_04 h3::after{
	margin-left: 0.6em;
}

section.contents-box_04 h3.blue:before {
    margin-right: 0.6em;
}

section.contents-box_04 h3.blue::after{
	margin-left: 0.6em;
}

.recipe-flex img{
	width: 100%;
	margin-bottom: 20px;
}

section.contents-box_04 h2.item-name{
	width: 100%;
	margin-bottom: 20px;
	text-align: center;
	font-size: 22pt;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

h2.item-name._blue{
	color: #425c9e;
}

span.\32 02601btn {
	display: block;
    width: 100%;
    padding: 11px 0px;
    text-align: center;
    background: #009245;
    border-radius: 7px;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bold;
    font-size: 14pt;
    color: #fff;
    letter-spacing: 1px;
}

span.\32 02601btn._01{
	background: #425c9e;
}

.recipe-flex {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 130px;
    padding: 0 94px;
}

span.\32 02601btn:hover{
	opacity: 0.6;
	transition: .8s;
}
/*--sec04--*/

/*--sec05--*/
section.contents-box_05 {
    position: relative;
    overflow: hidden;
	z-index: -999;
	padding-top: 37%;
}
/*--sec05--*/


@media only screen and (min-width: 1700px){
	p.primary{
		font-size: 13pt;
	}
	p.secondary{
		font-size: 10pt;
	}
	/*--sec02--*/
	ul.main-box{
		max-width: 1360px;
	}
	li.main-list p{
		line-height: 2;
	}
	.point-flex .inner-txt{
		font-size: 12pt;
		line-height: 2.6;
	}
	.entry-box-txt {
    	padding-right: 0;
		padding-left: 6%;
	}
	.entry-box-flex{
		margin-bottom: 5.8rem;
	}
	/*--sec02--*/

	/*--sec04--*/
	section.contents-box_04 h3::before, section.contents-box_04 h3::after{
		width: 26%;
	}
	section.contents-box_04 h3.blue::before, section.contents-box_04 h3.blue::after{
		width: 29%;
	}
	/*--sec04--*/
	
	/*--sec05--*/
	section.contents-box_05{
		padding-top: 34%;
	}
	/*--sec05--*/
}

@media screen and (min-width: 768px) and (max-width: 1024px){
	/*--sec01--*/
	section.contents-box_01 p.txt {
    	transform: translateY(-19%);
		font-size: 10px;
  	}
	/*--sec01--*/
	
	/*--sec02--*/
	section.contents-box_02 h2{
		margin-bottom: 42px;
		font-size: 20pt;
	}
	.main-content{
		width: 80%;
    	margin: auto;
    	margin-bottom: 24px;
	}
	li.main-list p{
		margin-top: 20px;
		font-size: 6pt;
	}
	.hover-list{
		transform: translateY(12%);
	}
	/*--sec02--*/
	
	/*--sec04--*/
	section.contents-box_04{
		margin-top: 58px;
	}
	.recipe-flex{
		width: 90%;
        margin: auto;
		grid-template-columns: repeat(4, 1fr);
		padding: 0;
	}
	section.contents-box_04 h2{
		margin-bottom: 45px;
    	font-size: 1.5rem;
	}
	section.contents-box_04 h3{
		font-size: 9pt;
	}
	section.contents-box_04 h3::before, section.contents-box_04 h3::after{
		width: 14%;
        height: 1.5px;
        background: repeating-linear-gradient(to right, #009245 0 14%, transparent 8% 30%);
	}
	section.contents-box_04 h2.item-name{
		font-size: 12pt;
		margin-bottom: 10px;
	}
	.recipe-flex img{
		margin-bottom: 10px;
	}
	span.\32 02601btn{
		padding: 7px 0px;
		font-size: 12px;
		border-radius: 6px;
	}
	section.contents-box_04 h3.blue::before, section.contents-box_04 h3.blue::after{
		width: 18%;
        height: 1.5px;
        background: repeating-linear-gradient(to right, #425c9e 0 14%, transparent 8% 30%);
	}
	/*--sec04--*/
	
	/*--sec05--*/
	section.contents-box_05{
		padding-top: 42%;
	}
	/*--sec05--*/

}

@media screen and (min-width: 1024px) and (max-width: 1366px){ 
	/*--sec01--*/
	section.contents-box_01 p.txt{
		font-size: 10pt;
	}
	/*--sec01--*/
	
	/*--sec02--*/
	li.main-list p{
		margin-top: 30px;
		font-size: 9pt;
	}
	/*--sec02--*/
	
	/*--sec04--*/
	section.contents-box_04 h2{
		font-size: 2rem;
	}
	section.contents-box_04 h3{
		font-size: 12pt;
	}
	.recipe-flex img, section.contents-box_04 h2.item-name{
		margin-bottom: 20px;
	}
	/*--sec04--*/
	
	/*--sec05--*/
	section.contents-box_05{
		padding-top: 39%;
	}
	/*--sec05--*/
}


@media screen and (max-width: 767px) {
	section.contents-all {
    	margin-top: 37px;
	}
	/*--sec01--*/
	section.contents-box_01 p.txt {
		font-size: 9pt;
    	line-height: 2.4em;
    	transform: translateY(-12%);
  	}
	/*--sec01--*/
	
	/*--sec02--*/
	section.contents-box_02{
		margin-top: 6px;
	}
	section.contents-box_02 h2{
		margin-top: 10px;
		margin-bottom: 0;
		font-size: 14pt;
	}
	img.main-content-bg {
    	position: absolute;
    	z-index: -1;
	}
	ul.main-box {
    	position: relative;
    	z-index: 999;
		display: block;
		width: 67%;
	}
	li.main-list{
		width: 100%;
		margin-top: 50px;
	}
	li.main-list p{
		margin-top: 30px;
		font-size: 10pt;
	}
	/*--sec02--*/
	
	/*--sec04--*/
	.entry-box._04{
		padding-top: 0;
		transform: translateY(-4.8em);
	}
	.recipe-flex{
		grid-template-columns: repeat(2, 1fr);
		padding: 0 22px;
		gap: 12px;
	}
	section.contents-box_04{
		margin-top: 60px;	
	}
	section.contents-box_04 h2{
		font-size: 16pt;
		margin-bottom: 40px;
	}
	section.contents-box_04 h3, section.contents-box_04 h3.blue{
		width: 100%;
		margin-bottom: 10px;
		font-size: 12px;
	}
	section.contents-box_04 h3::before, section.contents-box_04 h3::after{
		width: 14%;
        height: 1.8px;
        background: repeating-linear-gradient(to right, #009245 0 3px, transparent 3px 5px);
	}
	section.contents-box_04 h3:before, section.contents-box_04 h3::after{
		margin-right: 0.5em;
	}
	.recipe-flex img, section.contents-box_04 h2.item-name{
		margin-bottom: 10px;
	}
	.recipe-flex img{
		width: 100%;
	}
	section.contents-box_04 h2.item-name{
		font-size: 15px;
	}
	span.\32 02601btn{
		width: 100%;
		padding: 4px 0px;
		border-radius: 3px;
		font-size: 10px;
	}
	section.contents-box_04 h3.blue::before, section.contents-box_04 h3.blue::after{
		width: 19%;
        height: 1.8px;
        background: repeating-linear-gradient(to right, #425c9e 0 3px, transparent 3px 5px);
	}
	.recipe-list._top {
    	margin-top: 15px;
	}
	.recipe-flex{
		margin-bottom: 0px;
	}
	/*--sec04--*/
	
	/*--sec05--*/
	section.contents-box_05{
		padding-top: 168%;
	}
	/*--sec05--*/
}

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