/*
  Skin Name: パソコンショップ SEVEN Skin
  Description: パソコンショップ SEVEN 用スキン　社外の方はご利用いただけません。
  Skin URI: https://pc-seven.co.jp
  Author: パソコンショップ SEVEN
  Author URI: https://pc-seven.co.jp
  Version: 1.0
  Priority: 9999000000
*/
/*以下にスタイルシートを記入してください*/
/*--------------------------------
ヘッダー
---------------------------------*/
/*cocoon独自タグ制御*/
body, .header, .appeal{
	background-size: auto;
}
.header{
	background-attachment: fixed;
}
.header-in{
	padding: 10px 10px 5px;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}
.header-container{
	padding: 10px 0 0;
	line-height: normal;
}
.header-container a{
	text-decoration: none;
	font-size: 16px;
}
.header-container a:hover{
	text-decoration: none;
}

.navi .item-label,
.navi .item-description{
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2em;
	/*-webkit-line-clamp: 2;*/
}
.wrap{
	width: 100%;
  max-width: 1332px;
  margin: 0 auto;
  position: relative;
  padding: 0 16px;
}
.tagline{
	font-size: 14px;
	margin: 0;
}
.logo-image{padding: 0;}
.logo{
	margin-top: 10px;
}
.site-name-text{font-size: 0;}
.site-name-text-link{padding: 0;}

/*.hd-top-search-input button {
		position: absolute;
		right: 0;
		top:0;
		padding:0;
		width: 50px;
		height: 100%;
		font-size: 1em;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoBJREFUeNpiYKAhYMQn+f//fwMgFYAmfIGRkXEDMYaz4DAUZGD/jt3HFY6dvMRw9fpdsLisjDiDpbkew4cPnz/w8/NMBFrSQJLLgQbPBxqaUNc6g+Hxk5dYNfHx8TCU5MUwpCYEXAByHYGWfCBoOMjglet2JxSU9cLFVDWVGUyArmXm42a4BPQFCMNAeLArw4TOYrwWwAwu2L7r2H8JZXcwtvLJ+r/nxMX/MPAHiO8B8Y4nL/67RZXC1fVMXAyS7scb+MBwfK9mGAw3+PLHL//RAciCS0B8HogDMxrhFjwCWggECuhmMsEicMfe4wKfPn0BC9bNqGMQAQYDOmAGYk4ou7izmIEbGPYgMHs+OPEEYDUcCOyBkQhmWLpaMYhLixNMZtxAy12DXMHsY5B48MdluAHM1cqaSmD6HRD/RVP8HYi/IPH1gBENArCkSlQ6B4FfQHwHiCWgwQHiP8XiemIy0QOYwJdPX1Fceh+P5nvX78HTPTYAC5aL2sD0DAK71+1m+IpkAT6we+1uMG0FCZ4LuAzfkJoIieyvwLBfMmkJYYOBjrgHDetwSMRuxGo4MHc9kJUWX5CaEAixacF6IN6A1+A+aC4GudrD1RJUmB3Amf2BaV3g48cv94NjygVgsQ9KDS7ALA5Lmi+fvmTYAwwK5CIAFN7rlnYxaGsqJQItWICvbDEAWrA/KatJ4BiSAdgAqISEFWz4LEAvYxSAeP9RYLmSgJTFYTgIWK6sWLsLlN3fg2iYOKjouHLtLkg8gWCEARU5gEpJIL6PVLyA2OthBoDkybaAGDAgFoBKShaqVMSMjIlAC0BMcEUDKqdgBSHVAMgHoIQAqkBA9QNAgAEAgYGkC7Gq9CIAAAAASUVORK5CYII=) 15px 40% no-repeat;
		border: 0;
		box-shadow: none;
	}*/
/*ここまで*/
.content-in{
	gap:30px;
}
.main{
	width: auto;
	min-height: 600px;
	flex: 1 1 0;
	padding: 30px;
	font-size: 1rem;
	line-break: strict;
	line-height: 200%;
	overflow-wrap: anywhere;
	border-radius: 0;
}
.sidebar{
	width: auto;
	flex: 0 0 30%;
	padding: 0;
}
.sidebar aside{
	padding: 30px;
  background-color: #E5ECF1;
  border-radius: 20px;
	font-size: 1rem;
}
.sidebar aside.widget_search{
	background: none;
}
.sidebar h3{
	background: none;
	padding: 0;
	margin: 0 0 16px;
}
.search-box{
	margin: 0;
}

/*--------------------------------
共通グローバルメニュー
---------------------------------*/
/*new_style.cssより引用*/
.d-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.a-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.j-end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

