/********************************************************************************************
    ファイル名： applicationa7c4.css
    概要      ： 汎用css
    作成      : 2021/02/10
    ver       : v00.00.01
********************************************************************************************/
footer, header, section {
    display: block
}

[hidden] {
    display: none
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    margin: 0
}

a:focus {
    outline: thin dotted
}

a:active, a:hover {
    outline: 0
}

h1 {
    font-size: 2em
}

b {
    font-weight: bold
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}


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

*, *:focus {
    outline: none
}

html, body {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    background-color: #ffcedb
}

html {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

body {
    position: fixed;
    overflow: hidden;
    line-height: 1.5;
    font-size: 18px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: #665433;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: auto
}

@media (max-width: 750px) {
    body {
        font-size: 18px
    }
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0
}

img {
    display: block;
    width: 100%
}

a {
    text-decoration: none;
    color: inherit
}

a img {
    border: none
}

a:focus {
    outline: none
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

hr {
    margin: 0;
    border: none
}

main {
    display: block;
    position: relative;
    z-index: 1;
}

::-moz-selection {
    background: #F0A28F;
    color: #fff
}

::selection {
    background: #F0A28F;
    color: #fff
}

::-moz-selection {
    background: #F0A28F;
    color: #fff
}

.clImgCover {
    background-size: cover;
    background-position: center center
}

.clHeaderNavContainer {
    display: block
}

.clHeaderNavOverlay {
    display: block
}

.clHeader {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 60px);
    height: 66px;
    top: 20px;
    right: 30px;
    padding: 0 35px;
    border-radius: 33px;
    z-index: 100
}

@media (max-width: 750px) {
    .clHeader {
        width: calc(100% - 10px);
        height: 52px;
        top: 10px;
        right: 0;
        padding: 0 0 0 35px;
        border-radius: 26px 0 0 26px;
        background-color: #fffaf0
    }
}

@media (min-width: 751px) {
    .clHeaderLogo {
        opacity: 0;
        transition: opacity .3s;
        pointer-events: none
    }
}

@media (min-width: 751px) {
     {
        width: 550px;
        transition: all .5s .2s
    }
}

.clHeaderLogo {
    position: relative;
    display:flex;
    justfy-content: center;
    align-items:center;
    width: 200px;
    height: 50px;
    margin-left: -10px;
    z-index: 5;
    opacity: 1
}

@media (min-width: 751px) {
    .clHeaderLogo {
        transition: opacity .3s .4s
    }
}

@media (max-width: 750px) {
    .clHeaderLogo {
        margin-left: -20px
    }
}

.clHeaderMenuList {
    display: flex
}

@media (max-width: 750px) {
    .clHeaderMenuList {
        display: none
    }
}

@media (min-width: 751px) {
    .clHeaderMenuList::before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        border-radius: 35px;
        background-color: #fffaf0;
        transition: all .5s
    }
}

.clHeaderMenuItem + .clHeaderMenuItem {
    margin-left: 25px
}

@media (min-width: 751px) {
    .clHeaderMenuItem:hover .clHeaderMenuLink {
        color: #ff6fb7;
        transition: color .5s
    }
}

.clHeaderMenuLink {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #ffa4bc;
    line-height: 66px;
    transition: color .5s
}

@media (max-width: 992px){
    .clHeaderMenuLink {
        font-size: 1.6vw;
    }
    .clHeaderMenuItem + .clHeaderMenuItem {
        margin-left: 15px
    }
}

.clHeaderNav {
    position: relative;
    width: 52px;
    height: 52px;
    z-index: 5
}

@media (min-width: 751px) {
    .clHeaderNav {
        display: none
    }
}

.clHeaderNavTrigger {
    width: 100%;
    height: 100%
}

.clHeaderNavTrigger.close .clHeaderNavLine:nth-child(1) {
    transform: translate(0, 0) rotate(-45deg)
}

.clHeaderNavTrigger.close .clHeaderNavLine:nth-child(2) {
    transform: translate(0, 0) scale(0, 1)
}

.clHeaderNavTrigger.close .clHeaderNavLine:nth-child(3) {
    transform: translate(0, 0) rotate(45deg)
}

.clHeaderNavLine {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 20px;
    height: 2px;
    background-color: #ffa4bc
}

.clHeaderNavLine:nth-child(1) {
    transform: translate(0, -6px)
}

.clHeaderNavLine:nth-child(2) {
    transform: translate(0, 0)
}

.clHeaderNavLine:nth-child(3) {
    transform: translate(0, 6px)
}

.clHeaderNavContainer {
    display: none;
    position: fixed;
    z-index: 99;
    width: calc(100% - 10px);
    top: 10px;
    right: 0;
    padding: 55px 0 15px 20px;
    border-radius: 26px 0 0 26px;
    overflow: hidden
}

.clHeaderNavContainer.clSlideEnter .clHeaderNavContainerBg, .l-header-nav_container.clSlideLeaveTo .clHeaderNavContainerBg {
    transform: translateY(-100%)
}

.clHeaderNavContainer.clSlideEnter .clHeaderNavList, .l-header-nav_container.clSlideLeaveTo .clHeaderNavList {
    opacity: 0;
    transform: translateY(-5px)
}

.clHeaderNavContainerBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: top center;
    background-color: #fffaf0;
    border-radius: 26px 0 0 26px
}

.clHeaderNavList {
    position: relative
}

.clHeaderNavItem {
    width: 100%;
    height: 44px
}

.clHeaderNavItem + .clHeaderNavItem {
    border-top: 1px solid rgba(255, 164, 188, 0.2)
}

.clHeaderNavLink {
    display: flex;
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 44px;
    color: #ffa4bc
}

.clHeaderNavLink span {
    font-size: 14px;
    margin-left: 15px;
    color: rgba(255, 164, 188, 0.7)
}

.clHeaderNavOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 98
}

.clFooter {
    position: relative;
    z-index: 2;
    height: 400px;
    background-color: #e94c89;
    overflow: hidden;
}

@media (max-width: 992px) {
    .clFooter {
        height: 300px;
    }
}

#idFooterTable{
    position: absolute;
    top: 60%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    z-index: 20;
}

#idFooterTable tr{
    width: 100%;
    
}

#idFooterTable td{
    width: 25%;
    min-width: 95px;
    vertical-align: middle;
    text-align: center;
}

#idFooterTable img{
    width: 100%;
    
}
    
.clFooterContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.clFooterContact {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #fff;
    letter-spacing: 2px
}

@media (max-width: 750px) {
    .clFooterContact {
        font-size: 20px;
        letter-spacing: 1px
    }
}

@media (min-width: 751px) {
    .clFooterContact {
        transition: all .5s
    }
    .clFooterContact:hover {
        opacity: .8;
        letter-spacing: 3px;
        transition: all .5s
    }
}

.clFooterShare {
    display: flex;
    align-items: center
}

.clFooterShareHeading {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    letter-spacing: 2px;
    margin-right: 30px;
    opacity: .7
}

@media (max-width: 750px) {
    .clFooterShareHeading {
        font-size: 12px;
        letter-spacing: 1px;
        margin-right: 20px
    }
}

.clFooterShareList {
    display: flex;
}

