/*
Theme Name: pion
Text Domain: pion
Version: 1.0
Author: FDWS Inc.
Author URI: http://fdws.jp
Description: FDWS theme
Requires at least: 4.7
Requires PHP: 5.2.4
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Document Setup
	2. 	Element Base
	3. 	Helper Classes
	4. 	Site Header
	5. 	Menu Modal
	6. 	Search Modal
	7. 	Page Templates
		a. 	Template: Cover Template
		c. 	Template: Full Width
	8.  Post: Archive
	9.  Post: Single
	10. Blocks
	11. Entry Content
	12. Comments
	13. Site Pagination
	14. Error 404
	15. Widgets
	16. Site Footer
	17. Media Queries

----------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */


html,
body {
	border: none;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}

button:focus {
	outline: none;
}


/* -------------------------------------------------------------------------- */
/*	1. Document Setup
/* -------------------------------------------------------------------------- */


html {
	font-size: 62.5%; /* 1rem = 10px */
	scroll-behavior: smooth;
}

body {
	color: #000;
	font-family:  'Overpass',din-2014, source-han-sans-japanese, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 1.8rem;
	letter-spacing: -0.015em;
	text-align: left;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	-webkit-font-smoothing: antialiased;
	word-break: break-word;
	word-wrap: break-word;
}

#site-content {
	overflow: hidden;
}

.wf-loading {
	visibility: hidden;
}
 
.wf-active {
	visibility: visible;
}
 
.wf-inactive {
	visibility: visible;
}


/* Clearing ---------------------------------- */

.group::after,
.entry-content::after {
	clear: both;
	content: "";
	display: block;
}


/* Base Transitions -------------------------- */

a,
path {
	transition: all 0.15s linear;
}




/* -------------------------------------------------------------------------- */

/*	2. Element Base
/* ---------------------------------------------*---------------------------- */


main {
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
}

h1 {
}

h2 {
	font-size: 3.2rem;
}

h3 {
	font-size: 2.8rem;
}

h4 {
	font-size: 2.4rem;
}

h5 {
	font-size: 2.1rem;
}

h6 {
	font-size: 1.6rem;
}

p {
	line-height: 1.5;
	margin: 0 0 1em 0;
}

em,
i,
q,
dfn {
	font-style: italic;
}

em em,
em i,
i em,
i i,
cite em,
cite i {
	font-weight: bolder;
}

big {
	font-size: 1.2em;
}

small {
	font-size: 0.75em;
}

b,
strong {
	font-weight: 700;
}

ins {
	text-decoration: underline;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

abbr,
acronym {
	cursor: help;
}

address {
	line-height: 1.5;
	margin: 0 0 2rem 0;
}

hr {
	border-style: solid;
	border-width: 0.1rem 0 0 0;
	border-color: #dcd7ca;
	margin: 4rem 0;
}

a {
	color: #62A1D8;
	text-decoration: underline;
}

a:hover,
a:focus {
	text-decoration: none;
}


/* Lists ------------------------------------- */


ul {
}

ul ul {
}

ul ul ul {
	list-style: square;
}

ol {
	list-style: decimal;
}

ol ol {
	list-style: lower-alpha;
}

ol ol ol {
	list-style: lower-roman;
}

li {
}

li > ul,
li > ol {
	margin: 1rem 0 0 2rem;
}

.reset-list-style,
.reset-list-style ul,
.reset-list-style ol {
	list-style: none;
	margin: 0;
}

.reset-list-style li {
	margin: 0;
}

dt,
dd {
	line-height: 1.5;
}

dt {
	font-weight: 700;
}

dt + dd {
	margin-top: 0.5rem;
}

dd + dt {
	margin-top: 1.5rem;
}


/* Quotes ------------------------------------ */

blockquote {
	border-color: #cd2653;
	border-style: solid;

	/*rtl:ignore*/
	border-width: 0 0 0 0.2rem;
	color: inherit;
	font-size: 1em;
	margin: 4rem 0;

	/*rtl:ignore*/
	padding: 0.5rem 0 0.5rem 2rem;
}

cite {
	color: #6d6d6d;
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1.25;
}

blockquote cite {
	display: block;
	margin: 2rem 0 0 0;
}

blockquote p:last-child {
	margin: 0;
}


/* Code -------------------------------------- */

code,
kbd,
pre,
samp {
	font-family: monospace;
	font-size: 0.9em;
	padding: 0.4rem 0.6rem;
}

code,
kbd,
samp {
	background: rgba(0, 0, 0, 0.075);
	border-radius: 0.2rem;
}

pre {
	border: 0.1rem solid #dcd7ca;
	line-height: 1.5;
	margin: 4rem 0;
	overflow: auto;
	padding: 3rem 2rem;
	text-align: left;
}

pre code {
	background: transparent;
	padding: 0;
}


/* Media ------------------------------------- */

figure {
	display: block;
	margin: 0;
}

iframe {
	display: block;
	max-width: 100%;
}

video {
	display: block;
}

svg,
img,
embed,
object {
	display: block;
	height: auto;
	max-width: 100%;
}

svg g,
svg path,
svg polygon,
svg rect {
	width:auto;
	height:auto;
	fill:currentColor;
}

figcaption,
.wp-caption-text {
	color: #6d6d6d;
	display: block;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	margin-top: 1.5rem;
}

figcaption a,
.wp-caption-text a {
	color: inherit;
}

blockquote.instagram-media,
iframe.instagram-media {
	margin: auto !important;
}


/* GALLERIES */

.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 3em 0 3em -0.8em;
	width: calc(100% + 1.6em);
}

