@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*** noto sans japanese 
font-family: 'Noto Sans Japanese',   sans-serif;
***/
/*** リュウミン
font-family:"リュウミン R-KL","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "YuMincho", "HGS明朝E",  serif;
***/
body {
	font-family: '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
font-weight: 500; /*windows対策*/
	text-align: center;
	-webkit-text-size-adjust: 100%;
	color:#333;
}
*{
	margin:0;
	padding:0;
-moz-box-sizing: border-box;
  box-sizing: border-box;
}
img{
	vertical-align: bottom;
}
a img {
	border:none;
}
a {
	color:#333;
}
a:hover{
	text-decoration:underline;
	color:#333;
}

.clearfix:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
    }  
* html .clearfix             { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */  
li {
	list-style:none;
}
i {
	padding:0 5px;
}
.pc {
	
}
.sp {
	display:none;
}
img{
max-width: 100%;

}
section:after,article:after,dl:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
    }  
* html section   ,* html article,* html dl          { zoom: 1; } /* IE6 */  
*:first-child+html section,*:first-child+html article,*:first-child+html dl { zoom: 1; } /* IE7 */  

@media only screen and (max-width:768px){
img{
	border: 0;
max-width: 100%;
    height: auto;
    width /***/:auto;　/*IE8のみ適用*/
}
 

.pc {
	display:none;
}
.sp {
	display:block;
}
}
/*PC改行加える*/
.br-pc{
	display:inherit;
}
 /*PC改行無効*/
.br_sp{
	display:none;
}
.br_ssp{
	display:none;
}
@media only screen and (max-width:768px){
	/*SP改行無効*/
.br-pc{
	display:none;
}
/*SP改行加える*/
.br_sp { display:block; }
.br_ssp{
	display:none; 
}
}
@media only screen and (max-width:480px){
	/*SP改行無効*/
.br-pc{
	display:none;
}
/*SP改行加える*/
.br_sp { display:block; }
.br_ssp{
	display:block; 
}
}
/************************************

animation

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


/*ズームイン表示*/
.list-mv01{
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	transition: .8s;
}
.mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

/*フェードイン表示*/
.list-mv02{
	opacity: 0;
	transition: .8s;
}
.list-mv02:not(:target) {
opacity: 1\9; /*IE9対策*/
}
.mv02{
	opacity: 1.0;
}

/*回転*/
.list-mv03{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transition: .8s;
}
.mv03{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}

/*3D回転*/
.list-mv04{
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	transition: .8s;
}
.mv04{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

/*上移動*/
.list-mv05{
	transform: translate(0,40px); 
	-webkit-transform: translate(0,40px); 
	transition: .8s;
}
.mv05{
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/*移動＋フェードイン表示*/
.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
	transition: .8s;
}
.list-mv07:not(:target) {
opacity: 1\9; /*IE9対策*/
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

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

wrapper

************************************/
.wrapper {
	max-width:1050px;/*base*/
	width:90%;
	margin:auto;
}
.wrapper:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
    }  
* html .wrapper             { zoom: 1; } /* IE6 */  
*:first-child+html .wrapper { zoom: 1; } /* IE7 */  

@media only screen and (max-width:768px){
	.wrapper {
	width:100%;
	margin:0 auto;
}

}
/************************************

common style

************************************/
h2 {
font-family:"リュウミン R-KL","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "YuMincho", "HGS明朝E",  serif;
font-weight:normal;
font-size:130%;
}
/************************************

common bt

************************************/
.bt a {
	background:#3f9c49;
	color:#fff;
	text-decoration:none;
	display:inline-block;
	padding:15px 100px;
	position:relative;
	/*全体角丸*/
border-radius: 2em; /* CSS3草案 */ 
-webkit-border-radius: 2em; /* Safari,Google Chrome用 */ 
-moz-border-radius: 2em; /* Firefox用 */ 
transition:1s;
}
.bt a:before{
  position: absolute;
top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
  left: 30px;
  color: #fff;
  font: 14px 'FontAwesome';
  content: "\f105";
}
.bt a:hover {
	opacity:.5;
}
@media only screen and (max-width:768px){
	.bt a {
	display:block;
	padding:15px 0;
	text-align:center;
}
}
/************************************

SP head

************************************/
@media only screen and (max-width:768px){
#sp_header{
	padding:20px 0;
}
#sp_header h1 a {
	margin:0 auto;
}
}
/************************************

logo

************************************/
.logo a {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	background-image:url(../images/head_logo.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size:contain;
	display: block;
	height: 60px;
	width: 200px;
	transition:1s;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.logo a {
    background-image:url(../images/head_logo@2x.png);
  }
}
.logo a:hover {
	opacity:0.5;
}


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

pc header

************************************/
header {
	padding:30px 0;
}
header h1 {
	float:left;
	width:200px;
}
header nav {
	
	margin:0px 0 0 250px;
	padding-top:30px;
	text-align:left;
	font-size:90%;
	font-family: 'Noto Sans Japanese',   sans-serif;
	font-weight:300;
}
header nav ul {
	letter-spacing:-1em;
}
header nav li {
	display:inline-block;
	letter-spacing:0.05em;
	margin:0 8% 0 0;
}
header nav li a {
	color:#333;
	text-decoration:none;
	position: relative;
	display: inline-block;
	text-decoration: none;
}

header nav li a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}
header nav li a:hover{
	text-decoration:none;
}
header nav li a:hover::after {
	transform: scale(1, 1);
}
header.fixed{
	position:fixed;
	top:0;
	left:0;
	z-index:100;
	width:100%;
	background:#fff;
	padding:20px 0;
}
.slide-down {
  animation-name: slideDown;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  transform-origin: 50% 50% 0;
  animation-duration: .5s;
  top: 0 !important;
}
@keyframes slideDown {
  0% {
    top: -80px;
  }
  100% {
    top: 0;
  }
}
.slide-up {
  animation-name: slideUp;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  transform-origin: 50% 50%  0;
  animation-duration: .5s;
  top: -180px;
}
@keyframes slideUp {
  0% {
    top: 0;
  }
  100% {
    top: -80px;
  }
}

