@charset "UTF-8";
/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
/* These browsers currently include
** Android 4.3-4.4+,
** Chrome 39-40+,
** Firefox 34-35+,
** Internet Explorer 10-11+,
** iOS 7-8+,
** Safari 7-8+,
** Windows Phone 8.1+.
*/
/*
 * Normalization
 */
@import url("https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica&family=Noto+Sans+JP:wght@100;300;700&display=swap");
:root {
		-ms-overflow-style: -ms-autohiding-scrollbar;
		-webkit-text-size-adjust: 100%;
		        text-size-adjust: 100%;
}

audio:not([controls]) {
		display: none;
}

details {
		display: block;
}

input[type=number] {
		width: auto;
}
input[type=search] {
		-webkit-appearance: textfield;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
		-webkit-appearance: none;
}

main {
		display: block;
}

summary {
		display: block;
}

pre {
		overflow: auto;
}

progress {
		display: inline-block;
}

small {
		font-size: 75%;
}

template {
		display: none;
}

textarea {
		overflow: auto;
}

[hidden] {
		display: none;
}

[unselectable] {
		-webkit-user-select: none;
		        user-select: none;
}

/*
 * Universal inheritance
 */
*,
::before,
::after {
		box-sizing: inherit;
}

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

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

/*
 * Opinionated defaults
 */
*,
::before,
::after {
		border-style: solid;
		border-width: 0;
}

* {
		margin: 0;
		padding: 0;
}

:root {
		box-sizing: border-box;
		cursor: default;
		font: 62.5%/1em sans-serif;
		text-rendering: optimizeLegibility;
}
@media screen and (min-width: 769px) {
		:root {
				font: 0.78125vw/1em sans-serif;
		}
}
@media screen and (min-width: 1600px) {
		:root {
				font: 78.125%/1em sans-serif;
		}
}

html {
		background-color: #FFFFFF;
}

a {
		text-decoration: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
		vertical-align: middle;
}

button,
input:not([type=radio]),
select,
textarea {
		background-color: transparent;
}

button,
input:not([type=radio]),
select,
textarea {
		color: inherit;
		font-family: inherit;
		font-style: inherit;
		font-weight: inherit;
}

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: 1em;
}

input[type=submit],
input[type=button] {
		border-radius: 0;
		-webkit-appearance: button;
		        appearance: button;
		border: none;
		box-sizing: border-box;
		cursor: pointer;
}

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

input[type=submit]::focus,
input[type=button]::focus {
		outline-offset: -2px;
}

code,
kbd,
pre,
samp {
		font-family: monospace, monospace;
}

nav ol,
nav ul {
		list-style: none;
}

select {
		-moz-appearance: none;
		-webkit-appearance: none;
}
select::-ms-expand {
		display: none;
}
select::-ms-value {
		color: currentColor;
}

table {
		border-collapse: collapse;
		border-spacing: 0;
}

textarea {
		resize: vertical;
}

::selection {
		color: #FFFFFF;
		background-color: #000000;
		text-shadow: none;
}

@media screen {
		[hidden~=screen] {
				display: inherit;
		}

		[hidden~=screen]:not(:active):not(:focus):not(:target) {
				clip: rect(0 0 0 0) !important;
				position: absolute !important;
		}
}
* {
		margin: 0;
		padding: 0;
		outline: 0;
}

/* general params
--------------------*/
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote {
		margin: 0;
		padding: 0;
		/* margin&padding reset */
		font-style: normal;
}

h1, h2, h3, h4, h5, h6, dt {
		font-weight: 700;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
		display: block;
		margin: 0;
}

table {
		border-collapse: collapse;
		font-size: small;
		margin: 0;
		empty-cells: show;
}

hr, .areaAnchor, .anchor {
		display: none;
}

img {
		vertical-align: bottom;
		border: none;
		/* img do not want a border */
}

li {
		list-style: none;
}

blockquote, q {
		quotes: none;
}

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

ins {
		text-decoration: none;
		color: #000;
}

small, sub, sup {
		font-size: 0.83em;
}

sub {
		display: inline-block;
		vertical-align: middle;
		transform: translateY(15%);
}

sup {
		display: inline-block;
		vertical-align: middle;
		transform: translateY(-15%);
}

mark {
		font-weight: bold;
		font-style: italic;
		color: #000;
}

del {
		text-decoration: line-through;
}

abbr[title], dfn[title] {
		cursor: help;
		border-bottom: 1px dotted;
}

table {
		border-spacing: 0;
		border-collapse: collapse;
}

/* acronyms and abbreviations styles
-------------------------------------*/
acronym, abbr {
		cursor: help;
}

/* word break
-------------------------------------*/
p {
		word-break: normal;
}

/* image position
-------------------------------------*/
img {
		vertical-align: bottom;
}

/*
===== 2: form setting ===========================
*/
option {
		padding-right: 10px;
}

input, select {
		vertical-align: middle;
}

/*--------------------------------------------------------------- */
/* 全体で使用する common style を記述
/*--------------------------------------------------------------- */
/* Noto Sans JP
font-family: 'Noto Sans JP';
Tin : 100;
Light : 300;
Bold : 700;
*/
/* IM Fell DW Pica
font-family: 'IM Fell DW Pica';
Regular : 400;
*/
/* 游ゴシック */
@font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Medium");
		font-weight: 100;
}
@font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Medium");
		font-weight: 200;
}
@font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Medium");
		font-weight: 300;
}
@font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Medium");
		font-weight: 400;
}
@font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Bold");
		font-weight: bold;
}
/*-------------------------------------------> font */
.f_def {
		font-weight: 400;
}

.f_tin {
		font-weight: 100;
}

.f_light {
		font-weight: 300;
}

.f_bold {
		font-weight: 700;
}

.f_im {
		font-family: "IM Fell DW Pica", serif;
		font-weight: 400;
}

.f_min {
		font-family: "FOT-筑紫B明朝 Pr6 L", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

/*-------------------------------------------> html / body style */
html {
		height: 100%;
}

body {
		width: 100%;
		height: 100%;
		color: #000;
		font-family: "Noto Sans JP", "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
		font-weight: 400;
		text-align: center;
		overflow-y: scroll;
		overflow-x: hidden;
		position: relative;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 769px) {
		body {
				/*
				& > * {
					font-feature-settings: "palt";
				}
				*/
		}
		body .pc {
				display: block;
		}
		body .sp {
				display: none;
		}
		body img.pc,
body .svg.pc {
				display: inline;
		}
}
@media screen and (max-width: 768px) {
		body {
				/*
				& > * {
					font-feature-settings: "palt";
				}
				*/
		}
		body .pc {
				display: none;
		}
		body .sp {
				display: block;
		}
		body img.pc {
				display: none;
		}
		body img.sp,
body .svg.sp {
				display: inline;
		}
		body img {
				max-width: 100%;
				height: auto;
		}
}

.hide {
		display: none;
}

#_cmp_elm_0_0,
#_cmp_elm_0_1 {
		width: 90vw !important;
		overflow: hidden !important;
		left: -9999px !important;
}

