@charset "UTF-8";
#article-yonden-jimu{
	padding-bottom: 50px;
}
:where(#article-yonden-jimu*){
 box-sizing: border-box;
}
.event_post__box h4:before {
	display: none;
}
.event_post__box p {
    margin-bottom: 0px;
}
/************** layout base ********************/
:where(#article-yonden-jimu:root){  scroll-padding-top: 130px;}
/*色
========================================== */
:root {
  --base: #333;
  --bk: #000;
  --wh: #fff;
  --red:#DF2E3E;
  --Lred: #FFEFF1;
  --yellow: #FFF761;
  --Lyellow: #FFFAF2;
  --green:#34B1B5;
  --Lgreen: #EFF4F4;
	--gray:#F8F8F8;
}

:where(#article-yonden-jimu a){
	color:var(--bk);
	text-decoration:none;
}
:where(#article-yonden-jimu a:hover){
opacity:0.60;}



.txtLeft{
text-align:left;
}
.txtRight{
text-align:right;
}
.txtCenter{
text-align:center;
}

.flex{	
 display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
 flex-flow: row wrap;
}
@media screen and (min-width: 769px) {
.pcFlex{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
 }
.sp{ display:none; }

}/*-PC only-*/
@media screen and (max-width: 768px) {
.pc{ display:none;}

}/*spOnly*/

/************** layout base ********************/
#article-yonden-jimu {
 position: relative;
background:var(--wh);
text-align:center;
font-family: "游ゴシック", YuGothic,"メイリオ", Meiryo, sans-serif;
line-height:1.2;
 letter-spacing: 0.1em;
}

#article-yonden-jimu{
	.fontZen, h2, h3, h4, .btn, .tourMenu li span, #tour .tourAfter dl dt, #tour .tourFlow li figcaption, #tour .tourShedule .bgW > p span:first-child, #tour .tourShedule .bgW dt{
  font-family: "Zen Maru Gothic", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic,"メイリオ", Meiryo, sans-serif;
}
}

:where(div,p,dl){
text-align:left;
}

:where(#article-yonden-jimu p,#article-yonden-jimu dt,#article-yonden-jimu dd,#article-yonden-jimu li,#article-yonden-jimu td,#article-yonden-jimu th){
color:#000000;
font-size:16px;
line-height:1.75;
  font-weight: 500;
}
:where(#article-yonden-jimu h1,#article-yonden-jimu h2,#article-yonden-jimu h3,#article-yonden-jimu h4,#article-yonden-jimu h5,#article-yonden-jimu h6){
color:#000000;
font-size:20px;
 line-height: 1.5;
}

@media screen and (max-width: 768px) {
:where(#article-yonden-jimu:root){  scroll-padding-top: 60px;}
:where(#article-yonden-jimu ){
-webkit-text-size-adjust: 100% !important;
  overflow-x: hidden !important;
  padding-top: 0 !important
}
img{
	height: auto;
 }
:where(#article-yonden-jimu p,#article-yonden-jimu dt,#article-yonden-jimu dd,#article-yonden-jimu li,#article-yonden-jimu td,#article-yonden-jimu th){
font-size:15px;
  }
}
/****/
.red{ color:var(--red);}
.green{ color:var(--green);}
.note{ color:#666666; font-size:12px;}
.blue{color:var(--blue);}
.bgGrey{background: var(--gray)}
.bgW{  background-color: var(--wh);}

/*------------------ list style----------------*/
.numberList{
	padding:0 0 0 18px;	
}
.numberList li{
	list-style:decimal outside;
	padding:0 0 5px 0;
}


.discList{
	padding:0 0 0 18px;
}
.discList li{
	list-style:disc outside;
	padding:0 0 2px 0;
}

.indentList li{
	padding-left:1em;
	text-indent:-1em;
}

/***************** common ***********************/
.inner{
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
}

.inner1100{
 width: 80%;
 max-width: 1100px;
 margin: 0 auto;
}

h2{
 font-size: 27px;
 font-weight: 700;
 text-align: center;
 line-height: 1.4;
}
h2:has(.en){
  margin-bottom: 40px;
}
h2 span:not(.en){
  color: var(--red);
}
h2 span.en{
  display: block;
  margin-top: 16px;
  color: var(--red);
  font-size: 18px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
h2{
 font-size:min(5.2vw,24px) ;
 line-height: 1.44;
}
  h2:has(.en){
    margin-bottom: 20px
  }
  h2 span.en{
    margin-top: 8px
  }
}/*-SP only-*/



.btnWrap a{
  position: relative;
  display: grid;
  align-items: center;
  margin: 0 auto;
  width: 394px;
  height: 71px;
  background-color: var(--red);
  border-radius: calc(infinity * 1px);
  padding: 16px;
  font-size: 22px;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  border-bottom:none;
  max-width: initial
}

.btnWrap a.green{
   background-color: var(--green);
}
.btnWrap a span{
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  display: grid;
  align-items: center;
  margin: 0 auto;
  width: 195px;
  height: 34px;
  background-color: #FFF761;
  border-radius: calc(infinity * 1px);
  padding: 8px;
  color: #333333;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}
.btnWrap a span.long{
   width: 300px;
}

@media screen and (max-width: 768px) {
  .btnWrap a{
    font-size: min(4.5vw,20px);
    width: auto
  }
  .btnWrap a span{
    width: 179px;
    height: 32px;
    font-size: 16px;
  }
  .btnWrap a span.long{
    width: 277px;
  }
  
}/*-SP only-*/  


/***************** MV ***********************/
#mv ul{
  background-color: var(--Lred);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 16px 20px;
}
#mv ul li{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  color: var(--red);
  font-size: 18px;
  line-height: 1.75;
  font-weight: bold;
}
#mv ul li img{
}
#mv ul li:nth-of-type(1) img{
  width: 40px;
  aspect-ratio: 40 / 49;
}
#mv ul li:nth-of-type(2) img{
  width: 52px;
  aspect-ratio: 52 / 43;
}
#mv ul li:nth-of-type(3) img{
  width: 64px;

}

