@charset "utf-8";

:root {
    /*default*/
	/*
	--main-color: #8e1515;
    --main-color-dark: var(--main-color);
	--main-color-light: #f8e6e6;
	--main-hue-rotate: 0;
	--main-saturate: 100%;
	*/
	
	/*winter version*/
	--main-color: #1e1654;
	--main-color-dark: #1a1636;
	--main-color-light: #dfe5f5;
	--main-hue-rotate: 251deg;
	--main-saturate: 50%;
	
}


/* BODY
---------------------------------------------*/

html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  list-style: none;
}

body {
  text-align: left;
  font-family: "segoe UI","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;
  font-size: 13px;
  color: #333;
}

input, select {
  padding: 1px;
}

img {
  vertical-align: bottom;
  border: none;
}

a   {
  color: #0059b2;
  outline: none;
  text-decoration: underline;
}

a, a:before, a:after, a img {
    transition: opacity .25s ease-in-out, color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, text-shadow .25s ease-in-out, filter .25s ease-in-out;
}

a:hover {
  color: var(--main-color);
  text-decoration: none;
}

table {
  border-collapse: collapse;
}

th,td {
  text-align: left;
  vertical-align: middle;
}

em,address {
  font-style: normal;
}

strong {
  font-weight: bold;
}

p {
  line-height: 1.8em;
}

.clear {
  clear: both;
}

/* ALL
---------------------------------------------*/

#all {
  position: relative;
  /* width: 980px;
  text-align: left;
  margin: 0 auto; */
}

.delay {
  font-weight: bold;
  color: #c00;
}

/* HEADER
---------------------------------------------*/

#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

#sec #header {
  position: relative;
}

#header .inner {
  width: 100%;
  margin: 0 auto;
}

#header h1 {
}

#header #logo {
  position: absolute;
  top: 9px;
  /*top: 12px; ロゴノーマル*/
  left: 25px;
}

#header #sitemenu {
  height: 94px;
  text-align: right;
  background: var(--main-color);
  padding-right:1em;
}

#header #sitemenu a {
  letter-spacing: -.3px;
  color: #fff;
  text-decoration: none;
}

#header #sitemenu a:hover {
  opacity: 0.6;
}


/* HEADER NAVI */

#hnavi {
  font-size: 13px;
}

#hnavi ul {
  letter-spacing: -.40em;
  text-align: right;
}

#hnavi li {
  position: relative;
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
  margin: 0;
  padding: 12px 24px 10px 10px;
  letter-spacing: normal;
}

#hnavi li a:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -3px;
  border-style: solid;
  border-width: 3px 5px;
  border-color: transparent;
  border-left-color: #fff;
  content: "";
  box-sizing: border-box;
}

#header #hnavi li.lang {
  padding: 0;
}
#header #hnavi .lang a {
  padding: 14px 26px 13px;
  background: #fff;
  font-weight: bold;
  color: var(--main-color);
}


/* GLOBAL NAVI */

#gnavi {
  padding-right: 10px;
  letter-spacing: -.40em;
  font-size: 15px;
  font-weight: bold;
}

#gnavi li {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
  margin: 0;
  padding: 14px 12px;
}

#gnavi li a {
  display: block;
  overflow: hidden;
}


/* Navigation ToolTip */

/* .tipsy {
  position: relative;
  margin-top: 16px;
  padding: 5px 14px;
  background-repeat: no-repeat;
  background-image: url(/img/common/tipsy.png);
}

.translated-ltr .tipsy {
  margin-top: -28px;
}

.tipsy-inner {
  padding: 3px 8px;
  background-color: #231c6d;
  font-size: 11px;
  color: #fff;
  max-width: 500px;
  text-align: center;
}

.tipsy-inner {
  -moz-border-radius:3px;
  -webkit-border-radius:3px; }

.tipsy-north {background-position: top center;
}
.tipsy-south {background-position: bottom center;
}
.tipsy-east {background-position: right center;
}
.tipsy-west {background-position: left center;
}
 */
/* CONTENTS
---------------------------------------------*/
#contents {
}

#wrap {
  width: 980px;
  text-align: left;
  margin: 0 auto;
  padding-bottom: 50px;
}

#sec #contents {
  padding-bottom: 50px;
}

#sec #contents h2 {
  height: 170px;
  margin: 0 auto;
  padding-top: 62px;
  background: url(../img/common/bg_sec_contents.png) left top no-repeat;
  background-size: cover;
  text-align: center;
  box-sizing: border-box;
}

#sec #contents h2 span {
  padding: 18px 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-size: 32px;
  font-weight: normal;
  color: #fff;
  letter-spacing: 3px;
}

#sec #contents #pathline {
}

/* PATH LINE */

#pathline {
  position: relative;
  height: 40px;
  margin-bottom: 50px;
  background: #f4f4f4;
}