.gallery-item {
	margin: 0.8em 0;
	padding: 0 0.8em;
	width: 100%;
}

.gallery-caption {
	display: block;
	margin-top: 0.8em;
}


/* Inputs ------------------------------------ */

fieldset {
	border: 0.2rem solid #dcd7ca;
	padding: 2rem;
}

legend {
	font-size: 0.85em;
	font-weight: 700;
	padding: 0 1rem;
}

label {
	display: block;
	font-size: 1.6rem;
	font-weight: 400;
	margin: 0 0 0.5rem 0;
}

label.inline,
input[type="checkbox"] + label {
	display: inline;
	font-weight: 400;
	margin-left: 0.5rem;
}

input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	top: 2px;
	display: inline-block;
	margin: 0;
	width: 1.5rem;
	min-width: 1.5rem;
	height: 1.5rem;
	background: #fff;
	border-radius: 0;
	border-style: solid;
	border-width: 0.1rem;
	border-color: #dcd7ca;
	box-shadow: none;
	cursor: pointer;
}

input[type="checkbox"]:checked::before {
	/* Use the "Yes" SVG Dashicon */
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23000000%27%2F%3E%3C%2Fsvg%3E");
	position: absolute;
	display: inline-block;
	margin: -0.1875rem 0 0 -0.25rem;
	height: 1.75rem;
	width: 1.75rem;
}

input,
textarea {
	box-sizing:border-box;
	border-color: #dcd7ca;
	color: #000;
}

code,
input[type="url"],
input[type="email"],
input[type="tel"] {

	/*rtl:ignore*/
	direction: ltr;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #fff;
	border-radius: 0;
	border-style: solid;
	border-width: 0.1rem;
	box-shadow: none;
	display: block;
	font-size: 1.6rem;
	letter-spacing: -0.015em;
	margin: 0;
	max-width: 100%;
	padding: 1.5rem 1.8rem;
	width: 100%;
}

select {
	font-size: 1em;
}

textarea {
	height: 12rem;
	line-height: 1.5;
	width: 100%;
}

input::-webkit-input-placeholder {
	line-height: normal;
}

input:-ms-input-placeholder {
	line-height: normal;
}

input::-moz-placeholder {
	line-height: revert; /* Reset to the value from the user-agent stylesheet. */
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	border-color: currentColor;
}

input[type="search"]:focus {
	outline: thin dotted;
	outline-offset: -4px;
}

/* Tables ------------------------------------ */

table {
	border: 0.1rem solid #dcd7ca;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	font-size: 1.6rem;
	margin: 4rem 0;
	max-width: 100%;
	overflow: hidden;
	width: 100%;
}

.alignleft > table {
	margin: 0;
}

.alignright > table {
	margin: 0;
}

th,
td {
	border: 0.1rem solid #dcd7ca;
	line-height: 1.4;
	margin: 0;
	overflow: visible;
	padding: 0.5em;
}

caption {
	background: #dcd7ca;
	font-weight: 600;
	padding: 0.5em;
	text-align: center;
}

thead {
	vertical-align: bottom;
	white-space: nowrap;
}

th {
	font-weight: 700;
}

.wrap {
	width: 100%;
}

.nav {
	list-style: none;
}


/* -------------------------------------------------------------------------- */

/*	3. Header
/* -------------------------------------------------------------------------- */

#header {
	position: fixed;
	top: 0;
	max-width: 100vw;
	min-height: 80px;
	z-index: 10;
	background: rgba(255,255,255,0.8);
}

#site_title {
}

#top {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	margin: auto;
	padding: 16px;
	color: #1c2a55;
}

#logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 48px;
	margin: 0 auto;
	color: #1c2a55;
	transition: all .2s;
}

#top svg#logo {
	fill:currentColor;
}

#top svg#logo g,
#top svg#logo path,
#top svg#logo polygon,
#top svg#logo rect {
	width:auto;
	height:auto;
	fill:currentColor;
}

#header .toggle {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	right: 8px;
	width: 32px;
	height: 24px;
	margin: auto;
	background: none;
	text-align: center;
}


@media screen and (min-width:960px) {
	#header {
		position: relative;
		min-height: 144px;
	}
	
	#logo {
		width: 240px;
		height: auto;
		padding: 16px;
	}
	
	#logo:hover {
		opacity: 0.5;
	}
	
	#header .toggle {
		display: none;
	}
}

/* -------------------------------------------------------------------------- */

/*	4. image
/* -------------------------------------------------------------------------- */

#image {
	width: 100%;
	padding: 88px 0 0 0;
	overflow: hidden;
}

#slider {
	width: 100%;
	overflow: visible;
	list-style: none;
}

.slick-list {
	overflow: visible !important;
}

.slide {
}

.slick-slide {
	transition: all .2s;
}

.slide .link {
	display: block;
}

.slide:focus {
	outline: none;
}

.slide .link img {
	display: block;
}

.slick-arrow,
.slick-arrow:focus {
	position:absolute;
    z-index: 2;
	top: 0;
	bottom: 0;
	display: none !important;
	width: 48px;
	height: 48px;
	padding:0;
	margin: auto;
	border:none;
	border-radius: 50%;
	background:rgba(255,255,255,0.95);
	box-shadow: 0 0 8px rgba(0,0,0,0.1);
	text-indent:-9999px;
	font-size:12px;
	cursor: pointer;
}

.brands .slick-arrow {
	display: inline-block !important;
}

.slick-arrow:hover {
	background:rgba(204,204,204,0.9);
}

.slick-arrow:before {
	content: " ";
    position: absolute;
    z-index: 1;
	top: 0;
	bottom: 0;
    display: block;
    width: 20px;
    height: 20px;
	margin: auto;
    border-left: #000 solid 1px;
    border-top: #000 solid 1px;
	transition:all .2s;
}

.slick-prev {
	left: calc(50vw - 276px);
}

.brands ul .slick-prev {
	left: -24px;
}

.slick-prev:before {
	left: 16px;
    transform: rotate(-45deg);
}

.slick-next {
	right: calc(50vw - 276px);
}

.brands ul .slick-next {
	right: -24px;
}

.slick-next:before {
	right: 16px;
    transform: rotate(135deg);
}

.slick-arrow:hover:before {
	border-color: rgba(255,255,255,1);
}

.slick-dots {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	list-style: none;
	text-align: center;
}

.slick-dots li {
	display: inline-block;
	margin: 16px 4px;
}

.slick-dots li button {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	background: #FFF;
	border:none;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	text-indent: -9999px;
}

.slick-dots li.slick-active button {
	background: #62A1D8;
}

@media screen and (min-width:600px) {
	#image .slick-list {
		width: 504px;
		padding: 0 !important;
		margin: 0 auto !important;
	}
	
	#image .slide .link {
		width: 480px;
		height: auto;
		margin: 0 auto;
	}
	
	.slick-arrow,
	.slick-arrow:focus {
		display: block !important;
	}
	
	#image .slick-slide:not(.slick-center) {
		opacity: 0.5;
	}
}

@media screen and (min-width:960px) {
	#image {
		padding: 24px 0;
		margin: 0 0 40px 0;
	}
	
	#image .slick-list {
		width: 664px;
		padding: 0 !important;
		margin: 0 auto !important;
	}
	
	#image .slide .link {
		width: 640px;
		height: auto;
		margin: 0 auto;
	}

	.slick-prev {
		left: calc(50vw - 358px);
	}

	.slick-next {
		right: calc(50vw - 358px);
	}

}

/* -------------------------------------------------------------------------- */

/*	5. Menu
/* -------------------------------------------------------------------------- */

#navigation {
	position: fixed;
	z-index: 5;
	top: 0;
	width: 100%;
	height: 100vh;
	display: none;
	background: rgba(255,255,255,1);
	text-align: center;
}

#navigation.fixed {
	position: fixed !important;
	top: 0;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.nav {
	display: flex;
	justify-content: center;
}

#global_navi {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	justify-content:space-between;
	flex-flow: column;
	height: 50vh;
	margin: auto;
}

.nav li {
	margin: 0;
}

