@charset "utf-8";

body {
	font-family: Open Sans;
	background-color: #F8F8F8;
}

:root,
html,
body {
	font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/*! sanitize.css v3.2.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */
/*
 * Normalization
 */
audio:not([controls]) {
	display: none;
	/* Chrome 44-, iOS 8+, Safari 9+ */
}

button {
	-webkit-appearance: button;
	/* iOS 8+ */
	overflow: visible;
	/* Internet Explorer 11- */
}

details {
	display: block;
	/* Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */
}

html {
	-ms-overflow-style: -ms-autohiding-scrollbar;
	/* All browsers without overlaying scrollbars */
	-webkit-text-size-adjust: 100%;
	/* Edge 12+, Internet Explorer 11- */
	overflow-y: scroll;
	/* iOS 8+ */
}

input {
	-webkit-border-radius: 0;
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	/* iOS 8+ */
}

input[type="number"] {
	width: auto;
	/* Firefox 36+ */
}

input[type="search"] {
	-webkit-appearance: textfield;
	/* Chrome 45+, Safari 9+ */
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	/* Chrome 45+, Safari 9+ */
}

main {
	display: block;
	/* Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+ */
}

pre {
	overflow: auto;
	/* Internet Explorer 11- */
}

progress {
	display: inline-block;
	/* Internet Explorer 11-, Windows Phone 8.1+ */
}

small {
	font-size: 75%;
	/* All browsers */
}

summary {
	display: block;
	/* Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */
}

svg:not(:root) {
	overflow: hidden;
	/* Internet Explorer 11- */
}

template {
	display: none;
	/* Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+ */
}

textarea {
	overflow: auto;
	/* Edge 12+, Internet Explorer 11- */
}

[hidden] {
	display: none;
	/* Internet Explorer 10- */
}

/*
 * Universal inheritance
 */
*,
:before,
:after {
	border-style: solid;
	border-width: 0;
	box-sizing: border-box;
}

* {
	font-size: inherit;
	line-height: inherit;
}

:before,
:after {
	text-decoration: inherit;
	vertical-align: inherit;
}


/* specify the core styles of all elements */
* {
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}

/* specify the root styles of the document */
:root {
	background-color: #ffffff;
	box-sizing: border-box;
	color: #000000;
	cursor: default;
	font: 100%/1.5 sans-serif;
}



/* specify the alignment of media elements */
audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/* specify the background color of form elements */
button,
input,
select,
textarea {
	background-color: transparent;
}

/* specify the inherited color and font of form elements */
button,
input,
select,
textarea {
	color: inherit;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
}

/* specify the minimum height of form elements */
button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
	min-height: 1.5em;
}

/* specify the font family of code elements */
code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
}

/* specify the list style of nav lists */
nav ol,
nav ul {
	list-style: none;
}

/* specify the standard appearance of selects */
select {
	-moz-appearance: none;
	/* Firefox 40+ */
	-webkit-appearance: none;
}

select::-ms-expand {
	display: none;
	/* Edge 12+, Internet Explorer 11- */
}

select::-ms-value {
	color: currentColor;
	/* Edge 12+, Internet Explorer 11- */
}

/* specify the border styling of tables */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* specify the resizability of textareas */
textarea {
	resize: vertical;
}

/* specify the background color, font color, and drop shadow of text selections */
::-moz-selection {
	background-color: #b3d4fc;
	/* required when declaring ::selection */
	color: #ffffff;
	text-shadow: none;
}

::selection {
	background-color: #b3d4fc;
	/* required when declaring ::selection */
	color: #ffffff;
	text-shadow: none;
}

/* specify the progress cursor of updating elements */
[aria-busy="true"] {
	cursor: progress;
}

/* specify the pointer cursor of trigger elements */
[aria-controls] {
	cursor: pointer;
}

/* specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
	cursor: default;
}

/* specify the style of visually hidden yet accessible elements */
[hidden][aria-hidden="false"] {
	clip: rect(0 0 0 0);
	display: inherit;
	position: absolute;
}

[hidden][aria-hidden="false"]:focus {
	clip: auto;
}

