/* ============================== */
/*img cover*/
.cover {width:100%; height:100%;}
/*link*/
a{text-decoration:underline; color:#000;}
a:hover{ text-decoration:none; color:#000;}

.alt{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
.br-smp{display: none;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
.br-pc{display: none;}
}
/*///////////////// style ////////////////*/
body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
div#con-body{
background-attachment:fixed;
overflow:hidden;
}

body {
display: flex;
flex-flow: column;
min-height: 100vh;
background: #fff;
}
header,
main {
  flex: 1;
}

.content{
width:100%;
background: #ffdd00;
}

.yel{
color:#ffdd00;
}
.orange{
color:#FF8A00;
}
.red{
color:#F01902;
}
.blue{
color:#223595;
}
.skyblue{
color:#10C0FF;
}
.green{
color:#25A352;
}
.pink{
color:#FF5073;
}


h2,h3,h4.lead,h5,h6{
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
font-feature-settings: "palt";
letter-spacing:0;
text-align: justify;
word-break: break-all;
text-justify: inter-ideograph;
}


.content p,.content dd,
#notes li
{
font-feature-settings: "palt";
letter-spacing: 0.004em;
text-align: justify;
word-break: break-all;
text-justify: inter-ideograph;
line-height: 1.6;
font-family: a-otf-ud-shin-go-pr6n, sans-serif;
font-style: normal;
font-weight: 300;
}
.big{font-size: 120%}
@media all and (min-width:768px) {
.content p,
.content table,
.content li,.content dd
{
font-size: 1.3vw;
}
}
@media all and (max-width: 767px) {
.content p,
.content table,
.content li,.content dd
{
font-size: 2.3vw;
}
}
/*///////////////// header ////////////////*/

@media all and (min-width: 768px) {
header .TBSlogo{
  width: 8vw;
margin: 5px;
}
}

@media all and (max-width: 767px) {
header .TBSlogo{
  width: 15vw;
margin: 5px;
}
}


/*///////////////// kv_area ////////////////*/
#kv_area{
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
}

#kv_area header{
width:100%;
background-size:cover;
z-index: 10;
}

#kv_area .catch{
text-align: center;
}



.daybox{
display: flex;
justify-content: space-around;
width:80vw;
margin:1em auto;
}

.daybox .ouen{
width: 38%;
background: url(../img/yasuko202502.png) center center no-repeat;
background-size: contain;
aspect-ratio: 120/50;
}
.daybox .ouen img{
width: 100%;
height: 100%;
}

ul.day{
width: 55%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
margin:1em auto 2em;
}

ul.day li.point{
width: 100%;
display:flex;
justify-content:flex-start;
align-items: center;
align-items: flex-start;
padding:.2em 0;
white-space: nowrap;
}
ul.day li.point:last-child{
padding-top:.5em;
}

ul.day li.point span:first-child{
background: #fff;
text-align: center;
padding:.4em .5em;
margin-right: 1em;
font-size: 70%;
line-height: 1 !important;
border-radius: 5px;
}
ul.day li.point span:nth-child(2){
padding:.2em 0;}

ul.day li:nth-child(4),
ul.day li:nth-child(5){
font-size:1.8vw;
font-family: a-otf-ud-shin-go-pr6n, sans-serif !important;
font-feature-settings: "palt";
letter-spacing: 0.004em;
text-align: justify;
word-break: break-all;
text-justify: inter-ideograph;
line-height: 1.5;
font-style: normal;
font-weight: 300;
}

ul.day a{
color: #223595;
background-color: #FFF;
padding:.2em .5em;
border-radius: 5px;
}
ul.day a:hover{
color: #F01902;
}

.daybox li small
{
display: inline;
font-size:1.3vw;
}
.daybox li strong
{
font-family: corporate-logo-ver2, sans-serif;
font-weight: bold;
}


#kv_area p{
position: relative;
text-align: left;
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
font-feature-settings: "palt";
letter-spacing:0;
word-break: break-all;
text-justify: inter-ideograph;
background: #fff;
width:70vw;
margin:0 auto 3em;
border-radius: 1em;
font-size: 1.8vw;
line-height: 1.2;
padding: 1em 0 1em 1em;
}
#kv_area p::after{
content: '';
display: block;
width: 11vw;
background: url(../img/present.png) center center no-repeat;
background-size: contain;
aspect-ratio:964/732 ;
position: absolute;
top:-.2em; right: 2em;
}


.mintxt{
font-size: 90% !important;
padding:0 !important;
vertical-align: middle;
}


@media all and (min-width: 768px) {
#kv_area header{
background:url(../img/main_pc2026.png?new) center top no-repeat;
background-size: cover;
aspect-ratio: 1440/946;
margin: auto;
}
#kv_area .catch{
font-size: 2vw;
line-height:1.5;
margin-bottom: 4em;
}
ul.day li{
font-size: 1.6vw;
}
ul.day li:nth-child(1),
ul.day li:nth-child(2){
font-size: 2.2vw;
}
}