.clFooterCopyright {
    text-align: right;
    font-size: 18px;
    width: 180px;
    position: absolute;
    bottom: 0;
    right: -50px;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    z-index: 10;
    color: #c5004d;
}

.clFooterCopyright img{
    float: left;
    width: 30px;
    vertical-align: middle;
    transform: translateY(-10px);
    
}

.clFooterCopyrightBack{
    background-color: #ffbed7;
    position: absolute;
}
    
@media (max-width: 750px) {
    .clFooterCopyright {
        font-size: 14px;
    }
}

#idFooterTable .clButtonAction{
    background-color: #ffa4bc;
}

/***PC***/
@media (min-width: 992px) {
    #idFooterTable{
        width: 60%;
        max-width: 540px;
        left: 30%;
            z-index: 3;
    }
    
    .clFooterCopyrightBack{
        width: 310px;
        height: 310px;
        right: -30px;
        bottom: -160px;
        border-radius: 150px;
    }
    
    #idFooterTable .clButtonAction{
        padding: 12% 20px 12% 10px;
        max-height: 66px;
        height: 5.5vw;
    }
        
}

/***タブレット***/
@media (max-width: 991px) {
    #idFooterTable{
        width: 50%;
        left: 30%;
    }
    .clFooterCopyright {
        right: -65px;
    }
    .clFooterCopyrightBack{
        width: 300px;
        height: 300px;
        right: -50px;
        bottom: -160px;
        border-radius: 150px;
    }
    
    #idFooterTable .clButtonAction{
        padding: 11% 20px 12% 10px;
        max-height: 60px;
        height: 6vw;
    }
}

/***スマホ***/
@media (max-width: 750px) {
    #idFooterTable{
        width: 20%;
        left: 100px;
    }
    .clFooterCopyrightBack{
        width: 200px;
        height: 200px;
        right: -20px;
        bottom: -95px;
        border-radius: 100px;
    }
    .clFooterCopyright{
        width: 150px;
        text-align: right;
        position: absolute;
        bottom: -20px;
        right: -65px;
        transform: translateY(-50%) translateX(-50%);
        -webkit- transform: translateY(-50%) translateX(-50%);
        z-index: 10;
        color: #c5004d;
    }
    
    #idFooterTable .clButtonAction{
        padding: 7.5% 20px 12% 10px;
        max-height: 50px;
        min-height: 35px;
        height: 6.5vw;
    }
}

#idBarbaWrapper {
    position: relative;
    z-index: 2
}

.clBg {
    position: fixed;
    z-index: 0;
}

.clBgItem {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.1)
}

.clBgItem:nth-child(1) {
    top: 0;
    right: -25vw;
    width: 40vw;
    height: 100vh;
    transform: skew(50deg)
}

@media (max-width: 992px) {
    .clBgItem:nth-child(1) {
        right: -80vw;
        width: 60vw;
        height: 100vh
    }
}

@media (max-width: 750px) {
    .clBgItem:nth-child(1) {
        right: -90vw;
        width: 80vw;
        transform: skew(45deg)
    }
}

.clBgItem:nth-child(2) {
    bottom: -10vw;
    left: -10vw;
    width: 45vw;
    height: 45vw;
    border-radius: 50%
}

@media (max-width: 992px) {
    .clBgItem:nth-child(2) {
        width: 60vw;
        height: 60vw
    }
}

@media (max-width: 750px) {
    .clBgItem:nth-child(2) {
        width: 80vw;
        height: 80vw
    }
}

.clContainer {
    position: relative;
    max-width: 1600px;
    padding: 0 100px;
    margin: 200px auto 150px;
    z-index: 5;
}

.clContainer #idIndexNewsMore{
    position: absolute;
    bottom: -75px;
    right: 50px;
    border: none;
    font-size: 20px;
}

@media (max-width: 992px) {
    .clContainer {
        padding: 0 50px
    }
}

@media (max-width: 750px) {
    .clContainer {
        padding: 0 25px;
        margin: 90px auto 70px
    }
}

.clContainerSection {
    max-width: 1600px;
    padding: 0 100px;
    margin: 0 auto 120px
}

#idPartnerTable{
    width: 100%;
    max-width: 1200px;
    height: auto;
}

.clPartnerItem{
    position: relative;
    display: inline-block;
    width: 21%;
    padding-top: 21%;
    margin: 1%;
}

@media (max-width: 992px) {
    .clPartnerItem{
        width: 28%;
        padding-top: 28%;
        margin: 2%;
    }
}

@media (max-width: 750px) {
    .clPartnerItem{
        width: 60%;
        margin: 2%;
        padding-top: 60%;
    }
}

.clPatnerCellBg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    z-index: 0;
}

.clCardPartnerLink{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    border-radius: 50%;
    z-index: 5;
}


@media (max-width: 992px) {
    .clContainerSection {
        padding: 0 50px;
        margin: 0 auto 100px
    }
}

@media (max-width: 750px) {
    .clContainerSection {
        padding: 0 25px;
        margin: 0 auto 70px
    }
}

.clHeadingContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px
}

@media (max-width: 1200px) {
    .clHeadingContainer {
        margin-bottom: 40px
    }
}

@media (max-width: 750px) {
    .clHeadingContainer {
        margin-bottom: 30px
    }
}

.clHeading {
    z-index: 2;
}

.clGreeting .clHeading{
    filter:drop-shadow(0px 0px 8px #000000);
}

.clHeadingEn {
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 70px;
    line-height: 1;
    letter-spacing: 20px;
    color: #fff
}

.clIndexProductLineDetail .clHeadingEn{
    font-size: 39px;
    letter-spacing: 6px;
}

@media (max-width: 992px) {
    .clHeadingEn {
        font-size: 60px;
        letter-spacing: 10px
    }
}

@media (max-width: 750px) {
    .clHeadingEn {
        font-size: 10vw;
        letter-spacing: 6px
    }
}

.clHeadingJp {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    letter-spacing: 5px;
    margin-top: 10px
}

@media (max-width: 750px) {
    .clHeadingJp {
        font-size: 15px;
        letter-spacing: 1px
    }
}

.clHeadingSub {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 10px;
    color: #fff
}

@media (max-width: 750px) {
    .clHeadingSub {
        font-size: 22px;
        letter-spacing: 5px
    }
}

.clButton {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    line-height: 60px;
    padding: 0 42px;
    background-color: #ffa4bc;
    border-radius: 50px;
    box-shadow: 5px 10px 15px #ff8db9, -5px -10px 15px rgba(255, 164, 188, 0.2);
}

@media (max-width: 750px) {
    .clButton {
        font-size: 12px;
        line-height: 50px;
        padding: 0 5vw
    }
}

@media (min-width: 751px) {
    .clButton {
        transition: box-shadow .5s
    }
    .clButton:hover {
        transition: box-shadow .5s;
        box-shadow: 5px 5px 12px #ff8db9, -5px -5px 15px rgba(255, 164, 188, 0.2)
    }
}

@media (min-width: 751px) {
    .clButtonBack:hover {
        letter-spacing: 3px;
        transition: all .5s
    }
}

.clButtonBack::before {
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: calc(50% - 9px);
    left: 0;
    background: url("../images/shared/icon-arrow.svg") center center no-repeat;
    background-size: contain
}

@media (max-width: 750px) {
    .clButtonBack::before {
        width: 16px;
        height: 16px;
        top: calc(50% - 8px)
    }
}

.clButtonActionMask {
    overflow: hidden;
    width: 100%
}

.clButtonAction {
    position: relative;
    display: block;
    width: calc(100% + 20px);
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    line-height: 25px;
    padding: 10px 20px 10px 10px;
    background-color: #e94c89
}

@media (max-width: 750px) {
    .clButtonAction {
        width: 100%;
        font-size: 15px;
        line-height: 25px;
        padding-right: 0;
    }
}

.clButtonAction {
    transition: transform .5s;
}

.clButtonAction:hover {
    transform: translateX(-80px);
    transition: transform .5s;
}

.clButtonAction::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 80px 20px;
    border-color: transparent transparent #463b3f  transparent;
    z-index: 2;
}