/*-------------------------------------------> link style */
a {
		outline: none;
		cursor: pointer;
}
a:link {
		text-decoration: none;
}
a:visited {
		text-decoration: none;
}
a:hover {
		text-decoration: none;
}
a:active {
		text-decoration: none;
}

@media screen and (min-width: 769px) {
		.OverOpacity,
.OverOpacityGroup a {
				opacity: 1;
				transition: opacity 0.15s ease-out;
		}
		.OverOpacity:hover,
.OverOpacityGroup a:hover {
				opacity: 0.3;
		}
}
/*-------------------------------------------> Footer fix */
#siteFrame {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		min-width: 800px;
		width: 100%;
}
@media screen and (max-width: 768px) {
		#siteFrame {
				min-width: initial;
		}
}
#siteFrame .body {
		flex: 1 0 auto;
		padding-bottom: 90px;
}
@media screen and (max-width: 768px) {
		#siteFrame .body {
				padding-bottom: 13.3333333333vw;
		}
}
#siteFrame #Footer {
		margin-top: auto;
}

.ie11 body,
.ie11 #siteFrame {
		min-height: initial;
}
.ie11 body #Footer,
.ie11 #siteFrame #Footer {
		margin-top: 0;
}

/*-------------------------------------------> Common style */
.inner {
		width: 800px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
}
@media screen and (max-width: 768px) {
		.inner {
				width: 100vw;
				padding-left: 10vw;
				padding-right: 10vw;
				margin-left: 0;
				margin-right: 0;
		}
}

img {
		max-width: 100%;
		height: auto;
		vertical-align: top;
}

br.pc {
		display: block;
}
br.pc.sp {
		display: block;
}
br.sp {
		display: none;
}
@media screen and (max-width: 768px) {
		br.pc {
				display: none;
		}
		br.sp {
				display: block;
		}
		br.sp.pc {
				display: block;
		}
}

.taLeft {
		text-align: left !important;
}

.taCenter {
		text-align: center !important;
}

.taRight {
		text-align: right !important;
}

.clearfix:after {
		content: "";
		display: block;
		clear: both;
}

/*-------------------------------------------> Main */
/*-------------------------------------------> Header */
#Header {
		position: relative;
		z-index: 810;
		height: 160px;
}
#Header .fix {
		width: 100%;
		height: 160px;
		background: #FFF;
		transition: all 0.3s ease-out;
}
#Header.fixed .fix {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 800;
		background: #FFF;
		transform: translate3d(0, 0, 0);
		height: 80px;
}
#Header .inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		height: 128px;
		transition: all 0.3s ease-out;
}
#Header .logo {
		margin-left: auto;
		margin-right: auto;
}
#Header .logo img {
		height: 72px;
		transition: all 0.3s ease-out;
}
#Header .sns {
		display: flex;
}
#Header .sns li {
		padding-right: 10px;
}
#Header .sns li img {
		width: 16px;
}
@media screen and (max-width: 768px) {
		#Header {
				width: 100vw;
				height: 105px;
		}
		#Header .fix {
				height: 105px;
		}
		#Header.fixed .fix {
				height: 105px;
		}
		#Header .inner {
				height: 80px;
				padding-left: 15px;
				padding-right: 15px;
		}
		#Header .logo img {
				height: 47px;
		}
		#Header .sns {
				display: flex;
				flex-direction: column;
		}
		#Header .sns li {
				padding-right: 0;
				padding-bottom: 7px;
		}
		#Header .sns li img {
				width: 19px;
		}
}

#Navi {
		opacity: 0;
		pointer-events: none;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 800;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
}
#Navi ul {
		opacity: 0;
		position: relative;
		z-index: 810;
		text-align: left;
		font-size: 13px;
		line-height: 1.5384615385;
		letter-spacing: 0.2em;
}
#Navi ul a {
		color: #000;
		display: block;
		padding: 20px 0;
}
#Navi::after {
		opacity: 0;
		content: "";
		background: rgba(255, 255, 255, 0.95);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
}
#Navi .close {
		opacity: 0;
		position: fixed;
		top: 80px;
		left: calc(50% + (400px - 26px));
		z-index: 810;
		width: 26px;
		height: 26px;
}
#Navi .close a {
		display: block;
		text-indent: -9999px;
		width: 20px;
		height: 20px;
		background: url(../images/common/icon_close.svg) no-repeat center center;
		background-size: 100% 100%;
}
@media screen and (max-width: 768px) {
		#Navi {
				width: 100vw;
				height: 100vh !important;
		}
		#Navi ul {
				font-size: 14px;
				/* legacy */
				font-size: 3.7333333333vw;
				line-height: 1;
				letter-spacing: 0.2em;
		}
		#Navi ul a {
				padding: 4vw 0;
		}
		#Navi .close {
				top: 16vw;
				left: auto;
				right: 6.4vw;
				width: 4vw;
				height: 4vw;
		}
		#Navi .close a {
				width: 4vw;
				height: 4vw;
		}
}
@media screen and (max-width: 768px) and (orientation: landscape) {
		#Navi {
				display: block;
				padding: 0 0 0 4vw;
		}
		#Navi .scroll {
				overflow: scroll;
				height: 100%;
		}
		#Navi ul {
				margin: 4vw 0;
		}
}

#MenuBtn {
		position: relative;
		display: block;
		width: 26px;
		height: 26px;
}
#MenuBtn a {
		display: block;
		width: 26px;
		height: 26px;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
}
#MenuBtn a .icon {
		position: relative;
		width: 26px;
		height: 26px;
}
#MenuBtn a .icon span {
		position: absolute;
		display: block;
		background: #000;
		width: 100%;
		height: 2px;
		overflow: hidden;
		border-radius: 1px;
		transition: all 0.15s ease-out;
		top: 50%;
		left: 50%;
}
#MenuBtn a .icon span:nth-of-type(1) {
		transform: translate3d(-50%, -7px, 0);
}
#MenuBtn a .icon span:nth-of-type(2) {
		transform: translate3d(-50%, 0, 0);
}
#MenuBtn a .icon span:nth-of-type(3) {
		transform: translate3d(-50%, 7px, 0);
}
@media screen and (max-width: 768px) {
		#MenuBtn {
				width: 31px;
				height: 31px;
		}
		#MenuBtn a {
				width: 31px;
				height: 31px;
		}
		#MenuBtn a .icon {
				width: 31px;
				height: 31px;
		}
		#MenuBtn a .icon span {
				height: 2px;
		}
		#MenuBtn a .icon span:nth-of-type(1) {
				transform: translate3d(-50%, -9px, 0);
		}
		#MenuBtn a .icon span:nth-of-type(2) {
				transform: translate3d(-50%, 0, 0);
		}
		#MenuBtn a .icon span:nth-of-type(3) {
				transform: translate3d(-50%, 9px, 0);
		}
}

