@charset "UTF-8";


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

   common.css

	- Variable
	- Reset
	- Base
	- Layout
	- Navigation
	- Component
	- Animation
	- Utility

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



/* ========================================================
  
  Variable

======================================================== */
:root {
	--fw-bold: 600;

	--ff-gothic: "Hiragino Kaku Gothic ProN","Hiragino Sans","游ゴシック","Yu Gothic",Meiryo,sans-serif;

	--font-min: normal normal 300 100%/1.6 "Noto Serif JP", serif;
	--font-en: normal normal 400 100%/1 "EB Garamond", sans-serif;

	--color-base: #000;
	--color-gry: #333;

	--color-bei: #f0eee9;
	--color-bei: #f0eee9;
	--color-och: #b29f6e;
	--color-brw: #998675;

	--color-primary: #faed00;
	--color-primary-400: #FBF37C;
	--color-secondary: #ff968a;

	--accent-color: var(--color-taq);

	--bdr-solid: 1px solid #ccc;
}

.u-accent-primary { --accent-color: var(--color-primary);}
.u-accent-secondary { --accent-color: var(--color-secondary);}



/* ========================================================
  
  Reset

======================================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fildset,p,blockquote,
figure,figcaption,hr {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-style: normal;
	font-weight: inherit;
}

ul{
	list-style:none;
}

img{
	display: block;
    /* width: 100%; */
    max-width: 100%;
    height: auto;
    /* object-fit: cover; */
}

picture {
	display:block;
}

table {
	width:100%;
	font-size:inherit;
	font:100%;
	border-collapse:separate;
	border-spacing:0;
}

button {
	display: block;
	padding: 0;
	border: none;
	outline: none;
	font: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
}






/* ========================================================
  
  Base

======================================================== */
html {
	font-size: 17px;
}
body {
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","游ゴシック","Yu Gothic",Meiryo,sans-serif;
	font-style: normal;
	color: var(--color-base);
	letter-spacing: .1em;
	line-height: 2;
	margin: 0;
	-webkit-text-size-adjust: 100%;
}

main {
	position: relative;
}

a {
	color: inherit;
	text-decoration: none;
	outline: 0;
	transition: color .8s, background-color .8s;
}

address {
	font-style: normal;
}

section {
	position: relative;
}

main {
	position: relative;
}

cite {
	display: block;
	text-align: right;
	font-size: min(1.5vw,100%);
	letter-spacing: normal;
	font-style: normal;
	line-height: 1.4;
	margin-top: 1em;
}

sup {
	font-size:60%;
}

hr {
	display: block;
	height: 1px;
	background: #cccccc;
	width: 100%;
	border: none;
	margin: 10% auto;
}

b {font-weight: var(--fw-bold);}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

html {
	font-size: 16px;
}
body {
	line-height: 1.8;
}
}

@media(min-width: 768px) {
/* PC時はaタグ無効 */
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
/* スマホのときはビューポートを基準にサイズ調節する */
/* スマホ時：emまたは%で指定する */
/* スマホ以外でビューポート基準にするときは、その都度「vw」で指定する */
html {
	font-size: 4vw;
}
body {
	line-height: 1.7;
	letter-spacing: .04em;
}
cite {
	font-size: 80%;
}
hr {
	margin: 12% auto;
}
}






/* ========================================================
  
  Layout

======================================================== */
.l-wrapper { overflow: clip; }


/*-----------------------------------------------
 Layout - header
-----------------------------------------------*/
.l-header {
	
}
.l-header__logo {
	display: block;
	width: 45%;
	max-width: max-content;
	margin-bottom: 5%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-header {
	
}
.l-header__logo {
	width: 80%;
	margin-bottom: 8%;
}
}