/* TOPIC PATH */
#path {
  width: 980px;
  margin: 0 auto;
  text-align: left;
}

#path li {
  display: inline;
  line-height: 36px;
  font-size: 92%;
}

#path li a {
  margin-right: 0.5em;
}

/* FONT SIZE */

#sec #fontsize {
  position: relative;
  width: 980px;
  margin: 0 auto;
}

#sec #fontsize ul {
  position: absolute;
  top: -27px;
  right: 0px;
  width: 188px;
  padding-left: 110px;
  box-sizing: border-box;
  background: url(../img/common/bg_fontsize.png) left 4px no-repeat;
}

#sec #fontsize li {
  float: left;
  display: block;
  width: 21px;
  height: 17px;
  margin-left: 5px;
}

#fontsize li img {
  vertical-align: top;
}

/* TITLE STYLE */
.ttl-style1 {
  margin-bottom: 20px;
  padding: 5px 14px;
  border-left: 9px solid var(--main-color);
  font-size: 24px;
}

.ttl-style2 {
  margin-bottom: 15px;
  padding: 14px 0;
  font-size: 20px;
  border-top: 2px solid var(--main-color);
  border-bottom: 1px solid #ccc;
}

/*タイトル小級*/
.ttl-style3 {
  margin-bottom: 20px;
  padding: 5px 14px;
  border-left: 9px solid var(--main-color);
  font-size: 22px;
}

/* LAYOUT */

#main {
  float: left;
  width: 740px;
}

#side {
  float: right;
  width: 220px;
}

#single {}

/* SIDE*/

.sidebox {
  padding: 4px;
}

.sidebox h4 {
  padding: 10px 0 10px 2px;
  font-size: 15px;
}

.sidebox dl {
  padding: 7px 4px 3px 4px;
  background-color: #fff;
}

.sidebox .sideinfowrap {
  padding: 10px 6px 3px 6px;
  background-color: #fff;
}

.sidebox .sideinfo h5 {
  font-weight: bold;
  padding-left: 16px;
  background: url(../img/common/arw_holiday.gif) 2px 0.3em no-repeat;
}

.sidebox .sideinfo .textwidget p {
  margin-top: 0.5em;
  line-height: 1.5em;
}

.sidebox .sideinfo .textwidget p strong {
  color: #0e1275;
}

.sidebox .sideinfo .textwidget {
  margin-bottom: 0.8em;
}

#side .sidenavi {
  padding: 4px;
  background-color: var(--main-color-light);
}

#side .sidenavi dt {
  padding: 10px 8px;
  font-size: 15px;
  font-weight: bold;
}

#side .sidenavi dd {
  margin-bottom: 5px;
}

#side .sidenavi dd:last-child {
  margin-bottom: 0;
}

#side .sidenavi dd .subttl {
  margin-bottom: 5px;
  padding: 6px 8px 4px 8px;
  font-weight: bold;
  background: var(--main-color);
  color: #fff;
}

#side .sidenavi dd ul {
}

#side .sidenavi dd ul li {
  margin-bottom: 3px;
  background: #fff;
}

#side .sidenavi dd ul li:last-child {
  margin-bottom: 0;
}

#side .sidenavi dd ul li a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 12px 10px 12px 23px;
  background: url(../img/common/arw_sidelist01.gif) 12px 1.45em no-repeat;
}

#side .sidenavi dd ul li.strong {
  margin-bottom: 8px;
  font-weight: bold;
  background: #fbffcc;
}

#side .sidenavi dd ul li.open {
  padding-bottom: 10px;
}

#side .sidenavi dd .singleside li.open {
  background-color: #fff;
  border-bottom: none;
}

#side .sidenavi dd ul li.open a {
  font-weight: bold;
  background: url(../img/common/arw_sidelist02.gif) 12px 1.45em no-repeat;
}

#side .sidenavi dd .singleside li.open a {
  font-weight: bold;
  /* background: url(../img/common/arw_sidelist02.gif) 12px 1.45em no-repeat; */
}

#side .sidenavi dd ul li.open ul li a {
  color: #333;
  font-weight: normal;
  background: none;
}

#side .sidenavi dd .singleside li.open ul li a {
  color: #333;
  font-weight: normal;
  background: none;
}

#side .sidenavi dd ul li.crnt a {
  font-weight: bold;
}

#side .sidenavi dd ul li a:hover {
  color: var(--main-color);
  font-weight: bold;
}

#side .sidenavi dd .singleside li.open a:hover {
  color: var(--main-color);
  font-weight: bold;
}

#side .sidenavi dd ul li ul {
  margin-top: -2px;
}

#side .sidenavi dd ul li ul li {
  text-indent: -0.8em;
  margin-left: 2em;
  border-bottom: none;
}