.MOpen #Navi {
		opacity: 1;
		pointer-events: auto;
}
.MOpen #Navi ul {
		opacity: 1;
}
.MOpen #Navi::after {
		opacity: 1;
}
.MOpen #Navi .close {
		opacity: 1;
}

.Scroll #Header .fix,
.MScroll #Header .fix {
		position: fixed;
		top: 0;
		left: 0;
		height: 80px;
}
.Scroll #Header .fix .inner,
.MScroll #Header .fix .inner {
		height: 70px;
}
.Scroll #Header .fix .logo img,
.MScroll #Header .fix .logo img {
		height: 50px;
}
@media screen and (max-width: 768px) {
		.Scroll #Header .fix,
.MScroll #Header .fix {
				height: 105px;
		}
		.Scroll #Header .fix .inner,
.MScroll #Header .fix .inner {
				height: 80px;
		}
		.Scroll #Header .fix .logo img,
.MScroll #Header .fix .logo img {
				height: 47px;
		}
}

/*-------------------------------------------> Footer */
#Footer {
		position: relative;
}
#Footer::before {
		content: "";
		width: 900px;
		height: 1px;
		background: url(../images/common/line_dot.png) repeat-x center top;
		position: absolute;
		top: 0;
		left: calc(50% - 450px);
}
#Footer .inner {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 60px 0 160px;
}
#Footer .ftMenu {
		font-size: 10px;
		line-height: 1.5;
		letter-spacing: 0.2em;
		text-align: left;
}
#Footer .ftMenu a {
		display: block;
		padding: 13px 0;
		color: #000;
}
#Footer .ftInfo .logo {
		margin-bottom: 80px;
}
#Footer .ftInfo .logo img {
		width: 338px;
}
#Footer .ftInfo .sns {
		display: flex;
		justify-content: center;
}
#Footer .ftInfo .sns li {
		padding: 0 10px;
}
#Footer .ftInfo .sns li img {
		width: 28px;
}
@media screen and (max-width: 768px) {
		#Footer {
				width: 100vw;
		}
		#Footer::before {
				width: calc(100% - (150/750*100%));
				height: 2px;
				background: url(../images/common/line_dot.png) repeat-x center top/100% 1px;
				left: 10vw;
		}
		#Footer .inner {
				flex-direction: column;
				justify-content: center;
				padding: 6vw 0 17.3333333333vw;
		}
		#Footer .ftMenu {
				font-size: 12px;
				/* legacy */
				font-size: 3.2vw;
				line-height: 1;
				letter-spacing: 0.2em;
				margin-bottom: 11.3333333333vw;
		}
		#Footer .ftMenu a {
				padding: 3.6vw 0;
		}
		#Footer .ftInfo .logo {
				margin-bottom: 10.6666666667vw;
		}
		#Footer .ftInfo .logo img {
				width: 45.0666666667vw;
		}
		#Footer .ftInfo .sns li {
				padding: 0 2.6666666667vw;
		}
		#Footer .ftInfo .sns li img {
				width: 3.8666666667vw;
		}
}

.subLink > a {
		display: block;
		cursor: pointer;
}
.subLink > a span {
		display: inline-block;
		position: relative;
}
.subLink > a span::after {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		border-right: solid 1px #000;
		border-bottom: solid 1px #000;
		position: absolute;
		top: 50%;
		right: -20px;
		transform: translate(0, -25%) rotate(-135deg);
		transform-origin: center center;
}
.subLink .sub {
		margin-left: 2em;
}
.subLink .sub li a {
		text-indent: -1em;
}
.subLink .sub li a::before {
		content: "・ ";
		font-size: 13px;
		line-height: 1.5384615385;
		letter-spacing: 0.2em;
}
.subLink.active span::after {
		transform: translate(0, -75%) rotate(45deg);
		transform-origin: center center;
}
.subLink.active .sub {
		display: block;
}
@media screen and (max-width: 768px) {
		.subLink > a span::after {
				content: "";
				display: block;
				width: 2.1333333333vw;
				height: 2.1333333333vw;
				right: -vw(30);
				transform: translate(0, -75%) rotate(45deg);
				transform-origin: center center;
		}
		.subLink .sub {
				margin-left: 2em;
		}
		.subLink .sub li a {
				text-indent: -1em;
		}
		.subLink .sub li a::before {
				content: "・ ";
				font-size: 10px;
				/* legacy */
				font-size: 2.6666666667vw;
				line-height: 1;
				letter-spacing: 0.2em;
		}
}

/*-------------------------------------------> Loading */
#Loading {
		display: none;
}

/*-------------------------------------------> plugin style */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox {
		box-shadow: 0px 0px 10px 0px #999;
}

#colorbox, #cboxOverlay {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		overflow: hidden;
		-webkit-transform: translate3d(0, 0, 0);
}

#cboxWrapper {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		overflow: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		max-width: none;
}

#cboxOverlay {
		position: fixed;
		width: 100%;
		height: 100%;
}

#cboxMiddleLeft, #cboxBottomLeft {
		clear: left;
}

#cboxContent {
		position: relative;
}

#cboxLoadedContent {
		overflow: auto;
		-webkit-overflow-scrolling: touch;
}

#cboxTitle {
		margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
		cursor: pointer;
}

.cboxPhoto {
		float: left;
		margin: auto;
		border: 0;
		display: block;
		max-width: none;
		-ms-interpolation-mode: bicubic;
}

.cboxIframe {
		width: 100%;
		height: 100%;
		display: block;
		border: 0;
		padding: 0;
		margin: 0;
}

#colorbox, #cboxContent, #cboxLoadedContent {
		box-sizing: content-box;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
		/*
		 background: url(../images/colorbox/overlay.png) repeat 0 0;
		 opacity: 0.9;
		 filter: alpha(opacity = 90);
		*/
		background: rgba(255, 255, 255, 0.95);
}

#colorbox {
		outline: 0;
}

#cboxContent {
		background: #fff;
		overflow: hidden;
}

.cboxIframe {
		background: #fff;
}

#cboxError {
		padding: 50px;
		border: 1px solid #ccc;
}

#cboxLoadedContent {
		margin-bottom: 0;
}

#cboxTitle {
		display: none;
}

#cboxCurrent {
		display: none;
}

#cboxLoadingOverlay {
		background: url(../images/colorbox/loading_background.png) no-repeat center center;
}

#cboxLoadingGraphic {
		background: url(../images/colorbox/loading.gif) no-repeat center center;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
		border: 0;
		padding: 0;
		margin: 0;
		overflow: visible;
		width: auto;
		background: none;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
		outline: 0;
}

#cboxSlideshow {
		position: absolute;
		bottom: 4px;
		right: 30px;
		color: #0092ef;
}

#cboxPrevious {
		position: absolute;
		top: 50%;
		left: 30px;
		transform: translateY(-50%);
		background: url(../images/common/arrow_prev.svg) no-repeat left top;
		width: 10px;
		height: 27px;
		text-indent: -9999px;
}
#cboxPrevious:hover {
		opacity: 0.3;
}

