@charset "utf-8";
body {
	margin: 0;
	padding: 0;
    font-family: 'Noto Serif JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:100%;
	font-weight: 300;
	line-height:180%;
	color: #222;
}
img {
	border: none;
	vertical-align:bottom;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
	list-style:none;
	box-sizing:border-box;
}
a:link {color:#1c2e59; outline:none; }
a:visited {color:#1c2e59;}
@media only screen and (min-width:960px){
    a:hover {color: #333;}
    a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
}

#wrapper {}
#base {}

i.material-icons { vertical-align: middle;}
.pc {display:block;}
.sm {display:none;}
.item { position: relative; transition: all 0.1s ease-out;}
@media only screen and (max-width:1240px){
	.pc2 { display:none !important;}
}
@media only screen and (max-width:960px){
	body { min-width:400px; font-size:100%;}
	#header { width:100%;}
	#content{ width:100%;}
	#footer { width:100%;}
	#wrapper { background:#FFF; border-top:none;}
	#base { width:auto; margin:0 !important;}
	.pc { display:none !important;}
	.sm { display:block}
}

.non_scroll {overflow:hidden;}


/*====================================================================================================
  HEADER
====================================================================================================*/
#header {
	position:fixed; top: 0; left: 0;
    width: 145px; height: 100vh; min-height:790px;
	overflow: hidden;
	background: #fff;
	border-right:1px solid #ddd;
    z-index: 99999999;
}

/* LOGO*/
#header h1 { margin: auto; padding: 30px 0 25px;}
#header h1 a {
    margin: auto;
    display: block; width:74px; height:74px;
	text-indent: -9999px;
	background: url("../image/logo_b.svg") no-repeat center center;
	background-size:100% auto;
}

/* SITE TIT */
#header .site_title {
    margin: auto;
    width:144px;
    text-align: center;
    font-size: 137%;
    letter-spacing:8px;
    vertical-align: middle;
}
#header .site_title span { writing-mode: vertical-rl; display: inline-block;}

/* MENU BTN */
#header .b_nav { cursor: pointer; margin:10px auto 35px; width: 59px;}
#header .b_nav div { position: relative; width: 100%; height: 16px;}
#header .b_nav span { display: block; width: 100%; height: 2px; background: #1c2e59;  transition:0.3s;}
#header .b_nav span:nth-child(1) { position: absolute; top:2px;}
#header .b_nav span:nth-child(2) { position: absolute; bottom:2px;}
#header .b_nav span::before { 
    display: block; clear: both; content:"";
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    margin: auto; width: 5px; height: 5px;
    background: #1c2e59;
    transform: rotate(45deg);
    opacity:1;
}
#header .b_nav p  { text-align: center; font-size: 12px; letter-spacing: 3px; font-weight: 600; color:#1c2e59;}
#header .b_nav.active span:nth-child(1) { margin: auto; left: 0; right: 0; width:70%; top:-10px; bottom: 0; transform: rotate(45deg);}
#header .b_nav.active span:nth-child(2) { margin: auto; left: 0; right: 0; width:70%; top:-10px; bottom: 0; transform: rotate(-45deg);}
#header .b_nav.active span::before { opacity: 0;}


/* NAVI*/
#nav { position: absolute; left: 0; right: 0; top:150px; margin: auto;}
#nav ul { margin: auto;}
#nav ul li {}
#nav ul li+li {}
#nav ul li p { margin: auto; text-align: center; width:40px;}
#nav ul li a { display: block;}
#nav ul li a {
    display: block;
    margin: auto;
    writing-mode: vertical-rl;
    display: inline-block;
    padding:15px 0;
    color: #222;
     text-decoration: none;
    line-height:100%;
    text-align: center;
    font-size:90%;
    vertical-align: middle;
    box-sizing: border-box;
}
#nav ul li p { position: relative;}
#nav ul li p::before,
#nav ul li p::after{
    content:"";
    position: absolute;
    background:rgba(28,46,89,0.40);
    width: 0;
    height:1px;
    transition: all 0.2s linear;
}
#nav ul li p::before{ right: 0; bottom: 0;}
#nav ul li p::after{ left: 0; top: 0;}
#nav ul li p span { display: block;}
#nav ul li p span::before,
#nav ul li p span::after{
  content:"";
  position: absolute;
  background:rgba(28,46,89,0.40);
  width:1px;
  height:0;
  transition: all 0.1s linear;
}
#nav ul li p span::before{ left: 0; bottom: 0;}
#nav ul li p span::after{ right: 0; top: 0;}
#nav ul li.pull .child_nav {
    position: fixed; top:0; left: 144px;
    width:0px; height: 100vh;
    text-align: center;
    vertical-align: middle;
    background:rgba(255,255,255,0.95);
    opacity: 0;
    transition: .3s;
    overflow: hidden;
}
#nav ul li.pull .child_cont {
    position: absolute; top: 0; left: 0; right: 0; bottom:0;
    margin: auto; width: 30px; height: auto;
}