@media screen and (max-width: 768px) {/* SP*/
  #mv {
    overflow-x: hidden
  }
  #mv ul{
    flex-direction: column;
    gap:13px
  }
 #mv ul li{
    gap: 10px;
    font-size: 15px;
  }
  #mv ul li:nth-of-type(1) img{
    width: 24px;
    margin-block-start: 4px;
  }
  #mv ul li:nth-of-type(2) img{
    width: 32px;
    margin-block-start: 6px;
  }
  #mv ul li:nth-of-type(3) img{
    width: 38px;
margin-block-start: 6px;
  }
}

@media screen and (min-width: 769px) {
  #mv p.pc:has(img){
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  #mv p.pc img{
    min-width: 1600px;
    height: auto;
    flex-shrink: 0;
  }
}


/***************** lead ***********************/
#lead{
  padding-block: 40px 80px;
}
#lead h2{
  margin-bottom: 27px;
}
#lead h2 + p{
  margin-bottom: 27px;
  font-size: 18px;
  text-align: center;
}
#lead .btnWrap{
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  #lead{
    padding-block: 40px;
  }
}
@media screen and (min-width: 769px) {
}


/***************** description ***********************/
#description{
  padding-block: 80px 60px;
  position: relative;
  overflow: hidden;
}
#description::before{
  background: url("images/bg_job.png") no-repeat;
  background-size: contain;
  width: 293px;
  height: 250px;
  position: absolute;
  left: 0;
  top:0;
  content: '';
  display: block
}
#description::after{
  background: url("images/bg_job2.png") no-repeat;
  background-size: contain;
  width: 293px;
  height: 255px;
  position: absolute;
  right: -40px;
 bottom:-10px;
  content: '';
  display: block
}
#description h2 + p{
  font-size: 18px;
  text-align: center;
}
#description .jobs{
  margin-top: 40px;
}
#description .jobsBox{
  border-radius: 24px;
}
#description .jobsBox:nth-of-type(1){
  background-color: var(--Lred);
}
#description .jobsBox:nth-of-type(2){
  background-color: var(--Lgreen);
}
#description .jobsBoxTi{
  background-repeat: no-repeat;
  background-position: right 28px center;
  background-size: 140px auto;
  padding: 18px 24px;
  border-radius: 24px 24px 0 0;
}
#description .jobsBox:nth-of-type(1) .jobsBoxTi{
  background-color: var(--red);
  background-image: url(images/img_job1.svg);
}
#description .jobsBox:nth-of-type(2) .jobsBoxTi{
  background-color: var(--green);
  background-image: url(images/img_job2.svg);
}
#description .jobsBoxTi ul{
  display: inline-flex;
  justify-content: start;
  gap: 4px;
}
#description .jobsBoxTi ul li{
  display: inline-block;
  border-radius: calc(infinity * 1px);
  background-color: var(--wh);
  padding: 0.5em 1.5em;
  font-size: 16px;
font-weight: bold;
  line-height: 1;
}
#description .jobsBox:nth-of-type(1) .jobsBoxTi ul li{
  color: var(--red);
}
#description .jobsBox:nth-of-type(2) .jobsBoxTi ul li{
  color: var(--green);
}
#description .jobsBoxTi ul li:first-child{
  background-color: var(--yellow);
}
#description .jobsBoxTi h3{
  display: grid;
  align-items: center;
  height: 150px;
  font-size: 27px;
  color: var(--wh);
  font-weight: bold;
  line-height: 1.4;
	background: none;
	padding: 0 ;
	letter-spacing: 0;
}
#description .jobsBoxTi .term{
  color: var(--wh);
  font-size: 16px;
  line-height: 1.6;
}
#description .jobsBoxCont{
  padding: 24px;
}
#description .jobsBoxCont .dscr{
  margin-top: 40px;
  margin-left: 20px
}
#description .jobsBoxCont .conditions{
  position: relative;
  margin-top: 40px;
}
#description .jobsBoxCont .dscr dt{
  margin-bottom: 1em;
}
#description .jobsBoxCont .conditions dt{
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  left: 20px;
  right: 0;
}
#description .jobsBoxCont dt span{
  display: grid;
  place-content: center;
  border-radius: calc(infinity * 1px);
  width: 90px;
  height: 32px;
  color: var(--wh);
}
#description .jobsBox:nth-of-type(1) .jobsBoxCont dt span{
  background-color: var(--red);
}
#description .jobsBox:nth-of-type(2) .jobsBoxCont dt span{
  background-color: var(--green);
}
#description .jobsBoxCont .dscr li{
  position: relative;
  padding-left: calc(1em + 8px);
  line-height: 1.6;
  font-weight: bold;
}
#description .jobsBoxCont .dscr li + li{
  margin-top: 6px;
}
#description .jobsBoxCont .dscr li::before{
  position: absolute;
  left: 0;
  content: "●";
}
#description .jobsBox:nth-of-type(1) .jobsBoxCont .dscr li::before{
  color: var(--red);
}
#description .jobsBox:nth-of-type(2) .jobsBoxCont .dscr li::before{
  color: var(--green);
}
#description .jobsBoxCont .conditions dd{
  background-color: var(--wh);
  border-radius: 16px;
  padding: 32px 24px 24px;
}