.clGoHp {
    margin-bottom: 5px;
}

@media (max-width: 750px) {
    .clButtonAction::before {
        display: none;
    }
}

.clButtonAction::after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 100%;
    top: 0;
    right: -60px;
    background: #463b3f url("../images/icon/icon-arrow-right.svg") center left 10px no-repeat;
    background-size: 30px 30px
}

@media (max-width: 750px) {
    .clButtonAction::after {
        display: none
    }
}

.clButtonAction.clTypeDark {
    background-color: #e94c89
}

.clHeadingEn {
    letter-spacing: 20px;
    transition: all 1s
}

@media (max-width: 992px) {
    .clHeadingEn {
        letter-spacing: 10px
    }
}

@media (max-width: 750px) {
    .clHeadingEn {
        letter-spacing: 6px
    }
}

.clHeadingSub {
    letter-spacing: 10px;
    transition: all 1s
}

@media (max-width: 750px) {
    .clHeadingSub {
        letter-spacing: 5px
    }
}

.clCardServiceList, .clCardCompanyList {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 -70px
}

@media (max-width: 1200px) {
    .clCardServiceList, .clCardCompanyList {
        margin: 0 0 0 -30px
    }
}

@media (max-width: 992px) {
    .clCardServiceList, .clCardCompanyList {
        margin: 0
    }
}

.clCardServiceItem, .clCardCompanyItem {
    position: relative;
    width: calc(50% - 70px);
    margin-left: 70px;
    background-color: #fffaf0
}

@media (max-width: 1200px) {
    .clCardServiceItem, .clCardCompanyItem {
        width: calc(50% - 30px);
        margin-left: 30px
    }
}

@media (max-width: 992px) {
    .clCardServiceItem, .clCardCompanyItem {
        width: 100%;
        margin-left: 0
    }
}

@media (min-width: 751px) {
    .clCardServiceItem:hover .clCardServiceImg, .clCardCompanyItem:hover .clCardCompanyImg {
        transform: scale(1.1);
        transition: transform 1s
    }
}

.clCardServiceItem.clNew::before, .c-card-company_item.clNew::before {
    content: "NEW";
    display: block;
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 300px;
    right: 20px;
    text-align: center;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 80px;
    letter-spacing: 2px;
    color: #fff;
    background-color: #F0A28F;
    pointer-events: none;
    z-index: 5
}

@media (max-width: 1200px) {
    .clCardServiceItem.clNew::before, .c-card-company_item.clNew::before {
        width: 60px;
        height: 60px;
        top: 230px;
        font-size: 16px;
        line-height: 60px
    }
}

@media (max-width: 992px) {
    .clCardServiceItem.clNew::before, .c-card-company_item.clNew::before {
        width: 50px;
        height: 50px;
        top: calc(60vw - 60px);
        right: 15px;
        font-size: 12px;
        line-height: 50px;
        letter-spacing: 1px
    }
}

@media (max-width: 992px) {
    .clCardServiceItem + .clCardServiceItem, .clCardCompanyItem + .clCardCompanyItem {
        margin-top: 20px
    }
}

.clCardServiceItem + .clCardServiceItem + .clCardServiceItem, .clCardCompanyItem + .clCardCompanyItem + .clCardCompanyItem {
    margin-top: 70px
}

@media (max-width: 1200px) {
    .clCardServiceItem + .clCardServiceItem + .clCardServiceItem, .clCardCompanyItem + .clCardCompanyItem + .clCardCompanyItem {
        margin-top: 30px
    }
}

@media (max-width: 992px) {
    .clCardServiceItem + .clCardServiceItem + .clCardServiceItem, .clCardCompanyItem + .clCardCompanyItem + .clCardCompanyItem {
        margin-top: 20px
    }
}

.clCardServiceCatch, .clCardCompanyCatch {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 390px
}

@media (max-width: 1200px) {
    .clCardServiceCatch, .clCardCompanyCatch {
        height: 300px
    }
}

@media (max-width: 992px) {
    .clCardServiceCatch, .clCardCompanyCatch {
        height: 60vw
    }
}

.clCardServiceCatch::before, .clCardCompanyCatch::before {
    content: "";
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0;
    border-style: solid;
    border-width: 0 0 55px 50vw;
    border-color: transparent transparent #fffaf0 transparent;
    z-index: 2
}

@media (max-width: 992px) {
    .clCardServiceCatch::before, .clCardCompanyCatch::before {
        border-width: 0 0 55px calc(100vw - 50px)
    }
}

@media (max-width: 750px) {
    .clCardServiceCatch::before, .clCardCompanyCatch::before {
        border-width: 0 0 55px calc(100vw - 20px)
    }
}

.clCardServiceImg, .clCardCompanyImg {
    width: 100%;
    height: 100%;
    transition: transform 1s
}

.clCardServiceImg img, .clCardCompanyImg img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.clCardServiceDetail, .clCardCompanyDetail {
    padding: 10px 30px 20px
}

@media (max-width: 1200px) {
    .clCardServiceDetail, .clCardCompanyDetail {
        padding: 0px 30px 20px
    }
}

@media (max-width: 750px) {
    .clCardServiceDetail, .clCardCompanyDetail {
        padding: 10px 20px 20px
    }
}

.clCardServiceTitle, .clCardCompanyTitle {
    position: relative;
    min-height: 170px;
    margin-bottom: 10px;
    width: 100%;
    height: 16vh;
}

.clCardServiceTitleText, .clCardCompanyTitleText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.4;
    width: 100%;
}

@media (max-width: 750px) {
    .clCardServiceTitle {
        min-height: 50px;
        font-size: 20px;
    }
}

@media (min-width: 1300px) {
    .clCardServiceTitleText, .clCardCompanyTitleText {
        font-size: 28px;
    }
}

@media (max-width: 990px) {
    .clCardServiceTitleText, .clCardCompanyTitleText {
        font-size: 4.5vmin;
    }
}

@media (max-width: 750px) {
    .clCardServiceTitleText, .clCardCompanyTitleText {
        font-size: 24px;
    }
}


.clCardServiceText p, .clCardCompanyDesc p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 2
}

@media (max-width: 1200px) {
    .clCardServiceText p, .clCardCompanyDesc p {
        font-size: 14px;
        line-height: 1.8
    }
}

@media (max-width: 750px) {
    .clCardServiceText p, .clCardCompanyDesc p {
        font-size: 12px;
        line-height: 1.7
    }
}