.nav li a {
	position: relative;
	text-decoration: none;
	color: #000;
}

#global_navi li a {
	padding: 16px;
	font-weight: bold;
	font-weight: 800;
}

#footer_navi {
	margin: 24px auto;
}

#footer_navi li {
	margin: 0 8px;
}

#footer_navi li a {
	font-size: 1.2rem;
}

.sns_links {
	display: flex;
	justify-content: center;
	align-items:center;
	margin: 0 auto;
	list-style: none;
}

#navigation .sns_links {
	position: absolute;
	bottom: 80px;
	width: 100%;
}

.toggle .supply {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	margin: auto;
}

.toggle .keyword {
	position: absolute;
	top: -16px;
	line-height: 1;
	white-space: nowrap;
	word-break: keep-all;
	font-size: 0.8rem;
}

.hamburger .supply .line,
.hamburger .supply:before,
.hamburger .supply:after{
	content: "";
	position: absolute;
	display: block;
	height: 1px;
	width: 100%;
	background: #000;
	transition: all .2s;
}

.hamburger .supply .line {
	margin: auto;
}

.hamburger .supply .line,
.hamburger .supply:before {
	top: 0;
}

.hamburger .supply .line,
.hamburger .supply:after {
	bottom: 0;
}

.hamburger.active .supply:before {
	transform: translateY(12px) rotate(-45deg);
}

.hamburger.active .supply:after {
	transform: translateY(-12px) rotate(45deg);
}

.toggle.active .supply .line,
.toggle.active .keyword {
	display: none;
}
	
.pager {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
}

.pager li {
	display: none;
	margin: 8px;
}

.pager li.paging {
	display: block;
}

.pager li a,
.pager li .current {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: #62A1D8 solid 1px;
	background: #FFF;
	line-height: 2.5rem;
	text-decoration: none;
	font-size: 1.2rem;
	transition: all .2s;
}

.pager li a:hover,
.pager li .current {
	background: #62A1D8;
	color: #FFF;
}

.paging {
	max-width: 1040px;
	margin: 80px auto 24px;
}

.single-brand .paging {
	padding: 0 16px;
}

.paging ul {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	list-style: none;
}

.paging ul li {
	width: 44vw;
	margin: 0 2vw 8vw 2vw;
}

.paging ul li a {
	position: relative;
	display: block;
	text-decoration: none;
}

.paging ul li a .image {
	position: relative;
	z-index: 0;
	display: block;
	margin: 0 auto 16px auto;
	transition: all .2s;
}

.paging ul li a .text {
	display: flex;
	align-items: center;
	max-width: 304px;
	text-align: left;
}

.paging ul li a .label {
	position: absolute;
	z-index: 2;
	top: -20px;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #CCCCCC;
	line-height: 2.75em;
	color: #FFF;
	font-weight: bold;
	font-size: 1.5rem;
}

.paging ul li a.btn .label {
	top: 0;
	background: #62A1D8;
	border: #62A1D8 solid 1px;
	transition: all .2s;
}

.paging ul li a.btn:hover .label {
	background: #FFF;
	color: #62A1D8;
}

.paging ul li.nextpost a .label {
	right: -12px;
}

.paging ul li.prevpost a .label {
	left: -12px;
}

.paging ul li a .title {
	display: block;
	font-weight: bold;
}

.paging ul li a .title {
	display: block;
	line-height: 1.5;
	text-decoration: none;
	color: #000;
	font-size: 1.6rem;
}

.sns_link {
	margin: 0 16px;
}

.sns_link a {
	display: block;
}

.sns_link a img {
	display: block;
	width: 28px;
	height: 28px;
}

.btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 640px;
	margin: 0 auto;
	background: #F0A1C8;
	text-decoration: none;
	color: #FFF;
	transition: all .2s;
}

.btn .link {
	display: block;
	font-size: 2.2rem;
}

.btn img {
	width: 28px;
	height: auto;
	padding: 16px;
}

.more_btn {
	display: block;
	width: 80px;
	height: 80px;
	padding: 0;
	margin: 0 auto;
	border: #62A1D8 solid 1px;
	border-radius: 50%;
	background: #62A1D8;
	transition: all .2s;
}

.more_btn .more {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	height: 24px;
	margin: auto;
	line-height: 1;
	line-height: 2;
	font-size: 2rem;
	font-size: 1.25rem;
}

.link_btn {
	display: none;
}
	
.banner {
	display: block;
	max-width: 92vw;
	margin: 24px auto;
}

