@charset "UTF-8";
body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
embed,object {
	padding: 0;
	vertical-align: baseline;
	margin: 0;
  box-sizing: border-box;
	font-family: Century Gothic,"メイリオ", Meiryo, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
}

body {
	font-size: 16px;
}
.wf-notosansjapanese { 
	font-family: "Noto Sans Japanese" !important; 
}
a:link,a:visited,
a:hover,a:active {
	text-decoration: none;
	color:#115aa3;
}
a.txtLink {
	color:#00285b;
	text-decoration: none;
	border-bottom: 1px dotted #00285b;
}
a.txtLink:hover, a.txtLink:active, a.txtLink:focus {
	text-decoration: none;
	border-bottom: none;
	color:#115aa3;
}
a.txtLinkMail {
	color:#fff;
	text-decoration: none;
	border-bottom: 1px dotted #fff;
}
a.txtLinkMail:hover, a.txtLinkMail:active, a.txtLinkMail:focus {
	text-decoration: none;
	border-bottom: none;
	color:#fff;
}
a.img {
	text-decoration: none;
	border-bottom: none;
}
img {
	border: none;
}

#header {
	width: 100%;
	min-width:980px;
	height: 155px;
	margin: 0;
	padding: 0;
	background: #000f23;
	color: #fff;
	z-index:9999;
}
#header .inner {
	background: url(../images/common/title_bg.gif) no-repeat 80% top;
	margin: 0 auto;
	padding: 15px 0;
	color: #fff;	
	box-sizing:border-box;
}
#header .inner a,
#header .inner a:hover,
#header .inner a:active,
#header .inner a:visited {
	color: #fff;	
}
#headerLogo {
	position:relative;
	width: 980px;
	height: 87px;
	margin: 0 auto;
}

#headerLogo div:first-child {
	margin-bottom:8px;
}
nav.contact {

}
nav.contact .right { 
	width:150px;
	position: absolute;
	top:0;
	right:0;
	padding:5px;
	display:block;
	font-size:0.75em;
	border:1px solid #115aa3;
	border-radius:4px;
	text-align:center;
	background:#115aa3;
	color:#fff;
	cursor:pointer;
	outline:none;
	transition:background .15s,border-color .15s,color .15s;
	-webkit-transition:background .15s,border-color .15s,color .15s;
}
nav.contact .right::after {
	position: absolute;
	top: 50%;
	right: .3em;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #fff;
	transition: all .2s;
}
nav.contact a:hover, nav.contact a:active, nav.contact a:focus {
	border-color:#c8e1fa;
	background:#c8e1fa;
	color:#00285b !important;
}
nav.contact .right:hover::after {
	right: -.02em;
	border-left-color:#00285b !important;
}

