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

*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
html {
  font-size: 62.5%;
}
body{
font-size: 1.8rem;
font-family: 'Noto Sans JP', sans-serif;
font-feature-settings: "palt" 1;
background: url("/img/back_2024.jpg") repeat top center;
letter-spacing: 0.1rem;
}

/*
font-family: 'Nanum Myeongjo', serif;78
font-family: 'Noto Sans JP', sans-serif;3456789
font-family: 'Zen Antique', serif;4
*/

#title{
width: 100%;
position: relative;
padding: 0;
text-align: center;
overflow: hidden;
}
#title .obi{
width: 2500px;
padding-top: 100px;
background: url("../img/title24_01.jpg") no-repeat top center / 100% auto;
margin: 0 0 0 calc((100% - 2500px)/2);
}
#title .obi a img{
width: 100%;
max-width: 1500px;
}
#title .obi .box{
max-width: 1100px;
margin: auto;
margin-top: 30px;
}
#title .obi .youtube iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
max-width: 1100px;
display: block;
margin: 0 auto 30px;
}
#title .obi .youtube img{
width: 100%;
}
#title .obi .midashi{
width: 2500px;
position: relative;
background: url("../img/title24_03.png") no-repeat top center / 100% auto;
margin: 0 0 0 calc((100% - 2500px)/2);
padding: 100px 0 0 calc((100% - 2500px)/2);
text-align: center;
}
#title .obi .midashi p{
width: 100%;
color: #fff;
font-family: 'Zen Antique', serif;
padding: 0 15px;
line-height: 180%;
}
#title .obi .midashi img{
display: block;
margin: -140px 0 0 calc((100% - 2500px)/2);
}
#title .obi .midashi img.mi_obi02{
display: none;
}
@media (max-width: 1100px) {
#title .obi{
width: 100%;
padding-top: 50px;
background: url("../img/title24_01.jpg") no-repeat top center / 100% auto;
margin: 0;
}
#title .obi a img{
width: 100%;
}
#title .obi .youtube img{
width: 90%;
}
#title .obi .midashi{
width: 100%;
position: relative;
background: url("../img/title24_03.png") no-repeat top center / 200% auto;
margin: 0;
}
}
@media (max-width: 768px) {
#title .obi{
padding-top: 30px;
}
#title .obi .midashi{
background: url("../img/title24_03-sp.png") no-repeat top center / 100% auto;
padding: 60px 0 0 0;
}
#title .obi .midashi p{
font-size: 90%;
}
#title .obi .midashi img{
margin: -20px 0 0 0;
width: 100%;
}
#title .obi .midashi img.mi_obi01{
display: none;
}
#title .obi .midashi img.mi_obi02{
display: block;
}
}


#poster{
margin-top: 30px;
overflow: hidden;
}
#poster .text{
margin: 1rem auto 0;
padding: 2rem 2rem;
background:rgba(0,0,0,0.7);
}
#poster .text2{
margin: 3rem auto;
padding: 2rem 2rem;
background:rgba(255,255,255,0.7);
text-align: center;
}
#poster .text3{
margin: 3rem auto;
padding: 2rem 2rem;
background:rgba(255,255,255,0.7);
text-align: center;
}
#poster span{
display: block;
max-width: 1040px;
margin: 0 auto;
color: #fff;
line-height: 180%;
font-family: 'Zen Antique', serif;
font-size: 400;
}
#poster .text2 span{
color: #7D1719;
font-size: 3rem;
}
#poster .text3 span{
color: #7D1719;
font-size: 2rem;
}

.poster{
width: 2500px;
position: relative;
background: url("../img/title24_05.png") no-repeat top center / 100% auto;
margin: 0 0 0 calc((100% - 2500px)/2);
padding: 0 0 50px calc((100% - 2500px)/2);
text-align: center;
}
.poster p{
max-width: 600px;
margin: auto;
}
.poster img{
width: 100%;
}

@media (max-width: 1100px) {
.poster{
width: 100%;
position: relative;
background: url("../img/title24_05.png") no-repeat top center / 200% auto;
margin: 0;
}
}
@media (max-width: 768px) {
.poster{
padding: 0;
}
#poster .text3 span{
font-size: 1.6rem;
text-align: left;
}
}



