@charset "utf-8";
/* ||||||||||||||||||||||||||||||||||||||||||||||

	共通レイアウトCSS

||||||||||||||||||||||||||||||||||||||||||||||||| */

/* --------------------------------------------------------------------------------
	サイトヘッダー
-------------------------------------------------------------------------------- */


.logo {
	text-align:center;
}

/* --------------------------------------------------------------------------------
	グローバルナビゲーション
-------------------------------------------------------------------------------- */
.g-nav1 {
	margin: 0 auto;
	display: table;
	text-align: center;
}

.g-nav1 li {
	display: table-cell;
}

@media (max-width: 991px) {
/* （991以下）のとき */
.logo {
	text-align:center;
	position:absolute;
	top:0;
	left:10px;
}

.g-nav1 {
	display:none;
}

.g-nav2 {
	display:block;
}

}

/* --------------------------------------------------------------------------------
	スマホメニュー
-------------------------------------------------------------------------------- */

a.meanmenu-reveal {
	display: none;
}

/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
	float: left;
	width: 100%;
	position: relative;
	background: #fff;
	padding: 8px 0 4px;
	min-height: 42px;
	z-index: 999999;
}

.mean-container a.meanmenu-reveal {
	/*width: 22px;*/
	height: 22px;
	padding: 21px 13px 11px 13px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	color: #043689;
	text-decoration: none;
	font-size: 16px;
	text-indent: -9999em;
	line-height: 22px;
	font-size: 1px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
}

.mean-container a.meanmenu-reveal span {
	display: block;
	background: #043689;
	height: 3px;
	margin-top: 3px;
}

.mean-container .mean-nav {
	float: left;
	width: 100%;
	background: #fff;
	margin-top: 52px;
}

.mean-container .mean-nav ul {
	padding: 0;
	margin: 0;
	width: 100%;
	list-style-type: none;
}

.mean-container .mean-nav ul li {
	position: relative;
	float: left;
	width: 100%;
}

.mean-container .mean-nav ul li p {
	display: block;
	float: left;
	width: 90%;
	padding: 1em 5%;
	margin: 0;
	text-align: left;
	color: #000;
	border-top: 1px solid #043689;
	border-top: 1px solid rgba(4,54,137,0.5);
	text-decoration: none;
	font-size:108%;
	font-weight:bold;
}

.mean-container .mean-nav ul li a {
	display: block;
	float: left;
	width: 90%;
	padding: 1em 5%;
	margin: 0;
	text-align: left;
	color: #043689;
	border-top: 1px solid #043689;
	border-top: 1px solid rgba(4,54,137,0.5);
	text-decoration: none;
	font-size:108%;
	font-weight:bold;
}

.mean-container .mean-nav ul li li a {
	width: 80%;
	padding: 1em 10%;
	border-top: 1px solid #f1f1f1;
	border-top: 1px solid rgba(255,255,255,0.25);
	opacity: 0.75;
	filter: alpha(opacity=75);
	text-shadow: none !important;
	visibility: visible;
}

.mean-container .mean-nav ul li.mean-last a {
	border-bottom: none;
	margin-bottom: 0;
}

.mean-container .mean-nav ul li li li a {
	width: 70%;
	padding: 1em 15%;
}

.mean-container .mean-nav ul li li li li a {
	width: 60%;
	padding: 1em 20%;
}

.mean-container .mean-nav ul li li li li li a {
	width: 50%;
	padding: 1em 25%;
}

.mean-container .mean-nav ul li a:hover {
	background: #252525;
	background: rgba(255,255,255,0.1);
}

.mean-container .mean-nav ul li a.mean-expand {
	margin-top: 1px;
	width: 26px;
	height: 32px;
	padding: 12px !important;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-weight: 700;
	background: rgba(255,255,255,0.1);
	border: none !important;
	border-left: 1px solid rgba(255,255,255,0.4) !important;
	border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
	background: rgba(0,0,0,0.9);
}

.mean-container .mean-push {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	clear: both;
}

.mean-nav .wrapper {
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar, .mean-container .mean-bar * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}


.mean-remove {
	display: none !important;
}




/* --------------------------------------------------------------------------------
	メインコンテンツエリア
-------------------------------------------------------------------------------- */
/* .mainimage {
	background:url(../../images/bt/main-6.jpg) top left;
} */

.mainimage-position {
	position: relative;
}

.mainimage-zindex1 {
	position: absolute;
	top: 0;
	left: 25%;
	z-index: 20;
}

.mainimage p {
	margin:0;
}

.mainimage p.bnr {
	padding:0 10px;
	padding-bottom:3em;
}

.section-inner {
	position:relative;
	/* padding: 20px 20px 30px; */
}

.parT0{padding-top:0 !important;}

.tit-style01 {
	position:relative;
	top:-25px;
}

.tit-style02{
	font-size:32px;
	font-weight:bold;
	color:#043689;
}

.tit-style03{
	color: #043689;
	font-size: 18px;
	font-weight: bold;
}

.tit-style04 {
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin: auto;
}

.bg-slash {
	background:url(../../images/bt/bg_slash.jpg) top left;
}


