/* ============================== */
/*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;
}

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

.content{
width:100vw;
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: auto;
}

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

ul.day{
width: 55%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin:1em auto 2em;
}
ul.day li{
width: 100%;
display:flex;
justify-content:flex-start;
align-items: center;
align-items: flex-start;
padding:.2em 0;
white-space: nowrap;
}
ul.day li:last-child{
padding-top:.5em;
}
ul.day li 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 span:nth-child(2){
padding:.2em 0;}

.daybox li small
{
display: inline;
font-size:1.3vw;
}

#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;
}
@media all and (min-width: 768px) {
#kv_area header{
background:url(../img/main_pc.png) center top no-repeat;
background-size: contain;
aspect-ratio: 1440/948;
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),
ul.day li:nth-child(4){
font-size: 2.2vw;
}
}

@media all and (max-width: 767px) {
#kv_area header{
background:url(../img/main_smp.png) center top no-repeat;
background-size: contain;
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: 100%;
margin-top: 1em;
}
ul.day {
width: 100%;
margin:1em auto;
}
ul.day li{
width: 100%;
display:flex;
justify-content:center;
font-size: 3.5vw;
}
ul.day li:nth-child(1),
ul.day li:nth-child(2),
ul.day li:nth-child(4){
font-size: 4vw;
}
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;
}
}

/*///////////////// 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: 70vw;
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);
}

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: 1.2vw;
line-height:1.2 ;
min-height: 5vw;
display: flex;
align-items: center;
}

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: 40%;
margin: 1em auto;
}
ul.contItem.sasuke h5{
font-size: 2vw;
}
ul.contItem.sasuke .txt p{
font-size:1.6vw;
}
ul.contItem.sasuke .txt p.day{
font-size:1.4vw;
}
ul.contItem.sasuke .txt p.btn{
font-size:1.4vw;
}




ul.contItem li{
width: 30.333333333%;
margin: 1em 1.5%;
}
ul.contItem .txt p{
font-size: 1.2vw;
margin: 1em auto;
}
ul.contItem .txt p:first-of-type{
min-height:3vw;
}
ul.contItem .txt p.day{
font-size: 1vw;
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;
}
ul.contItem a:hover p.btn{
background: rgba(254 ,80, 115, 100) !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{
width: 90vw;
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;
}
}

/*////map/////*/

#map h2{
background-image:url(../img/map/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;
}


#map .map-img{
  position: relative;
  margin: 0 auto;
  background-size: 100%;
	background-image:url(../img/map/areamap.png?new);
	background-position:center top;
	background-repeat:no-repeat;
	background-size: contain;
	aspect-ratio: 1440/1168;
	}
#map .map-img ul{
position: absolute;
top:0;
left:0;
width: max-content;
height: max-content;
}
#map .map-img ul li {
position: absolute;
}
#map .map-img ul li a{
display: block;
transition: all 0.3s ease 0s;
}

#map .map-img a{
width:60px;
height:60px;
border-radius: 2em;
	}

#map .map-img .p1{ top:455px;left:913px;}
#map .map-img .p2{ top:455px;left:828px;}
#map .map-img .pA { top:170px;left:612px;}
#map .map-img .pB { top:170px;left:655px;}
#map .map-img .pC { top:170px;left:700px;}
#map .map-img .pD { top:170px;left:824px;}
#map .map-img .pE { top:170px;left:865px;}
#map .map-img .p4 { top:352px;left:577px;}
#map .map-img .p5 { top:352px;left:647px;}
#map .map-img .p6 { top:352px;left:717px;}
#map .map-img .p7 { top:352px;left:787px;}
#map .map-img .p8 { top:352px;left:857px;}
#map .map-img .p9 { top:352px;left:927px;}
#map .map-img .p10 { top:566px;left:577px;}
#map .map-img .p11 { top:566px;left:647px;}
#map .map-img .p12 { top:566px;left:717px;}
#map .map-img .p13 { top:566px;left:787px;}
#map .map-img .s3 { top:480px;left:720px;}
#map .map-img .f1 { top:390px;left:430px;}
#map .map-img .f2 { top:453px;left:368px;}
#map .map-img .f3 { top:533px;left:353px;}


#map .map-img a:hover{
border:solid 3px #ffdd00;
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 h2{
background-image:url(../img/map/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;
}
#map .map-img ul {
		width: 100%;
}
#map p{
font-size:60%;
}
#map .link_map a{
font-size: 4vw;
width: 40vw;
margin: 0 .5em;
}

}

/*////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_b{
color: #fff;
background-image: url(../img/w_bg1.png);
background-repeat:no-repeat;
background-position:left top -1px;
background-size:contain;
}
#info ul{
width:60vw;
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_b{
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{
width:80vw;
margin:5vw auto;
}
#info ul li {
font-size: 3vw;
}
}
/*////program/////*/
#program {
background-color:rgba(34 ,53, 149, 100);
}

#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{
color: #FFF;
padding:.5em;
display: block;
}
#program h6{
font-size: 2vw;
text-align: center;
padding: .5em 0;
margin: 2em 0 1em;
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;
}

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

#program h6{
font-size: 3.8vw;
text-align: center;
padding: .5em 0;
margin: 2em 0 1em;
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;
}


@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;
}
}


/*////stage/////*/
#stage h2{
background-image:url(../img/stage/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;
}
#stage h3{
text-align: center;
padding:1em 0;
border-radius: 1em;
position: relative;
}

#stage 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;
}

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

#stage h5 span{
color: #000;
padding:.5em;
display: block;
}

#stage .yellowArea div.timetable{
background: #FFF;
padding: 1em;
margin-top: 2em;
border-radius: 1em;
}
#stage .yellowArea div.timetable ul{
margin-bottom: 1em;
}

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

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

#stage .yellowArea 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:2vw;
margin-bottom:.5em;
}
#stage .yellowArea div.timetable p:first-of-type{
text-align: center;
padding-bottom: .5em;
border-bottom:dashed 2px #ffdd00;
font-size:2.2vw;
}



@media all and (max-width: 767px) {
#stage .yellowArea div.timetable p .red,
#stage .yellowArea div.timetable li{
font-size:2.5vw !important;
}
#stage .yellowArea div.timetable p.ti{
font-size:3vw;
}
#stage .yellowArea 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;
}
}

/*color*/
#stage .yellowArea .item{
border:solid 3px #fff;
border-bottom:solid 15px #fff;
}

@media all and (max-width: 767px) {
#stage h2{
background-image:url(../img/stage/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;
}
#stage h3 span{
font-size: 4.5vw;
}
}



/*////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.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-left: 1em;
text-indent: -1.35em;
margin-bottom:1em;
}
#join p strong{
font-family: corporate-logo-ver2, sans-serif;
font-style: normal;
font-weight: 700;
}

@media all and (max-width: 767px) {
#join h2{
background-image:url(../img/join/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;
}

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

/*////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 figure{
background: url(../img/accese/guidemap.png) center center no-repeat;
background-size: contain;
aspect-ratio:1600/1152 ;
}
#accese .accessTxt {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

#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;
}
#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);
}

}


/*////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;
}
}



/*///////////////// 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 .bottom{
text-align:center;
color: #000;
}
footer .bottom a{
text-decoration:none;
color: #000;
}

@media all and (min-width: 768px) {
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 .bottom{
max-width: 300px;
line-height:1.1;
margin:0 auto;
}
footer .bottom small{
font-size:2.5vw;
}
}

/*///////////////// 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;
}


/*///////////////// 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;
}
}