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

*::selection {background: var(--accent-color); color: #fff;}
*::-moz-selection {background:  var(--accent-color); color: #fff;}
img::selection {background: var(--gray-color1);}
img::-moz-selection {background:  var(--gray-color1);}

:root {
    --main-color:#222;
    --accent-color:#d7322d;
    --white-color:#fff;
    --gray-color1:#666;
    --gray-color2:#ccc;
    --gray-color3:#eee;
}

/* ----------------------------------------------------
   Basic setting:
------------------------------------------------------- */

/* reset:
--------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
}

ul,ol {list-style: none;}
em,address {font-style: normal;}
input {border: none;}

/*focus*/

button:focus {
    outline: 2px solid var(--main-color);
}

/*-- button --*/

button {
	border: none;
	background: none;
	transition: all 300ms 0s ease;
    color: var(--main-color);
}
button:hover {cursor: pointer;}


input[type="text"] {
    border: none;
    border-radius: 0;
    outline: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
}

button,
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    background: transparent;
	border-radius:0
}

/* Basic
--------------------------------------------*/

html {
	scroll-behavior: smooth;
	font-size: 16px;
	box-sizing: border-box;
}

@media screen and (max-width: 1280px){
	html {font-size: 14px;}
}
body {
	font-size: 1rem;
	line-height: 1.7rem;
    color: var(--main-color);
	position: relative;
    font-family:"ヒラギノ角ゴ Pro W3" ,"Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS  PGothic", sans-serif;
}

/*---- インフォメーション ----*/

#info{
    background: var(--main-color);
/*    display: inline-block;*/
    position: fixed;
    width: 6rem;
    right: 10px;
    bottom: 90px;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding:0.5rem;
    z-index: 996;
    font-family: 'Roboto', sans-serif;
}

#info time{
    font-size: 1.5rem;
    margin: 0 0.4rem;
    display: block;
}
#info time span{
    width: 1.3em;
    text-align: center;
    position: relative;
    display: block;
}
#info time .mm{
    margin: 0 auto 0 0;
}
#info time .dd{
    margin: 0 0 0 auto;
}

#info time .mm:after{
	content: "";
	display: inline-block;
    width: 30px;
    height: 30px;
    border-top: 1px solid #fff;
    transform: rotate(135deg);
	position: absolute;
    left: 24%;
	top: 1px;
}

@media screen and (max-width: 1280px){
    #info time .mm:after{
        left: 10%;
        top: -1px;
    }
}

#info .i_calendar span,
#info .i_access span{
    color: #FFF;
    font-size: 0.7rem;
    display: block;
}
#info .i_calendar img,
#info .i_access img{
    width: 40%;
    text-align: center;
    display: block;
    margin: 0 auto;
}

#info .i_calendar{
    margin: 0.8rem 0 0.3rem 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--gray-color1);
}
#info .i_access{
    margin: 0.8rem 0 0.3rem 0;
    border-top: 1px solid var(--gray-color1);
    padding: 0.5rem 0;
}

#info .openclose{
    background: var(--white-color);
    color:  var(--main-color);
    border-radius: 5px;
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

#info .time span{
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 0.5rem;
}
#info .time span:after{
	content: "";
	display: block;
    position: absolute;
    width: 20%;
    height: 30px;
    border-top: 1px solid #fff;
    top: 110%;
    left: 40%;

}

#info p a{
    display: block;
}
#info p a:focus,
#info button:focus{
    outline: 2px solid #fff;
}
#info ul li a img{
    width: 100%;
}

#info ul li:last-child{
    margin-top: 0.8rem;
    padding-top: 0.8rem;
	border-top: 1px solid var(--gray-color1);
}

#info .info_close{
    position: absolute;
    height: 1.8rem;
    width: 1.8rem;
    right: 0;
    top: -2rem;
    color: #fff;
    background: var(--main-color) url(../img/common/icon_close2.svg) no-repeat;
    border-radius: 20px;
    text-indent: -10000px;
}