@media screen and (min-width:600px) {
	.paging ul {
		justify-content:space-between;
	}
	
	.paging ul li {
		margin: 0 2vw;
	}
	
	.paging ul li a {
		display: flex;
		justify-content: space-around;
		align-items: stretch;
	}
	
	.paging ul li.nextpost a {
		flex-direction: row-reverse;
	}
	
	.paging ul li a .image {
		width: 20vw;
		margin: 0;
	}
	
	.paging ul li a .text {
		padding: 16px;
	}
}


@media screen and (min-width:960px) {
	#navigation {
		position: relative;
		display: flex;
		justify-content: center;
		height: auto;
		padding: 24px 0;
	}
	
	#global_navi {
		position: relative;
		justify-content: center;
		flex-flow: row;
		height: auto;
		margin: 0 24px;
	}
	
	.nav li {
		border-right: #ECECEC solid 1px;
	}
	
	.nav li a:after {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		content: "";
		display: block;
		width: 0px;
		height: 0px;
		border-radius: 50%;
		margin: auto;
		background: #E5F0F8;
		opacity: 0;
		transition: all .2s;
	}
	
	.nav li:hover a:after {
		width: 40px;
		height: 40px;
		opacity: 1;
	}
	
	#navigation .sns_links {
		position: relative;
		bottom: 0;
		width: auto;
		margin: 0 24px;
	}

	#global_navi li a {
		padding: 16px 20px;
		font-size: 2.5rem;
	}

	#footer_navi li a {
		font-size: 1.8rem;
	}
	
	.paging ul li {
		width: 50%;
		margin: 0;
	}

	.pager li a,
	.pager li .current {
		width: 32px;
		height: 32px;
		line-height: 3rem;
		font-size: 1.8rem;
	}
	
	.paging ul li a .image {
		width: 184px;
		margin: 0;
	}

	.paging ul li a .label {
		top: -32px;
		width: 64px;
		height: 64px;
		line-height: 3em;
		font-size: 2rem;
	}
	
	.paging ul li.prevpost a .label {
		left: -32px;
	}
	
	.paging ul li.nextpost a .label {
		right: -32px;
	}
	
	.paging ul li a .text .title {
		padding: 16px;
		font-size: 2rem;
	}
	
	.link_btn:hover {
		opacity: 0.75;
	}
	
	.btn .link {
		font-size: 3rem;
	}
	
	.btn img {
		width: 32px;
	}
	
	.more_btn {
		width: 120px;
		height: 120px;
	}
	
	.more_btn:hover {
		background: #FFF;
	}
	
	.more_btn:hover .more {
		color: #62A1D8;
	}
	
	.banner {
		max-width: 1048px;
	}
}

/* -------------------------------------------------------------------------- */

/*	6. container
/* -------------------------------------------------------------------------- */

#container {
	padding: 96px 0;
}

#side {
	margin: 0;
}

.article {
	margin: 0 0 120px 0;
}

body.single .article {
	margin: 0;
}

.article .header,
.article .footer {
	display: flex;
	flex-flow: column;
	justify-content: center;
	text-align: center;
	min-height: 120px;
}

.article .section.thumbnail {
	width: 100%;
	overflow: hidden;
}

.article .section.thumbnail figure.image {
	padding: 8px;
	margin: 16px auto;
	text-align: center;
}

.article .section.thumbnail figure.image a img {
	display: block;
	margin: 0 auto;
	border: #ECECEC solid 1px;
}

.aside {
	margin: 0 auto 120px;
	text-align: center;
}

#brandlist {
	padding: 32px 0;
	background: #E5F0F8;
}

@media screen and (min-width:960px) {
	body.single #container {
		padding: 40px 0;
	}
}

/* -------------------------------------------------------------------------- */

/*	7. Post: Archive
/* -------------------------------------------------------------------------- */


.article .header .title {
	position: relative;
}

.article .header .title a {
	display: block;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 3rem;
	
}

.article .header .title a:after {
	content: " ";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 80px;
	height: 80px;
	margin: auto;
	border-radius: 50%;
	background: #E5F0F8;
}

.article .header .subtitle {
	margin: 24px auto;
	font-size: 1.6rem;
}

.categories {
	display: flex;
	flex-wrap: wrap;
	justify-content:space-around;
	max-width: 1120px;
	margin: 24px 2vw;
	list-style: none;
}

.categories .category {
	width: 44vw;
	margin: 0 0 3vw 0;
}

.categories .category a {
	display: block;
	padding: 8px;
	background: #CCC;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	transition: all .2s;
}

.categories .category-current a {
	background: #62A1D8;
}

