@charset "utf-8";

/******************************************************************

京都観光LP (PC)用レイアウト

*****************************************************************/
body {
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ＭＳ Ｐゴシック', 'MS PGothic', 'Osaka', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    color: #000;
    position: relative;
    min-width: 980px;
}

@media screen and (max-width:980px) {
    body {
        font-size: 14px;
    }
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

.none {
    display: none;
}

@media screen and (min-width:981px) {
    .pcNone {
        display: none;
    }
}

/* リンク
******************************/
a {
    text-decoration: none;
    word-break: break-all;
    color: #e60012;
}

/* Google Fonts
******************************/
.kiwi-maru-regular {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
}

.kiwi-maru-medium {
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
    font-style: normal;
}

/* inner
******************************/
.inner {
    width: 980px;
    margin: auto;
}

@media screen and (max-width:980px) {
    .inner {
        width: 940px;
    }
}

/* frame
******************************/
.frame .inner {
    position: relative;
    padding: 50px 60px 60px;
}

.frame .inner::before,
.frame .inner::after,
.frame .wrap::before,
.frame .wrap::after {
    content: "";
    display: block;
    background: url("/clp/kyokanko/img/pic-line.svg") left top / contain no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;
}

.frame .inner::before {
    left: 0;
    top: 0;
}

.frame .inner::after {
    right: 0;
    top: 0;
    transform: rotate(90deg);
}

.frame .wrap::before {
    left: 0;
    bottom: 0;
    transform: rotate(-90deg);
}

.frame .wrap::after {
    right: 0;
    bottom: 0;
    transform: rotate(180deg);
}

/* btn
******************************/
.btnGroup {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.btnSearch01 {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #e60012;
    border-radius: 10px;
    position: relative;
    width: 300px;
    background: #fff;
    font-size: 20px;
    line-height: 1.3;
    margin: 40px;
    padding: 25px 30px 25px 40px;
    transition: .3s;
}

.btnSearch01:hover {
    color: #fff;
    background: #e60012;
    border-color: #fff;
}

.btnSearch01::before {
    content: "";
    border: 1px solid #e60012;
    position: absolute;
    left: 7px;
    right: 7px;
    top: 7px;
    bottom: 7px;
}

.btnSearch01:hover::before {
    border-color: #fff;
}

.btnSearch01::after {
    content: "";
    background: url("/clp/kyokanko/img/btn-arrow01.svg") center bottom / contain no-repeat;
    width: 20px;
    height: 10px;
    margin-left: 10px;
    flex-shrink: 0;
}

.btnSearch01:hover::after {
    background-image: url("/clp/kyokanko/img/btn-arrow01-w.svg");
}

.btnGroup.fixed {
    background: rgba(85, 85, 85, 0.6);
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 4;
}

@media screen and (max-width:980px) {
    .btnGroup.fixed {
        width: 980px;
    }
}

.btnGroup.fixed .btnSearch01 {
    margin: 15px 30px;
}

.btnGroup.fixed .btnSearch01::after {
    transform: rotate(180deg);
}

.upMove, .downMove {
    transition: all .1s;
    opacity: 1;
    visibility: visible;
}

@media (hover: none) {
    .btnSearch01:hover {
        color: #e60012;
        background: #fff;
        border: none;
    }

    .btnSearch01:hover::before {
        border-color: #e60012;
    }

    .btnSearch01:hover::after {
        background-image: url("/clp/kyokanko/img/btn-arrow01.svg");
    }
}

.btnSearch02 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #e60012;
    border: 1px solid #e60012;
    position: relative;
    border-radius: 5px;
    padding: 8px 30px 8px 40px;
    font-size: 18px;
    font-weight: 700;
    margin-top: 30px;
    transition: .3s;
}

.btnSearch02::after {
    content: "";
    background: url("/clp/kyokanko/img/btn-arrow02.svg") right center / contain no-repeat;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    flex-shrink: 0;
}

.btnSearch02:hover {
    color: #e60012;
    background: #fff;
}

.btnSearch02:hover::after {
    background: url("/clp/kyokanko/img/btn-arrow02-r.svg");
}

@media (hover: none) {
    .btnSearch02:hover {
        color: #fff;
        background: #e60012;
    }

    .btnSearch02:hover::after {
        background: url("/clp/kyokanko/img/btn-arrow02.svg");
    }
}

.wrapBtn {
    text-align: center;
}

/* fade
******************************/
.fadeBox {
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
    transform: translateY(150px);
    position: relative;
    z-index: 3;
}

.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/*-----------------------
header
-----------------------*/
header {
    position: relative;
    background: #fff;
    padding: 10px;
    z-index: 3;
}

h1 {
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 a {
    color: #000;
}

.logoWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.logoText {
    font-size: 12px;
    font-weight: 500;
}

.logoAidem {
    display: block;
    width: 176px;
    height: 30px;
    background: url("/clp/common/images/logo-aidem.png") center center / contain no-repeat;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.logoKyokanko {
    display: block;
    width: 250px;
    height: 50px;
    background: url("/clp/kyokanko/img/logo-kyokanko.png") center center / contain no-repeat;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.times {
    font-size: 30px;
    font-weight: 500;
    margin: 0 30px;
}

/*-----------------------
#main
-----------------------*/
#main {
    position: relative;
}

#kv.fade-in::before, #jobSearch.fade-in::before, #workingAttraction.fade-in::before, #newJobs.fade-in::before,
#kv.fade-out::before, #jobSearch.fade-out::before, #workingAttraction.fade-out::before, #newJobs.fade-out::before {
    content: "";
    display: block;
    background: url("/clp/kyokanko/img/pic-cloud01.svg") left top / contain no-repeat;
    width: 228px;
    height: 182px;
    position: fixed;
    left: 0;
    top: 160px;
    z-index: 2;
}

#kv.fade-in::before, #jobSearch.fade-in::before, #workingAttraction.fade-in::before, #newJobs.fade-in::before {
    animation: fadeInLeft .6s ease-In 0s 1 normal both;
}

#kv.fade-out::before, #jobSearch.fade-out::before, #workingAttraction.fade-out::before, #newJobs.fade-out::before {
    animation: fadeOutLeft .8s ease-In 0s 1 normal both;
}