@media all and (max-width: 767px) {
#kv_area header{
background:url(../img/main_smp2026.png?new) center top no-repeat;
background-size: cover;
aspect-ratio: 1920/1362;
margin: auto;
}

#kv_area .catch{
font-size: 4vw;
line-height:1.5;
margin-bottom: 4em;
}

.daybox{
display: flex;
flex-wrap: wrap;
}
.daybox .ouen{
width: 80%;
/*margin-top: 1em;*/
}
ul.day {
width: 100%;
margin:1em auto;
justify-content: center;
}

ul.day li.point{
width: 100%;
display:flex;
justify-content:center;
align-items: center;
font-size: 3.5vw;
}
ul.day li:nth-child(1),
ul.day li:nth-child(2){
font-size: 4vw;
}
ul.day li:nth-child(3),
ul.day li:nth-child(4){
font-size: 3.3vw;
text-align: center;
}
ul.day li span:nth-child(2){
padding:.1em 0;
}
.daybox li small
{
display: inline;
font-size:2.5vw;
}
#kv_area p{
width:85vw;
margin:0 auto 2em;
border-radius: 1em;
font-size:3.4vw;
line-height: 1.2;
padding: 1em 0 1em 1em;
}
#kv_area p::after{
width: 22vw;
position: absolute;
top:-1.6em; right:0em;
}
.mintxt{
padding:0 !important;
margin: .5em 0 0 0 !important;
}
ul.day li:last-child{
flex-wrap: wrap;
}
}
/*///////////////// sns ////////////////*/
ul#snsLink{
display: flex;
justify-content: center;
margin-bottom: 2em;
}
ul#snsLink li{
padding: 0 1vw;
}
ul#snsLink li a{
display: block;
aspect-ratio: 1/1;
width:5vw; 
}
ul#snsLink #x{
background:url(../img/sns_x.png) center center no-repeat;
background-size: contain;
}
ul#snsLink #instagram{
background:url(../img/sns_insta.png) center center no-repeat;
background-size: contain;
}
ul#snsLink #line{
background:url(../img/sns_line.png) center center no-repeat;
background-size: contain;
}

@media all and (min-width: 768px) {
ul#snsLink li:hover{
transition: all .2s ease;
transform:scale(1.05);
}
}

@media all and (max-width: 767px) {
ul#snsLink li a{
width:12vw; 
}
}

/*///////////////// main ////////////////*/

.box .in_box{
max-width: 1080px;
width: 80vw;
margin:0 auto;
padding:2vw 0;
}

.box .in_box > div{
margin:8vw 0;
}

.bg_y .box{
background: #ffdd00;
}
.bg_w .box{
background: #fff;
}

.bg_b{
background:rgba(34 ,53, 149, 100);
}
.bg_p{
background:rgba(254, 87, 121,100);
}


h2{
background-size: 100vw;
aspect-ratio: 1440/133;
}

h4.lead{
transform: rotate(-3deg);
text-align: center;
margin: 2em auto;
font-size: 1.6vw;
line-height:1.5;
}

h5{
font-size: min(1.2vw, 80%);
line-height:1.2;
min-height: 5vw;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: flex-start
}

ul.contItem
{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

ul.contItem.sasuke
{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ul.contItem.sasuke li{
width: 45%;
margin: 1em auto;
}
ul.contItem.sasuke h5{
font-size: min(2vw, 120%);
}
ul.contItem.sasuke .txt p{
font-size: min(1.6vw, 100%);
}
ul.contItem.sasuke .txt p.day{
font-size: min(1.4vw, 90%);
}
ul.contItem.sasuke .txt p.btn{
font-size: min(1.4vw, 90%);
}

ul.contItem li{
width: 30.333333333%;
margin: 1em 1.5%;
}
ul.contItem .txt p{
font-size: min(1.2vw, 70%);
margin: 1em auto;
}
ul.contItem .txt p:first-of-type{
min-height:3vw;
}
ul.contItem .txt p.day{
font-size: min(1.2vw, 60%);
margin: 1em auto;
text-align: center;
}
ul.contItem .txt p.btn{
font-size: 1vw;
margin: 1em auto;
text-align: center;
background: #000;
color: #FFF;
border-radius: 2em;
padding:.5em;
width: 60%;
}
ul.contItem .txt p.btn span{
display: inline-block;
}
ul.contItem .txt p.btn span::after{
content: ' ＋';
color: #FFF;
}

ul.contItem a{
text-decoration:none !important;
}

#program .pinkArea ul.contItem a:hover p.btn{
background: #FF5073!important;
color: #FFF !important;
}
#program .skyblueArea ul.contItem a:hover p.btn{
background: #10C0FF!important;
color: #FFF !important;
}
#program .greenArea ul.contItem a:hover p.btn{
background: #25A352!important;
color: #FFF !important;
}
#program .orangeArea ul.contItem a:hover p.btn{
background: #FF8A00 !important;
color: #FFF !important;
}