#side .sidenavi dd ul li.open a:hover {
  background-image: url(../img/common/arw_sidelist02.gif) 12px 1.45em no-repeat;
}

#side .sidenavi dd ul li.open ul li a:hover {
  background: none;
}

#side .sidenavi dd ul li ul li a,
#side .sidenavi dd ul li ul li a:hover {
  padding: 4px 5px 4px 0;
  background: none;
}

#side .sidenavi dd ul li ul li a:hover {
  color: var(--main-color);
  font-weight: bold;
}

#side .sidenavi dd .singleside li.open ul li a:hover {
  color: var(--main-color);
  font-weight: bold;
  background: none;
}

#side .sidenavi dd li.nobdr {
  border-bottom: none;
}

#side .bnr {
  margin-top: 10px;
}
#side .bnrList {
  margin-top: 10px;
}

/* SIDE _HOLIDAY */

#sec #side #holiday {
  margin-top: 1.3em;
}

#side #holiday {
  background-color: var(--main-color-light);
}

#side #holiday h4 {
  padding-left: 26px;
  background: url(../img/common/bg_ttl_sideinfo.gif) 4px 12px no-repeat;
}

#side #holiday dl {
  padding: 1em 0.5em;
}

#side #holiday dt {
  font-weight: bold;
  padding-left: 14px;
  background: url(../img/common/arw_holiday.gif) 2px 0.3em no-repeat;
}

#side #holiday dd ul {
  margin-top: 0.8em;
}

#side #holiday dd ul li {
  margin-bottom: 0.3em;
}

#side #holiday dd p {
  margin-top: 0.5em;
  line-height: 1.5em;
}

/* SIDE _CAMPAIGN 2012 */

.sidecamp {margin-top: 15px;
}


/* COMMON TEXT STYLE */

.center {
  text-align: center;
}
.right {
  text-align: right;
}

.ind {
  text-indent: -1.3em;
  margin-left: 1.3em;
}

.inner {
  margin-bottom: 30px;
  overflow: hidden;
}

.adobe {
  display: block;
  font-size: 85%;
}

.arrow {
  padding-left: 16px;
  background: url(/img/common/arw_link.gif) left 0.3em no-repeat;
}

/* TITLE */

#single h3 {
  margin-bottom: 20px;
}

.mainttl {
  height: 50px;
  font-size: 150%;
  color: #fff;
  line-height: 45px;
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  padding-left: 12px;
  background: url(../img/common/bg_mainttl.jpg) left top no-repeat;
}

.basettl {
  font-size: 120%;
  margin-bottom: 1.5em;
  padding: 0.5em 0.5em 0.3em 0.5em;
  border-bottom: 2px solid #271269;
  background-color: #f8f8f8;
}

/* DOWNLOAD */

.pdf {
  font-weight: bold;
  line-height: 32px;
  margin: 0.5em 0 0.5em 2px;
  padding-top: 3px;
  padding-left: 40px;
  background: url(../img/common/icn_pdf.gif) left center no-repeat;
}

.word {
  font-weight: bold;
  line-height: 32px;
  margin: 0.5em 0 0.5em 2px;
  padding-top: 3px;
  padding-left: 40px;
  background: url(../img/common/icn_word.gif) left center no-repeat;
}

/* COMMON TABLE STYLE */

.basetbl01 {
  width: 100%;
}

.basetbl01 th,
.basetbl01 td {
  text-align: left;
  vertical-align: middle;
  padding: 1em;
  border: 1px solid #ccc;
}

/* COMMON LIST STYLE */

.listnum li {
  text-indent: -2em;
  line-height: 1.8em;
  margin-left: 2em;
  margin-bottom: 1em;
}

/* PAGETOP */

.inpagetop {
  text-align: right;
  margin-top: 30px;
  margin-bottom: 10px;
}


/* FOOTER
---------------------------------------------*/

#footer {
  position: relative;
  height: 385px;
  padding-top: 0px;
  margin-top: 100px;
}

#footer .inner {
  width: 980px;
  margin: 0 auto;
  color: #fff;
}

#footer a {
  color: #fff;
  text-decoration: none;
}

#footer a:hover {
  opacity: 0.6;
}


/* PAGE TOP */

#footer #pagetop {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 70px;
  height: 70px;
  }

#footer #pagetop a {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding-top: 26px;
  background: var(--main-color);
  border: 1px solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
  text-align: center;
  -webkit-transition:all 0.3s;
  -moz-transition:all 0.3s;
  transition:all 0.3s;
}

#footer #pagetop a:hover {
  /*background: #620e0e;*/
}

/* FOOTER CONTENTS */

#ft_top {
  background: var(--main-color);
  font-size: 14px;
}

#ft_top .inner {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  padding: 30px 0;
}