#info .info_close:focus {outline: 2px var(--accent-color) solid;}
/*---- block_skip ----*/

#block_skip a {
	display:block;
	height: 0;
	overflow: hidden;
	padding-left: 20px;
	color: #fff;
	background: var(--main-color);
	font-size: 100%;
	text-align: center;
}

#block_skip a:before {
	content: "";
	display: inline-block;
    width: 12px;
    height: 12px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(135deg);
	position: relative;
	margin-right: 10px;
	bottom: 3px;
}

#block_skip a:focus {
	height: auto;
	line-height: 3em;
	outline: 2px var(--accent-color) solid;
}


/*---- gdpr ----*/

#gdpr{
	background: var(--gray-color3);
    border: 1px solid var(--gray-color2);
	bottom:30px;
    left: 15%;
	width:70%;
	z-index:999;
	display:none;
	padding:1.5rem 5rem 1rem;
	position:fixed;
}

#gdpr button {
	border: 1px solid var(--gray-color2);
	padding: 0.5rem 1rem;
	margin: 0.5rem 0;
}

#gdpr a {
	text-decoration: underline;
}

#gdpr a:hover {text-decoration: none;}




/*---- outline ----*/

.outline {
	max-width: 2222px;
	width: 86%;
	margin: 0 7%;
}

@media screen and (max-width: 1600px){
    .outline {
    	width: 94%;
        margin: 0 3%;
    } 
}
.outline2 {
	width: 70%;
	max-width: 1000px;
	margin: 0 auto 3rem;
}

h2.ttl2 {
	font-size: 1.8rem;
    text-align: center;
	margin-bottom: 2rem;
}

/* header:
--------------------------------------------*/

header {
	position: relative;
    padding-bottom: 1rem;
}
@media screen and (max-width: 1280px){
header {
    padding-bottom: 0rem;
}

}

/*---- logo ----*/

header .logo {
    position: absolute;
    left: 0;
    padding: 0.5rem;
    background: #fff;
    z-index: 995;
    width: 9vw;
    transition: all 300ms 0s ease;
}

@media screen and (min-width: 1281px){
header .logo {
    border-bottom-right-radius: 20px;
}
}

header .logo.scroll{
    width: 6vw;
}
header .logo a {
    display: block;
    text-align: center;
}
header .logo img {
    width: 80%;
}

/*---- header_t ----*/

#header_t {
	display: flex;
	justify-content: flex-end;
    margin-bottom: 1em;
}
#header_t{
    margin: 0 0 1rem;
}

@media screen and (min-width: 1281px){
#header_t{
    margin: 0 0 1rem 3rem;
}
}
.sns{
    padding: 1rem;
}
.sns li{
	display: inline;

}
.sns li a{
	display: inline-block;
    width: 2.5rem;
    padding: 0 0.5rem;
}

.access a img,
.sns li a img{
    width: 100%;
}
.access{
    padding: 1rem;
}
.access a{
    display: block;
    width: 2rem;
}

/*---- search ----*/

#search{
    display: block;
    padding: 1rem 0;

}

#search form {
    padding: 0 0 0 5%;
	border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #ffffff;
}

#search table td:last-child{width: 2.5rem;}
#search table td:last-child div {text-align: center;}

#search .fessWrapper,
#search .fessFormOnly,
#search .fessWrapper .form-control,
#search .searchButton {
    border: none;
    padding: 0;
    margin: 0;
}
@media screen and (min-width: 1281px){
#search .fessWrapper table div{ 
    max-width: 12rem;
}
}

#search .fessWrapper input[type="text"] {
	font-size: 0.9rem;
	width: 96%;
    margin: 2%;
}