#navi_button {
	width:100%;
	min-width:1000px;
	margin:8px auto ;
	padding:0 0;
	background:#000f23; 
	text-align:center; 
	font-size:13px;
	height:45px;
	border-top:1px solid #444;
	overflow:hidden;
}
#navi_button ul li {
	display:inline;
}
@media(min-width:960px){
a.gnaviBtn {
	display: inline-block;
	line-height: 42px;
	width: 120px;
	height: 45px;
	-webkit-perspective: 300px;
	-moz-perspective: 300px;
	perspective: 300px;
	text-align: center;
}
a.gnaviBtn span {
  position: relative;
  display: inline-block;
  width: 120px;
  padding: 0;
  background: #000f23;
  color:#fff;
  border-bottom:3px solid #FF850E;
  box-sizing:border-box;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
a.gnaviBtn span::before {
  color:#FF850E;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000f23;
  border-bottom:3px solid #FF850E;
  content: attr(data-hover);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX-(90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
}
a.gnaviBtn:hover span,
a.gnaviBtn:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}
a.gnaviBtn:hover span::before,
a.gnaviBtn:focus span::before,
body.home a.gnaviBtn.gn01 span,
body.profile a.gnaviBtn.gn02 span,
body.profile_en a.gnaviBtn.gn03 span,
body.manifest a.gnaviBtn.gn04 span,
body.syutyou a.gnaviBtn.gn05 span,
body.rookie a.gnaviBtn.gn06 span,
body.media a.gnaviBtn.gn07 span,
body.link a.gnaviBtn.gn08 span {
	color:#000f23;
    background: #FF850E;
	font-weight:bold;
}
}
.fixed {
    position:fixed;
    top:0;
    left:0;
    width:100%;
}
.overlay {
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.7;
        filter: alpha(opacity=70);
        z-index: 100;
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, a.gnaviBtn span::before { display:none; } /* IE11 */
  *::-ms-backdrop, a.gnaviBtn:hover span::before { display:none; } /* IE11 */
  *::-ms-backdrop, a.gnaviBtn:focus span::before { display:none; } /* IE11 */
  *::-ms-backdrop, a.gnaviBtn:hover span { transform:none;color:#000f23;background: #FF850E;font-weight:bold; } /* IE11 */
  *::-ms-backdrop, a.gnaviBtn:focus span { transform:none;color:#000f23;background: #FF850E;font-weight:bold; } /* IE11 */

  a.gnaviBtn span::before { display:none; } /* IE10 */
  a.gnaviBtn:hover span::before { display:none; } /* IE10 */
  a.gnaviBtn:focus span::before { display:none; } /* IE10 */
  a.gnaviBtn:hover span { transform:none;color:#000f23;background: #FF850E;font-weight:bold; } /* IE10 */
  a.gnaviBtn:focus span { transform:none;color:#000f23;background: #FF850E;font-weight:bold; } /* IE10 */
}

#content {
	text-align:left;
	width: 960px;
	margin: 0 auto;
	padding: 15px 10px 40px;
	color: #000000;	
}
#content_top {
	text-align:left;
	width: 960px;
	margin: 0 auto;
	padding: 30px 10px;
	background: #fff;
	color: #000000;	
}
#content_full {
	text-align:left;
	width: 100%;
	margin: 0 auto;
	padding: 15px 0 40px;
	color: #000000;	
}

/* topicPath */
dl#topicPath {
	width: 100%;
	border-bottom:#dfe6e6 1px solid;
	margin-bottom:20px;
	padding-bottom:5px;
	font-size:0.9em;
}
dl#topicPath dt {
	position: absolute;
	left: -9999px;
	width: 100px;
	height: 0;
}
dl#topicPath dd {
	clear: both;
	line-height: 1.6;
	padding: 0;
	font-size: 0.75em;
}

/* パンくず */
.breadcrumb {
	width: 100%;
	border-bottom:#dfe6e6 1px solid;
	margin-bottom:20px;
	padding-bottom:10px;
	font-size:0.75em;
	margin-left: 0;
	padding-left: 0;
}
.breadcrumb li{
	display:inline-block;
	list-style: none;
	margin: 0 5px;
}
.breadcrumb li:after{/* ▶を表示*/
	content: '>';
	padding: 0 6px;
	color: #00285b;
}
.breadcrumb li:last-child:after{
	content: '';
}
.breadcrumb li a {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    text-decoration: none;
    color: #00285b;
    background: #c8e1fa;
    font-size: 0.9em;
}
.breadcrumb li a:hover {
    background: #d8f1ff;
}

/* パンくず2018 */
.cd-breakcrumb {
	width: 100%;
	margin: 0.5em auto 2em;
}
#content_full .cd-breakcrumb {
	width: 960px;
}
.cd-breakcrumb li {
	display: inline-block;
	font-size: 0.7em;
	color: #00285b;
}
.cd-breakcrumb li::after {
	display: inline-block;
	margin: 0.5em 0.2em 0.5em 0.7em;
}
.cd-breakcrumb li a {
	text-decoration: none;
	border-bottom: 1px dotted #115aa3;
}
.cd-breakcrumb li a:hover, .cd-breakcrumb li a:active, .cd-breakcrumb li a:focus {
	border-bottom: none;
	color: #115aa3;
}
.cd-breakcrumb li:not(:last-child)::after {
	display: inline-block;
	content: '';
	height: 14px;
	width: 14px;
	background: url(../images/common/cd-custom-separator.svg) no-repeat center center;
	vertical-align: middle;
}
.cd-breakcrumb::after {
	content: '';
	display: table;
}

.gallery_link {
	
}
.gallery_link a::after {
	display: inline-block;
	content: '';
	height: 14px;
	width: 14px;
	background: url(../images/common/cd-custom-separator.svg) no-repeat center center;
	vertical-align: middle;
}