#description .jobsBoxCont .conditions dd li{
  display: flex;
  gap:20px;
}
#description .jobsBoxCont .conditions dd li > span{
  font-weight: bold;
}
#description .jobsBoxCont .conditions dd li > div{
  flex: 1;
}
#description .jobsBoxCont .conditions dd li:first-child > span{
  display: grid;
  align-items: center;
}
#description .jobsBoxCont .conditions dd li:nth-of-type(2) div p span{
  font-weight: bold;
}

#description .jobsBoxCont .conditions dd li p span.red,
#description .jobsBoxCont .conditions dd li p span.green{
  font-size: 28px;
  font-weight: bold
}

#description .jobsBoxCont .conditions dd li p span em{
  font-style: normal;
  font-size: 16px
}

#description .place{
  margin-top: 40px;
}
#description .place h3{
  margin-bottom: 1em;
  padding:0 0 8px;
  border-bottom: 1px solid var(--red);
  font-size: 24px;
  color: var(--red) !important;
	background: none;
}
#description .place h4{
  margin-bottom: 4px;
  font-size: 20px;
  color: var(--red);
	background: none;
	padding: 0;
}
@media screen and (max-width: 768px) {
  
   #description {
    overflow-x: hidden
  }
  
  #description{
    padding-bottom: 0
  }
  #description::before{
  width: 196px;
  height: 165px;
    left: max(-10vw, -28px)
  }
  #description::after{
  width: 196px;
  height: 165px;
bottom: 76vw;
    z-index: -1;
  }
  #description h2 + p{
        font-size: 16px;
    line-height: 2;
    text-align: left;
  }
  #description .jobsBoxTi{
    background-size: 163px 160px;
    background-position: center top 20px;
    padding-top: 200px
  }
  #description .jobsBoxTi ul {
  display: flex;
  justify-content: center;
  }
	#description .jobsBoxTi ul li{
		font-size: min(4vw,16px);
	}
  #description .jobsBoxTi h3{
    font-size: min(5.8vw,24px);
    display: block;
    text-align: center;
    margin: 10px 0;
    height: auto
  }
  #description .jobsBoxTi .term{
    font-size: 15px;
    text-align: center
  }
  #description .jobsBoxCont .conditions dd{
    padding-top: 16px;
  }
  #description .jobsBoxCont .dscr{
    margin-left: 0;

  }
  #description .jobsBoxTi ul li{
    padding: .5em .8em
  }
  #description .jobsBox:nth-of-type(1){
    margin-bottom: 10px
  }
  #description .place{
    display: flex;
    flex-direction: column-reverse
  }
  #description .place .txts{
    margin-bottom: 20px;
  }
  #description .place .map iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 360 / 220;
  }
  #description .place h3{
    font-size: 22px;
  }
  #description .place h4{
    font-size: 17px;
  }
}
@media screen and (min-width: 769px) {
  #description .pcFlex.jobs{
    gap: 0 8px;
  }
  #description .pcFlex.jobs > div{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #description .jobsBoxCont{
    flex-grow: 1;

    display: flex;
    flex-direction: column;
  }
  #description .jobsBoxContTxts{
    flex-grow: 1;
    padding-bottom: 40px;
  }
  #description .jobsBoxCont .conditions{
    margin-top: 0;
    flex-grow: 1;
  }
	#description .jobsBoxTi h3{
	padding: 0 120px 0 0;
}
  #description .pcFlex.place{
    gap: 0 3.33%;    
  }
  #description .pcFlex.place .map{
    width: 400px;
    aspect-ratio: 400 / 245;
  }
  #description .pcFlex.place .map iframe{
    width: 100% !important;
    height: 100% !important;
  }
  #description .pcFlex.place .txts{
    flex: 1;
  }
}

/***************** point ***********************/
#point{
  overflow: hidden;
  padding-block: 60px;
}
#point ul{
  position: relative;
	z-index: 1;
}
#point ul::before{
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  transform: translateY(50%);
  background-color: #DAE9E6;
  margin-inline: calc(50% - 50vw);
  z-index: -1;
}
#point ul li{
  background-color: var(--Lyellow);
  border-radius: 16px;
  padding: 24px;
}
#point ul li figure{
  display: grid;
  place-content: center;
  width: 117px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 24px;
}
#point ul li:nth-of-type(1) img{
  width: 73px;
  aspect-ratio: 40 / 49;
}
#point ul li:nth-of-type(2) img{
  width: 95px;
  aspect-ratio: 52 / 43;
}
#point ul li:nth-of-type(3) img{
  width: 117px;
}
#point ul li h3{
  margin-bottom: 16px;
  font-size: 18px;
  text-align: center;
  color: var(--red) !important;
	letter-spacing: 0.05em;
	background: none;
	padding: 0;
}
#point ul li p span{
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #point{
    padding-block: 80px 60px;
  }
  #point ul::before{
    transform: translateY(20%);
  }
  #point ul li{
    margin-bottom: 15px
  }
}
@media screen and (min-width: 769px) {
  #point ul.pcFlex{
    gap: 17px 1.42%;
  }
  #point ul.pcFlex li{
    flex: 1;
  }
}