.clCompanyTable, 
.clBusinessTable,
.clRecruitTable,
.clTelTable,
.clContactTable,
#idBtnTable{
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
}

#idBtnTable{
    margin: -30px 0 0 0;
}

.clCompanyTable tr,
.clBusinessTable tr,
.clRecruitTable tr,
.clTelTable tr,
.clContactTable tr{
  border-top: solid 10px #fffaf0;
}

.clCompanyTable .clNoBorder{
  border-top: none;
}

.clCompanyTable th,
.clBusinessTable th,
.clRecruitTable th,
.clTelTable th,
.clContactTable th{
    position: relative;
    width: 30%;
    background-color: #ff82b6;
    color: white;
    text-align: center;
    border: solid 1px #fffaf0;
    padding: 10px;
}

.clTelTable th,
.clContactTable th{
    min-width: 220px;
}

.clCompanyTable td,
.clBusinessTable td,
.clRecruitTable td,
.clTelTable td,
.clContactTable td{
    line-height: 1.8;
    border: solid 1px #fffaf0;
    padding: 10px;
    background-color: #fbe3e3;
}

.clTelTable td{
    font-size: 25px;
}

#idBtnTable td{
    width: 50%;
    padding: 0 20px;
}

.clContactTable{
    text-align: left;
}

.clTelTable th{
    font-size: 16px;
    width: 50%;
}

.clBusinessTable p{
    margin: 10px 0;
    font-size: 18px;
    line-height: 1.5;
}

@media screen and (max-width: 992px) {
    .clBusinessTable {
        height: auto;
        min-height: initial;
        padding: 20px 10px;
    }
    .clBusinessTable td{
        padding: 20px 10px;
    }
}

@media screen and (max-width: 992px) {
    .clLastRow td:last-child {
        border-bottom: solid 1px #fffaf0;
        width: 100%;
    }
    
    .clTelTable th,
    .clTelTable td,
    .clContactTable th,
    .clContactTable td {
        border-bottom: none;
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .clContactTable tr:nth-child(n+2) th{
        text-align: left;
    }
}

@media screen and (max-width: 750px) {
    .clLastRow td:last-child {
        border-bottom: solid 1px #fffaf0;
        width: 100%;
    }
    .clCompanyTable th,
    .clCompanyTable td,
    .clBusinessTable th,
    .clBusinessTable td,
    .clRecruitTable th,
    .clRecruitTable td,
    #idFooterTable th,
    #idFooterTable td {
        border-bottom: none;
        display: block;
        width: 100%;
        text-align: left;
    }
    
    .clTelTable th,
    .clContactTable th{
        font-size: 15px;
    }
}

#idHideName{
    margin-left: 20px;
    opacity: 0.5;
}

#idCompanyMap{
    position: relative;
    padding-bottom: 100%;
}
#idCompanyMap iframe{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.clBusinessList {
    padding: 0;
    position: relative;
    list-style-type: square;
    width: 100%;
}

.clServiceList,
.clProductList {
    padding: 0;
    position: relative;
    margin: 30px;
    list-style-type: square;
    width: 80%;
}

@media (max-width: 992px) {
    .clServiceList,
    .clProductList {
        width: 93%;
    }
}

@media (max-width: 750px) {
    .clServiceList,
    .clProductList {
        margin: 0 0 20px 0;
        width: 100%;
    }
}

.clBusinessList li,
.clServiceList li,
.clProductList li {
    border-left: solid 21px #ff82b6;
    background: #fbe3e3;
    margin-bottom: 5px;
    line-height: 1.5;
    padding: 0.5em;
    list-style-type: none!important;
}

.clCategoryHead{
    display: table;
    width: 100%;
    height: 50px;
    color: #ffffff;
    padding-left: 100px;
    background-color: #ffa4bc;
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 5px;
}
.clCategoryTitle{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    line-height: 20px;
    padding-top: 5px;
}

#idCategoryList{
    margin: 15px 0;
    color: #ffffff;
    list-style-type:none;
    padding:0;
}

#idCategoryList li{
    font-weight: bold;
    background-color: #e94c89;
    width: 80%;
    height: 45px;
    position: relative;
    padding: 0px 0 0 35px;
    margin: 5px 0 5px 7%;
    line-height: 43px;
}

#idCategoryList li:before{
    content: "";
    display: block;
    position: absolute;
    left: 15px;
    height: 0;
    width: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #ffa4bc;
    top: 48%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media (max-width: 992px) {
    .clCategoryHead{
        padding-left: 20px;
    }
    #idCategoryList li {
        width: 90%;
        margin: 5px 0 5px 0px;
    }
}

@media (max-width: 750px) {
    .clCategoryHead{
        padding-left: 20px;
        height: 90px;
    }
    #idCategoryList li {
        width: 95%;
        margin: 5px 0 5px 7%;
    }
}

#idSlideWrapper{
    position: relative;
    margin-bottom: 140px;
}

.swiper-container {
    width: 100%;
    height: 60vh;
}

.clProductLine .swiper-container{
    margin-bottom: 100px;
}

.swiper-slide img{
    width: auto;
    height: 50vh;
    object-fit: cover;
}

.swiper-slide:nth-child(n) {
    width: auto;
}

@media (max-width: 750px) {
    .swiper-slide img{
        width: 100vw;
        height: 50vh;
        object-fit: contain;
    }
}

#idMachidaProducts,
#idStandKako{
    position: absolute;
    width: 25vmin;
    z-index: 1;
}

#idMachidaProducts{
    max-width: 220px;
    top: -35px;
    left: 30px;
}

#idStandKako{
    max-width: 170px;
    bottom: 0px;
    right: 30px;
}

@media (max-width: 992px) {
    #idMachidaProducts
    {
        left: 10px;
    }
    
    #idStandKako{
        right: 0;
    }
}

.clCardRecruit {
    display: flex;
    width: 100%;
    height: 500px;
    background-color: #fffaf0
}

@media (max-width: 1200px) {
    .clCardRecruit {
        height: 400px
    }
}

@media (max-width: 992px) {
    .clCardRecruit {
        flex-wrap: wrap;
        height: auto
    }
}

.clCardRecruitImg {
    overflow: hidden;
    position: relative;
    width: calc(100% - 500px);
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width: 1200px) {
    .clCardRecruitImg {
        width: 50%
    }
}

@media (max-width: 992px) {
    .clCardRecruitImg {
        width: 100%;
        height: 60vw
    }
}

.clCardRecruitImg::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 500px 100px;
    border-color: transparent transparent #fffaf0 transparent;
    z-index: 2
}

@media (max-width: 1200px) {
    .clCardRecruitImg::before {
        border-width: 0 0 400px 60px
    }
}

@media (max-width: 992px) {
    .clCardRecruitImg::before {
        top: auto;
        bottom: 0;
        width: 0;
        height: 0;
        border-width: 0 0 55px calc(100vw - 50px)
    }
}

@media (max-width: 750px) {
    .clCardRecruitImg::before {
        border-width: 0 0 55px calc(100vw - 20px)
    }
}

.clCardRecruitImgLink {
    display: block;
    width: 100%;
    height: 100%
}

.clCardRecruitImgLink img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 1s
}

@media (min-width: 751px) {
    .clCardRecruitImgLink:hover img {
        transform: scale(1.1);
        transition: transform 1s
    }
}