@media (max-width: 768px) {
body{font-size: 1.6rem;}
}

body > h2{
margin: 5rem 0 0;
color: #fff;
font-family: 'Nanum Myeongjo', serif;
font-size: 4rem;
font-weight: 800;
letter-spacing: 0.8rem;
text-align: center;
}
body > h2.prog_title img{
width: 100%;
}

#program{
max-width: 1040px;
margin: 1rem auto 5rem;
background:url("/img/prog_back24.jpg") no-repeat top center / cover;
padding: 0 3rem 2rem;
color: #fff;
}
#program img{
width: 100%;
}
#program h3{
width: 100%;
padding: 1rem;
font-size: 2rem;
text-align: center;
margin: 2rem 0 0.5rem;
}
#program h3 img{
max-width: 470px;
}
#program .col-md-9 img{
max-width: 470px;
display: block;
margin-bottom: 1rem;
}
#program .col-md-9 p{
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
}
#program .col-md-9 p:first-of-type{
border-bottom: 1px solid #fff;
}
#program .col-md-3{
padding: 0.5rem;
}
#program h5{
width: 100%;
padding: 0.3rem;
text-align: center;
background: #002962;
}

@media (max-width: 768px) {
body > h2{font-size: 2.5rem;}
#program img{width: 80%;}
#program .col-md-3{text-align: center;}
#program .col-md-3 img{width: 50%;}
#program p{margin-top: 1rem;}
#program .col-md-3{background:rgba(255,255,255,0.8);
margin: 0 1rem 1rem;}
#program h4{padding: 0;margin: 3rem 0 0;}
#program h4 img{width: 100%;}
}

#kisei{
background-image: url("/img/kisei_line_top.png"), url("/img/kisei_line_bottom.png"),url("/img/kisei_back.jpg");
background-position: top left,bottom left,top left;
background-size: 100% auto, 100% auto ,cover;
background-repeat: no-repeat,no-repeat,no-repeat;
padding: 5rem 3rem 8rem;
}
#kisei .box{
max-width: 1040px;
margin: 0 auto;
}
#kisei img{
width: 100%;
}
#kisei h3{
background: #792b27;
width: 100%;
padding: 1rem 1rem 1.2rem;
font-size: 2rem;
text-align: center;
margin: 2rem 0 0.5rem;
color: #fff
}
#kisei h4{
width: 100%;
font-size: 3rem;
text-align: center;
margin: 4rem 0 2rem;
font-family: 'Zen Antique', serif;
font-weight: 400;
}
@media (max-width: 768px) {
#kisei{padding: 3rem 1.5rem;}
#kisei h3{font-size: 1.6rem;text-align: left;}
#kisei h4{font-size: 2.2rem;text-align: left;margin: 3rem 0 2rem;}
}

#kaijou{
background-image: url("/img/kisei_line_top.png"), url("/img/kisei_line_bottom.png"),url("/img/kisei_back.jpg");
background-position: top left,bottom left,top left;
background-size: 100% auto, 100% auto ,cover;
background-repeat: no-repeat,no-repeat,no-repeat;
padding: 8rem 3rem 8rem;
margin-top: 5rem;
}
#kaijou .box{
max-width: 1040px;
margin: 0 auto;
}
#kaijou h4{
width: 100%;
font-size: 3rem;
text-align: center;
margin: 0rem 0 2rem;
font-family: 'Zen Antique', serif;
font-weight: 400;
}
#kaijou img{
width: 100%;
}
#kaijou h2{
width: 100%;
font-size: 2.5rem;
text-align: center;
margin: 2rem 0 0.5rem;
}
#kaijou h3{
background: #792b27;
width: 100%;
padding: 1rem 1rem 1.2rem;
font-size: 2rem;
text-align: center;
margin: 2rem 0 0;
color: #fff
}
#kaijou .col-md-6{
margin-top: 1.5rem;
}
@media (max-width: 768px) {
#kaijou{padding: 3rem 1.5rem;margin-bottom: 5rem;}
#kaijou h4{font-size: 2.2rem;text-align: left;margin: 0 0 2rem;}
#kaijou h3{font-size: 1.6rem;text-align: left;}
}