/* remove delay from tapping on clickable elements */
a,
area,
button,
input,
label,
select,
textarea,
[tabindex] {
	touch-action: manipulation;
}

/*# sourceMappingURL=sanitize.css.map */
::-moz-selection {
	background: #eee;
	color: #232323;
}

::selection {
	background: #eee;
	color: #232323;
}

::-moz-selection {
	background: #eee;
	color: #232323;
}

* {
	box-sizing: border-box;
}



ol,
ul {
	list-style: none;
}

a {
	color: #494e58;
	cursor: pointer;
	position: relative;
	text-decoration: none;
	transition: all .5s ease;
	/* ボタンにマウスカーソルを乗せたときに、色や大きさなどが変わる時間を設定するときに使われるプロパティ */
}


a:hover {
	color: #635e60;
	opacity: .5;
	text-decoration: none;
	transition: all .5s ease;
}

small {
	font-size: 75%;
	/* All browsers */
}

img {
	vertical-align: middle;
	max-width: 100%;
}

.fa {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/*--------------------------------------------------------------------------
   メニュー
---------------------------------------------------------------------------*/
/* ------------------------------------------------ drawer menu */
.drawer-menu {
	background: #fff;
	background: #f7f7f7;
	box-sizing: border-box;
	height: 100%;
	opacity: 0;
	padding: 12rem 5rem;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	transition: all .5s;
	visibility: hidden;
	width: 0;
}

.drawer-menu__backnumber > .ajax {
	-ms-grid-columns: 1fr 1.5rem 1fr;
	gap: 5rem 1.5rem;
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
	.drawer-menu__backnumber > .ajax {
		-ms-grid-columns: 1fr 3rem 1fr 3rem 1fr;
		gap: 5rem 3rem;
		grid-template-columns: repeat(3, 1fr);
		width: 110rem;
	}
}

.drawer-menu__ttl {
	font-family: ryo-text-plusn, serif;
	font-size: 3rem;
	font-weight: normal;
	padding: 5rem 0 3rem;
	text-align: center;
}

@media only screen and (min-width: 1024px) {
	.drawer-menu__ttl {
		font-size: 3.5rem;
		padding: 10rem 0 5rem;
	}
}

.drawer-menu__body {
	margin: 8rem auto;
	opacity: 0;
	padding: 1rem 0;
	text-align: left;
}


.drawer-menu__hpLink a {
	color: #232323;
	display: block;
	font-family: classico-urw, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.5rem;
	font-weight: normal;
	padding: 1.5rem 0;
	position: relative;
	color: #707070;
}

.drawer-menu__hpLink a:before,
.drawer-menu__hpLink a::after {
	bottom: 0;
	content: "";
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 300ms 0s ease;
	vertical-align: middle;
}

.drawer-menu__hpLink a::before {
	-webkit-transform: rotate(45deg);
	border-right: 1px solid #494E58;
	border-top: 1px solid #494E58;
	height: 10px;
	right: 3px;
	transform: rotate(45deg);
	width: 10px;
}

.drawer-menu__hpLink a:hover:before,
.drawer-menu__hpLink a:hover::after {
	-webkit-transform: translateX(5px) rotate(45deg);
	transform: translateX(5px) rotate(45deg);
}

.drawer-menu dl {
	display: inline-block;
	text-align: left;
}

.drawer-menu dt {
	font-size: 3rem;
	font-weight: 500;
	margin: 0 0 1.5rem;
}

.drawer-menu dt:not(:first-of-type) {
	margin-top: 4rem;
}

.drawer-menu dd {
	border-left: 5px solid #232323;
	font-size: 2rem;
	font-weight: 400;
	margin-left: 2rem;
	padding-left: 1rem;
}

.drawer-menu dd a {
	color: #999;
	display: inline-block;
	height: 5rem;
	line-height: 5rem;
	position: relative;
	transition: all .3s;
}

.drawer-menu dd a::after {
	-webkit-transform: scale(0, 1);
	-webkit-transform-origin: left top;
	background: #333;
	bottom: 5px;
	content: '';
	height: 1px;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: -webkit-transform .3s;
	transition: transform .3s;
	transition: transform .3s, -webkit-transform .3s;
	width: 100%;
}

.drawer-menu dd a:hover:after {
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

/* ------------------------------------------------ checkbox */
.check {
	display: none;
}

/* ------------------------------------------------ menu button */
.menu-btn {
	cursor: pointer;
	display: block;
	font-size: 10px;
	height: 30px;
	position: fixed;
	right: 3rem;
	text-align: center;
	top: 3rem;
	width: 30px;
	z-index: 10;
}

@media only screen and (max-width: 640px) {
	.menu-btn {
		right: 10px;
		top: 15px;
	}
}

.bar {
	-webkit-transform-origin: left top;
	background: #232323;
	display: block;
	height: .1px;
	left: 0;
	position: absolute;
	top: 0;
	transform-origin: left top;
	transition: all .5s;
	width: 30px;
}

@media only screen and (max-width: 640px) {
	.bar {
		width: 30px;
	}
}

.bar.middle {
	opacity: 1;
	top: 10px;
}

.bar.bottom {
	-webkit-transform-origin: left bottom;
	top: 20px;
	transform-origin: left bottom;
}

.menu-btn__text {
	bottom: -15px;
	color: #000;
	display: block;
	left: 0;
	margin: auto;
	opacity: 1;
	position: absolute;
	right: 0;
	transition: all .5s;
	visibility: visible;
}

@media only screen and (min-width: 1024px) {
	.menu-btn:hover .menu-btn__text {
		color: #999;
	}
}

.close-menu {
	background: rgba(0, 0, 0, 0);
	cursor: url(../images/cross.svg), auto;
	height: 100vh;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition-delay: 0s;
	transition-duration: .3s;
	transition-property: all;
	visibility: hidden;
	width: 100%;
}

/* ------------------------------------------------ checked */
.check:checked ~ .drawer-menu {
	-webkit-transform: none;
	opacity: 1;
	transform: none;
	transition-delay: .3s;
	visibility: visible;
	width: 40rem;
	z-index: 5;
}

@media only screen and (max-width: 640px) {
	.check:checked ~ .drawer-menu {
		width: 90%;
	}
}

.check:checked ~ .drawer-menu .drawer-menu__body {
	opacity: 1;
}

.check:checked ~ .drawer-menu .drawer-menu__inner {
	opacity: 1;
	transition: all .5s .5s;
	visibility: visible;
}

.check:checked ~ .contents {
	transition-delay: 0s;
}

.check:checked ~ .menu-btn .menu-btn__text {
	opacity: 0;
	visibility: hidden;
}

.check:checked ~ .menu-btn .bar.top {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 32px;
}

.check:checked ~ .menu-btn .bar.middle {
	opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
	-webkit-transform: rotate(-45deg);
	top: 23px;
	transform: rotate(-45deg);
	width: 32px;
}

.check:checked ~ .close-menu {
	background: rgba(0, 0, 0, 0.5);
	opacity: 1;
	transition-delay: .3s;
	transition-duration: 1s;
	visibility: visible;
	z-index: 3;
}

#androidBrowser_alert {
	background: rgba(73, 78, 88, 0.8);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}

#androidBrowser_alert div.wrap {
	background: #313131;
	left: 50%;
	margin-left: -160px;
	margin-top: -150px;
	max-width: 320px;
	position: fixed;
	top: 50%;
}