#support {
	background:url(../images/bg_support.png) 50% 50% no-repeat;
	background-size:cover;
}

#event {
	background:url(../images/bg_event_slash.png) 0 0;
}

.event-inner {
	background:url(../images/bg_event_illust.png) 0 0;
}

.comment {
	background:url(../images/bg_dot-horizontal.png) top left repeat-x;
	padding-top:20px;
}

.comment-inner {
	background:url(../images/bg_dot-horizontal.png) bottom left repeat-x;
	padding-bottom:10px;
}

#continue {
	background:url(../images/bg_continue.png) center top no-repeat;
	background-size:contain;
}


#monitor {
	background:url(../images/bg_combination.jpg) 0 0;
}

.blue-box {
	margin-bottom: 80px;
	padding: 15px 20px;
	border-radius: 4px;
	border: solid #043689 2px;
	background-color:#fff;
	position:relative;
}

.gray-box {
	margin-bottom: 80px;
	padding: 15px 20px;
	border-radius: 4px;
    background-color: #d4d4d4;
}

@media (min-width: 479px){
.radius {
	border-top-left-radius: 0px;
}
}

@media (max-width: 479px){
.radius {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}
}

.media-box {
	overflow:hidden;
}

.media-image {
	text-align:center;
	margin-bottom:50px;
}


.recipe li {
	margin-bottom:4em;
}

.detail {
	border-spacing:0 1em;
	 border-collapse : separate ;
	 margin:0 auto;
}

.detail th {
	width:25%;
}

#enquate .section-inner {
	padding-top:0;
	padding-bottom:0;
}


.br-pc { display:none; }
.br-sp { display:block; }


@media (max-width: 991px) {
/* （991以下）のとき */

h2 {
	text-align:center;
}

.recipe {
	text-align:center;
}


}

.indentback li{
  text-indent: -1em;
  padding-left: 2em;
}

/* --------------------------------------------------------------------------------
	ナンバリング
-------------------------------------------------------------------------------- */
.numbering-box {
	counter-reset: number;
}

.numbering {
   margin: 0;
   padding-left:30px;
 }
.numbering::before {
   position:absolute;
   counter-increment: number;
   content: counter(number);
   padding-right: 20px;
   top:50%;
   left:20px;
   margin-top:-32px;
   color: #043689;
   font-size: 32px;
   font-weight: bold;
 }

/* --------------------------------------------------------------------------------
	プロセス
-------------------------------------------------------------------------------- */

.process{
	position: relative;
	margin-bottom: 54px; /* 三角形画像の高さ + 下に取りたい余白の大きさ */
}

.process::after{
	position: absolute;
	content: "";
	left: 50%;
	bottom: -51px;
	width: 61px;
	height: 41px;
	margin-left: -30px; /* 三角形画像の幅の半分 */
	background: url("../../images/bt/img_process.png") top left no-repeat;
	background-size: 61px 41px;
}


/* --------------------------------------------------------------------------------
	レシピエリア
-------------------------------------------------------------------------------- */
.recipe-boxes {
	padding-top: 40px;
	background: url(../images/bg_stripe.gif) repeat left top;
}
/*
.recipe-boxes p,
.recipe-boxes li,
.recipe-boxes dt,
.recipe-boxes dd,
.recipe-boxes th,
.recipe-boxes td {
	font-size: 13px;
}*/

.recipe-boxes-inner {
	width: 100%;
	background-color: #fff;
}

/* .recipe-boxes .section-inner {
	padding-top: 40px;
} */

.recipe-sv {
	margin-bottom: 80px;
	padding: 15px 20px;
	border-radius: 4px;
	border: solid #58321d 2px;
}

.recipe-sv dt {
	color: #58321d;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}

.recipe-box {
	margin-top: 80px;
	padding-top: 10px;
	background: url(../images/bg_stripe.gif) repeat left top;
}

.recipe-box-inner {
	padding-top: 50px;
	background-color: #fff;
}

.tit-recipe {
	color: #043689;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 8px;
}
.tit-recipe span {
	font-size: 13px;
	padding-left: 10px;
}

.tit-recipe3 {
	color: #58321d;
	font-size: 24px;
	margin-bottom: 13px;
}

.recipe-box p ,
.howto li {
	line-height: 1.4;
}

@media (max-width: 991px) {
.cho-box {
	margin-bottom: 50px;
}
.cho-box h3 {
	margin-bottom: 30px;
}

.recipe-boxes {
	margin-bottom: 40px;
}

.recipe-box-inner {
	padding-top: 30px;
}

/*.recipe-desc {
	margin-top: 50px;
}*/
}

.recipe-desc-txt {
	margin-bottom: 40px;
}

.recipe-desc dl {
	border-top: solid #043689 1px;
}

.recipe-line {
	border-top: solid #043689 1px;
	border-bottom: solid #ccc 1px;
	padding: 10px 0;
}


.recipe-desc dt ,
.recipe-desc dd {
	color: #333333;
	padding: 5px 0 5px 0;
	border-bottom: solid #ccc 1px;
}
.recipe-desc dt {
	font-weight: bold;
}

.tit-recipe2 {
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	padding: 8px 20px;
	background-color: #043689;
}

.howto {
	border-top: solid #043689 1px;
}
.howto li {
	min-height: 60px;
	margin: 0;
	padding: 10px 0 10px 30px;
	border-bottom: solid #ccc 1px;
	list-style: none;
}
.howto li:first-child {
	background: url(../images/icon_1.gif) no-repeat 0 10px;
}
.howto li:nth-child(2) {
	background: url(../images/icon_2.gif) no-repeat 0 10px;
}
.howto li:nth-child(3) {
	background: url(../images/icon_3.gif) no-repeat 0 10px;
}

.monitor-recipe-inner {
	margin-bottom:40px;
}

/* --------------------------------------------------------------------------------
	サイトフッター
-------------------------------------------------------------------------------- */
#footer {
	background:#043689;
	padding: 30px 0;
}

