@charset "utf-8";
.forPort{display: none;}
@media (orientation:portrait) {
    .forPort{display: block;}
}
/* mv */
.heroimgWrap.typeImg.heroimgWrap-titleImg.slide_1pages .mainHeading{
    width: calc(692 / 750 * 100vw);
    -webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);
    top: calc(71 / 750 * 100vw);
}
@media (min-width: 740px) {
.heroimgWrap.typeImg.heroimgWrap-titleImg.slide_1pages .mainHeading{
    width: calc(950 / 1920 * 100vw);max-width: 950px;
    top: calc(111 / 1920 * 100vw);
}
}
.heroimgWrap.heroimgWrap-titleImg .mainHeading .mainTtl img{
    width: 100%;
}
.contentsInr{width: 100%;margin: 0 auto;padding: 0;}
.contentsInr .contentsUnit{padding: 0 10px;}
@media (min-width: 740px) {
.contentsInr .contentsUnit{width: 950px;margin: 0 auto;padding: 0;}
}
/* map */
.mapUnit{background-color: #dbe5ff;}
@media (max-width: 739px) {
    .mapUnit{padding: calc(45 / 750 * 100vw) calc(20 / 750 * 100vw) calc(72 / 750 * 100vw);}
}
/* main Wrapper/Content/contentInr */
.mainContent{background-repeat: no-repeat;position: relative;}
.mainContentInr{position: relative;}
.mainContentInr,
.mainContentInr::before,
.mainContentInr::after{
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
}
.mainContentInr::before,
.mainContentInr::after{
    width: calc(276 / 750 * 100vw);
    height: calc(439 / 750 * 100vw);
    content: '';
    display: block;
    position: absolute;
    background-image:   url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_illust_01_sp.png);
}
@media (min-width: 740px) {
.mainwrapper{padding: 65px 0 170px;}
.mainContentInr{width: 950px;margin: 0 auto;}
.mainContentInr::before,
.mainContentInr::after{
    width: 392px;
    height: 625px;
    background-image:   url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_illust_pc.png);
}
}

/* sec-head */
.mainContent .sec-head .heading {
    font-family: 'Noto Serif JP', serif;
    margin-right: 0;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
@media (max-width: 739px){
    .mainContent .sec-head .heading{
        font-size: 2.8rem;
        padding-right: 20px;
    }
}

.mainContent .sec-head .heading .txt-r {
    color: #94836e;
    font-size: 1.6rem;
    text-align: right;
    width: 100%;
    letter-spacing: 0.34em;
}

.mainContent .sec-head .heading .txt-v {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #4c4c4b;
    font-weight: 600;
    font-size: 4.6rem;
    position: relative;
    letter-spacing: 0.3em;
    padding: 62px 23px 0 0;
    text-orientation: upright;
}
.mainContent .sec-head .heading .txt-v::before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    background-color: #ded1c1;
    height: 326px;
    top: 6px;
    right: 6px;
}

.mainContent .sec-head .heading .txt-v .txt-v-sub {
    color: #4e4e4e;
    font-weight: 400;
    font-size: 2.1rem;
    display: block;
    letter-spacing: normal;
}

.mainContent .content-head .heading{
    font-family: 'Noto Serif JP', serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
}
@media (max-width: 739px){
    .mainContent .sec-head .heading .txt-r {
        font-size: 1.2rem;
    }
    
    .mainContent .sec-head .heading .txt-v {
        font-size: 2.8rem;
        line-height: 1.3;
        margin-top: 34px;
        padding: 0 5px 0 0;
    }
    .mainContent .sec-head .heading .txt-v::before{
        height: calc(505 / 750 * 100vw);
        top: -26px;
        right: 0;
    }
}