#footer {
	width: 100%;
	min-width:980px;
	color: #00285d;
	background: #dfe6e6;
}
#footer02 {
	width: 100%;
	min-width:980px;
	color: #fff;
	background: #00285b;
}
#footer .inner {
	width: 960px;
	margin: 0 auto;
	padding: 15px 0;
	font-size: 80%;	
}
#footer02 .inner {
	width: 960px;
	margin: 0 auto;
	padding: 30px 0 30px;
	text-align:center;	
}
#footer02 .inner small {
	font-size: 0.7em;
	letter-spacing: 0.05em;
}
#footer .footerLinks {
	width: 960px;
	float: left;
	padding: 10px 0 15px;
}
#footer .footerLinks .linkBlock {
	width: 250px;
	float: left;
	border-left: solid 1px #c8c4b5;
	padding: 8px 10px 5px 14px;
}
#footer .footerLinks .linkBlock.last {
	width: 360px;
}
#footer .footerLinks .linkBlock ul {
	display: block;
	list-style: none;
}
#footer .footerLinks .linkBlock ul li {
	display: block;
	list-style: none;
	padding-bottom: 10px;
	background: url(../images/common/ic_foot_link.png) no-repeat left 0.2em;
}
#footer .footerLinks .linkBlock ul li.last {
	padding-bottom: 5px;
}
#footer .footerLinks .linkBlock ul li a {
	padding-left: 22px;
}
#footer .footerLinks .linkBlock a.txtLink {
	border-bottom: none;
}
#footer02 a {
	color:#fff !important;
  transition: 0.3s all;
}
#footer02 a:hover,
#footer02 a:active,
#footer02 a:focus {
	opacity: 0.7;
}
.mailmark::before {
        content: "@";
}

#pagetop {
	position: fixed;
	bottom: 15px;
	right: 15px;
}
#pagetop p {
	display:none;
}
#pagetop img {
	width:69px;
	height:69px;
}

.naviBlock {
	width:710px;
	height:200px;
	background:url(../images/common/navi_bg.png) #fff;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	line-height:22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.naviBlock span.sub {
	font-size:12px;
}
.naviBlock span.mainTxt {
	font-size:18px;
	font-weight:bold;
}
.naviBlock .btn01 {
	position:absolute;
	top:20px;
	left:300px;
}
.naviBlock .btn02 {
	position:absolute;
	top:20px;
	left:500px;
}
.naviBlock .btn03 {
	position:absolute;
	top:105px;
	left:300px;
}
.naviBlock .btn04 {
	position:absolute;
	top:105px;
	left:500px;
}
.naviBlock .btn {
	display: inline-block;
	padding:0 0 0 10px;
	background:#125aa3;
	border-bottom:4px solid #00275b;
	border-radius:5px;
	transition:all .1s;
	-webkit-transition:all .1s;
	text-decoration: none;
}
.naviBlock .btn a {
	color:#fff;
	display:block;
	width:180px;
	height:70px;
  padding-top: 10px;
  box-sizing: border-box;
}
.naviBlock .btn::after {
	position: absolute;
	top: 50%;
	right: .4em;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #fff;
}

.naviBlock .btn:link, .naviBlock .btn:visited, .naviBlock .btn:hover {
  text-decoration: none !important;
}

.naviBlock .btn:hover,.naviBlock .btn:active,.naviBlock .btn:focus {
	border-bottom:1px solid #00275b;
	color:#fff;
	margin-top:3px;
}