#ft_top .ftnavi {
  width: 100%;
  padding: 2px 22px;
  border-left: 1px solid var(--main-color-light);
  box-sizing: border-box;
}

#ft_top .ftnavi:last-child {
  border-right: 1px solid var(--main-color-light);
}

#ft_top .ftnavi ul li {
  padding: 6px 0;
}

#ft_top .ftnavi > ul > li > ul {
  padding-left: 14px;
}

#ft_bottom {
  padding: 40px 0;
  background: var(--main-color-dark);
}

#ft_bottom #ftaddress {
  margin-bottom: 20px;
  letter-spacing: -.4em;
}

#ft_bottom #ftaddress dt {
  display: inline-block;
  vertical-align: bottom;
  width: 25%;
  letter-spacing: normal;
}

#ft_bottom #ftaddress dd {
  display: inline-block;
  vertical-align: bottom;
  width: 75%;
  margin-bottom: -4px;
  letter-spacing: normal;
  font-size: 13px;
}

/* COPYRIGHT */
.copyright {
  text-align: left;
  font-size: 12px;
}

/* 404 NOT FOUND
---------------------------------------------*/

#notfound {
  padding-top: 25px;
}

#notfound p {margin-top: 2em;
}


/* CAMPAIGN 2012
---------------------------------------------*/

.campbnr {
  text-align: center;
  margin-top: 40px;
}




/* CLEARFIX
---------------------------------------------*/

.cl:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.cl{ display: inline-block; }

/* Hides from IE-mac \*/
* html .cl { height: 1%; }
.cl { display: block; }
/* End hide from IE-mac */


/* font
---------------------------------------------*/
.x-small { font-size: 70%; line-height: 120%; }
.small { font-size: 82%; line-height: 120%; }
.medium { font-size: 100%; }
.large { font-size: 120%; line-height: 150%; }
.x-large { font-size: 140%; line-height: 150%; }


/* COLOR BOX
---------------------------------------------*/
.icoZoom {
    display:block;
    position:relative;
}

.icoZoom::before {
	display:block;
    content:"";
	position:absolute;
	right:5px;
	bottom:5px;
	width:22px;
	height:22px;
	background:url(/img/common/icon-zoom.png) no-repeat center;
}

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;outline: none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

button {
  border: none !important;
  border-color: none;
}
/*
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:url(../img/colorbox/overlay.png) 0 0 repeat;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(../img/colorbox/controls.png) -100px 0 no-repeat;}
    #cboxTopRight{width:21px; height:21px; background:url(../img/colorbox/controls.png) -129px 0 no-repeat;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../img/colorbox/controls.png) -100px -29px no-repeat;}
    #cboxBottomRight{width:21px; height:21px; background:url(../img/colorbox/controls.png) -129px -29px no-repeat;}
    #cboxMiddleLeft{width:21px; background:url(../img/colorbox/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../img/colorbox/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../img/colorbox/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../img/colorbox/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom: 0; left:0; text-align:center; width:100%; color:#333; font-size: 14px;}
        #cboxCurrent{position:absolute; bottom: 0; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(../img/colorbox/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/colorbox/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(../img/colorbox/loading_background.png) center center no-repeat;}
        #cboxLoadingGraphic{background:url(../img/colorbox/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../img/colorbox/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose.hover{background-position:-25px -25px;}

/*
    The following fixes png-transparency for IE6.
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition

    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.

    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}


/* FONT COLOR
---------------------------------------------*/
.txtOrg {
  color:#ff7c7b;
}

.txtRed {
  color:#8e1515;
}

.txtDarkBlue {
  color:#0d126d;
}

.txtGreen {
  color:#00843f;
}

.txtLightBlue {
  color:#00a3f0;
}

.txtBlueGreen {
  color:#009da0;
}

.txtPurple {
  color:#80509d;
}

.txtGray {
  color:#607384;
}

.txtBold {
  font-weight:bold;
}

/* ホール休館
---------------------------------------------*/
section#hall-close {
	border:solid 1px #ccc;
	padding:20px;
	margin:0 auto 50px;
}

section#hall-close h3.hall-close-ttl {
	font-size:140%;
	margin-bottom:10px;
	padding:0;
	color:#D60206;
	background-image: none;
}

section#hall-close p {
	line-height: 180%;
	font-size:120%;
}

/*　button　*/
#hall-close p.btn {
	width:300px;
	margin:20px auto;
}

#hall-close p.btn:last-child {
	margin-bottom: 0;
}

.button {
  display: inline-block;
  width: 300px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button {
  background-color: #ff9900;
  color: #fff;
}
.button:hover {
  background-color: #e48900;
  color:#fff;
}

/* IE未対応 #fontsize .changeBtn { filter: hue-rotate(var(--main-hue-rotate)) saturate(var(--main-saturate)); }*/