ul.contItem .item{
border-radius: 1em 4em 1em 4em;
box-sizing: border-box;
}

ul.contItem .item .txt{
padding:1em .5em;
}



@media all and (max-width: 767px) {
.box .in_box{
margin: auto;
padding: 2em 0;
}

.box .in_box > div:nth-child(2){
margin:15vw 0;
}
h4.lead{
transform: rotate(-3deg);
text-align: center;
margin: 2em auto;
font-size: 3vw;
}

h5{
font-size: 2.8vw;
min-height: 11vw !important;
display: flex;
align-items: center;
}

ul.contItem.sasuke h5{
font-size: 4.5vw;
}
ul.contItem.sasuke li{
width: 80%;
margin: 1em auto;
}
ul.contItem.sasuke .txt p{
font-size:4vw;
}
ul.contItem.sasuke .txt p.day{
font-size: 3vw;
}
ul.contItem.sasuke .txt p.btn{
font-size: 3vw;
}


ul.contItem li{
width: 47%;
margin: 1em 1.5%;
}
ul.contItem .txt p{
font-size: 2.5vw;
margin: 1em auto;
}
ul.contItem .txt p:first-of-type{
min-height:8vw;
}

ul.contItem .txt p.day{
font-size: 2vw;
}
ul.contItem .txt p.btn{
font-size: 2vw;
}
}

/*////info/////*/
#info h2{
background: url(../img/info/h2.png) center center no-repeat;
background-size: contain;
aspect-ratio: 2602/209;
margin-top: 10vw;
}

#info .bg_p{
color: #fff;
background-image: url(../img/w_bg1.png);
background-repeat:no-repeat;
background-position:left top -1px;
background-size:contain;
}
#info ul{
width:100%;
margin:5vw auto;
}
#info ul li {
display: flex;
justify-content: center;
align-items: flex-start;
margin-top: 1em;
font-size: 1.5vw;
}
#info ul li span{
display: inline-block;
line-height: 1.2;
}
#info ul li span:nth-child(1){
width: 14vw;
display: block;
background: #ffdd00;
color: #000;
font-size: 80%;
padding: .2em;
margin-right: 1em;
font-weight: 700;
text-align: center;
}
#info ul li span:nth-child(2){
width:86vw;
}
#info ul li a{
color:#FFF;
text-decoration: none;
cursor: pointer;
}
#info ul li a:hover{
color:#ffdd00;
}

@media all and (max-width: 767px) {
#info .bg_p{
color: #fff;
background-image: url(../img/w_bg_smp1.png);
background-repeat:no-repeat;
background-position:left top -1px;
background-size:contain;
aspect-ratio: 1170/174;
}
#info ul{
margin:10vw auto 5w;
}
#info ul li {
font-size: 3vw;
}
}




/*////program/////*/
#program {
background-color:rgba(34 ,53, 149, 100);
}

#program .teacher{
width: 70%;
margin:1em auto 0;
}

#program .teacher:hover{
opacity: .8;
}

#program .teacher div span.lazy{
position: relative;
display: block;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
aspect-ratio: 714/210;
border-radius: 50px;
}

#program .attention{
font-size: min(2vw, 180%);
}
#program .attention2{
font-size: min(1.5vw, 160%);
}
@media all and (max-width: 767px) {

#program .teacher{
width: 100%;
padding-bottom: 2em;
}
#program .attention{
font-size: 3.8vw;
}
#program .attention2{
font-size: 3vw;
}
}

#program h2{
background-image:url(../img/program/h2.png) , url(../img/w_bg2.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left bottom -1vw;
background-size: 20vw , cover;
}

#program h3{
text-align: center;
padding:1em 0;
border-radius: 1em;
position: relative;
}

#program h3::before{
content:'';
background: url(../img/eye.png) center bottom no-repeat;
background-size: contain;
display: block;
aspect-ratio:203/110;
position: absolute;
top:-30px;
right: 0;
left: 0;
margin: 0 auto;
height: 30px;
}

#program h3 span{
font-size: 2.5vw;
  color: #000;
  text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}



#program h5 span:first-child{
white-space: nowrap;
font-family: 'Courier New', Courier, monospace;
padding:.8em .8em 0 .8em;
}

#program h5 span{
color: #FFF;
padding:.2em .8em .8em .8em;
display: block;
width: 100%;
}

#program h6{
font-size: 2vw;
text-align: center;
padding: .5em 0;
margin: 2em 0 1em;
}
#program .pinkArea h6{
border-top:3px dashed #FF5073;
border-bottom:3px dashed #FF5073;
}
#program .skyblueArea h6{
border-top:3px dashed #10C0FF;
border-bottom:3px dashed #10C0FF;
}

#program .skyblueArea > p{
text-align: center;
background:#10C0FF;
color: #fff;
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
border-radius: 50px;
padding: .5em 0;
margin-top: 1em;
font-size: 1.5vw;
}