.textSS {
	font-size: 0.7em;
	line-height: 1.4em;
}
.textSmall {
	font-size: 0.85em;
	line-height: 1.4em;
}
.textNormal {
	font-weight: 1em;
	line-height: 1.5em;
}
.textMiddle {
	font-size: 1.1em;
	line-height: 1.5em;
}
.textLarge {
	font-size: 1.2em;
	line-height: 1.5em;
}
.textLL {
	font-size: 1.6em;
	line-height: 1.6em;
}
.textLLL {
	font-size: 1.8em;
	line-height: 1.4em;
}
.fwB {
	font-weight: bold;
}
.textRed {
	color: #911a00;
}
.textDBlue {
	color: #00285b;
}
.textWhite {
	color: #fff !important;
}
.textCenter {
	text-align: center;
}
.textRight {
	text-align: right;
}
.textCaution {
	display: block;
	padding-left: 1em;
	text-indent: -1em;
}
.clear {
	font-size: 1px;
	line-height: 1px;
	clear: both;
	height: 1px;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.mb5 {
	margin-bottom: 5px;
}
.mb10 {
	margin-bottom: 10px;
}
.mb15 {
	margin-bottom: 15px;
}
.mb20{
	margin-bottom: 20px;
}
.mb25 {
	margin-bottom: 25px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb40 {
	margin-bottom: 40px;
}
.ml2em {
	margin-left:2em;
}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
.clear {
	clear:both;
}


.icExternalInline {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	padding-right: 20px;
	min-height: 12px;
	background: url(../images/common/ic_external.png) no-repeat right center;
}

/* SNS */
.circle_group {
  margin-bottom: 20px;
}
.sns_circle{
    position:relative;
    width: 35px;
    height: 35px;
    margin:0 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #999;
    float:right;
    list-style: none;
}
 
/* Webフォントに関する指定 */
.sns_circle span{
    position:absolute;
    padding:8px;
    font-size:20px;
    color:#FFF;/* 文字の色 */
}
 
/* リンク領域をブロック全体に */
.sns_circle a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-indent:-999px;
    color:#FFF;/* 文字の色 */
}
 
/* マウスオーバー */
.sns_circle a:hover{
    background-color:#FFF;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
 

/* アイコン毎の配色と配置 */
.sns_circle.feedly{
    background-color: #6CC655;
}
.sns_circle.facebook{
    background-color: #265a96;
}
.sns_circle.twitter{
    background-color: #00acec;
}
.sns_circle.hatebu{
    background-color: #006fbb;
}
.sns_circle.pocket{
    background-color: #EE4256;
}
.sns_circle.googleplus{
    background-color: #dd4b39;
}
.sns_circle.line{
    background-color: #2cbf13;
}
.sns_circle.feed{
    background-color: #ff9900;
}
.sns_circle.youtube{
    background-color: #e22d26;
}

/* スマホサイズ用 */

.spBreak {
	display: none !important;
}
.spBreak480 {
	display: none !important;
}
.pcBreak {
	display: block !important;
}
.spDisplay {
	display: none !important;
}
.pcDisplay {
	display: inline !important;
}

@media(max-width:959px){
body {
	font-size: 15px;
}
.spBreak {
	display: block !important;
}
.pcBreak {
	display: none !important;
}
.spDisplay {
	display: inline !important;
}
.pcDisplay {
	display: none !important;
}
.spImgWidth {
	width:80%;
}
.spImgWidth100 {
	width:100%;
}
.spMgnLRAuto {
	margin:0 auto ;
}
#wrapper {
	overflow:hidden;
	width:100%;
}
#header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
	min-width:inherit;
	height: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
	z-index:9999;
}
#header .inner {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 10px 0 7px 10px;
	background-image:none;
}

#header #headerLogo {
	display: table-cell;
	padding-right: 10px;
	vertical-align: top;
	width:100%;
	height:auto;
}
#headerLogo div:first-child {
	margin-bottom:5px;
}
#headerLogo p {
	font-size:0.9em;
}
#header #headerLogo img {
	width:70%;
}

/*ハンバーガーメニュー*/
#header .navBtn {
        display: block;
        width: 30px;
        position:absolute;
        top: 35%;
        right: 15px;
        cursor: pointer;
}
#header .navBtn span {
        display: block;
        height: 3px;
        width: 100%;
        background: #FF850E;
        border-radius: 2px;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
}
#header .navBtn span:nth-of-type(2),
#header .navBtn span:nth-of-type(3) {
        margin-top: 7px;
}