.clCardRecruitDetail {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: 500px;
    padding: 40px 40px 40px 30px
}

@media (max-width: 1200px) {
    .clCardRecruitDetail {
        width: 50%;
        padding: 30px 30px 30px 20px
    }
}

@media (max-width: 992px) {
    .clCardRecruitDetail {
        width: 100%;
        padding: 15px 30px 30px
    }
}

@media (max-width: 750px) {
    .clCardRecruitDetail {
        padding: 10px 20px 20px
    }
}

.clCardRecruitContents {
    width: 100%
}

.clCardRecruitName {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 20px
}

@media (max-width: 1200px) {
    .clCardRecruitName {
        font-size: 28px;
        margin-bottom: 15px
    }
}

@media (max-width: 750px) {
    .clCardRecruitName {
        font-size: 20px;
        margin-bottom: 10px
    }
}

.clCardRecruitAddress {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 40px
}

@media (max-width: 750px) {
    .clCardRecruitAddress {
        font-size: 12px;
        margin-bottom: 20px
    }
}

.clCardRecruitNote {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 20px
}

@media (max-width: 750px) {
    .clCardRecruitNote {
        font-size: 14px;
        margin-bottom: 30px
    }
}

.clCardPartnerList {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 -70px;
    padding: 0
}

@media (max-width: 750px) {
    .clCardPartnerList {
        margin: 0 0 0 -20px
    }
}

.clCardPartnerItem {
    position: relative;
    width: calc(34vmin - 70px);
    height: 25vmin;
    margin-left: 70px;
    margin-top: 30px;
    
}


@media (max-width: 750px) {
    .clCardPartnerItem {
        width: calc(50% - 20px);
        margin-left: 20px;
        margin-top: 20px
    }
}

.clCardPartnerItem::before {
    content: "";
    position: absolute;
    display: block;
    width: calc(34vmin - 70px);
    height: 25vmin;
    top: 0;
    left: calc(100% + 70px);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 750px) {
    .clCardPartnerItem::before {
        left: calc(100% + 20px)
    }
}

.clCardPartnerItem:nth-child(4n)::before {
    display: none
}

@media (max-width: 750px) {
    .clCardPartnerItem:nth-child(2n)::before {
        display: none
    }
}

.clCardPartnerLink {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  
}

.clCardPartnerImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
        z-index: 5;
}

@media (min-width: 751px) {
    .clCardPartnerImg {
        transition: transform .5s
    }
    .clCardPartnerImg:hover {
        transform: scale(1.05);
        transition: transform .5s
    }
}

.clIndexTop {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffa4bc;
    margin-bottom: 200px;
}

@media (max-width: 1200px) {
    .clIndexTop {
        margin-bottom: 200px;
    }
}

@media (max-width: 750px) {
    .clIndexTop {
        height: 85vh;
        margin-bottom: 200px;
    }
}



.clIndexHero {
    position: absolute;
    z-index: 1;
    width: calc(100% - 50px);
    height: calc(100% - 100px);
    top: 0;
    left: 0;
    border-radius: 0 calc(50vh - 50px) calc(50vh - 50px) 0;
    overflow: hidden;
    background-color: #fffaf0;
    padding-top: 70px;
}

.clIndexHero:after{
    clear: both;
}

@media (max-width: 992px) {
    .clIndexHero {
        width: calc(100% - 100px)
    }
}

@media (max-width: 750px) {
    .clIndexHero {
        width: 100%;
        height: calc(100% - 99px);
        top: 0;
        border-radius: 0 calc(50vh - 75px) calc(50vh - 75px) 0
    }
}

#idCatchCopy{
    width: 100%;
    height: 120px;
    position: relative;
    margin: 20px;
    font-weight: bold;
    /* top: 15px; */
    color: #d31277;
    letter-spacing: 5px;
    text-shadow: 
        2px  2px 1px #ffffff,
        -2px  2px 1px #ffffff,
        2px -2px 1px #ffffff,
        -2px -2px 1px #ffffff,
        2px  0px 1px #ffffff,
        0px  2px 1px #ffffff,
        -2px  0px 1px #ffffff,
        0px -2px 1px #ffffff;
    z-index: 10;
}
#idCatchCopy h1{
    font-size: 32px;
}

#idCopy_1{
    position: absolute;
    width: 100%;
    top: 20%;
    left: 63%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
#idCopy_2{
    position: absolute;
    width: 100%;
    top: 75%;
    left: 70%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

.clCatchCopyBig{
    font-size: 45px;
}

@media (max-width: 992px) {
    #idCatchCopy{
        height: 90px;
        margin: 20px;
        letter-spacing: 5px;
    }
    
    #idCatchCopy h1{
        font-size: 25px;
    }
    
    #idCopy_2{
        left: 70%;
    }
    
    .clCatchCopyBig{
        font-size: 34px;
    }
}

@media (max-width: 750px) {
    #idCatchCopy{
        width: 85%;
        height: 12vw;
        margin: 0 0 20px 0;
        letter-spacing: 3px;
    }
    
    #idCatchCopy h1{
        font-size: 4vw;
    }
    
    #idCopy_1{
        left: 55%;
    }

    #idCopy_2{
        top: 80%;
        left: 60%;
    }
    .clCatchCopyBig{
        font-size: 5vw;
    }
}

.clIndexHeroImgL,
.clIndexHeroImgR {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden
}

.clIndexHeroImgL{
    float: left;
}


@media (max-width: 992px) {
    .clIndexHeroImgR {
        display: none
    }
}

.clHeroImg{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    -webkit- transform: translateY(-50%) translateX(-50%);
}

.clIndexHero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 992px) {
    .clIndexHeroImgL {
        width: 100%
    }
}

#idIndexNewsWrapper{
    width: 100%;
    pointer-events: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

.clIndexNews {
    overflow: hidden;
    display: flex;
    position: absolute;
    z-index: 2;
    align-items: center;
    width: calc(100% - 100px);
    height: 150px;
    bottom: 30px;
    right: 0;
    padding-right: 40px;
    border-radius: 75px 0 0 75px;
    background: rgb(255,255,255);
    background: linear-gradient(175deg, rgba(255,255,255,1) 0%, rgba(255,223,223,1) 73%);
    box-shadow: 13px -1px 29px rgb(255 13 13 / 20%);
}

@media (max-width: 1200px) {
    .clIndexNews {
        width: calc(100% - 50px);
    }
}

@media (max-width: 750px) {
    .clIndexNews {
        width: 100%;
        height: 100px;
        top: calc(100% - 99px);
        right: auto;
        left: 0;
        border-radius: 0;
    }
    
    #idIndexNewsWrapper{
        pointer-events: auto;
    }
}

.clIndexNewsList {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 30px 10px 30px 30px
}

@media (max-width: 750px) {
    .clIndexNewsList {
        width: 100vw;
        padding: 0 0 0 35px;
    }
    .clIndexNewsList::before {
        content: "NEWS";
        display: block;
        position: absolute;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        width: 35px;
        height: 100%;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 35px;
        color: #ff8db9;
        text-align: center;
        top: 0;
        left: 0
    }
}

.clIndexNewsItem {
    width: 100%;
    margin-right: 10px
}

