$tab: 680px; // タブレット
$sp: 740px; // スマホ

@mixin tab {
    @media (max-width: ($tab)) {
        @content;
    }
}
@mixin sp {
    @media (max-width: ($sp)) {
        @content;
    }
}

@mixin adjustCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}
@mixin adjustBothEnds {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
@mixin paddingBothEnds {
    padding: 0 20px;
}
@mixin marginBothEnds {
    width: 95%;
    margin: 0 2.5%;
}
@mixin orangeBorderButton {
    color: $micDeepOrange;
    border: 1px solid $micDeepOrange;
    border-radius: 10px;
    padding: 10px 0;
    font-size: 13px;
    @include adjustCenter;
    &:hover {
        color: white;
        background-color: $micDeepOrange;
    }
}

@mixin orangeCheckbox {
    @include adjustCenter;
    color: $micDeepOrange;
    border: 1px solid $micDeepOrange;
    text-align: center;
    border-radius: 10px;
    font-size: 13px;
    width: 125px;
    height: 56px;
    cursor: pointer;
    margin: 0 0 10px 0;
    &:hover {
        color: white;
        background-color: $micOrange;
    }
}

@mixin navilink {
    flex-grow: 1;
    @include adjustCenter;
    padding: 10px 0;
    border-right: 1px dotted $micGrey;
    &:last-child {
        border: none;
    }
    & i {
        color: inherit;
        font-size: 12px;
        margin: 0 0 0 5px;
    }
}

@mixin tag {
    width: 80px;
    text-align: center;
    color: white;
    font-size: 10px;
    padding: 3px 0;
    margin: 0 5px 0 0;
}
@mixin linkToDetailTag {
    width: 85px;
    text-align: center;
    color: white;
    font-size: 10px;
    padding: 5px 0;
    position: absolute;
    left: 0;
    top: 5px;
}
@mixin objectFit {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: "object-fit: contain;";
}
@mixin rightPointedBox($color) {
    @include adjustCenter;
    color: white;
    font-size: 15px;
    position: relative;
    background-color: $color;
    &::after {
        position: absolute;
        top: calc(50% - 10px);
        right: -20px;
        content: "";
        border-left: 20px solid $color;
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
    }
}
@mixin bottomPointedBox($color) {
    @include adjustCenter;
    color: white;
    font-size: 15px;
    position: relative;
    background-color: $color;
    &::after {
        z-index: -1;
        position: absolute;
        bottom: -20px;
        content: "";
        border-left: 10px solid transparent;
        border-top: 20px solid $color;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
    }
}
