@charset "utf-8";

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

全体の設定

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 英字タイトルをWEBフォントに */
header a,.display-4,.display-3{font-family: 'Comfortaa', cursive;}
body {
	color: #231815;
	font-family: "MS Pゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Arial","Osaka","Sans-Serif";
	font-size: 1em;
	line-height: 1.8;
	/*background-color: #deffff;*/
	background-image: url("../img/body.jpg");
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
	float: left;
}
a {
  color: #555;
  text-decoration: none;
}

a:hover{
	color:#d61d51;
	opacity: 0.8;
	text-decoration: none;
}

/*margin*/
.ma0auto{margin: 0 auto;}
.ma10{margin: 10px;}
.ma20{margin: 20px;}
.ma30{margin: 30px;}
.ma40{margin: 40px;}
.ma50{margin: 50px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}
.ml--10{margin-left: -10px;}
.mr15{margin-right: 15px;}

/*padding*/
.pa-content{padding: 10px 10px;}
.pa0{padding: 0px;}
.pa5{padding: 5px;}
.pa10{padding: 10px;}
.pa20{padding: 20px;}
.pa30{padding: 30px;}
.pa40{padding: 40px;}
.pa50{padding: 50px;}
.pr15{padding-right: 15px;}
.pl15{padding-left: 15px;}
.pb20{padding-bottom: 20px;}
.pb30{padding-bottom: 30px;}
.pb40{padding-bottom: 40px;}
.pb50{padding-bottom: 50px;}
.pt3rem{padding-top: 3rem;}
.pb3rem{padding-bottom: 3rem;}

.fs95{font-size: 95%;}
.fs90{font-size: 90%;}
.fs85{font-size: 85%;}
.fs80{font-size: 80%;}
.fs70{font-size: 70%;}
.fs60{font-size: 60%;}

/*background-color*/
.bg-darkgray { background-color: #a9a9a9;}
.bg-light{background-color: #deffff;}
.bg-green{background-color: #9DFFC3;}

/*font-color*/
.fc-pink{color: #EE75A5;}
.fc-pink2{color: #D61D51;}
.fc-blue{color: #00a5e3;}
.fc-red{color: red;}
.fc-orange{color: #de6a2e;}

/*underline*/
.underline_y{border-bottom: 5px solid #ffe000;}

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


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

.hidden-md{display: inline;}
.hidden-sm{display: inline;}
.hidden-xs{display: inline;}

/*数字のついた文章の行送り*/
.indent-1{
	padding-left: 2.5em;
	text-indent: -2em;
}
/*※印のついた文章の行送り*/
.indent-2{
	padding-left: 1em;
	text-indent: -1em;
}
.list-decoration-none{
	list-style-type: none;
}

/*ヘッダー*/
header{
	background-color: #fff;
	padding-bottom: 10px;
}

#header{
	width:72%;
	margin: 0 auto;
}
#title-logo{
	float: left;
	max-width: 253px;
	margin-top: 5px;
}
#title-logo img{
	width: auto;
}
#ci-logo{
	margin-top: 10px;
	float: right;
	width: 50%;
}
#ci-logo img{
	max-width: 84px;
	float: right;
}

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

PC用メニュー

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.navbar{
	padding: 0px;
	float: right;
}

#navbar-header ul{
	width: 100%;
	float: right;
	padding: 0px;
	margin: 15px 0px 0px;
}
#navbar-header li{
	width: 150px;
	list-style: none;
	float: left;
	text-align: center;
	margin: 0px;
	border-left: 10px solid #d61d51;}



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

スマホ用メニュー

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

#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: auto;
    padding: 10px 30px; /*メニュー内部上下左右余白*/
    position: fixed;
    right: -250px; /*メニュー横幅①と合わせる*/
    top: 0;
	left: 100%;
    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 250px; /*メニュー横幅①*/
    z-index: 1000;
	display: none;
}

/*メニューアイコン部分は疑似要素で*/
#ham-menu::before {
    background-color: #fff; /*ボタン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    content: "≡"; /*メニューアイコン*/
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px;
    line-height: 50px; /*縦位置中央化*/
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 50px;
}

/*透過背景部分*/
#menu-background {
    background-color: #333; /*黒背景部分背景色*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 100%;
    z-index: -1;
}

/*hover 時の処理*/
#ham-menu:hover {
    transform: translate(-250px); /*メニュー横幅①と合わせる*/
}
#ham-menu:hover + #menu-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}
#ham-menu ul{
	padding-left: 10px;
	margin-top: 30px;
}
#ham-menu li{
	font-size: .9em;
	list-style: none;
	margin: 7px 0px 5px;
}
#ham-menu .list_end {
	border-bottom: none;
}
#ham-menu a{}
#ham-menu a::before{
	content: "●";
	color: #de6a2e;
	margin-right: 10px;
}
#ham-menu li a{}
#ham-menu li a:hover{
	color: #de6a2e;
}
h1{
	font-family: serif;
	text-align: center;
	font-size:2.2em;
}
h2{
	font-family: serif;
	text-align: center;
	font-size:1.9em;
	margin-bottom: 20px;
	padding: 17px 0px 14px;
}
h3{
	font-family: serif;
	text-align: center;
	font-size:1.5em;
}
h4{
	font-family: serif;
	text-align: left;
	font-size:1.3em;
}
h5{
	font-family: serif;
	text-align: center;
	font-size:.9em;
}
h6{
	font-family: serif;
	font-size:1.2em;
	font-weight: 700;
}

#main-visual p{text-align: center;}

#main-visual img{width: auto;}