@media (max-width: 750px) {
    .clIndexNewsItem {
        width: 90vw;
    }
}

@media (min-width: 751px) {
    .clIndexNewsItem:hover .clIndexNewsImg img {
        transform: scale(1.1);
        transition: transform .5s
    }
    .clIndexNewsItem:hover .clIndexNewsContents {
        opacity: .7
    }
}

.clIndexNewsLink {
    display: flex;
    align-items: center;
    border-radius: 45px 0 0 45px
}

.clIndexNewsImg {
    overflow: hidden;
    width: 90px;
    height: 90px;
    border-radius: 45px;
    background-color: #ffffff;
}

@media (max-width: 750px) {
    .clIndexNewsImg {
        width: 60px;
        height: 60px
    }
}

.clIndexNewsImg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .5s
}

.clIndexNewsContents {
    width: calc(100% - 90px);
    padding-left: 20px;
    overflow-y: hidden;
    height: 120px;
}

#idIndexNewContentsBlock{
    width: 100%;
}

.clContentsCenter{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
}


@media (max-width: 1200px) {
    .clContentsCenter{
        width: calc(70% - 90px) !important;
    }
}

@media (max-width: 992px) {
    #idIndexNewContentsBlock .clContentsCenter{
        width: calc(70% - 90px) !important;
    }
}

@media (max-width: 750px) {
    .clIndexNewsContents {
        width: calc(98% - 110px);
        height: 80px;
        padding-left: 0;
        position: absolute;
        top: 0;
        right: 0;
        margin: 10px;
    }
    
    #idIndexNewContentsBlock{
        width: 100% !important;
    }
}


#idIndexNewsMore {
    display: block;
    width: 140px;
    min-width: 140px;
    height: 50px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: #ff82b6;
    text-align: center;
    line-height: 50px;
    border-radius: 25px;
    background-color: #fffaf0;
    box-shadow: 5px 10px 15px #ffd5d5, -3px -3px 15px #fff;
    pointer-events: auto;
}

@media (max-width: 750px) {
    #idNewsMain{
        margin: 90px auto 130px;
    }
    
    #idIndexNewsMore {
        display: none;
    }
}

@media (min-width: 751px) {
    #idIndexNewsMore {
        transition: all .5s
    }
    #idIndexNewsMore:hover {
        color: #ff4d97;
        box-shadow: 3px 6px 8px #ffc2c2, -3px -5px 10px #ffe7e7;
        transition: all .5s
    }
}

#idHiddenNews{
    height: 0;
    overflow: hidden;
    margin: 5px 0;
    transition: all .5s ease;
}

#idHiddenNews.clShowNews{
    height: auto;
}

.clIndexCompany {
    max-width: 1600px;
    padding: 0 100px;
    margin: 0 auto
}

@media (max-width: 992px) {
    .clIndexCompany {
        padding: 0 50px
    }
}

@media (max-width: 750px) {
    .clIndexCompany {
        padding: 0 25px
    }
}

.clIndexCompanyContainer {
    position: relative;
    margin: -200px auto 140px
}

@media (max-width: 1200px) {
    .clIndexCompanyContainer {
        margin: -180px auto 70px
    }
}

@media (max-width: 750px) {
    .clIndexCompanyContainer {
        margin: -120px auto 40px
    }
}

.clIndexCompanyCatch {
    position: relative;
    display: block;
    width: 600px;
    height: 900px;
    margin: 0 auto;
    border-radius: 300px
}

@media (max-width: 1200px) {
    .clIndexCompanyCatch {
        width: 500px;
        height: 700px;
        margin-right: 0
    }
}

@media (max-width: 750px) {
    .clIndexCompanyCatch {
        width: 70vw;
        height: 110vw;
        margin: 0 auto
    }
}

.clIndexCompanyCatch::before {
    pointer-events: none;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: calc(100% + 40px);
    border-radius: 300px;
    opacity: .8;
    box-shadow: inset 20px 20px 70px #ff97bf, inset -20px -20px 70px #ffc4db;
}

@media (max-width: 992px) {
    .clIndexCompanyCatch::before {
        left: calc(100% + 20px)
    }
}

.clIndexCompanyCatchMask {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 300px;
    z-index: 1
}

.clIndexCompanyCatchMask img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 300px
}

@media (min-width: 751px) {
    .clIndexCompanyCatchMask img {
        transition: transform 1s
    }
    .clIndexCompanyCatchMask img:hover {
        transform: scale(1.05);
        transition: transform 1s
    }
}

.clIndexCompanyInfo {
    position: absolute;
    width: 500px;
    left: 0;
    bottom: 80px;
    z-index: 2
}

@media (max-width: 750px) {
    .clIndexCompanyInfo {
        position: relative;
        width: 100%;
        bottom: auto
    }
}

.clIndexCompanyInfoBack{
    position: absolute;
    z-index: -1;
    background-color: #ffa4bc;
}

@media (min-width: 993px){
    .clIndexCompanyInfoBack{
        width: 500px;
        height: 500px;
        left: -50px;
        bottom: -45px;
        border-radius: 250px;
    }
}

@media (max-width: 992px){
    .clIndexCompanyInfoBack{
        width: 400px;
        height: 400px;
        left: -35px;
        bottom: -15px;
        border-radius: 200px;
    }
}

@media (max-width: 750px){
    .clIndexCompanyInfoBack{
        width: 320px;
        height: 320px;
        left: -45px;
        bottom: -15px;
        border-radius: 160px;
    }
}

.clIndexCompanyName {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 44px;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 20px
}

@media (max-width: 992px) {
    .clIndexCompanyName {
        font-size: 36px
    }
}

@media (max-width: 750px) {
    .clIndexCompanyName {
        font-size: 26px;
        margin-bottom: 10px;
        margin-top: -40px
    }
}

.clIndexCompanyNote {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    margin-bottom: 40px
}

@media (max-width: 750px) {
    .clIndexCompanyNote {
        font-size: 13px;
        margin-bottom: 20px
    }
}

.clIndexCompanyLink {
    margin-bottom: -20px
}

@media (max-width: 750px) {
    .clIndexCompanyLink {
        margin: 0 auto
    }
}

.clIndexProductLine {
    display: flex;
    width: 100%;
    height: 370px;
    margin-bottom: 140px;
    padding: 0;
}

@media (max-width: 992px) {
    .clIndexProductLine {
        /*
        height: 600px;
        margin-bottom: 70px
        */
        padding: 30px0 0;
    }
}

@media (max-width: 750px) {
    .clIndexProductLine {
        flex-wrap: wrap;
        height: auto;
        margin-bottom: 70px
    }
}

.clIndexProductLineDetail {
    display: block;
    padding: 50px 30px 0 150px;
    background-color: #ffa4bc;
    width: 50%;
}

@media (max-width: 1200px) {
    .clIndexProductLineDetail {
        padding: 50px 30px 0 100px;
    }
}

@media (max-width: 992px) {
    .clIndexProductLineDetail {
        padding: 50px 0 0 50px;
    }
    .clIndexProductLineDetail .clHeadingEn {
        font-size: 33px;
        letter-spacing: 6px;
    }
}

@media (max-width: 750px) {
    .clIndexProductLineDetail {
        width: 100%;
        padding: 20px 25px 20px
    }
}