/*colorArea*/
#program .skyblueArea {
background-image: url(../img/bubble_bule.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center top 7vw;
}
#program .skyblueArea h3,
#program .skyblueArea h5{
background:#10C0FF;
}
#program .orangeArea {
background-image: url(../img/bubble_orange.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center top 7vw;
}
#program .orangeArea h3,
#program .orangeArea h5{
background:#FF8A00;
}
#program .orangeArea .red{
text-align: center;
margin-top: 2em;
}

#program .greenArea {
background-image: url(../img/bubble_green.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center top 7vw;
}
#program .greenArea h3,
#program .greenArea h5{
background:#25A352;
}

#program .pinkArea {
background-image: url(../img/bubble_pink.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center top 7vw;
}
#program .pinkArea h3,
#program .pinkArea h5{
background:#FF5073;
}



@media all and (max-width: 767px) {
#program .skyblueArea ,
#program .orangeArea,
#program .greenArea,
#program .pinkArea
{
background-position: center top 15vw;
}

#program h6{
font-size: 3.8vw;
text-align: center;
padding: .5em 0;
margin: 2em 0 1em;
}

#program .pinkArea h6{
border-top:2px dashed #FF5073;
border-bottom:2px dashed #FF5073;
}
#program .skyblueArea h6{
border-top:2px dashed #10C0FF;
border-bottom:2px dashed #10C0FF;
}




}

/*color*/
#program .skyblueArea .item{
border:solid 3px #10C0FF;
border-bottom:solid 15px #10C0FF;
}
#program .orangeArea .item{
border:solid 3px #FF8A00;
border-bottom:solid 15px #FF8A00;
}
#program .greenArea .item{
border:solid 3px #25A352;
border-bottom:solid 15px #25A352;
}
#program .pinkArea .item{
border:solid 3px #FF5073;
border-bottom:solid 15px #FF5073
}



@media all and (max-width: 767px) {
#program h2{
background-image:url(../img/program/h2.png) , url(../img/w_bg_smp2.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left bottom -1vw;
background-size: 30vw , cover;
aspect-ratio: 1170/174;
}
#program h3 span{
font-size: 4.5vw;
}
#program .skyblueArea > p{
font-size: 3vw;
}
}


/*追加*/
#program s{
padding:0 .4em ;
text-decoration: line-through;
text-decoration-thickness: 2px;
text-decoration-color: #F01902;
}
#program .del {
display: inline !important;
font-family: corporate-logo-ver2, sans-serif !important;
padding: 0 !important;
}

#program .skyblueArea h6.sptitle{
    border: solid 3px #10C0FF;
    border-bottom: solid 15px #10C0FF;
    box-sizing: border-box;
    border-radius: .2em 1em;
}


#program .skyblueArea .midashi{
font-size: 1.6vw !important;
line-height: 1.4;
text-align: center;
padding: .4em 0 !important;
margin: 2em auto 1em !important;
border-radius: 10px !important;
color: #000 !important;
border: solid 3px #10C0FF;
background: #fff !important;
width: 96%;
}

#program .skyblueArea h6.sptitle span
{
    display: inline-block;
    bottom: 5px;
    right: 5px;
    color: rgb(255, 255, 255);
    font-size: 60% !important;
    background: rgb(240, 25, 2);
    padding: 0.2em 0.5em;
font-family: a-otf-ud-shin-go-pr6n, sans-serif !important;
    line-height: 1;
    vertical-align: middle;
}

@media all and (max-width: 767px) {
#program .skyblueArea .midashi{
font-size: 3vw !important;
}
}

#program .skyblueArea .b-1_box{
width: 90%;
margin: auto;
}
#program .skyblueArea .b-1_box p{
margin-top: 1em;
}
#program .skyblueArea .b-1_box p:first-of-type{
font-size: 1.6vw;
font-weight: 700;
font-family: corporate-logo-ver2, sans-serif !important;
}

#program .skyblueArea .b-1_box .thum{
border-radius: 10px;
}
@media all and (max-width: 767px) {
#program .skyblueArea .b-1_box p:first-of-type{
font-size: 2.5vw;
}
}

.sp_btn
{
display: block;
width: 40%;
text-align: center;
margin:1em auto 0;
text-decoration: none;
background-color: #10C0FF;
color: #FFF;
border-radius: 50px;
padding:.5em 0;
    border: solid 3px #000;
    border-bottom: solid 10px #000;
}
.sp_btn:hover
{
background-color: #10C0FF;
color: #FFF;
border: solid 3px #10C0FF;
border-bottom: solid 10px #10C0FF;
transform: translateY(3px); 
}
.sp_btn p{
text-align: center;
font-family: corporate-logo-ver2, sans-serif;
font-size: 130%;
}
.sp_btn span{
display: block;
font-size: 70%;
}
@media all and (max-width: 767px) {

.sp_btn
{
display: block;
width: 60%;
}
.sp_btn p{
font-size: 90%;
}
}

