@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
body{
	color : var(--text);
	background-color : var(--body);
}
@media screen and (max-width: 768px){
	body{
	}
}
@media print,screen and (min-width: 1280px){
	body{
		display : flex;
		align-items : flex-start;
		flex-wrap : wrap;
	}
}
body , a{
	color : var(--text);
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header{
        background: #fdfcf9;
}
@media screen and (max-width: 768px){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		width : 100%;
		z-index : 10;
		display : flex;
		align-items : center;
		justify-content : center;
		height : var(--logoHeightSP);
	}
	#header .logo img{
		height : var(--logoSP);
	}
}
@media print,screen and (min-width: 769px){
	#header{
		height : 100vh;
		top : 0;
		display : flex;
		flex-direction : column;
		z-index : 10;
		overflow-y : auto;
		scrollbar-width : thin;
	}
	#header::-webkit-scrollbar-track{
		background : var(--track);
	}
	#header::-webkit-scrollbar-thumb{
		background : var(--thumb);
	}
	#header::-webkit-scrollbar-thumb:hover{
		background : var(--thumbHover);
	}
	#header header{
		flex-shrink : 1;
	}
	#header .logo{
		flex-shrink : 0;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#header{
		position : fixed;
		transform : translateX(100%);
		right : 0;
		width : calc( 200 * 100% / 768 );
		padding-left : calc( 10 * 100vw / 768 );
		padding-right : calc( 10 * 100vw / 768 );
		backface-visibility : hidden;
		will-change : transoform;
		transition : transform .3s ease-in;
	}
	#header::-webkit-scrollbar{
		width : calc( 10 * 100vw / 768 );
	}
	#header .logo{
		height : var(--logoHeightTB);
	}
	#header .logo img{
		height : var(--logoTB);
	}
}
@media print,screen and (min-width: 1280px){
	#header{
		position : -webkit-sticky;
		position :         sticky;
		top : 0;
		flex-shrink : 0;
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#header{
		width : calc( 200 * 100% / 1280 );
	}
	#header::-webkit-scrollbar{
		width : calc( 10 * 100vw / 1280 );
	}
	#header .logo{
		height : var(--logoHeightPC);
		background-size: cover;
		background-position: bottom center;
	}
	#header .logo img{
		height : var(--logoPC);
	}
}
@media print,screen and (min-width: 1380px){
	#header{
		width : 300px;
        background: #ede9df;
	}
	#header::-webkit-scrollbar{
		width : 10px;
	}
	#header .logo{
		max-height : var(--logoHeightLPC);
        min-height: 20vh;
		background-size: cover;
		background-position: bottom center;
	}
	#header .logo img{
		max-height : var(--logoLPC);
        		height : 20vh;

	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	body.is-open #header{
		transform : translateX(0);
	}
}
/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/
@media screen and (max-width: 768px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open [data-aos^=fade]{
		opacity : 1!important;
	}
	@media screen and (max-width: 768px){
		body.is-open #nav{
			max-height : 100vh;
		}
	}
	@media screen and (max-width: 768px){
		body.is-open #drawerPanel{
			position : fixed;
			z-index : -1;
			width : 100%;
		}
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
	@media (--spIE){
		body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
			transform : translateY( 10px ) scale(0);
		}
		body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
			transform : translateY( -10px ) scale(0);
		}
	}
	#menuBtn{
		z-index : 11;
		position : fixed;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(4){
		bottom : 0;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open [data-aos^=fade]{
		opacity : 1!important;
	}
	@media screen and (max-width: 768px){
		body.is-open #nav{
			max-height : 100vh;
		}
	}
	@media screen and (max-width: 768px){
		body.is-open #drawerPanel{
			position : fixed;
			z-index : -1;
			width : 100%;
		}
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
	@media (--spIE){
		body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
			transform : translateY( 10px ) scale(0);
		}
		body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
			transform : translateY( -10px ) scale(0);
		}
	}
	#menuBtn{
		z-index : 11;
		position : fixed;
	}
	#menuBtn span{
		font-size : 0;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
	}
	#menuBtn span span{
		display : block;
		position : absolute;
		left : 0;
		transition : all .4s;
		width : 100%;
	}
	#menuBtn span span:nth-of-type(1){
		top : 0;
	}
	#menuBtn span span:nth-of-type(4){
		bottom : 0;
	}
}
#menuBtn{
	z-index : 11;
	position : fixed;
}
#menuBtn span{
	font-size : 0;
}
#menuBtn > span:nth-of-type(1){
	width : 100%;
	height : 100%;
	position : relative;
	display : block;
}
#menuBtn span span{
	display : block;
	position : absolute;
	left : 0;
	transition : all .4s;
	width : 100%;
}
#menuBtn span span:nth-of-type(1){
	top : 0;
}
#menuBtn span span:nth-of-type(4){
	bottom : 0;
}
@media screen and (max-width: 768px){
	#menuBtn{
		background-color : #fff;
		left : calc( 16 * 100% / 768 );
		top : calc( 20 * 100vw / 768 );
		width : calc( 84 * 100% / 768 );
		height : calc( 84 * 100vw / 768 );
		padding-top : calc( 19 * 100vw / 768 );
		padding-bottom : calc( 19 * 100vw / 768 );
		padding-left : calc( 7 * 100% / 768 );
		padding-right : calc( 7 * 100% / 768 );
	}
	#menuBtn span span{
		background : var(--menuBtn);
		height : calc( 6 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 20 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#menuBtn{
		position : fixed;
		background-color : #fff;
		left : calc( 16 * 100% / 768 );
		top : calc( 20 * 100vw / 768 );
		width : calc( 84 * 100% / 768 );
		height : calc( 84 * 100vw / 768 );
		padding-top : calc( 19 * 100vw / 768 );
		padding-bottom : calc( 19 * 100vw / 768 );
		padding-left : calc( 7 * 100% / 768 );
		padding-right : calc( 7 * 100% / 768 );
	}
	#menuBtn span span{
		background : var(--menuBtn);
		height : calc( 6 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 20 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px){
	#menuBtn{
		display : none;
	}
}
/*--------------------------------------------
FIXED LINK
---------------------------------------------*/
#fixedLink{
	z-index : 11;
	position : fixed;
}
#fixedLink span{
	font-weight : normal;
	font-size : small;
	margin-left : .5em;
}
@media screen and (max-width: 768px){
	#fixedLink{
		top : calc( 20 * 100vw / 768 );
		right : calc( 28 * 100% / 768 );
		width : 100%;
		max-width : calc( 84 * 100% / 768 );
		height : calc( 84 * 100vw / 768 );
		backface-visibility : hidden;
		will-change : max-width;
		transition : max-width .3s ease-in;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#fixedLink{
		top : calc( 10 * 100vw / 768 );
		right : calc( 14 * 100% / 768 );
		width : calc( 234 * 100% / 768 );
		height : calc( 50 * 100vw / 768 );
		backface-visibility : hidden;
		will-change : right;
		transition : right .3s ease-in;
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#fixedLink{
		top : calc( 10 * 100vw / 1280 );
		right : calc( 14 * 100% / 1280 );
		width : calc( 234 * 100% / 1280 );
		height : calc( 50 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#fixedLink{
		top : 10px;
		right : 14px;
		width : 234px;
		height : 50px;
	}
}
@media screen and (max-width: 768px){
	body.is-open #fixedLink{
		max-width : calc( 300 * 100% / 768 );
		height : calc( 84 * 100vw / 768 );
	}
	body.is-open #fixedLink br{
		display : none;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	body.is-open #fixedLink{
		right : calc( 214 * 100% / 768 );
	}
}
/*--------------------------------------------
NAV
---------------------------------------------*/