.clIndexAboutConcept {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 65px;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 5px;
    margin-bottom: 35px
}

@media (max-width: 992px) {
    .clIndexAboutConcept {
        font-size: 50px;
        margin-bottom: 30px
    }
}

@media (max-width: 750px) {
    .clIndexAboutConcept {
        text-align: center;
        font-size: 10vw;
        margin-right: -10vw;
        margin-bottom: 30px
    }
}

.clIndexAboutText {
    font-size: 15px;
    color: #fff;
    line-height: 2;
    margin-bottom: 35px
}

@media (max-width: 992px) {
    .clIndexAboutText {
        font-size: 14px
    }
}

@media (max-width: 750px) {
    .clIndexAboutText {
        text-align: center;
        font-size: 12px;
        line-height: 2.5;
        margin-bottom: 40px
    }
}

.clIndexAboutLink {
    width: 400px;
    margin-bottom: -20px
}

@media (max-width: 992px) {
    .clIndexAboutLink {
        width: 370px
    }
}

@media (max-width: 750px) {
    .clIndexAboutLink {
        width: 100%;
        margin: 0 auto 25px
    }
}

.clIndexProductLineCatchMask {
    position: relative;
    overflow: hidden;
    width: 50%;
    height: 100%
}

@media (max-width: 750px) {
    .clIndexProductLineCatchMask {
        order: -1;
        height: 300px;
        width: 100%;
    }
}

.clIndexProductLineCatchMask::before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 650px 130px 0 0;
    border-color: #ffa4bc transparent transparent transparent;
    z-index: 1
}

@media (max-width: 750px) {
    .clIndexProductLineCatchMask::before {
        border-width: 0 0 55px 100vw;
        border-color: transparent transparent #ffa4bc transparent
    }
}

.clIndexProductLineCatch {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background: url("./../images/common/kamisibaiKako2.jpg") center center no-repeat;
    background-size: cover
}

#idDonguriDetailHead,
#idFlyerHead{
    z-index: 1;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

.clDonguriDetailHeadImg,.clFiyerImg{
    width: calc((100% - 20px) /2);
    margin: 0 5px 5px 5px;
}

.clDonguriDetailHeadImg{
    max-width: 850px;
}

.clFiyerImg{
    max-width: 700px;
}

.clDonguriDetailHeadImgSP{
    display: none;
}

.clProductLineSildeCaption{
    width: 100%;
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
}

.clElectoneFlyer{
    display: inline;
}

.clFlyerSlider{
        display:block;
    }
.clFlyerSliderSP{
    display: none;
}

@media (max-width: 992px) {
    #idDonguriDetailHead, 
    #idFlyerHead{
        display: block;
    }
    .clDonguriDetailHeadImg{
        width: 98%;
        margin: 5px auto;
    }
    .clFiyerImg{
        width: 70%;
        margin: 0 auto;
        margin-bottom: 15px;
    }
}

@media (max-width: 750px) {
    #idDonguriDetailHead,
    .clDonguriDetailHeadImgSP, 
    #idFlyerHead{
        display: block;
    }
    
    .clDonguriDetailHeadImg{
        display: none;
    }
    
    .clDonguriDetailHeadImgSP{
        width: 98%;
        margin: 5px auto;
    }
    
    .clFiyerImg{
        width: 98%;
        margin: 0 auto;
        margin-bottom: 15px;
    }
    
    .clFlyerSlider{
        display: none;
    }
    
    .clFlyerSliderSP{
        display:block;
    }
}

.clNewsItem {
    background-color: #fffaf0
}

.clNewsItem + .clNewsItem {
    margin-top: 5px
}

@media (max-width: 750px) {
    .clNewsItem + .clNewsItem {
        margin-top: 3px
    }
}

@media (min-width: 751px) {
    .clNewsItem:hover .clNewsImg img {
        transform: scale(1.1);
        transition: transform 1s
    }
}

.clNewsLink {
    display: flex;
    align-items: center;
    padding: 30px
}

@media (max-width: 750px) {
    .clNewsLink {
        padding: 15px
    }
}

.clNewsImg {
    overflow: hidden;
    width: 130px;
    height: 130px;
    border-radius: 75px;
    margin-right: 25px
}

@media (max-width: 750px) {
    .clNewsImg {
        width: 80px;
        height: 80px;
        margin-right: 10px
    }
}

.clNewsImg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 1s
}

.clNewsMeta {
    width: calc(100% - 155px)
}

@media (max-width: 750px) {
    .clNewsMeta {
        width: calc(100% - 90px)
    }
}

.clNewsTitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.3;
    margin-bottom: 5px
}

@media (max-width: 750px) {
    .clNewsTitle {
        font-size: 20px;
        margin-bottom: 3px
    }
}

.clNewsDate {
    font-size: 20px;
    opacity: .6
}

@media (max-width: 750px) {
    .clNewsDate {
        font-size: 16px;
    }
}

.clGreetingCatch {
    position: relative;
    width: 100%;
    height: 600px;
    background: url("./../images/common/sakura.jpg") center center no-repeat;
    background-size: cover;
    z-index: 1;
}

.clGreetingCatch:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(58, 11, 40, .3);
}

@media (max-width: 750px) {
    .clGreetingCatch {
        height: 340px
    }
}

.clGreetingHeading {
    max-width: 1600px;
    padding: 200px 100px 0;
    margin: 0 auto
}

@media (max-width: 1200px) {
    .clGreetingHeading {
        padding: 200px 50px 0
    }
}

@media (max-width: 750px) {
    .clGreetingHeading {
        padding: 90px 25px 0
    }
}

.clGreetingContent {
    position: relative;
    width: 100%;
    max-width: 1600px;
    padding: 0 100px;
    margin: -200px auto 140px;
    z-index: 1;
}

@media (max-width: 1200px) {
    .clGreetingContent {
        padding: 0 50px
    }
}

@media (max-width: 750px) {
    .clGreetingContent {
        padding: 0 25px;
        margin: -100px auto 70px;
    }
}

.clGreetingDetail {
    position: relative;
    width: 100%;
    background-color: #fffaf0;
    padding: 0 0 100px;
}

@media (max-width: 750px) {
    .clGreetingDetail {
        padding: 0 0 70px;
    }
}

.clGreetingDetailText {
    max-width: 1300px;
    padding: 0 80px;
    margin: 0 auto 100px
}

@media (max-width: 1200px) {
    .clGreetingDetailText {
        padding: 0 30px
    }
}

@media (max-width: 992px) {
    .clGreetingDetailText {
        padding: 0 50px;
        margin: 0 auto 50px
    }
}

@media (max-width: 750px) {
    .clGreetingDetailText {
        padding: 0 20px;
        margin: 0 auto 40px
    }
}

.clGreetingDetailText h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 32px;
    letter-spacing: 3px;
    padding: 50px 0;
    text-align: center;
}

@media (max-width: 750px) {
    .clGreetingDetailText h3 {
        font-size: 28px;
        letter-spacing: 0;
        margin-bottom: 25px;
    }
}

.clGreetingDetailText p {
    font-size: 20px;
    line-height: 2.4;
    margin: 0px 15%;
}

@media (max-width: 992px) {
    .clGreetingDetailText p {
        margin: 0 5%;
    }
}