#androidBrowser_alert div.con {
	border: solid 1px #fff;
	color: #fff;
	font-size: 14px;
	line-height: 150%;
	padding: 20px;
}

#androidBrowser_alert a.go2chrome {
	background: #2492c8;
	color: #fff;
	display: block;
	padding: 5px;
	text-align: center;
}

@-webkit-keyframes animate-panel {
	0% {
		-webkit-transform-origin: left top;
		-webkit-transform: scale(0, 1);
		transform: scale(0, 1);
		transform-origin: left top;
	}

	49% {
		-webkit-transform-origin: left top;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		transform-origin: left top;
	}

	50% {
		-webkit-transform-origin: right top;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		transform-origin: right top;
	}

	100% {
		-webkit-transform-origin: right top;
		-webkit-transform: scale(0, 1);
		transform: scale(0, 1);
		transform-origin: right top;
	}
}

@keyframes animate-panel {
	0% {
		-webkit-transform-origin: left top;
		-webkit-transform: scale(0, 1);
		transform: scale(0, 1);
		transform-origin: left top;
	}

	49% {
		-webkit-transform-origin: left top;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		transform-origin: left top;
	}

	50% {
		-webkit-transform-origin: right top;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		transform-origin: right top;
	}

	100% {
		-webkit-transform-origin: right top;
		-webkit-transform: scale(0, 1);
		transform: scale(0, 1);
		transform-origin: right top;
	}
}

