@charset "utf-8";

@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}

/* CSS Document */
/*----------------------------------------
index
----------------------------------------*/
/*PC*/
@media only screen and (min-width: 768px) {
.add {
font-size: 1.5rem
}
.mainvisual {
position: relative;
}
.searchBox {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
background: #FFF;
border-radius: 5px;
z-index: 100;
/*background: #086DB0;   fallback for old browsers */
border: solid 5px #086DB0;
box-sizing: border-box;
box-shadow: 0px 0px 16px -5px rgba(0, 0, 0, 0.6);
}
.searchBox .box {
padding: 15px;
}
.searchBox h3 {
padding: 5px 0 10px;
text-align: center;
background: #086DB0;
color: #FFF;
margin: 0 0 10px;
text-shadow: 1px 1px 10px #000;
letter-spacing: 0.2rem;
}
.searchBox .box01 {
padding: 0 0 10px;
}
.searchBox .box02 {
padding: 0 0 10px;
}
.searchBox .box03 {
padding: 0 0 20px;
}
.searchBox .box04 {
padding: 0;
}
.searchBox h4 {
font-size: 1.4rem;
padding: 0 0 5px;
letter-spacing: 0.2rem;
color: rgb(158, 21, 21);
}
.searchBox h4 i {
margin-right: 3px;
color: rgb(158, 21, 21);
}
.searchBox select {
background: #FFF;
padding: 5px 3px;
border: solid 1px #CCC;
}
.searchBox input[type="submit"] {
width: 80%;
text-align: center;
padding: 10px 0;
margin: 0 10%;
border: none;
color: #FFF;
font-weight: bold;
letter-spacing: 0.2rem;
background: rgb(158, 21, 21);
background: linear-gradient(0deg, rgba(158, 21, 21, 1) 10%, rgba(236, 38, 38, 1) 90%);
}
.comHeader {
padding: 10px 0 30px;
background: #00B4DB; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #0083B0, #00B4DB); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.ttl01 {
font-size: 2.4rem;
padding: 5px 50px;
position: relative;
margin: 0 0 50px;
}
.ttl01::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 5px;
background: #096D97;
}
.ttl01::after {
content: "";
position: absolute;
top: 0;
left: 8px;
bottom: 0;
width: 2px;
background: #096D97;
}
.ttl02B {
color: #096D97;
border-top: 3px solid #096D97;
padding: 10px 5px 10px 70px;
margin: 70px 0 30px;
overflow: hidden;
position: relative;
}
.ttl02O {
color: #DB7E02;
border-top: 3px solid #DB7E02;
padding: 10px 5px 10px 70px;
margin: 70px 0 30px;
overflow: hidden;
position: relative;
}
.ttl02R {
color: #990000;
border-top: 3px solid #990000;
padding: 10px 5px 10px 70px;
margin: 70px 0 30px;
overflow: hidden;
position: relative;
}
.ttl02G {
color: #054D00;
border-top: 3px solid #054D00;
padding: 10px 5px 10px 70px;
margin: 70px 0 30px;
overflow: hidden;
position: relative;
}
.ttl02B::before {
content: "";
position: absolute;
top: -150%;
left: -150px;
width: 200px;
height: 300%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
background: #096D97;
}
.ttl02O::before {
content: "";
position: absolute;
top: -150%;
left: -150px;
width: 200px;
height: 300%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
background: #DB7E02;
}
.ttl02R::before {
content: "";
position: absolute;
top: -150%;
left: -150px;
width: 200px;
height: 300%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
background: #990000;
}
.ttl02G::before {
content: "";
position: absolute;
top: -150%;
left: -150px;
width: 200px;
height: 300%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
background: #054D00;
}
.ttl02B::after, .ttl02O::after, .ttl02R::after, .ttl02G::after {
content: "\f063";
font-family: "Font Awesome 5 Free";
font-size: 2.4rem;
color: #FFF;
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block;
padding-top: 10px;
padding-left: 16px;
}
.mainvisual {}
.cont01 {
padding: 50px 0;
}
.cont01 .box {
display: flex;
justify-content: space-between;
margin: 0 0 10px;
}
.cont01 .box .box01 {
padding: 0 20px 0 0;
}
.cont01 .box .box02 {
padding: 0 20px 0 0;
display: flex;
align-items: center;
}
.cont01 .box .box03 {
padding: 0 20px 0 0;
}
.cont01 .box .box04 {
padding: 0 0 0 0;
display: flex;
align-items: center;
}
.cont01 .box h3 {
margin: 0 0 10px;
}
.cont01 .box select {
font-size: 1.4rem;
padding: 5px;
}
.cont01 .box select#SEL2 {
margin-bottom: 20px;
}
.cont01 .box input[type="submit"] {
font-size: 1.6rem;
padding: 10px 30px;
background: #D34649;
border: none;
color: #FFF;
}
.cont01 p {
font-size: 1.4rem;
}
.cont01 p img {
width: auto;
}
.cont02 {
padding: 50px 0;
background: #e6f5ff;
}
.cont03 {
padding: 50px 0;
}
.cont03 .ticket_list {
list-style: none;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.cont03 .ticket_list li {
margin: 0 15px 10px 0;
position: relative;
}

.cont03 .ticket_list li .balloon3-left {
position: absolute;
top: -15px;
right: -30px;
display:flex;
align-items:center;
justify-content: center;
padding: 0 5px;
width: 36px;
height: 36px;
line-height:1;
text-align: center;
color: #FFF;
font-size:1.2rem;
font-weight: bold;
background: #FF0000;
border-radius: 50%;
box-sizing: border-box;
animation:blink 1s ease infinite alternate;
z-index:5;
}

.cont03 .ticket_list li .balloon3-left:before {
content: "";
position: absolute;
top: 50%;
left: -12px;
margin-top: -8px;
border:8px solid transparent;
border-right:8px solid #FF0000;
z-index: 0;
}

.cont04 {
padding: 50px 0;
}
.cont04 .footer_text {
margin-top: 50px;
padding: 20px;
line-height: 120%;
margin-bottom: 20px;
background: #E1F4FD;
border: 1px solid #0971A0;
border-radius: 3px;
}
.cont04 .footer_text h3 {
background: #0971A0;
color: #FFF;
padding: 5px 10px;
margin-bottom: 5px;
font-size: 1.8rem;
border-radius: 3px;
}
.cont04 .footer_text p {
padding: 5px;
font-size: 1.4rem;
}
.cont05 {
padding: 50px 0;
background: #e6f5ff;
}
.cont05 ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.cont05 ul li {
margin-right: 15px;
margin-bottom: 15px;
}
.cont06 {
padding: 50px 0;
}
.cont07 {
padding: 50px 0;
}
.list02 {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.list02 li {
width: 285px;
border: solid 2px #CCC;
margin: 0 20px 30px 0;
box-sizing: border-box;
}
.list02 li a {
padding: 15px;
display: block;
color: #333;
height: 100%;
box-sizing: border-box;
}
.list02 li a:hover {
background: #eef6fb;
}
.list02 li .box {
overflow: hidden;
padding: 0 0 15px;
}
.list02 li .box .img {
width: 60px;
float: left;
}
.list02 li .box .img img {
width: 100%;
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.7);
}
.list02 li .box .txt01 {
width: 170px;
float: right;
}
.list02 li .box .txt01 h4 {
margin: 0 0 5px;
font-feature-settings: "palt";
}
.list02 li .box .txt01 dl {
display: flex;
margin: 0;
padding: 0;
}
.list02 li .box .txt01 dl dt {
background: #F00;
padding: 2px 8px;
color: #FFF;
font-size: 1.4rem;
font-weight: bold;
display: inline-block;
margin: 0 10px 0 0;
font-feature-settings: "palt";
}
.list02 li .box .txt01 dl dd {
display: inline-block;
margin: 0;
font-weight: bold;
}
.list02 li .txt02 {
font-size: 1.2rem;
}
.list02 li:nth-child(4n+4) {
margin-right: 0;
}
}
/*sp*/
@media only screen and (max-width: 767px) {
.add {
font-size: 1.6rem
}
.ttl01 {
font-size: 2.4rem;
padding: 5px 50px;
position: relative;
margin: 0 0 50px;
}
.ttl01::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 5px;
background: #096D97;
}
.ttl01::after {
content: "";
position: absolute;
top: 0;
left: 8px;
bottom: 0;
width: 2px;
background: #096D97;
}
.ttl02B {
color: #096D97;
border-top: 3px solid #096D97;
padding: 10px 5px 10px 70px;
margin: 70px 0 30px;
overflow: hidden;
position: relative;
}
.ttl02O {
color: #DB7E02;
border-top: 3px solid #DB7E02;
padding: 10px 5px 10px 70px;
margin: 70px 0 30px;
overflow: hidden;
position: relative;
}
.ttl02R {
color: #990000;
border-top: 3px solid #990000;
padding: 10px 5px 10px 70px;
margin: 70px 0 30px;
overflow: hidden;
position: relative;
}
.ttl02G {
color: #054D00;
border-top: 3px solid #054D00;
padding: 10px 5px 10px 70px;
margin: 70px 0 30px;
overflow: hidden;
position: relative;
}
.ttl02B::before {
content: "";
position: absolute;
top: -150%;
left: -150px;
width: 200px;
height: 300%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
background: #096D97;
}
.ttl02O::before {
content: "";
position: absolute;
top: -150%;
left: -150px;
width: 200px;
height: 300%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
background: #DB7E02;
}
.ttl02R::before {
content: "";
position: absolute;
top: -150%;
left: -150px;
width: 200px;
height: 300%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
background: #990000;
}
.ttl02G::before {
content: "";
position: absolute;
top: -150%;
left: -150px;
width: 200px;
height: 300%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
background: #054D00;
}
.ttl02B::after, .ttl02O::after, .ttl02R::after, .ttl02G::after {
content: "\f063";
font-family: "Font Awesome 5 Free";
font-size: 2.4rem;
color: #FFF;
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block;
padding-top: 10px;
padding-left: 16px;
}
.mainvisual {}
.cont01 {
padding: 10% 2%;
}
.cont01 .box {
display: inherit;
justify-content: space-between;
margin: 0 0 10px;
}
.cont01 .box .box01 {
padding: 0 50px 0 0;
}
.cont01 .box .box02 {
padding: 20px 0;
text-align: center;
}
.cont01 .box .box02 img {
transform: rotate(90deg);
width: auto;
}
.cont01 .box .box03 {
padding: 0 50px 0 0;
}
.cont01 .box .box04 {
padding: 20px 0 0 0;
display: flex;
align-items: center;
}
.cont01 .box h3 {
margin: 0 0 10px;
}
.cont01 .box select {
font-size: 1.8rem;
padding: 5px;
}
.cont01 .box input[type="submit"] {
font-size: 1.6rem;
padding: 10px 30px;
background: #D34649;
border: none;
color: #FFF;
}
.cont01 p {
font-size: 1.4rem;
}
.cont01 p img {
width: auto;
}
.cont02 {
padding: 10% 2%;
background: #e6f5ff;
}
.cont03 {
padding: 10% 2%;
}
.cont03 .ticket_list {
width: 90%;
list-style: none;
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}