.posts {
	display: flex;
	flex-wrap: wrap;
	justify-content:space-around;
	max-width: 1120px;
	margin: 40px 2vw;
}

.posts .post {
	position: relative;
	width: 44vw;
	margin: 0 0 8vw 0;
}

.items .item {
	position: relative;
	margin: 0 0 0.8vw 0;
}

.home .items .item:nth-child(9) {
	display: none;
}

.posts .post .image {
	position: relative;
	z-index: 0;
	margin: 0 auto 16px auto;
	transition: all .2s;
}

.posts .brand .image {
	border: #CCC solid 1px;
}

.posts .post .image a {
	transition: all .2s;
	background: #F5F5F5;
	overflow: hidden;
}

.posts .post .image a img {
	position: relative;
}

.posts .post .image .label {
	position: absolute;
	z-index: 2;
	left: -8px;
	top: -8px;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #62A1D8;
	text-align: center;
	line-height: 4.8;
	color: #FFF;
	font-size: 1rem;
	font-weight: bold;
}

.posts .post .image .label.new {
	line-height: 3.6;
	font-size: 1.4rem;
}

.posts .post .image .label.open {
	line-height: 4;
	font-size: 1.2rem;
}

.posts .post .image a {
	display: block;
}

.posts .post .title {
	margin: 0 auto 16px;
}

.posts .item .title {
	display: none;
	text-align: center;
}

.posts .post .title a {
	display: block;
	height: calc( 1.6rem * 3 );
	line-height: 1.5;
	overflow: hidden;
	text-decoration: none;
	color: #000;
	font-size: 1.6rem;
}

.posts .post .meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
}

.posts .post .meta .date {
	color: #666;
	font-size: 1.4rem;
}

.posts .post .meta .date .day {
	margin: 0 0 0 4px;
	font-size: 1.2rem;
}

.posts .post .meta .category a {
	display: block;
	height: 24px;
	padding: 0 8px;
	border-radius: 12px;
	background: #999;
	text-decoration: none;
	line-height: 1.8;
	color: #FFF;
	font-size: 1.4rem;
}

.posts .post .meta .category .news {
	background: #62A1D8;
}

.posts .post .meta .category .event {
	background: #F0A1C8;
}

.posts .post .meta .category .other {
	background: #DAE248;
}

.brands {
	width: 100%;
	margin: 40px auto 80px auto;
	overflow: hidden;
}

.brands .brand .image .name {
	position:absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	display: block;
	margin: 0 auto;
	background: none;
	text-align: center;
}

.brands .brand .image .name a {
	background: none;
}

.brands ul {
	width: 80vw;
	margin: 0 auto;
	overflow: visible;
}

.brands #slide_brand .brand {
	width: 36vw !important;
	max-width: 388px;
	margin: 0;
}

.brands #slide_brand .brand .image {
	width: 32vw;
	max-width: 304px;
	margin: 0 auto;
}

@media screen and (min-width:600px) {
	
	.posts .post,
	.categories .category {
		width: 28vw;
		margin: 0 1vw 4vw 1vw;
	}
	
	.posts .item {
		margin: 0 1vw 2vw 1vw;
	}

	.posts .post .image .label {
		left: -16px;
		top: -16px;
		width: 64px;
		height: 64px;
		font-size: 1.4rem;
	}
	
	.posts .post .image .label.new {
		font-size: 1.8rem;
	}
	
	.posts .post .image .label.open {
		line-height: 4.2;
		font-size: 1.5rem;
	}

	.home .items .item:nth-child(9) {
		display: block;
	}
}

