@charset "utf-8";

/* =============================================================================

	通販(たのめーる)領域のCSS
	[特殊ページ・LP共通]

	最終更新日：2023年3月9日

	.supply .special ～ で全て記述すること。

============================================================================= */

/* **********************************************************************************

	たのめーる パララックス

********************************************************************************** */

/* -------------------------------------------------------------------
	メイン
	.supply .special ～
------------------------------------------------------------------- */
.supply #main-container.special { width:100%; }
.supply .special #main {
	float:none; width:100%; padding:0 0 5em; font-size:12px; font-size:1.2rem;
	font-family:Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Helvetica,sans-serif; }
	.supply .special #main p { font-size:16px; font-size:1.6rem; line-height:1.7em; }


/* **********************************************************************************

	たのめーる ワンカラムレイアウト

********************************************************************************** */

/* -------------------------------------------------------------------
	コンテンツヘッダー
	.supply .special #main header ～
------------------------------------------------------------------- */ 
.supply .special #main header .area-h1{
	position:relative;
	width:960px; min-height:380px; margin:0 auto;
	background:url(/common-s/img/supply/pc-peripheral-equipment/area-h1-bg.png) no-repeat left top;}
	.supply .special #main header .area-h1 h1{
		position:absolute; top:40px; left:54px;
		margin:0; padding:0; border:none; font-size:100%; line-height:1em;}
	.supply .special #main header .area-h1 p.lead{
		width:440px; margin:0; padding:238px 0 0 55px; font-size:15px; font-size:1.5rem; line-height:1.7em;}


/* -------------------------------------------------------------------
	コンテンツボディ
	.supply .special #main #main-body ～
------------------------------------------------------------------- */
/* 静的ページ用 */
.supply .special #main .main-body-static{ position:relative; width:960px; margin:0 auto;}

.supply #main #main-body .main-body-static h2 {
	position:relative;
	margin:2em 0 0 -20px;padding:6px 0 8px 20px;
	border-bottom:2px solid #ccc;
	font-size:22px; font-size:2.2rem; line-height:1.4em; overflow:hidden; }
.supply #main #main-body .main-body-static h2:before{
	content:"";display:block;
	height:86%;width:8px;
	position:absolute;left:0; bottom:5px;
	background:#ff9e20; border-radius:4px;}

.supply #main #main-body .main-body-static h3 {
	margin:0; padding:0; border:none;
	color:#743400; font-size:20px; font-size:2rem; line-height:1.2em; font-weight:bold; }
	.supply #main #main-body .main-body-static h3 a {
		display:inline-block;
		padding:0 0 0 16px;
		background:url(/common-o/img/icon-arrow-right.png) no-repeat 2px 0.45em; }
.supply #main #main-body .main-body-static h4 {
	margin:1.5em 0 0; padding:0;
	font-size:14px; font-size:1.4rem; line-height:1.5em; font-weight:bold; }

.supply #main #main-body .main-body-static ol { margin:1em 0 0 29px; }
.supply #main #main-body .main-body-static ul { margin:1em 0 0 29px; }
	.supply #main #main-body .main-body-static li { margin:0.4em 0 0; font-size:14px; font-size:1.4rem; line-height:1.7em; }
		.supply #main #main-body .main-body-static li ul { margin:1em 0 0 14px; }
.supply #main #main-body .main-body-static dl { margin:1em 0 0; }
	.supply #main #main-body .main-body-static dt { font-size:14px; font-size:1.4rem; line-height:1.7em; }
	.supply #main #main-body .main-body-static dd { font-size:14px; font-size:1.4rem; line-height:1.7em; }
.supply #main #main-body .main-body-static table { font-size:14px; font-size:1.4rem; line-height:1.7em; }
.supply #main section #main-body .main-body-static section { padding:1px 0 0 20px; }


.supply #main section #main-body .main-body-static section section { padding:0; background:none; }
.supply #main #main-body .main-body-static footer { margin:2em 0 0; }


/* 4カラムボックス */
.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc{ display:table; border-spacing:20px; margin:-10px -20px -20px;}
	.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc li{ display:table-cell; border:1px solid #ff9e20; background:#fffcf3;}
		.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc li p.pic{ margin:0;}
			.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc li p.pic img{ display:block;}
		.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc li p.text{
			margin-top:0.8em; padding:0 10px 10px; color:#743400; font-weight:bold;
			font-size:14px; font-size:1.4rem; line-height:1.7em;}

/* 注釈（※番号付き） */
.supply .special #main #main-body .main-body-static .list-notes-number{ margin-left:0;}
	.supply .special #main #main-body .main-body-static .point + .list-notes-number{ margin-top:2em;}
	.supply .special #main #main-body .main-body-static .list-notes-number li{
		list-style:none; margin:0.2em 0 0 2em;
		font-size:14px; font-size:1.4rem; line-height:1.7em;
		text-indent:-2em;}
		.supply .special #main #main-body .main-body-static .list-notes-number li a{ display:inline;}

/* 背景矢印、緑大文字 */
.supply .special #main #main-body .main-body-static .text-why-tanomail{
	min-height:70px; padding-top:25px;
	font-weight:bold; color:#005b3a;
	background:url(/common-s/img/supply/pc-peripheral-equipment/why-tanomail-arrow.png) no-repeat center top;
	font-size:24px; font-size:2.4rem; line-height:1.7em; text-align:center;}
	