/* contentList */
.contentList ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.contentList ul li{
    display: flex;
    position: relative;
}
.contentList img{
    width: 100%;
}
@media (min-width: 740px) {
    .contentList img{
        width: auto;
    }
}
/* contentTxt */
[class*="contentTxt"]{
    font-family: 'Noto Serif JP', serif;
}
.contentTxt{
    font-size: 1.4rem;
    position: absolute;
}
.contentTxt .contentTtl{
    font-weight: 700;
    font-size: 1.8rem;
    display: block;
}
.contentList .contentTxt.typeRadius{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
}
.contentList .contentTxt.typeRadius .contentTtl{
    background-color: #252525;
    color: #ffffff;
    font-size: 1.5rem;
    text-align: center;
    display: inline-block;
    border-radius: 30px;
    margin-bottom: 12px;
    padding: calc(5 / 750 * 100vw) calc(20 / 750 * 100vw) calc(7 / 750 * 100vw);
}
@media (min-width: 740px) {
    .contentList .contentTxt.typeRadius .contentTtl{
        font-size: 1.8rem;
        padding: 1px 30px 2px;
    }
}
.contentList .contentBubble{
    position: absolute;
    background-color: #ffffff;
    border-radius: 5px;
    padding: calc(10 / 750 * 100vw) calc(17 / 750 * 100vw) calc(18 / 750 * 100vw);
}
.contentList .contentBubble::before{
    content: '';
    display: block;
    position: absolute;
    width: calc(26 / 750 * 100vw);
    height: calc(24 / 750 * 100vw);
    background-image: url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_speech_bubble_sp.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
}
.contentList .contentBubble .contentTxt{
    position: relative;
}
@media (min-width: 740px) {
    .contentList .contentBubble{
        padding: 6px 18px 15px;
    }
    .contentList .contentBubble::before{
        background-image: url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_speech_bubble_pc.png);
        width: 24px;
        height: 20px;
        top: -20px;
        right: 31px;
    }
}
.contentTxtImg{
    position: absolute;
}
/* #GOURMET */
#GOURMET{
    padding-top: 95px;
}
#GOURMET .mainContentInr::before{
    top: calc(27 / 750 * 100vw);
    left: calc(40 / 750 * 100vw);
}
#GOURMET .mainContentInr::after{
    display: none;
}
#GOURMET .contentList li:nth-child(3) .contentTxtSupply{
    position: absolute;
}
@media (max-width: 739px){
    #GOURMET .contentList li:nth-child(1){
        order: 2;
        margin: calc(-40 / 750 * 100vw) 0 0 calc(40 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(1) .contentTxt{
        top: calc(-59 / 750 * 100vw);
        left: calc(102 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(1) picture {
        width: calc(458 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(2){
        order: 1;
        margin: calc(104 / 750 * 100vw) calc(40 / 750 * 100vw) 0 auto;
    }
    #GOURMET .contentList li:nth-child(2) .contentTxt{
        top: calc(-58 / 750 * 100vw);
        left: calc(61 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(2) picture {
        width: calc(307 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(3){
        order: 3;
        margin: calc(259 / 750 * 100vw) 0 0 calc(40 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(3) picture{
        width: calc(666 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(3) .contentTxt{
        top: calc(-39 / 750 * 100vw);
        left: calc(30 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(3) .contentTxtSupply{
        top: calc(-208 / 750 * 100vw);
        left: 0;
        right: 0;
        text-align: center;
    }
    #GOURMET .contentList li:nth-child(4){
        position: relative;
        order: 4;
        margin: calc(97 / 750 * 100vw) calc(15 / 750 * 100vw) 0 auto;
    }
    #GOURMET .contentList li:nth-child(4) picture{
        width: calc(395 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(4) .contentTxt{
        top: calc(-52 / 750 * 100vw);
        left: calc(93 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(4)::before{
        content: '';
        display: block;
        position: absolute;
        top: calc(-94 / 750 * 100vw);
        left: calc(-303 / 750 * 100vw);
        width: calc(276 / 750 * 100vw);
        height: calc(439 / 750 * 100vw);
        background: transparent url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_illust_01_sp.png) 0 0 no-repeat;
        background-size: contain;
    }
    #GOURMET .contentList li:nth-child(5){
        order: 6;
        margin: calc(156 / 750 * 100vw) 0 0 calc(111 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(5) .contentTxtImg{
        width: calc(340 / 750 * 100vw);
        top: calc(-156 / 750 * 100vw);
        left: calc(-71 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(5) .contentTxt{
        left: calc(86 / 750 * 100vw);
        bottom: calc(-58 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(5) picture{
        width: calc(527 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(6){
        order: 5;
        margin: calc(102 / 750 * 100vw) 0 0 calc(19 / 750 * 100vw);
    }
    #GOURMET .contentList li:nth-child(6) picture{
        width: calc(435 / 750 * 100vw);
        order: 1;
    }
    #GOURMET .contentList li:nth-child(6) .contentTxt{
        position: static;
        order: 2;
        padding: 48px 0 0 18px;
    }
    #GOURMET .contentList li:nth-child(6)::before{
        content: '';
        display: block;
        position: absolute;
        bottom: calc(-134 / 750 * 100vw);
        right: 0;
        width: calc(249 / 750 * 100vw);
        height: calc(202 / 750 * 100vw);
        background: transparent url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_illust_02_sp.png) 0 0 no-repeat;
        background-size: contain;
    }
    #GOURMET .contentList li:nth-child(7){
        order: 7;
        margin: calc(109 / 750 * 100vw) calc(20 / 750 * 100vw) 0 auto;
        width: 100%;
    }
    #GOURMET .contentList li:nth-child(7) picture{
        width: calc(419 / 750 * 100vw);
        order: 2;
    }
    #GOURMET .contentList li:nth-child(7) .contentTxt{
        position: static;
        padding: calc(104 / 750 * 100vw) calc(18 / 750 * 100vw) 0 calc(40 / 750 * 100vw);
        order: 1;
    }
}
@media (min-width: 740px) {
    #GOURMET{
        padding-top: 66px;
    }
    #GOURMET .mainContentInr::before{
        top: 274px;
        left: auto;
        right: -459px;
    }
    #GOURMET .mainContentInr::after{
        display: block;
        bottom: 30px;
        left: -458px;
    }
    #GOURMET .contentList{
        margin-top: 96px;
    }
    #GOURMET .contentList .contentImage{
        position: absolute;
        top: 42px;
        left: 0;
    }
    #GOURMET .contentList li:nth-child(1){
        margin: 63px 0 0 95px;
    }
    #GOURMET .contentList li:nth-child(1) .contentTxt{
        top: -9px;
        left: -40px;
    }
    #GOURMET .contentList li:nth-child(2){
        margin: 0 100px 0 0;
    }
    #GOURMET .contentList li:nth-child(2) .contentTxt{
        top: 49px;
        right: -36px;
    }
    #GOURMET .contentList li:nth-child(3){
        margin: 149px 0 0;
    }
    #GOURMET .contentList li:nth-child(3) .contentTxt{
        top: 17px;
        left: 0;
    }
    #GOURMET .contentList li:nth-child(3) .contentTxtSupply{
        font-size: 1.8rem;
        top: -88px;
        right: -107px;
    }
    #GOURMET .contentList li:nth-child(4){
        margin: 109px 0 0;
    }
    #GOURMET .contentList li:nth-child(4) .contentTxt{
        bottom: -16px;
        right: 0;
    }
    #GOURMET .contentList li:nth-child(5){
        margin: 255px 0 0;
    }
    #GOURMET .contentList li:nth-child(5) .contentTxt{
        bottom: -25px;
        left: 21px;
    }
    #GOURMET .contentList li:nth-child(5) .contentTxtImg{
        top: -80px;
    }
    #GOURMET .contentList li:nth-child(6){
        margin: 27px 204px 0 -74px;
    }
    #GOURMET .contentList li:nth-child(6) .contentTxt{
        top: -35px;
        right: -123px;
    }
    #GOURMET .contentList li:nth-child(7){
        margin: -257px 0 0 auto;
    }
    #GOURMET .contentList li:nth-child(7) .contentTxt{
        bottom: -28px;
        left: -24px;
    }
}

