@charset "utf-8";

/*=====================
  NEXT FUKUOKA
=====================*/

/*  contentWrap
=====================*/

.page_ttl {
  font-size: 34px;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing: 0.1em;
  line-height: 1.5;
  border-top:8px solid #3B564C;
  /* background: #3B564C; */
  background: url("../img/mv_bg.jpg") center center no-repeat;
  background-size: cover;
  /* padding: 3.0em 0 6.0em; */
  padding: 28% 0 32%;
  text-align: center;
  position: relative;
}
.page_ttl .p1 {
  width:35%;
  /* font-family: 'Arial', 'メイリオ', serif;
  font-size: 0.53em; */
  font-family: 'Cinzel', serif !important;
  font-size: 1.5em;
  letter-spacing: 2px;
  line-height: 0.6;
  transform: rotate(0.28deg);
  color: #FFF;
  /* text-shadow: 0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF; */
  border-bottom:1px solid #FFF;

  margin: 0 auto;
}
.page_ttl .p_cap {
  font-size: 0.53em;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: #fff;

  position:absolute;
  bottom:5px;
  right:5px;
}


/* common */
.f-50{font-size: 50%;}
.f-70{font-size: 70%;}
.f-80{font-size: 80%;}
.f-120{font-size: 120%;}
.f-130{font-size: 130%;}
.f-150{font-size: 150%;}
.f-180{font-size: 180%;}
.f-200{font-size: 200%;}
.f-220{font-size: 220%;}
.f-250{font-size: 250%;}
.f-280{font-size: 280%;}

.space { height:1.8em; }

.txt-C { text-align: center;}
.txt-L { text-align: left;}
.txt-R { text-align: right;}

.mrgB30 { margin-bottom: 30px;}
.mrgB40 { margin-bottom: 40px;}
.mrgB50 { margin-bottom: 50px;}

figure {
  position: relative;
}
.caption {
position: absolute;
right: -9em;
bottom: 10px;
color: #231815;
font-size: 11px;
line-height: 1.1;
letter-spacing: 0.06em;
}
.caption02 {
/* position: absolute;
right: -9em;
bottom: 10px; */
color: #231815;
font-size: 13px;
line-height: 1.6;
letter-spacing: 0.06em;
}

.ttl {
  width:600px;
  border-bottom:1px solid #3B564C;
  padding: 50px 0 15px;
  margin: 0 auto 30px;
  text-align: center;
}
.ttl img {
  max-height:25px;
}


.title_Box {
  padding: 0 0 3%;
  text-align:center;
}
.title_Box.first {
  padding: 0 0 5%;
  text-align:center;
}

.title_Box p {
  font-size: clamp( 13px, calc( 7.666666666666667px + 0.6944444444444444vw ), 16px );
  line-height: 1.6;
  letter-spacing: 0.12em;
}
.title_Box p.sub_ttl {
  font-size: clamp( 16px, calc( 5.333333333333334px + 1.3888888888888888vw ), 22px );
  line-height: 2.0;
  letter-spacing: 0.12em;
  font-family: 'EB Garamond', serif!important;
  font-style: normal;
  transform: rotate(0.28deg);
  margin: 0 auto 1%;
}
.title_Box p.sub_ttl02 {
  font-size:clamp( 18px, calc( -10.444444444444443px + 3.7037037037037033vw ), 34px );;
  line-height: 2.0;
  letter-spacing: 0.12em;
  margin: 0 auto 1%;
}
.title_Box p.copy {
  font-size: clamp( 18px, calc( -10.444444444444443px + 3.7037037037037033vw ), 34px );
  line-height: 2.0;
  letter-spacing: 0.12em;
  margin: 0 auto 1%;
}
.title_Box p.copy02 {
  font-size: clamp( 16px, calc( 1.7777777777777786px + 1.8518518518518516vw ), 24px );
  line-height: 2.0;
  letter-spacing: 0.12em;
  margin: 0 auto 1%;
}

.title_Box p.sub_copy {
  font-size: clamp( 16px, calc( 8.88888888888889px + 0.9259259259259258vw ), 20px );
  line-height: 2.0;
  letter-spacing: 0.12em;
  margin: 0 auto 1%;
}