/*header.cssより引用*/
.hd-header-bottom {
  margin-top: 10px;
}
.hd-header-bottom .hd-top-search-input {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0 20px;
  position: relative;
  margin-top: 3px;
}
.hd-header-top-btn a span{
	display: block;
}
.hd-header-top-btn a span img{
	margin-right: 12px;
}
.btn-blue{
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: #004896;
	border: solid 1px #004896;
	padding: 5px 20px;
	color: #fff;
}
	.btn-blue span {
		color: #fff;
		font-size: 14px;
	}
	.btn-blue.white-bg {
		background: #fff;
		margin-right: 10px;
	}
	.btn-blue.white-bg span {
		color: #004896;
	}
	.btn-blue.pc-tel {
		border-color: #fff;
	}
	.btn-blue.pc-tel span {
		font-size: 18px;
	}
.hd-top-search-input input {
  /* background: rgba(0, 72, 150, .2); */
  /* border: solid 1px transparent; */
  border: solid 2px #DDDDDD;
  width: 100%;
  height: 60px;
  font-size: 16px;
  border-radius: 100px;
  padding: 10px 50px;
  position: relative;
  z-index: 400;
}
.hd-top-search-input input:hover ~ .hd-search-panel {
  display: block;
}
.hd-top-search-input input::-webkit-input-placeholder {
  color: rgba(0, 72, 150, 0.5);
}
.hd-top-search-input input::-moz-placeholder {
  color: rgba(0, 72, 150, 0.5);
}
.hd-top-search-input input:-ms-input-placeholder {
  color: rgba(0, 72, 150, 0.5);
}
.hd-top-search-input input::-ms-input-placeholder {
  color: rgba(0, 72, 150, 0.5);
}
.hd-top-search-input input::placeholder {
  color: rgba(0, 72, 150, 0.5);
}

.hd-top-search-input img {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.hd-top-search-input img.input-search {
  left: 20px;
  z-index: 500;
}
.hd-top-search-input img.input-cancel {
  right: 20px;
  z-index: 500;
}
.hd-top-search-input .hd-search-panel {
  width: 100%;
  padding: 10px;
  position: absolute;
  z-index: 390;
  top: 48px;
  left: 0;
  display: none;
}
.hd-top-search-input .hd-search-panel:hover {
  display: block;
}
.hd-top-search-input .hd-search-panel .hd-search-panel-inner {
  height: 180px;
  overflow-y: auto;
  border-radius: 10px;
  background: #fff;
  border: solid 1px #DDDDDD;
}
.hd-top-search-input .hd-search-panel .hd-search-panel-inner p {
  padding: 10px 10px 5px;
  font-size: 14px;
  font-weight: 600;
  color: #999999;
}
.hd-top-search-input .hd-search-panel .hd-search-panel-inner ul li {
  padding: 5px 10px 5px 20px;
}
.hd-top-search-input .hd-search-panel .hd-search-panel-inner ul li:hover {
  cursor: pointer;
  background: #DDDDDD;
}

.banner-link {
  margin-top: 4px;
}
.banner-link a {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 6px 10px;
  border: solid 2px #DDDDDD;
  border-right: unset;
  font-size: 14px;
  font-weight: bold;
}
.banner-link a div {
  width: 95px;
}
.banner-link a div:first-line {
  font-size: 0.8em;
  font-weight: normal;
}
.banner-link a:last-of-type {
  border-right: solid 2px #DDDDDD;
}
.banner-link .hb-1::before {
  content: url(/shop_img/header-banner_1.png);
  padding-right: 10px;
}
.banner-link .hb-2::before {
  content: url(/shop_img/header-banner_2.png);
  padding-right: 10px;
}
.banner-link .hb-3::before {
  content: url(/shop_img/header-banner_3.png);
  padding-right: 10px;
}

.banner-link-bottom {
  margin-top: 10px;
}
.banner-link-bottom a {
  position: relative;
  padding: 5px 30px;
  margin-left: 10px;
  text-align: center;
}
.banner-link-bottom a span {
  font-size: 14px;
}
.banner-link-bottom a img {
  position: absolute;
  top: 57%;
  left: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.blue-hover, .white-hover {
  position: relative;
  overflow: hidden;
}

.blue-hover::after, .white-hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  opacity: 0.8;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: translateX(-101%);
  transform: translateX(-101%);
}

.blue-hover::after {
  background: rgba(0, 72, 150, 0.3);
}
.blue-hover:hover {
  cursor: pointer
}

.white-hover:hover {
  cursor: pointer;
}

.blue-hover:hover::after, .white-hover:hover::after {
  -webkit-animation: btn-hover 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) alternate forwards;
  animation: btn-hover 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) alternate forwards;
}



/*引用ここまで*/
.header-banner-area a{
	color: #483C34;
}
nav#navi{
	background:#F7F7F7;
	margin-top: 15px;