/*-----------------------------------------------
 Layout - FV
-----------------------------------------------*/
.l-fv {
	position: relative;
	padding: min(8%,120px) 5%;
}
.l-fv__inner {
	max-width: 1140px;
	margin-inline: auto;
}
.l-fv__img {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	margin: 0;
	z-index: -1;

	> img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	&::before {
		position: absolute;
		content: "";
		background-color: rgb(77 77 77 / 0.7);
		width: 100%;
		height: 100%;
		inset: 0;
	}
}
.l-fv__ttl {
	position: relative;
	color: #FFF;
	font: var(--font-min);
	font-size: min(2.6vw,176%);
	line-height: 1.5;
	letter-spacing: .18em;

	.u-font-en {
		font-size: 266%;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-fv {
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-fv {
	padding: 10% 5%;
}
.l-fv__ttl {
	font-size: 130%;
}
}



/*-----------------------------------------------
 Layout - footer
-----------------------------------------------*/
.l-footer {
	padding: min(10%,120px) 0 min(8%,80px);
	border-top: var(--bdr-solid);
}
.copyright {
	display: block;
	text-align: center;
	font: var(--font-min);
	font-size: 76%;
	line-height: 1.5;
	letter-spacing: .18em;
	margin-top: 5em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.copyright {
	font-size: 60%;
	letter-spacing: .1em;
	margin-top: 4em;
}
}


/* c-contact
-----------------------------------------------*/
.c-contact {
	display: flex;
	justify-content: center;
	column-gap: 1.5%;
}
.c-contact-btn {
	position: relative;
	width: 12em;
	min-width: 9.5em;
	max-width: 100%;
	height: 3.9em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: .4em;
	color: var(--color-base);
	font: var(--font-min);
	font-size: min(2vw,135%);
	letter-spacing: .1em;
	line-height: 1.2;
	white-space: nowrap;
	background-color: #FFF;
	border-radius: 100vmax;
	padding: .2em 2em;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	transition: color .6s, background-color .6s;

	&::before {
		display: inline-block;
		content: "";
		font-family: 'fontello';
		font-weight: normal;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		min-width: 1.74em;
		min-height: 1.31em;
	}
	&:hover {
		background-color: var(--color-bei);
	}
}
.c-contact-btn--tel {
	&::before {
		background-image: url(../images/common/icon-tel.svg);
	}
}
.c-contact-btn--rsv {
	&::before {
		background-image: url(../images/common/icon-reserve.svg);
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-contact {
	column-gap: 2%;
}
.c-contact-btn {
	width: 49%;
	font-size: 100%;
}
}


/* l-bnr
---------------------------------------------------------*/
.l-bnr__ttl {
	text-align: center;
	color: var(--color-gry);
	font-size: 88%;
	line-height: 1.5;
	letter-spacing: .16em;
	margin-bottom: 2em;
}
.l-bnr__list {
	max-width: 1400px;
	display: grid;
	justify-content: space-between;
	gap: 1em 1.3%;
	grid-template-columns: repeat(4,24%);
    margin: 0 auto;
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 

.l-bnr__list {
	grid-template-columns: repeat(3,32%);
}
}
/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 

.l-bnr__ttl {
	font-size: 80%;
	letter-spacing: .1em;
	margin-bottom: 1.2em;
}
.l-bnr__list {
	gap: .4em 2%;
	grid-template-columns: repeat(2,49%);
}
}





/* ========================================================
  
  Component

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

/*-----------------------------------------------
 Component - scroll
-----------------------------------------------*/
.scl-area {
	position: relative;

	--scr-bg-color: rgb(180 180 180 / 0.2);
}
.scl-area__txt {
	text-align: center;
	color: #9194A1;
	font-size: 80%;
	letter-spacing: .1em;
	line-height: 1.4;
	margin-bottom: 1em;
}
/* scrollbar */
.scl-area::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

.scl-area::-webkit-scrollbar-track {
	background: var(--scr-bg-color);
}

.scl-area::-webkit-scrollbar-thumb {
	background-color: var(--color-brw);
}

.scl-area::-webkit-scrollbar-thumb:hover {
	background-color: #555;
}

/* Firefox */
@-moz-document url-prefix(){
.scl-area {
	scrollbar-width: thin;         /* auto, thin, none */
	scrollbar-color: var(--accent-color) transparent; /* thumb track */
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.scl-area {
	overflow-x: scroll;
	padding-bottom: 8%;
}
}

/*-----------------------------------------------
 Component - accordion
-----------------------------------------------*/
.c-acd {
	position: relative;
}
.c-acd__trigger {
	position: relative;
	cursor: pointer;
	transition: color .5s, background-color .5s;
}
.c-acd__content {
	display: none;
}
/*c-acd__icon*/
.c-acd__icon {
	position: relative;
	letter-spacing: normal;
	line-height: 1.0em;
	display: inline-block;
	vertical-align: middle;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	translate: 0 -0.1em;
	transition: background-color .5s;

	&::before,
	&::after {
		content: "";
		position: absolute;
		width: .6em;
		height: 1px;
		background: currentcolor;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	&::after {
		transform: rotate(90deg);
		transition: transform 0.4s;
	}
}
.c-acd__trigger.is-active {
	.c-acd__icon::after {
		transform: rotate(0deg);
	}
}

/*-----------------------------------------------
 Component - hover
-----------------------------------------------*/
.c-hover--zoom {
	position: relative;
	overflow: hidden;

	> img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: translateZ(0);
		transition: scale .6s;
	}
}
a:hover .c-hover--zoom img {
	scale: 1.08;
}


/*-----------------------------------------------
 Component - heading
-----------------------------------------------*/
.c-hdg--min {
	position: relative;
	font: var(--font-min);
	font-size: min(2.6vw,176%);
	line-height: 1.6;
	letter-spacing: .15em;
	margin-bottom: .5em;
}
.c-hdg--bdr {
	position: relative;
	text-align: center;
	font: var(--font-min);
	font-size: min(2.8vw,205%);
	line-height: 1.6;
	letter-spacing: .15em;
	padding: .6em;
	margin-bottom: 2em;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}
.c-hdg--bg {
	position: relative;
	max-width: 1200px;
	text-align: center;
	color: #FFF;
	font: var(--font-min);
	font-size: min(2.2vw,158%);
	line-height: 1.6;
	letter-spacing: .15em;
	background-color: var(--color-och);
	padding: .6em;
	margin: 0 auto 2em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-hdg--min {
	font-size: 130%;
	letter-spacing: .08em;
}
.c-hdg--bdr {
	font-size: 135%;
	letter-spacing: .08em;
	margin-bottom: 1em;
}
.c-hdg--bg {
	font-size: 125%;
	letter-spacing: .08em;
	margin-bottom: 1em;
}
}


/*-----------------------------------------------
 Component - list
-----------------------------------------------*/
.c-list {
	display: grid;
	row-gap: .4em;
	text-align: left;
	line-height: 1.5;

	&.is-lg {
		font-size: min(2vw,135%);
		font-weight: var(--fw-bold);
	}
	> li {
		position: relative;
		padding-left: 1.4em;

		&::before {
			position: absolute;
			content: "";
			font-family: 'fontello';
			font-weight: normal;
			left: 0;
			top: 0;
		}
	}
}

.c-list--point {
	> li {
		&::before {
			display: block;
			color: var(--accent-color);
			background-color: currentColor;
			width: .4em;
			height: .4em;
			border-radius: 50%;
			left: .2em;
			top: .5em;
		}
	}
}

.c-list--dot {
	> li {
		padding-left: 1em;
		&::before {
			content: "・";
			left: -0.2em;
		}
	}
}

.c-list--ast {
	margin-top: 1em;
	> li {
		padding-left: 1.2em;
		&::before {
			content: "＊";
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-list {
	row-gap: .4em;

	&.is-lg {
		font-size: 105%;
	}
}

}


/*-----------------------------------------------
 Component - c-icon
-----------------------------------------------*/
.c-icon {
    position: relative;
	display: inline-block;
    text-align: center;
	letter-spacing: normal;
	color: var(--color-base);
	font-size: 1.05rem;
	line-height: 1.5;
	background-color: #FFF;
    border-radius: 50%;
    width: 1.5em;
	aspect-ratio: 1;
	transition: color .4s, background-color .4s, filter .4s;

	&::before {
		position: absolute;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-family: 'fontello';
		content: '\e801';
		font-weight: normal;
		text-align: center;
		width: 100%;
		height: 100%;
		inset: 0;
	}
	&.is-out::before {
		content: '\e803';
		font-size: 80%;
	}
	&.is-arw::before {
		content: '\e812';
	}
}

/*-----------------------------------------------
 Component - link
-----------------------------------------------*/

/* Component - link - c-btn-radi
-----------------------------------------------*/
.c-btn-radi {
	margin-top: 1.6em;

	> a {
		position: relative;
		width: 16em;
		height: 3.4em;
		min-width: max-content;
		max-width: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .4em;
		text-align: left;
		font: var(--font-min);
		font-size: min(1.8vw,1.05rem);
		letter-spacing: .15em;
		font-feature-settings: "halt";
		line-height: 1.2;
		background-color: #FFF;
		padding: .9em 1.5em;
		border-radius: 100vmax;
		
		&:hover {
			background-color: rgb(255 255 255 / 0.8);
		}
	}
	.c-icon {
		color: var(--color-base);
		background-color: var(--color-primary);
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-btn-radi {
	text-align: center;
	margin-top: 1em;

	> a {
		width: 13em;
		height: 3.2em;
		font-size: 3.5vw;
	}
}
}

/*-----------------------------------------------
 Component - c-btn-list
-----------------------------------------------*/
.c-btn-list {
	max-width: 1140px;
	display: grid;
	justify-content: space-between;
	row-gap: 1em;
	font: var(--font-min);
	font-size: min(1.8vw,0.94rem);
	letter-spacing: .1em;
	line-height: 1.2;
	margin-top: 5%;
	margin-inline: auto;

	& a {
		position: relative;
		height: 3.7em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: .4em;
		background-color: #FFF;
		padding: .2em 1.8em;
		border-radius: 100vmax;

		.c-icon {
			position: absolute;
			background-color: var(--color-primary);
			right: 1em;
			top: 50%;
			translate: 0 -50%;
		}
		&:hover {
			background-color: rgb(255 255 255 / 0.8);
		}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.c-btn-list {
	grid-template-columns: repeat(4,23.7%);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-btn-list {
	grid-template-columns: repeat(2,49%);
	gap: .8em 2%;
	font-size: 90%;
	letter-spacing: .08em;

	& a {
		padding: .2em 2.5em .2em 1.2em;
	}
}
}


/*-----------------------------------------------
 Component - contact
-----------------------------------------------*/

/* Component - contact - c-cta-btn
-----------------------------------------------*/
.c-cta-btn {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 4.8em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: .4em;
	color: #FFF;
	font: var(--font-min);
	font-size: min(2.2vw,135%);
	letter-spacing: .1em;
	line-height: 1.2;
	white-space: nowrap;
	padding: .6em .2em;
	transition: filter .6s;

	> small {
		position: relative;
		display: block;
		font-family: var(--ff-gothic);
		font-weight: var(--fw-bold);
		letter-spacing: .12em;
		font-size: 58%;

		> span {
			display: inline-block;
			font: var(--font-en);
			font-size: 140%;
			transform: skewX(-10deg);
		}
	}

	.c-cta-tel {
		font-size: 130%;
	}

	.c-icon {
		position: absolute;
		right: 10px;
		bottom: 0;
		translate: 0 50%;
		transition: opacity .2s;
	}

	&:hover {
		filter: brightness(1.1);
	}
}

.c-cta-btn--rsv {
	background-color: var(--color-brw);

	.c-cta-btn__txt::before {
		background-image: url(../images/common/icon-reserve-wh.svg);
	}
}

.c-cta-btn__txt {
	position: relative;

	&::before {
		display: inline-block;
		content: "";
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		min-width: 1.75em;
		min-height: 1.3em;
		vertical-align: -0.35em;
		margin-right: .3em;
	}
	> br {
		display: none;
	}
}

.l-scroll:not(.is-show) .c-cta-btn .c-icon {
	opacity: 0;
}

.l-modal .c-cta-btn {
	flex-direction: row;
	width: 11.3em;
	height: auto;
	padding: .5em .2em;
	margin-inline: auto;

	&::before {
        background-size: auto 150%;
    }
	.c-icon {
		position: relative;
		display: inline-block;
		font-size: 80%;
		inset: auto;
		translate: none;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-cta-btn {
	width: auto;
	height: 4.2em;
	font-size: 5.6vw;
	padding: .5em 1em;
}

.l-modal .c-cta-btn {
	font-size: 3.6vw;
}
}



/* ========================================================
  
  Utility

======================================================== */
/* font */
.u-font-min {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	letter-spacing: .06em;
}
.u-font-en {
	font: var(--font-en);
	font-optical-sizing: auto;
	letter-spacing: .15em;
	line-height: 1;
	font-optical-sizing: auto;
}

/* Font-weight */
.u-fw-bold{font-weight: var(--fw-bold);}
.u-fw-normal{font-weight: normal;}	

/* Font-weight */
.u-fz--sm{
	font-size: 94%;
	line-height: 1.8;
	letter-spacing: .06em;
}
.u-fz--lg{font-size: 112%;}

/* Text-align */
.u-align-l{text-align:left;}
.u-align-r{text-align:right;}
.u-align-c{text-align:center;}
.u-align-l-sp{text-align:center;}

/* Block-link */
.blocklink,
.blocklink_out,
.blocklink_ank{
	cursor:pointer;
}

/* text color */
.u-color-accent { color: var(--accent-color);}
.u-color-grn { color: var(--color-grn);}
.u-color-red { color: var(--color-red);}
.u-color-wine { color: var(--color-wine);}
.u-color-org { color: var(--color-org);}

/* background color */
.u-bg-wh {background-color: #fff;}
.u-bg-ivo {background-color: var(--color_ivo);}
.u-bg-bei {background-color: var(--color-bei);}
.u-bg-grn {background-color: var(--color-grn);}
.u-bg-taq-300 {background-color: var(--color-taq-300);}

/* img */
img.size-max {width: 100%;}

/* radius */
.u-rounded-full {border-radius:50%;}
.u-rounded-10px {border-radius: 10px;}
.u-rounded-20px {border-radius: min(2.4vw,20px);}
.u-rounded-30px {border-radius: min(2.6vw,30px);}
.u-rounded-50px {border-radius: clamp(30px,4.5vw,50px);}
.u-rounded-60px {border-radius: clamp(40px,5vw,60px);}


/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

/* Font-weight */
.u-fz-lg{font-size: 105%;}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

/* Text-align */
.u-align-l-sp{text-align:left;}

/* Font-weight */
.u-fz--sm{font-size: 90%;line-height: 1.6;}
.u-fz--lg{font-size: 100%;}
}

/* Utility - fontsize
-----------------------------------------------*/
.u-size--20 {font-size: min(2vw,117%);}
.u-size--25 {font-size: min(2.2vw,147%);}
.u-size--35 {font-size: min(3.2vw,205%);}
.u-size--40 {font-size: min(3.5vw,235%);}
.u-size--45 {font-size: min(4vw,264%);}
.u-size--50 {font-size: min(4.2vw,294%);}
.u-size--60 {font-size: min(5.2vw,352%);}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.u-size--20 {font-size: 115%;}
.u-size--25 {font-size: 120%;}
.u-size--35 {font-size: 135%;}
.u-size--40 {font-size: 140%;}
.u-size--45 {font-size: 145%;}
.u-size--50 {font-size: 160%;}
.u-size--60 {font-size: 165%;}
}


/*-----------------------------------------------
 Utility - border/padding
-----------------------------------------------*/
.u-pdg--ss,
.u-pdg--s,
.u-pdg--m,
.u-pdg--l {
	position: relative;
}
.u-pdg--ss {	padding: min(6vw,60px) 0;}
.u-pdg--s {	padding: min(6vw,80px) 0;}
.u-pdg--m {	padding: min(8vw,100px) 0;}
.u-pdg--l {	padding: min(10vw,120px) 0;}


.u-bdr--b {
	padding-bottom: min(6.5%,80px);
	margin-bottom: min(6.5%,80px);
	border-bottom: 1px solid var(--color-bdr);
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.u-pdg--ss {	padding: 10% 0;}
.u-pdg--s {	padding: 10% 0;}
.u-pdg--m {	padding: 12% 0;}
.u-pdg--l {	padding: 15% 0;}

.u-bdr--b {
	padding-bottom: 10%;
	margin-bottom: 10%;
	border-width: 1px;
}
}


/*---------------------------------------------------------
 anchor
---------------------------------------------------------*/
/* [id] {
	position: relative;
} */
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
[id] {
	scroll-margin-top: min(14vw,100px);
}
}

/*---------------------------------------------------------
 Utility - width
---------------------------------------------------------*/
.max_width,
.w1500,
.w1440,.w1420,.w1400,
.w1380,.w1350,.w1340,.w1300,
.w1280,.w1240,.w1200,
.w1100 {
	box-sizing: content-box;
	width: 92%;
	padding: 0 4%;
	margin-inline: auto;
}
.max_1500 {
	max-width: 1500px;
	margin-inline: auto;
}
.w1500 {max-width: 1500px;}
.w1440 {max-width: 1440px;}
.w1420 {max-width: 1420px;}
.w1400 {max-width: 1400px;}
.w1380 {max-width: 1380px;}
.w1350 {max-width: 1350px;}
.w1340 {max-width: 1340px;}
.w1300 {max-width: 1300px;}
.w1280 {max-width: 1280px;}
.w1240 {max-width: 1240px;}
.w1200 {max-width: 1200px;}
.w1100 {max-width: 1100px;}

.u-inner {
	width: 96%;
	max-width: 1200px;
	margin-inline: auto;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.max_width,
.w1500,
.w1440,.w1420,.w1400,
.w1380,.w1350,.w1340,.w1300,
.w1280,.w1260,.w1200,
.w1100 {
	width: 90%;
	padding: 0 5%;
}
}

/*---------------------------------------------------------
margin
---------------------------------------------------------*/
.u-mb-xl {margin-bottom: 150px;}
.u-mb-lg {margin-bottom: 120px;}
.u-mb-md {margin-bottom: 100px;}
.u-mb-sm {margin-bottom: 80px;}
.u-mb-xs {margin-bottom: 60px;}
.u-mb-xxs {margin-bottom: 40px;}
.u-mb-1em {margin-bottom: 1em;}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.u-mb-xl {margin-bottom: 12%;}
.u-mb-lg {margin-bottom: 10%;}
.u-mb-md {margin-bottom: 8%;}
.u-mb-sm {margin-bottom: 7%;}
.u-mb-xs {margin-bottom: 5%;}
.u-mb-xxs {margin-bottom: 4%;}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.u-mb-xl {margin-bottom: 16%;}
.u-mb-lg {margin-bottom: 14%;}
.u-mb-md {margin-bottom: 12%;}
.u-mb-sm {margin-bottom: 10%;}
.u-mb-xs {margin-bottom: 8%;}
.u-mb-xxs {margin-bottom: 7%;}
}


/* PC
------------------------------------------*/
@media only screen and (min-width: 960px)  {
.tb_only{display:none !important;}
.sp_only{display:none !important;}
.sp_tb{display:none !important;}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.pc_only{display:none !important;}
.sp_only{display:none !important;}
.sp_pc{display:none !important;}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.pc_only{display:none !important;}
.tb_only{display:none !important;}
.tb_pc{display:none !important;}
}