/*timetable*/

div.timetable{
background: #FF5073;
color:#fff;
padding: 1em;
margin-top: 2em;
border-radius: 1em;
}
div.timetable ul{
margin-bottom: 1em;
}

div.timetable p .red{
margin:1em 0;
display: block;
font-size: 1.3vw;
line-height: 1.3;
}

div.timetable li{
margin-bottom:.5em;
font-size: 1.3vw;
line-height: 1.5;
}

div.timetable p.ti{
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
font-feature-settings: "palt";
letter-spacing:0;
text-align: justify;
word-break: break-all;
text-justify: inter-ideograph;
font-size:1.8vw;
margin-bottom:.5em;
}
div.timetable p:first-of-type{
text-align: center;
padding-bottom: .5em;
border-bottom:dashed 3px #fff;
font-size:2.2vw;
}



@media all and (max-width: 767px) {
div.timetable p .red,
div.timetable li{
font-size:2.5vw !important;
}
div.timetable p.ti{
font-size:2.8vw;
}
div.timetable p:first-of-type{
font-size:3.2vw;
}
}

/*colorArea*/
#stage .yellowArea {
background-image: url(../img/bubble_white.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center top 7vw;
}
#stage .yellowArea h3,
#stage .yellowArea h5{
background:#fff;
}
@media all and (max-width: 767px) {
#stage .yellowArea
{
background-position: center top 15vw;
}
}



/*////food/////*/

#food h2{
background-image:url(../img/food/h2.png) , url(../img/w_bg2.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left bottom -1vw;
background-size: 20vw , cover;
}
#food h3{
text-align: center;
padding:1em 0;
border-radius: 1em;
position: relative;
}

#food h3::before{
content:'';
background: url(../img/eye.png) center bottom no-repeat;
background-size: contain;
display: block;
aspect-ratio:203/110;
position: absolute;
top:-30px;
right: 0;
left: 0;
margin: 0 auto;
height: 30px;
}

#food h3 span{
font-size: 2.5vw;
  color: #000;
  text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}

#food h5 span{
color: #FFF;
padding:.5em;
display: block;
}

/*colorArea*/
#food .pinkArea {
background-image: url(../img/bubble_pink.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center top 7vw;
}
#food .pinkArea h3,
#food .pinkArea h5{
background:#FF5073;
}
@media all and (max-width: 767px) {
#food .pinkArea
{
background-position: center top 15vw;
}
}

/*color*/
#food .pinkArea .item{
border:solid 3px #FF5073;
border-bottom:solid 15px #FF5073;
}

@media all and (max-width: 767px) {
#food h2{
background-image:url(../img/food/h2.png) , url(../img/w_bg_smp2.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left bottom -1vw;
background-size: 30vw , cover;
aspect-ratio: 1170/174;
}
#food h3 span{
font-size: 4.5vw;
}
}


/*////join/////*/
#join{color: #fff;}
#join h2{
background-image:url(../img/join/h2.png) , url(../img/w_bg1_pink.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left top -5vw;
background-size: 20vw , cover;
}

#join p{
font-size: 1.8vw;
line-height: 1.4;
margin-bottom:1em;
padding: .5em;
}
#join p strong{
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
}

#join p.bg_white{
background: #fff;
border-radius: 8px;
color: #223595;
}
#join .bg_yellow{
background: #ffec71;
}

#join .block{
display: block;
padding: .5em 1em;
}


#join .boldon{
font-weight: 700;
letter-spacing: -0.05em;
margin-left: -.5em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


#join .join-img{
  position: relative;
  margin: 0 auto 2em;
  background-size: 100%;
	background-image:url(../img/join/join-img.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size: cover;
	aspect-ratio: 1640/1200;
	border-radius: 8px;
	}
#join .join-img ul li {
position: absolute;
}
#join .join-img .link a{
display: block;
width:15vw;
max-width: 200px;
min-width: 100px;
height:3vw;
}
#join .join-img ul li img{
width:100%;height:100%;
}
#join .join-img .link{
top:35%;left:20%;
}
#join .join-img a:hover{
border-radius: 10px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.5);
}


@media all and (max-width: 767px) {
#join h2{
background-image:url(../img/join/h2.png) , url(../img/w_bg_smp1_pink.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left top -8.5vw;
background-size: 30vw , cover;
aspect-ratio: 1170/174;
}

#join p{
font-size: 3vw;
margin-bottom:.5em;
}


#join .join-img{
  position: relative;
  margin: 0 auto 2em;
  background-size: 100%;
	background-image:url(../img/join/join-img-smp.jpg);
	background-position:center top;
	background-repeat:repeat;
	background-size: cover;
	aspect-ratio: 1080/1920;
	border-radius: 8px;
	}
#join .join-img ul li {
position: absolute;
}
#join .join-img .link a{
display: block;
width:23vw;
min-width: 60px;
max-width: 200px;
height:6vw;
}
#join .join-img ul li img{
width:100%;height:100%;
}
#join .join-img .link{
top:35%;left:5%;
}
#join .join-img a:hover{
border-radius: 10px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.5);
}

}