#cboxNext {
		position: absolute;
		top: 50%;
		right: 30px;
		transform: translateY(-50%);
		background: url(../images/common/arrow_next.svg) no-repeat left top;
		width: 10px;
		height: 27px;
		text-indent: -9999px;
}
#cboxNext:hover {
		opacity: 0.3;
}

#cboxClose {
		position: absolute;
		top: 30px;
		right: 30px;
		background: url(../images/common/icon_close.svg) no-repeat left top;
		width: 20px;
		height: 20px;
		text-indent: -9999px;
}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight {
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

@media screen and (min-width: 769px) {
		#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover {
				opacity: 0.3;
		}
}
@media screen and (max-width: 768px) {
		#cboxPrevious {
				left: 10px;
		}

		#cboxNext {
				right: 10px;
		}

		#cboxClose {
				top: 10px;
				right: 10px;
		}
}
/* Slider */
.slick-loading .slick-list {
		background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
		font-family: "slick";
		src: url("./fonts/slick.eot");
		src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
		font-weight: normal;
		font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
		position: absolute;
		display: block;
		height: 20px;
		width: 20px;
		line-height: 0px;
		font-size: 0px;
		cursor: pointer;
		background: transparent;
		color: transparent;
		top: 50%;
		transform: translate(0, -50%);
		padding: 0;
		border: none;
		outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
		outline: none;
		background: transparent;
		color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
		opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
		opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
		font-family: "slick";
		font-size: 20px;
		line-height: 1;
		color: white;
		opacity: 0.75;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}

.slick-prev {
		left: -25px;
}
[dir=rtl] .slick-prev {
		left: auto;
		right: -25px;
}
.slick-prev:before {
		content: "←";
}
[dir=rtl] .slick-prev:before {
		content: "→";
}

.slick-next {
		right: -25px;
}
[dir=rtl] .slick-next {
		left: -25px;
		right: auto;
}
.slick-next:before {
		content: "→";
}
[dir=rtl] .slick-next:before {
		content: "←";
}

/* Dots */
.slick-dots {
		position: absolute;
		bottom: -25px;
		list-style: none;
		display: block;
		text-align: center;
		padding: 0;
		margin: 0;
		width: 100%;
}
.slick-dots li {
		position: relative;
		display: inline-block;
		height: 20px;
		width: 20px;
		margin: 0 5px;
		padding: 0;
		cursor: pointer;
}
.slick-dots li button {
		border: 0;
		background: transparent;
		display: block;
		height: 20px;
		width: 20px;
		outline: none;
		line-height: 0px;
		font-size: 0px;
		color: transparent;
		padding: 5px;
		cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
		outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
		opacity: 1;
}
.slick-dots li button:before {
		position: absolute;
		top: 0;
		left: 0;
		content: "•";
		width: 20px;
		height: 20px;
		font-family: "slick";
		font-size: 6px;
		line-height: 20px;
		text-align: center;
		color: black;
		opacity: 0.25;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
		color: black;
		opacity: 0.75;
}

/*-------------------------------------------> */
@media screen and (min-width: 769px) {
		a .zoomImg {
				overflow: hidden;
		}
		a .zoomImg img {
				transition: transform 0.3s ease-out;
				transform: scale(1, 1);
		}
		a:hover .zoomImg img {
				transform: scale(1.1, 1.1);
		}
		a:hover .zoomImg.short img {
				transform: scale(1.05, 1.05);
		}
}
/*-------------------------------------------> flexbox */
.flex {
		display: flex;
}
.flex.column {
		flex-direction: column;
}
@media screen and (max-width: 768px) {
		.flex.sp_column {
				flex-direction: column;
		}
}

/*-------------------------------------------> Loading
#Loading {
	display: block;
	position: fixed;
	justify-content: center;
	align-items: center;
	z-index: 9998;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: $WHITE;
	@include fs(10,10,0);
	.Loading-wrap {
		width: 100%;
		height: 100%;
		background: url(../images/loading.gif) no-repeat center center;
		background-size: 25px 25px;
		text-indent: -9999px;
		.loader {
		}
	}
}
*/
/*-------------------------------------------> BlogCode */
.blogCode {
		font-size: 36px;
		line-height: 1.7777777778;
		letter-spacing: 0em;
		color: #000;
}
.blogCode p,
.blogCode ul,
.blogCode ol,
.blogCode table {
		margin: calc(64/36 * 1em) 0;
}
.blogCode ul,
.blogCode ol {
		margin-left: 1.5em;
}
.blogCode h1,
.blogCode h2,
.blogCode h3,
.blogCode h4,
.blogCode h5,
.blogCode h6 {
		margin-top: calc(64/36 * 1em);
		margin-bottom: calc(64/36 * 0.5em);
		line-height: 1.42;
		font-weight: 700;
}
.blogCode h1,
.blogCode h2,
.blogCode h3 {
		font-size: 28px;
}
.blogCode h4 {
		font-size: 25px;
}
.blogCode h5 {
		font-size: 22px;
}
.blogCode h6 {
		font-size: 19px;
}
.blogCode ul {
		list-style: disc;
}
.blogCode ol {
		list-style: decimal;
}
.blogCode li {
		list-style-position: outside;
}
.blogCode a {
		text-decoration: underline;
		color: #000;
}
@media screen and (min-width: 769px) {
		.blogCode a {
				transition: all 0.15s ease-out;
		}
		.blogCode a:hover {
				text-decoration: none;
		}
}
.blogCode strong,
.blogCode b {
		font-weight: bold;
}
.blogCode img {
		max-width: 100%;
		height: auto;
}
@media screen and (max-width: 768px) {
		.blogCode {
				font-size: 14px;
				/* legacy */
				font-size: 3.7333333333vw;
				line-height: 1.7142857143;
				letter-spacing: 0em;
		}
		.blogCode h1,
.blogCode h2,
.blogCode h3,
.blogCode h4,
.blogCode h5,
.blogCode h6 {
				line-height: 1.42;
		}
		.blogCode h1,
.blogCode h2,
.blogCode h3 {
				font-size: 5.3333333333vw;
		}
		.blogCode h4 {
				font-size: 4.8vw;
		}
		.blogCode h5 {
				font-size: 4.2666666667vw;
		}
		.blogCode h6 {
				font-size: 3.7333333333vw;
		}
}