#kv.fade-in::after, #jobSearch.fade-in::after, #workingAttraction.fade-in::after, #newJobs.fade-in::after,
#kv.fade-out::after, #jobSearch.fade-out::after, #workingAttraction.fade-out::after, #newJobs.fade-out::after {
    content: "";
    display: block;
    background: url("/clp/kyokanko/img/pic-cloud02.svg") right top / contain no-repeat;
    width: 270px;
    height: 190px;
    position: fixed;
    right: 0;
    top: 280px;
    z-index: 2;
}

#kv.fade-in::after, #jobSearch.fade-in::after, #workingAttraction.fade-in::after, #newJobs.fade-in::after {
    animation: fadeInRight 1s ease-In 0s 1 normal both;
}

#kv.fade-out::after, #jobSearch.fade-out::after, #workingAttraction.fade-out::after, #newJobs.fade-out::after {
    animation: fadeOutRight .8s ease-In 0s 1 normal both;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-228px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(270px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-228px);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(270px);
    }
}

/*-----------------------
 kv
-----------------------*/
#kv {
    background: url("/clp/kyokanko/img/bg-kv.png") left top;
    background-attachment: fixed;
    position: relative;
    padding-bottom: 5.208vw;
}

@media screen and (max-width:1440px) {
    #kv {
        padding-bottom: 1.042vw;
    }
}

.kvInner {
    background: url("/clp/kyokanko/img/ph-kv.png") center top / 1600px 800px no-repeat;
    position: relative;
    z-index: 3;
    padding-top: 10px;
}

.kvInner::after {
    content: "";
    display: block;
    background: url("/clp/kyokanko/img/pic-kv.png") center bottom / contain no-repeat;
    height: 500px;
    margin-top: -17.792vw;
    animation: picKv 1s ease-in-out 1.25s 1 normal both;
}

@keyframes picKv {
    from {
        opacity: 0;
        transform: translateY(200px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width:1280px) {
    .kvInner::after {
        background: url("/clp/kyokanko/img/pic-kv-tab.png") center bottom / contain no-repeat;
        height: 25.781vw;
        margin-top: -1vw;
    }
}

.kvInner h2 {
    width: 301px;
    height: 567px;
    background: url("/clp/kyokanko/img/pic-kvTittleBg.png") center center /contain no-repeat;
    margin: auto;
    color: #e60012;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: -.05em;
    position: relative;
}

.kvInner h2 .headerText01 {
    font-size: 32px;
    position: absolute;
    right: 22px;
    top: 72px;
    animation: kvTextFade .6s ease-In 0s 1 normal both;
}

.kvInner h2 .headerText01>span {
    font-size: 24px;
}

.kvInner h2 .headerText02 > span,
.kvInner h2 .headerText02 > img {
    display: block;
    width: 76px;
    height: 417px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.kvInner h2 .headerText02 > span{
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}


.kvInner h2 .headerText03 {
    font-size: 26px;
    position: absolute;
    left: 22px;
    top: 72px;
    animation: kvTextFade .6s ease-In 1.2s 1 normal both;
}

.kvInner h2 .headerText03>span {
    font-size: 22px;
}

@keyframes kvTextFade {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*-----------------------
 contents
-----------------------*/
#contents {
    width: 100%;
    margin: 0 auto;
}

#contents>section {
    position: relative;
}

#contents>section>div {
    padding: 220px 0 160px;
}

#contents>section#newJobs>div {
    padding-bottom: 80px;
}