#search .searchButton {
    width: 2.5rem;
	display: inline-block;
	position:relative;
	cursor:pointer;
	color:#fff;
    background:url(../img/common/icon_search.svg) no-repeat center 0.4em;
    background-size: 1.1rem;
    padding: 0.2rem 0;
    text-indent: -10000px;
}
#search .searchButton:focus {outline: 2px var(--main-color) solid;}

#search table,
#search table td,
#search table td div{
    border: none;
    box-sizing: border-box;
	text-align: center;
}

@media screen and (max-width: 1280px){

#search{margin:0 1rem;}
#search form {
    padding: 0 2%;
}
#search input[type="text"] {
	width: 100%;
    margin: 1% 0;
    padding: 0.5% 0;
}
#search input[type="submit"] {
    width: 3rem;
    background:url(../img/common/icon_search.svg) no-repeat center 0.5em;
    background-size: 2.2rem;
    padding: 0.5rem 0;
}
}

@media screen and (max-width: 959px){

#search input[type="submit"] {
    background:url(../img/common/icon_search.svg) no-repeat center 0.7em;
    background-size: 1.5rem;
    padding: 0.7rem 0;
}

}

/*---- overlay ----*/
.overlay {
    position: absolute;
    z-index: 100;	
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    display: none;
}

/*---- hamburger menu ----*/

.sp_btn,
.close_btn{ display: none;}

/*---- lang ----*/

.lang {
	position: relative;
    z-index: 99;
}

.lang h2 button,
.lang ul{
    width: 10rem;
}

.lang button {
	position: relative;
	font-size: 0.9rem;
    margin: 1rem 0 0;
	padding: 0.5rem 40px 0.5rem 52px;
	background: url("../img/common/icon_lang.svg") no-repeat 15px 50%;
	background-size: 26px;
	text-align: left;
    font-family: 'Roboto', sans-serif;
    display: block;
}

.lang button:before{
	content: "";
	display: block;
	position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height:20px;
    background: url("../img/common/arrow02_g.svg") no-repeat;
}
.lang.on button:before{
    transform: rotate(180deg);
}

.lang button.on {
	border-bottom: none;
}

.lang button.on::before{
	top: 1.4rem;
	transform: rotate(315deg);
}

.lang ul {
	display: none;
	position: absolute;
	font-size: 0.9rem;
	border: 1px solid #777;
	border-top: none;
    background: #fff;
    margin: 0;
}

.lang ul a {
	display: block;
	padding: 0.3rem 1rem;
}

.lang ul a:hover {background: var(--gray-color3);}


/* glnav:
--------------------------------------------*/
#glnav > ul {
	display: flex;
	justify-content: flex-end;
    line-height: 1.5rem;
    margin: 0 0 0 7vw;
}

#glnav > ul > li {
    margin: 0 0 0 1.5rem;
}
#glnav > ul > li >a{
    font-weight: bold;
}
#glnav .mega_menu{
    width: 100%;
    padding: 2% 10% 2% 15%;
	display: none;	
    position: absolute;
    z-index: 994;
	background:var(--gray-color3);
    left: 0;
}

#glnav .mega_menu > ul  {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#glnav .mega_menu > ul > li  {
/*    width: 47%;*/
    margin:0 2rem 1rem 0;
}

#glnav .mega_menu > ul > li > a{
    background: url("../img/common/arrow01.svg") no-repeat 0 0.5em;
    background-size: 16px;
	padding: 0.5rem 0 0.5rem 2rem;
}
#glnav .mega_menu > ul > li > a:hover{
    opacity: 0.7;
}

#glnav .category{
    display: flex;
    justify-content:space-between;
    border-bottom: solid 1px var(--accent-color);
    margin: 0 0 1rem;
}

#glnav .category h2 a{
    display: block;
    background: url("../img/common/arrow04.svg") no-repeat 0.5rem 0.3em;
    background-size: 20px;
	padding: 0.2rem 1rem 0.2rem 35px;
    font-size: 1.2rem;
    margin: 0.3rem 0 0.5rem;
}