@media screen and (max-width: 768px){
	#nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		background-color : var(--drawer);
		height : 100vh;
		top : 0;
		color : #fff;
	}
	#nav a{
		color : #fff;
	}
	#nav .scroll{
		padding-left : calc( 34 * 100% / 768 );
		padding-right : calc( 34 * 100% / 768 );
		padding-top : calc( 150 * 100vw / 768 );
		padding-bottom : calc( 58 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#nav{
		flex-grow : 1;
	}
	#nav .scroll{
		display : flex;
		flex-direction : column;
		height : 100%;
		width : 100%;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#nav{
		padding-bottom : calc( 16 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#nav{
		padding-bottom : calc( 16 * 100vw / 1280 );
		height : calc( 100vh - var(--logoHeightPC) );
		padding-left : calc( 10 * 100vw / 1280 );
		padding-right : calc( 10 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#nav{
		padding-bottom : 16px;
		height : calc( 100vh - var(--logoHeightLPC) );
	}
}
/*--------------------------------------------
NAV TEL
---------------------------------------------*/
#nav-tel{
	display : none;
}
@media screen and (max-width: 768px){
	#nav-tel{
		position : fixed;
		top : calc( 20 * 100vw / 768 );
		width : calc( 200 * 100% / 768 );
		height : calc( 84 * 100vw / 768 );
		left : calc( 232 * 100% / 768 );
		backface-visibility : hidden;
		will-change : display;
	}
}
@media screen and (max-width: 768px){
	body.is-open #nav-tel{
		display : flex;
	}
}
/*--------------------------------------------
NAV GLOBAL
---------------------------------------------*/
#nav-global a{
	display : block;
    font-weight: 500;
    font-family: var(--fontMin);
}