#kitchencar{
padding: 8rem 3rem 4rem;
margin-top: 5rem;
}
#kitchencar .box{
max-width: 1040px;
margin: 0 auto;
}
#kitchencar .box img{
width: 100%;
}
#kitchencar .box p{
margin: 1rem auto 0;
font-size: 16px;
}
@media (max-width: 768px) {
#kitchencar{
padding: 3rem 1.5rem 3rem;
margin-top: 2rem;
}
}

#bus{
padding: 0 3rem 8rem;
margin-top: 5rem;
}
#bus .box{
max-width: 1040px;
margin: 0 auto;
}
#bus .box img{
width: 100%;
}
@media (max-width: 768px) {
#bus{
padding: 0 1.5rem 3rem;
margin-top: 2rem;
}
}

#photocon{
padding: 0 3rem 8rem;
}
#photocon .box{
max-width: 1040px;
margin: 0 auto;
}
#photocon .box img{
width: 100%;
}
#photocon .step{
padding: 0 3rem 3rem;
background: #fff;
}
#photocon .step h5{
font-size: 2rem;
color: #72c6cc;
font-weight: 300;
letter-spacing: 0.1rem;
border-bottom: 1px solid #aaa;
padding-bottom: 10px;
}
#photocon .box p{
margin: 1rem auto 0;
font-size: 16px;
}
#photocon .step a,#photocon .step span{
color: #72c6cc;
font-weight: 800;
}
#photocon .step a{
text-decoration: underline;
}
#photocon .text{
margin: 30px 10px 0;
background: #f0f1f0;
padding: 15px;
font-size: 80%;
}

@media (max-width: 768px) {
#photocon{
padding: 0 1.5rem 3rem;
margin-top: 2rem;
}
#photocon .step{
padding: 0 3rem 15px;
}
#photocon .step h5{
font-size: 1.6rem;
letter-spacing: 0.1rem;
padding-bottom: 5px;
margin-top: 10px;
}
#photocon .text{
margin: 20px 0 0;
padding: 10px;
font-size: 11px;
}

}

#kyousan{
padding: 0;
background: url("/img/kyousan_back.png") no-repeat top center / 100% auto;
padding-top: 80px;
}
#kyousan h4{
text-align: center;
}
#kyousan h4 img{
max-width: 350px;
}
#kyousan .row{
max-width: 1040px;
margin:  1.5rem auto 0;
}
#kyousan .row div{
margin: 1.5rem auto;
}
#kyousan img{
width: 100%;
}
#kyousan .row.d-type{
text-align: center;
}
#kyousan .row.d-type img{
width: 85%;
}
#kyousan span{
display: block;
margin: 3rem auto;
text-align: center;
}
#kyousan span a{
display: inline-block;
background: #fff;
border-radius: 4rem;
padding: 1.5rem 3rem;
font-size: 2rem;
color: #2c4d77;
letter-spacing: 0.2rem;
font-family: 'Nanum Myeongjo', serif;
transition: 1.0s ;
}
#kyousan span a:hover{
text-decoration: none;
background-color: #9ea9bd;
}
@media (max-width: 768px) {
#kyousan{padding-top: 0;}
#kyousan h4 img{max-width: 250px;}
#kyousan .row div{padding: 0 0.5rem;}
#kyousan span a{padding: 1.5rem 2rem;font-size: 1.8rem;letter-spacing: 0.1rem;}
}


#live{
overflow: hidden;
}
#live .back{
width: 2500px;
position: relative;
background: url("../img/title24_06.jpg") no-repeat top center / 100% auto;
margin: 0 0 0 calc((100% - 2500px)/2);
padding: 30px 0 50px calc((100% - 2500px)/2);
text-align: center;
}
#live .box{
max-width: 1040px;
margin: 0 auto;
padding: 3rem 0 0!important;
text-align: center;
overflow: hidden;
}
#live img{
width: 100%;
}
#live a{
display: block;
}
#live a.li-link{
display: inline-block;
width: 45%;
background: #e16b81;
padding: 5px 10px 10px;
margin: 0 2%;
color: #fff;
border-radius: 0 0 10px 10px;
transition: opacity 0.5s ease-in-out;
}
#live a.li-link:hover{
background: #dc6a7b;
}
#live .youtube{
max-width: 1040px;
margin: 0 auto;
overflow: hidden;
}
#live .youtube > div{
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 3rem;
}
#live .youtube > div h5{
font-size: 16px;
}
#live .youtube > div iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 1100px) {
#live .back{
width: 100%;
position: relative;
background: url("../img/title24_06.jpg") no-repeat top center / 200% auto;
margin: 0;
}
}
@media (max-width: 768px) {
#live .back{
background: url("../img/title24_06.jpg") no-repeat top center / 100% auto;
padding: 10px 15px 30px;
}
}