/*閉じる*/
#glnav .mega_menu .close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    text-indent: -10000px;
	display: block;
    color: var(--accent-color);
	padding: 1rem 1rem 0;
	background: url("../img/common/icon_close.svg") no-repeat;
}

@media screen and (max-width: 1280px){

/* 1280px～ハンバーガー*/    
#glnav > ul{
    display: block;
    margin: 0 0 5rem;
}

#glnav > ul > li {
    margin: 0 1rem;
}
#glnav > ul > li > a{
    position: relative;
    display: block;
	padding: 1.5rem 40px 1.5rem 1rem;
    border-bottom: solid 1px var(--gray-color3);
    font-weight: bold;
    font-size: 1.4rem;
}
#glnav > ul > li > a:after{
    content: "";
    display: block;
    position: absolute;
    right: 0px;
    top: 1.5rem;
    width: 25px;
    height: 20px;
    background: url("../img/common/arrow02.svg") no-repeat;
    background-size: 25px;
}

#glnav > ul > li.direct > a:after{
    transform: rotate(-90deg);
}
#glnav > ul > li.on > a:after{
    transform: rotate(180deg);
}


#glnav > ul > li:last-child > a{
    width: 100%;
}

#glnav .mega_menu{
    position: relative;
	background:#fff;
	padding: 1em;
}

#glnav .mega_menu > ul  {
    display: block;
    flex-wrap: wrap;
}

#glnav .mega_menu > ul > li  {
    width: 100%;
}

#sp_wrapper {
	position: fixed;
	background:var(--white-color);
    top: 0;
	z-index: 997;
	width: 87%;
	right: -87%;
	height: 100%;
	border: none;
	padding: 0;
    overflow-y: scroll;
}
#header_t{
    display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
    margin: 0 1rem;
}

#header_t .sns{
    order: 4;
}
#header_t .lang{
    order: 1;
}
#header_t .lang button{
    font-size: 1.2rem;
}
#header_t #search{
    order: 3;
}
#header_t .access{
    order: 2;
}
#search{
    width: 100%;
}

.lang h2 button,
.lang ul{
    width: 12rem;
}
/*----humberger menu----*/    

.sp_btn{
	position: fixed;
    bottom: 15px;
    right: 27px;
	display: block;
	cursor: pointer;
	z-index: 998;
    }

.sp_btn img{
	display: block;
	width: 54px;
	height: 54px;
}

.sp_btn img.close {display: none;background: #fff;}
.sp_btn img.open {display: none;background: #fff;}

}
    

@media screen and (min-width:1281px){
#glnav > ul > li > a{
    position: relative;
    padding: 0 0 0.5rem;
    display: inline-block;
}

#glnav > ul > li > a:hover{
    color: var(--accent-color);
}

#glnav > ul > li > a:after {
    position: absolute;
    bottom:0;
    left:25%;
    content: '';
    width:50%;
    height:2px;
}

#glnav > ul > li >a:hover::after {
    left:0;
    width:100%;
    background-color: var(--accent-color);
    transition: 0.3s;	
}

#glnav > ul > li > em:after {
    position: absolute;
    left:0;
    bottom:0;
    content: '';
    background-color: var(--accent-color);
    width:100%;
    height:2px;
}
}

/*---- main ----*/

main {
	position: relative;
}

/*---- link button ----*/

/*-- link --*/

a {color: var(--main-color);text-decoration: none;transition: all 300ms 0s ease;}
a:focus,
input:focus,
button:focus {outline: 2px var(--main-color) solid;}

/* Utility
--------------------------------------------*/

/*---- float ----*/

.clear {clear: both;}
.float_l {float: left;}
.float_r {float: right;}

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

/*-- img --*/

img.img_r {
	float: right;
	padding: 0 0 1rem 1rem;
	max-width: 50%;
}

/*-- icon --*/

