@charset "UTF-8";
#blueBox {
    background-color: #35b6cc;
    padding: 7% 0;
}

#blueBox .inner {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
}


/*================================================
 * 大阪飲食健全協会組合とは
 ================================================*/

#about_top {
    background: url(/images/about/about_top.jpg) no-repeat top center;
    background-size: 160% auto;
    padding-top: 38%;
    margin-bottom: 8%;
}

.aboutBox {
    background-color: #35b6cc;
    padding: 0 0 5% 0;
}

#aboutBox1,
#aboutBox3 {
    background-color: #35b6cc;
}

#aboutBox1 img,
#aboutBox3 img {
    float: right;
    padding: 0 0 1.5% 1.5%;
    width: 34%;
    height: auto;
}

#aboutBox2 {
    padding: 5% 0 5% 0;
}

#aboutBox2 img {
    float: left;
    padding: 1% 1% 0 0;
    width: 34%;
    height: auto;
}

#aboutBox2 dl {
    text-align: right;
}

#aboutBox2 dl dd span {
    color: #35b6cc;
}

#ruleBox dl {
    width: 96%;
}

.aboutBox dl dt,
#aboutBox2 dl dt,
#ruleBox dl dt {
    padding: 5% 34% 2% 0;
    font-size: 1.3em;
    line-height: 1.2em;
    font-weight: bold;
}

.aboutBox dl dd,
#ruleBox dl dd {
    color: #FFF;
    padding: 0 2% 0 0;
    font-size: 1m;
    line-height: 1.5em;
    text-shadow: #35b6cc 2px 0px, #35b6cc -2px 0px, #35b6cc 0px -2px, #35b6cc 0px 2px, #35b6cc 2px 2px, #35b6cc -2px 2px, #35b6cc 2px -2px, #35b6cc -2px -2px, #35b6cc 1px 2px, #35b6cc -1px 2px, #35b6cc 1px -2px, #35b6cc -1px -2px, #35b6cc 2px 1px, #35b6cc -2px 1px, #35b6cc 2px -1px, #35b6cc -2px -1px;
}

#about_boder {
    display: inline-block;
    border: #35b6cc 1px solid;
    margin: 2%;
    padding: 2% 4% 2% 4%;
    text-align: left;
}

.ca-menu {
    padding: 0;
    margin: 6% auto;
    width: 100%;
}

.ca-menu li {
    width: 100%;
    height: 76px;
    overflow: hidden;
    display: block;
    background: #35b6cc;
    margin: 5% 0;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.ca-menu li:last-child {
    margin-bottom: 0px;
}

.ca-menu li a {
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position: relative;
}

.ca-icon {
    position: absolute;
    top: 13px;
    right: 0;
    text-align: center;
}

.ca-icon img {
    width: 70%;
    height: auto;
}

.ca-content {
    position: absolute;
    left: 10px;
    width: 80%;
    top: 25%;
}

.ca-main {
    font-size: 1.1em;
    line-height: 1em;
    margin: 10px auto;
}

#enquete_top {
    background: url(/images/enquete/top.jpg) no-repeat top center;
    background-size: 160% auto;
    padding-top: 38%;
    margin-bottom: 8%;
}

#enqueteBox {
    background: url(/images/enquete/titlebg.png) no-repeat top center;
    background-size: 100% auto;
    background-color: #35b6cc;
    padding: 28% 0 5% 0;
    text-align: center;
}

#trouble_top {
    background: url(/images/trouble/top.jpg) no-repeat top center;
    background-size: 160% auto;
    padding-top: 38%;
    margin-bottom: 8%;
}

#troubleBox {
    background: url(/images/trouble/titlebg.png) no-repeat top center;
    background-size: 100% auto;
    background-color: #35b6cc;
    padding: 28% 0 5% 0;
    text-align: center;
}

#media_top {
    background: url(/images/media/top.jpg) no-repeat top center;
    background-size: 160% auto;
    padding-top: 38%;
    margin-bottom: 8%;
}

#mediaBox {
    background: url(/images/media/titlebg.png) no-repeat top center;
    background-size: 100% auto;
    background-color: #35b6cc;
    padding: 28% 0 5% 0;
    text-align: center;
}


/*================================================
 *  フォーム
 ================================================*/

#form_top {
    background: url(/images/form/form_top.jpg) no-repeat top center;
    background-size: 160% auto;
    padding-top: 38%;
    margin-bottom: 8%;
}

