@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

全体の設定

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* IE9 */
article, aside, figure, footer, header, hgroup, nav, section {display: block;}

body {
	color: #231815;
	font-family: "Hiragino Kaku Gothic Pro","Meiryo","Sans-Serif";
	font-size: 1em;
	line-height: 1.8;
	background-image: url("../img/back.jpg");
}
a {
	color: #555;
	text-decoration: none;
}
a:hover {
	opacity: 0.8;
	text-decoration: none;
}

/*background-color*/
.bg-darkgray { background-color: #a9a9a9;}
.bg-green{background-color: #9DFFC3;}
.bg-white{background-color: #fff;}
.bg-mame{background-color: #F8E3EB;}
.bg-yg{background-color: #caf5ff;}

/*margin*/
.ma10{margin: 10px;}
.ma20{margin: 20px;}
.ma30{margin: 30px;}
.ma40{margin: 40px;}
.ma50{margin: 50px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt--10{margin-top: -10px}
.mt--15{margin-top: -15px}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.ml--10{margin-left: -10px;}

/*padding*/
.pa-content{padding: 15px;}
.pa10{padding: 10px;}
.pa20{padding: 20px;}
.pa30{padding: 30px;}
.pa40{padding: 40px;}
.pa50{padding: 50px;}
.pb20{padding-bottom: 20px;}
.pt3rem{padding-top: 3rem;}
.pb3rem{padding-bottom: 3rem;}

/*font-size*/
.fs97{font-size: 97%!important;}
.fs95{font-size: 95%!important;}
.fs90{font-size: 90%!important;}
.fs85{font-size: 85%!important;}
.fs80{font-size: 80%!important;}
.fs75{font-size: 75%!important;}
.fs70{font-size: 70%!important;}

/*font-color*/
.fc-pink{color: #EE75A5;}
.fc-red{color: red;}

/*text-align*/
.align-c{text-align: center;}
.align-r{text-align: right;}
.align-l{text-align: left;}

/*window幅で表示・非表示*/
.hideen-md{display: inline;}
.hidden-sm{display: inline;}
.hidden-xs{display: inline;}
.visible-md{display: none;}
.visible-sm{display: none;}
.visible-xs{display: none;}

/*行送り*/
.indent-1{
	padding-left: 2.5em;
	text-indent: -2em;
}

.ls-05{letter-spacing: -.5em;}
.ls-1{letter-spacing: -1em;}

/*ヘッダー*/
.container-fluid{
	margin: 0px;
	padding: 0px;
}
header{
	background-color: #fff;
	padding-bottom: 10px;
	background-image: url("../img/main.jpg");
	background-size: cover;
	background-position: center;
}
h1{
	font-size: 3.5em;
	color: #fff;
	padding: 170px 0px 150px;
	text-shadow: 2px 2px 3px #333;
	text-align: center;
	margin-bottom: 0px;
}
#header{
	width:75%;
	margin: 0 auto;
}
#ci-logo{
	float: left;
}
#ci-logo a:hover,footer a:hover{
	opacity: 1.0;
}
#ci-logo img{
	width: auto;
}

/* ヘッダーメニュー */
#navbar-header{
	width: 100%;
	margin: 0 auto;
	padding: 5px 0px;
	background-color: #fff;
	display: inline-block;
	box-shadow: 0px 4px 4px #78beff;
}
#navbar-header ul{
	padding: 0px;
	margin: 0px auto;
	width: 700px;
}
#navbar-header li{
	width: 350px;
	list-style: none;
	float: left;
	text-align: center;
}
#navbar-header li img{
	margin: 0 auto;
}
.border-sm{
	border-bottom: none;
}
#wrapper{
	width: 1200px;
	margin: 20px auto;
	background-color: #fff;
	padding: 0px 0px 20px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 4px 4px #78beff;
}
h2{
	font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
	text-align: center;
	font-size:1.9em;
	line-height: 1.3em;
}
.h2_title{
	border-bottom: double 5px #0f6fc8;
	padding: 17px 0px 15px;
}
.h2_sub{
	font-size:1.5em;
	line-height: 1.2em;
}
h3{
	font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
	text-align: center;
	font-size:1.6em;
	padding: 30px 0px 10px;
	position: relative;
}
h3 img{
	vertical-align: bottom;
	margin-bottom: 5px;
}
h3 .lead{
	font-size: 1.25rem;
	color: #0f6fc8;
}
h3:before{
	content:"";
	display: block;
	height: 4px;
	margin-bottom: 10px;
	border-bottom: solid 2px #caf5ff;
	background:-webkit-linear-gradient(to right, #0084ff, #caf5ff);
	background: linear-gradient(to right, #0084ff, #caf5ff);
}
h3:after{
	content:"";
	display: block;
	height: 4px;
	margin-top: 12px;
	border-top: solid 2px #caf5ff;
	background:-webkit-linear-gradient(to right, #0084ff, #caf5ff);
	background: linear-gradient(to right, #0084ff, #caf5ff);
}
.content{
	background-color: #fff;
	margin: 0px 0px 0px 5px;
	padding: 15px 0px;
	border-radius: 5px;
}
.content .btn-outline-secondary{
	font-size: .9em;
	text-align: left;
}
.deco4,.deco5{
	position: absolute;
	z-index: 999;
}
.deco4{
	top: 77%;
	left: -9%
}
.deco5{
	top: 70%;
	right: -3%;
}
.pin{
	position: absolute;
	top: -1em;
	left: 42%;
	width:26px;
	height:40px;
	background:url("../img/pin_2.png");
}
.card img{
	padding: 10px;
	margin-top: 18px;
}
.inline{
	min-height: 1px;
}
.comment{
	position: relative;
	font-size: .8em;
	text-align: center;
	padding: 10px;
	border-radius: 20px;
	color: #0f6fc8;
	border: 1px solid #0f6fc8;
	
}

.comment:after{
	position: absolute;
	content: '';
	top: 100%;
	left: 45%;
	border: 9px solid transparent;
	width: 0;
	height: 0;
	border-top: 9px solid #0f6fc8;
}

h4{
	font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
	text-align: center;
	font-size:1.15em;
}

/*レシピを見る*/
.btn-outline-secondary{
	background-color: #fff;
	color: #0f6fc8;
	border-color: #0f6fc8;
}

.btn-outline-secondary:hover{
	color: #fff!important;
	background-color: #00cfff;
	border-color: #00cfff;
}

.btn-outline-secondary:active{
	color: #fff!important;
	background-color: #00cfff!important;
	border-color: #00cfff!important;
}


/*レシピ詳細*/

.inline_content{
	padding:10px;
	background:#fff;
}
.inline_content img{
	max-width: auto;
}
.inline_content .writing{
	max-width:700px;
}
.inline_content .number{
	color: #fff;
	padding: 4px 7px;
	border-radius: 15px;
	margin-right: 10px;
}
.inline_content .s_number{
	color: #fff;
	padding: 3px 6px;
	border-radius: 15px;
}

.yg .number,.yg .s_number{
	background-color: #00cfff;
}
.inline_content .point{
	margin-left: 10px;
	padding-bottom: 3px;
}

.yg .point{
	background: linear-gradient(transparent 75%, #97ecff 75%);
}
.point_indent{
	padding-left: 1em;
	text-indent: -.7em;
	margin-top: -5px;
	margin-bottom: 30px;
}
.annotation::before{
	content: '※';
	font-size: .7em;
}
.Annotation{
	list-style: none;
	font-size: .9em;
	margin-bottom: 10px;
}
.product {
	width: 700px;
}
.product td{
	text-align: center;
	width: 160px;
	min-height: 180px;
	font-size: .9em;
	line-height: 1.2em;
	float: left;
	margin-bottom: 20px;
}
.product img{
	margin-bottom: 5px;
}
.brand_link{
	text-align: center;
	padding-top: 20px;
}
.brand_link img{
	width: auto;
}

/* 動画 */
.movie img{
	width: 100%;
}


/* 英字タイトルをWEBフォントに */
header a,.display-4,.display-3{font-family: 'Comfortaa', cursive;}

/* ------------------------------
フッター
--------------------------------- */
footer{
	margin-top: 50px;
	text-align: center;
	padding: 0px;
	color: #fff;
}
footer:before{
	content:"";
	display: block;
	height: 30px;
	background-image: url("../img/footer.png")
}
#footer{
	background: #8fc21f;
	padding-bottom: 30px;
}

/* ------------------------------
トップに戻る
--------------------------------- */
#page_top{
  width: 95px;
  height: 55px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #fff;
  opacity: 0.7;
}
#page_top a{
  position: relative;
  display: block;
  width: 95px;
  height: 55px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #0f6fc8;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #0f6fc8;
  position: absolute;
  top: 35px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

メディアクエリ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*（1200px 未満）
============================================== */
@media screen and (max-width: 1200px) {
	#wrapper{width: 95%;}
	.container{max-width: 90%;}
}

/*（1200px 未満 992px以上）
============================================== */
@media (min-width: 992px) and (max-width: 1200px) {
	.comment{font-size: .75em; padding: 5px;}
	h4{font-size: .9em;}
	h4.many_letters{font-size:.8em; margin-bottom: 1.5em;}
	.deco4{top: 75%; left: -19%}
	.deco5{top: 70%; right: -13%;}
}

/* 中デバイス（タブレット, 992px 未満）
============================================== */
@media screen and (max-width: 991px) {
	body {background-image: url("../img/back_md.jpg");}
	#header{width:85%;}
	h1{font-size: 3em; padding: 170px 0px 125px;}
	h2{font-size: 1.5em;}
	h3 .lead{font-size: 1.2rem;}
	h4{font-size: 1em;}
	h4.many_letters{font-size:.9em;}
	.deco4{top: 74%; left: -19%}
	.deco5{top: 70%; right: -13%;}
	.hidden-md{display: none;}
	.visible-md{display: inline;}
}

/* 小デバイス（横向きモバイル, 768px 未満）
============================================== */
@media screen and (max-width: 767.98px) {
	.container{max-width: 100% !important;}
	#header{width:98%;}
	#navbar-header ul{width: 100%;}
	#navbar-header li{width: 100%;}
	h1{font-size: 2.5em; padding: 110px 0px 100px;}
	h2{font-size:1.4em;}
	.h2_title{padding: 12px 0px 5px;}
	.h2_sub{font-size: 1em;}
	.deco4{top: 38%; left: 0%;}
	.deco5{top: 38%; right: 2%;}
	.pin{left: 50%;}
	.inline_content img{max-width: 520px;}
	.inline_content .writing{max-width:520px;}
	.product {width: 520px;}
	.product td{max-width:155px; font-size: .85em;}
	.product td img{max-width:100%;}
	.hidden-sm{display: none;}
	.visible-sm{display: inline;}
	.border-sm{border-bottom:1px solid #0f6fc8;}
}

/* 極小デバイス（縦向きモバイル, 576px 未満）
	============================================== */
@media screen and (max-width: 575.98px) {
	body{font-size: .9em;}
	h1{font-size: 2em;}
	h2{font-size:1.4em;}
	.h2_sub{font-size: 1.1em; margin-bottom: 5px;}
	.content{margin: 0px;}
	h3{font-size:1.4em;}
	h3 .lead{font-size: 1.1rem;}
	h4{font-size:1.1em;}
	.deco4{top: 30%; left: -5%;}
	.deco5{top: 30%; right: 0%;}
	#ci-logo img,footer img{width: 100px;}
	.inline_content img{max-width: 310px;}
	.inline_content .writing{max-width:310px;}
	.inline_content ul{margin-left: -1em; max-width:310px;}
	.inline_content ul li ul{margin-left: -1.5em;}
	.product {width: 310px;}
	.hidden-xs{display: none;}
	.visible-xs{display: inline;}
}

/* （スマートフォン, 375px 未満）
	============================================== */
@media screen and (max-width: 375px) {
	body{font-size: .85em;}
	h2{font-size:1.2em;}
	h3 .lead{font-size: .9rem;}
	.pin{left: 46%;}
	.container{padding-right: 5px; padding-left:5px;}
	.inline_content {padding: 0px;}
	.inline_content img{max-width: 290px;}
	.inline_content .writing{max-width:290px;}
	.inline_content ul{max-width:290px;}
	.product {width: 290px; font-size: .85em;}
	.product td{max-width:135px;}
	footer{text-align: left;}
	#footer{padding-left: 20px;}
}

/*（350px 未満）
============================================== */
@media screen and (max-width: 350px) {
	.inline{max-height: 220px!important;}
}
/* （5, 320px 未満）
	============================================== */
@media screen and (max-width: 320px) {
	img{max-width: 100%;}
	h1{font-size: 1.6em; padding: 90px 0px;}
	h2{font-size:1em;}
	h3{font-size: 1.3em;}
	.deco4{top: 24%; left: -5%;}
	.deco5{top: 24%; right: 0%;}
	.inline_content img{max-width: 270px;}
	.inline_content .writing{max-width:270px;}
	.inline_content ul{max-width:270px;}
	.product {width: 270px; font-size: .8em;}
	.product td{max-width:120px;}
}

/* END */