/*		height:40px;
	width:100%;
	-webkit-box-shadow:rgba(0,0,0,0.3) 0 3px 10px 0;
	-moz-box-shadow:rgba(0,0,0,0.3) 0 3px 10px 0;
	box-shadow:rgba(0,0,0,0.3) 0 3px 10px 0;*/
}
nav#navi li:hover{
  background-image: -webkit-linear-gradient(45deg, rgb(0, 72, 150) 29%, rgb(57, 146, 255) 78%, rgb(42, 179, 252));
  background-image: linear-gradient(45deg, rgb(0, 72, 150) 29%, rgb(57, 146, 255) 78%, rgb(42, 179, 252));
  -webkit-transition: none;
  transition: none;
}
nav#navi li:hover a{
  color: #fff;
}
.navi-in > ul{
	justify-content: space-between;
	list-style-type:none;
	list-style:none;
	min-height: 55px;
}
.navi-in > ul li{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: calc(100% / 7);
	height: auto;
	border: none;
	cursor: pointer;
}
.navi-in a,
.navi-in a:hover{
	background-color:inherit;
  transition: none;
}
.navi-in a{
width: 100%;
height: 100%;
}
.content {
  margin-top: 50px;
}

.caption-wrap{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	height: 100%;
	width: 100%;
	margin: auto;
	padding: 0;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2em;
	position: relative;
	z-index: 200;
	pointer-events: auto;
	border: none;
}
/*--------------------------------
本文
---------------------------------*/
.float_l{float:left;}
.float_r{float:right;}
img.float_l{margin-right: 35px;}
img.float_r{margin-left: 35px;}
.fontLB{font-size:1.5em !important;}
.clear{clear: both;}
.center{text-align: center;}
img.center{display: block; margin: 0 auto;}
.caption{font-size:.8em;color:#999;}

.entry-content p,
.entry-content ul
{margin-left: 35px;
margin-right: 1em;}

.entry-content table{
	width: 90%;
	margin: 10px auto;
}

ul.widget-ul{margin: 20px 0;}
ul.widget-ul li{margin-bottom: 10px;}

.entry-card-thumb{
	width: 200px;
	height: 200px;
}
.entry-card-thumb img{
	max-width: 200px;
	margin: 0 auto;
}
.entry-title{/*h1*/
	margin-top: 1.5em;
	text-align: center;
	font-size: 2rem;
  font-weight: normal;
	}
.article h1{
	font-weight: normal;
}
/*.article h2{
	margin: 50px 0 30px;
	padding:20px 0 20px 20px;
	font-size: 25px;
	background:transparent;
	border-width: 2px 0 1px 0;
	border-style: solid none solid;
}
.article h3{
	padding: 5px 20px;
	border-width: 0 0 1px 0;
	border-style: dashed;
	border-color: #333;
}*/

.spec-box{display: flex;align-items: flex-start;flex-wrap:wrap;}
.spec-img{margin: 25px;}
.article .spec{
	margin-top: 25px;
	font-size: .9em;
	line-height: 1.7em;}
.copylight{
	color:#666;
	font-size: .8em;
}
.kku {
  color: red;
  font-size: 1.5em;
  font-weight: bold;
}
/*webfont軽量化*/
@font-face {
  font-family: 'oxygen';
  src: url('/fonts/Oxygen-Regular.ttf') format("truetype");
  font-display: swap;
}
.kku .price{font: normal 1.5em "oxygen", sans-serif;}
.komikin {
  margin-top: 5px;
	color:#ccc;
  font-size: .7em;
  font-weight: normal;
}
.tax {
	padding-left: .5em;
  font-size: .6em;
  font-weight: normal;
}
.cat-link{
	margin-bottom: .5em;
}

/*--------------------------------
カスタマイズ・見積りボタン用CSS
---------------------------------*/
.bto-btn{
	display:inline-block;
	width:280px;
	margin:25px auto;
	padding:.5em 0;
	font-size:1.1em;text-align: center;vertical-align: bottom;}
.bto-btn:after{margin-left:.5em;content:"\f04b";vertical-align:middle;font-family:fontawesome;font-size:.6em}
.bto-btn:hover,.nosale-btn:hover{color:#f6f9fe}

.bto-btn{text-shadow:1px 1px #eb5606;cursor:pointer;color:#fff;line-height:1.5em;background-color:#eb5606;background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0YWIyMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ViNTYwNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background-size:100%;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4ab22),color-stop(100%, #eb5606));background-image:-moz-linear-gradient(top, #f4ab22 0%,#eb5606 100%);background-image:-webkit-linear-gradient(top, #f4ab22 0%,#eb5606 100%);background-image:linear-gradient(to bottom, #f4ab22 0%,#eb5606 100%);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0;-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0;border:1px solid;border-color:#f4ab22 #b94405 #b94405 #f4ab22;border-color:#eb5606}
.bto-btn:hover{background-color:#f4ab22;background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViNTYwNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y0YWIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background-size:100%;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eb5606),color-stop(100%, #f4ab22));background-image:-moz-linear-gradient(top, #eb5606 0%,#f4ab22 100%);background-image:-webkit-linear-gradient(top, #eb5606 0%,#f4ab22 100%);background-image:linear-gradient(to bottom, #eb5606 0%,#f4ab22 100%);border-color:#b94405 #f4ab22 #f4ab22 #b94405;box-shadow:none}

/*--------------------------------
フッター
---------------------------------*/
.footer-bottom {
	margin: 0;
	padding: 0;
}
.copyright{margin: 0;}

/*--------------------------------
PCサイズ
--------------------------------*/
@media only screen and (min-width: 900px) {
/*	nav#navi li.gaming{
		width: 20%;
	}
	nav#navi li.desktop{
		width: 19%;
	}
	nav#navi li.silent{
		width: 17%;
	}
	nav#navi li.highend{
		width: 17%;
	}
	nav#navi li.sale{
		width: 13%;
	}
	nav#navi li.spec{
		width: 14%;
	}*/
}
@media only screen and (max-width: 899px) {
	.header-container{
		display: none;
	}
	.navi-in.wrap{
		width: 100%;
	}
	nav#navi li.gaming,
	nav#navi li.desktop,
	nav#navi li.highend{
		width: calc(100% / 3);
	}
	nav#navi li.sale,
	nav#navi li.sale-now
	nav#navi li.silent,
	nav#navi li.creator,
	nav#navi li.spec{
		width: calc(100% / 4);
	}
}
@media only screen and (min-width: 561px) {
	/*nav#navi li.gaming a{border:none;}
	nav#navi li.sale a,
	nav#navi li.spec a{
		padding-top: 6px;
		height: 34px;
		font-size:13.2px;
		line-height: 1.1em;
	}
	.navi-in > ul li#menu-item-1712,
	.navi-in > ul li#menu-item-1713{
		display: none;
	}*/
}
/*--------------------------------
スマホサイズ
--------------------------------*/
@media only screen and (max-width: 560px) {
	header {
    height: auto;
    width: auto;
    padding: 10px;
		position: relative;
	}
	.header div.header-in{
		min-height: auto !important;
		padding: 0;
	}
	.breadcrumb{
		line-height: 1.75em;
		margin: 0;
		padding-top: 10px;
	}
	.entry-title{
		font-size: 1.75em;
	}
	.menu-drawer li.menu-item-16,
	.menu-drawer li.menu-item-17,
	.tagline,.search,.payment{
		display: none;
	}
	.logo-menu-button img {
		max-height: 40px;
		display: block;
		margin: 5px auto;
		width: auto;
	}

	nav#navi{margin-bottom: 0;}
	nav#navi li.silent,
	nav#navi li.highend,
	nav#navi li.creator,
	nav#navi li.spec{
		display: none;
	}
	nav#navi li.desktop,
	nav#navi li.gaming,
	nav#navi li.sale,
	nav#navi li.sale-now{
		width:calc(100% / 3) !important;
		min-width:94px;
		border-radius: 0;}
	nav#navi li.sale a br{
		display: none;
	}
	main.main,.content{
		margin: 0;
	}
	main.main{
		padding: 0 16px;
	}
	.entry-title {
    padding: 0.6em 0em;
	}
	ul.menu-drawer{margin-top: 20px;}
	ul.menu-drawer li a{padding: 10px 6px;}
	ul.menu-drawer li.fa {
		border: 1px solid #bbb;
		border-radius: 4px;
		padding: 6px 10px;
		margin: 8px 0;
	}
	ul.menu-drawer li.fa a{
		display: inline-block;
		width: calc(100% - 1em);
	}
	.wrap{padding: 0;}
	.entry-title{
		margin-top: 0;
	}
	.entry-content p, .entry-content ul {
		margin:0;
	}
	.archive-title{
		margin: 28px 0;
		font-size: 21px;
	}
}

/*iconフォント*/

@font-face {
	font-family: 'fontawesome';
	src:	url('/fonts/fontawesome.eot?hxsrcg');
	src:	url('/fonts/fontawesome.ttf?hxsrcg') format('truetype'),
		url('/fonts/fontawesome.woff?hxsrcg') format('woff'),
		url('/fonts/fontawesome.svg?hxsrcg#fontawesome') format('svg');
	font-display: swap;
}

[class^="fa-"], [class*=" fa-"] {
	font-family: 'fontawesome' !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fa-seven-logo:before {
	content: "\e777";
}