@media only screen and (max-width:1040px){
	header.pc nav li {
	margin:0 5% 0 0;
}
}
@media only screen and (max-width:840px){
	header.pc nav li {
	margin:0 3% 0 0;
}
}
/************************************

footer

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

/********  menu  *********/
footer nav {
	padding:30px 0;
	font-size:90%;
	font-family: 'Noto Sans Japanese',   sans-serif;
	font-weight:300;
}
footer nav li {
	display:inline-block;
	padding:0 20px;
}
footer nav li a {
	color:#333;
	text-decoration:none;
	position: relative;
	display: inline-block;
	text-decoration: none;
}
footer nav li a::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}
footer nav li a:hover{
	text-decoration:none;
}
footer nav li a:hover::after {
	transform: scale(1, 1);
	
}
@media only screen and (max-width:768px){
	footer nav {
		padding:20px 0;
		background:#f7f4f0;
		text-align:left;
		margin:0 0 30px;
	}
	footer nav ul {
		margin:0 8%;
	}
	footer nav li {
		display:block;
		float:left;
		width:33.3%;
		margin:0 0 10px;
		padding:0;
	}
}
/********  logo  *********/
footer h1 a {
	margin:0 auto 30px;
}
footer p {
	font-size:90%;
	line-height:180%;
}
footer .copyright {
	padding:50px;
	font-size:75%;
	letter-spacing:0.2em;
	font-family: 'Noto Sans Japanese',   sans-serif;
	font-weight:300;
}
/************************************

PAGEUP

************************************/
#pageup {
	position:fixed;
	bottom:0;
	right:0;
	width:40px;
	font-size:9px;
	z-index:100;
	padding:10px 0;
}
#pageup i {
	font-size:30px;
}
#pageup  a {
	text-decoration:none;
}
/************************************

SP_MENU

************************************/
/*!------------------------------------*\
    Right
\*!------------------------------------*/
.drawer--right .drawer-nav {
  right: -16.25rem;
  -webkit-transition: right 1.2s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: right 1.2s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0;
}

.drawer--right.drawer-open .drawer-hamburger {
  right: 16.25rem;
}
/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/
.drawer-hamburger {
  position: fixed;
  z-index: 104;
  top: 0;
  display: block;
  box-sizing: content-box;
  width: 2rem;
  color:#000;
  padding: 0;
  padding-top: 20px;
  padding-right: .75rem;
  padding-bottom: 20px;
  padding-left: .75rem;
  -webkit-transition: all 1.2s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 1.2s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  border: 0;
  outline: 0;
  background-color: #fff;
}

.drawer-hamburger:hover {
  cursor: pointer;
  background-color: transparent;
   background-color: #fff;
}

/**3本線→２本線**/
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  width: 100%;
  height: 1px;
  -webkit-transition: all 1.2s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 1.2s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #000;
}

.drawer-hamburger-icon:before
.drawer-hamburger-icon:after {
  position: absolute;
  top: 20px;
  left: 0;
  content: ' ';
}

.drawer-hamburger-icon:after {
  top: 0px;
}
.drawer-nav {
	text-align:left;
}
.drawer-nav a {
	text-decoration:none;
	color:#000;
	font-size:90%;
}
.drawer-nav h1 a {
	height: 50px;
	width:180px;
	margin:20px 8% 0;
}
.drawer-nav ul {
	padding:4% 8% ;
	
}

.drawer-nav ul li {
	padding:5px 0 5px 20px;
	position:relative;
}

.drawer-nav ul.mainmenu li:before{
  position: absolute;
top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
  left: 0px;
  color: #595757;
  font: 14px 'FontAwesome';
  content: "\f105";
}

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

beige

************************************/
.beige {
	background:#f7f4f0;
	padding:60px 0;
}


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

RAF

************************************/
#raf-pc {
	width:1500px;
	margin:0 auto;
}

#raf-sp {
	display:none;
}
@media only screen and (max-width:768px){
	#raf-pc {
	display:none;
}

#raf-sp {
	display:block;
	width:100%;
}
}