@charset "utf-8";

/* 01.RESET
--------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure,figcaption{ margin:0; padding:0; }
html { -webkit-text-size-adjust:none; }
img { border:0; vertical-align:bottom; }
li{ list-style: none; }
.br:before {
	content: "\A" ;
	white-space: pre ;
}

/* 02.FONT 
--------------------------------------------------- */
body {
	/*font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;*/
	font-family:"Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ", Meiryo, serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 22px;
	color: #333;
	letter-spacing: 0.04em;
	background: #fff;
}

.bold { font-weight:bold !important; }
.indent1em { text-indent:-1em; padding-left:1em; }

/* 03.LINK 
--------------------------------------------------- */
a { color:#5fdbd1; }
/* a:visited { color:#73ede3; } */
a:hover { 
	color:#5fdbd1; 
	-webkit-transition: .4s;
	transition: .4s;
	transform:/*rotate(-8deg)*/ scale(1.1);
}

.artist a { colosr:#00CC99}
.artist a:hover { color: #00CC99 }

/* 04.MARGIN 
--------------------------------------------------- */
.mt05 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mb05 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb60 { margin-bottom: 60px !important; }
.noMargin { margin: 0 !important; }

/* 05.CLEARFIX 
--------------------------------------------------- */
.cf { overflow:hidden; }
.cf:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .cf { zoom:1; }
*:first-child+html .cf { zoom:1; }

/* 06.IMAGE 
--------------------------------------------------- */
.img100 { width:100%; }
img { max-width:100%; height:auto; }

/* 07.ALIGN 
--------------------------------------------------- */
.floL { display:inline; float:left; }
.floR { display:inline; float:right; }
.center { text-align:center !important; }
.right { text-align:right !important; }


/* ------------------------------------------------
   header
--------------------------------------------------- */
header{ 
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	background:rgba(255,255,255,.8);
	border-bottom: solid 5px #00CC99
}

header .innar:after{content: ""; display: block; clear: both; }
header .innar{ 
	display: inline-block;
	display: block;
	max-width: 1000px;
	margin: auto;
	padding: 15px 0 10px 0;
}
header .logo{
	width: 22%;
	display: inline-block;
	float: left;
	margin-top:10px
	/*下記からテキスト用*/
/*
	text-align: center;
	margin-top: 30px;
*/
}
header .logo img {
	width: 100%;
	height: auto 
}
header .logo a{ text-decoration: none; }
header h1:hover{transform:scale(1.1);}
header .nav_pc{
	display: inline-block;
	float: right;
	width: 78%;
	margin-top:7px;
}
header .nav_pc ul{
	display: inline-block;
	float: left;
	width: 80%;
	margin-left: 30px
}
header .nav_pc li{
	display: inline-block;
	float: left;
	font-size: 15px;
	font-weight: bold;
	margin-top: 3%;
	margin-left: 2.5%;
	text-align: center;
	line-height: 140%;
	width:17%;
}
header .nav_pc li:nth-child(2){width: 22%;}
header .nav_pc li:first-child{ margin-left: 0;}
header .nav_pc li a{ 
	display: block;
	text-decoration: none;
	color: #333;
	overflow-x: hidden;
}
span.narrow {
	letter-spacing:-0.1em
}
header .nav_pc li a:hover{ 
	color: #00CC99;
	-webkit-transition: .4s;
	transition: .4s;
	border-bottom: solid 2px;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
header .nav_pc li.active a{
	color: #00CC99;
	-webkit-transition: .4s;
	transition: .4s;
	border-bottom: solid 2px;
	font-weight: bold
}

.nav_btn{
	display: display: inline-block;
	float: right;
	width: 14%;
}
.nav_btn p{ text-align: center; padding:0 0 10px 0; box-shadow: none; background: none}

/*.nav_btn p:last-child{ font-weight: bold; font-family: 'Josefin Slab'; }*/
.nav_btn p a{
	display: block;
	background: #00CC99;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	padding: 3px;
	text-shadow:none;
	box-shadow: none
}
.nav_btn p a:hover{
	background:#F96;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
.nav_btn .mb{margin-bottom: 5px; }
.nav_sp{ display: none; }



/*  ------------------------------------------------
  共通
--------------------------------------------------- */
.home, .message1, .message1, .message2, .message3, .message5, .message6, .message7, .message8, .message9, .message10 {
	background-size: cover;
	color: #fff;
}
#fullpage3 .innar {
	max-width: 600px;
	margin: 0 auto;
}
#fullpage3 .block {
	margin: auto;
	padding: 0;
}
h2{
	max-width: 480px;
	margin-bottom: 40px;
}

/* .home p, .message1 p, .message1 p, .message2 p, .message3 p, .message5 p, .message6 p, .message7 p, .message8 p, .message9 p, .message10 p { */
p {
	line-height: 30px;
	color: #000;
	padding:10px 10px 0 20px;
	background: url(../img/artist/pback.png);
}
p.pt10 {
	padding-top:20px;
	border-radius: 50px 0 0 0;
	box-shadow: 0 -5px #996666
}
p.pb10 {
	padding-bottom:20px	;
	border-radius: 0 0 50px 0;
	box-shadow: 0 5px #33CC99
}
p.ptb10 {
	padding-top:20px;
	padding-bottom:20px	;
	border-radius: 50px 0 50px 0;
	box-shadow: 0 5px #33CC99, 0 -5px #FF6699
}

/*  ------------------------------------------------
   home
--------------------------------------------------- */

.home{
	background: url(../img/artist/mainimg13.jpg) center no-repeat;
	background-size: cover;
	color: #fff;
}
.home h1 {
	width: 640px;
	margin-bottom: 25px	;
	opacity:0
}
.home p {
	line-height: 23px	
}

/*  ------------------------------------------------
   message1
--------------------------------------------------- */
.message1{
	position: relative;
	text-align: left;
	background: url(../img/artist/muraoka2.jpg) center no-repeat;
	background-size: cover;
}
.message1 .block {
	float: left;
}
.message1 h2 {
	max-width: 320px; 
}
.message1 p {
	line-height: 25px;
}
.message1 .pic {
	width: 300px;
	position: absolute; 
	bottom: 50px; 
	right: 35px
}
.message1 .pic img {
	width: 100%;
	height: auto	
}

/*  ------------------------------------------------
   message2
--------------------------------------------------- */
.message2 { 
	background:url(../img/artist/morimura_art.jpg) left 70px no-repeat;
	width: 100%;
	max-width: 1080px;
	margin: 50px auto 0 auto;
}
.message2 .innar {
	height: 100%	
}
.message2 .block {
	width: 400px;
	position: absolute; 
	top: 140px; 
	right: 350px
}
.message2 h2 {
	margin-top:0;
	margin-bottom:20px;	
}
.message2 p {
	line-height: 18px;	
}
.message2 .pic {
	width: 250px;
	position: absolute; 
	bottom: 160px; 
	right: 50px
}
.message2 .pic img {
	width: 100%;
	height: auto	
}

/*  ------------------------------------------------
   message3
--------------------------------------------------- */
.message3 {
	background:url(../img/artist/mizuno1.jpg) center 500px no-repeat;
	width: 100%;
	max-width: 1080px;
	margin: 50px auto 0 auto;
}
.message3 .block{
	position: absolute;
	max-width: 650px;
	top:130px;
	left: 8%;
}
.message3 h2 {
	margin-top:-10px;
	margin-bottom:20px;	
	max-width: 600px; 
}
.message3 p {
	line-height: 22px
}
.message3 .pic {
	width: 308px;
	position: absolute; 
	top: 100px; 
	right: 50px
}
.message3 .pic img {
	width: 100%;
	height: auto	
}

/*  ------------------------------------------------
   flow
--------------------------------------------------- */

.flow{
	background: url(../img/artist/mainimg02_flower.png) left center no-repeat ,url(../img/artist/mainimg02.jpg) center no-repeat;
	background-size: auto 100% ,cover;
}
.flow .innar{
	max-width: 1000px;
	margin: 0 auto;
	
}
.flow .block {
    
}
.flow h1{
	max-width: 182px;
	margin-bottom: 40px;
}

.btn{
	width: 232px;
	font-size: 26px;
	font-family: 'Josefin Slab', serif;
	text-align: center;
	margin-top: 60px;
}
.btn a{
	background: #5fdbd1;
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 10px 7px;
}

.btn a:hover{
	background: #64beb6;
	filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}


/*  ------------------------------------------------
   footer
--------------------------------------------------- */

footer { 
	position: fixed;
	z-index: 3;
	bottom: 0;
	left: 0;
	width: 100%;
	background:#00CC99
}

.artist footer {background:#00CC99}

footer .innar:after{content: ""; display: block; clear: both; }
footer .innar{ 
	display: inline-block;;
	max-width: 1000px;
	margin: auto;
	padding: 0;
}
footer .address {
	color: #fff;
	float: right;	
	width: 50%;
	margin: 10px 10px 5px 10px;
	text-align: right
}
footer .nav_pc{
	display: inline-block;
	float: left;
	width: 45%;
	margin-top:0;
}
footer .nav_pc ul{
	display: inline-block;
	width: 100%;
	margin: 10px 10px 5px 10px;
}
footer .nav_pc li{
	display: inline-block;
	float: left;
	font-size: 14px;
	margin-left: 2%;
	text-align: center;
	line-height: 140%;
	width:29%;
	font-weight: bold;
	border-right: solid 1px #FFF
}
footer .nav_pc li:first-child{ 
	border-left: solid 1px #FFF;
	margin-left: 0; 
	margin-right: 2%;
}
footer .nav_pc li a{ 
	display: block;
	text-decoration: none;
	overflow-x: hidden;
 	color: #FFF; 
}
footer .nav_pc li a:hover{ 
	color: #FF3;
	margin-top: -2px;
	-webkit-transition: .4s;
	transition: .4s;
	border-bottom: solid 2px;
}

/* 横幅970px以下（ノートパソコン・タブレット用）
--------------------------------------------------- */
@media screen and (min-width:0px) and (max-width:970px) {
/* ▼SP用================================================================ */

	header .innar{ width: 98%; margin: 0 1%}	
	header .logo{
		width: 22%;
	}
	header .nav_pc{
		width: 78%;
	}
	header .nav_pc ul{
		width: 80%;
		margin-left: 20px
	}
	header .nav_pc li{
		margin-top: 1.5%;
		margin-left: 2.5%;
	}
	.nav_btn{
		display: display: inline-block;
		float: right;
		width: 13%;
	}
	
	p{ font-size: 15px; line-height: 24px; }
	.btn{
		max-width: 232px;
		font-size: 20px;
	/*	margin: 30px auto;*/
		margin: 20px 0 40px;
	}
.innar{
		width: 90%;
		margin: 0 auto;
		padding-right: 5%;
	}
	
	footer { padding: 0; }
	footer .logo{  }
	footer ul{ display: none; }
	footer address{
	}
}

@media screen and (max-width:870px) {
	header .logo{ width: 24%; margin-top: -5px}
	header .nav_pc{
		width: 76%;
	}
	header .nav_pc li{
		font-size: 14px;
		width:23%;
		margin-top: 1%;
		margin-left: 2%;
	}	
	header .nav_pc li br {
		display:none	
	}
	.nav_btn{
		display:none;
	}
	.nav_sp{ 
		display: inline-block;
		width:20%;
		float: right;
	}
}

@media screen and (max-width:798px) {
	header .nav_pc li{
		margin-top: -2px;
	}	
}

@media screen and (max-width:650px) {
	header .logo{ width: 24%; min-width: 200px }
	header .nav_pc{
		display:none;
	}
}

@media screen and (min-width:0px) and (max-width:600px) {
	.innar{
		width: 90%;
		padding-right: 0;
	}
}

@media screen and (min-width:0px) and (max-width:480px) {
footer, footer .innar:after, footer .innar, footer .nav_pc, footer .nav_pc ul, footer .nav_pc li,footer .nav_pc li a{ 
	display: none;
}
.innar{
	width: 95%;
}
.home h1 {
	width: 100%;
	max-width: 100%;
}
.message2 .block {
	width: 90%;
	position: absolute; 
	top: 90px; 
	right: 10px
}
.message1 .pic , .message2 .pic {
	display: none
}
.message3 .block{
	position: rerative;
	top: 200px;
	bottom:10px;
	left: 10px;
}
}

.b-a, .bar, .bar:before, .bar:after {
	transition: all .25s;
	content: "";
	position: absolute;
	right: 0;
	height: 3px;
	width: 30px;
	background: #00CC99;
}

.menu-collapsed {
	transition: all .25s;
	position: fixed;
	top: 10px;
	right: 9px;
	height: 36px;
	width: 36px;
	z-index: 300;
	cursor: pointer;
	color: #00CC99;
}
.menu-collapsed ul {
	transition: all 0s;
	position: fixed;
	left: -9000px;
}

.bar {
	position: fixed;
	right: 15px;
	top: 34px;
}
.bar:before { top: -8px; }
.bar:after { top: 8px; }

.b-a-expanded, .menu-expanded .bar:before, .menu-expanded .bar:after {
	transition: all .25s;
  	top: -0px;
}

.menu-expanded {
  	transition: all .25s;
  	text-align: center;
  	height: 100%;
  	width: 100%;
  	border-radius: 0px;
  	top: 0;
  	right: 0;
  	background: #00CC99;
	z-index: 3002;
}
.menu-expanded ul {
	transition: all 0s;
	position: relative;
	left: 0;
	top: 50px; 
	bottom: 0;
	margin: auto;
	width:70%;
	z-index: 1002;
	/*font-family: 'Josefin Slab', serif;*/
	letter-spacing:0.12em!important;
}
.menu-expanded li { text-align: center;  }
.menu-expanded li h1{
	color: #fff;
	margin-bottom: 20px;
	font-family: 'Josefin Slab', serif;
}
.menu-expanded a {
	transition: all .15s;
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 2%;
	border-bottom: dotted 1px #fff;
}
.menu-expanded .bar { background-color: transparent; transition: all .25s; }
.menu-expanded .bar:before { transform: rotate(45deg); }
.menu-expanded .bar:after { transform: rotate(-45deg); }

/*  ------------------------------------------------
   top animate
--------------------------------------------------- */

.home p,
.message1 h2,
.message1 p,
.message1 h2,
.message1 p,
.message2 h2,
.message2 p,
.message3 h2,
.message3 p,
.message5 h2,
.message5 p,
.message6 h2,
.message6 p,
.message7 h2,
.message7 p,
.message8 h2,
.message8 p,
.message9 h2,
.message9 p,
.message10 h2,
.message10 p { opacity: 0; }

.animated {
  opacity: 1;
}