/*
@media screen and ($over-tab) {}
@media screen and ($less-tab) {}
*/
/*-------------------------------------------> Cover */
#Cover .movie {
		position: relative;
		height: 450px;
}
#Cover .movie .short a {
		display: block;
}
#Cover .movie .short video {
		width: 100%;
		height: auto;
}
#Cover .movie .full {
		position: absolute;
		right: -29px;
		bottom: 0;
}
#Cover .movie .full a {
		display: block;
}
#Cover .movie .full a img {
		width: 19px;
}
#Cover .story {
		position: relative;
		height: 353px;
		padding-top: 35px;
		padding-right: 40px;
}
#Cover .story .link {
		position: absolute;
		top: 180px;
		left: 0;
}
#Cover .story .link a {
		display: block;
		position: relative;
}
#Cover .story .link a .pen {
		position: absolute;
		top: 0;
		left: 0;
}
@media screen and (min-width: 769px) {
		#Cover .story .link a .pen {
				transition: transform 0.15s ease-out;
		}
		#Cover .story .link a:hover .pen {
				transform: rotate(10deg);
		}
}
#Cover .story .link img {
		width: 138px;
}
#Cover .text {
		font-size: 14px;
		line-height: 1.7857142857;
		letter-spacing: 0.1em;
		writing-mode: vertical-rl;
		text-align: left;
		margin-left: auto;
}
#Cover .text p + p {
		margin-right: 1.78em;
}
#Cover .text .large {
		display: inline-block;
		font-size: 18px;
		line-height: 1.6111111111;
		letter-spacing: 0.1em;
}
@media screen and (min-width: 769px) {
		#Cover .text .large {
				margin-right: 3.2em;
		}
}
#Cover .text .textLink {
		position: relative;
		display: inline-block;
		color: #000;
}
#Cover .text .textLink::after {
		content: "";
		display: block;
		width: 1px;
		height: 100%;
		background: #000;
		position: absolute;
		top: 0;
		left: 2px;
}
#Cover .text .sub {
		display: inline;
}
@media screen and (max-width: 768px) {
		#Cover {
				margin-bottom: 10.6666666667vw;
		}
		#Cover .inner {
				padding-left: 0;
				padding-right: 0;
		}
		#Cover .movie {
				height: auto;
		}
		#Cover .movie .short a {
				display: block;
				width: 100vw;
		}
		#Cover .movie .short video {
				width: 100%;
				height: auto;
		}
		#Cover .movie .full {
				position: relative;
				right: auto;
				bottom: auto;
				padding-top: 3.2vw;
		}
		#Cover .movie .full a {
				display: block;
		}
		#Cover .movie .full a img {
				width: auto;
				height: 3.2vw;
		}
		#Cover .story {
				display: block;
				height: auto;
				padding-top: 6vw;
				padding-right: 8vw;
				padding-left: 6.6666666667vw;
		}
		#Cover .story .link {
				position: absolute;
				top: auto;
				left: 3.3333333333vw;
				bottom: -6vw;
				transform: scale(0.9);
		}
		#Cover .story .link a {
				display: block;
				position: relative;
		}
		#Cover .story .link a .pen {
				position: absolute;
				top: 0;
				left: 0;
				animation-name: pen;
				animation-duration: 2s;
				animation-iteration-count: infinite;
				animation-timing-function: ease-in-out;
				animation-fill-mode: both;
		}
		#Cover .story .link img {
				width: 27.3333333333vw;
		}
		#Cover .text {
				font-size: 10.5px;
				/* legacy */
				font-size: 2.8vw;
				line-height: 1.5714285714;
				letter-spacing: 0.03em;
				writing-mode: horizontal-tb;
				margin-left: auto;
		}
		#Cover .text .large {
				font-size: 15px;
				/* legacy */
				font-size: 4vw;
				line-height: 1.6;
				letter-spacing: 0.095em;
		}
		#Cover .text .textLink {
				font-size: 10.5px;
				/* legacy */
				font-size: 2.8vw;
				line-height: 1;
				letter-spacing: 0.065em;
		}
		#Cover .text .textLink::after {
				width: 100%;
				height: 1px;
				top: auto;
				left: 0;
				bottom: 0;
		}
		#Cover .text .sub {
				position: relative;
				display: block;
				writing-mode: vertical-rl;
				margin-left: auto;
		}
		#Cover .text .sub + .sub {
				writing-mode: horizontal-tb;
				margin-top: 6.6666666667vw;
				margin-left: 24vw;
				text-align: center;
		}
		#Cover .text .sub + .sub p {
				margin-right: 0;
		}
}

/*-------------------------------------------> Anchor */
#Anchor {
		height: 43px;
}
#Anchor .fix {
		background: #FFF;
}
#Anchor ul {
		display: flex;
		justify-content: space-between;
}
#Anchor ul a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 130px;
		height: 43px;
		color: #FFF;
		font-size: 11px;
		line-height: 1;
		letter-spacing: 0.1em;
		text-align: center;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		padding-bottom: 1px;
		white-space: nowrap;
}
#Anchor ul .anchor1 a {
		background-image: url(../images/navi_01.jpg);
}
#Anchor ul .anchor2 a {
		background-image: url(../images/navi_02.jpg);
}
#Anchor ul .anchor3 a {
		background-image: url(../images/navi_03.jpg);
}
#Anchor ul .anchor4 a {
		background-image: url(../images/navi_04.jpg);
}
#Anchor ul .anchor5 a {
		background-image: url(../images/navi_05.jpg);
}
#Anchor ul .anchor6 a {
		background-image: url(../images/navi_06.jpg);
}
@media screen and (max-width: 768px) {
		#Anchor {
				width: 100vw;
				height: calc( ((83 + 6) * 2) / 750 *100vw );
		}
		#Anchor .inner {
				padding-left: 0.4vw;
				padding-right: 0.4vw;
		}
		#Anchor ul {
				flex-wrap: wrap;
		}
		#Anchor ul li {
				width: calc(100% / 3);
				padding: 0.4vw;
		}
		#Anchor ul a {
				width: 100%;
				height: 11.0666666667vw;
				font-size: 9px;
				/* legacy */
				font-size: 2.4vw;
				line-height: 1;
				letter-spacing: 0.1em;
				padding-bottom: 1px;
		}
}

.naviFix #Anchor .fix,
.MScroll #Anchor .fix {
		position: fixed;
		z-index: 800;
		left: 0;
		top: 80px;
		width: 100%;
}
@media screen and (max-width: 768px) {
		.naviFix #Anchor .fix,
.MScroll #Anchor .fix {
				top: 105px;
		}
}
@media screen and (max-width: 768px) and (orientation: landscape) {
		.naviFix #Anchor .fix,
.MScroll #Anchor .fix {
				position: relative;
				left: auto;
				top: auto;
		}
}