#wrapper{
	width: 1200px;
	margin: 20px auto;
	background-color: #fff;
	padding: 20px 0px;
	border-radius: 10px;
}
.container{
	width: 1000px;
	max-width: 1000px !important;
	overflow: hidden;
}
.content{
	background-color: #fff;
	padding: 15px 0px 10px 0px;
}
.number,.inline_content .number{
	padding: 4px 6px;
	border-radius: 15px;
	margin-right: 10px;
	font-weight: 700;
}
.s_number,.inline_content .s_number{
	color: #fff;
	padding: 3px 5px;
	margin: 0px 2px;
	border-radius: 15px;
	font-weight: 700;
}
.card{
	border: solid 1px #de6a2e;
	padding: 5px;
	margin: 0 auto;
}
.card-body{
	padding: 10px 0px;
}
.card-title{
	font-size: 1.1em;
	padding-bottom: 10px;
	padding-top: 10px;
}
#materials ul{
	margin-left: 0px; padding-left: 25px;
}

#materials ul li ul{
	padding-left: 15px;
}

#materials img,#Cooking img{
	width: 100%;
	padding: 0px 10px;
}
#materials .title,#Cooking .title,#Recipe .title{
	position: relative;
	color: #fff;
	font-size: 1.1em;
	padding: 10px 20px;
	border-radius: 20px;
}
#materials .title:after,#Cooking .title:after,#Recipe .title:after{
	position: absolute;
	content: '';
	top: 100%;
	left: 40%;
	border: 9px solid transparent;
	width: 0;
	height: 0;
}

.point{
	color: #de6a2e;
	font-weight: 700;
	margin: 0px 10px;
}
.point-text{
	background-color: #FFFEEE;
	border: 1px solid #de6a2e;
	padding: 5px;
	margin: 0px 15px 10px;
}
.inline_content{
	padding:10px;
	background:#fff;
}
.inline_content img{
	max-width: auto;
}
.inline_content .writing{
	max-width:700px;
}
.caution{
	text-align: center;
	font-size:.9em;
}

/* ------------------------------
デジタルブック
--------------------------------- */
#Book img{max-width: 695px; width: 100%;}
#Book .lead{
	font-size: .95em;
	text-align: center;
}

/* ------------------------------
フッター
--------------------------------- */
footer{
	background-color: #d61d51;
	color: "#fff"
}
footer img{
	width: auto;
}
/* ------------------------------
トップに戻る
--------------------------------- */
#page_top{
	width: 90px;
	height: 70px;
	position: fixed;
	right: 0;
	bottom: 0;
	opacity: 0.7;
	background: #d61d51;
}
#page_top a{
	position: relative;
	display: block;
	width: 90px;
	height: 70px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f102';
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 60px;
	top: 0px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}
#page_top a::after{
	content: 'PAGE TOP';
	font-size: 13px;
	color: #fff;
	position: absolute;
	top: 40px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

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

メディアクエリ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/*（1500px 未満）
============================================== */
@media screen and (max-width: 1500px) {
	#header{width:85%;}
	#navbar-header li{width: 136px;}
}

/*（1200px 未満）
============================================== */
@media screen and (max-width: 1200px) {
	#header{width:99%;}
	#main-visual img{width: 800px;}
	#wrapper{width: 95%;}
	.container{width: 100%;}
}

/* 中デバイス（タブレット, 992px 未満）
============================================== */
@media screen and (max-width: 991.98px) {
	#navbar-header li{width: 145px;}
	#main-visual img{width: 100%;}
	.main-txt {left: 5%;}
	.visible-md{display: inline;}
	.hidden-md{display: none;}
}

/* 小デバイス（横向きモバイル, 768px 未満）
============================================== */
@media screen and (max-width: 767.98px) {
	#header{width:100%;}
	#title-logo{float: left; max-width: 275px;}
	#title-logo{width: auto; margin-top: 0px;}
	#ci-logo{float: left; margin-bottom: 20px; width: 100%;}
	#ci-logo img{float: left;}
	#ham-menu {display:inline;}
	.inline_content img{max-width: 500px;}
	.inline_content .writing{max-width:550px;}
	#Book img{width: 100%;}
	#Book .lead{font-size: .95em; text-align: left;}
	.caution{text-align: left;}
	.visible-sm{display: inline;}
	.hidden-sm{display: none;}
}

/* 極小デバイス（縦向きモバイル, 576px 未満）
	============================================== */
@media screen and (max-width: 575.98px) {
	body{font-size: .9em;}
	.container-fluid{padding-left: 10px; padding-right: 10px;}
	h1{font-size:1.5em;}
	h2{font-size:1.3em;}
	h3{font-size:1.2em;}
	h4{font-size:1.1em;}
	h5{font-size:1em;}
	.visible-sm{display: inline;}
	.display-3,.display-4 {font-size: 2rem;}
	#title-logo{width: 50%; margin-top: 0px;}
	.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;}
	.visible-xs{display: inline;}
	.hidden-xs{display: none;}
}

/* （スマートフォン, 375px 未満）
	============================================== */
@media screen and (max-width: 375px) {
	body{font-size: .85em;}
	.py-5{padding-bottom: 1rem!important;}
	h1{font-size:1.4em;}
	h2{font-size:1.2em;}
	h3,h4,h5,h6{font-size:1.1em;}
	#title-logo{width: 60%;}
	#materials ul{padding-left: 25px;}
	.container,.col-md-12,.col-md-6,.col-sm-6{padding-right: 9px; padding-left:9px;}
	.point-text{margin: 10px 0px;}
	.inline_content {padding: 0px;}
	.inline_content img{max-width: 290px;}
	.inline_content .writing{max-width:290px;}
	.inline_content ul{max-width:290px;}
}

@media screen and (max-width: 320px) {
	.inline_content img{max-width: 270px;}
	.inline_content .writing{max-width:270px;}
	.inline_content ul{max-width:270px;}
}


/* END */