/*////accese/////*/
#accese {
background-color:rgba(34 ,53, 149, 100);
}
#accese h2{
background-image:url(../img/accese/h2.png) , url(../img/w_bg2.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left bottom -1vw;
background-size: 20vw , cover;
}


#accese .map-wrap {
    width: 100%;
    max-width: 1060px;
    margin: 0px auto;
}

#accese .gmap{
    position: relative;
    width: 100%;
    margin: 0px auto min(30px, 2vw);
aspect-ratio: 16/9;
}
#accese .gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#accese .accessTxt {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 2vw !important;

}

#accese .accessTxt dl dd {
	line-height: 1.5;
	margin-top: 2em;
}

#accese .accessTxt .googleMap a {
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
text-decoration: none;
display: inline-block;
border-radius: 2em;
padding: 0.5em 1.5em;
display: inline-block;
color: rgba(34 ,53, 149, 100);
border: solid 8px rgba(34 ,53, 149, 100);
position: relative;
white-space: nowrap;
}

#accese .accessTxt .googleMap a::before {
  content: "";
  position: absolute;
  border: solid 4px rgba(254 ,80, 115, 100);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
	border-radius: 2em;
}

@media all and (min-width: 768px) {
#accese .accessTxt .googleMap a:hover {
transition: all .2s ease;
transform:scale(1.05);
}
}

@media all and (max-width: 767px) {
#accese h2{
background-image:url(../img/accese/h2.png) , url(../img/w_bg_smp2.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left bottom -1vw;
background-size: 30vw , cover;
aspect-ratio: 1170/174;
}

#accese .accessTxt {
display: block;
 margin: 0 auto;
}
#accese .accessTxt dl dd {
margin-top: 10px;
text-align: center;
}
#accese .accessTxt .googleMap {
	text-align: center;
	margin-top: 2em;
}
#accese .accessTxt .googleMap a {
font-size: 2.5vw;
padding: 0.5em 1.5em;
border: solid 6px rgba(34 ,53, 149, 100);
}
#accese .accessTxt .googleMap a::before {
  border: solid 2px rgba(254 ,80, 115, 100);
}
#accese .station dd{
font-size: 2.5vw !important;
}

}



/*////qa/////*/

#qa h2{
background-image:url(../img/qa/h2.png) , url(../img/w_bg1.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left top -5vw;
background-size: 20vw , cover;
}

@media all and (max-width: 767px) {
#qa h2{
background-image:url(../img/qa/h2.png) , url(../img/w_bg_smp1.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left top -8.5vw;
background-size: 30vw , cover;
aspect-ratio: 1170/174;
}
}


/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width:100%;
    margin:0 auto;
}

.accordion-area li{
margin:2em 0;
}

.accordion-area section {
border-radius:  50px;
background-color:rgba(254 ,80, 115, 100);
}

/*アコーディオンタイトル*/
.title {
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size: 1.7vw;
padding: 3% 3% 3% 50px;
transition: all .5s ease;
background: #fff;
border-radius: 50px;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color:rgba(254 ,80, 115, 100);
    
}
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
}
.title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(45deg);
}

.title.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.ac_box {
display: none;
color: #fff;
padding:5% 3% 8%;
}


@media all and (max-width: 767px) {
.accordion-area section {
border-radius:  2em;
}
.title {
font-size: 2.7vw;
padding: 3% 3% 3% 20px;
border-radius:  2em;
}
.title::before,
.title::after{
    width: 8px;
}
.title::before{
    left: 8px;
}
.title::after{    
    left: 8px;
}
.ac_box {
padding:6% 6% 10%;
font-size: 2.5vw;
}

}

/*////notes/////*/
#notes {
background-color:rgba(34 ,53, 149, 100);
}
#notes h2{
background-image:url(../img/notes/h2.png) , url(../img/w_bg2.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left bottom -1vw;
background-size: 20vw , cover;
}

#notes ul{
list-style: inside;
color:rgba(254 ,80, 115, 100);
}
#notes li span{
color: #000;
}
#notes li{
font-size: 1.8vw;
line-height: 1.4;
margin-left: 1em;
text-indent: -1.35em;
margin-bottom:1em;
}
@media all and (max-width: 767px) {
#notes h2{
background-image:url(../img/notes/h2.png) , url(../img/w_bg_smp2.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left bottom -1vw;
background-size: 30vw , cover;
aspect-ratio: 1170/174;
}

#notes li{
font-size: 2.5vw;
margin-bottom:.5em;
}
}


/*////map/////*/
#map .map_box {
    max-width: 1200px;
    width: 90vw;
    margin: 0 auto;
    padding: 2vw 0;
}

#map {
color: #FFF;
}


#map h2{
background-image:url(../img/map/h2.png), url(../img/w_bg1_yellow.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left top -5vw;
background-size: 20vw , cover;
}