#formBox {
    background: url(/images/form/form_titlebg.png) no-repeat top center;
    background-size: 100% auto;
    background-color: #35b6cc;
    padding: 28% 0 5% 0;
    text-align: center;
}

#formBox dl dt {
    padding: 0 0 20px 0;
    font-size: 1.5em;
    font-weight: bold;
}

#formBox dl dd {
    color: #FFF;
    padding: 0 0 20px 0;
    font-size: 1.2em;
    line-height: 2em;
}


/*================================================
 *  組合の活動
 ================================================*/

#performance_top {
    background: url(/images/performance/performance_top.jpg) no-repeat top center;
    background-size: 160% auto;
    padding-top: 38%;
    margin-bottom: 8%;
}

.perforBox {
    background-color: #FFF;
    width: 47%;
    margin: 1.5%;
}

.perforBox img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    /* この一行を追加するだけ！ 画像高さ揃える */
}

.perforBox dl {
    padding: 8px;
}

.perforBox dl dt {
    font-size: 1.3em;
    line-height: 1.1em;
    font-weight: bold;
    margin-bottom: 30px;
}

.perforBox a dl dt {
    color: #000;
}

.perforBox dl dd {
    font-size: 0.8em;
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.lum-lightbox-inner img {
    width: auto !important;
    max-height: 80vh !important;
}

.lum-gallery-button {
    display: none !important;
}


/*================================================
 *  組合理事会
 ================================================*/

#list_top {
    background: url(/images/list/list_top.jpg) no-repeat top center;
    background-size: 160% auto;
    padding-top: 38%;
    margin-bottom: 8%;
}

#listBox1 {
    background: url(/images/list/list_titlebg.png) no-repeat top left;
    background-color: #35b6cc;
    background-size: 60% auto;
}

#listBox1 img,
#listBox3 img {
    float: right;
    width: 40%;
    height: auto;
    padding: 0 0 1% 1%;
}

#listBox1 .inner,
#listBox3 .inner {
    padding: 15% 0 0 0;
    height: auto;
    /*div高さ*/
    position: relative;
    /*相対位置に配置するように調整*/
}

#listBox2 {
    background: url(/images/list/list_titlebg.png) no-repeat top right;
    background-color: #66cc6d;
    background-size: 60% auto;
}

#listBox2 .inner {
    padding: 15% 0 0 0;
    position: relative;
    /*相対位置に配置するように調整*/
    text-align: right;
}

#listBox2 img {
    float: left;
    width: 40%;
    height: auto;
    padding: 0 1% 1% 0;
}

#listBox3 {
    background: url(/images/list/list_titlebg.png) no-repeat top left;
    background-color: #35b6cc;
    background-size: 60% auto;
    margin-bottom: 5%;
}

.listBox {
    clear: both;
}

.listBox dl dt,
#aboutBox2 dl dt {
    padding: 0 0 2% 0;
    font-size: 1.3em;
    font-weight: bold;
}

.listBox dl dd {
    color: #FFF;
    padding: 0 0 5% 0;
    font-size: 1m;
    line-height: 1.3em;
}


/*================================================
 * 組合訓示
 ================================================*/

#rule_top {
    background: url(/images/rule/rule_top.jpg) no-repeat top center;
    background-size: 160% auto;
    padding-top: 38%;
    margin-bottom: 8%;
}

#ruleBox {
    background: url(/sp_img/rule/sp_rule_bg.jpg) no-repeat top center;
    background-size: 100% auto;
    background-color: #35b6cc;
}

#ruleBox .inner {
    background: url(/images/rule/rule_titlebg.png) no-repeat top left;
    background-size: 100% auto;
    padding: 20% 0 7% 3%;
}


/*================================================
 *  メリット
 ================================================*/

#merit dl {
    padding: 60% 2% 2% 4%;
}

#merit .cnt2 dl {
    padding: 30% 2% 2% 4%;
}

#merit dl dt {
    padding: 0 0 2% 0;
    font-size: 1.3em;
    line-height: 1.2em;
    font-weight: bold;
}

#merit dl dd {
    color: #FFF;
    padding: 0 0 20px 0;
    font-size: 1m;
    line-height: 1.5em;
}

#merit .cnt1 {
    width: 100%;
    max-width: 1600px;
    display: flex;
}

#merit .cnt2 {
    width: 100%;
    max-width: 1600px;
    display: flex;
    margin-bottom: 8%;
}

#merit .cnt1 .image-box,
#merit .cnt2 .image-box {
    width: 100%;
    max-width: 1100px;
    order: 0;
    display: flex;
}