#contents>section>div>section {
    margin-bottom: 60px;
}

#contents>section>div>section:last-child {
    margin-bottom: 0;
}

/*-----------------------
 jobSearch
-----------------------*/
#jobSearch {
    background: url("/clp/kyokanko/img/bg-washi.jpg") left top;
}

h3 {
    font-size: 28px;
    line-height: 1.3;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    background: url("/clp/kyokanko/img/bg-heading.png") center center / contain no-repeat;
    width: 298px;
    height: 291px;
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.headingSubText {
    display: block;
    font-size: 14px;
    margin-top: 15px;
}

/*-----------------------
 searchArea
-----------------------*/
h4 {
    font-size: 26px;
    line-height: 1.4;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #e60012;
    margin-bottom: 50px;
}

h4>.headingText {
    border-bottom: 1px solid #e60012;
    padding: 0 15px 15px;
}

/** mapArea **/
.mapArea {
    position: relative;
    padding-bottom: 100px;
}

.map {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.mapMouseOver {
    opacity: .5;
}

@media (hover: none) {
    .mapMouseOver {
        opacity: 1;
    }
}

.cls-1 {
    fill: #d9333f;
}

.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12 {
    stroke-width: 0px;
}

.cls-13 {
    font-family: KiwiMaru-Medium, 'Kiwi Maru';
    font-size: 16px;
    font-weight: 500;
}

.cls-2 {
    fill: #b44c97;
}

.cls-3 {
    fill: #00a497;
}

.cls-4 {
    fill: #2fc075;
}

.cls-5 {
    fill: #bb5520;
}

.cls-6 {
    fill: #acc902;
}

.cls-7 {
    fill: #f39800;
}

.cls-12 {
    fill: #fff;
}

.cls-14, .cls-15 {
    fill: none;
    stroke: #000;
    stroke-linejoin: round;
    stroke-width: 1.5px;
}

.cls-8 {
    fill: #59b9c6;
}

.cls-15 {
    stroke-linecap: round;
}

.cls-9 {
    fill: #e95464;
}

.cls-10 {
    fill: #d9a62e;
}

.cls-11 {
    fill: #4c6cb3;
}

.mapBtn a {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    min-width: 130px;
    padding: 6px 15px;
    border-radius: 5px;
    text-align: center;
    position: absolute;
}

.mapBtn a:before {
    content: "";
    display: inline-block;
    background: url("/clp/kyokanko/img/icon-loupe.svg") left top / contain no-repeat;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0 10px 2px 0;
}

.mapBtn .cls-1 {
    background: #d9333f;
    right: 110px;
    top: 140px;
}

.mapBtn .cls-2 {
    background: #b44c97;
    left: 60px;
    top: 360px;
}

.mapBtn .cls-3 {
    background: #00a497;
    right: 50px;
    top: 250px;
}

.mapBtn .cls-4 {
    background: #2fc075;
    left: 80px;
    top: 250px;
}

.mapBtn .cls-5 {
    background: #bb5520;
    left: 200px;
    top: 580px;
}

.mapBtn .cls-6 {
    background: #acc902;
    left: 120px;
    top: 30px;
}

.mapBtn .cls-7 {
    background: #f39800;
    right: 90px;
    top: 470px;
}

.mapBtn .cls-8 {
    background: #59b9c6;
    left: 100px;
    top: 470px;
}

.mapBtn .cls-9 {
    background: #e95464;
    left: 60px;
    top: 140px;
}

.mapBtn .cls-10 {
    background: #d9a62e;
    right: 80px;
    top: 30px;
}

.mapBtn .cls-11 {
    background: #4c6cb3;
    right: 60px;
    top: 360px;
}

.mapIllust {
    position: absolute;
    right: 0;
    bottom: 0;
}

/*-----------------------
 jobType
-----------------------*/
.jobTypeIllust {
    display: flex;
}

.jobTypeIllust li {
    background-color: #fff;
    width: 22.325%;
    margin-right: 3.566%;
    position: relative;
}

.jobTypeIllust li:last-child {
    margin-right: 0;
}

.jobTypeIllust li::before,
.jobTypeIllust li::after,
.jobTypeIllust li .wrapBox::before,
.jobTypeIllust li .wrapBox::after {
    content: "";
    display: block;
    background: url("/clp/kyokanko/img/pic-decoration.svg") center center / contain no-repeat;
    width: 30px;
    height: 20px;
    position: absolute;
}

.jobTypeIllust li::before {
    left: 5px;
    top: 5px;
}

.jobTypeIllust li::after {
    right: 5px;
    top: 5px;
}

.jobTypeIllust li .wrapBox::before {
    left: 5px;
    bottom: 5px;
}

.jobTypeIllust li .wrapBox::after {
    right: 5px;
    bottom: 5px;
}

.jobTypeIllust li a {
    display: block;
    padding: 40px 20px;
}

.jobTypeIllust li a:hover {
    background: #fde1e3;
    color: #e60012;
}

.jobTypeIllust li {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jobTypeIllust li img {
    display: block;
}

.jobTypeIllust li p {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    margin-top: 15px;
    min-height: 54px;
}

/*-----------------------
 workingAttraction
-----------------------*/
#workingAttraction {
    background: url("/clp/kyokanko/img/bg-wagara.jpg") left top;
    background-attachment: fixed;
}

.contentsBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.contentsBox>img {
    width: 41.860%;
}

.contentsBox>.textBox {
    width: 53.488%;
    text-align: center;
}

.contentsBox>.textBox>p {
    text-align: left;
}

#interaction .contentsBox>img {
    order: 2;
}

#interaction .contentsBox>.textBox {
    order: 1;
}

