@charset "UTF-8";
/* SARAYA HEADER */
#saraya-header {
	background: #efefef none repeat scroll 0 0;
	width: 100%;
	line-height: 1.2;
	font-size: 13.5px;
	position: fixed;
	top: 0px;
	z-index: 2;
}
#saraya-header::after {
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}
#saraya-header ul {
	margin: 0 auto;
	padding: 0 30px;
	width: 100%;
}
#saraya-header ul::after {
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}
#saraya-header ul li {
	float: right;
	list-style: outside none none;
	margin-left: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
}
#saraya-header ul li a:link, #saraya-header ul li a:visited {
	color: #666;
	text-decoration: none;
}
#saraya-header ul li a:hover {
	text-decoration: underline;
}
#saraya-header ul li#saraya-header-sarayaLogo {
	line-height: 0;
	margin-right: 5px;
	padding-bottom: 0;
	padding-top: 6px;
}
#saraya-header img {
	border: medium none;
	font-size: 0;
	vertical-align: bottom;
}
@media screen and (max-width: 767px) {
#saraya-header {
	display: none;
}
}

/* font size */
html{
    font-size: 62.5%;
}
body{
    font-size:1.6rem;
    line-height: 2;
}
h1,.h1 {
    font-size: 36px;
    font-size: calc(2rem + ((1vw - 0.767rem) * 3.6952));/* 20px~36pxで可変*/
    line-height: 1.3;
}
h2,.h2 {
    font-size: 26px;
    font-size: calc(1.8rem + ((1vw - 0.767rem) * 1.8476));/* 18px~26pxで可変*/
    line-height: 1.3;
}
h3,.h3 {
    font-size: 24px;
    font-size: calc(1.6rem + ((1vw - 0.767rem) * 1.8476));/* 16px~24pxで可変*/
    line-height: 1.8;
}
h4,.h4 {
    font-size: 20px;
    font-size: calc(1.7rem + ((1vw - 0.767rem) * 0.6928));/* 17px~20pxで可変*/
    line-height: 1.3;
}
p{
    font-size: 16px;
    font-size: calc(1.4rem + ((1vw - 0.767rem) * 0.4619));/* 14px~16pxで可変*/
}
@media (min-width: 1200px){
    h1 {
        font-size: 3.6rem;
    }
    h2 {
        font-size: 2.6rem;
    }
    h3 {
        font-size: 2.4rem;
	}
    h4 {
        font-size: 2.0rem;
    }
	p{		
        font-size: 1.6rem;
	}
}
@media screen and (max-width: 767px){
    body{
    line-height: 2;
    }
    h1{
        font-size: 2.0rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    h3 {
        font-size: 1.6rem;
    }
    h4 {
        font-size: 1.7rem;
    }
	p{		
        font-size: 1.4rem;
	}
}
@media screen and (max-width: 320px){
	body{
		font-size: 80%;
	}	
}
/* PC SP　切り替え */
.pc { display: block !important; }
.sp { display: none !important; }
 
@media only screen and (max-width: 767px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/* margin */
.mT1 {
	margin-top: 1vw !important;
}
.mT2 {
	margin-top: 2vw !important;
}
.mT3 {
	margin-top: 4vw !important;
}
.mT4 {
	margin-top: 8vw !important;
}
.mT5 {
	margin-top: 12vw !important;
}
.mT6 {
	margin-top: 16vw !important;
}
.mT7 {
	margin-top: 20vw !important;
}
.mR1 {
	margin-right: 1vw !important;
}
.mR2 {
	margin-right: 2vw !important;
}
.mR3 {
	margin-right: 4vw !important;
}
.mR4 {
	margin-right: 8vw !important;
}
.mR5 {
	margin-right: 12vw !important;
}
.mL1 {
	margin-left: 1vw !important;
}
.mL2 {
	margin-left: 2vw !important;
}
.mL3 {
	margin-left: 4vw !important;
}
.mL4 {
	margin-left: 8vw !important;
}
.mL5 {
	margin-left: 12vw !important;
}
.mB1 {
	margin-bottom: 1vw !important;
}
.mB2 {
	margin-bottom: 2vw !important;
}
.mB3 {
	margin-bottom: 4vw !important;
}
.mB4 {
	margin-bottom: 8vw !important;
}
.mB5 {
	margin-bottom: 12vw !important;
}
.mB6 {
	margin-bottom: 16vw !important;
}
.mB7 {
	margin-bottom: 20vw !important;
}
/* padding */
.pT1 {
	padding-top: 1vw !important;
}
.pT2 {
	padding-top: 2vw !important;
}
.pT3 {
	padding-top: 4vw !important;
}
.pT4 {
	padding-top: 8vw !important;
}
.pT5 {
	padding-top: 12vw !important;
}
.pT6 {
	padding-top: 16vw !important;
}
.pT7 {
	padding-top: 20vw !important;
}
.pR1 {
	padding-right: 1vw !important;
}
.pR2 {
	padding-right: 2vw !important;
}
.pR3 {
	padding-right: 4vw !important;
}
.pR4 {
	padding-right: 8vw !important;
}
.pR5 {
	padding-right: 12vw !important;
}
.pL1 {
	padding-left: 1vw !important;
}
.pL2 {
	padding-left: 2vw !important;
}
.pL3 {
	padding-left: 4vw !important;
}
.pL4 {
	padding-left: 8vw !important;
}
.pL5 {
	padding-left: 12vw !important;
}
.pB1 {
	padding-bottom: 1vw !important;
}
.pB2 {
	padding-bottom: 2vw !important;
}
.pB3 {
	padding-bottom: 4vw !important;
}
.pB4 {
	padding-bottom: 8vw !important;
}
.pB5 {
	padding-bottom: 12vw !important;
}
.pB6 {
	padding-bottom: 16vw !important;
}
.pB7 {
	padding-bottom: 20vw !important;
}
.pB8 {
	padding-bottom: 24vw !important;
}

@media only screen and (max-width: 767px) {
/* margin */
.mT1 {
	margin-top: 3vw !important;
}
.mT2 {
	margin-top: 6vw !important;
}
.mT3 {
	margin-top: 9vw !important;
}
.mT4 {
	margin-top: 12vw !important;
}
.mT5 {
	margin-top: 15vw !important;
}
.mT6 {
	margin-top: 18vw !important;
}
.mT7 {
	margin-top: 21vw !important;
}
.mR1 {
	margin-right: 3vw !important;
}
.mR2 {
	margin-right: 6vw !important;
}
.mR3 {
	margin-right: 9vw !important;
}
.mR4 {
	margin-right: 12vw !important;
}
.mR5 {
	margin-right: 15vw !important;
}
.mL1 {
	margin-left: 3vw !important;
}
.mL2 {
	margin-left: 6vw !important;
}
.mL3 {
	margin-left: 9vw !important;
}
.mL4 {
	margin-left: 12vw !important;
}
.mL5 {
	margin-left: 15vw !important;
}
.mB1 {
	margin-bottom: 3vw !important;
}
.mB2 {
	margin-bottom: 6vw !important;
}
.mB3 {
	margin-bottom: 9vw !important;
}
.mB4 {
	margin-bottom: 12vw !important;
}
.mB5 {
	margin-bottom: 15vw !important;
}
.mB6 {
	margin-bottom: 18vw !important;
}
.mB7 {
	margin-bottom: 21vw !important;
}
	
/* padding */
.pT1 {
	padding-top: 3vw !important;
}
.pT2 {
	padding-top: 6vw !important;
}
.pT3 {
	padding-top: 9vw !important;
}
.pT4 {
	padding-top: 12vw !important;
}
.pT5 {
	padding-top: 15vw !important;
}
.pT6 {
	padding-top: 18vw !important;
}
.pT7 {
	padding-top: 21vw !important;
}
.pR1 {
	padding-right: 3vw !important;
}
.pR2 {
	padding-right: 6vw !important;
}
.pR3 {
	padding-right: 9vw !important;
}
.pR4 {
	padding-right: 12vw !important;
}
.pR5 {
	padding-right: 15vw !important;
}
.pL1 {
	padding-left: 3vw !important;
}
.pL2 {
	padding-left: 6vw !important;
}
.pL3 {
	padding-left: 9vw !important;
}
.pL4 {
	padding-left: 12vw !important;
}
.pL5 {
	padding-left: 15vw !important;
}
.pB1 {
	padding-bottom: 3vw !important;
}
.pB2 {
	padding-bottom: 6vw !important;
}
.pB3 {
	padding-bottom: 9vw !important;
}
.pB4 {
	padding-bottom: 12vw !important;
}
.pB5 {
	padding-bottom: 15vw !important;
}
.pB6 {
	padding-bottom: 18vw !important;
}
.pB7 {
	padding-bottom: 21vw !important;
}
}

/* align */
.center {
	text-align: center !important;
	margin-right: auto !important;
	margin-left: auto !important;
}
.right {
	text-align: right !important;
	margin-left: auto;
	margin-right: 0px;
}
.left {
	text-align: left!important;
	margin-left: 0px;
	margin-right: auto;
}
.justify {
	text-align: justify!important;
	text-justify: inter-ideograph;
}

/* flex */
.flex_pc_only {
	display: flex;
	align-items: flex-start;
}
.flex{
display:contents; 
}
.flex_w_space-between{	
	justify-content: space-between;
}
.flex_w_wrap{
	flex-wrap : wrap;
}
.flex_w_center {
	justify-content: center!important;
}
.flex_h_center {
	align-items: center!important;
}
.flex_right{
	justify-content: flex-end!important;
}
.flex_left{
	justify-content: flex-start!important;
}
@media screen and (max-width: 767px) {
.flex_pc_only {
	display: block;
	height: 100%;
	text-align: center;
}
.flex{
	display:flex; 
  align-items: flex-start;
}
}

/* youtube */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}