/*-------------------------------------------> sectionBlock */
#Home .sectionBlock {
		text-align: left;
		margin-top: 70px;
}
#Home .sectionBlock + .sectionBlock {
		margin-top: 90px;
}
#Home .sectionBlock .sectionTitle {
		font-size: 20px;
		line-height: 0.8;
		letter-spacing: 0.15em;
}
#Home .sectionBlock .readText {
		margin-top: 20px;
		font-size: 13px;
		line-height: 1.9230769231;
		letter-spacing: 0.15em;
}
#Home .sectionBlock .list {
		position: relative;
		z-index: 10;
		display: flex;
		flex-wrap: wrap;
		width: calc( (10px + 260px) * 3 );
		margin: 40px auto 0;
}
#Home .sectionBlock .list .listBlock {
		width: 260px;
		height: 320px;
		padding: 20px 20px 0;
		margin: 5px;
		background: #FFF;
		box-shadow: 0px 0px 3px 0px #999;
}
#Home .sectionBlock .list .listBlock a {
		display: block;
}
#Home .sectionBlock .list .listBlock dl {
		display: flex;
		flex-direction: column-reverse;
}
#Home .sectionBlock .list .listBlock dl dt {
		height: 80px;
		overflow: hidden;
}
#Home .sectionBlock .list .listBlock dl dt img {
		width: 220px;
}
#Home .sectionBlock .list .listBlock dl dd img {
		width: 220px;
		height: 220px;
}
@media screen and (max-width: 768px) {
		#Home .sectionBlock {
				text-align: left;
				margin-top: 9.3333333333vw;
		}
		#Home .sectionBlock + .sectionBlock {
				margin-top: 12vw;
		}
		#Home .sectionBlock .sectionTitle {
				font-size: 15px;
				/* legacy */
				font-size: 4vw;
				line-height: 1.5;
				letter-spacing: 0.15em;
		}
		#Home .sectionBlock .readText {
				margin-top: 4vw;
				font-size: 12.5px;
				/* legacy */
				font-size: 3.3333333333vw;
				line-height: 1.8;
				letter-spacing: 0.045em;
		}
		#Home .sectionBlock .list {
				width: calc( ( ((294 + 10) * 2) / 750 * 100vw ) );
				margin: 5.3333333333vw auto 0;
		}
		#Home .sectionBlock .list .listBlock {
				width: 39.2vw;
				height: auto;
				padding: 3.0666666667vw 3.0666666667vw 0;
				margin: 0.6666666667vw;
		}
		#Home .sectionBlock .list .listBlock dl dt {
				height: 12vw;
		}
		#Home .sectionBlock .list .listBlock dl dt img {
				width: 100%;
		}
		#Home .sectionBlock .list .listBlock dl dd img {
				width: 100%;
				height: auto;
		}
}
@media screen and (max-width: 768px) {
		#Home .sectionBlock#Cat3 .sectionTitle {
				white-space: nowrap;
		}
}
#Home .sectionBlock#Cat4 .plusLogo {
		display: flex;
		justify-content: space-between;
}
#Home .sectionBlock#Cat4 .plusLogo .img {
		margin-left: auto;
}
#Home .sectionBlock#Cat4 .plusLogo .img img {
		width: 124px;
}
#Home .sectionBlock#Cat4 .blockTitle {
		margin-top: 40px;
}
#Home .sectionBlock#Cat4 .blockTitle img {
		height: 16px;
}
#Home .sectionBlock#Cat4 .list .listBlock {
		height: 260px;
}
@media screen and (max-width: 768px) {
		#Home .sectionBlock#Cat4 {
				/*
				.list {
					width: calc( ( ((294 + 10) * 2) / 750 * 100vw ) );
					margin: vw(40) auto 0;
					.listBlock {
						width: vw(294);
						height: auto;
						padding: vw(23);
						margin: vw(5);
						.zoomImg {
							img {
								width: 100%;
								height: auto;
							}
						}
					}
				}
				*/
		}
		#Home .sectionBlock#Cat4 .plusLogo {
				flex-direction: column;
		}
		#Home .sectionBlock#Cat4 .plusLogo .img {
				margin-left: auto;
				margin-right: auto;
				text-align: center;
				margin-top: 6.6666666667vw;
		}
		#Home .sectionBlock#Cat4 .plusLogo .img img {
				width: 24.2666666667vw;
		}
		#Home .sectionBlock#Cat4 .blockTitle {
				margin-top: 8.6666666667vw;
		}
		#Home .sectionBlock#Cat4 .blockTitle img {
				height: 4.2666666667vw;
		}
		#Home .sectionBlock#Cat4 .list .listBlock {
				height: auto;
				padding: 3.0666666667vw;
		}
}
#Home .sectionBlock#Cat6 .list .listBlock {
		width: calc( 50% - 10px);
		height: auto;
		padding: 0 20px 20px;
}
#Home .sectionBlock#Cat6 .list .listBlock dl {
		display: flex;
		flex-direction: column;
}
#Home .sectionBlock#Cat6 .list .listBlock dl dt {
		overflow: visible;
		position: relative;
		text-align: center;
		height: auto;
}
#Home .sectionBlock#Cat6 .list .listBlock dl dt img {
		width: 100%;
		height: auto;
}
#Home .sectionBlock#Cat6 .list .listBlock dl dt .open {
		position: absolute;
		top: -5px;
		left: 0px;
}
#Home .sectionBlock#Cat6 .list .listBlock dl dt .open img {
		width: 50px;
		width: 70px;
}
#Home .sectionBlock#Cat6 .list .listBlock dl dd img {
		width: 100%;
		height: auto;
}
#Home .sectionBlock#Cat6 .list .listBlock dl dd .text {
		margin-top: 15px;
		font-size: 10px;
		line-height: 2;
		letter-spacing: 0.08em;
		text-align: justify;
		text-justify: inter-ideograph;
}
#Home .sectionBlock#Cat6 .list .listBlock dl dd .shopName {
		margin-top: 15px;
		font-size: 8px;
		line-height: 2.125;
		letter-spacing: 0.08em;
}
#Home .sectionBlock#Cat6 .list .listBlock dl dd small {
		font-size: 70%;
		vertical-align: middle;
}
@media screen and (max-width: 768px) {
		#Home .sectionBlock#Cat6 .list .listBlock {
				width: 100%;
				padding: 0 3.0666666667vw 3.0666666667vw;
		}
		#Home .sectionBlock#Cat6 .list .listBlock dl dt {
				width: auto;
				height: 20vw;
				text-align: center;
		}
		#Home .sectionBlock#Cat6 .list .listBlock dl dt img {
				width: 100%;
				height: auto;
		}
		#Home .sectionBlock#Cat6 .list .listBlock dl dt .open {
				top: 1.3333333333vw;
				left: 0;
		}
		#Home .sectionBlock#Cat6 .list .listBlock dl dt .open img {
				width: 14.6666666667vw;
				height: 14.6666666667vw;
		}
		#Home .sectionBlock#Cat6 .list .listBlock dl dd .text {
				margin-top: 3.0666666667vw;
				font-size: 14px;
				/* legacy */
				font-size: 3.7333333333vw;
				line-height: 1.5;
				letter-spacing: 0.08em;
		}
		#Home .sectionBlock#Cat6 .list .listBlock dl dd .shopName {
				margin-top: 1em;
				font-size: 10px;
				/* legacy */
				font-size: 2.6666666667vw;
				line-height: 1.5;
				letter-spacing: 0.08em;
		}
}
#Home .sectionBlock#Visual .inner {
		width: 600px;
}
#Home .sectionBlock#Visual .inner .sectionTitle {
		text-align: center;
		margin-bottom: 60px;
}
#Home .sectionBlock#Visual .inner .wrap {
		display: flex;
		justify-content: center;
		align-items: flex-end;
}
#Home .sectionBlock#Visual .inner .wrap .img {
		position: relative;
		width: 298px;
		padding-right: 40px;
}
#Home .sectionBlock#Visual .inner .wrap .textWrap {
		flex: 1;
		display: flex;
		flex-direction: column;
}
#Home .sectionBlock#Visual .inner .wrap .textWrap .logo {
		flex: 1 0 auto;
		display: flex;
		align-items: center;
}
#Home .sectionBlock#Visual .inner .wrap .textWrap p, #Home .sectionBlock#Visual .inner .wrap .textWrap .shopName {
		margin-top: 2em;
		text-align: justify;
		text-justify: inter-ideograph;
}
#Home .sectionBlock#Visual .inner .wrap .textWrap .textL {
		font-size: 12px;
		line-height: 2.1666666667;
		letter-spacing: 0em;
}
#Home .sectionBlock#Visual .inner .wrap .textWrap .textS,
#Home .sectionBlock#Visual .inner .wrap .textWrap .shopName {
		font-size: 10px;
		line-height: 1.6;
		letter-spacing: 0em;
}
@media screen and (max-width: 768px) {
		#Home .sectionBlock#Visual .inner {
				width: auto;
		}
		#Home .sectionBlock#Visual .inner .sectionTitle {
				margin-bottom: 8vw;
		}
		#Home .sectionBlock#Visual .inner .sectionTitle img {
				width: 50.6666666667vw;
		}
		#Home .sectionBlock#Visual .inner .wrap {
				flex-direction: column;
		}
		#Home .sectionBlock#Visual .inner .wrap .img {
				width: 61.3333333333vw;
				padding-right: 0;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 13.3333333333vw;
		}
		#Home .sectionBlock#Visual .inner .wrap .textWrap .logo {
				text-align: center;
				margin-bottom: 6.6666666667vw;
		}
		#Home .sectionBlock#Visual .inner .wrap .textWrap .logo img {
				width: 50.4vw;
		}
		#Home .sectionBlock#Visual .inner .wrap .textWrap .textL {
				font-size: 9px;
				/* legacy */
				font-size: 2.4vw;
				line-height: 1.9444444444;
				letter-spacing: 0.06em;
		}
		#Home .sectionBlock#Visual .inner .wrap .textWrap .textS,