/***************** enviroment ***********************/
#enviroment{
  padding-block: 60px 0;
  background-color: #DAE9E6;
}
#enviroment h2 + p{
  text-align: center;
}
#enviroment h2 + p + p{
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 2;
}
#enviroment h2 + p + p span{
  color: var(--red);
}
@media screen and (max-width: 768px) {
  #enviroment{
    padding-block: 20px 0;
  }
  #enviroment h2 + p{
    text-align: left;
    line-height: 1.6;
  }
  #enviroment h2 + p + p{
    font-size: 16px;
  }
#enviroment figure.sp{
    margin-top: 64px;
  }
  #enviroment figure.sp img{
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  #enviroment h2 + p + p{
    text-align: center;
  }
}


/***************** tour ***********************/
#tour{
  padding-block: 120px;
  background-color: var(--Lyellow);
  position: relative;
}

#tour::before{
  background: url("images/bg_tour.png") no-repeat;
  background-size: contain;
  width: 293px;
  height: 177px;
  position: absolute;
  left: 0;
  top:-40px;
  content: '';
  display: block
}
#tour .tourMenu{
  padding-bottom: 80px;
}
#tour .tourMenu li{
  position: relative;
  display: flex;
  align-items: center;
  font-size: 18px;
}
#tour .tourMenu li div{
  flex: 1;
}
#tour .tourMenu li::before{
  content: "";
  display: block;
  width: 25%;
  aspect-ratio: 148 / 119;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
#tour .tourMenu li:nth-of-type(1){
  border-bottom: 3px solid var(--red);
}
#tour .tourMenu li:nth-of-type(1)::before{
  background-image: url(images/img_tour1.svg);
}
#tour .tourMenu li:nth-of-type(2){
  border-bottom: 3px solid var(--green);
}
#tour .tourMenu li:nth-of-type(2)::before{
  background-image: url(images/img_tour2.svg);
}
#tour .tourMenu li::after{
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  display: block;
  margin-inline: auto;
  width: 24px;
  height: 19px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#tour .tourMenu li:nth-of-type(1)::after{
  background-color: var(--red);
}
#tour .tourMenu li:nth-of-type(2)::after{
  background-color: var(--green);
}
#tour .tourMenu li span{
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: min(1.4vw,24px);
}
#tour .tourMenu li:nth-of-type(1) span{
  color: var(--red);
}
#tour .tourMenu li:nth-of-type(2) span{
  color: var(--green);
}
#tour .tourPurpose h3{
  margin-bottom: 1em;
  padding:0 0 8px;
  border-bottom: 1px solid var(--red);
  font-size: 24px;
  color: var(--red) !important;
	background: none;
}
.tourPurpose li + li{
  margin-top: 16px;
}
#tour .tourPurpose h4{
  position: relative;
  min-height: 35px;
  margin-bottom: 3px;
  padding:0 0 0 36px;
  background: url(images/.png);
  font-size: 20px;
  color: var(--red);
}
#tour .tourPurpose h4::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background-color: var(--red);
  width: 28px;
	height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
	transform: translate(0, 0);
}
#tour .tourPurpose h4::after{
  content: "";
  position: absolute;
  inset: 7px auto 0 8px;
  display: block;
  background-color: transparent;
  width: 13px;
  aspect-ratio: 10 / 6;
  border: solid var(--wh);
  border-width: 0 0 2px 2px;
  transform: rotate(-50deg);
}
.tourPurpose p span{
  font-weight: bold;
}
#tour .tourAfter{
  margin-top: 40px;
  padding: 35px 32px 32px;
}
#tour .tourAfter h3{
  margin-bottom: 16px;
	color: #000 !important;
  font-size: 24px;
  text-align: center;
	background: none;
	padding: 0;
}
#tour .tourAfter dl{
  padding: 24px 16px 16px;
  border-radius: 16px;
  text-align: center
}
#tour .tourAfter dl p{
  text-align: center
}
#tour .tourAfter dl:nth-of-type(1){
  background-color: var(--Lred);
}
#tour .tourAfter dl:nth-of-type(2){
  background-color: var(--Lgreen);
}
#tour .tourAfter dl dt{
  margin-bottom: 8px;
  color: var(--red);
  font-weight: bold;
  font-size: 20px;