@-webkit-keyframes animate-content {
	0% {
		visibility: hidden;
	}

	49% {
		visibility: hidden;
	}

	50% {
		visibility: visible;
	}

	100% {
		visibility: visible;
	}
}

@keyframes animate-content {
	0% {
		visibility: hidden;
	}

	49% {
		visibility: hidden;
	}

	50% {
		visibility: visible;
	}

	100% {
		visibility: visible;
	}
}

.mask-inner {
	display: inline-block;
	position: relative;
	visibility: hidden;
}

.mask-inner::after {
	-webkit-transform-origin: left top;
	-webkit-transform: scale(0, 1);
	background: #fff;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: all 0.3s ease 0s;
	visibility: visible;
	width: 100%;
}

.mask-inner.start {
	-webkit-animation-name: animate-content;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-fill-mode: both;
	-webkit-animation-play-state: running;
	-webkit-backface-visibility: hidden;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-name: animate-content;
	animation-play-state: running;
	animation-timing-function: ease;
	backface-visibility: hidden;
}

.mask-inner.start::after {
	-webkit-animation-name: animate-panel;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-fill-mode: both;
	-webkit-animation-play-state: running;
	-webkit-backface-visibility: hidden;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-name: animate-panel;
	animation-play-state: running;
	animation-timing-function: ease;
	backface-visibility: hidden;
}


/* トップ画像 */





.maintop__width {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
}

@media screen and (max-width: 640px) {
	.maintop__width {
		width: 100%;
		padding: 10px 0;
		display: block;
	}
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.maintop__width {
		width: 65%;
		display: flex;
		margin: 0 auto;
	}
}