.image-box .in1 .bg {
    width: 100%;
    height: 100%;
    background: url(/images/rule/merit_bg1.png) no-repeat top center;
    display: block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.image-box .in2 .bg {
    width: 100%;
    height: 100%;
    background: url(/images/rule/merit_bg2.png) no-repeat top center;
    display: block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.image-box .in3 .bg {
    width: 100%;
    height: 100%;
    background: url(/images/rule/merit_bg3.png) no-repeat top center;
    display: block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.image-box .in4 .bg {
    width: 100%;
    height: 100%;
    background: url(/sp_img/rule/sp_merit_bg4.png) no-repeat top center;
    display: block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.image-box .in5 .bg {
    width: 100%;
    height: 100%;
    background: url(/sp_img/rule/sp_merit_bg5.png) no-repeat top center;
    display: block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.image-box .in6 .bg {
    width: 100%;
    height: 100%;
    background: url(/sp_img/rule/sp_merit_bg6.png) no-repeat top center;
    display: block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.image-box .in7 .bg {
    width: 100%;
    height: 100%;
    background: url(/sp_img/rule/sp_merit_bg7.png) no-repeat top center;
    display: block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/*SCROLL EFFECT*/

.effect .ac {
    position: relative;
    overflow: hidden;
}

.effect .ac .bg {
    opacity: 0;
    -webkit-animation: fadein-bg 3s 1 ease forwards;
    animation: fadein-bg 3s 1 ease forwards;
}

.effect .ac:after {
    content: "";
    display: block;
    background: #212736;
    z-index: 2;
    width: 0%;
    height: 120%;
    left: -10%;
    top: 0;
    position: absolute;
    -webkit-transform: skewX(15deg);
    transform: skewX(15deg);
    -webkit-animation: fadein0 3s 1 ease forwards;
    animation: fadein0 3s 1 ease forwards;
}

.effect .ac:before {
    content: "";
    display: block;
    background: #fff;
    z-index: 1;
    width: 130%;
    height: 120%;
    left: -10%;
    top: 0;
    position: absolute;
    -webkit-transform: skewX(15deg);
    transform: skewX(15deg);
    -webkit-animation: fadein1 2s 1 ease forwards;
    animation: fadein1 2s 1 ease forwards;
}

.effect .ac.bg-ny:before {
    background: #212736 !important;
}

.effect .ac.bg-ny p {
    color: #212736;
    -webkit-animation: fadein-ny 3s 1 ease forwards;
    animation: fadein-ny 3s 1 ease forwards;
}

@keyframes fadein-bg {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadein-bg {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadein0 {
    0% {
        width: 0%;
        left: -12.5%;
        opacity: 1;
    }
    30% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    60% {
        width: 130%;
        left: 130%;
        opacity: 1;
    }
    100% {
        width: 130%;
        left: 130%;
        opacity: 0;
    }
}

@-webkit-keyframes fadein0 {
    0% {
        width: 0%;
        left: -12.5%;
        opacity: 1;
    }
    30% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    60% {
        width: 130%;
        left: 130%;
        opacity: 1;
    }
    100% {
        width: 130%;
        left: 130%;
        opacity: 0;
    }
}

@keyframes fadein1 {
    0% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    30% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    60% {
        width: 130%;
        left: 130%;
        opacity: 1;
    }
    100% {
        width: 130%;
        left: 130%;
        opacity: 0;
    }
}

@-webkit-keyframes fadein1 {
    0% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    30% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    60% {
        width: 130%;
        left: 130%;
        opacity: 1;
    }
    100% {
        width: 130%;
        left: 130%;
        opacity: 0;
    }
}

@keyframes fadein1 {
    0% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    30% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    60% {
        width: 130%;
        left: 130%;
        opacity: 1;
    }
    100% {
        width: 130%;
        left: 130%;
        opacity: 0;
    }
}

@-webkit-keyframes fadein1 {
    0% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    30% {
        width: 130%;
        left: -12.5%;
        opacity: 1;
    }
    60% {
        width: 130%;
        left: 130%;
        opacity: 1;
    }
    100% {
        width: 130%;
        left: 130%;
        opacity: 0;
    }
}

@keyframes fadein-ny {
    0% {
        color: #212736;
    }
    30% {
        color: #212736;
    }
    60% {
        color: #fff;
    }
    100% {
        color: #fff;
    }
}

@-webkit-keyframes fadein-ny {
    0% {
        color: #212736;
    }
    30% {
        color: #212736;
    }
    60% {
        color: #fff;
    }
    100% {
        color: #fff;
    }
}