#oubo .box{
max-width: 800px;
margin: 50px auto 0;
text-align: center;
}
#oubo h3{
margin:0 0 20px;
font-size: 150%;
font-weight: 600;
}
#oubo .box p{
text-align: left;
}
#oubo a {
color: #000;
}
#oubo .box > a{
margin: 2rem auto 5rem;
display: inline-block;
background: #51BEA9;
color: #fff;
padding: 2rem 5rem;
border-radius: 5rem;
font-size: 3rem;
letter-spacing: 0.2rem;
font-weight: 800;
transition: 0.5s;
}
#oubo .box > a:hover{
background:#92DDD5;
text-decoration: none;
}
#oubo .box.end > a{
margin: 0 auto;
}
#oubo .box.end > a span{
display: block;
font-size: 75%;
}
#oubo .box.end p{
margin: 1rem auto 5rem;
text-align: center;
}
@media (max-width: 768px) {
#oubo{
padding: 0 15px 0;
}
#oubo .box > a{
margin: 2rem auto 5rem;
display: inline-block;
background: #51BEA9;
color: #fff;
padding: 2rem 5rem;
border-radius: 5rem;
font-size: 2rem;
letter-spacing: 0.2rem;
font-weight: 800;
transition: 0.5s;
}
}

#info{
text-align: center;
margin-top: 30px;
}

footer{
margin-top: 50px;
background: #000 url("/img/f-under.png") no-repeat bottom center / 100% auto;
}
footer .container img{
width: 100%;
border: none;
margin: 20px auto 30px;
}


/*--kyousan---*/
#kyousan.page{
background: rgba(255,255,255,0.7);
padding: 3rem 0;
}
#kyousan.page h4{
color: #2c4d77;
}
#kyousan.page .e-type{
margin: 1.5rem auto;
}
#kyousan.page .e-type > div{
max-width: 1040px;
margin: 0 auto;
text-align: center;
vertical-align: top;
}
#kyousan.page .e-type span{
width: 30%;
display: inline-block;
margin: 1.5rem 0.5rem 0;
font-size: 1.6rem;
line-height: 120%;
vertical-align: top;
}
#kyousan.page .f-type{
margin: 4rem auto;
}
#kyousan.page .f-type > div{
max-width: 1040px;
margin: 0 auto;
text-align: center;
vertical-align: top;
}
#kyousan.page .f-type span{
width: 22%;
display: inline-block;
margin: 1.5rem 0.5rem 0;
font-size: 1.4rem;
line-height: 120%;
vertical-align: top;
}
@media (max-width: 768px) {
#kyousan.page .e-type span{width: 46%;font-size: 1.4rem;text-align: left;}
#kyousan.page .f-type span{width: 29%;font-size: 1.2rem;text-align: left;}
}


/*--LIVE---*/
body#live {
background: url("/img/main_back_live.jpg") no-repeat top center / cover;
padding: 0;
}
body#live .title {
padding: 1rem;
}
body#live .title h1 img{
max-width: 700px;
}
body#live a{
border: none;
}
body#live .box {
padding: 15% 0 20%;
text-align: center;
color: #fff;
font-family: 'Zen Antique', serif;
font-size: 5rem;
letter-spacing: 2rem;
font-weight: 400;
}
body#live .youtube{
width: 100%;
aspect-ratio: 16/9;
}
body#live .youtube iframe{
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
body#live .title{padding: 1rem 1.5rem 0;}
body#live .box {font-size: 2rem;}
}


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

@media only screen and (max-width: 768px ){
.sp-dn{display: none;}
.pc-dn{display: block;}
}