/* どうして「たのめーる」なの？ */
.supply .special #main #main-body .main-body-static .area-why-tanomail{}
	.supply .special #main #main-body .main-body-static .area-why-tanomail .title{
		padding:10px 15px 8px;
		border:1px solid #ccc;
		background:#fbf8f1;
		background:-webkit-linear-gradient(top, #fff 0%, #fbf8f1 100%);
		background:linear-gradient(to bottom, #fff 0%, #fbf8f1 100%);
		font-weight:bold; font-size:20px; font-size:2rem; line-height:1.7em;}
	.supply .special #main #main-body .main-body-static .area-why-tanomail .why-tanomail-content{
		min-height:345px; border:1px solid #ccc; border-top:none;
		background:url(/common-s/img/supply/pc-peripheral-equipment/why-tanomail-bg.png) no-repeat left bottom #fff;}
		.supply .special #main #main-body .main-body-static .area-why-tanomail .why-tanomail-content p{ width:460px; margin:0; padding:25px 25px 0;}
		.supply .special #main #main-body .main-body-static .area-why-tanomail .why-tanomail-content ul{ margin:1.5em 25px 0;}
			.supply .special #main #main-body .main-body-static .area-why-tanomail .why-tanomail-content ul li{ display:inline-block; list-style:none; margin:0 20px 0 0;}

/* 「たのめーる」を利用する　ボタン */
.supply .special #main #main-body .main-body-static .button-tanomail {}
	.supply .special #main #main-body .main-body-static .button-tanomail .button {
		margin:3em 0 0; text-align:center; }
		.supply .special #main #main-body .main-body-static .button-tanomail .button a {
			display:inline-block; position:relative;
			box-sizing:border-box; min-width:478px; min-height:60px;
			border-radius:3em; border:1px solid #005b3a;
			padding:0.64em 70px 0.64em 100px;
			background:#117046;
			background:-webkit-linear-gradient(top, #16925b 0%, #0e5535 100%);
			background:linear-gradient(to bottom, #16925b 0%, #0e5535 100%);
			font-size:22px; font-size:2.2rem; font-weight:bold; color:#fff; line-height:1.4;
			box-shadow:5px 5px 5px 0 rgba(0, 0, 0, 0.3); }
		.supply .special #main #main-body .main-body-static .button-tanomail .button a:before {
			display:inline-block; position:absolute; left:17px; top:0; bottom:0;
			width:33px; height:33px; margin:auto 0; border-radius:50%;
			background:#fff url(/common-s/img/supply/pc-peripheral-equipment/icon-blank-tanomail.png) no-repeat 50% 50%;
			content:""; }
		.supply .special #main #main-body .main-body-static .button-tanomail .button a:hover {
			border-color:#007951;
			background-color:#199060;
			background:-webkit-linear-gradient(top, #20b177 0%, #15734c 100%);
			background:linear-gradient(to bottom, #20b177 0%, #15734c 100%); }


@-ms-viewport { width:auto; }
@media
	only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait),
	only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) {
@-ms-viewport { width:738px; }

/* -------------------------------------------------------------------
	コンテンツヘッダー
	.supply .special #main header ～
------------------------------------------------------------------- */
.supply .special #main header .area-h1{ width:710px; min-height:280px; background-size:710px auto;}
	.supply .special #main header .area-h1 h1{ position:absolute; top:30px; left:35px;}
		.supply .special #main header .area-h1 h1 img{ width:100%; max-width:200px; height:auto;}
	.supply .special #main header .area-h1 p.lead{
		position:absolute; top:172px; left:42px; width:330px; padding:0; font-size:12px; font-size:1.2rem; line-height:1.7em;}

/* -------------------------------------------------------------------
	コンテンツボディ
	.supply .special #main #main-body ～
------------------------------------------------------------------- */
/* 静的ページ用 */
.supply .special #main .main-body-static{ width:710px;}
	.supply .special #main .main-body-static p img{ width:100%; height:auto;}

/* 4カラムボックス */
.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	margin:1em 0 0;}
	.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc li{ display:block; width:160px;}
		.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc li p.pic{ margin:0;}
			.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc li p.pic img{ display:block; width:100%;}
		.supply .special #main #main-body .main-body-static .parts-box-computer-used-at-work-pc li p.text{}

/* どうして「たのめーる」なの？ */
.supply .special #main #main-body .main-body-static .area-why-tanomail{}
	.supply .special #main #main-body .main-body-static .area-why-tanomail .title{
		font-size:19px; font-size:1.9rem; line-height:1.7em;}
	.supply .special #main #main-body .main-body-static .area-why-tanomail .why-tanomail-content{
		min-height:360px;
		background:url(/common-s/img/supply/pc-peripheral-equipment/why-tanomail-bg.png) no-repeat left bottom #fff;
		background-size:790px auto;}
		.supply .special #main #main-body .main-body-static .area-why-tanomail .why-tanomail-content ul{
			margin:1em 25px 0;}
		.supply .special #main #main-body .main-body-static .area-why-tanomail .why-tanomail-content p{
			width:430px;}

/* 「たのめーる」を利用する　ボタン */
.supply .special #main #main-body .main-body-static .button-tanomail{}
	.supply .special #main #main-body .main-body-static .button-tanomail p.button a:hover{
		text-decoration:none;
		background:#fff;
		background:-webkit-linear-gradient(top, #fff 0%, #e6e6e6 100%);
		background:linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);}


}