#map .map-img{
  position: relative;
  margin: 0 auto;
  background-size: 100%;
	background-image:url(../img/map/areamap2026.png);
	background-position:center top;
	background-repeat:no-repeat;
	background-size: contain;
	aspect-ratio: 2985/2095;
	border-radius: 30px;
	}
#map .map-img ul li {
position: absolute;
}

#map .map-img ul li a{
display: block;
transition: all 0.3s ease 0s;
width:100%;height:100%;
}

#map .map-img li img{
width:100%;height:100%;
}

#map .map-img .pink a{
width:33vw;
max-width:450px;
height:13vw;
max-height:170px;
}
#map .map-img .blue a{
width:21vw;
max-width:280px;
max-height:100px;
height:7.5vw;
}
#map .map-img .green a{
    width: 15.5vw;
    max-width: 210px;
    max-height: 80px;
    height: 5.5vw;
}
#map .map-img .orange a{
width:8vw;
max-width:100px;
max-height:180px;
height: 13.3vw;
}

#map .map-img .pink{
 top: 22.5%;
 left: 26.5%;
}
#map .map-img .blue{
 top: 10.5%;
 left: 33.5%;
}
#map .map-img .green{ 
 top: 46.8%;
 left: 35.5%;
}
#map .map-img .orange{ 
 top: 34.5%;
 left: 65%;
}

#map .map-img a:hover{
border-radius: 10px;
box-sizing: border-box;
background-color: rgba(255, 247, 0, 0.3);
}

#map p{
text-align: center;
font-size: 80%;
margin-top: 2em;
}
#map .link_map{
display: flex;
justify-content: center;
margin:3em auto;
}

#map .link_map a{
text-align: center;
background: #F01902;
text-decoration: none;
color:#FFF;
padding:.5em 0;
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
font-feature-settings: "palt";
letter-spacing:0;
margin: 0 1em;
width: 20vw;
border-radius: 50px;
font-size: 2vw;
}

#map .link_map a:hover {
transition: all .2s ease;
transform:scale(1.05);
}

@media all and (max-width: 767px) {
#map .map_box{
margin: auto;
padding: 1em 0 2em;
}

#map h2{
background-image:url(../img/map/h2.png) , url(../img/w_bg_smp1_yellow.png);
background-repeat:no-repeat, no-repeat;
background-position: left 2.5vw top,left top -8.5vw;
background-size: 30vw , cover;
aspect-ratio: 1170/174;
}
#map .map-img ul {
		width: 100%;
}
#map p{
font-size:60%;
}
#map .link_map a{
font-size: 4vw;
width: 40vw;
margin: 0 .5em;
}
}

/*///////////////// footer ////////////////*/

footer{
background-image: url(../img/w_bg1.png);
background-repeat:no-repeat;
background-position:left top -1px;
background-size:100%;
}


footer>div{
padding:12vw 0 5vw;
}
footer div.logo_c{
margin-bottom: 1em;
}
footer div.logo_c .lazy{
display: block;
height: 30vw;
aspect-ratio: 1018/1018;
background-size: cover;
}

footer .bottom2,
footer .bottom{
text-align:center;
color: #000;
}

footer .bottom a{
text-decoration:none;
color: #000;
}

@media all and (min-width: 768px) {
footer .bottom2{
font-size:.8vw;
margin-bottom: 4em;
}

footer .bottom small{
font-size:1vw;
line-height: 4em;
}
}

@media all and (max-width: 767px)  {
footer{
background-image: url(../img/w_bg_smp1.png);
background-repeat:no-repeat;
background-position:left top -1px;
background-size:contain;
aspect-ratio: 1170/174;
}
footer>div{
padding:20vw 0 5vw;
}
footer .bottom2{
font-size:2vw;
line-height:1;
margin:0 auto 3em;
}
footer .bottom{
max-width: 300px;
line-height:1.1;
margin:0 auto;
}
footer .bottom small{
font-size:2.5vw;
}
footer div.logo_c{
margin-bottom: 1em;
}
footer div.logo_c .lazy{
height: 50vw;
}
}

/*///////////////// figure ////////////////*/
ul.contItem figure {
position: relative;
}
figure span.lazy-done {
-webkit-animation: fadeIn 700ms;
animation: fadeIn 700ms;
}
figure span.lazy{
position: relative;
display: block;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
aspect-ratio: 4/3;
border-radius: .8em 3.9em 0 0;
}
ul.contItem figure .att{
display: inline-block;
position: absolute;
bottom:5px; right:5px;
background: rgba(240 ,25, 2, 100);
color: #FFF;
font-size:70%;
padding:.2em .5em;
}

.b-1_box span.thum.lazy{
aspect-ratio: 2/1 !important;
}



/*///////////////// lazy ////////////////*/
.lazy {
  position:relative;
  display:block;
  background:center top no-repeat;
  background-size:cover;
  margin:0 auto;
}
.lazy img{
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}