/* ナビゲーションアイコン：アクティブ */
#header.navOpen .navBtn span:nth-of-type(1) {
        -webkit-transform: translateY(9px) translateX(0) rotate(45deg);
        -ms-transform: translateY(9px) translateX(0) rotate(45deg);
        transform: translateY(9px) translateX(0) rotate(45deg);
}
#header.navOpen .navBtn span:nth-of-type(2) {
        margin-top: 5px;
        opacity: 0;
        -webkit-transform: translateY(9px);
        -ms-transform: translateY(9px);
        transform: translateY(9px);
}
#header.navOpen .navBtn span:nth-of-type(3) {
        -webkit-transform: translateY(-9px) translateX(0) rotate(-45deg);
        -ms-transform: translateY(-9px) translateX(0) rotate(-45deg);
        transform: translateY(-9px) translateX(0) rotate(-45deg);
}
/* ナビゲーション */
#header #navi_button {
        overflow:auto;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -100%;
        width: 100%;
		min-width:inherit;
	    height: auto;
        background: #000f23;
		text-align:left; 
		border-top:none;
		font-size:16px;
        /* opacity: 0; */
        z-index:9999;
        overflow: auto;
        margin-bottom: 0;
}

/* ナビゲーション：アクティブ時 */
#header.navOpen #navi_button {
        opacity: 1;
        /* right: 0; */
}
#header #navi_button ul {
    border-top:1px dotted #666;
}
#header #navi_button ul li {
	  display:block;
    border-bottom:1px solid #666;
}
#header #navi_button ul li a {
    position:relative;
    display:block;
    padding:1em 1.5em;
    color:#fff;
    text-decoration:none;
}
#header #navi_button ul li a:hover,
#header #navi_button ul li a:active {
    background:#FF850E;
	color:#000f23 ;
}
#header #navi_button ul li a:before {
  position: absolute;
  top: 50%;
  right: 1.5em;
  display: inline-block;
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  margin-right: -4px;
  vertical-align: middle;
  border-top: 2px solid #FF850E;
  border-right: 2px solid #FF850E;
  transform: rotate(45deg);
}
#header #navi_button ul li a:hover:before,
#header #navi_button ul li a:active:before {
	border-top: 2px solid #000f23;
	border-right: 2px solid #000f23;
}
  
#content {
	width: 100%;
	margin-top:80px !important;
	padding: 15px 0 30px;
}
#content_top {
	width: 100%;
	margin-top:80px !important;
	padding: 30px 0;
}
#content_full {
	width: 100%;
	margin-top:80px !important;
	padding: 15px 0 30px;
}
#main{
	width:90%;
	float:none;
	margin:0 auto;
}
dl#topicPath {
	width: 94%;
	border-bottom:#dfe6e6 2px solid;
	padding:0 3% 10px ;
	margin-top:0;
}
dl#topicPath dt {
}
dl#topicPath dd {
	clear: both;
	line-height: 2;
	padding: 0;
	font-size: 0.8em;
}
.sns_circle{
    margin:0 3px;
}
.cd-breakcrumb,
#content_full .cd-breakcrumb {
	width: 94%;
	margin: 1em auto 1.5em;
}
.cd-breakcrumb li {
	font-size: 0.8em;
}
.naviBlock {
	width: 100%;
	display:none;
}
#footer {
	min-width:100%;
}
#footer02 {
	min-width:100%;
}
#footer .footerLinks {
	width: 100%;
}
#footer .inner {
	width: 100%;
	margin: 0 auto;
	padding: 15px 0;
	font-size: 90%;	
}
#footer02 .inner {
	width: 100%;
}
#footer02 .inner small {
	font-size: 0.65em;
}
#footer .footerLinks {
	padding: 10px 0;
}
#footer .footerLinks .linkBlock {
	width: 90%;
	float: none;
	border-left: none;
	padding: 0 5%;
}
#footer .footerLinks .linkBlock.last {
}
#footer .footerLinks .linkBlock ul {
	display: block;
	list-style: none;
	padding-bottom: 15px;
}
#footer .footerLinks .linkBlock ul li {
	display: block;
	list-style: none;
	padding-bottom: 15px;
	background: url(../images/common/ic_foot_link.png) no-repeat left 0.2em;
}
#footer .footerLinks .linkBlock ul li.last {
	padding-bottom: 0;
}
#footer02 p {
	padding-bottom:10px;
}
#pagetop {
	position: fixed;
	bottom: 10px;
	right: 3px;
}
#pagetop img {
	width:35px;
	height:35px;
}
.textSS {
	font-size: 0.8em;
	line-height: 1.4em;
}
.textSmall {
	font-size: 0.9em;
	line-height: 1.4em;
}
.textNormal {
	font-weight: 1em;
	line-height: 1.5em;
}
.textMiddle {
	font-size: 1.1em;
	line-height: 1.5em;
}
.textLarge {
	font-size: 1.2em;
	line-height: 1.5em;
}
.textLL {
	font-size: 1.4em;
	line-height: 1.6em;
}
.textLLL {
	font-size: 1.6em;
	line-height: 1.4em;
}
}

