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

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
body { 
	font-size:13px;
	line-height:1.5;
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: 0.5em;
	font-weight: 300;
	color: #0C0C0C;
	margin: 0;
}

li{ list-style:none;}
/**img{ max-width:100%; height:auto;}**/

a{text-decoration:none; transition:0.2s; color:#333;}
a:hover{ opacity:0.5;}
.clearfix { clear: both;}
.mr0 { margin-right: 0px;}



body { background-color: #FFF;}

header { display: none;}

#pc_nav { display: block; position: fixed; width: 20%; height: auto; float: left;}
#pc_nav h1 { width: 211px; margin: 50px 19px 40%;}
#pc_nav #menu { margin-bottom: 140px;}
#pc_nav #menu li { margin-bottom: 20px;}
#pc_nav #sns {position: fixed; bottom: 1%;}
#pc_nav #sns li { float: left; margin-right: 30px;}
#pc_nav #sns #x { margin-top: 3px;}
#pc_nav #sns #youtube { margin-top: 5px;}

#navArea { display: none;}

main { float: right; width: 80%; height: auto; background-color: #fcf7fb;}
main #topimg { margin-bottom: 50px;}
main #topimg img { width: 96%; height: auto; margin: 2% 2%; }

#top_news { font-size: 18px; letter-spacing: 2px; margin-bottom: 100px;}
#top_news h2 { width: 137px; margin: 0 auto 60px;}
#top_news table { width: 80%; margin: 0 auto;}
#top_news th { color: #a10072; width: 22%; border-bottom: #a10072 solid 3px; padding: 14px; font-weight: normal;}
#top_news td { width: 78%; border-bottom: #333 solid 1px; padding: 14px 40px 14px 40px;}

#top_profile { font-size: 20px; letter-spacing: 2px; margin-bottom: 220px; background: url("../img/top_profile_bg.png") no-repeat center;}
#top_profile h2 { width: 204px; margin: 0 auto 60px;}
#top_profile h3 { width: 454px; margin: 0 auto 56px; }
#top_profile .text { font-size: 24px; text-align: center; letter-spacing: 0.3em; line-height: 200%; margin-bottom: 84px;}
#top_profile p .tsume { letter-spacing: -0.02em;}
#top_profile #kii { float: left; width: 44%; margin: 0 2% 5% 4%;}
#top_profile #niko { float: right; width: 44%; margin: 0 4% 5% 0;}
#top_profile #kii img { width: 100%;}
#top_profile #niko img { width: 100%;}
#top_profile .box { margin-left: 30px; line-height: 140%;}
#top_profile h4 { font-size: 44px; font-weight: normal; letter-spacing: 0.2em; margin-bottom: 20px;}
#top_profile .en { color: #a10072;}
#top_profile th { font-weight: normal; text-align: left; padding: 5px 40px 5px 0;}
#top_profile table {  margin-bottom: 10px;}
#top_profile .pro_sns { margin-left: 0; padding: 0 0 150px 2px;}
#top_profile .pro_sns li { float: left; height: auto; margin: 0 20px 0 0;}
#top_profile #pro_x { padding-top: 0.6%;}


footer { height: 150px; width: 100%; background-color: #a10072;}
footer #logo { position: absolute; right: 30px; width: 140px; height: auto; letter-spacing: 0.1em; color: #fff; margin-top: 20px; text-align: right;}

#sp_sns { display: none;}


#sub_contact h2 { width: 238px; height: auto; margin: 100px auto 60px;}

#sub_news h2 { width: 137px; height: auto; margin: 100px auto 60px;}
#sub_news .box { width: 60%; height: auto; background-color: #fff; letter-spacing: 0.2em; margin: 40px auto; padding: 50px 70px;}
#sub_news .box h3 { color: #a10072;}
#sub_news .box h4 { font-size: 1.8em;}
#sub_news .box p { line-height: 2em;}



@media screen and (max-width: 599px) {
	#pc_nav { display: none;}
	#navArea { display: block;}
	
	header { display: block; width: 100%; position: fixed; top: 0; height: 12%;}
	header h1 { width: 100%; margin: 2% auto 2% 4%;}
	header h1 img { width: 20%; height: auto;}
	
	main { display: block; float: none; width: 100%; height: auto; background-color: #fcf7fb; padding-top: 12%;}
	main #topimg { padding-top: 2%; margin-bottom: 5%;}
	main #topimg img { width: 96%; height: auto; margin: 2% 2%; }

	#top_news { font-size: 1em; letter-spacing: 2px; margin-bottom: 100px;}
	#top_news h2 { width: 15%; margin: 0 auto 5%;}
	#top_news h2 img { width: 100%; height: auto;}
	#top_news table { width: 90%; margin: 0 auto;}
	#top_news th { color: #a10072; width: 22%; border-bottom: #a10072 solid 3px; padding: 14px; font-weight: normal;}
	#top_news td { width: 78%; border-bottom: #333 solid 1px; padding: 14px 40px 14px 40px;}

	#top_profile { font-size: 1em; letter-spacing: 0.1em; margin-bottom: 20%; background: url("../img/top_profile_bg.png") no-repeat center; background-size: 80%;}
	#top_profile h2 { width: 23%; margin: 0 auto 5%;}
	#top_profile h2 img { width: 100%; height: auto;}
	#top_profile h3 { width: 60%; margin: 0 auto 5%; }
	#top_profile h3 img { width: 100%; height: auto;}
	#top_profile .text { font-size: 1.2em; text-align: center; letter-spacing: 0.2em; line-height: 200%; margin-bottom: 84px;}
	#top_profile p .tsume { letter-spacing: -0.02em;}
	#top_profile #kii { float: left; width: 44%; margin: 0 2% 5% 4%;}
	#top_profile #niko { float: right; width: 44%; margin: 0 4% 5% 0;}
	#top_profile #kii img { width: 100%;}
	#top_profile #niko img { width: 100%;}
	#top_profile .box { margin-left: 5%; line-height: 140%;}
	#top_profile h4 { font-size: 2em; font-weight: normal; letter-spacing: 0.2em; margin-bottom: 0.2em;}
	#top_profile .en { color: #a10072;}
	#top_profile th { width: 6em; font-weight: normal; text-align: left; padding: 2% 2% 2% 0;}
	#top_profile table {  margin-bottom: 5%; font-size: 0.8em;}
	#top_profile .pro_sns { margin-left: 0; padding: 0 0 20% 1%;}
	#top_profile .pro_sns li { float: left; height: auto; margin: 0 5% 0 0;}
	#top_profile #kii .pro_sns li img { width: 70%; height: auto;}
	#top_profile #niko .pro_sns li img { width: 70%; height: auto;}
	#top_profile #pro_x { padding-top: 0.7%;}


	footer { height: 150px; width: 100%; background-color: #a10072;}
	footer #logo { position: absolute; right: 30px; width: 140px; height: auto; letter-spacing: 0.1em; color: #fff; margin-top: 20px; text-align: right;}
	
	#sp_sns { display: block; width: 50%; height: auto; margin: 0 auto 25%;}
	#sp_sns img { width: 5%; height: auto;}
	#sp_sns #sns ul { width: 50%;}
	#sp_sns #sns li { float: left; margin-right: 12%;}
	#sp_sns #sns #x { margin-top: 2%;}
	#sp_sns #sns #youtube { margin-top: 3%;margin-right: 0;}
	#sp_sns #sns li .mr0 { }
	
	
	#sub_news .box { width: 80%; height: auto; background-color: #fff; letter-spacing: 0.2em; margin: 10% auto; padding: 3% 5%;}
	#sub_news .box h3 { color: #a10072; margin-bottom: 2%;}
	#sub_news .box h4 { font-size: 1.4em; margin-top: 0%;}
	#sub_news .box p { line-height: 1.6em;}
	
	
	/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 45%;
	height: 40%;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: .5;
}
.open nav {
  left: 0;
  opacity: .8;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #a10072;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}
@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 220px;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #a10072;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #561944;
  opacity: .2;
  z-index: 2;
  cursor: pointer;
}

	
}