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

.lead{
	margin: 1em auto 0;
	width:100%;
}	

	.lead p {
	margin: 1em auto 0;
	line-height: 1.6;
		text-align:justify;		
	}

.b_recipe{
	width: 100%;
	display: block;
	margin-top: 2em;
}

.shinsa{
	width: 100%;
	display: block;
	background-color: #fff;
	padding: 25px;
	margin: 25px auto;
	border-radius: 25px;
}
.shinsa p{
	margin: 1em auto 0;
	line-height: 1.8;
}
.shinsa ul {
	list-style: none;
	margin: 1em 0 1em -2em;
	line-height: 1.8;
}
.shinsa ul > li {
  text-indent:-1em;
}
.shinsa ul > li:before {
  content: "★";
  text-indent: -5px;
}


/*btnの設定
--------------------------------------------------*/
.b_recipe a.btn1,
.b_recipe a.btn2 {
	display: inline-block;text-decoration: none;
	letter-spacing: 0.1em;
	border-radius: 50px;
	padding: 15px 15px!important;
	font-size: 1.2em!important;
	font-weight: 600;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
.b_recipe a.btn1 {
/*	background: #ffce2b;*/
	background: #476ab2;
	color: #444;
}
.b_recipe a.btn2 {
	background: #f5a600;
/*		background: #476ab2;*/
	color: #fff;
}
.radius {
	border-radius: 100px !important;
}
.b_recipe a.btn1 i, .b_recipe a.btn2 i {
	margin-left: 10px;
}
.b_recipe a:hover.btn1, .b_recipe a:hover.btn2 {
	transform: scale(1.03);
	filter: brightness(1.1);
}

/*FAQ
-------------------------------------------------*/
/*FAQボックス全体*/
.faq {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}

/*質問*/
.faq dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: linear-gradient(#fff, #eee);	/*背景グラデーション*/
	text-indent: -1em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 1em 1em 1em 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
	border: 1px solid #e4e2d7;		/*枠線の幅、線種、色*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	/*content: "\f059";	*/	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #ee5e4f;			/*アイコンの色*/
	/*padding-right: 1em;	*/	/*アイコンとテキストの間の余白*/
}

/*回答*/
.faq dd {
	padding: 5px 1em 30px;		/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

.faq dt span {text-indent: 0;}

/*テーブル
-----------------------------------------------*/

.ta_omu caption {
	font-weight: 600;		
	padding: 15px 5px;		
	background: #F9C966;		
	margin-bottom: 15px;	
	font-size:1.2em;
	letter-spacing: 0.5em;
}

/*ta1テーブルブロック設定*/
.ta_omu {
	border-top: 1px solid #ccc;	
	width: 100%;
	margin: 0 auto 30px;
}

.ta_omu tr {
	border-bottom: 1px solid #ccc;	
}

/*th（左側）、td（右側）の共通設定*/
.ta_omu th, .ta_omu td {
	padding: 10px 5px;		
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}
.ta_omu tr:hover, .ta_omu td:hover {
	background-color: #FDEDCC;
}

.ta_omu th {
	width: 30%;	
	text-align: left;
	font-weight: 500;
}
.ta_omu li {
    list-style-type: none;
    margin: 0 0 0 -1.25em;
    list-style-position: outside;
    text-indent: -1em;
}
.ta_omu .red {
	color:#FF2200;
	font-weight: 500;
}


/*listブロック
-------------------------------------------------*/
.list-container1 .list,
.list-container2 .list,
.list-container3 .list {
	margin-bottom: 30px;
	padding: 15px;
	background: #fff;
	color: #000;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
	border-radius: 10px;
	position: relative;
}

.list-container1 .list h4,
.list-container2 .list h4,
.list-container3 .list h4 {
	margin: 1em 0 0;
	font-size: 1.1em!important;	
	font-weight:800;
}

.list-container1 .list p,
.list-container2 .list p,
.list-container3 .list p {
	margin: 0.5em 0 0;
	font-size: 1em!important;	
}


/*----------------------------------------------------------
ここから下は画面幅768px以上の追加指定
--------------------------------------------------------------*/
@media screen and (min-width:768px) {

.lead{
	margin: 2em auto 0;
	width:75%;
}	
	.lead p {
	margin: 1em auto 0;
	line-height: 1.8;
		text-align: center;		
	}
	
.b_recipe{
	width:50%;
	margin: auto;
	padding: 50px;
	border-radius: 50px;	
	}	
.shinsa{
	width:70%;
	margin: 50px auto;
	padding: 50px;
	border-radius: 50px;	
	font-size:1.2em;
	}	
.shinsa ul {
	margin: 1em 0 1em -1em;
}

	
/*テーブル
---------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta_omu caption {
	padding: 15px 5px;	
}
.ta_omu {
/*	width: 100%;*/
	margin: 0 auto 30px;
}
/*th（左側）、td（右側）の共通設定*/
.ta_omu th, .ta_omu td {
	padding: 20px 15px;	
}

/*th（左側）のみの設定*/
.ta_omu th {
	width: 20%;	
}
	
/*listブロック
------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-container1 {
width:40%;
/*		flex-wrap: wrap;*/
	margin: auto;
}
.list-container2 {
	display: flex;
	flex-wrap: wrap;
	width:70%;
	margin: auto;
}
.list-container3 {
	display: flex;
	flex-wrap: wrap;
	width:60%;
	margin: auto;
}
/*１個あたりのボックス設定*/
.list-container1 .list {
	display: block; 	
	justify-content: space-between;	
	flex-direction: column;
	width: 100%;	
}
.list-container2 .list{
	display: flex;					/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	width: 49%;						/*幅。３列になります。*/
	margin-right: 2%;
}
.list-container3 .list{
	display: flex;					/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	width: 49%;						/*幅。３列になります。*/
	margin-right: 2%;
}
.list-container1 .list:nth-of-type(2n) {
	margin-right: 0;
}
.list-container2 .list:nth-of-type(2n),
.list-container3 .list:nth-of-type(2n){
	margin-right: 0;
}
/*ボックス内のtextブロック*/
.list-container1 .list .text,
.list-container2 .list .text,
.list-container3 .list .text{
	flex: 1;
}	
.list-container1 .list h4,
.list-container2 .list h4,
.list-container3 .list h4{
	margin: 0.75em 0 0;
	font-size: 1.15em!important;	
	font-weight:800;
}	
	
.list-container1 .list .text p,
.list-container2 .list .text p,
.list-container3 .list .text p {
	font-size: 1em!important;	
}	
}