@media screen and (min-width:960px) {
	.article .header .title a {
		font-size: 2.5rem;
	}
	
	.categories {
		margin: 0 auto;
	}
	
	.categories .category {
		width: 304px;
		margin: 16px auto;
	}
	
	.categories .category a:hover {
		opacity: .5;
	}
	
	.posts {
		margin: 80px auto;
	}

	.posts .post {
		width: 304px;
		margin: 0 0 64px 0;
		cursor: pointer;
	}
	
	.posts .post .image {
		margin: 0 auto;
	}
	
	.posts .post:hover .image a {
		opacity: .5;
	}

	.posts .post .image .label {
		left: -36px;
		top: -36px;
		width: 72px;
		height: 72px;
		line-height: 4.5;
		letter-spacing: 0.8;
		font-size: 1.6rem;
	}
	
	.posts .post .image .label.new {
		line-height: 3.4;
		font-size: 2.2rem;
	}
	
	.posts .post .image .label.open {
		line-height: 3.8;;
		font-size: 1.9rem;
	}
	
	.posts .item .title {
		position: absolute;
		z-index: 2;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 360px;
		margin: auto;
		opacity: 0;
	}
	
	.posts .item:hover .title {
		opacity: 1;
	}

	.posts .post .title a {
		width: 100%;
		height: calc( 2.2rem * 2 );
		padding: 16px 0;
		font-size: 2.2rem;
	}
	
	.posts .item .title a {
		width: auto;
		padding: 24px;
		transition: all .2s;
	}
	
	.posts .item:hover .title a {
		opacity: 1;
	}
	
	.posts .post .meta .date {
		font-size: 2rem;
	}

	.posts .post .meta .date .day {
		font-size: 1.6rem;
	}

	.posts .post .meta .category a {
		height: 32px;
		padding: 0 16px;
		border-radius: 16px;
		line-height: 1.5;
		font-size: 2rem;
	}
	
	.brands ul {
		width: 100%;
	}
	
	.brands ul .slick-list {
		width: 100%;
	}
	
	.brands #slide_brand .brand {
		width: 328px !important;
		overflow: hidden;
	}

	.brands ul .slick-prev {
		left: 16px;
	}

	.brands ul .slick-next {
		right: 16px;
	}
}

/* -------------------------------------------------------------------------- */

/*	8. Post: Single
/* -------------------------------------------------------------------------- */
body.single .article .header {
	max-width: 1048px;
	min-height: 40px;
	margin: 0 auto;
	background: #EEEEEE;
}

body.single-item .article .header {
	background: #E5F0F8;
}

body.single-brand .article .header,
body.single-blog .article .header {
	background: none;
}

body.single .article .header .title a {
	padding: 16px;
	text-align: left;
	font-weight: bold;
	font-size: 2.25rem;
}

body.single-blog .article .header .title a {
	font-size: 2.6rem;
}

body.single-brand .article .header .title a {
	margin: 0 auto;
	text-align: center;
	font-weight: normal;
	font-size: 4rem;
}

body.single .article .header .title a:after {
	display: none;
}

body.single-brand .article .header .title a:after {
	display: block;
}

.article .section .images {
	max-width: 1120px;
	margin: 0 auto 32px auto;
	list-style: none;
}

.article .section .images .image {
	width: 56vw;
}

.section .images .image a {
	display: block;
}

body.single .article .footer {
	display: block;
}

.article .header .meta {
	display: flex;
	justify-content: space-between;
	width: 100%;
	background: #62A1D8;
	list-style: none;
}

body.single-item .article .meta {
	background: #999999;
}

.article .header .meta .info {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 8px 16px;
}

.article .header .meta .info .date,
.article .header .meta .info .count {
	display: block;
	color: #FFF;
}

.article .header .meta .info .date .day {
	margin: 0 0 0 0.25em;
	font-size: 1.5rem;
}

.article .header .meta .info .count {
	padding: 0 0 0 20px;
}

.article .header .meta .info .count:first-child {
	padding-right: 12px;
}

.article .header .meta .snscount {
	background:url(images/like.svg) left center / 16px no-repeat;
}

.article .header .meta .viewcount {
	background:url(images/view.svg) left center / 20px no-repeat;
}

.snsshare {
	max-width: 1000px;
	margin: 32px auto;
}

.share_btns {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
}

.share_btns .sns_btn {
	margin: 0 8px;
}

.share_btns .sns_btn a {
	display: flex;
	align-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #000;
	color: #FFF;
	transition: all .2s;
}

.share_btns .sns_btn a:hover {
	background: #FFF;
}

.share_btns .sns_btn a img {
	display: block;
	width: 16px;
	margin: 8px auto;
	fill:currentColor;
}

.share_btns .sns_btn a svg {
	width: 20px;
	margin: 0 auto;
	fill:currentColor;
}

.share_btns .sns_btn a.btn_facebook svg {
	width: 12px;
}

.share_btns .sns_btn a.btn_twitter:hover {
	color:#1DA1F2;
}

.share_btns .sns_btn a.btn_facebook:hover {
	color:#3B5998;
}

.share_btns .sns_btn a.btn_hatena:hover {
	color:#008fde;
}

.share_btns .sns_btn a.btn_line:hover {
	color:#00c300;
}

.share_btns a svg g,
.share_btns a svg path,
.share_btns a svg polygon,
.share_btns a svg rect {
	width:auto;
	height:auto;
	fill:currentColor;
}