text-align: center;
}
#tour .tourAfter dl dt span{
  display: grid;
  align-items: center;
  margin: 0 auto 8px;
  width: 174px;
  height: 32px;
  border-radius: calc(infinity * 1px);
  color: var(--wh);
  text-align: center;
  line-height: 1;
  font-size: 16px;
  font-weight: normal;
}
#tour .tourAfter dl:nth-of-type(1) dt span{
  background-color: var(--red);
}
#tour .tourAfter dl:nth-of-type(2) dt{
  color: var(--green)
}
#tour .tourAfter dl:nth-of-type(2) dt span{
  background-color: var(--green);
}
#tour .tourAfter dl dd .note{
  margin-top: 8px;
  fobnt-size: 13px;
}
#tour .tourFlow{
  margin-block: 64px;
}
#tour .tourFlow h3{
  position: relative;
  margin-bottom: 1em;
	padding: 0;
  padding-left: 1em;
  font-size: 24px;
	background: none;
	color: #000 !important;
}
#tour .tourFlow h3:before{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  content: "";
  display: block;
  width: 12px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--red);
}
#tour .tourFlow ul{
  display: flex;
  justify-content: space-between;
  gap: 24px 2%;
}
#tour .tourFlow li{
  position: relative;
}
#tour .tourFlow li:not(:last-child)::before{
  content: "";
  position: absolute;
  top: 50px;
  left: 50%;
  display: block;
  width: calc(100% + 24px);
  height: 2px;
  background-color: var(--red);
}
#tour .tourFlow li figure{
  position: relative;
  text-align: center;
}
#tour .tourFlow li figcaption{
  margin-top: 8px;
  font-size: 18px;
  font-weight: bold;
  color: var(--red);
}
#tour .tourShedule h3{
  position: relative;
  background: url(images/ic_calendar.svg) no-repeat left center / 35px 35px;
  border-bottom: 1px solid var(--red);
  margin-bottom: 1em;
	padding: 0;
  padding-bottom: 8px;
  padding-left: 50px;
  font-size: 24px;
  color: var(--red) !important;
}
#tour .tourShedule .bgW{
  padding: 32px;
}
#tour .tourShedule .bgW > p{
  background-color: var(--Lred);
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 16px;
}
#tour .tourShedule .bgW > p span:first-child{
  font-size: 20px;
  font-weight: bold;
  color: var(--red);
}
#tour .tourShedule .bgW dl{
  display: flex;
  flex-wrap: wrap;
}
#tour .tourShedule .bgW dt{
  display: grid;
  align-items: center;
  border-right: 1px solid #DEDCDC;
  border-bottom: 1px solid #DEDCDC;
  font-size: 20px;
  font-weight: bold;
  color: var(--red);
}
#tour .tourShedule .bgW dt:last-of-type,
#tour .tourShedule .bgW dd:last-of-type{
  border-bottom: none;
}
#tour .tourShedule .bgW dt span span{
  padding: 20px 8px;
  font-size: 30px;
}
#tour .tourShedule .bgW dd{   
  border-bottom: 1px solid #DEDCDC;
  padding: 20px 8px;
  font-size: 18px;
}
#tour .tourPlace{
  margin-top: 64px;
}
#tour .tourPlace h3{
  position: relative;
  background: url(images/ic_place.svg) no-repeat 3px center / 35px 35px;
  border-bottom: 1px solid var(--red);
  margin-bottom: 1em;
  padding-bottom: 8px;
  padding-left: 50px;
  font-size: 24px;
  color: var(--red) !important;
}
#tour .tourPlace p span.fontZen{
  font-weight: bold;
  font-size: 20px;
  color: var(--red);
}
#tour .tourPlace p a{
  color: #2787B0;
  text-decoration: underline;
}

#tour .bnrArea{
  margin-top: 64px;
}
.tourPurpose figure{
  border-radius: 16px;
  overflow: hidden
}
 .tourPurpose .texts p{
    padding-left: 36px
  }

@media screen and (max-width: 768px) {
    #tour {
    overflow-x: hidden
  }
  
  #tour{
    padding-block: 120px 80px;
  }
  #tour::before{
    height: 165px;
    width: 196px;
    top:-30px;
    left: -20px
}  
#tour .tourMenu{
    margin-top: 40px;
  }

  #tour .tourMenu li{
    margin-bottom: 40px;
gap: 5%;
    align-items: flex-end;
  }
  #tour .tourMenu li::before{
    width: auto;
    height: min(23.75vw, 98px);
    aspect-ratio: 80 / 95;
    background-position: center bottom;
  }
  #tour .tourMenu li div{
padding-bottom: 1em;
    font-size: 16px;
line-height: 1.6;
  }
  #tour .tourMenu li div span{
margin-bottom: 8px;
    font-size: 18px;
  }
  #tour .tourPurpose h3{
    font-size: 20px;
    margin-top: 1.2em;
    margin-bottom: 1.6em;
  }
  #tour .tourPurpose h4,
  #tour .tourAfter dl dt{
    font-size: 17px;
  }
  #tour .tourPurpose h4{
    margin-bottom: 0px;
    min-height: 32px;
  }
  #tour .tourPurpose h4::before{
    inset: 2px auto 0 0;
  }
  #tour .tourPurpose h4::after{
    inset: 9px auto 0 8px;
  }
  .tourPurpose li + li {
    margin-top: 16px;
  }
  
  #tour .tourAfter h3{
    font-size: 22px;
    text-align: center
  } 
 #tour .tourAfter {
  padding: 30px 7px 20px;
}
  #tour .tourAfter dl {
    padding: 16px 16px 16px;
    border-radius: 16px;
  }
  #tour .tourAfter dl:nth-of-type(1){
    margin-bottom: 12px
  }
  #tour .tourAfter dl dt{
    text-align: center;
  }
  #tour .tourFlow li figcaption{
    font-size: 15px;
  }
  #tour .tourFlow li{
    width: calc(94% / 4)
  }
  #tour .tourFlow li:not(:last-child)::before{
    top: max(40px, 6.5vw);
  }
  #tour .tourShedule .bgW > p span:first-child{
    display: block;
    margin-bottom: 16px;
  }
  #tour .tourShedule .bgW dt span span{
    padding-left: 0;
    padding-bottom: 0;
  }
  #tour .tourShedule .bgW dt{
    border: none;
    width: 100%;
  }
  #tour .tourShedule .bgW dd{
    padding: 10px 0 24px;
    width: 100%;
    font-size: 16px;
  }
  #tour .tourShedule .bgW{
    padding: 16px
  }
  #tour .tourPlace p span.fontZen{
    display: block;
    margin-bottom: 16px;
    font-size: 17px;
  }
}
@media screen and (min-width: 769px) {
  #tour{
    padding-bottom: 100px;
  }
  #tour .tourMenu.pcFlex{
    gap: 16px 1.33%;
  }
  #tour .tourMenu.pcFlex li{
    flex: 1;
  }
  .tourPurpose.pcFlex{
    gap: 40px 3.3%;
    align-items: flex-start;
  }
  .tourPurpose.pcFlex > *{
    flex: 1;
  }
  #tour .tourAfter .pcFlex{
    gap: 16px 1.4%;
  }
  #tour .tourAfter dl{
    flex: 1;
  }
  #tour .tourAfter dl dd,
  #tour .tourAfter dl dd .note{
    text-align: center;
  }
  #tour .tourFlow ul li{
    flex: 1;
  }

  #tour .tourShedule .bgW > p{
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #tour .tourShedule .bgW dt{
    width: 152px;
  }
  #tour .tourShedule .bgW dd{
    width: calc(100% - 152px);
  }
  #tour .tourPlace p{
    display: flex;
    align-items: center;
    gap: 16px;
  }
}



