@charset "utf-8";
/*--------------------------------------------
TOP PAGE
--------------------------------------------*/
/*--------------------------------------------
TOP PAGE - TOPNAVIGATION
--------------------------------------------*/
@keyframes flashing{
0%{
width:10px;
height:10px;
top:0px;
left:0px;
-ms-filter:"alpha(opacity=$num)";
opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=$num)"
}50%{
width:20px;
height:20px;
top:-5px;
left:-5px;
-ms-filter:"alpha(opacity=$num)";
opacity:.4;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=$num)"
}100%{
width:30px;
height:30px;
top:-10px;
left:-10px;
-ms-filter:"alpha(opacity=$num)";
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=$num)"
}
}
#topNavi{
position: fixed;
z-index: 110;
top:50%;
left:30px;
text-align: center;
background: url(../Image/top/arrow_black.png) center bottom no-repeat;
width:30px;
transform: translate(-50%,-50%);
opacity:0;
animation:show-left 1s ease 0.5s 1 both;
}
@keyframes show-left{
0%{
opacity:0;
transform:translate(-120%,-50%);
}100%{
opacity:1;
transform: translate(-50%,-50%);
}
}
#topNavi #nav{
margin:0 0 80px;
}
#topNavi #nav li:not(:last-child){
margin:0 0 15px;
}
#topNavi #nav li a{
display: block;
width:10px;
height:10px;
border-radius:5px;
box-sizing: border-box;
border:1px solid #26b7bc;
background: #e9e9e9;
margin:0 auto;
}
#topNavi #nav li.current a{
background: #26b7bc;
position: relative;
}
#topNavi #nav li.current a:after{
position: absolute;
content: "";
display: block;
width: 10px;
height: 10px;
top: 0px;
left: 0px;
background: linear-gradient(135deg, #4285ff, #0096ff 18%, #00ffe4 98%);
opacity: 0;
transition-property: all;
transition-duration: .48s;
transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation:flashing 1s ease infinite;
z-index: 98;
border-radius: 50%;
}
/*--------------------------------------------
TOP PAGE - MAINIMAGE
--------------------------------------------*/
#top #mainimage{
position: relative;
width:100%;
min-height:650px;
box-sizing: border-box;
padding:97px 60px 60px;
}
#top #mainimage .calendar{
position: absolute;
z-index: 14;
top:50%;
right:60px;
transform: translate(50%,-50%);
}
#top #mainimage .calendar a{
background:#fff;
position: relative;
padding:90px 20px 85px;
width:16px;
text-align: center;
font-size:13px;
}
#top #mainimage .calendar .vertical{
line-height: 16px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
#top #mainimage .calendar .horizontal{
}
#top #mainimage .calendar a:before{
content:"";
display: inline-block;
width:14px;
height:14px;
background: url(../Image/common/icon--calendar.svg) left top no-repeat;
background-size:contain;
margin:0 0 20px;
}
#top #mainimage .calendar a:after{
content:"";
display: inline-block;
width:15px;
height:15px;
background: url(../Image/common/plus.svg) left top no-repeat;
background-size:contain;
margin:20px 0 0;
}
#top #mainimage .scroll--down{
position: absolute;
z-index: 110;
right: 36px;
bottom: 30px;
width: 200px;
transform: rotate(90deg);
transform-origin: right bottom;
}
#top #mainimage .scroll--down .inner_01{
}
#top #mainimage .scroll--down a{
font-size:10px;
font-family: 'PorterBold';
padding-right:100px;
}
#top #mainimage .scroll--down a:after{
content: "";
display: block;
width: 90px;
height: 1px;
background: #212121;
position: absolute;
right:0;
top:51%;
}
#top #mainimage .news{
position: absolute;
z-index: 14;
left: 105px;
bottom: 105px;
display: flex;
border-radius: 30px;
overflow: hidden;
width: 74%;
max-width: 680px;
}
#top #mainimage .news .label{
background: #26b7bc;
color:#fff;
font-family: 'PorterBold';
font-size:16px;
line-height:1;
padding:17px 40px;
}
#top #mainimage .news .list_01{
background:#fff;
flex: 1;
box-sizing: border-box;
padding:17px 28px;
}
#top #mainimage .news .list_01 li{
line-height:16px;
}
#top #mainimage .news .list_01 li a{
}
@media screen and (min-width : 768px ){
#top #mainimage .news .list_01 li a:hover{
}
}
#top #mainimage .bg_01{
position: relative;
z-index: 12;
height: 100%;
overflow: hidden;
background: url(../Image/top/mainimage.jpg) center center no-repeat;
background-size: cover;
}
#top #mainimage .logos{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
z-index: 100;
}
#top #mainimage .bg_01 img{
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
@supports ( object-fit: cover ) {
#top #mainimage .bg_01 img{
position: static;
height: 100%;
width: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
top: 0;
transform: none;
}
}
#top #mainimage .bg_01 video{
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
/*--------------------------------------------
TOP PAGE - SECTION_01
--------------------------------------------*/
#top #sec_01 {
padding:25px 60px 50px;
}
#top #sec_01 .ttl_01{
margin:0 0 25px;
}
#top #sec_01 .box_01{
background:#e9e9e9;
background:#5f5f5f;
color:#fff;
padding:60px 40px 42px;
margin:0 0 24px;
}
#top #sec_01 .box_01 .inner_01{
max-width:800px;
margin:0 auto;
display: flex;
}
#top #sec_01 .box_01 .inner_01 .leftBox{
width:130px;
border-right:1px solid #212121;
border-right-color:#fff;
box-sizing: border-box;
padding:10px 0 0 50px;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
#top #sec_01 .box_01 .inner_01 .leftBox .jpn{
font-size:22px;
margin:0 5px 0 0;
}
#top #sec_01 .box_01 .inner_01 .leftBox .eng{
font-size:11px;
font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", Georgia, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
#top #sec_01 .box_01 .inner_01 .rightBox{
flex: 1;
padding:0 0 0 38px;
display: flex;
align-items: center;
}
#top #sec_01 .box_01 .inner_01 .rightBox .imgBox{
width:214px;
height:270px;
margin:0 50px 0 0;
position: relative;
}
#top #sec_01 .box_01 .inner_01 .rightBox .imgBox img{
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
@supports ( object-fit: cover ) {
#top #sec_01 .box_01 .inner_01 .rightBox .imgBox img{
position: static;
height: 100%;
width: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
top: 0;
transform: none;
}
}
#top #sec_01 .box_01 .inner_01 .rightBox .textBox{
flex: 1;
}
#top #sec_01 .box_01 .inner_01 .rightBox .textBox .ttl{
font-size:18px;
font-weight: bold;
line-height: 1.25;
margin:0 0 15px;
}
#top #sec_01 .box_01 .inner_01 .rightBox .textBox .date{
font-family: 'MyriadPro';
color: #5d5d5d;
color:#fff;
line-height: 1;
margin:0 0 15px;
}
#top #sec_01 .box_01 .inner_01 .rightBox .textBox .content{
line-height: 1.71;
margin:0 0 15px;
}
#top #sec_01 .box_01 .inner_01 .rightBox .textBox .btn_01{
text-align: right;
}
#top #sec_01 .box_02{
}
#top #sec_01 .box_02 .swiper-wrapper{
}
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide {
height: auto;
}
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide a{
display: flex;
align-items: center;
background:#f8f7f2;
height: 100%;
}
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide .imgBox{
width:52%;
padding:58.24% 0 0;
position: relative;
}
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide .imgBox img{
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
@supports ( object-fit: cover ) {
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide .imgBox img{
height: 100%;
width: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
top: 0;
transform: none;
}
}
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide .textBox{
width:48%;
box-sizing: border-box;
padding:15px 30px 15px 20px;
}
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide .textBox .cat{
font-size:12px;
line-height: 1;
margin:0 0 10px;
}
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide .textBox .ttl{
line-height: 1.28;
font-weight: bold;
margin:0 0 24px;
}
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide .textBox .date{
line-height: 1.57;
}
#top #sec_01 .box_02 .swiper-button-prev,
#top #sec_01 .box_02 .swiper-button-next{
width:60px;
height:60px;
border-radius: 50%;
background:url(../Image/common/arrow-left--green.svg) right 15px center no-repeat #fff;
background-size:10px;
margin:0;
}
#top #sec_01 .box_02 .swiper-button-prev{
left:0;
transform: translate(-50%,-50%);
}
#top #sec_01 .box_02 .swiper-button-next{
background-image: url(../Image/common/arrow-right--green.svg);
background-position: 15px center;
right:0;
transform: translate(50%,-50%);
}
@media screen and (max-width : 1100px ){
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide .textBox .ttl{
font-size:13px;
}
#top #sec_01 .box_02 .swiper-wrapper .swiper-slide .textBox{
padding:15px 20px 15px 20px;
}
}
@media screen and (max-width : 820px ){
#top #sec_01 .box_01 .inner_01 .leftBox{
width:80px;
padding:10px 0 0 0;
}
#top #sec_01 .box_01 .inner_01 .rightBox .imgBox{
margin:0 36px 0 0;
}
}
/*--------------------------------------------
TOP PAGE - SECTION_02
--------------------------------------------*/
#top #sec_02 {
padding:50px 60px 40px;
position: relative;
}
#top #sec_02 .ttl_01{
margin:0 0 50px;
}
#top #sec_02 .list_01{
max-width:800px;
padding:30px 60px;
box-sizing: border-box;
margin:0 auto 70px;
}
#top #sec_02 .list_01 li{
display: flex;
}
#top #sec_02 .list_01 li:not(:last-child){
margin:0 0 30px;
}
#top #sec_02 .list_01 li .date{
font-family: 'MyriadPro';
width:115px;
}
#top #sec_02 .list_01 li .title{
flex: 1;
line-height: 1.57;
}
#top #sec_02 .list_01 li .title a{
}
@media screen and (min-width : 768px ){
#top #sec_02 .list_01 li .title a:hover{
}
}
#top #sec_02 .btn_02{
padding:0 40px 0 0;
text-align: right;
}
#top #sec_02 .btn_02 a{
padding:15px 200px 15px 20px;
border-bottom:1px solid #212121;
position: relative;
}
#top #sec_02 .btn_02 a .button_string{
font-family: 'PorterBold';
font-size:10px;
}
#top #sec_02 .btn_02 a .button_arrow{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 54px;
height: 11px;
right: 125px;
}
#top #sec_02 .btn_02 a .button_arrow:before {
content: "";
display: block;
width: 50px;
height: 1px;
background: #212121;
position: absolute;
top: 5px;
left: 0;
transition-property: all;
transform: translateZ(0);
animation-timing-function: cubic-bezier(.215,.61,.355,1);
animation-fill-mode: forwards;
animation-duration: .7s;
transition-duration: .7s;
clip: rect(auto 46px auto 0);
-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
}
#top #sec_02 .btn_02 a svg{
position: absolute;
right: 0;
top:0;
width: 13px;
fill: none;
stroke: #212121;
stroke-width: .7px;
transition-property: all;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
#top #sec_02 .lineBox{
position: absolute;
left:100px;
top:26px;;
font-size: 0;
}
#top #sec_02 .lineBox span{
display: inline-block;
height:1px;
background: #212121;
}
#top #sec_02 .lineBox span:nth-child(1){
width:190px;
}
#top #sec_02 .lineBox span:nth-child(2){
width:5px;
background: #fff;
}
#top #sec_02 .lineBox span:nth-child(3){
width:95px;
}
/*--------------------------------------------
TOP PAGE - SECTION_03
--------------------------------------------*/
#top #sec_03 {
padding:40px 60px 50px;
}
/*--------------------------------------------
TOP PAGE - SECTION_04
--------------------------------------------*/
#top #sec_04 {
padding:50px 60px 0;
}
#top #sec_04 .ttl_01{
margin:0 0 25px;
}
#top #sec_04 .box_01{
background: #f3f1e9;
padding:60px;
}
#top #sec_04 .box_01 .secInner{
max-width:1200px;
margin:0 auto;
display: flex;
align-items: center;
}
#top #sec_04 .box_01 .leftBox{
width:270px;
}
#top #sec_04 .box_01 .leftBox img{
}
#top #sec_04 .box_01 .rightBox{
flex: 1;
padding:0 0 0 7.5%;
}
#top #sec_04 .box_01 .rightBox .caption{
font-size:18px;
font-weight: bold;
margin:0 0 30px;
}
#top #sec_04 .box_01 .rightBox ul.flex{
flex-wrap: wrap;
align-items: flex-start;
}
#top #sec_04 .box_01 .rightBox ul.flex li{
width:50%;
display: flex;
flex-wrap: wrap;
}
#top #sec_04 .box_01 .rightBox ul.flex li:nth-child(n+3){
margin:30px 0 0;
}
#top #sec_04 .box_01 .rightBox ul.flex li .label{
width:100px;
font-weight: bold;
margin:0 0 10px;
}
#top #sec_04 .box_01 .rightBox ul.flex li .value{
flex: 1;
min-width:200px;
padding:0 50px 0 0;
font-size:13px;
line-height: 1.69;
}
#top #sec_04 .box_01 .rightBox ul.flex li .value .ggmapLink{
color:#26b7bc;
text-decoration: underline;
padding-right: 15px;
background: url(../Image/common/new-window.svg) right center no-repeat;
background-size: 11px;
}
/*--------------------------------------------
UNDER - INHERITED FROM STYLE.CSS
--------------------------------------------*/
#content .alignleft {
float: left;
}
#content .alignright {
float: right;
}
#content .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
margin: 12px 24px 12px 0;
margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}
img.alignright {
margin: 12px 0 12px 24px;
margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}
#content img.aligncenter {
margin-top: 12px;
margin-top: 0.857142857rem;
margin-bottom: 12px;
margin-bottom: 0.857142857rem;
}
/*--------------------------------------------
UNDER - INHERITED FROM PAGE.CSS
--------------------------------------------*/
#content p {
line-height: 2;
margin-bottom: 2.5em;
}
#content ul.list-pdf {
margin-left: 20px;
}
#content ul.list-pdf li {
list-style-type: none;
background: url(../Image/common/pdf.gif) 0 2px no-repeat;
padding-left: 20px;
}
#content ul {
margin: 10px 0px 10px 40px;
}
#content ol {
margin: 10px 0px 10px 40px;
list-style: decimal;
}
#content li {
list-style: disc outside;
margin-bottom: 0.5em;
line-height: 2;
}
#content ol li {
list-style: decimal;
}
#content a {
color: #399;
}
#content a:hover {
text-decoration:underline;
}
#content h4.susume_profile-NAME{
font-size: 18px;
color: #333333;
padding: 3px 3px 3px 20px;
border-bottom: 2px dotted #ccc;
font-weight:bold;
}
#content h4.susume_profile-NAME .susume_profile-NAME-En{
font-size: 12px;
color:#669900;
padding: 0px 20px 0px 0px;
font-weight:normal;
}
#content h4.susume_profile-NAME .susume_profile-NAME-live{
font-size: 14px;
color: #333333;
font-weight:normal;
}
table.susume_profile-history{
border: none;
border-collapse: collapse;
}
table.susume_profile-history tr{
border: none;
vertical-align: top;
font-size:14px;}
table.susume_profile-history th{
border: none;
vertical-align: top;
font-weight:normal;
color:#669900;
padding-right:20px;
font-size:14px;
padding: 3px 0px 3px 25px;
white-space:nowrap;
}
table.susume_profile-history td{
border: none;
vertical-align: top;
font-size:14px;
padding: 3px 0px 3px 10px;
line-height: 1.6;
}
table.susume_profile-history th.susume_profile-history-T{
border: none;
vertical-align: top;
background-color: #F1EADE;
color: #333333;
font-size: 15px;
padding: 2px 0px 2px 20px;
text-align: left;
margin: 0px 0px 0px 0px;
}
/*--------------------------------------------
UNDER - INHERITED FROM COMMON.CSS
--------------------------------------------*/
#content table.tbl-design01 {
border-collapse: collapse;
border-top: 2px solid #968E8B;
border-bottom: 2px solid #968E8B;
}
#content table.tbl-design01 td,
table.tbl-design01 th {
padding: 5px 5px 5px 10px;
padding: 20px;
border-bottom: 1px solid #ccc;
}
#content table.tbl-design01 th {
border-bottom: 1px solid #FFF;
text-align: left;
background: #F4EFE9;
font-weight: normal;
}
#content table.tbl-design01 td {
background:#fff;
}
#content table.tbl-design201 {
border-collapse: collapse;
border: 2px solid #968E8B;
}
#content table.tbl-design201 td,
table.tbl-design201 th {
padding: 5px 5px 5px 10px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#content table.tbl-design201 th {
border-bottom: 1px solid #FFF;
text-align: left;
background: #F4EFE9;
font-weight: normal;
}
#content table.tbl-design201 td {
background:#fff;
}
/*301*/
#content table.tbl-design301 {
border-collapse: collapse;
border: 2px solid #968E8B;
}
#content table.tbl-design301 td,
table.tbl-design301 th {
padding: 5px 5px 5px 10px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#content table.tbl-design301 th {
border-bottom: 1px solid #FFF;
text-align: center;
background: #F4EFE9;
font-weight: normal;
white-space:nowrap;
}
#content table.tbl-design301 td {
background:#fff;
text-align: center;
}
#content table.tbl-design401 {
border-collapse: collapse;
border: 2px solid #968E8B;
}
#content table.tbl-design401 td,
table.tbl-design401 th {
padding: 5px 5px 5px 10px;
padding: 20px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#content table.tbl-design401 th {
border-bottom: 1px solid #FFF;
text-align: left;
background: #F4EFE9;
font-weight: normal;
white-space:nowrap;
}
#content table.tbl-design401 th.th-C {
border-bottom: 1px solid #FFF;
text-align: center;
font-weight: normal;
white-space: nowrap;
background-color: #EEF1E6;
}
#content table.tbl-design401 td {
background:#fff;
text-align: right
}
/*align*/
p.p-R{ text-align:right; }
p.p-L{ text-align:left; }
p.p-C{ text-align:center;}
/*--------------------------------------------
UNDER - INHERITED FROM EVENT.CSS
--------------------------------------------*/
table#EventTable {
border: 7px solid #D5CCC3;
width: 100%;
border-collapse: collapse;
margin: 0 0 15px 0;
}
table#EventTable td,
table#EventTable th {
padding: 5px 5px 5px 10px;
border-bottom: 1px solid #FFF;
line-height: 160%;
}
table#EventTable th {
border-bottom: 1px solid #FFF;
text-align: left;
font-weight: bold;
color: #FFF;
background: #300;
width: 20%;
}
table#EventTable td {
border-left: 1px solid #FFF;
background: #EAE7E2;
}
.lecture-entrybtn{
text-align: right;
}
.lecture-entrybtn img {
clear:both;
width: 179px;
height: 29px;
float: right;
padding: 0;
}
.lecture-entrybtn-detail {
text-align: right;
}
.lecture-entrybtn-detail img {
clear:both;
width: 239px;
height: 38px;
padding: 0;
}
/*--------------------------------------------
UNDER - INHERITED FROM CSS-NEW_ADD.CSS
--------------------------------------------*/
#content .fw-bold {
font-weight: bold !important;
}
#content .fc-red {
color:#F00 !important;
}
#content .fc-blue {
color: #06F !important;
}
#content .fc-green {
color: #090 !important;
}
.ennaimapBox {
margin: 0;
padding: 0;
height: 554px;
width: 550px;
background-image: url(../Image/guide/parkmap-S2.png);
background-repeat: no-repeat;
position: relative;
}
img#map_togeikan{
margin: 0;
padding: 0;
position: absolute;
top: 5px;
left: 307px;
}
img#map_star{
margin: 0;
padding: 0;
position: absolute;
top: 58px;
left: 395px;
}
img#map_tanuki{
margin: 0;
padding: 0;
position: absolute;
top: 85px;
left: 177px;
}
img#map_taiyo{
margin: 0;
padding: 0;
position: absolute;
top: 246px;
left: 177px;
}
img#map_sangyo{
margin: 0;
padding: 0;
position: absolute;
top: 306px;
left: 277px;
}
img#map_photo{
margin: 0;
padding: 0;
position: absolute;
top: 361px;
left: 122px;
}
img#map_kama{
margin: 0;
padding: 0;
position: absolute;
top: 319px;
left: 34px;
}
img#map_kensyu{
margin: 0;
padding: 0;
position: absolute;
top: 396px;
left: 15px;
}
img#map_car{
margin: 0;
padding: 0;
position: absolute;
top: 424px;
left: 246px;
}
#map a:hover img{
filter: alpha(opacity=1);
opacity: 1;
-moz-opacity: 1;
}
/*--------------------------------------------
UNDER - ADDITIONAL STYLE
--------------------------------------------*/
.under #topNavi{
display: none;
}
.under #contents{
padding:97px 60px 40px;
}
.under #main-title{
height:260px;
position: relative;
background: url(../Image/common/mainimage.jpg) center center no-repeat;
background-size:cover;
}
.under #main-title .box_01{
position: absolute;
right:0;
bottom:0;
padding:30px 40px;
line-height:1;
display: flex;
align-items: center;
background:#fff;
}
.under #main-title .box_01 .jpn{
font-size:20px;
margin:0 20px 0 0;
}
.under #main-title .box_01 .line{
width:30px;
height:1px;
background:#212121;
margin:0 20px 0 0;
}
.under #main-title .box_01 .eng{
font-size:13px;
}
.under #breadcrumb{
padding:20px 0 40px;
}
.under #breadcrumb ul{
display: flex;
}
.under #breadcrumb ul li{
font-size:12px;
}
.under #breadcrumb ul li a{
padding: 0 17px 0 0;
margin-right: 7px;
background: url(../Image/common/arrow-right--green.svg) right 2px top 3px no-repeat;
background-size: 5px;
}
@media screen and (min-width : 768px ){
.under #breadcrumb ul li a:hover{
color:#26b7bc;
text-decoration: underline;
}
}
.under #localNavigation{
margin:0 0 70px;
}
.under #localNavigation ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.under #localNavigation ul li{
margin:-1px 0 0 -1px;
}
.under #localNavigation ul li a{
padding:15px 24px;
line-height: 1;
font-size: 13px;
border:1px solid #444444;
}
.under #localNavigation ul li a.active{
background:#444444;
color:#fff;
}
.under #localNavigation ul li:nth-child(n+2) a{
}
.under #localNavigation.localNavigation_02{
display: flex;
align-items: center;
justify-content: center;
}
.under #localNavigation.localNavigation_02 .list_01{
margin:0 35px 0 0;
}
.under #localNavigation.localNavigation_02 .btn-schedule{
margin:0 20px 0 0;
white-space: nowrap;
}
.under #localNavigation.localNavigation_02 .btn-schedule a{
padding: 14px 40px;
background-color: #f4f4f2;
border-radius: 25px;
font-size: 13px;
line-height: 120%;
}
.under #localNavigation.localNavigation_02 .btn-schedule a span{
display: inline-block;
padding:0 0 0 22px;
background: url(../Image/common/icon--pdf.svg) no-repeat center left;
transition:0.5s;
}
.under #localNavigation.localNavigation_02 .btn-bus a span{
background-image: url(../Image/common/icon--bus-black.svg);
}
.under #localNavigation.localNavigation_02 .btn-calendar{
padding:0 0 0 20px;
border-left:1px solid #bdbdbd;
white-space: nowrap;
}
.under #localNavigation.localNavigation_02 .btn-calendar a{
font-size: 13px;
padding:0 0 0 24px;
background: url(../Image/common/icon--calendar.svg) no-repeat center left;
background-size: 14px;
}
@media screen and (min-width : 768px ){
.under #localNavigation ul li a:hover{
background:#444444;
color:#fff;
}
.under #localNavigation.localNavigation_02 .btn-schedule a:hover{
background-color: #26b7bc;
color:#fff;
}
.under #localNavigation.localNavigation_02 .btn-schedule a:hover span{
background-image: url(../Image/common/icon--pdf-white.svg);
transition:0.5s;
}
.under #localNavigation.localNavigation_02 .btn-bus a:hover span{
background-image: url(../Image/common/icon--bus-white.svg);
}
.under #localNavigation.localNavigation_02 .btn-calendar a:hover{
background-image: url(../Image/common/icon--calendar-green.svg);
color:#26b7bc;
}
}
.under #primary{
}
.under #content{
max-width:1000px;
margin:0 auto;
}
#exhibitions #content,
#events #content{
max-width:100%;
}
.under #TtlBlock {
padding:0 0 20px;
margin:0 0 64px;
position: relative;
text-align: center;
}
.under #TtlBlock h1{
font-size:28px;
}
.under #TtlBlock:after {
content:"";
display: block;
position: absolute;
bottom:0;
left:50%;
transform: translate(-50%,0);
background:#26b7bc;
width:52px;
height:2px;
}
/*#content h2 {
font-size: 20px;
font-weight: normal;
padding:0 0 10px;
border-bottom:1px solid #212121;
margin:90px 0 36px;
}*/
#content h2 {
font-size: 20px;
font-weight: normal;
background:#dce5e6;
padding:12px 20px;
margin:90px 0 36px;
clear: both;
}
#content h3 {
font-size: 16px;
color:#5f5f5f;
position: relative;
padding:0 0 10px 10px;
margin:60px 0 24px;
border-bottom:2px solid #9e9e9e;
clear: both;
}
#content h3:after {
content: "";
display: block;
width:100px;
height:2px;
background:#26b7bc;
position: absolute;
left:0;
bottom:-2px;
}
#content h4 {
font-size: 16px;
margin:40px 0 24px;
font-weight: normal;
padding:0 0 10px;
border-bottom:1px solid #212121;
}
#content .btn_03{
padding: 5px 50px 5px 0;
border-bottom: 1px solid #212121;
position: relative;
}
#content .btn_03 .button_arrow {
position: absolute;
bottom: 25px;
margin: auto;
width: 35px;
right: 0;
}
#content .btn_03 .button_arrow:before {
content: "";
display: block;
width: 26px;
height: 1px;
background: #26b7bc;
position: absolute;
top: 5px;
left: 0;
transition-property: all;
transform: translateZ(0);
animation-timing-function: cubic-bezier(.215,.61,.355,1);
animation-fill-mode: forwards;
animation-duration: .7s;
transition-duration: .7s;
clip: rect(auto 46px auto 0);
-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
}
#content .btn_03 svg {
position: absolute;
right: 0;
top: 0;
width: 13px;
fill: none;
stroke: #26b7bc;
stroke-width: .7px;
transition-property: all;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
#content img{
vertical-align: baseline;
}
/*--------------------------------------------
UNDER - MAINIMIAGE
--------------------------------------------*/
#about-mori #main-title{
background-image: url(../Image/what-sccp-is/mainimage.jpg);
}
#exhibitions #main-title{
background-image: url(../Image/exhibitions/mainimage.jpg);
}
#museum-shop #main-title{
background-image: url(../Image/museum-shop/mainimage.jpg);
}
#events #main-title{
background-image: url(../Image/events/mainimage.jpg);
}
#tsuchi_family #main-title,
#tsuchi_school #main-title,
#about-edu-programs #main-title,
#tsuchikko-pamphlet #main-title,
#introduce-lecturer #main-title,
#guideline #main-title,
#subsidy #main-title{
background-image: url(../Image/edu-programs/mainimage.jpg);
}
#access #main-title,
#attention #main-title,
#group-application #main-title,
#map #main-title,
#open-hour #main-title,
#special-application #main-title,
#fujiki #main-title,
#time-table #main-title{
background-image: url(../Image/guide/mainimage.jpg);
}
#aboutus #main-title,
#about-manage #main-title{
background-image: url(../Image/about/mainimage.jpg);
}
#rental-guide #main-title,
#shigaraki-hall #main-title,
#kama #main-title{
background-image: url(../Image/rental-guide/mainimage.jpg);
}
#volanteer #main-title,
#fand #main-title{
background-image: url(../Image/supporter/mainimage.jpg);
}
#artist-in-r #main-title{
background-image: url(../Image/artist-in-r/mainimage.jpg);
}
/*--------------------------------------------
UNDER - ARCHIVE
--------------------------------------------*/
.under .archive #CtsBlock{
background:#f4f4f2;
}
.under .archive .secInner{
max-width:1000px;
margin:0 auto;
}
.under .archive.yearly .secInner{
max-width: 900px;
}
.under #content .archive .tab{
margin:0 auto;
max-width: 800px;
display: flex;
}
.under #content .archive .tab li{
list-style: none;
margin: 0;
width:50%;
text-align: center;
line-height: 1;
}
.under #content .archive .tab li a{
color:#212121;
padding:23px 10px;
display: block;
}
.under #content .archive .tab li a.nolink{
background: #f4f4f2;
}
.under #content .archive .tab li a:hover{
text-decoration: none;
}
.under #content .archive .tab li span{
padding-left: 22px;
background: url(../Image/common/arrow-down.svg) no-repeat left center;
background-size: 12px 8px;
}
.under #content .archive.yearly .ttlBox{
padding: 70px 50px 0;
position: relative;
}
.under #content .archive.yearly .ttlBox h2{
font-size: 16px;
color: #5f5f5f;
position: relative;
padding: 0 0 10px 10px;
border-bottom: 2px solid #9e9e9e;
background: none;
margin: 0;
font-weight: bold;
}
.under #content .archive.yearly h2:after{
content: "";
display: block;
width: 100px;
height: 2px;
background: #26b7bc;
position: absolute;
left: 0;
bottom: -2px;
}
.under #content .archive.yearly .ttlBox select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
min-width: 220px;
padding: 10px 25px 10px 14px;
font-size: 12px;
line-height: 120%;
letter-spacing: 0.1em;
color:#212121;
background: url(../Image/common/arrow_06.png) no-repeat 92% center #fff;
position: absolute;
right: 50px;
bottom: 14px;
border: none;
}
.under #content .archive.yearly .ttlBox select option:nth-child(2){
display: none;
}
.under #content .archive .list_01{
margin:0;
padding:20px 50px;
}
.under .archive .list_01 li{
padding:50px 100px;
display: flex;
}
.under .archive.yearly .list_01 li {
padding: 30px 50px;
}
.under .archive .list_01 li:not(:last-child){
border-bottom:1px solid #bfbfbf;
}
.under .archive .list_01 li .imgBox{
width: 270px;
height: 340px;
margin: 0 50px 0 0;
position: relative;
}
.under .archive.yearly .list_01 li .imgBox{
width: 90px;
height: 113.333px;
margin: 0 30px 0 0;
}
#events .archive .list_01 li .imgBox{
height: 160px;
}
.under .archive .list_01 li .imgBox img{
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
@supports ( object-fit: cover ) {
.under .archive .list_01 li .imgBox img{
height: 100%;
width: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
top: 0;
transform: none;
}
}
.under .archive .list_01 li .textBox{
flex: 1;
padding:15px 0 0;
}
.under .archive.yearly .list_01 li .textBox{
padding:5px 0 0;
}
.under .archive .list_01 li .textBox .badge{
font-size:13px;
font-weight: bold;
color:#26b7bc;
margin:0 0 10px;
}
.under .archive .list_01 li .textBox .ttl{
font-size:18px;
font-weight:bold;
line-height: 1.25;
margin:0 0 25px;
}
.under .archive.yearly .list_01 li .textBox .ttl{
margin:0 0 15px;
}
.under .archive .list_01 li .textBox .date{
font-family: 'MyriadPro';
color: #5d5d5d;
line-height: 1;
margin: 0 0 20px;
}
.under .archive .list_01 li .textBox .content{
line-height: 1.71;
margin: 0 0 25px;
}
.under .archive .list_01 li .textBox .btn_01{
text-align: right;
}
.under #content .archive .list_01 li .textBox .btn_01 a{
color:#fff;
}
.under #content .archive .list_01 li .textBox .btn_01 a:hover{
color:#212121;
text-decoration: none;
}
/*--------------------------------------------
UNDER - SINGLE
--------------------------------------------*/
.under .single{
}
.under .single #TtlBlock{
font-size: 13px;
font-weight:bold;
color:#26b7bc;
margin:0 0 40px;
}
.under .single .secInner{
max-width:1000px;
}
.under .single .titleBox{
text-align: center;
margin:0 0 60px;
}
.under .single .titleBox .title{
font-size: 24px;
font-weight: normal;
line-height: 1.25;
margin:0 0 40px;
}
.under .single .titleBox .date{
font-size:16px;
}
.under .single .infoBox {
padding:60px 0;
margin: 0 0 60px;
background:#f4f4f2;
}
.under .single .infoBox .secInner{
display: flex;
max-width: 760px;
}
.under .single .infoBox .imgBox{
width: 270px;
height: 340px;
margin: 0 50px 0 0;
position: relative;
}
.under .single .infoBox .imgBox img{
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
@supports ( object-fit: cover ) {
.under .single .infoBox .imgBox img{
height: 100%;
width: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
top: 0;
transform: none;
}
}
.under .single .infoBox .textBox{
flex:1;
}
.under #content .single .infoBox .textBox .list_01{
font-size:13px;
margin:0;
}
#events.under #content .single .infoBox .textBox .list_01{
display: flex;
flex-wrap: wrap;
}
.under #content .single .infoBox .textBox .list_01 li{
list-style: none;
line-height: 1.6;
}
.under #content .single .infoBox .textBox .list_01 li:not(:last-child){
margin:0 0 20px;
}
#events.under #content .single .infoBox .textBox .list_01 li{
width:50%;
margin:0;
}
#events.under #content .single .infoBox .textBox .list_01 li:nth-child(n+3){
margin:20px 0 0;
}
.under #content .single .infoBox .textBox .list_01 li .label{
font-weight: bold;
margin:0 0 5px;
}
.under .single .detailBox {
}
.under .single .detailBox .secInner{
}
.under .single .detailBox img{
max-width:100%;
height:auto;
}
/*--------------------------------------------
UNDER - ABOUT-MORI
--------------------------------------------*/
#about-mori #content{
max-width: 100%;
}
#about-mori #CtsBlock > p{
max-width: 1000px;
margin:0 auto 85px;
}
#about-mori .list_01{
margin:0 0 130px;
}
#about-mori .list_01 li{
list-style: none;
margin-bottom: 0;
display: flex;
}
#about-mori .list_01 li:nth-child(2n){
flex-direction: row-reverse;
}
#about-mori .list_01 li .imgBox{
width:50%;
}
#about-mori .list_01 li .imgBox{
background:url(../Image/what-sccp-is/img_01.jpg) center center no-repeat;
}
#about-mori .list_01 li:nth-child(2) .imgBox{
background-image:url(../Image/what-sccp-is/img_02.jpg);
}
#about-mori .list_01 li:nth-child(3) .imgBox{
background-image:url(../Image/what-sccp-is/img_03.jpg);
}
#about-mori .list_01 li:nth-child(4) .imgBox{
background-image:url(../Image/what-sccp-is/img_04.jpg);
}
#about-mori .list_01 li .textBox{
width:50%;
box-sizing: border-box;
padding: 4% 4%;
}
#about-mori .list_01 li .textBox .number{
font-family:'Raleway',Arial, Helvetica, "sans-serif";
font-size: 40px;
line-height: 1;
margin:0 0 30px;
}
#about-mori .list_01 li .textBox .number:after{
content: "";
display: inline-block;
margin:0 0 0 22px;
width:2px;
height: 32px;
background: #58b5bc;
transform: translate(0,5px);
}
#about-mori .list_01 li .textBox .title{
margin:0 0 15px;
}
#about-mori .list_01 li .textBox .title .sub-title{
}
#about-mori .list_01 li .textBox .title .main-title{
font-size: 22px;
background: none;
padding: 0;
margin: 0;
}
#about-mori .list_01 li .textBox .explanation{
line-height: 2;
}
#about-mori .list_01 li .textBox .btn_03{
text-align: right;
padding:0;
border:0;
}
#about-mori .list_01 li .textBox .btn_03:nth-child(n+2){
margin:10px 0 0;
}
#about-mori .list_01 li .textBox .btn_03 a{
padding: 14px 40px 14px 50px;
background-color: #f4f4f2;
border-radius: 25px;
font-size: 13px;
line-height: 120%;
color:#212121;
}
#about-mori .list_01 li:nth-child(2) .textBox .btn_03 a{
box-sizing: border-box;
width:250px;
text-align: left;
}
#about-mori .list_01 li .textBox .btn_03 a span{
display: inline-block;
padding: 0 22px 0 0;
background: url(../Image/common/plus.svg) no-repeat center right;
transition: 0.5s;
}
#about-mori .ttl_04 {
position: relative;
background: none;
padding: 0 0 20px;
margin: 0 0 42px;
font-size:28px;
text-align: center;
}
#about-mori .ttl_04:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
background: #26b7bc;
width: 52px;
height: 2px;
}
#about-mori .ttl_04 + p {
text-align: center;
margin:0 0 40px;
}
#about-mori .list_02 {
max-width:1000px;
margin:0 auto;
display: flex;
}
#about-mori .list_02 li {
list-style: none;
width:calc(calc(100% -2px) / 3);
padding:0 0 25px;
position: relative;
}
#about-mori .list_02 li:nth-child(n+2){
border-left:1px solid #ccc;
}
#about-mori .list_02 li .imgBox{
height:204px;
position: relative;
}
#about-mori .list_02 li .imgBox img{
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
@supports ( object-fit: cover ) {
#about-mori .list_02 li .imgBox img{
position: static;
height: 100%;
width: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
top: 0;
transform: none;
}
}
#about-mori .list_02 li .textBox{
position: relative;
padding:25px 30px 25px;
}
#about-mori .list_02 li .textBox .number{
position: absolute;
left:0;
top:0;
width:46px;
line-height: 46px;
text-align: center;
font-size:23.5px;
font-family:'Raleway',Arial, Helvetica, "sans-serif";
font-weight: 300;
background:#ecf0f0;
color:#58b5bc;
}
#about-mori .list_02 li .textBox .ttl_05{
line-height: 1.2;
margin: 0 0 20px;
border:none;
box-sizing: border-box;
width:100%;
padding:0 20px;
text-align: center;
font-weight: normal;
}
#about-mori .list_02 li .textBox .ttl_05:after{
display: none;
}
#about-mori .list_02 li .textBox p{
font-size:13px;
line-height: 1.91;
}
#about-mori .list_02 li .btn_04 {
text-align: center;
position: absolute;
bottom:25px;
left:50%;
transform: translate(-50%, 0);
}
#about-mori .list_02 li .btn_04 a{
width: 140px;
text-align: center;
line-height: 1;
font-size: 10px;
font-family: 'PorterBold';
box-sizing: border-box;
padding: 9px;
border: 1px solid #f4f4f2;
background: #f4f4f2;
border-radius: 15px;
color:#212121;
}
/*--------------------------------------------
UNDER - CALENDAR
--------------------------------------------*/
#calendars .note{
margin:0 0 20px;
padding: 0 20px;
}
#calendars .note > div{
font-size: 13px;
padding-left: 15px;
position: relative;
}
#calendars .note > div:before{
content: "";
width: 10px;
height: 10px;
position: absolute;
top: 2px;
left: 0;
}
#calendars .note > .close:before{
background: #e8e5dc;
}
#calendars .ttl_02 {
text-align: center;
font-size:28px;
background: none;
font-weight:lighter;
}
#calendars .flexBox {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
#calendars table.calendar {
width: 23%;
border-collapse: separate;
border-spacing: 1px;
background: #ffffff;
}
#calendars table.calendar:nth-child(n+5) {
margin:30px 0 0;
}
#calendars table.calendar tbody {
background: #f8f7f2;
}
#calendars table.calendar caption {
text-align: center;
font-size: 13px;
margin:0 0 15px;
}
#calendars table.calendar caption span {
font-size: 22px;
display: block;
}
#calendars table.calendar th,
#calendars table.calendar td {
padding: 5px;
font-size: 13px;
}
#calendars table.calendar th {
text-align: center;
color: #666666;
border-bottom: 1px solid #f3f2ed;
}
#calendars table.calendar th.sun {
color: #f85b78;
border-bottom: 1px solid #f85b78;
}
#calendars table.calendar th.sat {
color: #4ea9cc;
border-bottom: 1px solid #4ea9cc;
}
#calendars table.calendar td {
text-align: right;
color: #e8e5dc;
font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
#calendars table.calendar td.open {
box-shadow: 0px 0px 10px 0px #e8e5dc;
padding: 0;
}
#calendars table.calendar td.open span {
display: block;
background-color: #ffffff;
position: relative;
z-index: 10;
padding: 5px;
color: #444444;
}
#calendars table.calendar td.open:first-child span {
color: #f85b78;
}
#calendars table.calendar td.open:last-child span {
color: #4ea9cc;
}
/*--------------------------------------------
UNDER - BUS TIME TABLE
--------------------------------------------*/
#time-table .note{
text-align: right;
line-height: 1.8;
font-size: 13px;
}
#time-table .flex{
justify-content: space-between;
}
#time-table .tableBox{
width:48%;
}
#time-table .tableBox .caption{
margin:0 0 15px;
}
#time-table .tableBox .sheet_01{
}
#time-table .tableBox .sheet_01 th,
#time-table .tableBox .sheet_01 td{
border:1px solid #ccc;
width:calc(100% / 6);
box-sizing: border-box;
font-size:12px;
}
#time-table .tableBox .sheet_01 th{
padding:2px 5px;
background:#e2e2e2;
}
#time-table .tableBox .sheet_01 th.bg-01{
background:#bedeea;
}
#time-table .tableBox .sheet_01 td{
padding:4px 10px;
font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
text-align: right;
background:#fcfcfc;
}
#time-table .tableBox .sheet_01 td.center{
text-align: center;
}
#time-table .box_03{
margin:0 0 60px;
}
#time-table .box_03-1,
#time-table .box_03-2{
width:48%;
}
#time-table .box_03 .tableBox{
width:100%;
}
#time-table .note-2{
margin:30px 0 0;
}
#time-table .box_04{
background:#f8f7f2;
padding:40px;
}
/*--------------------------------------------
UNDER - NEWS
--------------------------------------------*/
#news #sec_01 .list_01{
max-width:800px;
padding:30px 60px;
box-sizing: border-box;
margin:0 auto 70px;
}
#news #sec_01 .list_01 li{
display: flex;
}
#news #sec_01 .list_01 li:not(:last-child){
margin:0 0 30px;
}
#news #sec_01 .list_01 li .date{
font-family: 'MyriadPro';
width:115px;
}
#news #sec_01 .list_01 li .title{
flex: 1;
line-height: 1.57;
}
#news #sec_01 .list_01 li .title a{
color:#212121;
}
@media screen and (min-width : 768px ){
#news #sec_02 .list_01 li .title a:hover{
}
}
/*-----------------------------------------------------
ブログなどのページャー（Wordpress）
------------------------------------------------------*/
/* ナビゲーション全体のデザイン */
.wp-pagenavi {
text-align: center;
}
/* ボタンタグのデザイン */
.wp-pagenavi a {
padding: 0 10px!important;
background: #fff!important;
color: #0071c1!important;
margin-right: 4px!important;
display: inline-block!important;
border: 1px solid #0071c1!important;
line-height: 1.8!important;
text-decoration: none!important;
}
/* ボタンタグのホバー時のデザイン */
.wp-pagenavi a:hover {
background: #0071c1!important;
color: #fff!important;
text-decoration: none!important;
}
/* 表示中のページ番号のデザイン */
.wp-pagenavi .current {
padding: 0 10px!important;
background: #0071c1!important;
color: #fff!important;
margin-right: 4px!important;
display: inline-block!important;
border: 1px solid #0071c1!important;
line-height: 1.8!important;
}
/* 矢印（ < とか > ）のデザイン */
.wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink {
color: #444!important;
background: none!important;
font-weight: bold!important;
line-height: 1.8!important;
}