.txt_Box {
  padding: 3% 0;
}
.txt_Box p {
  font-size: clamp( 13px, calc( 7.666666666666667px + 0.6944444444444444vw ), 16px );
  line-height: 1.6;
  letter-spacing: 0.12em;
}
.txt_Box p.copy {
  font-size: clamp( 16px, calc( 8.88888888888889px + 0.9259259259259258vw ), 20px );
  line-height: 2.0;
  letter-spacing: 0.12em;
  margin: 0 auto 1%;
}
.txt_Box p.copy.addmg {
  margin-top: 0.5em;
}

.txt_Box p + p {
  margin-top: 1.5em;
}

.column_Box {
  background: #efece6;
  border:1px solid #4b412e;
  padding: 20px 40px 30px;
  text-align: center;
}
.column_Box .column {
  max-width: 150px;
  width:90%;
  margin: 0 auto 10px;
}
.column_Box .column_ttl {
  font-size: clamp( 18px, calc( -3.333333333333332px + 2.7777777777777777vw ), 30px );
  line-height: 2.0;
  letter-spacing: 0.12em;
  margin: 1.5% auto 3%;
}
.column_Box p {
  font-size: clamp( 13px, calc( 11.222222222222221px + 0.23148148148148145vw ), 14px );
  line-height: 2.0;
  letter-spacing: 0.12em;
}
.column_Box p.att { font-size: 80%; line-height: 1.3;}
.column_Box p.att.type01 {
font-size: 70%;
text-align: left;
}


.column_2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.column_2 li,
.column_2 div,
.column_2 figure {
  width:48.5%;
  margin-bottom: 20px;
}

.column_3 {
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
}
.column_3 li {
  width: calc((100% - 6%) / 3);
  margin-bottom: 20px;
  padding: 0 15px;
}
ul.column_3 li + li {
  border-left: 1px solid #231815;
}

.map {
  /* max-width: 1320px; */
  width: 100%;
}
.map.addmg {
  margin-bottom: 30px;
}




/* kobetsu */
.next_fukuoka_Wrap {
  padding: 0 0 5%;
  color:#231815;
}