#Home .sectionBlock#Visual .inner .wrap .textWrap .shopName {
				font-size: 8px;
				/* legacy */
				font-size: 2.1333333333vw;
				line-height: 1.625;
				letter-spacing: 0.08em;
		}
}
#Home .sectionBlock + .note {
		margin-top: 90px;
		font-size: 10px;
		line-height: 1.2;
		letter-spacing: 0.05em;
		text-align: right;
}
@media screen and (max-width: 768px) {
		#Home .sectionBlock + .note {
				margin-top: 4vw;
				font-size: 8px;
				/* legacy */
				font-size: 2.1333333333vw;
				line-height: 1.5;
				letter-spacing: 0.05em;
				text-align: left;
		}
}

#modal {
		padding: 80px 50px 80px 80px;
}
#modal .wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 760px;
		height: 640px;
}
#modal .wrap .img {
		position: relative;
		width: 500px;
		padding-right: 40px;
}
#modal .wrap .img .open {
		width: 100px;
		position: absolute;
		top: -20px;
		left: -20px;
}
#modal .wrap .textWrap {
		width: 260px;
		max-height: 640px;
		padding-right: 20px;
		overflow-y: auto;
		text-align: left;
}
@media screen and (min-width: 769px) {
		#modal .wrap .textWrap::-webkit-scrollbar {
				width: 2px;
		}
		#modal .wrap .textWrap::-webkit-scrollbar-track {
				background: rgba(0, 0, 0, 0.1);
				border: none;
		}
		#modal .wrap .textWrap::-webkit-scrollbar-thumb {
				background: rgba(0, 0, 0, 0.8);
				border-radius: 2px;
		}
}
#modal .wrap .textWrap .logo a {
		display: inline-block;
}
#modal .wrap .textWrap .logo.column2 {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
}
#modal .wrap .textWrap .logo.column2 a {
		display: block;
		width: 50%;
		text-align: center;
}
#modal .wrap .textWrap p, #modal .wrap .textWrap .shopName {
		margin-top: 2em;
		text-align: justify;
		text-justify: inter-ideograph;
		vertical-align: middle;
}
#modal .wrap .textWrap .textL {
		font-size: 12px;
		line-height: 2.1666666667;
		letter-spacing: 0em;
}
#modal .wrap .textWrap .textS,
#modal .wrap .textWrap .shopName {
		font-size: 10px;
		line-height: 1.6;
		letter-spacing: 0em;
}
#modal .wrap .textWrap small {
		font-size: 70%;
		vertical-align: middle;
		display: inline-block;
		padding-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
		#modal {
				padding: 10vw;
		}
		#modal .wrap {
				flex-direction: column;
				width: 100%;
				height: auto;
		}
		#modal .wrap .img {
				width: 100%;
				padding-right: 0;
				padding-bottom: 10vw;
		}
		#modal .wrap .img .open {
				width: 26.6666666667vw;
				top: -6.6666666667vw;
				left: -6.6666666667vw;
		}
		#modal .wrap .textWrap {
				width: 100%;
				max-height: initial;
				padding-right: 0;
		}
		#modal .wrap .textWrap .logo {
				text-align: center;
		}
		#modal .wrap .textWrap .logo img {
				transform: scale(0.85);
		}
		#modal .wrap .textWrap .logo.column2 {
				align-items: center;
		}
		#modal .wrap .textWrap .textL {
				font-size: 16px;
				/* legacy */
				font-size: 4.2666666667vw;
				line-height: 1.5;
				letter-spacing: 0em;
		}
		#modal .wrap .textWrap .textS,