/***************** bnrArea ***********************/
.bnrArea{
  display: flex;
  gap: 40px 3.33%;
  padding: 64px 64px 0;
  background-color: var(--red);
  border-radius: 24px;
}
#article-yonden-jimu .bnrArea h3{
  margin-bottom: 16px;
  color: var(--yellow) !important;
  font-size: 32px;
	background: none;
	padding: 0;
}
.bnrArea p a{
  display: block;
  padding: 18px 66px 18px 30px;
  font-weight: bold;
  font-size: 18px;
}
.bnrArea p.bnrBtnWrap a{
  border-radius: calc(infinity * 1px);
  background: var(--wh) url(images/btn_red.png) no-repeat right 15px center / 50px 20px;  
  color: var(--red);
  font-size: 18px;
}
.bnrArea h3 + p + p a{
  color: var(--wh);
  background: url(images/btn_whitearrow.png) no-repeat right 15px center / 50px 20px;  
}
.bnrArea .note{
  border-top: 1px solid var(--wh);
  padding-top: 1em;
  color: var(--wh);
  font-size: 16px;
}
.bnrArea .white{
  color: var(--wh);
  font-size: 18px;
  margin: 1em 0
}
@media screen and (max-width: 768px) {
  .bnrArea{
flex-direction: column;
    padding: 20px;
    gap: 20px 3.33%;
  }
  
  .bnrArea figure{
    width: 60%;
    margin: auto
  }
  .bnrArea h3{
    font-size: 25px;
    text-align: center;
  }
  .bnrArea p.bnrBtnWrap a{
    font-size: 17px;
    line-height: 1.2
  }
  .bnrArea p a{
    font-size: 16px;
    padding: 18px 76px 18px 20px;
  }
  .bnrArea .note{
    font-size: 14px;
  }
  .bnrArea p.bnrBtnWrap a{
    line-height: 1.4;
    padding: 8px 94px 8px 32px;
  }
  .bnrArea p:not(.bnrBtnWrap):not(.note) a{
    line-height: 1.6;
  }
  .bnrArea .white{
    font-size: 16px;
  }
}
@media screen and (min-width: 769px) {
  .bnrArea{
    padding-top: 0;
  }
  .bnrArea figure{
    width: 320px;
    display: flex;
    align-items: flex-end;
  }
  .bnrArea > div{
    padding-block: 40px 59px;
  }
  .bnrArea .txts{
    flex: 1;
  }
}

/***************** schedule ***********************/
#schedule{
  padding-block: 120px 60px;
  position: relative;
  overflow: hidden;

}
#schedule::before{
  display: block;
  position: absolute;
  content: '';
    right:-60px;
  top:70px;
  background: url("images/bg_schedule.png") no-repeat;
  background-size: contain;
  width: 393px;
  height: 355px;
  z-index: -1
}
#schedule .flex{
  gap:15px;
  flex-wrap: nowrap
}

#schedule .flex > div{
  max-width: calc(50% - 7.5px)
}
#schedule .flex .boxinner{
  border-radius: 24px;
  padding: 24px;
}

#schedule .flex .fulltime .boxinner{
  background: var(--Lred);
}
#schedule .flex .halftime .boxinner{
  background: var(--Lgreen);
}

#schedule .flex > div h3{
  font-size: 24px;
  line-height: 1.75;
  color: #fff;
  text-align: center;
  border-radius: 999px;
  padding: .5em
}

#schedule .flex .fulltime h3{
  background: var(--red)
}

#schedule .flex .halftime h3{
  background: var(--green);
  margin-top: 24px
}

#schedule .flex .boxinner dl{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start
}

#schedule .flex .fulltime .boxinner dl{
   margin-top: 32px;
}

#schedule .flex .boxinner dt{
  font-size: 32px;
    font-family: "Quicksand", sans-serif;
  font-weight: bold;
  width: calc(2.5em + 30px);
  line-height: 1;
  position: relative
}

#schedule .flex .boxinner dt:after{
  display: block;
  position: absolute;
  content: '●';
    right:0;
  top:calc(50% - 5px);
  font-size: 10px;
  z-index: 10
}