.footer-inner {
	margin:0 auto;
}



/* copyright
--------------------------------------------------------------- */
.copyright{
	color:#fff;
	text-align:center;
}

.copyright address {
	font-style: normal;
}



/* ===================================================================================================

	パーツ

=================================================================================================== */

/* --------------------------------------------------------------------------------
	ボタン
-------------------------------------------------------------------------------- */
/* btn-style01 */
.btn-style01 {
	padding: 0.8em 1em;
	background: #043689;
	color: #fff!important;
	text-decoration: none!important;
	border-bottom: solid 1px #5783cc;
	border-radius: 5px;
	font-size: 160%;
	font-weight: bold;
	display: inline-block;
}

.btn-style01:hover {
	background: #e06216;
}

/* btn-style02 */
.btn-style02 {
	padding: 0.3em 1em;
	background: #043689;
	color: #fff!important;
	text-decoration: none!important;
	border-radius: 5px;
	display: block;
	text-align: center;
	font-size: 108%;
}

.btn-style02:hover {
	background: #5783cc;
}

/* btn-style03 */
.btn-style03 {
	padding: 1em 1em;
	background: #043689;
	color: #fff!important;
	text-decoration: none!important;
	border-radius: 5px;
	font-size: 108%;
	font-weight: bold;
	display: inline-block;
}

.btn-style03:hover {
	background: #5783cc;
}

/* 上下大きめに */
.btn-wide {
	padding-top: 1em!important;
	padding-bottom: 1em!important;
}

/* ネガティブ */
.btn-style01.negative, .btn-style02.negative, .btn-style03.negative {
	background: #ccc;
	color: #222;
}

.btn-style01.negative:hover, .btn-style02.negative:hover, .btn-style03.negative:hover  {
	background: #B4B4B4;
}

/* btn */
/* .btn-outline-secondary {
    font-size: .9em;
    text-align: left;
} */

.btn-outline-secondary {
		padding: 10px;
		background: #fff;
		color:  #043689!important;
		text-decoration: none!important;
		border-style: solid;
		border-radius: 5px;
		border-width: thin;
		font-size: 108%;
}


/* --------------------------------------------------------------------------------
	パンナビ
-------------------------------------------------------------------------------- */
.breadcrumbs {
	margin: -1em 0 2em 0;
	overflow: hidden;
}

.breadcrumbs li {
	display: inline;
}

.breadcrumbs li + li:before {
	padding: 0 1em;
	content: '>';
}

.breadcrumbs li a strong {
	color: #3885AA;
	font-size: 100%;
}

/* --------------------------------------------------------------------------------
	パンナビ
-------------------------------------------------------------------------------- */
.breadcrumbs {
	margin: 0 0 1em 0;
}

.breadcrumbs li a strong {
	color: #3885AA;
	font-size: 100%;
}

.breadcrumbs li i.icon-home {
	margin: 0 0.5em 0 0;
	color: #3885AA;
}

.embed-container { position: relative; padding-bottom: 70.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------------
	ボーダー
-------------------------------------------------------------------------------- */
.bbtm {
	background:url(../images/bg_dot-horizontal.png) bottom left repeat-x;
	padding-bottom:10px;
}


/* --------------------------------------------------------------------------------
	エピソード
-------------------------------------------------------------------------------- */
.episode-box {
	overflow:hidden;
	margin-left:-25px;
}

.item {
	text-align:left;
	float:left;
	width:290px;
	border:2px dashed #043689;
	border-radius:8px;
	background-color:#fff;
	padding:10px;
	margin-left:25px;
	margin-bottom:20px;
}

.episode-name {
	text-align:right;
	color:#043689;
	font-weight:bold;
	border-top:1px #043689 solid;
	margin-bottom:0;
}

@media (max-width: 991px) {

.episode-box {
	overflow-y: scroll;
	width:100%;
	height:400px !important;
	margin:0 auto;
	padding-left:20px;
	padding-right:20px;
	}

.item {
	margin-left:0;
	}
}

/* --------------------------------------------------------------------------------
	メイン　モニターレシピ・エピソードバナー
-------------------------------------------------------------------------------- */
.bnr-area {
	text-align:center;
}

.bnr-area li {
	margin-bottom:2em;
}