img.icon {
    margin-left: 0.5rem;
    vertical-align: middle!important;
    width: 20px;
}

/*---- align ----*/


.align_c { text-align: center!important; }
.align_l { text-align: left!important; }
.align_r { text-align: right!important; }
.valign-m { vertical-align: middle !important; }
.valign-t { vertical-align: top !important; }
.valign-b { vertical-align: bottom !important; }

/*---- padding ----*/
.pd_0 { padding: 0!important; }
.pd_1 { padding: 1rem !important; }
.pd_b1 { padding-left: 1rem !important; }


/*---- margin ----*/
.mg_0 { margin: 0!important; }
.mg_1 { margin: 1em!important; }
.mg_2 { margin: 2em!important; }

.mg_t1 { margin-top: 1rem!important; }
.mg_b0 { margin-bottom: 0!important; }
.mg_b1 { margin-bottom: 1em!important; }
.mg_b2 { margin-bottom: 2em!important; }
.mg_b3 { margin-bottom: 3em!important; }
.mg_b4 { margin-bottom: 4em!important; }
.mg_b5 { margin-bottom: 5em!important; }
.mg_l1 { margin-left: 1em!important; }

.mg_auto{margin: 0 auto;}
/*---- font ----*/
span.fs8{display: block;}
.fs8{
    font-size: .8rem;
    line-height: 1.2rem;
}
.f_en {
	font-family: 'Roboto', sans-serif;
}
 
/*---- border ----*/

.border_none{border: none!important;}

/*---- bold ----*/

.bold{font-weight: bold;}
.italic{font-style: italic;}
.caption{font-size: 0.8rem;}
.i_caption{font-size: 0.8rem; font-style: italic;}

/*---- color ----*/

.red {color: var(--accent-color);}
.gray1 {color: var(--gray-color1);}
.gray2 {color: var(--gray-color2);}
.gray3 {color: var(--gray-color3);}


/*---- .width ----*/