@media screen and (max-width: 768px){
	#nav-global a{
		letter-spacing : .1em;
		padding-top : calc( 20 * 100vw / 768 );
		padding-bottom : calc( 20 * 100vw / 768 );
		padding-left : calc( 20 * 100vw / 768 );
		padding-right : calc( 20 * 100vw / 768 );
		font-size : calc( 40 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#nav-global{
		border-top : 1px solid var(--border);
		flex-grow : 1;
		overflow-y : auto;
		scrollbar-width : thin;
	}
	#nav-global::-webkit-scrollbar-track{
		background : var(--track);
	}
	#nav-global::-webkit-scrollbar-thumb{
		background : var(--thumb);
	}
	#nav-global::-webkit-scrollbar-thumb:hover{
		background : var(--thumbHover);
	}
	#nav-global a{
		letter-spacing : .2em;
        width: calc(100% - 1em);
	}
        #nav-global a::before{
            content: "»";
            color: #C6A530;
        }
	#nav-global a:hover{
        animation: anim 1s;
	}
    @keyframes anim {
  0% {
  transform: translateX(0px);
  }

  100% {
  transform: translateX(.5em);
  }
}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#nav-global{
		padding-top : calc( 20 * 100vw / 768 );
		padding-bottom : calc( 20 * 100vw / 768 );
	}
	#nav-global::-webkit-scrollbar{
		width : calc( 10 * 100vw / 768 );
	}
	#nav-global li {
	}
	#nav-global a{
		font-size : calc( 14 * 100vw / 768 );
        padding: 7px 0 ;
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#nav-global{
		padding-top : calc( 20 * 100vw / 1280 );
		padding-bottom : calc( 20 * 100vw / 1280 );
	}
	#nav-global::-webkit-scrollbar{
		width : calc( 10 * 100vw / 1280 );
	}
	#nav-global li{
        
	}
	#nav-global a{
		font-size : 14px;
        padding: 7px 0 ;
        letter-spacing:.1em;
	}
}
@media print,screen and (min-width: 1380px){
	#nav-global{
		padding-bottom : 20px;
	}
	#nav-global::-webkit-scrollbar{
		width : 10px;
	}

	#nav-global a{
		font-size : 18px;
		padding-left : 13px;
		padding-right : 13px;
        color: #231815;
        padding-top: 10px;
        padding-bottom: 10px;
	}
}
/*--------------------------------------------
NAV ABOUT
---------------------------------------------*/
#nav-about .flex{
	display : flex;
}
#nav-about h1{
	margin-bottom : .8em;
}
#nav-about h1 span{
	margin-left : .5em;
	font-size : smaller;
}
@media screen and (max-width: 768px){
	#nav-about{
		margin-top : calc( 74 * 100vw / 768 );
		border-top : calc( 3 * 100vw / 768 ) solid #fff;
		padding-top : calc( ( 53 - 7 ) * 100vw / 768 );
		padding-left : calc( 20 * 100vw / 768 );
		padding-right : calc( 20 * 100vw / 768 );
	}
	#nav-about > div + div{
		margin-top : calc( 40 * 100vw / 768 );
	}
	#nav-about dt , #nav-about dd , #nav-about p{
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.54;
		letter-spacing : .1em;
		font-size : calc( 24 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#nav-about{
		flex-shrink : 0;
		border-top : 1px solid var(--border);
		font-size : 14px;
	}
	#nav-about dt , #nav-about dd , #nav-about p{
		line-height : 1.43;
		font-size : 14px;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#nav-about{
		padding-top : calc( ( 15 - 3 ) * 100vw / 768 );
		font-size : 14px;
	}
	#nav-about > div + div{
		margin-top : calc( 5 * 100vw / 768 );
	}
	#nav-about dt , #nav-about dd , #nav-about p{
		font-size : 14px;
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#nav-about{
		padding-top : calc( ( 15 - 3 ) * 100vw / 1280 );
		font-size : 14px;
	}
	#nav-about > div + div{
		margin-top : calc( 5 * 100vw / 1280 );
	}
	#nav-about dt , #nav-about dd , #nav-about p{
		font-size : 14px;
	}
}
@media print,screen and (min-width: 1380px){
	#nav-about{
		padding-top : calc( 18px - 3px );
		padding-left : 13px;
		padding-right : 13px;
		font-size : 14px;
	}
	#nav-about > div + div{
		margin-top : calc( 15px - 3px );
	}
	#nav-about dt , #nav-about dd , #nav-about p{
		font-size : 14px;
	}
}
/*--------------------------------------------
NAV CONTACTS
---------------------------------------------*/
#nav-contacts .link01{
	flex-wrap : wrap;
	display : flex;
}
#nav-contacts .link01 span{
	display : block;
	text-align : center;
	width : 100%;
	padding : 0;
	font-size : small;
	font-weight : normal;
	line-height : 1.5;
}
@media print,screen and (min-width: 769px){
	#nav-contacts{
		flex-shrink : 0;
	}
	#nav-contacts .link01{
	}
}
@media screen and (max-width: 768px){
	#nav-contacts{
		padding-left : calc( 20 * 100% / 768 );
		padding-right : calc( 20 * 100% / 768 );
		margin-top : calc( ( 70 - 7 ) * 100vw / 768 );
	}
	#nav-contacts .tel{
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		width : 100%;
		height : calc( 134 * 100vw / 768 );
		letter-spacing : .1em;
		border : calc( 3 * 100vw / 768 ) solid #fff;
		font-size : calc( 50 * 100vw / 768 );
	}
	#nav-contacts .link01{
		font-size : calc( 32 * 100vw / 768 );
		letter-spacing : .1em;
		margin-top : calc( 20 * 100vw / 768 );
		padding : calc( 20 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#nav-contacts .link01{
        margin-right: 10px;
        margin-left: 10px;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	#nav-contacts{
		padding-top : calc( ( 13 - 3 ) * 100vw / 768 );
	}
	#nav-contacts .tel{
		font-size : calc( 14 * 100vw / 768 );
	}
	#nav-contacts .link01{
		margin-top : calc( 13 * 100vw / 768 );
		padding : calc( 5 * 100vw / 768 );
		line-height : 1;
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#nav-contacts{
		padding-top : calc( ( 13 - 3 ) * 100vw / 1280 );
	}
	#nav-contacts .tel{
		font-size : calc( 14 * 100vw / 1280 );
	}
	#nav-contacts .link01{
		margin-top : calc( 13 * 100vw / 1280 );
		padding : 10px 0;
	}
}
@media print,screen and (min-width: 1380px){
	#nav-contacts{
		padding-top : calc( 18px - 3px );
	}
	#nav-contacts .tel{
		font-size : 22px;
		padding-left : 13px;
		padding-right : 13px;
	}
	#nav-contacts .link01{
		margin-top : 20px;
		padding : 15px 0;
	}
}
/*--------------------------------------------
NAV SNS
---------------------------------------------*/
#nav-sns{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
	align-items : center;
}
@media screen and (max-width: 768px){
	#nav-sns{
		margin-top : calc( 36 * 100vw / 768 );
	}
	#nav-sns li + li{
		margin-left : calc( 25 * 100% / 768 );
	}
	#nav-sns img{
		height : calc( 100 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#nav-sns{
		padding-top : calc( 7 * 100vw / 768 );
	}
	#nav-sns li + li{
		margin-left : calc( 5 * 100vw / 768 );
	}
	#nav-sns img{
		height : calc( 30 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#nav-sns{
		padding-top : calc( 7 * 100vw / 1280 );
	}
	#nav-sns li + li{
		margin-left : calc( 5 * 100vw / 1280 );
	}
	#nav-sns img{
		height : calc( 30 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#nav-sns{
		padding-top : 18px;
	}
	#nav-sns li + li{
		margin-left : 10px;
	}
	#nav-sns img{
		height : 40px;
	}
}
/*--------------------------------------------
CLOSE BUTTON
---------------------------------------------*/
@media screen and (max-width: 768px){
	#closeBtn{
		text-align : center;
		width : calc( 82 * 100% / 700 );
		margin-top : calc( 72 * 100vw / 768 );
		margin-left : auto;
		margin-right : auto;
		display : block;
	}
	#closeBtn img{
		width : 100%;
		height : auto;
	}
}
/*--------------------------------------------
MAIN
---------------------------------------------*/
@media screen and (max-width: 768px){
	#main .wrap{
		padding-left : calc( 16 * 100% / 768 );
		padding-right : calc( 16 * 100% / 768 );
	}
	#main .wrap , #main .wrap-fluid{
		padding-top : calc( 90 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#main .wrap{
		padding-left : 10px;
		padding-right : 10px;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	#main .wrap{
		padding-left : calc( 14 * 100% / 768 );
		padding-right : calc( 14 * 100% / 768 );
	}
	#main .wrap , #main .wrap-fluid{
		padding-top : calc( 68 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px){
	#main{
		flex-shrink : 0;
	}
	#main .wrap{
		max-width : 1080px;
		margin-left : auto;
		margin-right : auto;
	}
	#main .wrap-inner{
		max-width : 800px;
		margin-left : auto;
		margin-right : auto;
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#main{
		width : calc( 100% - ( 200 * 100% / 1280 ) );
	}
	#main .wrap , #main .wrap-fluid{
		padding-top : calc( 68 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#main{
		width : calc( 100% - 300px );
	}
	#main .wrap , #main .wrap-fluid{
		padding-top : 100px;
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer{
	background-color : var(--footerbg);
	color : #fff;
}
#footer .copyright{
	line-height : 1.2;
	letter-spacing : .1em;
}
@media screen and (max-width: 768px){
	#footer .wrap{
		padding-top : calc( ( 42 - 2 ) * 100vw / 768 );
		padding-bottom : calc( ( 90 - 2 ) * 100vw / 768 );
		text-align : center;
	}
	#footer .copyright{
		font-size : calc( 20 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#footer .wrap{
		padding-top : calc( 50 * 100vw / 768 );
		padding-bottom : calc( 50 * 100vw / 768 );
		text-align : center;
	}
	#footer .logo img{
		height : calc( 32 * 100vw / 768 );
	}
	#footer .copyright{
		font-size : calc( 13 * 100vw / 768 );
		margin-top : calc( ( 36 * 100vw / 768 ) - .1em );
	}
}
@media print,screen and (min-width: 1280px){
	#footer{
		width : 100%;
	}
	#footer .wrap{
		text-align : right;
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#footer .wrap{
		padding-left : calc( 30 * 100% / 1280 );
		padding-right : calc( 30 * 100% / 1280 );
		padding-top : calc( 50 * 100vw / 1280 );
		padding-bottom : calc( 50 * 100vw / 1280 );
	}
	#footer .logo img{
		height : calc( 32 * 100vw / 1280 );
	}
	#footer .copyright{
		font-size : calc( 13 * 100vw / 1280 );
		margin-top : calc( ( 36 * 100vw / 1280 ) - .1em );
	}
}
@media print,screen and (min-width: 1380px){
	#footer .wrap{
		padding-left : 30px;
		padding-right : 30px;
		padding-top : 50px;
		padding-bottom : 50px;
	}
	#footer .logo img{
		height : 32px;
	}
	#footer .copyright{
		font-size : 13px;
		margin-top : calc( 36px - .1em );
	}
}
#head-banner{
	display : flex;
	align-items : flex-end ;
	justify-content : flex-start;
}
#head-banner h1{
        font-family: 'Dancing Script', cursive
}
@media screen and (max-width: 768px){
	#head-banner{
		height : 35vh;
		max-height : calc( 400 * 100vw / 768 );
		margin-bottom : 1em;
        background: url("../images/ui/title_back01.png");
        background-size: cover;
        background-position: right center ;
	}
	#head-banner h1{
		font-size : calc( 80 * 100vw / 768 );
		padding : 0 0 calc( 40 * 100vw / 768 ) calc( 40 * 100vw / 768 );;
	}
}
@media print,screen and (min-width: 769px){
	#head-banner{
		height : 35vh;
		max-height : 350px;
		margin-bottom : 1em;
        background: url("../images/ui/title_back01.png");
        background-size: cover;
	}
	#head-banner h1{
		font-size : 60px;
		padding : 0 0 60px 80px;
	}
}
/*--------------------------------------------
blog
---------------------------------------------*/
.post-meta{
	display : block;
	margin-bottom : 15px;
}
.post-meta li{
	margin-right : 1em;
	display : inline-block;
}
.post-title{
	font-size : 2em;
	border-bottom : 1px solid #ccc;
	padding-bottom : .3em;
	margin-bottom : .5em;
	line-height : 1.5;
}
@media screen and (max-width: 768px){
	.post-title{
		border-bottom : 1px solid #ccc;
		padding-bottom : .3em;
		margin-bottom : .5em;
		line-height : 1.3;
	}
}
.comment{
	margin-bottom : 1em;
	border-bottom : 1px solid #ccc;
	padding-bottom : 1em;
    line-height: 1.8;
}
.comment h1{
	font-size : 2em;
}
.comment h2{
	font-size : 1.8em;
}
.comment h3{
	font-size : 1.6em;
}
.comment h4 , .comment h5{
	font-size : 1.4em;
}
.sab{
	display : flex;
	flex-wrap : wrap;
	margin-top : 4em;
}
	#hairgallery .sab{
		margin-top : 0em;
	}