@media (max-width: 750px) {
    .clGreetingDetailText p {
        font-size: 18px;
        line-height: 2;
        margin: 20px 8%;
    }
}

#idGreetingPhotoContainer{
    transform: translateX(32%);
    -webkit-transform: translateX(32%);
    overflow-x: hidden;
}

#idGreetingPhotoContainer img{
    margin: 0 10px;
    display: inline;
    
}

#idGreetingPhoto{
    width: 30%;
    min-width: 270px;
    max-width: 325px;
}

#idGreetingSign{
    width: 20%;
    min-width: 120px;
    max-width: 210px;
}

#idGreetingSign:after{
    clear: both;
}

@media (max-width: 992px) {
    #idGreetingPhotoContainer{
        transform: translateX(30%);
        -webkit-transform: translateX(30%);
    }
}

@media (max-width: 750px) {
    #idGreetingPhotoContainer{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        position: relative;
        height: 570px;
    }
    
    #idGreetingPhotoContainer img{
        margin: 0 auto;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    
    #idGreetingSign{
        top: 80%;
    }
}

.clCompanyPointImg:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #F0A28F;
    z-index: 0
}

.clRecruitList {
    margin-bottom: 100px
}

@media (max-width: 992px) {
    .clRecruitList {
        margin-bottom: 50px
    }
}

.clRecruitItem {
    position: relative;
    width: 100%;
    background-color: #fffaf0
}

@media (max-width: 992px) {
    .clRecruitItem {
        height: auto
    }
}

@media (min-width: 751px) {
    .clRecruitItem:hover .clRecruitImg img {
        transform: scale(1.1);
        transition: transform 1s
    }
    .clRecruitItem:hover .clRecruitMore {
        color: #8e774b;
        box-shadow: 3px 6px 8px #efdcb8, -5px -10px 10px #fffaf0;
        transition: all .5s
    }
}

.clRecruitLink {
    position: relative;
    display: flex;
    height: 100%
}

@media (max-width: 992px) {
    .clRecruitLink {
        flex-wrap: wrap
    }
}

.clRecruitImg {
    position: relative;
    overflow: hidden;
    width: 300px;
}

@media (max-width: 992px) {
    .clRecruitImg {
        width: 100%;
        height: 50vw
    }
}

.clRecruitImg::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 1500px 60px;
    border-color: transparent transparent #fffaf0 transparent;
    z-index: 2
}

@media (max-width: 992px) {
    .clRecruitImg::before {
        top: auto;
        bottom: 0;
        width: 0;
        height: 0;
        border-width: 0 0 55px calc(100vw - 20px)
    }
}

.clRecruitImg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 1s
}

.clRecruitDetail {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-end;
    padding: 30px 30px 30px 30px
}

@media (max-width: 992px) {
    .clRecruitDetail {
        width: 100%;
        padding: 5px 20px 15px
    }
}

.clRecruitMeta {
    width: 100%
}

.clRecruitMeta h3{
    margin: 10px 0;
}

.clContactContainer {
    margin-bottom: 140px;
    background-color: #fffaf0;
    padding: 50px;
    text-align: center;
}

#idContactContents{
    width: 55vw;
    max-width: 870px;
    margin: 0 auto;
}

#idContactMessage{
    margin-bottom: 80px;
}



.clContactContainer p{
    margin: 30px 0;
    line-height: 2;
    font-size: 25px;
}

.clContactContainer .clButtonAction::after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 100%;
    top: 0;
    right: -60px;
    background: #463b3f url("../images/icon/mailIcon.png") center left 10px no-repeat;
    background-size: 30px 30px
}

.clSendBtn.clButtonAction::after {
    background: #463b3f url("../images/icon/sendIcon.png") center left 10px no-repeat;
}

.clResetBtn.clButtonAction::after {
    background: #463b3f url("../images/icon/resetIcon.png") center left 10px no-repeat;
}

.clContactContainer table{
    margin: 55px 0;    
}

.clRequired{
    position: absolute;
    bottom: 0;
    right:  0;
    font-size: 12px;
}

.clContactForm {
	position: relative;
    width: 100%;
    padding: 0 20px;
}
.clContactForm input[type='text'],
.clContactForm textarea {
    font-size: 16px;
    width: 100%;
    padding: 0.3em;
    transition: 0.3s;
    letter-spacing: 1px;
    color: #665433;
    border: 1px solid #fbe3e3;
    box-shadow: 1px 1px 2px 0 #ff82b6 inset;
    border-radius: 5px;
}
.clFocusEffect input[type='text']:focus,
.clFocusEffect textarea:focus{
	outline: none;
	box-shadow: inset 1px 1px 2px 0 #ffc3dc;
}

#idBtnCell td{
    width: 50%;
    background-color: transparent;
}

@media (max-width: 992px) {
    #idContactContents{
        width: 75vw;
    }
    #idContactContents .clButtonAction {
        font-size: 15px;
    }
}

@media (max-width: 750px) {
    .clContactContainer{
        padding: 50px 3%;
    }
    
    .clContactContainer p{
        font-size: 23px;
    }
    
    #idContactContents {
        width: 100%;
    }
}

.clContactList {
    width: 400px
}

@media (max-width: 1200px) {
    .clContactList {
        width: 100%
    }
}

#idControlBtn {
    position: fixed;
    display: table;
    bottom: 20px;
    right: 15px;
    font-size: 15px;
    z-index: 8;
    width: 4%;
    min-width: 100px;
    height: 6%;
    min-height: 50px;
}

#idPageTop{
    display: table-cell;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.75;
    background: #ff8db9;
    width: 100%;
    min-width: 60px;
    height: 76%;
    min-height: 45px;
    text-align: center;
    border-radius: 5px;
    border: 3px solid #ff4d97;
    vertical-align: middle;
    filter: drop-shadow(7px 10px 6px #ff4d97);
}
#idPageTop a,
#idPageTop a:visited{
    color: #665433;
    text-decoration: none;
    font-weight: bold;
}

.swiper-button-white,
.swiper-pagination-white{
    filter: drop-shadow(0px 0px 2px #000000);
}

.clResetMargin{
    margin: 0;
}

.clResetMaxWidth{
    max-width: initial;
}

.clAncerPoint{
    padding: 50px;
}

.clErrorStyle{
    background-color: #ffbaba;
    color: #d23636;
}

#idErrorList{
    margin: 10px 30px;
}

.ui-dialog{
    max-width: 520px;
}

@media (max-width: 750px) {
    #idErrorDialog{
        font-size: 14px;
    }
    #idErrorList {
        margin: 10px 10px;
    }
    
}

.clSmallfont{
    font-size: 16px;
}

/* PC版のみ表示 */
@media (min-width: 993px) {
    .clPhoneBr {
        display:none;
    }
    .clToggleSpace{
        display:inline;
    }
}

/* タブレットのみ表示 */
@media (max-width: 992px) {
    .clPhoneBr {
        display:none;
    }
    .clToggleSpace{
        display:inline;
    }
}

/* スマホ版のみ表示 */
@media (max-width: 750px) {
    .clPhoneBr {
        display:block;
    }
    .clToggleSpace{
        display:none;
    }
    .clSmallfont{
        font-size: 12px;
    }
}


/*** END ***/