.intro_Area {
  /* background: #3b554b;
  background: linear-gradient(#060000 0%, #686967 100%); */
  color:#231815;
/*  padding: 5% 0 5%;*/
  padding: 5% 0 0;
}
.intro_Area .copy {
  font-family: 'Cinzel', serif !important;
  font-size: 1.1em;
}
.intro_Area .title_Box p span {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.6;
  letter-spacing: 0.12em;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.intro_Area .title_Box p span::before,
.intro_Area .title_Box p span::after {
  width: 30px;
  height:1px;
  content:"";
  display:inline-block;
  opacity:0.4;
  border-top:1px solid #231815;
  /* flex-grow:1; */
}
.intro_Area .title_Box p span::before {
  margin-right:0.5rem;
}
.intro_Area .title_Box p span::after {
  margin-left:0.5rem;
}


.intro_Area .column_Box .fig_point {
  display: flex;
  justify-content: space-between;
  align-items:center;
  margin-top: 30px;
}
.intro_Area .column_Box .fig_point figure {
  max-width: 550px;
  width:60%;
}
.intro_Area .column_Box .fig_point ul {
  max-width: 310px;
  width:40%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 0;
}
.intro_Area .column_Box .fig_point ul li {
  max-width: 150px;
  width:90%;
  border:2px solid #8e866f;
}
.intro_Area .column_Box .fig_point ul li.link_area {
  width:90%;
  max-width: 100%;
  border:unset;
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.intro_Area .column_Box .fig_point ul li.link_area a{
  display: inline-block;
  transition: 0.3s;
}
.intro_Area .column_Box .fig_point ul li.link_area a:hover{
  opacity: 0.5;
}

/* sec_01 */
.sec_01 {
  padding: 5% 0 0;
}
.sec_01 .copy {

}

.sec_01 .column_Box .fig_fig {
  display: flex;
  justify-content: space-between;
  align-items:flex-end;
  margin-top: 30px;
}
.sec_01 .column_Box .fig_fig > figure {
  max-width: 550px;
  width:60%;
}
.sec_01 .column_Box .fig_fig ul {
  max-width: 310px;
  width:40%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sec_01 .column_Box .fig_fig ul li {
  max-width: 310px;
  width:90%;
}
.sec_01 .column_Box .fig_fig ul li + li {
  margin-top: 20px;
}


/* sec_02 */
.sec_02 {
  padding: 5% 0 0;
}
.sec_02 .title_Box p {
  margin: 0 auto 1%;
}
.sec_02 .title_Box p.sub_ttl02 {
  line-height: 1.5;
  margin: 0 auto;
}

.tenjin_hakata {
  display: flex;
  align-items: stretch; /* 縦線を高さ100%にする */
  width: 100%;
  margin: 40px auto;
}
.tenjin_hakata .box {
  width: 50%;
  box-sizing: border-box;
}
.tenjin_hakata .box h3 {
  background: #3b554b;
  padding: 1px 0;
  margin-bottom: 10px;
  text-align: center;
  color:#FFF;
  font-size: clamp( 18px, calc( 1.7777777777777786px + 1.8518518518518516vw ), 24px );
}
.tenjin_hakata .box p {
  font-size: clamp( 13px, calc( 7.666666666666667px + 0.6944444444444444vw ), 16px );
}
.tenjin_hakata .tenjin .txt {
  width: 80%;
  margin: 0 auto;
  padding: 20px 0;
}
.tenjin_hakata .hakata .txt {
  width: 87%;
  margin: 0 auto;
  padding: 20px 0;
}
.tenjin_hakata .tenjin .num,
.tenjin_hakata .hakata .num {
  background: #231815;
  padding: 0px 5px;
  margin-right: 0.2em;
  color:#FFF;
}
.divider {
  width: 1px;
  background: #000;
  margin: 0 20px;
}
.tenjin_hakata .column_2 figure {
  width:100%;
  margin-bottom: 0px;
}

.sec_02 .column_Box .fig_txt {
  display: flex;
  justify-content: center;
  align-items:center;
  margin-top: 30px;
  gap: 30px; 
}
.sec_02 .column_Box .fig_txt > figure {
  max-width: 600px;
  width:66%;
}
.sec_02 .column_Box .fig_txt p {
  max-width: 260px;
  width:34%;
}

.tenjin_hakata .column_2 li{
display: flex;
justify-content: space-between;
flex-direction: column;
margin: 0;
}
.tenjin_hakata .column_2 li .caption02{
margin: 0.5em 0 0;
}


/* sec_03 */
.sec_03 {
  padding: 5% 0 0;
}
.sec_03 .title_Box p {
  margin: 0 auto 1%;
}
.sec_03 .title_Box p.sub_ttl02 {
  line-height: 1.5;
  margin: 0 auto;
}
.sec_03 .sec03_img01 {
  max-width: 500px;
  width:90%;
  margin: 0 auto;
}
.sec03_txt {
  max-width: 550px;
  width:90%;
  margin: 3% auto;
}



.captionArea {
    padding: 20px 0 100px;
}



/*-----------------------------
調整
-----------------------------*/
@media only screen and (min-width: 1024px) and (max-width: 1400px) {



}

/*-----------------------------
tab横のみ
-----------------------------*/
@media only screen and (min-width: 1024px) and (max-width: 1200px) {


}


/*-----------------------------
tab
-----------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1023px)  {



}

@media only screen and (min-width: 768px) and (max-width: 900px)  {


}


/*=============================
spから
=============================*/
@media only screen and (max-width: 767px) {

  .page_ttl {
    font-size: 25px;
    /* padding: 2.5em 0 4.0em; */
    padding: 20% 0 35%;
    background: url("../img/mv_bg_sp.jpg") center center no-repeat;
    background-size: cover;
  }
  .page_ttl .p1 {
    width:70%;
    font-size: 1.2em;
    letter-spacing: 2px;
  }


  /* common */

  .space { height:0em; }

  .caption {
    position: absolute;
    right:0;
    bottom: -20px;
  }
  .caption02 {
  font-size: 12px;
  }

  .ttl {
    width:94%;
    padding: 30px 0 15px;
    margin: 0 auto 20px;
  }
  .ttl img {
    max-height:20px;
  }

  .title_Box {
    padding: 0 0 6%;
  }
  .title_Box.first {
    padding: 0 0 10%;
  }
  .title_Box p.copy {
    margin: 0 auto 4%;
  }

  .txt_Box {
    padding: 6% 0;
  }

  /* .title_Box p {
  }
  .title_Box p.sub_ttl {
    margin: 0 auto 3%;
  }
  .title_Box p.copy {
    margin: 0 auto 3%;
  } */
  .txt_Box p.copy.addmg .f-200{
      font-size: 160%;
  }

  .column_Box {
    padding: 20px 20px;
  }
  .column_Box .column {
    max-width: 100%;
    width:30%;
  }
  .column_Box p {
    text-align:left;
  }
  .column_Box p.att { font-size: 70%; line-height: 1.3;}


  .column_2 {
  }
  .column_2 li {
    width:48.5%;
    margin-bottom: 20px;
  }

  .column_3 {
    justify-content:center;
    flex-wrap: wrap;
  }
  .column_3 li {
    width: 100%;
    margin-bottom: 0px;
    padding: 15px 0;
  }
  ul.column_3 li + li {
    border-left: none;
    border-top: 1px solid #231815;
  }

  .map {
    /* padding: 30px 0; */
  }
  
  .map figure {
    width: 700px;
  }


  /* kobetsu */

  /* intro_Area */
  .intro_Area {
    padding: 10% 0 0;
  }
  .intro_Area .column_Box .fig_point {
    flex-direction: column;
    margin-top: 30px;
  }
  .intro_Area .column_Box .fig_point figure {
    max-width: 100%;
    width:100%;
    margin-bottom: 30px;
  }
  .intro_Area .column_Box .fig_point ul {
    max-width: 100%;
    width:100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .intro_Area .column_Box .fig_point ul li {
    max-width: 100%;
    width:48.5%;
  }
  .intro_Area .title_Box p span::before,
.intro_Area .title_Box p span::after {
  width: 16px;
}

  /* sec_01 */
  .sec_01 {
    padding: 10% 0 0;
  }

  .sec_01 .column_Box .fig_fig {
    flex-direction:column;
    margin-top: 30px;
  }
  .sec_01 .column_Box .fig_fig > figure {
    max-width: 100%;
    width:100%;
    margin-bottom: 30px;
  }
  .sec_01 .column_Box .fig_fig ul {
    max-width: 100%;
    width:100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .sec_01 .column_Box .fig_fig ul li {
    max-width: 100%;
    width:100%;
  }
  .sec_01 .column_Box .fig_fig ul li + li {
    margin-top: 20px;
  }

  /* sec_02 */
  .sec_02 {
    padding: 10% 0 0;
  }

  .tenjin_hakata {
    flex-direction:column;
    width: 100%;
    margin: 20px auto;
  }
  .tenjin_hakata .box {
    width: 90%;
    box-sizing: border-box;
    margin: 0 auto;
  }
  .tenjin_hakata .tenjin .txt {
    width: 80%;
    margin: 0 auto;
    padding: 20px 0;
  }
  .tenjin_hakata .hakata .txt {
    width: 87%;
    margin: 0 auto;
    padding: 20px 0;
  }
  .divider {
    width: 90%;
    height:1px;
    background: #000;
    margin: 30px auto 30px;
  }
  .tenjin_hakata .column_2 {
    display: flex;
    justify-content: space-between;
  }
  .tenjin_hakata .column_2 figure {
    width:100%;
    margin-bottom: 0px;
  }

  .sec_02 .column_Box .fig_txt {
    flex-direction: column;
    margin-top: 30px;
  }
  .sec_02 .column_Box .fig_txt > figure {
    max-width: 100%;
    width:100%;
    /*margin: 0 0 30px;*/
  }
  .sec_02 .column_Box .fig_txt p {
    max-width: 100%;
    width:60%;
  }

  /* sec_03 */
  .sec_03 {
    padding: 10% 0 0;
  }
  .sec_03 .sec03_img01 {
    max-width: 100%;
    width:40%;
    margin: 0 auto;
  }


  .scroll-area {
    position: relative;
    overflow-x: auto;
    overflow-y: visible; /* ← これが重要 */
    -webkit-overflow-scrolling: touch;
  }

  .js-scrollable img {
    display: block;
    margin: 0 auto;
    width: 700px;
    max-width: none;
  }





  .captionArea {
      padding: 20px 0 100px;
  }












}