@charset "utf-8";

/*============================================
全般的なスタイル
============================================*/
* {
	margin:0; padding:0; 		/*全要素のマージン・パディングをリセット*/
}
body {
	background-color:#fffff0;	/*ページ全体の背景色*/
	font-size:100%;			/* フォントサイズを100%にする */
	font-family: "ＭＳ ゴシック",sans-serif;	/* フォントの種類をゴシック系にする */
	line-height:1.5;		/* 行の高さを1.5倍にする */
	color:#333333;			/* 文字色を濃い目のグレーにする */
}
div#pagebody {
	width:100%; margin:0 auto;			/*内容全体をセンタリング*/
}
img {border:0;} 				/*画像のボーダーを0にする*/
p {
	width: 98%;		/*幅の指定*/
	margin: 10px auto;		/*マージン*/
    text-indent: 1em;		/*インデント幅*/
}

/*============================================
PDFリンク　といいつつ普通のリンク
============================================*/

a#pdflink {
    color:#ddb500;
    text-decoration:none;
}

a#pdflink:hover {
    color:#996300;
    text-decoration: underline;
}

/*============================================
ヘッダ
============================================*/
div#headerbody {
    background-color:#ffffe0;
}

div#header {
	width:100%; margin:0 auto;			/*内容全体をセンタリング*/
	height: auto;				/*ヘッダ部分の高さ*/
}
div#header h1 {
	padding:10px 0px 0px 20px;		/*見出しの位置調整*/
	font-size:18px;				/*フォントのサイズ*/
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
}
div#header h1 a {
    text-decoration:none;       /*リンクの下線を無くす*/
}
div#header img {
    border:0;       /*画像のボーダーを0にする*/
    width:85%; height: auto;
    float:left;
}
div#header p{
    clear: both;
    font-size:85%;
    width:100%;
    padding:0px;
    margin:0px;
    color:#333333;			/* 文字色を濃い目のグレーにする */
    text-align: left;
}

div#share {
    float:right;
    margin:0 20px 0 0;
}

/*============================================
メインメニュー（PC版を隠すため）
============================================*/
div#menubody {
    display: none;
}

/*============================================
スマホ用ハンバーガーメニュー
============================================*/
#mobilemenu {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    right:5px;
    top:5px;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
    display:none;
}

/*アイコンのスペース*/
#nav-open {
    position: fixed;
    display:inline-block;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    background-color: #ffd700;
    border-radius:5px;
    z-index:99;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#mobilemenu-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 70%;/*最大幅（調整してください）*/
  height: 100%;
  background: #fffff0;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #mobilemenu-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/*ハンバーガーメニューの中身*/

#mobilemenu-content {
	width:100%; margin:0 auto;			/*内容全体をセンタリング*/
}

#mobilemenu-content ul.menu {
    display: block;
    width: 100%; height: auto;
}

#mobilemenu-content ul.menu li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline-block;			/*リスト項目をインライン-ブロック表示にする*/
    position: relative;     /* サブドロップダウンの表示位置 */
    background-color:#ffd700;		/*背景色*/
	width:100%; height:35px;	/*幅と高さ*/
	padding:0px 0px 0px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
    border-bottom:solid 3px #fffff0;
}

#mobilemenu-content ul.menu li a {
    display:block;			/*リスト項目をインライン-ブロック表示にする*/
    width: 100%;
    padding:0px;
    font-size:150%;			/* フォントサイズを175%にする */
	color:#ffffff;			/*文字色*/
    text-decoration:none;		/*リンク部分を下線無しにする*/
}

#mobilemenu-content ul.menu li.main {
    background-color: #ffa500;
}

#mobilemenu-content ul.menu li:hover {
    background-color: #ffa500;      /* カーソルを合わせると色が変わる */
    transition-duration: 0.2s;      /*色が変わる時間*/
}

/*============================================
メインメニューのダミー（隠す用）
============================================*/
div.headerborder {
    display: none;
}

/*============================================
ヘッダ画像
============================================*/
#img_index {
	width:100%; height: auto;
	margin:0px;		/*マージン*/
}
#img_index img {
    width:100%;
}

/*============================================
サブメニュー（左カラム）
============================================*/
div#submenu {
	width:100%;			/*幅の指定*/
	margin:0px 0px 10px 0px;	/*位置調整*/
}
div#submenu ul li {
	list-style-type:none;			/*リストマーカー無しにする*/
}

div#submenu ul li a {
    background-color:#ffffe0;		/*背景色*/
	display:block;			/*リンク部分をブロック表示にする*/
    width:100%; height:45px;      /*ブロックのサイズ*/
	padding:15px 0px 0px 0px;	/*パディング*/
	text-decoration:none;		/*リンクの下線を無くす*/
	border-bottom:3px solid #ffd700;	/*リンク領域の下部にボーダーを付ける*/
    font-size:125%;			/* フォントサイズを125%にする */
	color:#333333;			/*文字色*/
    text-indent: 1em;
}

div#submenu ul li a:hover{
    background-color: #fffacd;      /* カーソルを合わせると色が変わる */
    transition-duration: 0.2s;      /*色が変わる時間*/
}

div#submenu h2 {
    background-color:#ffd700;		/*背景色*/
	display:block;			/*リンク部分をブロック表示にする*/
    width:100%; height:45px;      /*ブロックのサイズ*/
	padding:10px 0px 0px 0px;	/*パディング*/
    border-radius:5px;			/*角丸にする*/
	color:#333333;			/*文字色*/
    text-indent: 1em;
}