/* #SOUVENIR */
#SOUVENIR{padding-top: calc(359 / 750 * 100vw);}
#SOUVENIR .sec-head{
    position: absolute;
    top: 0;
    right: 0;
}
@media (max-width: 739px) {
    #SOUVENIR .mainContentInr::before{
        top: calc(-384 / 750 * 100vw);
        left: calc(40 / 750 * 100vw);
    }
    #SOUVENIR .mainContentInr::after{
        display: none;
    }
    #SOUVENIR .contentList li .contentTxt{
        position: static;
    }
    #SOUVENIR .contentList li:nth-child(1){
        order: 2;
        margin: calc(20 / 750 * 100vw) 0 0 calc(40 / 750 * 100vw);
    }
    #SOUVENIR .contentList li:nth-child(1) .contentTxt{
        margin-top: calc(83 / 750 * 100vw);
    }
    #SOUVENIR .contentList li:nth-child(1) picture{
        width: calc(381 / 750 * 100vw);
        margin-left: 10px;
    }
    #SOUVENIR .contentList li:nth-child(2){
        margin: calc(88 / 750 * 100vw) 0 0 calc(63 / 750 * 100vw);
        flex-direction: column;
    }
    #SOUVENIR .contentList li:nth-child(2) .contentTxt{
        margin: calc(23 / 750 * 100vw) calc(50 / 750 * 100vw) 0 auto;
        order: 2;
    }
    #SOUVENIR .contentList li:nth-child(2) .contentTxt .contentTtl{
        margin-left: calc(89 / 750 * 100vw);
    }
    #SOUVENIR .contentList li:nth-child(2) picture{
        width: calc(523 / 750 * 100vw);
        order: 1;
    }
    #SOUVENIR .contentList li:nth-child(3){
        order: 3;
        margin: calc(-2 / 750 * 100vw) 0 0 calc(20 / 750 * 100vw);
    }
    #SOUVENIR .contentList li:nth-child(3) .contentTxt{
        order: 2;
        margin: calc(80 / 750 * 100vw) 0 0 calc(5 / 750 * 100vw);
    }
    #SOUVENIR .contentList li:nth-child(3) picture{
        width: calc(350 / 750 * 100vw);
        order: 1;
    }
}
@media (min-width: 740px) {
    #SOUVENIR{padding-top: 194px;}
    #SOUVENIR .mainContentInr::before{
        top: 200px;
        right: -458px;
    }
    #SOUVENIR .mainContentInr::after{
        display: none;
    }
    #SOUVENIR .contentList{padding: 75px 123px 0 0;}
    #SOUVENIR .contentList li:nth-child(1) .contentTxt{
        top: -65px;
        right: -64px;
        padding-left: 5px;
    }
    #SOUVENIR .contentList li:nth-child(1) .contentTxt .contentTtl{
        margin-left: -5px;
    }
    #SOUVENIR .contentList li:nth-child(2){
        margin-top: 18px;
    }
    #SOUVENIR .contentList li:nth-child(2) .contentTxt{
        bottom: -75px;
        right: -51px;
    }
    #SOUVENIR .contentList li:nth-child(2) .contentTxt .contentTtl{
        margin-left: 30px;
    }
    #SOUVENIR .contentList li:nth-child(3){
        margin-top: -113px;
        padding-left: 146px;
    }
    #SOUVENIR .contentList li:nth-child(3) .contentTxt{
        bottom: -12px;
        left: 0;
    }
    #SOUVENIR .contentList li:nth-child(3) .contentTxt .contentTtl{
        margin-left: 29px;
    }
}