.maintop-wrapper {
	width: 100%;
	height: 100vh;
	/* (画像の高さ / 画像の横幅) × 100 */
	/*	padding-top: 66.6666666667%;*/
	background: url(../img/main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

@media screen and (max-width: 640px) {
	.maintop-wrapper {
		background-image: url(../img/main_sp.jpg);
		background-repeat: no-repeat;
		width: 100vw;
		height: 100vh;
	}
}

.maintop__logo {
	width: 204px;
	margin: auto;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 640px) {
	.maintop__logo {
		width: 40vw;
		margin: auto;
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
	}
}

.maintop__title {
	margin: 0 auto;
	padding: 0 0 0 2rem;
	text-align: left;
	letter-spacing: 0.05rem;
	line-height: 1.5rem;
	width: 100%;
}

@media screen and (max-width: 640px) {
	.maintop__title {
		margin: 1rem auto;
		padding: 1rem;
		text-align: left;
		letter-spacing: 0.05rem;
		line-height: 1.5rem;
		width: 100%;
	}
}

.maintop__title h1 {
	font-family: classico-urw, sans-serif;
	font-weight: 100;
	text-align: left;
	font-size: 2.4rem;
	color: #707070;
	margin: 0.5rem auto;
	color: #fff;
	text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
	line-height: 1;
}

@media screen and (max-width: 640px) {
	.maintop__title h1 {
		font-family: classico-urw, sans-serif;
		font-weight: 100;
		text-align: center;
		font-size: 1.6rem;
		color: #fff;
		margin: 1.2rem auto;
	}
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.maintop__title h1 {
		font-family: classico-urw, sans-serif;
		font-weight: 100;
		text-align: left;
		font-size: 1.6rem;
		color: #fff;
		margin: 1.2rem auto;
	}
}






.maintop__title h2 {
	font-family: classico-urw, sans-serif;
	font-weight: 100;
	text-align: left;
	font-size: 1.4rem;
	color: #fff;
	text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
	line-height: 1;
}

@media screen and (max-width: 640px) {
	.maintop__title h2 {
		font-size: 1rem;
		font-weight: 100;
		text-align: center;
	}
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.maintop__title h2 {
		font-size: 1rem;
		font-weight: 100;
		text-align: left;
	}
}




.main_img {
	width: 1100px;
	margin: 0 auto;
}

@media screen and (max-width: 640px) {
	.main_img {
		width: 100%;
		margin: 0 auto;
	}
}




/* 冒頭 */
.brand-wrapper {
	margin: 7rem auto;
}


@media screen and (max-width: 640px) {
	.brand-wrapper {
		height: auto;
		margin: 100px 0;
	}
}

.brand_column {
	margin: 5rem auto;
	padding: 5rem;
	text-align: center;
	line-height: 1.5;
	background-color: #fff;
}

@media screen and (max-width: 640px) {
	.brand_column {
		margin: 2.5rem auto;
		padding: 4rem 20px;
	}
}

.brand_season h1 {
	margin: 1.5rem auto;
	font-family: classico-urw, sans-serif;
	font-size: 3rem;
	font-weight: 100;
	letter-spacing: 0.1rem;
	text-align: center;
	color: #0D2844;
}

@media screen and (max-width: 640px) {
	.brand_season h1 {
		margin: 1rem auto 0;
		font-size: 1.6rem;
	}
}


.brand_column h2 {
	margin: 1.5rem auto;
/*	font-family: classico-urw, sans-serif;*/
	font-size: 1.8rem;
	font-weight: 400;
	text-align: center;
	letter-spacing: 0.05em;
	color: #707070;

}

@media screen and (max-width: 640px) {
	.brand_season h2 {
/*		font-family: classico-urw, sans-serif;*/
		margin: 0rem auto 1rem;
		font-size: 1.2rem;
	}
}

.brand_txt {
	margin: 5rem auto;
	font-weight: 500;
	font-style: normal;
	text-align: center;
	color: #0D2844;
	line-height: 1.8;
	letter-spacing: 0.05rem;
	font-size: 0.9rem;
}

@media screen and (max-width: 640px) {
	.brand_txt {
		margin: 2.5rem auto 4rem;
		font-weight: 500;
		font-style: normal;
		text-align: center;
		color: #0D2844;
		line-height: 1.7;
		letter-spacing: 0;
		font-size: 14px;
	}

	
}

.brand_txt_sub {
	margin: 5rem auto;
	font-weight: 500;
	font-style: normal;
	text-align: center;
	color: #707070;
	line-height: 1.8;
	letter-spacing: 0.05rem;
	font-size: 0.9rem;
}

@media screen and (max-width: 640px) {
	.brand_txt_sub {
		margin: 2.5rem auto;
		font-weight: 500;
		font-style: normal;
		text-align: center;
		color: #707070;
		line-height: 1.8;
		letter-spacing: 0;
		font-size: 12px;
	}

	.brand_txt_sub span {
		display: block;
		margin: 0;

	}




}

.brand_column_button {
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	display: block;
}

.brand_column_button .button {
	width: 204px;
	font-size: 1rem;
	letter-spacing: 0.1rem;
	border: 1px solid #0D2844;
	text-align: center;
	border-radius: 3px;
	margin: 0 auto;
	color: #fff;
}

.brand_column_button .button a {
	color: #fff;
	display: block;
}

.button a {
	color: #fff;
	display: block;
}

.brand_column_button .button:hover {
	opacity: 0.8;
	transition: 0.5s;
}


.main-wrapper {
	width: 900px;
	margin: 5rem auto;
	text-align: center;
}

@media screen and (max-width: 640px) {
	.main-wrapper {
		width: 100%;
		margin: 5rem auto;
		text-align: center;
	}
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.main-wrapper {
		width: 100%;
		margin: 5rem auto;
		text-align: center;
	}
}



.main-wrapper p {
	margin: 10rem auto;
}

@media screen and (max-width: 640px) {
	.main-wrapper p {
		margin: 5rem auto;
	}
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.main-wrapper p {
		margin: 3rem auto;
	}
}


.beside {
	width: 800px;
	border: 30px solid #fff;
	opacity: 0.95;
	box-shadow: 0px 0px 5px 15px rgba(0, 0, 0, 0.005);
}

.vertical {
	width: 500px;
	border: 30px solid #fff;
	opacity: 0.95;
	box-shadow: 0px 0px 5px 15px rgba(0, 0, 0, 0.005);
}

@media screen and (max-width: 640px) {
	.beside {
		width: 90vw;
		border: 10px solid #fff;
	}

	.vertical {
		width: 80vw;
		border: 10px solid #fff;
	}
}


@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.beside {
		width: 60vw;
		border: 10px solid #fff;
	}

	.vertical {
		width: 40vw;
		border: 10px solid #fff;
	}
}

.itemlist-wrapper {
	width: 100%;
	margin: 5rem auto;
	background-color: #fff;
}

.itemlist__warp {
	width: 1100px;
	padding: 5rem 0;
	margin: 0 auto;
	background-color: #fff;
}

@media screen and (max-width: 640px) {
	.itemlist__warp {
		width: 100%;
		padding: 2.5rem 0;
		margin: 0 auto;
		background-color: #fff;
	}
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.itemlist__warp {
		width: 100%;
		padding: 2.5rem 0;
		margin: 0 auto;
		background-color: #fff;
	}
}





.itemlist_text {
	margin: 5rem auto;
}

.itemlist_text h1 {
	font-family: classico-urw, sans-serif;
	font-size: 3rem;
	font-weight: 100;
	text-align: center;
	color: #0D2844;
}

.itemlist_text h2 {
	font-family: classico-urw, sans-serif;
	font-size: 1.4rem;
	margin: 1rem auto 2rem;
	font-weight: 100;
	text-align: center;
	color: #707070;
}


@media screen and (max-width: 640px) {
	.itemlist_text {
		margin: 2.5rem auto;
	}

	.itemlist_text h1 {
		font-family: classico-urw, sans-serif;
		font-size: 1.6rem;
		font-weight: 100;
		text-align: center;
		color: #0D2844;
	}

	.itemlist_text h2 {
		font-family: classico-urw, sans-serif;
		font-size: 1.2rem;
		margin: 0rem auto;
		font-weight: 100;
		text-align: center;
		color: #707070;
	}
}

.item__warp {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media screen and (max-width: 640px) {
	.item__warp {
		padding: 20px;
	}
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.item__warp {
		padding: 15px;
	}
}


.item {
	padding: 0 0.5rem;
}

@media screen and (max-width: 640px) {
	.item {
		padding: 0 10px;
		width: calc(50% - 10px);
	}
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.item {
		padding: 1rem 0.5rem;
	}
}






.item_img {
	margin: 1rem auto;
}


@media screen and (max-width: 640px) {
	.item_img {
		margin: 2.5rem auto 1rem;
	}
}

.credit {
	font-size: 0.8rem;
	line-height: 1.5rem;
	font-weight: 100;
	font-style: normal;
}

@media screen and (max-width: 640px) {
	.credit {
		font-size: 12px;
		line-height: 1.2rem;
		font-weight: 100;
		font-style: normal;
		text-align: center;
	}
}

.button {
	width: 80%;
	font-size: 0.8rem;
	line-height: 2.5rem;
	letter-spacing: 0.2rem;
	background-color: #0d2844;
	color: #fff;
	text-align: center;
	font-weight: 100;
	border-radius: 3px;
	margin: 1rem auto 0 0;
}

.button:hover {
	opacity: 0.8;
	transition: 0.5s;
}

@media screen and (max-width: 640px) {
	.button {
		width: 80%;
		font-size: 12px;
		line-height: 2.2rem;
		letter-spacing: 0.2rem;
		background-color: #0d2844;
		color: #fff;
		text-align: center;
		font-weight: 100;
		border-radius: 3px;
		margin: 1rem auto;
	}
}

/* 商品紹介 */
.item-wrapper {
	margin: 10rem auto 0;
	padding: 5rem 0;
}

.item_bk {
	background: #f7f7f7;
	padding-bottom: 5rem;
}

.articleLabelL {
	font-family: classico-urw, sans-serif;
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
	margin: 0 0 5rem;
}


.l-row {
	font-family: classico-urw, sans-serif;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media only screen and (max-width: 1024px) {
	.l-row {
		flex-direction: column;
		padding: 0;
	}
}


@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.Item__box {
		margin: 0;
	}
}


.Item__inner {
	align-items: center;
}

.Item__inner:nth-of-type(1) {
	margin-right: 30px;
}

@media only screen and (max-width: 1024px) {
	.Item__inner:nth-of-type(1) {
		margin-right: 0;
		margin-bottom: 50px;
	}
}


.Item__inner img {
	mix-blend-mode: multiply;
}


.Item__imgWrap {
	width: 10%;
	margin: 0;
}

.Item__img {
	flex: 0 0 15rem;
	margin-right: 1rem;
	mix-blend-mode: multiply;
	width: 15rem;
}

.img-max {
	height: auto;
	width: 100%;
}


.Item__detail {
	margin: 0 0 0 1.5rem;
	line-height: 2rem;
	font-family: "Open Sans";
}

@media screen and (max-width: 1024px) {
	.Item__detail {
		margin: 2rem auto 0;
	}
}


.Item__brand,
.Item__price {
	font-size: 0.9rem;
}

.Item__name {
	font-weight: bold;
}

.Item__itemTax {
	font-size: 0.7rem;
}

.Item__link {
	margin: 1rem auto 0;
}

.itemBtm {
	background: #494e58;
	border: .1rem solid #494e58;
	border-radius: 3px;
	color: #fff;
	font-size: 0.8rem;
	height: 0.5rem;
	line-height: 2em;
	padding: .2rem .4rem;
}


/* ショップインフォメーション */
.Shoplist-wrapper {
	width: 65rem;
	margin: 10rem auto 0;
}

@media only screen and (max-width: 1024px) {
	.Shoplist-wrapper {
		width: 90%;
		margin-top: 5rem;
	}
}


.Shoplist__block {
	margin: 0 auto 10rem;
	text-align: left;
	width: calc((85% - 3rem) / 2);
}

@media screen and (max-width: 640px) {
	.Shoplist__block {
	}
}

@media only screen and (max-width: 1024px) {
	.Shoplist__block {
		margin: 0 auto 5rem;
		width: auto;
	}
}

/* 
@media screen and (max-width: 1005px){
  .Content {
    width: 100%;
    padding: 0 10%;
  }
  
  } */


.Shoplist__shopName {
	border-bottom: 1px solid;
	font-size: 1.5rem;
	line-height: 1rem;
	padding-bottom: 1rem;
}

.Shoplist__shopName span {
	font-size: 1rem;
	margin: 0 1rem;
}

@media screen and (max-width: 640px) {
	.Shoplist__shopName {
		border-bottom: 1px solid;
		font-size: 1.4rem;
		line-height: 1rem;
		padding-bottom: 1rem;
	}
}


.Shoplist__shopinfo {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	margin: 15px auto;
	font-size: 0.95rem;
}

.Shoplist__shopinfo dt {
	align-items: center;
	color: #555;
	flex: 0 0 8rem;
	font-size: 1rem;
	font-weight: 700;
	margin: .5rem 0 0 0;
	max-width: 5rem;
}

@media screen and (max-width: 640px) {
	.Shoplist__shopinfo dt {
		align-items: center;
		color: #555;
		flex: 0 0 8rem;
		font-size: 1rem;
		font-weight: 700;
		margin: .5rem 0 0 0;
		max-width: 5rem;
	}
}

.Shoplist__shopinfo dd {
	flex: 0 0 calc(100% - 5rem);
	margin: .5rem 0 0 0;
}

@media screen and (max-width: 640px) {
	.Shoplist__shopinfo dd {
		flex: 0 0 calc(100% - 5rem);
		margin: .5rem 0 0 0;
	}
}

.Shoplist__map {
	border-bottom: 1px solid;
	margin-left: .5rem;
}

.Shoplist__sns ul {
	display: flex;
	justify-content: flex-start;
	margin: 10px 0 20px;
}

.Shoplist__sns li {
	font-size: 1.5rem;
	margin-right: 10px;
}

.fa-facebook-official:before {
	content: "\f230";
}

.fa-instagram:before {
	content: "\f16d";
}


.linkButton {
	font-size: 0.9rem;
	font-weight: 700;
}

.linkButton a:before {
	background: #494e58;
	content: '';
	display: inline-block;
	height: 1px;
	margin-right: 10px;
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	vertical-align: 2px;
	width: 6rem;
}


.linkButton a:hover:before {
	width: 8rem;
}



.topBtn {
	-webkit-transform-origin: left center;
	-webkit-transform: rotate(135deg);
	border: .1rem solid;
	border-color: transparent transparent #232323 #232323;
	bottom: 1.5rem;
	font-size: 9px;
	height: 1.5rem;
	position: fixed;
	right: 1.5rem;
	transform: rotate(135deg);
	transform-origin: left center;
	transition-duration: 0.5s;
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	width: 1.5rem;
}

@media only screen and (max-width: 640px) {
	.topBtn {
		bottom: .5rem;
		right: -0.1rem;
	}
}

.topBtn:hover:before {
	opacity: .8;
}


/* フッター */
.Footer {
	padding: 1rem 0;
	text-align: center;
}




/*　ハンバーガーボタン　*/
/*============
nav
=============*/
nav {
	display: block;
	position: fixed;
	top: 0;
	left: -300px;
	bottom: 0;
	width: 300px;
	background: #f6f6f6;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: all .5s;
	z-index: 3;
	opacity: 0;
}

.open nav {
	left: 0;
	opacity: 1;
}

nav .inner {
	padding: 10rem 25px;
}

nav .inner ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav .inner ul li {
	position: relative;
	/*	border-bottom: 1px solid #222C41;*/
}

nav .inner ul li a {
	display: block;
	color: #707070;
	font-size: 1.2rem;
	padding: 1.5rem 0;
	text-decoration: none;
	transition-duration: 0.3s;

}

nav .inner ul li a:hover {
	opacity: 0.5;
}

@media screen and (max-width: 767px) {
	nav {
		left: -80%;
		width: calc(100% - 75px);
	}
}

/*============
.toggle_btn
=============*/
.toggle_btn {
	display: block;
	position: fixed;
	top: 40px;
	right: 40px;
	width: 30px;
	height: 30px;
	transition: all .5s;
	cursor: pointer;
	z-index: 1000;
	opacity: 0.9;
}

@media screen and (max-width: 767px) {
	.toggle_btn {
		display: block;
		position: fixed;
		top: 10px;
		right: 10px;
		width: 30px;
		height: 30px;
		transition: all .5s;
		cursor: pointer;
		z-index: 1000;
		opacity: 0.9;
	}
}

.toggle_btn span {
	display: block;
	position: absolute;
	left: 0;
	width: 30px;
	height: 0.5px;
	background-color: #707070;
	border-radius: 4px;
	transition: all .5s;
	z-index: 1000;
}

.toggle_btn span:nth-child(1) {
	top: 5px;
}

.toggle_btn span:nth-child(2) {
	top: 15px;
}

.toggle_btn span:nth-child(3) {
	bottom: 5px;
}

.open .toggle_btn span {
	background-color: #707070;
}

.open .toggle_btn span:nth-child(1) {
	-webkit-transform: translateY(10px) rotate(-315deg);
	transform: translateY(10px) rotate(-315deg);
}

.open .toggle_btn span:nth-child(2) {
	opacity: 0;
}

.open .toggle_btn span:nth-child(3) {
	-webkit-transform: translateY(-10px) rotate(315deg);
	transform: translateY(-10px) rotate(315deg);
}

/*============
#mask
=============*/
#mask {
	display: none;
	transition: all .5s;
}

.open #mask {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.4);
	;
	z-index: 2;
	cursor: pointer;
}

.main_title_nav {
	font-size: 1.4rem;
	text-align: left;
	margin: 5rem 0 10rem;
	line-height: 1.5;
	width: 60%;
}