.cont03 .ticket_list li {
margin: 0 0 4% !important;
width: 100%;
position: relative;
}

.cont03 .ticket_list li {
margin: 0 15px 10px 0;
position: relative;
}

.cont03 .ticket_list li .balloon3-left {
position: absolute;
top: 5%;
left:100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
width: 30px;
height: 30px;
line-height: 1;
text-align: center;
color: #FFF;
font-size: .8rem;
font-weight: bold;
background: #FF0000;
border-radius: 50%;
box-sizing: border-box;
animation: blink 1s ease infinite alternate;
}

.cont03 .ticket_list li .balloon3-left:before {
content: "";
position: absolute;
top: 60%;
left: -6px;
margin-top: -8px;
border: 4px solid transparent;
border-right: 4px solid #F00;
z-index: 0;
}


.cont03 .ticket_list li:nth-child(2n+2) {
margin-right: 0;
}
.cont03 .ticket_list li img {
width: 100%;
height: auto;
}
.cont04 {
padding: 10% 2%;
}
.cont04 .footer_text {
margin-top: 50px;
padding: 20px;
line-height: 120%;
margin-bottom: 20px;
background: #E1F4FD;
border: 1px solid #0971A0;
border-radius: 3px;
}
.cont04 .footer_text h3 {
background: #0971A0;
color: #FFF;
padding: 5px 10px;
margin-bottom: 5px;
font-size: 1.8rem;
border-radius: 3px;
}
.cont04 .footer_text p {
padding: 5px;
font-size: 1.4rem;
}
.cont05 {
padding: 10% 2%;
background: #e6f5ff;
}
.cont05 ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.cont05 ul li {
margin: 0 2% 3% 0;
width: 49%;
}
.cont05 ul li:nth-child(2n+2) {
margin-right: 0;
}
.cont05 ul li img {
width: 100%;
height: auto;
}
.cont06 {
padding: 10% 2%;
}
.cont07 {
padding: 10% 2%;
}
.list02 {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.list02 li {
width: 48%;
border: solid 2px #CCC;
margin: 0 4% 20px 0;
box-sizing: border-box;
}
.list02 li a {
padding: 10px;
display: block;
color: #333;
height: 100%;
box-sizing: border-box;
}
.list02 li a:hover {
background: #eef6fb;
}
.list02 li .box {
overflow: inherit;
padding: 0 0 0;
}
.list02 li .box .img {
width: 60px;
float: left;
display: none;
}
.list02 li .box .img img {
width: 100%;
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.7);
}
.list02 li .box .txt01 {
width: auto;
float: none;
}
.list02 li .box .txt01 h4 {
margin: 0 0 5px;
font-feature-settings: "palt";
}
.list02 li .box .txt01 dl {
display: flex;
margin: 0;
padding: 0;
}
.list02 li .box .txt01 dl dt {
background: #F00;
padding: 2px 8px;
color: #FFF;
font-size: 1.4rem;
font-weight: bold;
display: inline-block;
margin: 0 10px 0 0;
font-feature-settings: "palt";
}
.list02 li .box .txt01 dl dd {
display: inline-block;
margin: 0;
font-weight: bold;
}
.list02 li .txt02 {
font-size: 1.2rem;
display: none;
}
.list02 li:nth-child(2n+2) {
margin-right: 0;
}
}