/* #EXPERIENCE */
#EXPERIENCE{padding-top: calc(220 / 750 * 100vw);}
#EXPERIENCE .mainContentInr{padding: 0 20px;}
#EXPERIENCE .contentList{
    background-color: #efefef;
    margin-top: calc(212 / 750 * 100vw);
    border-radius: 8px;
    position: relative;
}
#EXPERIENCE .contentList ul{
    flex-direction: column;
    position: absolute;
    width: 100%;
    left: 0;
}
#EXPERIENCE .contentList:nth-of-type(3){
    margin-top: calc(200 / 750 * 100vw);
}
@media (max-width: 739px) {
    #EXPERIENCE .mainContentInr::before,
    #EXPERIENCE .mainContentInr::after{
        display: none;
    }
    #EXPERIENCE .contentList .content-head{
        position: absolute;
        width: 100%;
    }
    #EXPERIENCE .mainContent .sec-head .heading{
        padding-right: 0;
    }
    #EXPERIENCE .mainContent .sec-head .heading .txt-v .txt-v-sub{
        padding-right: calc(36 / 750 * 100vw);
    }
    #EXPERIENCE.mainContent .content-head .heading{
        text-align: center;
    }
    #EXPERIENCE .contentList ul{
        position: relative;
    }
    #EXPERIENCE .contentList:nth-child(2) .content-head{
        top: calc(367 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(1){
        margin: calc(-83 / 750 * 100vw) auto 0;
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(1) .contentTxt{
        top: calc(-47 / 750 * 100vw);
        right: calc(-27 / 750 * 100vw);
        left: auto;
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(1) .contentTxtImg{
        width: calc(401 / 750 * 100vw);
        top: calc(-112 / 750 * 100vw);
        left: calc(-27 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(1) picture{
        width: calc(616 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(2){
        margin: calc(175 / 750 * 100vw) auto 0 calc(-23 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(2) picture{
        width: calc(406 / 750 * 100vw);
        order: 1;
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(2) .contentBubble{
        top: calc(33 / 750 * 100vw);
        right: calc(-267 / 750 * 100vw);
        width: calc(235 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-of-type(2) li:nth-child(2) .contentBubble::before{
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        left: calc(-22 / 750 * 100vw);
        bottom: calc(23 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(3){
        margin: calc(184 / 750 * 100vw) calc(18 / 750 * 100vw) calc(-68 / 750 * 100vw) auto;
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(3) picture{
        width: calc(454 / 750 * 100vw);
        order: 2;
        position: relative;
        z-index: 3;
    }
    #EXPERIENCE .contentList:nth-child(2) ul li:nth-child(3) .contentBubble{
        top: calc(-118/ 750 * 100vw);
        left: calc(-178 / 750 * 100vw);
        width: calc(351 / 750 * 100vw);
        z-index: 2;
    }
    #EXPERIENCE .contentList:nth-of-type(2) li:nth-child(3) .contentBubble::before{
        -webkit-transform: rotate(180deg) scale(-1, 1);
        transform: rotate(180deg) scale(-1, 1);
        right: calc(142 / 750 * 100vw);
        bottom: calc(-22 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) .content-head{
        top: calc(523 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) .content-head .heading{
        text-align: left;
        padding-left: 10px;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(1){
        margin: calc(-104 / 750 * 100vw) auto 0;
        flex-direction: column;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(1) picture{
        width: calc(515 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:not(:nth-child(5)){
        align-items: flex-start;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:not(:nth-child(5)) .contentBubble{
        position: relative;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(1) .contentBubble{
        margin: calc(40 / 750 * 100vw) auto 0;
        width: calc(508 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(1) .contentBubble::before{
        top: calc(-24 / 750 * 100vw);
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(2){
        margin: calc(107 / 750 * 100vw) calc(-23 / 750 * 100vw) 0 auto;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(2) .contentBubble{
        width: calc(271 / 750 * 100vw);
        margin: calc(73 / 750 * 100vw) calc(17 / 750 * 100vw) 0 0;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(2) .contentBubble::before{
        -webkit-transform: rotate(90deg) scale(-1, 1);
        transform: rotate(90deg) scale(-1, 1);
        right: calc(-22 / 750 * 100vw);
        bottom: calc(13 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(2) picture{
        width: calc(382 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(3){
        margin: calc(57 / 750 * 100vw) calc(-19 / 750 * 100vw) auto;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(3) .contentBubble{
        width: calc(237 / 750 * 100vw);
        margin: calc(18 / 750 * 100vw) 0 0 calc(-13 / 750 * 100vw);
        padding-left: calc(25 / 750 * 100vw);
        order: 2;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(3) .contentBubble::before{
        -webkit-transform: rotate(180deg) scale(1, 1);
        transform: rotate(180deg) scale(1, 1);
        left: calc(64 / 750 * 100vw);
        bottom: calc(-23 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(3) picture{
        width: calc(446 / 750 * 100vw);
        z-index: 3;
        order: 1;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(4){
        margin: calc(5 / 750 * 100vw) calc(-16 / 750 * 100vw) 0 auto;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(4) .contentBubble{
        width: calc(217 / 750 * 100vw);
        margin: calc(93 / 750 * 100vw) calc(29 / 750 * 100vw) 0 0;
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(4) .contentBubble::before{
        -webkit-transform: rotate(90deg) scale(-1, 1);
        transform: rotate(90deg) scale(-1, 1);
        right: calc(-22 / 750 * 100vw);
        bottom: calc(13 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(4) picture{
        width: calc(404 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(5){
        margin: calc(123 / 750 * 100vw) auto calc(-91 / 750 * 100vw) calc(-21 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(5) .contentBubble{
        width: calc(297 / 750 * 100vw);
        top: calc(-96 / 750 * 100vw);
        right: calc(-215 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(5) .contentBubble::before{
        -webkit-transform: rotate(180deg) scale(1, 1);
        transform: rotate(180deg) scale(1, 1);
        left: calc(80 / 750 * 100vw);
        bottom: calc(-23 / 750 * 100vw);
    }
    #EXPERIENCE .contentList:nth-child(3) ul li:nth-child(5) picture{
        width: calc(456 / 750 * 100vw);
    }
}
@media (min-width: 740px) {
    #EXPERIENCE{padding-top: 194px;}
    #EXPERIENCE .mainContentInr{padding: 0;}
    #EXPERIENCE .mainContentInr::before{
        top: 704px;
        left: -458px;
    }
    #EXPERIENCE .mainContentInr::after{
        bottom: 22px;
        right: -458px;
    }
    #EXPERIENCE.mainContent .sec-head .heading .txt-v::before{
        height: 465px;
    }
    #EXPERIENCE.mainContent .sec-head .heading .txt-v .txt-v-sub{
        margin-right: 50px;
    }
    #EXPERIENCE .contentList{
        margin-top: 0;
        padding: 40px;
    }
    #EXPERIENCE .contentList:nth-of-type(2){
        margin-top: 28px;
        height: 578px;
    }
    #EXPERIENCE .contentList:nth-of-type(2) .content-head{
        margin-top: 78px;
    }
    #EXPERIENCE .contentList:nth-of-type(2) ul{
        top: -338px;
    }
    #EXPERIENCE .contentList:nth-of-type(2) li:nth-child(1) .contentTxtImg{
        top: -94px;
        left: 0;
    }
    #EXPERIENCE .contentList:nth-of-type(2) li:nth-child(1) .contentTxt{
        top: -14px;
        right: 73px;
    }
    #EXPERIENCE .contentList:nth-of-type(2) li:nth-child(2){
        margin-top: -63px;
        margin-right: 0;
        margin-left: auto;
    }
    #EXPERIENCE .contentList:nth-of-type(2) li:nth-child(2) .contentBubble{
        bottom: -98px;
        right: 67px;
    }
    #EXPERIENCE .contentList:nth-of-type(2) li:nth-child(3){
        margin-top: -5px;
        margin-left: 67px;
    }
    #EXPERIENCE .contentList:nth-of-type(2) li:nth-child(3) .contentBubble{
        top: -100px;
        left: 61px;
    }
    #EXPERIENCE .contentList:nth-of-type(2) li:nth-child(3) .contentBubble::before{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        top: auto;
        bottom: -20px;
        left: 49px;
    }
    #EXPERIENCE .contentList:nth-of-type(3){
        padding-top: 43px;
        margin-top: 200px;
        height: 1116px;
    }
    #EXPERIENCE .contentList:nth-of-type(3) ul{
        top: -136px;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(1){
        margin-right: 0;
        margin-left: auto;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(1) .contentBubble{
        bottom: -97px;
        right: 97px;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(2){
        margin-top: -31px;
        margin-left: 11px;
        margin-right: auto;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(2) .contentBubble{
        top: -100px;
        left: 66px;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(2) .contentBubble::before{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        top: auto;
        left: 49px;
        bottom: -20px;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(3){
        margin-top: -155px;
        margin-right: 24px;
        margin-left: auto;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(3) .contentBubble{
        bottom: -99px;
        right: 73px;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(4){
        margin-top: -57px;
        margin-left: 64px;
        margin-right: auto;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(4) .contentBubble{
        top: -102px;
        left: 92px;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(4) .contentBubble::before{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        top: auto;
        left: 49px;
        bottom: -20px;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(5){
        margin-top: -96px;
        margin-right: 128px;
        margin-left: auto;
    }
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(5) .contentBubble{
        bottom: 60px;
        left: -233px;
    }
    
    #EXPERIENCE .contentList:nth-of-type(3) li:nth-child(5) .contentBubble::before{
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        top: auto;
        left: auto;
        right: -20px;
        bottom: 21px;
    }
}

/* #NIGHT_VIEW */
@media (max-width: 739px) {
    #NIGHT_VIEW{
        margin-top: calc(260 / 750 * 100vw);
    }
    #NIGHT_VIEW .mainContentInr::before{
        top: calc(-40 / 750 * 100vw);
        left: calc(40 / 750 * 100vw);
    }
    #NIGHT_VIEW .mainContentInr::after{
        display: none;
    }
    #NIGHT_VIEW .contentList{
        margin-top: calc(38 / 750 * 100vw);
    }
    #NIGHT_VIEW .contentTxt{
        position: static;
        order: 2;
        text-align: center;
    }
    #NIGHT_VIEW .contentList .contentTxt .contentTtl{
        min-width: calc(225 / 750 * 100vw);
        margin-top: calc(22 / 750 * 100vw);
    }
    #NIGHT_VIEW .contentList li{
        flex-direction: column;
        align-items: center;
        width: 50%;
    }
    #NIGHT_VIEW .contentList li:nth-child(1){
        width: 100%;
        padding: 0 calc(24 / 750 * 100vw) 0 calc(23 / 750 * 100vw);
    }
    #NIGHT_VIEW .contentList li:nth-child(2){
        margin-top: calc(78 / 750 * 100vw);
        padding: 0 calc(19 / 750 * 100vw) 0 calc(40 / 750 * 100vw);
    }
    #NIGHT_VIEW .contentList li:nth-child(3){
        margin-top: calc(59 / 750 * 100vw);
        padding: 0 calc(24 / 750 * 100vw) 0 0;
    }
    #NIGHT_VIEW .contentList li:nth-child(4){
        margin: calc(44 / 750 * 100vw) calc(-8 / 750 * 100vw) 0 0;
        padding: 0 0 0 calc(17 / 750 * 100vw);
    }
    #NIGHT_VIEW .contentList li:nth-child(5){
        margin-top: calc(46 / 750 * 100vw);
        padding: 0 calc(47 / 750 * 100vw) 0 calc(15 / 750 * 100vw);
    }
}
@media (min-width: 740px){
    #NIGHT_VIEW {
        margin-top: 193px;
    }
    #NIGHT_VIEW .mainContentInr::before{
        top: 345px;
        left: -458px;
    }
    #NIGHT_VIEW .mainContentInr::after{
        display: none;
    }
   #NIGHT_VIEW .contentList ul {
        margin-top: -439px;
    }
    #NIGHT_VIEW .contentList li:nth-child(1){
        margin-left: 91px;
    }
    #NIGHT_VIEW .contentList li:nth-child(1) .contentTxt{
        right: -114px;
        bottom: 30px;
    }
    #NIGHT_VIEW .contentList li:nth-child(1) .contentTxt .contentTtl{
        margin-left: 3px;
    }
    #NIGHT_VIEW .contentList li:nth-child(2){
        margin: 8px 0 0 85px;
    }
    #NIGHT_VIEW .contentList li:nth-child(2) .contentTxt{
        left: -85px;
        bottom: -40px;
    }
    #NIGHT_VIEW .contentList li:nth-child(2) .contentTxt .contentTtl{
        margin-left: 36px;
    }
    #NIGHT_VIEW .contentList li:nth-child(3){
        margin: 13px 179px 0 0;
    }
    #NIGHT_VIEW .contentList li:nth-child(3) .contentTxt{
        right: -149px;
        bottom: 3px;
    }
    #NIGHT_VIEW .contentList li:nth-child(3) .contentTxt .contentTtl{
        margin-left: 25px;
    }
    #NIGHT_VIEW .contentList li:nth-child(4){
        margin: -28px 0 0 93px;
    }
    #NIGHT_VIEW .contentList li:nth-child(4) .contentTxt{
        left: -85px;
        bottom: -52px;
    }
    #NIGHT_VIEW .contentList li:nth-child(4) .contentTxt .contentTtl{
        margin-left: 16px;
    }
    #NIGHT_VIEW .contentList li:nth-child(5){
        margin: 24px 188px 0 0;
    }
    #NIGHT_VIEW .contentList li:nth-child(5) .contentTxt{
        right: 20px;
        bottom: -91px;
    }
    #NIGHT_VIEW .contentList li:nth-child(5) .contentTxt{
        padding-left: 4px;
    }
    #NIGHT_VIEW .contentList li:nth-child(5) .contentTxt .contentTtl{
        margin-left: -4px;
    }
}

/* #EXTRAORDINARY */
#EXTRAORDINARY .contentList{
    background-color: #efefef;
    border-radius: 8px;
    position: relative;
}
#EXTRAORDINARY .contentList ul{
    flex-direction: column;
    width: 100%;
}
#EXTRAORDINARY{
    margin: calc(190 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
}
#EXTRAORDINARY .mainContentInr{padding: 0 20px;}
@media (max-width: 739px) {
    #EXTRAORDINARY .content-head{
        position: absolute;
    }
    #EXTRAORDINARY.mainContent .sec-head .heading{
        padding-right: 0;
    }
    #EXTRAORDINARY .mainContentInr::before{
        top: calc(-71 / 750 * 100vw);
        left: calc(40 / 750 * 100vw);
    }
    #EXTRAORDINARY .mainContentInr::after{
        display: none;
    }
    #EXTRAORDINARY .contentList{
        margin-top: calc(200 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList ul li{
        align-items: flex-start;
    }
    #EXTRAORDINARY .contentList ul li .contentBubble{
        position: relative;
    }
    #EXTRAORDINARY .contentList:nth-child(2) .content-head{
        top: calc(309 / 750 * 100vw);
        left: calc(36 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(1){
        margin: calc(-67 / 750 * 100vw) auto 0;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(1) .contentTxtImg{
        width: calc(400 / 750 * 100vw);
        top: calc(-126 / 750 * 100vw);
        left: calc(-58 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(1) .contentTxt{
        top: calc(-16 / 750 * 100vw);
        right: calc(-57 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(1) picture{
        width: calc(555 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(2){
        margin: calc(65 / 750 * 100vw) calc(-25 / 750 * 100vw) 0 auto;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(2)::before{
        content: '';
        display: block;
        position: absolute;
        top: calc(-89 / 750 * 100vw);
        right: calc(43 / 750 * 100vw);
        width: calc(117 / 750 * 100vw);
        height: calc(81 / 750 * 100vw);
        background: transparent url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_nature_sp.png) 0 0 no-repeat;
        background-size: contain;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(2) .contentBubble{
        width: calc(301 / 750 * 100vw);
        margin: calc(30 / 750 * 100vw) calc(20 / 750 * 100vw) 0 0;
        order: 1;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(2) .contentBubble::before{
        -webkit-transform: rotate(90deg) scale(-1, 1);
        transform: rotate(90deg) scale(-1, 1);
        right: calc(-22 / 750 * 100vw);
        bottom: calc(13 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(2) picture{
        width: calc(354 / 750 * 100vw);
        order: 2;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(3){
        margin: calc(14 / 750 * 100vw) 0 0 calc(-30 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(3) .contentBubble{
        width: calc(228 / 750 * 100vw);
        margin: calc(66 / 750 * 100vw) 0 0 calc(22 / 750 * 100vw);
        order: 2;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(3) .contentBubble::before{
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        left: calc(-22 / 750 * 100vw);
        bottom: calc(23 / 750 * 100vw);        
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(3) picture{
        width: calc(430 / 750 * 100vw);
        order: 1;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(4){
        margin: calc(3 / 750 * 100vw) calc(-19 / 750 * 100vw) calc(-20 / 750 * 100vw) auto;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(4) .contentBubble{
        width: calc(293 / 750 * 100vw);
        margin: calc(48 / 750 * 100vw) calc(25 / 750 * 100vw) 0 0;
        padding-left: calc(15 / 750 * 100vw);
        padding-right: calc(15 / 750 * 100vw);
        order: 1;
        letter-spacing: -0.06em;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(4) .contentBubble::before{
        -webkit-transform: rotate(90deg) scale(-1, 1);
        transform: rotate(90deg) scale(-1, 1);
        right: calc(-22 / 750 * 100vw);
        bottom: calc(13 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul li:nth-child(4) picture{
        width: calc(351 / 750 * 100vw);
        order: 2;
    }
    #EXTRAORDINARY .contentList:nth-child(3){
        margin-top: calc(119 / 750 * 100vw);
        padding-top: calc(45 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(3) .content-head{
        position: static;
        text-align: center;
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul li:nth-child(1){
        flex-direction: column;
        align-items: center;
        margin: calc(54 / 750 * 100vw) auto 0;
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul li:nth-child(1)::before{
        content: '';
        display: block;
        position: absolute;
        bottom: calc(-69 / 750 * 100vw);
        left: calc(-10 / 750 * 100vw);
        width: calc(92 / 750 * 100vw);
        height: calc(79 / 750 * 100vw);
        background: transparent url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_bath_sp.png) 0 0 no-repeat;
        background-size: contain;
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul li:nth-child(1) .contentBubble{
        width: calc(432 / 750 * 100vw);
        order: 1;
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul li:nth-child(1) .contentBubble::before{
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        right: calc(39 / 750 * 100vw);
        bottom: calc(-23 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul li:nth-child(1) picture{
        width: calc(579 / 750 * 100vw);
        margin: calc(24 / 750 * 100vw) auto 0;
        order: 2;
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul li:nth-child(2){
        margin: calc(45 / 750 * 100vw) auto 0 calc(-6 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul li:nth-child(2) .contentBubble{
        width: calc(265 / 750 * 100vw);
        margin-left: calc(-9 / 750 * 100vw);
        order: 2;
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul li:nth-child(2) .contentBubble::before{
        -webkit-transform: rotate(180deg) scale(1, 1);
        transform: rotate(180deg) scale(1, 1);
        left: calc(46 / 750 * 100vw);
        bottom: calc(-23 / 750 * 100vw);
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul li:nth-child(2) picture{
        width: calc(400 / 750 * 100vw);
        margin-top: calc(31 / 750 * 100vw);
        order: 1;
        z-index: 3;
    }
}
@media (min-width: 740px) {
    #EXTRAORDINARY{
        margin: 220px 0 80px;
    }
    #EXTRAORDINARY .mainContentInr::before{
        top: 307px;
        right: -458px;
    }
    #EXTRAORDINARY .mainContentInr::after{
        bottom: 10px;
        left: -458px;
    }
    #EXTRAORDINARY .contentList{
        padding: 111px 40px 0;
    }
    #EXTRAORDINARY .contentList ul{
        position: absolute;
        left: 0;
    }
    #EXTRAORDINARY .contentList:nth-child(2){
        height: 801px;
    }
    #EXTRAORDINARY .contentList:nth-child(2)::before{
        content: '';
        display: block;
        position: absolute;
        top: 449px;
        right: 66px;
        width: 136px;
        height: 95px;
        background: transparent url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_nature_pc.png) 0 0 no-repeat;
        background-size: contain;
    }
    #EXTRAORDINARY .contentList:nth-child(2) ul{
        top: -383px;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(1){
        margin-left: 45px;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(1) .contentTxtImg{
        top: -84px;
        left: -46px;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(1) .contentTxt{
        top: 0;
        right: 51px;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(2){
        margin: -70px 0 0 auto;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(2) .contentBubble{
        bottom: -96px;
        right: 48px;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(3){
        margin: -83px 0 0 46px;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(3) .contentBubble{
        top: -107px;
        left: 101px;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(3) .contentBubble::before{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        top: auto;
        bottom: -20px;
        left: 49px;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(4){
        margin: -63px 31px 0 auto;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(4) .contentBubble{
        bottom: 105px;
        left: -316px;
    }
    #EXTRAORDINARY .contentList:nth-child(2) li:nth-child(4) .contentBubble::before{
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        top: auto;
        bottom: 22px;
        right: -20px;
    }
    #EXTRAORDINARY .contentList:nth-child(3){
        height: 546px;
        margin-top: 200px;
        padding-top: 43px;
    }
    #EXTRAORDINARY .contentList:nth-child(3)::before{
        content: '';
        display: block;
        position: absolute;
        top: 41px;
        left: 289px;
        width: 85px;
        height: 74px;
        background: transparent url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/kitakyushu/img_sites/bg_bath_pc.png) 0 0 no-repeat;
        background-size: contain;
    }
    #EXTRAORDINARY .contentList:nth-child(3) ul{
        top: -103px;
    }
    #EXTRAORDINARY .contentList:nth-child(3) li:nth-child(1){
        margin: 0 0 0 auto;
    }
    #EXTRAORDINARY .contentList:nth-child(3) li:nth-child(1) .contentBubble{
        bottom: 50px;
        left: -288px;
    }
    #EXTRAORDINARY .contentList:nth-child(3) li:nth-child(1) .contentBubble::before{
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        top: auto;
        bottom: 22px;
        right: -20px;
    }
    #EXTRAORDINARY .contentList:nth-child(3) li:nth-child(2){
        margin: -10px 0 0 70px;
    }
    #EXTRAORDINARY .contentList:nth-child(3) li:nth-child(2) .contentBubble{
        bottom: 112px;
        right: -388px;
    }
    #EXTRAORDINARY .contentList:nth-child(3) li:nth-child(2) .contentBubble::before{
        -webkit-transform: rotate(-90deg) scale(-1, 1);
        transform: rotate(-90deg) scale(-1, 1);
        top: auto;
        bottom: 22px;
        left: -20px;
    }
}