.w10 { width: 10%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w33 { width: 33%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }


.w20_sp50 { width: 20%; }
.w30_sp70 { width: 30%; }
.w30_sp70 { width: 30%;}
.w50_sp70 { width: 50%;}
.w100_sp70 { width: 100%; }


/* Utility
--------------------------------------------*/

.pc{display: block;}
.sp{display: none;}

/*---- flex grid system ----*/

.flex{
	display: flex;
	justify-content:space-between; /* 等間隔 */
}
.flex.start{
    justify-content: flex-start;
}
.flex.clm2,
.flex.clm3,
.flex.clm4,
.flex.clm5,
.flex.clm6{
	flex-wrap: wrap;
}

.flex > * {
	box-sizing: border-box;
	margin: 0 0 1rem;
}
.flex.clm2 > * { width: 48%;}
.flex.clm3 > * {width: calc(100% / 3);}
.flex.clm4 > * { width: 23%;}
.flex.clm5 > * { width: 18%;}
.flex.clm6 > * { width: 15%;}

.flex .clm1_4 { width: 23%;}
.flex .clm3_4 { width: 75%;}
.flex .clm1_3 { width: 33%;}
.flex .clm2_3 { width: 65%;}

.flex_img{
    width: auto;
    max-width: 100%;
}

@media screen and (max-width: 1260px){
    .flex.clm4.tab > * { width: 48%;}
    .flex.clm4.tab > * img { 
        display: block;
        margin: auto;
    }
}

/* element setting:
--------------------------------------------*/

/*---- img  ----*/

img {
	border: none;
	vertical-align: middle;
	max-width: 100%;
    height: auto;
}

/*---- link ----*/

.lnk1,
.lnk2,
.lnk3{
    margin: 0 auto 3rem;
    text-align: center;
}

.lnk1 a,
.lnk2 a,
.lnk3 a,
.lnk4 a,
.lnk5 a{
    color:var(--main-color);
    text-decoration: none;
}
.lnk1 a:hover,
.lnk2 a:hover,
.lnk3 a:hover,
.lnk4 a:hover,
.lnk5 a:hover{
    opacity: 0.8;
}

.lnk1 a {
    padding: 10px 50px 10px 30px;
	display: inline-block;
	border: 1px solid var(--gray-color2);
    border-radius: 8px;
    background: url("../img/common/arrow03.svg") no-repeat;
    background-position: right 1em center;
    background-size: 25px;
}

.lnk1 a:hover{
    color:var(--accent-color);
	border: 1px solid var(--accent-color);
}

.lnk1.mgr1 a{
    margin-right: 1rem;
}
.lnk1.pd1 a{
    padding: 10px 50px 10px 10px;
}

.lnk2 a {
    padding: 15px 50px 15px 30px;
	display: inline-block;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background:var(--gray-color3) url("../img/common/arrow03.svg") no-repeat;
    background-position: right 1.5em center;
    background-size: 25px;
}
.lnk2.icon a{
    padding: 15px 50px 15px 30px;
    position: relative;
    background:var(--gray-color3);
}

.lnk2 a:hover{
    background:var(--gray-color2) url("../img/common/arrow03_w.svg") no-repeat;
    background-position: right 1em center;
    background-size: 25px;
}

.lnk2.icon a:hover{
    background:var(--gray-color2);
}


.lnk3{text-align: center;}
.lnk3 a{
    display: inline-block;
    border-radius: 5px;
    padding: 10px 50px 10px 30px;
    color: #fff;
    background: var(--accent-color);
}
.lnk3 a:hover{
    background: #BC120F;
}

.lnk1.icon a,
.lnk3.icon a{
    padding: 10px 50px 10px 30px;
    position: relative;
}
.lnk1.icon a img,
.lnk2.icon a img,
.lnk3.icon a img{
    position: absolute;
    right: 1rem;
    margin: 0 0 0 2rem;
    width: 25px;
	height: auto;
    top: 50%;
    transform: translate(0, -50%);
}
.lnk1.icon a{
    background:none;
}

.lnk4 a {
	padding: 0.5rem 1rem;
	display: block;
    background:url("../img/common/arrow03.svg") no-repeat;
    background-position: right 1em center;
    background-size: 25px;
    border-bottom: solid 1px var(--gray-color2);
}

.lnk5{
    text-align: right;
    margin: 0.5rem 0;
}
.lnk5 a{
    display: inline-block;
    background:url("../img/common/arrow03.svg") no-repeat right 0.2rem top 0.8rem;
    background-size: 20px;
	padding: 0.5rem 30px 0.5rem 1rem;
}

main a[target="_blank"] img.icon{
    width: 25px;
	height: auto;
}


/*角丸*/

.radi img,
img.radi_img{
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.radi_l img,
img.radi_l_img{
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}


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

footer{
    background: var(--gray-color3);
    padding: 0rem 0 0;
    overflow: hidden;
}
footer > .outline{padding: 2rem 0;}
footer > .outline > .flex a{
    text-decoration: underline;
}
footer > .outline > .flex > p.f_logo{
    width: 15%;
}

footer > .outline > .flex > p.f_logo img{
    width: 50%;
}
footer > .outline > .flex > div{
    width: 85%;
}

footer > .outline > .flex > div > .flex > div {
    width: 30%;
    margin: 0 3% 1rem 0;
}

footer > .outline > .flex > div dt{
    font-weight: bold;
}
footer ul.list{
    display: flex;
    justify-content: flex-start;
}
footer ul.list li{
    margin: 0 2rem 0 0;
}
footer ul.list li a{
    display:block;
	padding: 0 0 10px 30px;
}
footer ul.list li.f_access a{
    background:url("../img/common/icon_access_b.svg") no-repeat ;
    background-size: 25px;
}
footer ul.list li.f_calendar a{
    background:url("../img/common/icon_calendar_b.svg") no-repeat 0 0.2em;
    background-size: 20px;
}

footer .sns{padding: 0;}

/*メガフッター*/

#ftnav{
    padding: 2rem 0;
    background:#ddd;
    font-size: 0.9rem;
}
#ftnav a{
	display: block;
}