/*============================================
インフォメーション（右カラム）
============================================*/
div#info {
	width:100%;		/*幅の指定*/
    margin:10px 0px;     /*マージン*/
}
h3 {
	font-size:25px;			/*文字サイズ*/
	width:100%;			/*横幅*/
    margin:0px;        /*マージン*/
	padding:10px 0px 0px 0px;		/*パディング*/
	background-color:#ffffe0;		/*背景色*/
	color:#333333;			/*文字色*/
    border-bottom: solid 3px #ffd700;       /*下線*/
    text-indent: 1em;
}
h4 {
	font-size:25px;			/*文字サイズ*/
	width:100%;			/*横幅*/
    margin:0px 0px;        /*マージン*/
	padding:10px 0px 0px 0px;		/*パディング*/
	background-color:#ffffe0;		/*背景色*/
	color:#333333;			/*文字色*/
    border-bottom: solid 3px #ffd700;       /*下線*/
    text-indent: 0em;
}

hr {
    width:100%;       /*横幅*/
	clear:both;			/*フロート配置をクリアする*/
	margin:10px 0px;		/*マージン*/
	border:1px dotted #ffd700;	/*内容の区切りをグレーの点線表示にする*/
}

p#chumozi {
    width:100%;			/*幅の指定*/
    margin: 0px 0px 0px 0px; /* マージン */
    font-size:150%;     /*フォントサイズ*/
}

div#banner a img:hover{
    filter: brightness(90%);        /*バナーにカーソル合わせると暗くなる*/
    transition-duration: 0.2s;      /*色が変わる時間*/
}

a#imgarticle img {
    width: 100%;
    height: auto;
}

img.imgright {
    width: 100%;
    height: auto;
}

img.aboutsite {
    width: 100%;
    height: auto;
}

/*============================================
連載記事で使う表（料理の材料リストとか）
============================================*/
ul.bulletslist {
    margin:10px 0px;
    padding:0px;
    width:auto;
}

.bulletslist li {
    list-style-position: inside;
    color: #333333;
    width:auto; height: auto; 
    margin:10px;
}

ul.bulletslist2 {
    margin:10px 0px 10px 10px;
    padding:0px;
    width:auto;
}

.bulletslist2 li {
    list-style-position: inside;
    color: #333333;
    width:auto; height: auto; 
    margin:10px;
}

/*============================================
作品カード表示
============================================*/
div#card {
    margin:10px auto;
    float:left;			/*リスト項目を横に並べる*/
    display:block;			/*リンク部分をブロック表示にする*/
    background-color:#fffff0;		/*背景色*/
    width:80%;      /*ブロックのサイズ*/
    border-radius:10px;			/*角丸にする*/
    border:2px solid #ffd700;	/*ボーダーを付ける*/
    box-shadow:
  0 0px 1.5px -20px rgba(0, 0, 0, 0.107),
  0 0px 3.9px -20px rgba(0, 0, 0, 0.165),
  0 0px 8px -20px rgba(0, 0, 0, 0.214),
  0 0px 16.4px -20px rgba(0, 0, 0, 0.27),
  0 0px 45px -20px rgba(0, 0, 0, 0.4);     /*影の設定*/
    position:relative;
    left:50%;
    transform: translateX(-50%);
}

div#card a {
    text-decoration:none;		/*リンクの下線を無くす*/
    color:#333333;			/* 文字色を濃い目のグレーにする */
}

div#card img {
    object-fit: contain;
    width:100%; height:auto;
    border-radius:10px 10px 0px 0px;			/*上だけ角丸にする*/
    background-color:#ffffff;		/*背景色*/
}

div#card p#cardtitle {
    margin:0;         /*位置調整とか*/
    width:100%; height:auto;
    padding:0px 0px 0px 0px;
    text-align:center;
    font-size:150%;			/* フォントサイズを150%にする */
    text-indent:0em;		/*インデント幅*/
}

div#card p {
    width:90%; height:auto;
    margin:auto;
}

div#card:hover{
    background-color:#ffffe0;      /*カーソルを合わせると色が変わる*/
    border:2px solid #ffa500;	/*ボーダーを付ける*/
    transition-duration: 0.5s;      /*画像拡大の時間*/
    border-radius:10px;			/*角丸にする*/
}

/*============================================
記事リスト
============================================*/
ul.articlelist {
    margin:10px 0px;
    border:2px solid #ffd700;
    background:#fffff0;
    padding:0px;
    width:100%;
}

.articlelist li {
    list-style-type:none;			/*リストマーカー無しにする*/
    width:100%; height: auto; 
    margin:10px 0px;
}

.articlelist li a {
    padding:0px 10px;
    line-height: 30px;
    display: block;
    width:96%; height: auto;
    text-decoration: none;
    color: #333333;
}

/*============================================
来歴
============================================*/
div#history dl {
    padding:20px 0px;
    width:100%;
}

div#history dt {
  color:#333333;
  font-weight:bold;
  padding:0 5px 0 5px;
  width:25%;
  float:left;
}

div#history dd {
  color:#333333;
    float:right;
    width:72%;
    height:auto;
}

div#history dl::after {
    content: '';
    display: block;
    clear: both;
}

div#history hr {
    width:100%;       /*横幅*/
	clear:both;			/*フロート配置をクリアする*/
	margin:0px 0px;		/*マージン*/
    border:none;
}

/*============================================
YouTube埋め込み設定
============================================*/
div#video {
    text-align: center;
    position: relative;
    width: 100%;
    height: auto;
    height:0;
    padding-top:75%;
}

iframe#video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*============================================
備考情報
============================================*/
div.remarks {
	margin:0px 10px 10px 10px;
}

/*============================================
フッタ
============================================*/
div#footer {
	clear:both;			/*回り込みを解除する*/
    height:40px;			/*高さの指定*/
	padding:10px 0px 0px 0px;	/*パディング*/
	font-size:x-small;		/*フォントサイズを小さくする*/
	text-align:center;		/*センタリング*/
}