/*///////////////// anime ////////////////*/
.in_box > div {
position: relative;
}

@keyframes pikopiko {
  0% {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-10deg);
  }
}

.icon_1 {
position: absolute;
top:50vw;
left:-10vw;
}
.icon_2 {
position: absolute;
top:-10vw;
right:-10vw;
}
.icon_5 {
position: absolute;
top:50vw;
right:-10vw;
}
.icon_6 {
position: absolute;
top:-10vw;
left:-10vw;
}
.icon_3 {
position: absolute;
bottom:-10vw;
left:-10vw;
}
.icon_4 {
position: absolute;
bottom:-10vw;
right:-10vw;
}

.anime{
height: 10vw;
animation: pikopiko 1s steps(2, start) infinite;
}

@media all and (max-width: 767px) {
.icon_1 {
position: absolute;
top:50vw;
left:0;
}
.icon_2 {
position: absolute;
top:-15vw;
right:0;
}
.icon_5 {
position: absolute;
top:50vw;
right:0;
}
.icon_6 {
position: absolute;
top:-15vw;
left:0;
}
.icon_3 {
position: absolute;
bottom:-10vw;
left:0;
}
.icon_4 {
position: absolute;
bottom:-10vw;
right:0;
}

.anime{
height: 12vw;
animation: pikopiko 1s steps(2, start) infinite;
}

}



/*========= youtube ===============*/
#movie{
width: 50vw;
border:solid 1em #FFF;
border-radius: 2em;
margin:1em auto 2em;
background: #fff;
}
#movie .mov{
position: relative;
width: 100%;
padding-top: 56.25%;
}

iframe.yt-player {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
@media all and (max-width: 767px)  {
#movie{
width:80vw;
margin:0 auto 2em;
}
}




/*///////////////// teaser ////////////////*/
.teaser .nami
{
background-image: url(../img/w_bg2.png);
background-repeat:no-repeat;
background-position:left bottom -1px;
background-size:100%;
aspect-ratio: 1440/133;
}

.teaser ul{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}

.teaser ul li{
box-sizing: border-box;
border-radius: 10px;
padding: 1em 1.2em;
margin-bottom: 3em;
background:#ffdd00;
box-shadow: 0px 0px 0px 10px #ffdd00;
border: dashed 3px #fffada;
width: 48%;
}

.teaser ul li .txt,
.teaser ul li figure{
width: 100%;
}
.teaser ul li h3 span{
font-size: 180%;
text-align: center;
}
.teaser ul li p{
font-size: 140%;
text-align: center;
line-height: 240%;
}
.teaser .news_txt{
font-size: min(4vw,250%);
text-align: center;
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
margin-bottom: 2em;
line-height: 1;
}

.teaser ul li figure span.lazy{
display: block;
border-radius: 30px;
background-color: #FFF;
}

.teaser .btn {
text-align: center;
margin:5em auto 0;

}
.teaser .btn a{
text-decoration: none;
background-color: #223595;
border-bottom:solid 5px #000;
color: #FFF;
padding:.5em 1.5em ;
border-radius: 50px;
font-size: 140%;
display:inline-block;
}
.teaser .btn a:hover{
background-color: #ffdd00;
border-bottom:solid 2px #000;
color: #000;
margin-top: 3px;
}

@media all and (max-width: 767px)  {
.teaser .nami
{
background-image: url(../img/w_bg_smp2.png);
aspect-ratio: 1170/174;
}
.teaser ul{
display:block;
}
.teaser ul li{
width: 100%;
margin-bottom: 4em;
}
.teaser ul li .txt,
.teaser ul li figure{
width: 100%;
}
.teaser ul li .txt{
order: 1;
}
.teaser ul li figure{
order: 2;
margin-top: 1em;
}

.teaser ul li p{
font-size: 160%;
line-height: 200%;
}
.teaser .news_txt{
font-size: 5vw;
margin-bottom: 3em;
}
}

/*/応募ボタン/*/
.oubo ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
}
.oubo li{
width: 48%;
}
.oubo .btn
{
display: inline-block;
width: 40%;
text-align: center;
margin:1em auto 0;
text-decoration: none;
background-color: #F01902;
color: #FFF;
border-radius: 50px;
padding:.6em 0;
margin-right: 1em;
    border: solid 3px #000;
    border-bottom: solid 10px #000;
}
.oubo .btn:hover
{
background-color:#747474;
color: #FFF;
    border: solid 3px #000;
    border-bottom: solid 10px #000;
transform: translateY(3px); 
}
@media all and (max-width: 767px)  {
.oubo li{
width: 100%;
display: flex;
flex-wrap:nowrap;
justify-content: center;
align-items: center;
}
.oubo .btn
{
    border: solid 2px #000;
    border-bottom: solid 6px #000;
}
.oubo .btn:hover
{
    border: solid 2px #000;
    border-bottom: solid 6px #000;
}
.oubo li span{
width: 50%;
}
}