#ftnav button{display: none;}

#ftnav .outline{
	display: flex;
    flex-wrap: wrap;
    width: 96%;
    margin: 0 2%;
}

#ftnav .outline > ul:not([class]){
	display: flex;
    flex-wrap: wrap;
    width: 80%;
}

#ftnav .outline > .f_list{
    width: 20%;
}

#ftnav .outline > ul:not([class]) > li{
	width: 23%;
	margin-left: 2%;
}

#ftnav .outline > ul:not([class]) > li:nth-child(4n+1){
	margin-left: 0;
}

#ftnav .outline > ul:not([class]) > li > a{
	padding-left: 1rem;
	position: relative;
	font-weight: bold;
}

#ftnav .outline > ul:not([class]) > li > a:before{
	content: "";
	position: absolute;
	width: 0.1rem;
	height: 1.5rem;
	background: var(--gray-color1);
    top: 0.2rem;
    left: 0;
}

#ftnav .outline > ul:not([class]) > li{
	padding-bottom: 2rem;
}

#ftnav .outline > ul:not([class]) > li > a{
	padding-bottom: 1rem;
}

#ftnav .outline > ul:not([class]) > li > ul > li a{
	padding-left: 2rem;
	position: relative;
	padding: 0.2rem 0 0.2rem 1.3rem
}

#ftnav .outline > ul:not([class]) > li > ul > li a:before{
	content:"" ;
	position: absolute;
	width: 1rem;
	height: 0.1rem;
	background: var(--gray-color1);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
@media screen and (max-width: 959px){

footer .flex.off { flex-wrap: wrap;}
footer .flex.off > * { width: 100%;}
footer .flex.clm3.off > * { margin: 0 0 2% 0;}
footer .flex.clm3.off > *:nth-child(3n+1) { margin: 0 0 2% 0;}
    
footer > .outline > .flex > div{
    width: 100%;
}
footer > .outline > .flex > p.f_logo{
    width: 60%;
    max-width: 400px;
    margin: 0 auto 2rem;
}

footer > .outline > .flex > p.f_logo img{
    width: 100%;
}

footer .sns li a{
    width: 2.5rem;
}

footer .lang h2{
    text-align:center;
}
footer .lang button {
	position: relative;
}
    
#ftnav{
	text-align: left;
    padding: 1rem;
}   
#ftnav button{
    display: block;
    width: 100%;
    padding: 1rem;
    background: #fff;
    position: relative;
    border-radius: 10px;
}
#ftnav button::before{
    content: "";
    display: block;
    position: absolute;
    top: 9px;
    right: 10px;
    width: 25px;
    height: 25px;
    background: url("../img/common/arrow02_g.svg") no-repeat;
}

#ftnav button.on::before {
  transform: rotate(180deg);
}

#ftnav .outline{
    display: none;
    padding: 2rem 0 0;
    width: 100%;
}
#ftnav .outline > ul:not([class]){
    width: 96%;
    	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#ftnav .outline > ul:not([class]) > li{
	width: 48%;
	margin-left: 0;
    margin-bottom: 1rem;
} 
    #ftnav .outline > .f_list{
        border-top:  1px solid var(--gray-color2);
        width: 96%;
        padding: 1rem 0;
    }
#ftnav .outline > .f_list li{
    display: inline-block;
    margin-right: 2rem;
}    
}


/*--  copy --*/

footer #copy small {
    display: block;
	font-size: 0.8rem;
	padding: 1rem;
    font-family: 'Roboto', sans-serif;
    letter-spacing:0.1rem;
}