#modal .wrap .textWrap .shopName {
				font-size: 12px;
				/* legacy */
				font-size: 3.2vw;
				line-height: 1.5;
				letter-spacing: 0em;
		}
}
#modal.cat4 .logo img {
		width: auto;
		height: 16px;
}
@media screen and (max-width: 768px) {
		#modal.cat4 .logo img {
				height: 5.0666666667vw;
		}
}
#modal.cat6 {
		margin: auto;
		padding-top: 20px;
		padding-bottom: 20px;
}
#modal.cat6 .wrap {
		flex-direction: column;
		width: 650px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
}
#modal.cat6 .wrap .img {
		width: 100%;
		padding-right: 0;
}
#modal.cat6 .wrap .logoWrap {
		margin-top: 20px;
		margin-bottom: 20px;
		width: 100%;
		display: flex;
		align-items: center;
}
#modal.cat6 .wrap .logoWrap .logo {
		width: 150px;
		padding: 0 25px 0 0;
		text-align: center;
}
#modal.cat6 .wrap .logoWrap .text {
		flex: 1;
}
#modal.cat6 .wrap .logoWrap .text .textL {
		font-size: 14px;
		line-height: 1.8571428571;
		letter-spacing: 0.05em;
}
#modal.cat6 .wrap .logoWrap .text p {
		margin-top: 0;
}
#modal.cat6 .wrap .textWrap {
		width: 100%;
		max-height: initial;
		padding-right: 0;
		overflow: auto;
}
@media screen and (max-width: 768px) {
		#modal.cat6 {
				margin: 0;
				padding-top: 10vw;
				padding-bottom: 10vw;
		}
		#modal.cat6 .wrap {
				width: 100%;
		}
		#modal.cat6 .wrap .logoWrap {
				margin-top: 0;
				margin-bottom: 0;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
		}
		#modal.cat6 .wrap .logoWrap .logo {
				width: auto;
				padding: 0;
		}
		#modal.cat6 .wrap .logoWrap .text {
				flex: 1;
				font-feature-settings: "palt";
		}
		#modal.cat6 .wrap .logoWrap .text .textL {
				font-size: 16px;
				/* legacy */
				font-size: 4.2666666667vw;
				line-height: 1.5;
				letter-spacing: 0em;
		}
		#modal.cat6 .wrap .logoWrap .text p {
				margin-top: 2em;
		}
		#modal.cat6 .wrap .textWrap {
				width: 100%;
				max-height: initial;
				padding-right: 0;
				overflow: auto;
		}
}

#cbMovie {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 56.25%;
}
#cbMovie iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
}

/*
@media screen and ($over-tab) {}
@media screen and ($less-tab) {}
*/
/*-------------------------------------------> Risa */
#Rise #Main .inner {
		width: 650px;
}
@media screen and (max-width: 768px) {
		#Rise #Main .inner {
				width: auto;
				padding-left: 0;
				padding-right: 0;
		}
}
@media screen and (max-width: 768px) {
		#Rise .cover {
				margin-left: 5.3333333333vw;
				margin-right: 5.3333333333vw;
		}
}
#Rise .block {
		margin-top: 80px;
		display: flex;
		justify-content: space-between;
		height: 230px;
}
#Rise .block .text {
		font-size: 17px;
		line-height: 2.1176470588;
		letter-spacing: 0.15em;
		writing-mode: vertical-rl;
		text-align: left;
}
#Rise .block.block01, #Rise .block.block03 {
		height: 250px;
}
#Rise .block.block01 .text, #Rise .block.block03 .text {
		letter-spacing: 0.1em;
}
#Rise .block.block02, #Rise .block.block04 {
		margin-top: 60px;
}
@media screen and (min-width: 769px) {
		#Rise .block:nth-of-type(odd) {
				flex-direction: row-reverse;
		}
		#Rise .block:nth-of-type(odd) .text {
				margin-left: auto;
				margin-right: 30px;
		}
		#Rise .block:nth-of-type(even) {
				flex-direction: row;
		}
		#Rise .block:nth-of-type(even) .text {
				margin-left: 30px;
				margin-right: 0;
		}
}
@media screen and (max-width: 768px) {
		#Rise .block {
				margin-top: 6.6666666667vw;
				flex-direction: column-reverse;
				text-align: center;
				height: auto;
		}
		#Rise .block .img {
				width: 61.3333333333vw;
				margin-left: auto;
				margin-right: auto;
		}
		#Rise .block .text {
				height: 47.4666666667vw;
				height: 53.3333333333vw;
				width: auto;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 6vw;
				font-size: 13px;
				/* legacy */
				font-size: 3.4666666667vw;
				line-height: 1.8846153846;
				letter-spacing: 0em;
				font-size: 13px;
				/* legacy */
				font-size: 3.4666666667vw;
				line-height: 2.1153846154;
				letter-spacing: 0.2em;
		}
		#Rise .block.block01, #Rise .block.block03 {
				height: auto;
		}
		#Rise .block.block01 .text, #Rise .block.block03 .text {
				height: 53.3333333333vw;
		}
		#Rise .block.block01 .text, #Rise .block.block03 .text {
				margin-bottom: 6vw;
		}
		#Rise .block.block02, #Rise .block.block04 {
				margin-top: 6.6666666667vw;
		}
}
#Rise .copy {
		margin-top: 130px;
}
@media screen and (max-width: 768px) {
		#Rise .copy {
				margin-top: 20vw;
		}
		#Rise .copy img {
				width: 79.2vw;
		}
}

/* animation
.image {
	animation-delay: 0.3s;
}
&.inView {
	.base, .image {
		animation-name: fadeInUp;
	}
}
*/
/*-------------------------------------------> animation module */
.anim-fadeInUp {
		opacity: 0;
		animation-duration: 0.75s;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeInUp,
.inView .isAnim.inView .anim-fadeInUp,
.inView .anim-fadeInUp,
.inView.anim-fadeInUp {
		animation-name: fadeInUp;
}

.inView .isAnim.anim-fadeInUp,
.inView .isAnim .anim-fadeInUp {
		animation-name: none;
}

.anim-fadeIn {
		opacity: 0;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1);
		animation-fill-mode: both;
}

.inView .isAnim.inView.anim-fadeIn,
.inView .isAnim.inView .anim-fadeIn,
.inView .anim-fadeIn,
.inView.anim-fadeIn {
		animation-name: fadeIn;
}

.inView .isAnim.anim-fadeIn,
.inView .isAnim .anim-fadeIn {
		animation-name: none;
}

/* delay */
@media screen and (min-width: 769px) {
		.delay0 {
				animation-delay: 0s;
		}

		.delay1 {
				animation-delay: 0.2s;
		}

		.delay2 {
				animation-delay: 0.4s;
		}

		.delay3 {
				animation-delay: 0.6s;
		}

		.delay4 {
				animation-delay: 0.8s;
		}

		.delay5 {
				animation-delay: 1s;
		}

		.delay6 {
				animation-delay: 1.2s;
		}

		.delay7 {
				animation-delay: 1.4s;
		}

		.delay8 {
				animation-delay: 1.6s;
		}

		.delay9 {
				animation-delay: 1.8s;
		}

		.delay10 {
				animation-delay: 2s;
		}

		.delay11 {
				animation-delay: 2.2s;
		}
}
/*-------------------------------------------> keyframe */
@keyframes fadeInUp {
		from {
				opacity: 0;
				transform: translate3d(0, 20px, 0);
		}
		to {
				opacity: 1;
				transform: none;
		}
}
@keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}
@keyframes loading {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(-360deg);
		}
}
@keyframes pen {
		0% {
				transform: rotate(0deg);
		}
		50% {
				transform: rotate(5deg);
		}
		100% {
				transform: rotate(0deg);
		}
}