#schedule .flex .boxinner dd{
  font-size: 16px;
  width: calc(100% - 2.5em - 80px);
  padding-left: 20px;
  position: relative;
  padding-bottom: 2em
}
#schedule .flex .boxinner dd:before{
  content: '';
  height: 100%;
  width: 2px;
  background: #DEDCDC;
  position: absolute;
  left:-7px;
  top:10px;
  z-index: 0
}

#schedule .flex .boxinner dd:last-child::before{
  display: none
}

#schedule .flex .boxinner dd span{
  font-size: 18px;
    font-family: "Zen Maru Gothic", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic,"メイリオ", Meiryo, sans-serif;
  font-weight: bold;
  display: block;
}

#schedule .flex .fulltime .boxinner dt,
#schedule .flex .fulltime .boxinner dd span{
  color: var(--red)
}

#schedule .flex .fulltime .boxinner dd.height{
  padding-bottom: 3.65em
}

#schedule .flex .halftime .boxinner dt,
#schedule .flex .halftime .boxinner dd span{
  color: var(--green)
}

#schedule .flex .halftime .notice{
  position: relative;
  padding: 60px 0;
  text-align: center
}
#schedule .flex .halftime .notice::before{
  background: url("images/hline.png") no-repeat;
  background-position: center top 15px;
  content: '';
  display: block;
  height: 54px;
  width: 100%;
  position: absolute;
  left:0;
  top:0
}
#schedule .flex .halftime .notice::after{
  background: url("images/hline.png") no-repeat;
  background-position: center bottom 15px;
  content: '';
  display: block;
  height:54px;
  width: 100%;
  position: absolute;
  left:0;
  bottom:0
}


#schedule .flex .halftime .free{
  color: var(--green);
  font-size: 18px;
  font-weight: bold;
  margin-bottom: .6em;
  text-align: center
}

#schedule .flex .halftime .note{
   color:#1c1c1c;
  font-size: 16px;
  text-align: center
}

@media screen and (max-width: 768px) {
  #schedule{
    padding-block: 80px 40px;
    overflow-x: hidden
  }
  #schedule::before{
    top: 80px;
    right: -37.5px;
    width: 196px;
    height: 177px;
  }
  #schedule .flex{
    flex-direction: column;
  }
  #schedule .flex > div {
  max-width:initial;
}
  #schedule .flex > div h3{
    font-size: 22px;
  }
  #schedule .flex .boxinner dt{
    font-size: 25px;
  }
  #schedule .flex .boxinner dd{
    width: calc(100% - ((25px * 2.5) + 30px));
    padding-bottom: 1.6em;
    padding-left: 16px;
  }
  #schedule .flex .fulltime .boxinner dd span,
  #schedule .flex .halftime .boxinner dd span{
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
  }
  #schedule .flex .halftime .note{
    font-size: 15px;
  }
  #schedule .flex .halftime .notice{
    margin-block: 17px;
    padding: 72px 0;
  }
  #schedule .flex .halftime .notice::before{
    height: 72px;
    background-position: center;
    background-size: auto 40px;
  }
}
@media screen and (min-width: 769px) {
}


/***************** voices ***********************/
#voices{
  padding-block: 60px 120px;

}
#voices .flex{
  justify-content: center;
  gap:40px
}

#voices .flex li{
  width: min(30%, 370px);
  text-align: center;
}

#voices .flex li figure{
  width: 194px;
  margin: 0 auto 30px;
}

#voices .flex li h3{
  color: var(--red) !important;
  font-weight: bold;
  margin-bottom: 20px;
	background: none;
	padding: 0;
}

#voices .flex li p{
  text-align: left;
  font-size: 18px;
}


@media screen and (max-width: 768px) {
  #voices{
    padding-block: 40px 120px;
  }
  #voices .flex{
    flex-direction: column
  }
  #voices .flex li{
    width: 100%
  }
  #voices .flex li figure{
    margin-bottom: 8px;
  }
  #voices .flex li h3{
    margin-bottom: 4px;
  }
  #voices .flex li p{
    font-size: 16px;
    line-height: 2em;
  }
}
@media screen and (min-width: 769px) {
}


/***************** movie ***********************/
#movie{
  padding-block: 120px;
  background-color: var(--Lgreen);
  position: relative;
}

#movie:before{
display: block;
  position: absolute;
  content: '';
  left:-60px;
  top:-100px;
  background: url("images/bg_tour.png") no-repeat;
  background-size: contain;
  width: 293px;
  height: 230px;
}

#movie h2 .en.green{
  color: var(--green)
}

#movie .pcFlex{
  gap:30px;
  
}

#movie .pcFlex figure{
  width: calc(50% - 15px);
  border-radius: 24px;
  overflow: hidden
}


#movie .pcFlex .txts{
  width: calc(50% - 15px);
}
#movie .pcFlex .txts h3{
  color: var(--green) !important;
  font-size: 24px;
  line-height: 1.75;
  border-bottom: 1px solid var(--green);
  margin-bottom: 20px;
	padding: 0;
	background: none;
}
#movie .pcFlex .txts li{
  margin-bottom: 10px;
}
#movie .pcFlex .txts li h4{
  color: var(--green);
  font-size: 20px;
  line-height: 1.75;
  margin-bottom: 5px;
	padding: 0;
	background: none;
}

#movie .pcFlex .txts li h4:before{
  display: inline-block;
  background:url("images/ic_check.svg") no-repeat;
  height: 28px;
  width: 28px;
  content: "";
  margin-right: 10px;
  vertical-align: middle;
	position: relative;
	top: 0;
	left: 0;transform: translate(0, 0);
}