@media(max-width:959px){
.spBreak480 {
	display: block;
}
.spImgWidth {
	width:70%;
}
#content,
#content_top,
#content_full {
	margin-top:60px !important;
}
#headerLogo p {
	font-size:0.8em;
}
.circle_group {
  margin-bottom: 30px;
}
}

/* add 201903 sp gnavi */

@media(min-width:960px){
	#navi_button .btnWrapper,
  #navi_button .img_list,
  .navBtn {
    display: none;
  }
}
@media(max-width:959px){
  #wrapper {
    overflow: visible;
    transition: -webkit-transform 0.3s cubic-bezier(.03,.69,.19,.98) 0s;
    transition: transform 0.3s cubic-bezier(.03,.69,.19,.98) 0s;
    padding-top: 80px;
  }
  #wrapper.fixed {
    transform: translate3d(-275px,0,0);
  }
	#wrapper.fixed #header {
		position: absolute;
	}
  #header #navi_button {
    width: 275px;
    right: -275px;
    background: #fff;
    box-shadow: inset 2px 0px 10px rgba(0, 0, 0, 0.6);
		position: absolute;
		height: 100vh;
    z-index: 100;
  }
  #header.navOpen #navi_button {
    margin-top: 0 !important;
  }
  #content,
  #content_top,
  #content_full {
    margin-top: 0 !important;
  }
  #header #navi_button {
    margin-top: 0 !important;
  }
  #header #navi_button ul {
    margin-bottom: 20px;
  }
  #header .navi_scrollBody {
    overflow: auto;
    height: 100vh;
    background: #dfe6e6;
    padding: 20px 20px 100px;
  }
  /* sp list style */
	#header #navi_button ul li {
		border-color: #5D6078;
    border-bottom-style: dotted;
	}
  #header #navi_button ul li a {
    color: #00285d;
		padding: 12px 15px;
  }
  #header #navi_button ul li a:hover {
    background: #dfe6e6;
  }
	#header #navi_button ul li a:before {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 4px 0 4px 7px !important;
		border-color: transparent transparent transparent #254A7A !important;
		transform: rotate(0deg);
		right: auto;
		left: 0;
		top: 50%;
		margin-top: -5px;
	}

  /* sp img list style */
  #header #navi_button ul.img_list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 10px;
  }
  #header #navi_button ul.img_list li {
    width: 50%;
    padding: 10px;
    border-bottom: none;
  }
  #header #navi_button ul.img_list a {
    padding: 0;
  }
  #header #navi_button ul.img_list a::before {
    display: none;
  }
  #header #navi_button ul.img_list img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }
  #header .navBtn {
    margin-top: -5px;
  }
  #header .navBtn span.text {
    position: absolute;
    width: 50px;
    left: -10px;
    height: auto;
    background: none;
    font-size: 10px;
    white-space: nowrap;
    text-align: center;
    bottom: -18px;
  }
	#navi_button .btnWrapper {
		display: flex;
		flex-direction: column;
		padding-top: 10px;
	}
	#navi_button .btnWrapper .btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	#navi_button .btnWrapper .btn:hover {
		opacity: 0.7;
	}
	#navi_button .btnWrapper .btn + .btn {
		margin-top: 15px;
	}
	#navi_button .btnWrapper .btn-text {
		width: 100%;
		background: #000;
		text-align: center;
		padding: 10px 0;
		border-radius: 5px;
	}
	#navi_button .btnWrapper .is-fb .btn-text {
		background: #265a96;
	}
	#navi_button .btnWrapper .is-tw .btn-text {
		background: #00acec;
	}
	#navi_button .btnWrapper .is-ame .btn-text {
		background: #088f2a;
	}
}

/* wrapper padding-top */
@media(max-width:414px){
  #wrapper {
    padding-top: 73px;
  }
}
@media(max-width:375px){
  #wrapper {
    padding-top: 69px;
  }
}
@media(max-width:320px){
  #wrapper {
    padding-top: 65px;
  }
}