.sab section{
	width : 100%;
	margin-right : 10px;
}
.sab section h3{
	border-bottom : 1px solid #ccc;
	padding-bottom : .3em;
	margin-bottom : .5em;
}
.sab section.category ul li{
	margin-bottom : .5em;
	line-height : 1.3;
	flex-wrap : wrap;
    width: auto;
    display: inline-block;
    min-width: 12em;
}
.sab section.category{
    margin-bottom: 3em;
}
.sab section.category ul li ul{
	margin-left : 1em;
}
.sab section.category ul li i{
	width : 1em;
}
.sab section.category ul li a{
	width : calc(100% - 1em);
}
.sab section.tag ul li{
	display : inline-block;
	margin-right : 1em;
	margin-bottom : .3em;
}
@media screen and (max-width: 768px){
	.sab{
		display : block;
		margin-top : 4em;
	}
	.sab section{
		width : 100%;
		margin-right : 0;
		margin-bottom : 2em;
	}
    .sab section.category ul li{
        min-width: calc(50% - 2em);
	}
    .sab section.tag ul li{
        min-width: calc(28%) !important
	}
    .sab section.category ul li a{
		font-size: calc( 26 * 100vw / 750 );
	}
	.archive-title {
		font-size: calc( 42 * 100vw / 750 );
		margin-bottom: 1em;
	}
}
@media print,screen and (min-width: 769px){
    .sab section.tag ul li{
        margin-right : .5em;
        margin-bottom : .3em;
        width: auto;
    }
	.archive-title {
		font-size: 16px;
		margin-bottom: 2em;
		border-bottom: 1px solid #ccc;
		padding-bottom: .5em;
	}
}