@charset "utf-8";
/* ============================================================
#### header auto-hide（スクロール時自動収納）
.site-header{
	position : fixed;
	top : 0;
	width : 100%;
	display : block;
	z-index : 1000;
	transition : transform 0.5s ease;
}
.site-header.hide{
	transform : translateY(-100%);
}
============================================================ */
header.site-header {
	/* 1366pxの時に335pxになる比率は 約24.524vw */
	/* clamp(最小幅, 可変比率, 最大幅) */
	width : clamp(200px, (335 / 1366) * 100vw, 335px);
}
.header_inner{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.site-branding{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : clamp(15px, (30 / 1366) * 100vw, 30px);
}
.site-branding a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.site-branding a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/**** floating ****/
.floating{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.floating ul{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.floating ul li{
	position : relative;
	display : list-item;
	width : 50%;
	height : auto;
	text-align : center;
}
.floating ul li:first-child{
	width : 100%;
}
.floating ul li a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	overflow : hidden;
}
.floating ul li a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	transition : 0.8s;
}
.floating ul li a:hover img {
	transform : scale(1.1);
	transition : 0.8s;
}
/**** sns-area ****/
.sns-area{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : clamp(10px, (15 / 1366) * 100vw, 15px) 0;
}
.sns-area p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : clamp(13px, (15 / 1366) * 100vw, 15px);
	font-weight : bold;
}
.sns-area p span{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : clamp(10px, (13 / 1366) * 100vw, 13px);
	font-weight : normal;
}
.sns-area a{
	position : relative;
	display : block;
	width : clamp(180px, (230 / 1366) * 100vw, 230px);
	height : auto;
	margin : 0 auto;
}
.sns-area figure{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.sns-area img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/***** side-slider *****/
.side-slider{
	position : relative;
	display : block;
	width : 70%;
	height : auto;
	aspect-ratio : 3 /2;
	margin : 0 auto;
}
.side-slider .metaslider .flexslider .slides > li img{
	padding : clamp(5px, (10 / 1366) * 100vw, 10px);
	border-radius : 0;
}
/***** call-nav *****/
.call-nav{
	position : fixed;
	display : block;
	width : 277px;
	height : 222px;
	top : 10px;
	right : 10px;
	z-index : 1000;
}
.call-nav a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.call-nav img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}



/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1400px
# ================================================================= */
@media screen and (max-width: 1400px){
header.site-header{
	width :  300px;
}
.site-branding{
	padding : 30px 0;
}
.site-branding a{
	width  : 250px;
	margin : 0;
}

.call-nav{
	width : calc(277px * 0.9);
	height : calc(222px * 0.9);
}




}/*** 1400px ***/
/* # =================================================================
#### 1240px
# ================================================================= */
@media screen and (max-width: 1240px){
header.site-header{
	width : 100%;
	height : auto;
}
.site-branding{
	position : sticky;
	background-color : #FDE4BD;
	padding : 30px 15px;
	margin-bottom : 0;
	z-index : 100;
}
.site-branding a{
	width : 250px;
}
.floating,
.sns-area,
.side-slider{
	display : none;
}

.call-nav{
	width : calc(277px * 0.8);
	height : calc(222px * 0.8);
}










}/*** 1240px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){
.call-nav{
	width : calc(277px * 0.7);
	height : calc(222px * 0.7);
}
}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.call-nav{
	width : calc(277px * 0.6);
	height : calc(222px * 0.6);
}
}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.site-branding{
	padding : 20px 15px;
}
.call-nav{
	width : calc(277px * 0.5);
	height : calc(222px * 0.5);
}








}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){
.site-branding{
	padding : 15px 15px;
}
.site-branding a{
	width : 200px;
}
.call-nav{
	width : calc(277px * 0.55);
	height : calc(222px * 0.55);
	top : 5px;
	right : 5px;
}




}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){
.call-nav{
	width : calc(277px * 0.4);
	height : calc(222px * 0.4);
}
}/*** 320px ***/