#page_top a{
    display: block;
    background: #FCEAEA;
    padding: 1rem;
    text-align: center;
}

#page_top a img {
	width: 30px;
    transform: rotate(270deg);
}

/*pcのみ*/
@media screen and (min-width: 1281px){

#page_top2 {
    right: 27px;
	position: fixed;
	bottom: -70px;
    z-index: 999;
}

#page_top2 img {
	width: 54px;
}
}

@media screen and (max-width: 1280px){
    #page_top2, #page_top2 img {display: none;}
}

/* night :
--------------------------------------------*/	

body.night main:before{
    content: "";
    display: block;
    width: 100%;
/*	height: 3vh;*/
    padding-bottom: 42%;
    position: absolute;
    z-index: -10;
    background: url("../img/common/bg_night.png") repeat-x;
    background-size: contain;
}

body.night #header{background: #000019;}

@media screen and (min-width: 1281px){

body.night header #glnav > ul > li > a{
    color: #fff;
}
}

body.night #header_t .sns,
body.night #header_t .lang,
body.night #header_t #search{
    background: #fff;
}
body.night .sns{border-bottom-left-radius: 20px;}
body.night #header_t .lang{border-bottom-right-radius: 20px; padding-left: 1rem; padding-right: 1rem;}
body.night #header_t .lang ul{width: 83%;}


body.night #glnav > ul > li > a:focus{
outline: 2px var(--white-color) solid;}

/*ハンバーガーメニュー時はフォーカスを黒に戻す*/
@media screen and (max-width: 1280px){
body.night #glnav > ul > li > a:focus{
outline: 2px var(--main-color) solid;}
}
/* important :
--------------------------------------------*/	

main #important li,
main #news li{padding: 0;}

#important{
	border: 1px solid var(--accent-color);
    padding: 1rem;
    margin-bottom: 6rem;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #fff;
}

#important li a{
    display: inline-block;
    background: url(../img/common/arrow01.svg) no-repeat 0 0.6em;
    background-size: 20px;
    padding: 0.5rem 0 0.5rem 2em;
/*    color: var(--accent-color);*/
}
#important li a:hover{
    text-decoration: underline;
}
#important time {
    margin: 0 1rem 0 0;
    display: inline-block;
    width: 6em;
}
/* news :
--------------------------------------------*/	

#news li:before { display: none;}

#news li a{
    display: block;
    border-bottom: 1px solid var(--gray-color2);
    padding: 0.7rem 3rem 0.7rem 1rem;
	text-decoration: none;
    background: url("../img/common/arrow03.svg") no-repeat;
    background-position: right 1em center;
    background-size: 25px;
	color: var(--main-color);
}
#news li a:hover{
    opacity: 0.8;
    background-position: right 0.5em center;
}
#news li a span.text{
    display: block;
}
#news li a span.cate{
    display: inline-block;
    background: var(--gray-color2);
    padding: 0.2rem 1rem;
    margin: 0.5rem 1rem 0 0;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#news #twitter{
    border: 1px solid var(--gray-color2);
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 1rem;
}

#news #twitter iframe{
    width: 100%!important;
/*    height: 100%!important;*/
}
#news #twitter .twitter-timeline{
    width: 100%!important;
}

.pagination{margin-bottom: 3rem;text-align: center;}
.pagination li {display: inline;}
.pagination em,
.pagination li a{
    display: inline-block;
    padding: 0.3rem 0.8rem;
    margin: 0 0.5rem 0 0;
	border: 1px solid var(--gray-color2);
    border-radius: 5px;
    text-decoration: none;
    color: var(--gray-color1);
}
.pagination em,
.pagination li a:hover{
	border: 1px solid var(--accent-color);
    background: var(--accent-color);
    color: var(--white-color);
}

#b_404 #topic_path{display: none;}

#exhibition_pablic main table.table-style2 td a,
.break_a{
    word-break: break-all
}