@charset "UTF-8";

/*------------------------------------------------------------
 1. Reset
-------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,p,blockquote,table,th,td,
main,section,header,footer,nav,figure,figcaption,article {
	margin: 0;
	padding: 0;
}
address,caption,cite,code,dfn,h1,h2,h3,h4,th,var{
	font-style: normal;
	font-weight: normal;
}
fieldset,img,abbr{ border: 0; }
caption,th{ text-align: left; }
q:before,q:after{ content: ''; }
a{ text-decoration: none; }
img{
	border: none;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
span{ vertical-align: top; }
/*WordPress対策*/
span textarea,span input{ vertical-align: bottom!important; }
/*Firefox対策*/
html{ overflow-y: scroll; }
body,x:-moz-broken { margin-left:-1px; }


/*------------------------------------------------------------
 2. Design Layout (PC版)
-------------------------------------------------------------*/
body{
	margin: 0;
	background-color: #fff;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;	
	font-size: 100%;
	line-height: 1.6em;
}
a{ text-decoration: underline; }
a:link{ color: #000; }
a:visited{ color: #000; }
a:hover{ color: #cc6600; }

h1{
	margin-left: 2em;
	font-size: 10pt;
}
h1 a, h1 a:link, h1 a:visited{ color: #fff; text-decoration: none; }
h1 a:hover{ color: #990000; }
h2{ margin-bottom: 1em; }


/* ★PC用ヘッダー背景エリア（画面幅100%に広がるため腕が切れない） */
#pc-header {
	width: 100%;
	height: 600px; /* 画像の高さ */
	background: url(../images/head.jpg) top center no-repeat;
}

/* スマホ用ヘッダー画像はPCでは非表示 */
.sp-header-img {
	display: none;
}

/* コンテナ設定（PC表示用） */
div#container{
	width: 944px; /* 元の幅固定に戻す */
	margin: 0 auto;
}

/* メインエリア */
main#main{
	width: 100%;
	background: url(../images/sideline.gif) #fff repeat-y;
}

/* メインコンテンツ */
div#main-contents{
	width: 100%;
}
div#main-contents p{
	margin-bottom: 1.2em;
	padding: 0;
}
div#main-contents hr{
	clear: both;
	margin: 0.5em 0 0.5em;
	padding: 0px;
	font-size: 1.0em;
	line-height: 1.0em;
	color: #ccc;
}

/* ★PC表示：元サイトの余白を復元 */
div#main-contents .contents{
	margin-top: 0; 
	padding-top: 40px;  /* ←【修正】ここで本文最初の余白（隙間）を開けています */
	margin-left: 100px; /* 左サイドの装飾ライン分の余白 */
	width: 750px;       /* 枠線にきれいに収まる固定幅 */
}

div#main-contents li{
	margin: 0 1em 0;
	line-height: 1.8em;
}

/* フッターメニュー類 */
.menu ul{
	float: right;
	margin: 10px 10px;
}
.menu ul li{
	display: inline;
	list-style-type: none;
	margin-right: 10px;
}
footer#footer{
	clear: both;
	margin-left: 100px; /* コンテンツと同じ左余白 */
	width: 750px;
	font-size: 10pt;
	padding-bottom: 20px;
}
footer#footer #copyright{
	clear: both;
	padding: 8px;
	text-align: center;
}
footer#footer #copyright a{ text-decoration: none; }

/* YouTube埋め込みのレスポンシブ対応 */
iframe {
	max-width: 100%;
	aspect-ratio: 16 / 9; /* 画面の幅に合わせて自動で16:9になります */
	height: auto;
}


/*------------------------------------------------------------
 3. Modern Layout Replacements (テーブル置き換え用Flexbox)
-------------------------------------------------------------*/
/* プロフィール枠 */
.profile-wrapper {
	text-align: center;
	background-color: #eee;
	border-top: 5px solid gray;
	border-bottom: 5px solid gray;
	padding: 10px;
	margin-bottom: 2em;
}
.profile-inner {
	display: flex;
	gap: 15px;
	text-align: left;
	align-items: flex-start;
	padding: 5px;
}
.profile-image {
	flex: 0 0 187px; /* 画像幅固定 */
	text-align: center;
}
.profile-text {
	flex: 1;
}

/* 商品枠 */
.product-wrapper {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-top: 1em;
}
.product-image {
	flex: 0 0 auto;
}
.product-details {
	flex: 1;
}

/* チェックマーク用 */
.check-icon {
	float: left;
	margin-right: 5px;
	margin-top: 3px;
}


/*------------------------------------------------------------
 4. Advanced/Utility
-------------------------------------------------------------*/
.al-c{ text-align: center; }
.al-r{ text-align: right; }
.al-l{ text-align: left; }
.fl-r{ float:right; margin-left: 20px; }
.fl-l{ float:left; margin-right: 20px; }

.b{ font-weight: bold!important; }
.normal{ font-weight: normal!important; }
.red{ color: #ff0000!important; }

.f10em{ font-size: 1.0em; }
.f12em{ font-size: 1.2em; }
.f10pt{ font-size: 10pt!important; }

.lh18{ line-height: 1.8em!important; }


/*------------------------------------------------------------
 5. Mobile & Tablet Responsive (スマホ・タブレット対応)
-------------------------------------------------------------*/
@media only screen and (max-width : 820px){
	/* iPad Airなどの中間サイズ向け調整 */
	
	#pc-header {
		display: none; /* スマホでは背景エリアを非表示 */
	}
	
	/* スマホでは画像タグとして表示させ、高さに合わせて本文が続くようにする */
	.sp-header-img {
		display: block;
		width: 100%;
		height: auto;
	}

	div#container{
		width: 100%;
	}

	main#main{
		background-image: none; /* スマホ・タブレットでは左の装飾線を消す */
	}
	
	div#main-contents .contents{
		margin-left: 20px; /* 左余白を狭くする */
		margin-right: 20px;
		padding-top: 20px; /* スマホ時の上部余白 */
		width: auto;
		max-width: 100%;
	}
	footer#footer{
		margin-left: 20px;
		width: auto;
	}
	
	/* テーブル代用Flexのスマホ対応 */
	.profile-inner, .product-wrapper {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.profile-inner {
		text-align: left;
	}
	.profile-image {
		flex: 0 0 auto;
		margin-bottom: 15px;
	}
	.menu ul {
		float: none;
		text-align: center;
		padding: 10px 0;
	}
	.menu ul li {
		display: block;
		margin: 5px 0;
	}
}