@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:1200px; margin:0 auto;			/*内容全体をセンタリング*/
}
img {border:0;} 				/*画像のボーダーを0にする*/
p {
	width:840px;		/*幅の指定*/
	margin:10px;		/*マージン*/
    text-indent:1em;		/*インデント幅*/
}


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

a#link {
    color:#ddb500;
    text-decoration:none;
    font-weight: bold;
}

a#link:hover {
    color:#996300;
    text-decoration: underline;
    font-weight: bold;
}

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

div#header {
	width:1200px; margin:0 auto;			/*内容全体をセンタリング*/
	height:110px;				/*ヘッダ部分の高さ*/
}
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:600px; height: 100px;      /*画像サイズ*/
    float:left;
}
div#header p{
    font-size:85%;
    width:1160px;
    margin:0px;
    padding:70px 0px 0px 0px;
    color:#333333;			/* 文字色を濃い目のグレーにする */
    text-align: left;
}

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

/*============================================
スマホ用ハンバーガーメニュー（隠すため）
============================================*/
@media screen and (min-width:641px) {
#mobilemenu  {
    display: none;  
}

}

/*============================================
メインメニュー
============================================*/
@media screen and (min-width:641px) {
div#menubody {
    background-color:#ffd700;
}

div#menu {
	width:1200px; margin:0 auto;			/*内容全体をセンタリング*/
}

ul.menu {
	width:1160px; height:55px; 	/*メインメニュー部分の幅と高さ*/
	margin:0px 20px; 		/*マージン*/
}
.menu li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline-block;			/*リスト項目をインライン-ブロック表示にする*/
	float:left;			/*リスト項目を横に並べる*/
    position: relative;     /* サブドロップダウンの表示位置 */
    background-color:#ffd700;		/*背景色*/
	width:290px; height:35px;	/*幅と高さ*/
	padding:10px 0px 10px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
}

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

.menu li ul a {
    padding: 8px 0px 0px 0px;       /*パディング*/
    font-size:150%;			/* フォントサイズを150%にする */
	color:#ffffff;			/*文字色*/
    text-decoration:none;		/*リンク部分を下線無しにする*/
}

.menu ul {
    display: none;      /* デフォルトで隠す */
    left: 0;        /* 位置固定 */
    position: absolute;
    top: 100%;
    list-style-type: none;      /* 書式のリセット */
    margin: 0; padding: 0;　/* マージン パディング */
    background-color:#ffd700;		/*背景色*/
    font-size:100%;			/* フォントサイズを100%にする */
	color:#ffffff;			/*文字色*/
	width:290px; height:10px;	/*幅と高さ*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/
}

.menu ul ul {
    left: 100%;     /* サブドロップダウン（2段目）の表示位置 */
    position: absolute;
    top: 0;
}


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

.menu li:hover > ul {
    display: block;     /* カーソルを合わせるとドロップダウンが現れる */
}

}

/*============================================
メインメニューのダミー
============================================*/
@media screen and (min-width:641px) {
div.headerborder {
    width:1200px;
    height:55px;
    background-color:#ffd700;
}

}

/*============================================
ヘッダ画像
============================================*/
#img_index {
	width:1160px; height:400px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 20px;		/*マージン*/
}

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

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

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

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

/*============================================
インフォメーション（右カラム）
============================================*/
div#info {
	width:860px;		/*幅の指定*/
	float:right;			/*カラムを左寄せにする*/
    margin:10px 20px 10px 10px;     /*マージン*/
}
h3 {
	font-size:25px;			/*文字サイズ*/
	width:1140px;			/*横幅*/
    margin:0px 0px;        /*マージン*/
	padding:10px 0px 0px 20px;		/*パディング*/
	background-color:#ffffe0;		/*背景色*/
	color:#333333;			/*文字色*/
    border-bottom: solid 3px #ffd700;       /*下線*/
}
h4 {
	font-size:25px;			/*文字サイズ*/
	width:840px;			/*横幅*/
    margin:0px 0px;        /*マージン*/
	padding:10px 0px 0px 20px;		/*パディング*/
	background-color:#ffffe0;		/*背景色*/
	color:#333333;			/*文字色*/
    border-bottom: solid 3px #ffd700;       /*下線*/
}

h5 {
    font-size: 20px;
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    background: transparent;/*背景透明に*/
    color: #333333;/*文字色*/
    border-left: solid 3px #ffd700;/*左線*/
}

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

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

img.imgright {
    float:right;
    margin:10px;
}

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

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

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

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

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

/*============================================
作品カード表示
============================================*/
div#card {
    float:left;			/*リスト項目を横に並べる*/
    margin:13px;        /*マージン*/
    display:block;			/*リンク部分をブロック表示にする*/
    background-color:#fffff0;		/*背景色*/
    width:400px; height:400px;     /*ブロックのサイズ*/
    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);     /*影の設定*/
}

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

div#card img {
    width:400px; height:200px;
    border-radius:10px 10px 0px 0px;			/*上だけ角丸にする*/
    object-fit:contain;     /*画像のはめ込み設定（なるべくサイズ合わせてね）*/
    background-color:#ffffff;		/*背景色*/
}

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

div#card p {
    width:380px; height:145px;
}

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

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

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

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

@media screen and ( min-width:640px) {
.articlelist li a:hover {
    text-decoration: underline;
    background-color: #fffacd;
}

}

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

div#history dt {
  color:#333333;
  font-weight:bold;
  padding:0 10px 0 0;
  width:120px;
  float:left;
  margin-bottom:7px;
}

div#history dd {
  color:#333333;
  margin-bottom:7px;
}

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

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

/*============================================
YouTube埋め込み設定
============================================*/
div#video {
    text-align: center;
}

/*============================================
アンケート関係
============================================*/
div#largebutton {
    float:left;			/*リスト項目を横に並べる*/
    margin:10px;        /*マージン*/
    display:block;			/*リンク部分をブロック表示にする*/
    background-color:#fffff0;		/*背景色*/
    width:260px; height:60px;     /*ブロックのサイズ*/
    border-radius:10px;			/*角丸にする*/
    border:2px solid #ffd700;	/*リンク領域にボーダーを付ける*/
    position: relative;
}

div#largebutton a {
    display:block;			/*リンク部分をブロック表示にする*/
    width:auto; height:auto;     /*ブロックのサイズ*/
    border-radius:10px;			/*角丸にする*/
    text-decoration:none;		/*リンクの下線を無くす*/
    color:#333333;			/* 文字色を濃い目のグレーにする */
}

div#largebutton p {
    margin:0 auto;         /*位置調整とか*/
    width:260px; height:auto;
    text-align: center;
    font-size:150%;			/* フォントサイズを150%にする */
    text-indent:0em;		/*インデント幅*/
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

div#largebutton:hover {
    background-color:#ffffe0;      /*カーソルを合わせると色が変わる*/
    border:2px solid #ffa500;	/*リンク領域にボーダーを付ける*/
    border-radius:10px;			/*角丸にする*/
    transition-duration: 0.2s;
}

/*============================================
備考情報
============================================*/
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;		/*センタリング*/
}