#nav2 { display: none; position:fixed; top: 0; left: 145px; width:calc(100% - 145px); height: 100vh; background:#f7f4f0; z-index:1;}
#nav2 ul { padding:80px 100px;}
#nav2 ul li {}
#nav2 ul li+li { margin-top: 25px;}
#nav2 ul li a {
    position: relative;
    margin:0;
    color: #222;
    text-decoration: none;
    line-height:100%;
    font-size:100%;
    box-sizing: border-box;
}
#nav2 ul li a span:before {
    display: block; clear: both; content:"";
    position: absolute; top:12px; left: -20px;
    width:7px; height: 1px;
    background: #777;
    transition: 0.3s;
}
#nav2 ul li ul { padding:15px 0; font-size:87.5%;}
#nav2 ul li ul.child_nav { padding:5px 0 0;}
#nav2 ul li ul li+li { margin-top:10px;}
#nav2 .sns_in { display: none; margin-top: 20px;}
#nav2 .sns_in a {
    display: block;
    padding-left: 35px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    background:url("../image/sns_in2.svg") no-repeat left center;
}
@media only screen and (min-width:950px){
    #nav ul li p:hover::before,
    #nav ul li p:hover::after{ width: 100%;}
    #nav ul li p:hover::after { transition-delay: 0s;}
    #nav ul li p:hover::before{ transition-delay: 0.3s;}
    #nav ul li p:hover span::before,
    #nav ul li p:hover span::after {height: 100%;}
    #nav ul li p:hover span::before{ transition-delay: 0.5s;}
    #nav ul li p:hover span::after{ transition-delay: 0.2s;}
    #nav ul li p:hover a { color: #1c2e59;}
    #nav ul li.pull:hover p a { color: #1c2e59;}
    #nav ul li.pull:hover .child_nav { display: block; width:80px; padding:40px 0; opacity: 1; border-right:1px solid #ddd;}
    #nav ul li.pull .child_cont ul li a:hover { color: #1c2e59;}
    #nav2 ul li a:hover { color: #1c2e59;}
    #nav2 ul li a:hover span:before { left: -33px; width:20px; height: 1px; background: #1c2e59;}
}
@media only screen and (max-width:950px){
    #header { width: 100%; height: auto; min-height:inherit; border-bottom: 1px solid #eee;}
    #header h1 { position: relative; margin:0 !important; padding: 0; width: 65px; z-index: 999;}
    #header h1 a {
		display: block;
		padding-left: 75px; line-height: 65px;
		font-weight: normal;
		letter-spacing: 3px;
		color: #222;
		text-decoration: none;
        width:180px; height:65px;
		text-indent: 0;
        background: url("../image/logo_b.svg") no-repeat 15px center;
        background-size:40px auto;
    }
    #header .site_title { 
		position: relative;
		display: none;
		margin:10px 0 0 20px;
		width:35px;
		z-index: 999;
	}
    #header .site_title span { 
		display: block !important;
		width: 35px !important; height: 200px;
		background:url("../image/logo2.png") no-repeat center top;
		background-size: 16px auto;
		text-indent:-9999px;
	}
    #header .b_nav { position: absolute; top:20px; right: 15px; margin:0; width:35px; z-index: 999;}
    #header .b_nav.active span:nth-child(1),
    #header .b_nav.active span:nth-child(2) { top:5px; background: #777;}
    #header .b_nav p  { font-size:10px; letter-spacing:1px;}
    #header .b_nav.active p { color: #777;}    
    #nav { display: none;}
    #nav2 { display: none; position:fixed; top: 0; left:0; width:100%; height: 100%; max-height: 100vh; overflow:auto;}
    #nav2 ul { padding: 80px 0 0 130px;}
}


/*====================================================================================================
  CONTENT
====================================================================================================*/
#content { clear:both; width:100%; padding-left: 145px; box-sizing: border-box;}
@media only screen and (max-width:960px){
    #content { padding-left:0;}
}

/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { position: relative; clear:both; padding-left: 145px; color: #fff; background:#1c2e59; z-index:1;}
#footer a { color: #fff; text-decoration: none;}
#footer .f_cont { margin: auto; padding: 50px 0 35px; max-width: 1000px; overflow: hidden;}
#footer .logo { margin:0 auto 15px; width: 90px;}
#footer .site_tit { text-align: center; letter-spacing:1.5px; }
#footer .site_tit small { display: block; font-size: 80%;}
#footer .site_tit span { font-size:112.5%;}
#footer .add { text-align: center; font-size:75%; letter-spacing:1.5px; line-height: 180%;}
#footer .add .sns_in { display: none; margin:20px auto 0; width: 27px;}
#footer .add .sns_in,
#footer .add .sns_in a { width: 27px; height: 27px; }
#footer .f_link { clear: both; padding: 10px 30px; color: #222; font-size: 75%; overflow: hidden; background: #fff;}
#footer .f_link ul { float: right;}
#footer .f_link ul li { float: left;}
#footer .f_link ul li+li::before { padding: 0 20px; content:"／";}
#footer .f_link ul li a { color: #222; text-decoration: none;}
#footer .f_link .copy {float: left;}
#page,
#page a { display:block; width:60px; height:60px;}
#page { display: none; position: fixed; bottom:200px; right:20px; z-index: 999999;}
#page a { text-indent: -9999px; background:url(../image/page_top.png) no-repeat; background-size: 100% auto;}
@media only screen and (min-width:960px){
    #footer .f_link ul li a:hover { opacity: 0.7;}
    #page a:hover { opacity: 0.7;}
}
@media only screen and (max-width:960px){
    #footer { padding-left:0;}
    #page { position: fixed; bottom:20px; right:20px; z-index: 999999;}
    #footer .f_link ul { display: none;}
    #footer .f_link .copy { float: none; text-align: center;}
}

/*====================================================================================================
  COLOR eto..
====================================================================================================*/
.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #000099;}
.purple { color: #660099;}
.pink { color: #FF6699;}
.red { color: #FF0000;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #339900;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 115%; line-height: 140%;}
.small { font-size: 87.5%;}
.small2 { font-size: 75%;}
.underline { text-decoration: underline;}
.line-through { text-decoration: line-through;}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}