@media screen and (min-width:600px) {

	.article .section .images {
		display: flex;
		justify-content: space-around;
		margin: 0 2vw 40px;
	}

	.article .section .images .image {
		width: 28vw;
		margin: 0 1vw;
	}

	.section .images .image a {
	}
	
	body.single .article .header {
		display: flex;
		justify-content: space-between;
		align-items:stretch;
		flex-flow:wrap;
		min-height: 40px;
	}
	
	body.single .article .header .title {
		display: flex;
		align-items: center;
		width: 80%;
		margin: 0;
	}
	
	body.single-blog .article .header .title {
		display: block;
		width: auto;
	}
	
	body.single-brand .article .header .title {
		width: auto;
		margin: 0 auto;
	}
	
	body.single .article .header .meta {
		justify-content:space-around;
		flex-flow: column;
		width: 20%;
		margin: 0;
	}
	
	body.single-blog .article .header .meta { 
		justify-content: space-between;
		flex-flow: wrap row;
		width: 100%;
		margin: 0;
	}
}

@media screen and (min-width:960px) {
	.article .section .images {
		margin: 0 auto 40px;
	}
	
	.article .section .images .image {
		width: 304px;
	}
	
	body.single-blog .article .header .title a {
		padding: 24px 0;
		font-size: 3.2rem;
	}
}

/* -------------------------------------------------------------------------- */

/*	9. Content
/* -------------------------------------------------------------------------- */
	
.article .content {
	max-width: 1040px;
	margin: 0 auto;
	padding: 32px 16px;
}

.content h2 {
	margin: 0 0 1em 0;
	font-size: 2.5rem;
}

.content h3 {
	margin: 0 0 1em 0;
	font-size: 2rem;
}

body.page .article .content {
	max-width: 1000px;
}

.content .period {
	text-align: center;
	font-weight: bold;
	font-size: 2.5rem;
}

.content .price {
	text-align: right;
	font-weight: bold;
	font-size: 3rem;
}

.content .price .supply {
	font-size: 2rem;
}

.content a img {
	transition: all .2s;
}

.content ul,
.content ol{
	margin: 24px;
}

.aligncenter {
	text-align: center;
	margin: 0 auto;
}

table.history,
table.history td {
	border: none !important;
	text-align: left;
	vertical-align: top;
}

@media screen and (min-width:960px) {
	.content a:hover img {
		opacity: 0.5;
	}
	
	.sections {
		display: flex;
		justify-content: space-between;
		width: 1120px;
		margin: 0 auto;
	}
	
	.article .sections .section.thumbnail {
		width: 40%;
	}
}

/* -------------------------------------------------------------------------- */

/*	10. Widgets
/* -------------------------------------------------------------------------- */



.form {
	width:auto;
	margin:80px auto 40px auto;
}

.form .label {
	display:block;
	padding:0 0 4px 0;
	margin:0 16px 0 0;
}

.form .label label {
	font-size:12px;
	font-style:normal;
}

.form .label label .caption {
	margin:0 4px 0 0;
	font-size:18px;
	font-weight:bold;
}

.form .input {
	width:auto;
	margin:0 auto 32px auto;
}

.form .input input,
.form .input textarea {
	padding:8px 16px;
	color:#000;
	font-size:16px;
}

.btns {
	margin: 0 auto 120px;
	text-align: center;
}

.btns input[type="submit"] {
	display: block;
	width: 80px;
	height: 80px;
	padding: 0;
	margin: 0 auto;
	border: #62A1D8 solid 1px;
	border-radius: 50%;
	background: #62A1D8;
	transition: all .2s;
	color: #FFF;
	cursor: pointer;
	font-weight: bold;
	font-size: 2.5rem;
}

.loginform .label {
	margin: 0 auto 8px auto;
}

.loginform .input input {
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	font-size: 18px;
}

#lightcase-info {
	display: none !important;
}

.banner img {
	transition: all .2s;
}

@media screen and (min-width:960px) {
	.btns input[type="submit"]:hover {
		background: #FFF;
		color: #62A1D8;
	}

	.banner:hover img {
		opacity: 0.5;
	}
}

/* -------------------------------------------------------------------------- */

/*	11.	Footer
/* -------------------------------------------------------------------------- */

#footer {
	background: #62A1D8;
	text-align: center;
	color: #FFF;
}

#footer_navigation {
	background: #F3F3F3;
	padding: 24px;
}

#footer .copy {
	padding: 16px 0;
}

#footer #copyright a {
	color: #FFF;
}

@media screen and (min-width:960px) {
	#footer .copy {
		font-size: 2rem;
	}
}

/* -------------------------------------------------------------------------- */

/*	12.	Other
/* -------------------------------------------------------------------------- */



@keyframes fadein {
from {
    transform: translateY(20px);
}
to {
    transform: translateY(0);
}
}