/*-----------------------
 newJobs
-----------------------*/
#newJobs {
    background: url("/clp/kyokanko/img/bg-washi.jpg") left top;
}

#newJobs ul {
    display: flex;
    flex-wrap: wrap;
}

#newJobs li {
    font-size: 15px;
    line-height: 1.5;
    background: #fff;
    width: 32%;
    margin: 2% 2% 0 0;
    box-sizing: border-box;
}

#newJobs li:nth-child(3n) {
    margin-right: 0;
}

#newJobs li:nth-child(-n+3) {
    margin-top: 0;
}

#newJobs li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 15px;
    color: #000;
}

#newJobs li a:hover {
    box-sizing: border-box;
    color: inherit;
    padding: 13px;
    border: 2px solid #e7ad56;
}

#newJobs img {
    display: block;
    margin: 0 auto 10px;
    max-width: 100%;
    height: auto;
}

.noJobs {
    background: #fff;
    text-align: center;
    padding: 15px;
    margin-top: 30px;
}

.companyName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.occupation {
    font-weight: bold;
    margin-top: 3px;
}

.wage {
    font-weight: bold;
    color: #ff6915;
    margin-top: 3px;
}

.workplace {
    font-weight: bold;
    margin-top: 3px;
}

.employment {
    background-color: #0ba063;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    padding: 5px;
    display: inline-block;
    margin-top: 5px;
}

/*-----------------------
 hatarakuNavi
-----------------------*/
#hatarakuNavi {
    padding: 80px 0 200px;
    background: #fff;
    position: relative;
    z-index: 1;
}

#hatarakuNavi>p {
    font-size: 22px;
    text-align: center;
}

#hatarakuNavi>a {
    display: block;
    max-width: 830px;
    margin: 30px auto 0;
}

#hatarakuNavi>a:hover {
    opacity: .6;
}

@media (hover: none) {
    #hatarakuNavi>a:hover {
        opacity: 1;
    }
}

/*-----------------------
 pageTop
-----------------------*/
.pageTop {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
    background: url("/clp/kyokanko/img/bg-heading.png") center center / contain no-repeat;
    width: 136px;
    height: 132px;
    padding-bottom: 5px;
    z-index: 5;
    transition: .3s;
}

.pageTop:before {
    content: "";
    display: block;
    background: url("/clp/kyokanko/img/btn-arrow01-w.svg") center top /contain no-repeat;
    width: 18px;
    height: 10px;
    transform: rotate(180deg);
    margin-bottom: 5px;
}

.pageTop:hover {
    opacity: .6;
}

@media (hover: none) {
    .pageTop:hover {
        opacity: 1;
    }
}

/*-----------------------
footer
-----------------------*/
footer {
    background: #555;
}

footer p {
    font-size: 12px;
    text-align: center;
    color: #fff;
    padding: 10px 0;
}

footer p a {
    color: #fff;
}