#movie .pcFlex .txts li p{
  margin-left: 38px
}

#movie .txtCenter{
  font-size: 18px;
}
#movie .btnWrap + .txtCenter{
  padding-top: 28px;
}
#movie .txtCenter + .btnWrap{
  margin-top: 40px;
}

#movie .btnWrap{
  margin-top: 50px;
}
#movie .btnWrap .green{
  margin-bottom: 20px
}

@media screen and (max-width: 768px) {
  #movie{
    padding-block: 80px;
    overflow-x: hidden
  }
  #movie::before{
   width: 200px;
    height: 165px;
    left: -20px;
    top: -100px;
  }
  #movie .pcFlex figure,
  #movie .pcFlex .txts{
    width: 100%
  }
  #movie .pcFlex .txts h3{
    margin-top: 40px;
    padding-bottom: 8px;
    font-size: 22px;
    line-height: 1.5;
  }
}
@media screen and (min-width: 769px) {
}


/***************** insta ***********************/
#insta{
  padding-block: 120px 40px;

}

#insta .inner{
  border: 1px solid #DEDCDC;
  padding: 30px 50px;
  border-radius: 8px;
  max-width: 1072px
}

#insta .inner .flex{
  gap:40px
}
#insta .inner .flex figure{
  width: 22%;
  max-width: 215px;
}

#insta .inner .flex .txts{
  width: calc(78% - 40px);
}

#insta .inner .flex .txts h3{
  color: var(--red) !important;
  font-size: 24px;
  line-height: 1.75;
  margin-bottom: .5em;
  margin-top: .5em;
	background: none;
	padding: 0;
}

#insta .inner .flex .txts p{
  font-size: 18px;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 1em;
}
#insta .inner .flex .txts a{
  color: var(--red);
   font-size: 20px;
  font-weight: bold;
  line-height: 2;
  display: block;
  width: 100%;
  position: relative
  
}
#insta .inner .flex .txts a:after{
  position: absolute;
  display: block;
  width: 56px;
  height: 24px;
  background: url("images/btn_red.png") no-repeat;
  background-size: contain;
  content: '';
  right: 0;
  top:0
}


@media screen and (max-width: 768px) {
  #insta{
    padding-block: 80px 40px;
  }
  #insta .inner .flex{
    flex-direction: column
  }
  #insta .inner{
    padding: 20px 20px 28px;
  }
  #insta .inner .flex {
    gap: 16px;
  }
  #insta .inner .flex figure,
  #insta .inner .flex .txts{
    width: 100%
  }
  #insta .inner .flex figure{
    margin-inline: auto;
  }
  #insta .inner .flex .txts h3 {
    font-size: 25px;
    line-height: 1.5;
    margin-bottom: 8px;
    margin-top: 0;
    text-align: center;
  }
  #insta .inner .flex .txts p{
    font-size: 16px;
  }
  #insta .inner .flex .txts a{
    padding-block: 11px;
    line-height: 24px;
    font-size: 17px;
  }
  #insta .inner .flex .txts a:after{
    top: 11px;
  }
  
}
@media screen and (min-width: 769px) {
}


/***************** faq ***********************/
#faq{
  padding-block: 40px 80px;

}
#faq dl{
  max-width: 1072px
}

#faq dt{
  padding: 20px 24px 10px 20px;;
  border-radius: 8px 8px 0 0;
  position: relative;
  display: flex;
  gap:20px;
  align-items: flex-start;
  transition: .5s
}
#faq dt.open{
  background: #F8F8F8;
}

#faq dt p{
  font-weight: bold;
  margin-top: .5em;
  flex: 1;
}

#faq dd{
  background: #F8F8F8;
  padding: 10px 24px 20px 20px;
  border-radius:  0 0 8px 8px;
  margin-bottom: 20px;
  display: none;
}

#faq dd div{
  display: flex;
  gap:20px;
}

#faq dd p{
    margin-top: .5em;
    flex: 1;
  
}

#faq dt span,
#faq dd span{
  display: block;
  width: 42px;
  vertical-align: middle;
}


.icon-toggle {
  --size: 20px;       /* アイコンの全体の大きさ */
  --thickness: 2px;  /* 線の太さ */
  --color: #DF2E3E;     /* 線の色 */

  position: absolute;
  right:24px;
  top:30px;
  width: var(--size);
  height: var(--size);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 横線（プラスとマイナス共通） */
.icon-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: var(--thickness);
  background-color: var(--color);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease; /* アニメーション用 */
}

/* 縦線（プラスの時だけ表示） */
.icon-toggle.is-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--thickness);
  height: 100%;
  background-color: var(--color);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease; /* アニメーション用 */
}






@media screen and (max-width: 768px) {
  #faq dt span, #faq dd span {
  width: 32px;
  vertical-align: middle;
}
   #faq dt {
  padding: 12px 32px 8px 12px;
  }
  #faq dt p{
    font-size: 14px;
  }
  .icon-toggle{
    --size: 16px;
    right: 16px;
    top: 20px;
  }
  #faq dd {
  padding: 8px 12px 12px 12px;
  }
}
@media screen and (min-width: 769px) {
  #faq dt.js-acc{
    cursor: pointer;
  }
}


/***************** footer ***********************/
#footer{
  margin-block: 120px 0;
  padding-block: 64px;
  background-color: var(--gray);
}
#footer figure{
  width: 264px;
  height: 144px;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  #footer{
    margin-block: 80px 0;
  }
}
@media screen and (min-width: 769px) {
}