@charset "UTF-8"; /* ### mixin.scss ### */
/* ### contents.scss ### */
body#activity main {
    background: #fff;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

#header {
    margin-bottom: 0;
    background: #fff;
}

img {
    max-width: 100%;
    height: auto;
}

.InfoArea {
    background-color: #fff0d6;
    padding: 18px 0 10px;
}

table.Info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 10px 0px;
    width: 600px;
    margin: 0 auto;
}

@media screen and (max-width: 1023px) {
    table.Info {
        font-size: 3.2vw;
        justify-content: space-around;
        padding: 1vw 3vw;
        width: auto;
    }
}

table.Info .date {
    color: #e26a00;
    padding-right: 34px;
}

@media screen and (max-width: 1023px) {
    table.Info .date {
        padding-right: 2vw;
    }
}

table.Info .text {
    padding-bottom: 15px;
}

@media screen and (max-width: 1023px) {
    table.Info .text {
        padding-bottom: 3vw;
    }
}

table.Info .text .new {
    color: #ff0000;
}

#nav-drawer {
    position: fixed;
    top: 50%;
    right: 0;
    background-color: #fff;
    width: 74px;
    height: 74px;
    text-align: center;
    vertical-align: middle;
    display: block;
    border-top: 2px solid #e26a00;
    border-left: 2px solid #e26a00;
    border-bottom: 2px solid #e26a00;
    z-index: 1001;
}

#nav-drawer .menu {
    position: relative;
    display: block;
    top: 12px;
    font-size: 16px;
    color: #e26a00;
    font-weight: bold;
    height: 10px;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

.nav-unshown {
    display: none;
}

#nav-open {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: 74px;
    padding-top: 0;
}

#nav-open img {
    width: 100%;
}

#nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    right: 0;
    left: 0;
    height: 3px;
    width: 31px;
    border-radius: 3px;
    background: #e26a00;
    display: block;
    content: '';
    cursor: pointer;
    margin: 0 auto;
}

#nav-open span:before {
    bottom: 8px;
}

#nav-open span:after {
    bottom: 16px;
}

#nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: 80%;
    height: 100%;
    background: #e26a00;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(105%);
    transform: translateX(105%);
}

#nav-content .smileballNavMenu {
    margin: 0 auto;
    width: 750px;
    padding: 60px 30px 0;
    height: calc( 100vh - 140px);
}

#nav-content .smileballNavMenu li {
    text-align: left;
    border-top: 2px solid #ef9a3d;
    padding: 20px 0px 20px 18px;
    font-size: 16px;
    color: #fff;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

#nav-content .smileballNavMenu li .icon {
    margin-right: 10px;
    padding: 6px 12px;
    border-radius: 100px;
    font-weight: bold;
    color: #e26b00;
    background: #fff;
}

#nav-content .smileballNavMenu li a {
    display: block;
    text-decoration: none;
    color: #fff;
}

#nav-content .smileballNavMenu li a:hover {
    opacity: .8;
}

#nav-content .smileballNavMenu li:last-child {
    border-bottom: 2px solid #ef9a3d;
}

.item-share {
    display: flex;
    align-items: center;
    color: #fff;
    border-bottom: none !important;
}

@media screen and (max-width: 1023px) {
    .item-share {
        padding-top: 5.66vw !important;
        padding-left: 2.4vw !important;
    }
}

.item-share_title {
    margin-right: 18px;
}

@media screen and (max-width: 1023px) {
    .item-share_title {
        margin-right: 1.3333333333vw;
    }
}

.item-share_list {
    display: flex;
    align-items: flex-start;
}

@media screen and (max-width: 1023px) {
    .item-share_list {
        margin-left: 4vw;
    }
}

.item-share_item {
    padding: 0 !important;
    border: none !important;
}

.item-share_item:nth-of-type(1) {
    margin-right: 20px;
}

@media screen and (max-width: 1023px) {
    .item-share_item:nth-of-type(1) {
        margin-right: 1.3333333333vw;
    }
}

@media screen and (max-width: 1023px) {
    .item-share_item:nth-of-type(2) {
        margin-top: 0;
    }
}

#nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 1023px) {
    #nav-drawer {
        top: 48vw;
        right: 0;
        background-color: white;
        width: 11vw;
        height: 11vw;
        text-align: center;
        vertical-align: middle;
        display: block;
        border-top: 0.266vw solid #e26a00;
        border-left: 0.266vw solid #e26a00;
        border-bottom: 0.266vw solid #e26a00;
        z-index: 1001;
    }

    #nav-drawer .menu {
        position: relative;
        display: block;
        top: 3vw;
        font-size: 1.5vw;
        color: #e26a00;
        font-weight: bold;
        height: 1.466vw;
    }

    .nav-unshown {
        display: none;
    }

    #nav-open {
        width: 11vw;
        height: 11vw;
        display: block;
        padding: 0;
    }

    #nav-open .menu {
        display: none;
    }

    #nav-open p, #nav-open span {
        display: none;
    }

    #nav-close {
        display: none;
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
    }

    #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 2500;
        width: 100%;
        height: 100%;
        background: #e26a00;
        transition: .3s ease-in-out;
        -webkit-transform: translateX(105%);
        transform: translateX(105%);
    }

    #nav-content .smileballNavMenu {
        margin: 0 auto;
        width: 89.33vw;
        padding: 20vw 5.333vw 0;
    }

    #nav-content .smileballNavMenu li {
        text-align: left;
        border-top: 0.27vw solid #ef9a3d;
        padding: 0px;
        font-size: 3.466vw;
    }

    #nav-content .smileballNavMenu li a {
        text-decoration: none;
        color: #fff;
        padding: 4vw 0 4vw 2.4vw;
    }

    #nav-content .smileballNavMenu li:last-child {
        border-bottom: none;
    }

    #nav-input:checked ~ #nav-close {
        display: block;
        opacity: .5;
    }

    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
    }
}

#nav-input:checked ~ #nav-content .nav-unshown-btn {
    display: block !important;
    background: #fff !important;
}

.nav-unshown-btn {
    display: none;
    position: fixed;
    top: 10px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 100%;
    background: #fff;
}

@media screen and (min-width: 1024px) {
    .nav-unshown-btn {
        right: 20px;
        top: 20px;
        background: #fff;
        width: 60px;
        height: 60px;
    }
}

.nav-unshown-btn .line {
    position: fixed;
    width: 30px;
    height: 3px;
    top: 30px;
    right: 26px;
    z-index: 2510;
    background: #e26b00;
    transform-origin: 50% 50%;
}

@media screen and (min-width: 1024px) {
    .nav-unshown-btn .line {
        width: 40px;
        height: 4px;
        top: 48px;
        right: 30px;
    }
}

.nav-unshown-btn .line:nth-child(1) {
    transform: rotate(45deg);
}

.nav-unshown-btn .line:nth-child(2) {
    transform: rotate(-45deg);
}

.smileballAboutArea {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/smileballAboutBk.jpg) center 0/cover no-repeat;
}

.smileballAboutArea .smileballAboutAreaInner h2 {
    padding-bottom: 36px;
}

.smileballAboutArea .smileballAboutAreaInner h2 .orangeText {
    font-size: 30px;
    font-weight: bold;
    color: #e26a00;
    margin-top: 26px;
}

.smileballAboutArea .smileballAboutAreaInner .text01 {
    font-size: 16px;
    line-height: 30px;
    padding-bottom: 32px;
    color: #4b4b4b;
}

.smileballAboutArea .smileballAboutAreaInner .btn {
    margin: 0 auto;
    width: 310px;
}

.smileballAboutArea .smileballAboutAreaInner .btn a {
    display: block;
    padding: 20px 30px;
    border: 2px solid #e26a00;
    color: #e26a00;
    font-weight: bold;
    text-decoration: none;
}

.smileballAboutArea .smileballAboutAreaInner .btn a:hover {
    color: #ffffff;
}

.smileballAboutArea .smileballAboutAreaInner .img01 {
    position: absolute;
    top: 20px;
    left: 180px;
}

.smileballAboutArea .smileballAboutAreaInner .img02 {
    position: absolute;
    bottom: -125px;
    right: 150px;
}

@media screen and (max-width: 1023px) {
    .smileballAboutArea {
        padding: 0 2.66vw;
        min-width: 100%;
        box-sizing: border-box;
    }

    .smileballAboutArea .smileballAboutAreaInner {
        min-width: 100%;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/sp/smileballAboutBk.jpg");
        background-size: cover;
        padding: 11.6vw 0 13.3vw 0;
        position: relative;
        margin-bottom: 5.066vw;
    }

    .smileballAboutArea .smileballAboutAreaInner h2 {
        text-align: center;
        padding-bottom: 6.13vw;
    }

    .smileballAboutArea .smileballAboutAreaInner h2 .orangeText {
        font-size: 4.8vw;
        font-weight: bold;
        color: #e26a00;
        margin-top: 3.46vw;
    }

    .smileballAboutArea .smileballAboutAreaInner h2 img {
        width: 50.53vw;
    }

    .smileballAboutArea .smileballAboutAreaInner .text01 {
        margin: 0 auto;
        width: 21em;
        text-align: center;
        font-size: 3.46vw;
        line-height: 5.866vw;
    }

    .smileballAboutArea .smileballAboutAreaInner .btn {
        margin: 0 auto;
        width: 61.33vw;
        margin-top: 1vw;
    }

    .smileballAboutArea .smileballAboutAreaInner .btn a {
        display: block;
        padding: 2.6vw 4.26vw;
        border: 2px solid #e26a00;
        color: #e26a00;
        font-weight: bold;
        text-decoration: none;
        font-size: 3.2vw;
        position: relative;
        z-index: 3;
    }

    .smileballAboutArea .smileballAboutAreaInner .img01 {
        position: absolute;
        top: 3.733vw;
        left: -3vw;
        width: 32vw;
    }

    .smileballAboutArea .smileballAboutAreaInner .img02 {
        position: absolute;
        bottom: -14vw;
        right: -6.66vw;
        width: 29vw;
        z-index: 0;
    }
}

@media screen and (min-width: 1024px) {
    .smileballSecretArea {
        position: relative;
    }

    .smileballSecretArea .smileballSecreatAreaInner {
        margin: 0 auto;
        max-width: 1120px;
        display: flex;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerMain .smileballSecreatAreaInnerMainImage {
        position: relative;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerMain .smileballSecreatAreaInnerMainImage img {
        position: relative;
        visibility: hidden;
        opacity: 0;
        transform: translate(-80px, -40px);
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerMain .smileballSecreatAreaInnerMainImage.active img {
        visibility: visible;
        opacity: 1;
        transform: translate(0, 0);
        transition: all .6s .4s ease-out;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerMain .smileballSecreatAreaInnerMainImage.active::before {
        opacity: 1;
        transform: translate(0, 0);
        transition: all .4s;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerMain .smileballSecreatAreaInnerMainImage::before {
        content: "";
        display: block;
        position: absolute;
        top: 60px;
        right: 160px;
        bottom: -60px;
        left: -160px;
        background: #f3ede2;
        opacity: 0;
        transform: translate(-80px, -40px);
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub {
        width: 410px;
        padding-top: 80px;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub .border {
        margin: 0 auto;
        width: 360px;
        border-top: none;
        padding-left: 50px;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub h2 {
        border-top: 4px solid #e26a00;
        font-size: 14px;
        font-weight: bold;
        padding: 40px 0 30px;
        color: #e26a00;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub h3 {
        font-size: 30px;
        padding-bottom: 26px;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub .text02 {
        font-size: 16px;
        color: #4b4b4b;
        letter-spacing: 1px;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub .btn {
        margin: 0 auto 0 0;
        width: 300px;
        text-align: center;
        margin-top: 38px;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub a {
        display: block;
        padding: 20px 0;
        border: 2px solid #e26a00;
        color: #e26a00;
        font-weight: bold;
        text-decoration: none;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub a:hover {
        color: #fff;
    }
}

@media screen and (max-width: 1023px) {
    .smileballSecretArea {
        position: relative;
    }

    .smileballSecretArea .smileballSecreatAreaInner {
        min-width: 100%;
        text-align: left;
        background-color: #eae5da;
        position: relative;
        display: block;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerMain .img03 {
        width: 100%;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub {
        display: block;
        margin: 0 2.66vw;
        background-color: #fff;
        padding-bottom: 9.6vw;
        position: relative;
        bottom: 8vw;
        box-shadow: 0 0 2.66vw rgba(0, 0, 0, 0.15);
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub .border {
        margin: 0 auto;
        width: 76vw;
        border-top: 1.066vw solid #e26a00;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub h2 {
        font-size: 2.666vw;
        color: #e26a00;
        font-weight: bold;
        padding: 8.9vw 0vw 2.4vw;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub h3 {
        font-size: 5.333vw;
        padding: 0 0vw 7.333vw;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub .text02 {
        font-size: 3.466vw;
        padding: 0 0 7.333vw;
        color: #4b4b4b;
        line-height: 1.8em;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub .btn {
        position: relative;
        z-index: 2;
        color: #333;
        overflow: hidden;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub .btn a {
        display: block;
        padding: 2.6vw 4.26vw;
        border: 0.533vw solid #e26a00;
        color: #e26a00;
        font-weight: bold;
        text-decoration: none;
        font-size: 3.2vw;
        position: relative;
        z-index: 3;
    }

    .smileballSecretArea .smileballSecreatAreaInner .smileballSecreatAreaInnerSub .btn a:hover {
        color: white;
    }
}

@media screen and (min-width: 1024px) {
    .smileballProductArea {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .smileballProductArea .smileballProductAreaInner {
        margin: 0 auto;
        max-width: 1120px;
        padding: 70px 0 0 0px;
        display: flex;
        justify-content: center;
        flex-direction: row-reverse;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaMain .smileballProductAreaMainImage {
        position: relative;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaMain .smileballProductAreaMainImage img {
        position: relative;
        visibility: hidden;
        opacity: 0;
        transform: translate(80px, -40px);
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaMain .smileballProductAreaMainImage.active img {
        visibility: visible;
        opacity: 1;
        transform: translate(0, 0);
        transition: all .6s .4s ease-out;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaMain .smileballProductAreaMainImage.active::before {
        opacity: 1;
        transform: translate(0, 0);
        transition: all .4s;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaMain .smileballProductAreaMainImage::before {
        content: "";
        display: block;
        position: absolute;
        top: 60px;
        right: -160px;
        bottom: -60px;
        left: 160px;
        background: #f3ede2;
        opacity: 0;
        transform: translate(80px, -40px);
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaMain .img05 {
        position: relative;
        right: calc(50% - 1000px);
        bottom: -15px;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub {
        max-width: 410px;
        padding: 80px 0 45px;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .border {
        margin: 0 auto;
        width: 360px;
        border-top: none;
        padding-right: 50px;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub h2 {
        border-top: 4px solid #e26a00;
        font-size: 14px;
        font-weight: bold;
        padding: 40px 0 30px;
        color: #e26a00;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub h3 {
        font-size: 30px;
        padding-bottom: 26px;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .text03 {
        font-size: 16px;
        color: #4b4b4b;
        letter-spacing: 1px;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .btn {
        margin: 0 auto 0 0;
        width: 300px;
        text-align: center;
        margin-top: 38px;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .btn a {
        display: block;
        padding: 20px 0;
        border: 2px solid #e26a00;
        color: #e26a00;
        font-weight: bold;
        text-decoration: none;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .btn a:hover {
        color: #fff;
    }
}

@media screen and (max-width: 1023px) {
    .smileballProductArea .smileballProductAreaInner {
        min-width: 100%;
        text-align: left;
        background-color: #eae5da;
        position: relative;
        display: block;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaMain .img04 {
        width: 100%;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaMain .imgBk {
        position: relative;
        z-index: 0;
        top: 60px;
        right: calc(50% - 514px );
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub {
        display: block;
        margin: 0 2.66vw;
        background-color: #fff;
        padding-bottom: 9.6vw;
        position: relative;
        bottom: 8vw;
        box-shadow: 0 0 2.66vw rgba(0, 0, 0, 0.15);
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub::after {
        content: "";
        display: block;
        width: 22.4vw;
        height: 30vw;
        position: absolute;
        bottom: -15.2vw;
        right: -2.66vw;
        background: url(/tsunagu/vegetables/smileball/asset/img/sp/smileballProductAreaBotton.png) 0 0 no-repeat;
        background-size: contain;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .border {
        margin: 0 auto;
        width: 76vw;
        border-top: 1.066vw solid #e26a00;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub h2 {
        font-size: 2.666vw;
        color: #e26a00;
        font-weight: bold;
        padding: 8.9vw 0vw 2.4vw;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub h3 {
        font-size: 5.333vw;
        padding: 0 0vw 7.333vw;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .text03 {
        font-size: 3.466vw;
        padding: 0 0 7.333vw;
        color: #4b4b4b;
        line-height: 1.8em;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .btn {
        margin: 0 auto;
        text-align: center;
        width: 62.84vw;
        font-size: 3.2vw;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .btn a {
        display: block;
        padding: 2.6vw 4.26vw;
        border: 0.533vw solid #e26a00;
        color: #e26a00;
        font-weight: bold;
        text-decoration: none;
        font-size: 3.2vw;
        position: relative;
        z-index: 3;
    }

    .smileballProductArea .smileballProductAreaInner .smileballProductAreaSub .btn a:hover {
        color: #fff;
    }
}

.smileballRecipeListArea {
    margin: 0 auto;
    max-width: 1120px;
    display: flex;
    justify-content: center;
}

.smileballRecipeListArea .smileballRecipeListAreaInner {
    display: flex;
    padding: 140px 0 0 0;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain {
    background-image: url("/tsunagu/vegetables/smileball/asset/img/smileballRecipeListAreaMainBk.jpg");
    background-size: cover;
    background-position: bottom;
    text-align: center;
    padding: 140px 0;
    margin: 0 10px 10px 0;
    width: 560px;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain .text04 {
    color: #ffffff;
    padding-top: 20px;
    font-size: 16px;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain .btn2 {
    margin: 20px auto 0;
    width: 296px;
    text-align: center;
    font-size: 16px;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain .btn2:hover::after {
    background: #fff;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain .btn2:hover i {
    background: url(/tsunagu/vegetables/smileball/asset/img/arrow.png);
    background-size: contain;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain .btn2 a {
    display: block;
    padding: 20px 0;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain .btn2 a:hover {
    color: #e26a00;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea {
    width: 560px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .box {
    width: 276px;
    height: 276px;
    margin: 0 0 10px;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg {
    position: relative;
    width: 276px;
    height: 276px;
    margin-right: 0.666vw;
    margin-bottom: 0.666vw;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg:hover::before {
    background-position: 50% 100%;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg::before {
    transition: all .2s ease-out;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(60, 28, 0, 0.6) 50%);
    background-size: 100% 200%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeText {
    position: absolute;
    bottom: 20px;
    left: 18px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    width: 237px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeText i {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/tsunagu/vegetables/smileball/asset/img/arrowWhite.png);
    background-size: contain;
    vertical-align: middle;
    margin: 0 0 2px;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg01 {
    background: url(/tsunagu/vegetables/smileball/asset/img/smileballRecipeListAreaRightImg1.png) no-repeat center;
    background-size: cover;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg02 {
    background: url(/tsunagu/vegetables/smileball/asset/img/smileballRecipeListAreaRightImg2.png) no-repeat center;
    background-size: cover;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg03 {
    background: url(/tsunagu/vegetables/smileball/asset/img/smileballRecipeListAreaRightImg3.png) no-repeat center;
    background-size: cover;
}

.smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg04 {
    background: url(/tsunagu/vegetables/smileball/asset/img/smileballRecipeListAreaRightImg4.png) no-repeat center;
    background-size: cover;
}

@media screen and (max-width: 1023px) {
    .smileballRecipeListArea {
        margin: 0 2.66vw;
        display: block;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner {
        padding: 4vw 0 0 0;
        display: block;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain {
        background-image: url("/tsunagu/vegetables/smileball/asset/img/sp/smileballRecipeListAreaMainBk.jpg");
        background-size: cover;
        background-position: bottom;
        padding: 18.4vw 14.66vw 19.33vw;
        text-align: center;
        margin: 0 0 1.33vw 0;
        width: auto;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain h2 img {
        width: 44.4vw;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain .text04 {
        color: #ffffff;
        padding-top: 4.666vw;
        font-size: 3.2vw;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain .btn2 {
        margin: 7.466vw auto 0;
        width: 64.26vw;
        text-align: center;
        font-size: 3.2vw;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaMain .btn2 a {
        display: block;
        padding: 2.66vw 0;
        border: 2px solid #ffffff;
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea {
        display: flex;
        flex-wrap: wrap;
        width: auto;
        justify-content: space-between;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .box {
        width: 46.4vw;
        height: 46.4vw;
        margin: 0 0 1.33vw;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea a {
        display: block;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg {
        position: relative;
        width: 46.4vw;
        height: 46.4vw;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg::before {
        transition: all .2s;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(60, 28, 0, 0.6) 50%);
        background-size: 100% 200%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: ' ';
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeText {
        position: relative;
        bottom: -38vw;
        left: 2.8vw;
        font-weight: bold;
        color: #fff;
        font-size: 2.6vw;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeText span {
        display: inline-block;
        width: calc( 100% - 35px );
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: middle;
        margin: 0 0 2px;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg01 {
        background: url(/tsunagu/vegetables/smileball/asset/img/smileballRecipeListAreaRightImg1.png) no-repeat center;
        background-size: cover;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg02 {
        background: url(/tsunagu/vegetables/smileball/asset/img/smileballRecipeListAreaRightImg2.png) no-repeat center;
        background-size: cover;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg03 {
        background: url(/tsunagu/vegetables/smileball/asset/img/smileballRecipeListAreaRightImg3.png) no-repeat center;
        background-size: cover;
    }

    .smileballRecipeListArea .smileballRecipeListAreaInner .smileballRecipeListAreaSubArea .recipeImg04 {
        background: url(/tsunagu/vegetables/smileball/asset/img/smileballRecipeListAreaRightImg4.png) no-repeat center;
        background-size: cover;
    }
}

.smileballPurchaseArea {
    padding: 104px 0px 140px;
    background: url(/tsunagu/vegetables/smileball/asset/img/smileballPurchaseAreaBk.png) 50% 100% no-repeat;
    border-bottom: 1px solid #ddd;
}

.smileballPurchaseArea .smileballPurchaseAreaInner {
    width: 1000px;
    margin: 0 auto;
}

.smileballPurchaseArea .smileballPurchaseAreaInner h2 {
    text-align: center;
}

.smileballPurchaseArea .smileballPurchaseAreaInner .text09 {
    width: 465px;
    padding: 62px 0 0 0px;
    line-height: 1.8em;
    color: #4b4b4b;
}

.smileballPurchaseArea .smileballPurchaseAreaInner .smileballPurchaseAreaLogo {
    display: flex;
    justify-content: flex-start;
    margin-top: 18px;
}

.smileballPurchaseArea .smileballPurchaseAreaInner .btn {
    margin: 38px auto 0 0;
    width: 300px;
    text-align: center;
}

.smileballPurchaseArea .smileballPurchaseAreaInner .btn a {
    display: block;
    padding: 20px 0;
    border: 2px solid #e26a00;
    color: #e26a00;
    font-weight: bold;
    text-decoration: none;
}

.smileballPurchaseArea .smileballPurchaseAreaInner .btn a:hover {
    color: #fff;
}

@media screen and (max-width: 1023px) {
    .smileballPurchaseArea {
        padding: 4vw 2.66vw;
        background: none;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner {
        width: 100%;
        margin: 0 auto;
        border: 1px solid #ccc;
        padding-top: 5.466vw;
        padding-bottom: 48.53vw;
        background: url(/tsunagu/vegetables/smileball/asset/img/sp/smileballPurchaseAreaBk.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner h2 {
        text-align: center;
        margin-left: 3.466vw;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner h2 img {
        width: 49.066666vw;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner .text09 {
        margin: 0 auto;
        font-size: 3.2vw;
        width: 21.5em;
        padding: 6.933vw 0 0 0;
        padding-bottom: 2vw;
        line-height: 1.8em;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner .smileballPurchaseAreaLogo {
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner .smileballPurchaseAreaLogo .img10 {
        padding-right: 4.3333vw;
        padding-bottom: 4.6vw;
        width: 27.46vw;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner .smileballPurchaseAreaLogo .img11 {
        margin-top: 1.5vw;
        margin-bottom: 5.33vw;
        width: 63vw;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner .btn {
        margin: 0 auto;
        width: 62.84vw;
        text-align: center;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner .btn a {
        display: block;
        padding: 3vw 0;
        color: #e26a00;
        text-decoration: none;
        font-size: 3.2vw;
        font-weight: bold;
    }

    .smileballPurchaseArea .smileballPurchaseAreaInner .btn a:hover {
        color: #ffffff;
    }
}

.smileballInfoArea {
    margin: 30px 2.66vw;
    text-align: center;
}

@media screen and (min-width: 1024px) {
    .smileballInfoArea {
        width: 1120px;
        display: block;
        position: relative;
        margin: 60px auto 180px;
        background-size: contain;
    }

    .smileballInfoArea .imgLink {
        display: block;
        position: absolute;
        background: url(/tsunagu/vegetables/smileball/asset/img/infoImg.png) 0 0 no-repeat;
        background-size: contain;
        box-sizing: border-box;
        width: 565px;
        height: 364px;
    }
}

.smileballInfoArea .smileballInfoAreaImg {
    margin: 0 0 15px;
}

@media screen and (min-width: 1024px) {
    .smileballInfoArea .smileballInfoAreaImg {
        display: none;
    }
}

.smileballInfoArea .smileballInfoAreaShare p {
    font-size: 3.2vw;
    font-weight: bold;
    padding-top: 10px;
    color: #4b4b4b;
}

.smileballInfoArea .smileballInfoAreaShare ul {
    display: flex;
    font-weight: bold;
    padding-top: 10px;
    justify-content: center;
    align-items: center;
}

.smileballInfoArea .smileballInfoAreaShare ul li {
    vertical-align: middle;
}

.smileballInfoArea .smileballInfoAreaShare ul .fb {
    margin-right: 15px;
}

.smileballInfoArea .smileballInfoAreaShare a:hover {
    opacity: 0.7;
}

@media screen and (min-width: 1024px) {
    .smileballInfoArea .smileballInfoAreaShare {
        margin-left: 610px;
        text-align: left;
    }

    .smileballInfoArea .smileballInfoAreaShare p {
        font-size: 16px;
    }

    .smileballInfoArea .smileballInfoAreaShare ul {
        justify-content: left;
    }
}

.smileballInfoArea .smileballInfoAreaShare ul {
    padding: 0 0 10px;
}

.smileballInfoArea .smileballInfoAreaShare ul li {
    display: inline-block;
    vertical-align: middle;
}

.smileballInfoArea .smileballInfoAreaShare ul li.tw {
    margin-top: 8px;
}

.smileballInfoArea .smileballInfoAreaShareInsta {
    margin: 0 0 15px;
}

.smileballInfoArea .smileballInfoAreaShareInsta img {
    border: 1px solid #dddddd;
}

@media screen and (min-width: 1024px) {
    .smileballInfoArea .smileballInfoAreaShareInsta {
        margin: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
}

@media screen and (min-width: 1024px) {
    .smileballInfoArea .smileballInfoAreaNav {
        margin: 0 0 0 610px;
    }
}

.smileballInfoArea .smileballInfoAreaPageNav {
    text-align: left;
    padding-left: 5vw;
}

@media screen and (min-width: 1024px) {
    .smileballInfoArea .smileballInfoAreaPageNav {
        padding-left: 0;
        margin: 20px 0 0;
    }
}

.smileballInfoArea .smileballInfoAreaPageNav ul {
    display: flex;
    flex-wrap: wrap;
}

.smileballInfoArea .smileballInfoAreaPageNav ul li {
    width: 50%;
    font-size: 2.46vw;
}

@media screen and (min-width: 1024px) {
    .smileballInfoArea .smileballInfoAreaPageNav ul li {
        width: 246px;
        margin-right: 10px;
        font-size: 16px;
        padding-bottom: 20px;
    }

    .smileballInfoArea .smileballInfoAreaPageNav ul li:nth-child(even) {
        margin-right: 0;
    }
}

.smileballInfoArea .smileballInfoAreaPageNav ul li a {
    text-decoration: none;
    color: #4b4b4b;
}

@media screen and (max-width: 1023px) {
    .smileballInfoArea .smileballInfoAreaPageNav ul li a {
        display: block;
        line-height: 1.8;
        padding: 1vw;
    }
}

.smileballInfoArea .smileballInfoAreaPageNav ul li a:hover {
    text-decoration: underline;
}

.smileballInfoArea .smileballInfoAreaPageNav ul i {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/tsunagu/vegetables/smileball/asset/img/arrow.png);
    background-size: contain;
    vertical-align: middle;
    margin: 0 5px 2px 0;
}

.smileballInfoArea .smileballInfoAreaServices .smileballInfoAreaServicesTitle {
    position: relative;
    background: #e26a00;
    padding: 1.33vw 0;
    text-align: center;
    color: #fff;
    margin: 15px 0;
    font-size: 2.46vw;
}

.smileballInfoArea .smileballInfoAreaServices .smileballInfoAreaServicesTitle::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 10px 0 10px;
    border-color: #e26a00 transparent transparent transparent;
    position: absolute;
    bottom: -4px;
    left: 50%;
    margin-left: -10px;
}

@media screen and (min-width: 1024px) {
    .smileballInfoArea .smileballInfoAreaServices .smileballInfoAreaServicesTitle {
        font-size: 16px;
        padding: 5px;
    }
}

.smileballInfoArea .smileballInfoAreaServices ul {
    display: flex;
    justify-content: center;
}

.sp {
    display: none;
}

@media screen and (max-width: 1023px) {
    .sp {
        display: block;
        margin: 0 auto;
    }

    img .sp {
        display: inline-block;
    }

    .pc {
        display: none;
    }
}

.btn::before, .btn::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

.btn, .btn::before, .btn::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btn {
    position: relative;
    z-index: 2;
    color: #333;
    overflow: hidden;
    text-align: center;
}

.btn i {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/tsunagu/vegetables/smileball/asset/img/arrow.png);
    background-size: contain;
    vertical-align: middle;
    margin: 0 0 2px;
}

.btn :hover i {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/tsunagu/vegetables/smileball/asset/img/arrowWhite.png);
    background-size: contain;
    vertical-align: middle;
    margin: 0 0 2px;
}

.btn:hover {
    color: #fff;
}

.btn::after {
    left: -100%;
    width: 100%;
    height: 100%;
}

.btn:hover::after {
    top: 0;
    left: 0;
    background-color: #e26a00;
}

.btn2::before, .btn2::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

.btn2, .btn2::before, .btn2::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btn2 {
    position: relative;
    z-index: 2;
    color: #333;
    overflow: hidden;
}

.btn2 i {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/tsunagu/vegetables/smileball/asset/img/arrowWhite.png);
    background-size: contain;
    vertical-align: middle;
    margin: 0 0 2px;
}

.btn2:hover {
    color: #fff;
}

.btn2::after {
    left: -100%;
    width: 100%;
    height: 100%;
}

.btn2:hover::after {
    top: 0;
    left: 0;
    background-color: #fff;
}

/* anumation common */
.js-anime-left {
    visibility: hidden;
    opacity: 0;
    transform: translate(-80px, -40px);
}

.active-left {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
    transition: all .6s .4s ease-out;
}

.js-anime-right {
    visibility: hidden;
    opacity: 0;
    transform: translate(80px, -40px);
    z-index: 0;
}

.active-right {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
    transition: all .6s .4s ease-out;
}

.section {
    position: relative;
}

@media screen and (min-width: 1024px) {
    .footer_area {
        margin-top: 92px;
    }
}

@media screen and (max-width: 1023px) {
    .footer_area {
        margin-top: 10.6666666667vw;
    }
}

.smileballAboutKVArea {
    width: 100%;
    height: 458px;
    background-image: url("/tsunagu/vegetables/smileball/asset/img/about/kv.jpg");
    background-size: cover;
    background-position: 50%;
}

.smileballAboutKVArea p {
    text-align: center;
}

.smileballAboutKVArea p .kvText {
    padding-top: 78px;
}

@media screen and (max-width: 1023px) {
    .smileballAboutKVArea {
        width: 100vw;
        height: 74.66vw;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/about/sp/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballAboutKVArea p {
        text-align: center;
    }

    .smileballAboutKVArea p .kvText {
        padding-top: 12vw;
        width: 50.666vw;
    }
}

/* about */
.aboutAreaContent1TextArea h2 {
    color: #e07300;
}

.aboutAreaContent1TextArea h3 {
    text-align: left;
}

.aboutAreaContent1TextArea .aboutAreaContent1Text {
    text-align: left;
    color: #4b4b4b;
}

.Content1Different {
    background-color: #f3ede2;
}

.Content1Different .Content1DifferentInnerGreen {
    background-color: #76b410;
}

.Content1Different .Content1DifferentInnerGreen .Innertext01 {
    color: #fff;
    font-weight: bold;
}

.Content1Different .Content1DifferentInnerGreen .Innertext02 {
    color: #dceacd;
    font-weight: bold;
}

.Content1Different .Content1DifferentInnerWhite {
    background-color: #ffffff;
}

.Content1Different .Content1DifferentInnerWhite .Innertext01 {
    font-weight: bold;
    color: #999999;
}

.Content1Different .Content1DifferentInnerWhite .Innertext02 {
    font-weight: bold;
    color: #4b4b4b;
}

.Content1Different .Content1DifferentInnerWhite .Innertext03 {
    color: #e26a00;
    font-weight: bold;
}

.Content1Different .Content1DifferentInnerOrange {
    background-color: #e26a00;
}

.Content1Different .Content1DifferentInnerOrange .Innertext01 {
    color: #fff;
    font-weight: bold;
}

.Content1Different .Content1DifferentInnerOrange .Innertext02 {
    color: #f7dacb;
    font-weight: bold;
}

@media screen and (min-width: 1024px) {
    .aboutAreaContent1 {
        margin: 0 auto;
        width: 100%;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner {
        max-width: 1120px;
        margin: 80px auto 164px;
        display: flex;
        position: relative;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .aboutAreaContent1TextArea {
        width: 420px;
        margin: 80px 0 0 -80px;
        padding: 58px 0 0 60px;
        position: absolute;
        background-color: #fff;
        right: 0px;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .aboutAreaContent1TextArea h2 {
        font-size: 14px;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .aboutAreaContent1TextArea h3 {
        padding: 30px 0 0 0;
        font-size: 30px;
        width: 14em;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .aboutAreaContent1TextArea .aboutAreaContent1Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        width: 26em;
        line-height: 30px;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .title-border:before {
        margin-right: 0.5rem;
    }

    .aboutAreaContent1 .Content1Different h4 {
        text-align: center;
        font-size: 30px;
        padding: 60px 0 32px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner {
        max-width: 1120px;
        margin: 0 auto;
        text-align: center;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea {
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner1 .Content1DifferentInnerNone {
        background-color: none;
        color: #999999;
        height: 70px;
        width: 170px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner1 .Content1DifferentInnerNone p {
        font-size: 14px;
        font-weight: bold;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerGreen {
        padding: 0px;
        width: 260px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerGreen .Innertext01 {
        font-size: 24px;
        padding: 27px 0 0 0;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerGreen .Innertext02 {
        padding-top: 10px;
        padding-bottom: 36px;
        font-size: 14px;
        line-height: 1.3em;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite {
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
        height: 70px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite .Innertext01 {
        padding-bottom: 2.133vw;
        font-size: 3.2vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite .Innertext02 {
        font-size: 16px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite .Innertext03 {
        font-size: 20px;
        line-height: 1em;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerGreen {
        padding: 0px;
        width: 260px;
        border-left: 1px solid #91be47;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerGreen .Innertext01 {
        font-size: 24px;
        padding: 27px 0 0 0;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerGreen .Innertext02 {
        padding-top: 10px;
        padding-bottom: 36px;
        font-size: 14px;
        line-height: 1.3em;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite {
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
        height: 70px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite .Innertext01 {
        padding-bottom: 2.133vw;
        font-size: 3.2vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite .Innertext02 {
        font-size: 16px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite .Innertext03 {
        font-size: 20px;
        line-height: 1em;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 table {
        margin-bottom: -10px;
        box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.2);
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange {
        padding: 33px 0 29px;
        width: 320px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange .Innertext01 {
        font-size: 24px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange .Innertext01 span {
        font-size: 14px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange .Innertext02 {
        padding-top: 14px;
        font-size: 14px;
        line-height: 1.4em;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite {
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        height: 70px;
        border-right: 1px solid #ddd;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite .Innertext02 {
        font-size: 20px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite .Innertext03 {
        font-size: 20px;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite .Innertext04 {
        font-size: 20px;
        color: #e26a00;
        font-weight: bold;
        padding: 25px 0;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner table {
        text-align: center;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .kome {
        font-size: 14px;
        text-align: center;
        padding-top: 50px;
        padding-bottom: 58px;
        color: #4d4d4d;
        text-align: left;
        margin: 0px 225px auto;
        width: 100%;
    }
}

@media screen and (max-width: 1023px) {
    .aboutAreaContent1 {
        text-align: center;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner {
        padding: 2.66vw 2.53vw 0;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner img {
        width: 100vw;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .title-border:before {
        margin-right: 1rem;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .aboutAreaContent1TextArea {
        padding: 7.466vw 0 8vw;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .aboutAreaContent1TextArea h2 {
        padding: 0 2.8vw 0;
        font-size: 2.666vw;
        font-weight: bold;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .aboutAreaContent1TextArea h3 {
        padding: 2.8vw 2.53vw 0;
        font-size: 5.333vw;
    }

    .aboutAreaContent1 .aboutAreaContent1Inner .aboutAreaContent1TextArea .aboutAreaContent1Text {
        padding: 7.333vw 2.53vw 0;
        font-size: 3.46vw;
        line-height: 1.8em;
    }

    .aboutAreaContent1 .Content1Different h4 {
        font-size: 5.33vw;
        padding: 7.6vw 0 4.6vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner {
        padding: 0 2.66vw 0;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner table {
        width: 100%;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerGreen {
        padding: 5.33vw 0 4.8vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerGreen .Innertext01 {
        font-size: 5.33vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerGreen .Innertext02 {
        padding-top: 2.4vw;
        font-size: 3.466vw;
        line-height: 1.3em;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerWhite {
        border-bottom: 0.1333vw solid #ddd;
        border-left: 0.1333vw solid #ddd;
        border-right: 0.1333vw solid #ddd;
        padding: 8vw 0 6.133vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerWhite .Innertext01 {
        padding-bottom: 2.133vw;
        font-size: 3.2vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerWhite .Innertext02 {
        font-size: 3.2vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerWhite .Innertext03 {
        padding-top: 2.4vw;
        font-size: 4.26vw;
        line-height: 1em;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerWhite .Innertext04 {
        font-size: 4.26vw;
        font-weight: bold;
        color: #4b4b4b;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerOrange {
        padding: 5.33vw 0 4.8vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerOrange .Innertext01 {
        font-size: 5.33vw;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerOrange .Innertext01 span {
        font-size: 3.466vw;
        font-weight: bold;
    }

    .aboutAreaContent1 .Content1Different .Content1DifferentInner .Content1DifferentInnerOrange .Innertext02 {
        padding-top: 2.4vw;
        font-size: 3.466vw;
        line-height: 1.3em;
    }

    .aboutAreaContent1 .kome {
        text-align: left;
        text-indent: -1em;
        margin-left: 1em;
        padding: 5.3vw 2.6666vw 0px;
        font-size: 2.66vw;
        line-height: 1.3em;
        color: #4b4b4b;
    }

    .aboutAreaContent1 .kome:last-child {
        padding-top: 0px;
        padding-bottom: 7.33vw;
    }
}

.aboutAreaContent2TextArea h2 {
    color: #e07300;
}

.aboutAreaContent2TextArea h3 {
    text-align: left;
}

.aboutAreaContent2TextArea .aboutAreaContent2Text {
    text-align: left;
    color: #4b4b4b;
}

@media screen and (min-width: 1024px) {
    .aboutAreaContent2 {
        margin: 0 auto;
        width: 100%;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner {
        max-width: 1120px;
        margin: 164px auto 100px;
        display: flex;
        position: relative;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .aboutAreaContent2TextArea {
        width: 420px;
        background-color: #fff;
        position: absolute;
        top: -70px;
        padding-right: 62px;
        padding-bottom: 65px;
        margin-right: -60px;
        z-index: 10;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .aboutAreaContent2TextArea h2 {
        font-size: 14px;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .aboutAreaContent2TextArea h3 {
        padding: 30px 0 0 0;
        font-size: 30px;
        width: 14em;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .aboutAreaContent2TextArea .aboutAreaContent2Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        width: 26em;
        line-height: 30px;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .title-border:before {
        margin-right: 0.5rem;
    }
}

@media screen and (max-width: 1023px) {
    .aboutAreaContent2 {
        text-align: center;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner {
        padding: 2.66vw 2.53vw 0;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner img {
        width: 100vw;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .title-border:before {
        margin-right: 1rem;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .aboutAreaContent2TextArea {
        padding: 7.466vw 0 8vw;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .aboutAreaContent2TextArea h2 {
        padding: 0 2.8vw 0;
        font-size: 2.666vw;
        font-weight: bold;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .aboutAreaContent2TextArea h3 {
        padding: 2.8vw 2.53vw 0;
        font-size: 5.333vw;
    }

    .aboutAreaContent2 .aboutAreaContent2Inner .aboutAreaContent2TextArea .aboutAreaContent2Text {
        padding: 7.322vw 2.53vw 0;
        font-size: 3.46vw;
        line-height: 1.8em;
    }
}

.aboutAreaContent3TextArea h2 {
    color: #e07300;
}

.aboutAreaContent3TextArea h3 {
    text-align: left;
}

.aboutAreaContent3TextArea .aboutAreaContent3Text {
    text-align: left;
    color: #4b4b4b;
}

@media screen and (min-width: 1024px) {
    .aboutAreaContent3 {
        margin: 0 auto;
        width: 100%;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner {
        display: flex;
        max-width: 1120px;
        margin: 80px auto 164px;
        position: relative;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .aboutAreaContent3TextArea {
        width: 420px;
        margin: 80px 0 0 -80px;
        padding: 58px 0 0 60px;
        position: absolute;
        background-color: #fff;
        right: 0;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .aboutAreaContent3TextArea h2 {
        font-size: 14px;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .aboutAreaContent3TextArea h3 {
        padding: 30px 0 0 0;
        font-size: 30px;
        width: 14em;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .aboutAreaContent3TextArea .aboutAreaContent3Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        width: 26em;
        line-height: 30px;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .title-border:before {
        margin-right: 0.5rem;
    }
}

@media screen and (max-width: 1023px) {
    .aboutAreaContent3 {
        text-align: center;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner {
        padding: 2.66vw 2.53vw 0;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner img {
        width: 100vw;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .title-border:before {
        margin-right: 1rem;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .aboutAreaContent3TextArea {
        padding: 7.466vw 0 8vw;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .aboutAreaContent3TextArea h2 {
        padding: 0 2.8vw 0;
        font-size: 2.666vw;
        font-weight: bold;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .aboutAreaContent3TextArea h3 {
        padding: 2.8vw 2.53vw 0;
        font-size: 5.333vw;
    }

    .aboutAreaContent3 .aboutAreaContent3Inner .aboutAreaContent3TextArea .aboutAreaContent3Text {
        padding: 7.33vw 2.53vw 0;
        font-size: 3.46vw;
        line-height: 1.8em;
    }
}

@media screen and (min-width: 1024px) {
    .aboutAreaContent4 {
        margin: 0 auto;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner {
        max-width: 1120px;
        margin: 164px auto 100px;
        display: flex;
        position: relative;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .aboutAreaContent4TextArea {
        width: 420px;
        background-color: #fff;
        position: absolute;
        top: -70px;
        padding-right: 62px;
        padding-bottom: 65px;
        margin-right: -60px;
        z-index: 10;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .aboutAreaContent4TextArea h2 {
        font-size: 14px;
        color: #e07300;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .aboutAreaContent4TextArea h3 {
        padding: 30px 0 0 0;
        font-size: 30px;
        width: 14em;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .aboutAreaContent4TextArea .aboutAreaContent4Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        width: 26em;
        line-height: 30px;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .title-border:before {
        margin-right: 0.5rem;
    }
}

@media screen and (max-width: 1023px) {
    .aboutAreaContent4 {
        text-align: left;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner {
        padding: 2.66vw 2.53vw 0;
        border-bottom: 0.266vw solid #dddddd;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner img {
        width: 100vw;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .title-border:before {
        margin-right: 1rem;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .aboutAreaContent4TextArea {
        padding: 7.466vw 0 8vw;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .aboutAreaContent4TextArea h2 {
        padding: 0 2.8vw 0;
        font-size: 2.666vw;
        font-weight: bold;
        color: #e07300;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .aboutAreaContent4TextArea h3 {
        padding: 2.8vw 2.53vw 0;
        font-size: 5.333vw;
    }

    .aboutAreaContent4 .aboutAreaContent4Inner .aboutAreaContent4TextArea .aboutAreaContent4Text {
        padding: 7.322vw 2.53vw 0;
        font-size: 3.46vw;
        line-height: 1.8em;
    }
}

.imgPdL370 {
    padding-left: 370px;
}

.imgPdR370 {
    padding-right: 370px;
}

/* Secret KV */
@media screen and (min-width: 1024px) {
    .smileballSecretKVArea {
        width: 100%;
        height: 458px;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/secret/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballSecretKVArea p {
        text-align: center;
    }

    .smileballSecretKVArea p .kvText {
        padding-top: 78px;
    }
}

@media screen and (max-width: 1023px) {
    .smileballSecretKVArea {
        width: 100vw;
        height: 74.66vw;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/secret/sp/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballSecretKVArea p {
        text-align: center;
    }

    .smileballSecretKVArea p .kvText {
        padding-top: 12vw;
        width: 50.666vw;
    }
}

/* secret */
@media screen and (min-width: 1024px) {
    .secretAreaContent1 {
        margin: 0 auto;
        width: 100%;
    }

    .secretAreaContent1 .secretAreaContent1Inner {
        max-width: 1120px;
        margin: 80px auto 410px;
        display: flex;
        position: relative;
    }

    .secretAreaContent1 .secretAreaContent1Inner .secretAreaContent1TextArea {
        width: 420px;
        margin: 80px 0 0 -80px;
        padding: 58px 0 0 60px;
        position: absolute;
        right: 0px;
        background-color: #fff;
    }

    .secretAreaContent1 .secretAreaContent1Inner .secretAreaContent1TextArea h2 {
        color: #e07300;
        font-size: 14px;
    }

    .secretAreaContent1 .secretAreaContent1Inner .secretAreaContent1TextArea h3 {
        padding: 30px 1px 0 0;
        font-size: 30px;
        text-align: left;
    }

    .secretAreaContent1 .secretAreaContent1Inner .secretAreaContent1TextArea .secretAreaContent1Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        text-align: left;
        color: #4b4b4b;
        width: 26em;
        line-height: 28px;
    }

    .secretAreaContent1 .secretAreaContent1Inner .secretAreaContent1TextArea .secretAreaContent1Text span {
        font-size: 14px;
        line-height: 1em;
    }

    .secretAreaContent1 .secretAreaContent1Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .secretAreaContent1 .secretAreaContent1Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .secretAreaContent1 .secretAreaContent1Inner .title-border:before {
        margin-right: 0.5rem;
    }

    .secretAreaContent1 .Content1Different {
        background-color: #f3ede2;
    }

    .secretAreaContent1 .Content1Different h4 {
        text-align: center;
        font-size: 30px;
        padding: 60px 0 32px;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner {
        max-width: 1120px;
        margin: 0 auto;
        text-align: center;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea {
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner1 .Content1DifferentInnerNone {
        background-color: none;
        color: #999999;
        height: 70px;
        width: 160px;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner1 .Content1DifferentInnerNone p {
        font-size: 14px;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerGreen {
        background-color: #76b410;
        padding: 0px;
        width: 260px;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerGreen .Innertext01 {
        font-size: 24px;
        color: #fff;
        padding: 27px 0 0 0;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerGreen .Innertext02 {
        padding-top: 10px;
        padding-bottom: 36px;
        font-size: 14px;
        line-height: 1.3em;
        color: #dceacd;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite {
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
        height: 70px;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite .Innertext01 {
        padding-bottom: 2.133vw;
        color: #999999;
        font-size: 3.2vw;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite .Innertext02 {
        font-size: 16px;
        font-weight: bold;
        color: #4b4b4b;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite .Innertext03 {
        font-size: 20px;
        line-height: 1em;
        color: #e26a00;
        font-weight: bold;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerGreen {
        background-color: #76b410;
        padding: 0px;
        width: 260px;
        border-left: 1px solid #91be47;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerGreen .Innertext01 {
        font-size: 24px;
        color: #fff;
        padding: 27px 0 0 0;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerGreen .Innertext02 {
        padding-top: 10px;
        padding-bottom: 36px;
        font-size: 14px;
        line-height: 1.3em;
        color: #dceacd;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite {
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
        height: 70px;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite .Innertext01 {
        padding-bottom: 2.133vw;
        color: #999999;
        font-size: 3.2vw;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite .Innertext02 {
        font-size: 16px;
        font-weight: bold;
        color: #4b4b4b;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite .Innertext03 {
        font-size: 20px;
        line-height: 1em;
        color: #e26a00;
        font-weight: bold;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 table {
        margin-bottom: -10px;
        box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.4);
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange {
        background-color: #e26a00;
        padding: 33px 0 29px;
        width: 320px;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange .Innertext01 {
        font-size: 24px;
        color: #fff;
        line-height: 0.7em;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange .Innertext01 span {
        font-size: 14px;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange .Innertext02 {
        padding-top: 14px;
        font-size: 14px;
        line-height: 1.3em;
        color: #dceacd;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite {
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        height: 70px;
        border-right: 1px solid #ddd;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite .Innertext02 {
        font-size: 20px;
        font-weight: bold;
        color: #4b4b4b;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite .Innertext03 {
        font-size: 20px;
        color: #e26a00;
        font-weight: bold;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite .Innertext04 {
        font-size: 20px;
        color: #e26a00;
        font-weight: bold;
        padding: 25px 0;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner table {
        text-align: center;
    }

    .secretAreaContent1 .Content1Different .Content1DifferentInner .kome {
        font-size: 14px;
        text-align: center;
        padding-top: 50px;
        padding-bottom: 58px;
        color: #4d4d4d;
    }
}

@media screen and (max-width: 1023px) {
    .secretAreaContent1 {
        text-align: center;
    }

    .secretAreaContent1 .secretAreaContent1Inner {
        padding: 2.66vw 2.53vw 0;
    }

    .secretAreaContent1 .secretAreaContent1Inner img {
        width: 100vw;
    }

    .secretAreaContent1 .secretAreaContent1Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .secretAreaContent1 .secretAreaContent1Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .secretAreaContent1 .secretAreaContent1Inner .title-border:before {
        margin-right: 1rem;
    }

    .secretAreaContent1 .secretAreaContent1Inner .secretAreaContent1TextArea {
        padding: 7.466vw 0 8vw;
    }

    .secretAreaContent1 .secretAreaContent1Inner .secretAreaContent1TextArea h2 {
        padding: 0 2.8vw 0;
        color: #e07300;
        font-size: 2.666vw;
        font-weight: bold;
    }

    .secretAreaContent1 .secretAreaContent1Inner .secretAreaContent1TextArea h3 {
        padding: 4vw 2.53vw 0;
        font-size: 5.333vw;
        text-align: left;
    }

    .secretAreaContent1 .secretAreaContent1Inner .secretAreaContent1TextArea .secretAreaContent1Text {
        padding: 8vw 2.53vw 0;
        font-size: 3.3vw;
        text-align: left;
        color: #4b4b4b;
        line-height: 1.8em;
    }
}

@media screen and (min-width: 1024px) {
    .secretAreaContent2 {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        display: flex;
        justify-content: center;
        background-color: #f3ede2;
        padding: 90px 0 70px;
    }

    .secretAreaContent2 .secretAreaContent2Inner-1 {
        background-color: #fff;
        width: 360px;
        padding: 0 60px 53px;
        margin-right: 40px;
    }

    .secretAreaContent2 .secretAreaContent2Inner-2 {
        background-color: #fff;
        width: 360px;
        padding: 0 60px 53px;
    }

    .secretAreaContent2 img {
        margin-top: -40px;
    }

    .secretAreaContent2 .secretAreaDepart {
        line-height: 1em;
        color: #e26a00;
        font-size: 14px;
        margin-top: 20px;
    }

    .secretAreaContent2 .secretAreaName {
        line-height: 1em;
        color: #e26a00;
        font-size: 24px;
        padding-top: 12px;
        padding-bottom: 20px;
        font-weight: bold;
    }

    .secretAreaContent2 h2 {
        padding-top: 20px;
        font-size: 22px;
        border-top: 1px solid #dddddd;
        text-align: left;
        margin: 0 auto;
    }

    .secretAreaContent2 .secretAreaContent2TextArea {
        text-align: left;
        font-size: 16px;
        color: #4b4b4b;
        padding-top: 10px;
        line-height: 30px;
    }
}

@media screen and (max-width: 1023px) {
    .secretAreaContent2 {
        text-align: center;
    }

    .secretAreaContent2 .secretAreaContent2Inner-1 {
        background-image: url(/tsunagu/vegetables/smileball/asset/img/secret/sp/content2Bk.gif);
        background-size: cover;
        height: 128vw;
        padding: 2.66vw 2.53vw 0;
    }

    .secretAreaContent2 .secretAreaContent2Inner-2 {
        background-image: url(/tsunagu/vegetables/smileball/asset/img/secret/sp/content2Bk-2.gif);
        background-size: cover;
        height: 135.9vw;
        padding: 2.66vw 2.53vw 0;
    }

    .secretAreaContent2 img {
        width: 30.666vw;
    }

    .secretAreaContent2 .secretAreaDepart {
        line-height: 1em;
        color: #e26a00;
        font-size: 2.666vw;
        margin-top: 4vw;
    }

    .secretAreaContent2 .secretAreaName {
        line-height: 1em;
        color: #e26a00;
        font-size: 5.333vw;
        padding-top: 2.533vw;
        padding-bottom: 5.2vw;
        font-weight: bold;
    }

    .secretAreaContent2 h2 {
        padding-top: 5.33vw;
        font-size: 5.333vw;
        border-top: 0.266vw solid #dddddd;
        text-align: left;
        margin: 0 2.53vw 0;
    }

    .secretAreaContent2 .secretAreaContent2TextArea {
        text-align: left;
        padding: 5.33vw 2.2vw 10.7vw;
        font-size: 3.46vw;
        color: #4b4b4b;
        line-height: 1.7em;
    }
}

@media screen and (min-width: 1024px) {
    .secretAreaContent3 {
        margin: 0 auto;
        width: 100%;
        border-bottom: 1px solid #dddddd;
    }

    .secretAreaContent3 .secretAreaContent3Inner {
        max-width: 1120px;
        margin: 174px auto 120px;
        display: flex;
        position: relative;
    }

    .secretAreaContent3 .secretAreaContent3Inner .secretAreaContent3TextArea {
        width: 420px;
        background-color: #fff;
        position: absolute;
        top: -70px;
        padding: 0 62px 25px 0;
        margin-right: -60px;
        z-index: 10;
    }

    .secretAreaContent3 .secretAreaContent3Inner .secretAreaContent3TextArea h2 {
        color: #e07300;
        font-size: 14px;
    }

    .secretAreaContent3 .secretAreaContent3Inner .secretAreaContent3TextArea h3 {
        padding: 30px 0 0 0;
        font-size: 30px;
        text-align: left;
        width: 14em;
    }

    .secretAreaContent3 .secretAreaContent3Inner .secretAreaContent3TextArea .secretAreaContent3Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        text-align: left;
        color: #4b4b4b;
        width: 26em;
        line-height: 30px;
    }

    .secretAreaContent3 .secretAreaContent3Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .secretAreaContent3 .secretAreaContent3Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .secretAreaContent3 .secretAreaContent3Inner .title-border:before {
        margin-right: 0.5rem;
    }
}

@media screen and (max-width: 1023px) {
    .secretAreaContent3 {
        text-align: center;
    }

    .secretAreaContent3 .secretAreaContent3Inner {
        padding: 5.33vw 2.53vw 0;
        border-bottom: 0.266vw solid #dddddd;
    }

    .secretAreaContent3 .secretAreaContent3Inner img {
        width: 100vw;
    }

    .secretAreaContent3 .secretAreaContent3Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .secretAreaContent3 .secretAreaContent3Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .secretAreaContent3 .secretAreaContent3Inner .title-border:before {
        margin-right: 1rem;
    }

    .secretAreaContent3 .secretAreaContent3Inner .secretAreaContent3TextArea {
        padding: 7.466vw 0 8vw;
    }

    .secretAreaContent3 .secretAreaContent3Inner .secretAreaContent3TextArea h2 {
        padding: 0 2.8vw 0;
        color: #e07300;
        font-size: 2.666vw;
        font-weight: bold;
    }

    .secretAreaContent3 .secretAreaContent3Inner .secretAreaContent3TextArea h3 {
        padding: 4vw 2.53vw 0;
        font-size: 5.333vw;
        text-align: left;
    }

    .secretAreaContent3 .secretAreaContent3Inner .secretAreaContent3TextArea .secretAreaContent3Text {
        padding: 8vw 2.53vw 0;
        font-size: 3.46vw;
        text-align: left;
        color: #4b4b4b;
        line-height: 1.8em;
    }
}

.imgPdL370 {
    padding-left: 370px;
}

.imgPdR370 {
    padding-right: 370px;
}

.smileballRecipeAllKVArea {
    width: 100%;
    height: 460px;
    background-image: url("/tsunagu/vegetables/smileball/asset/img/recipe/kvAll.jpg");
    background-size: cover;
    background-position: 50%;
}

.smileballRecipeAllKVArea p {
    text-align: center;
}

.smileballRecipeAllKVArea p .kvText {
    padding-top: 78px;
}

@media screen and (max-width: 1023px) {
    .smileballRecipeAllKVArea {
        width: 100vw;
        height: 74.6vw;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/recipe/sp/kvAll.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballRecipeAllKVArea p {
        text-align: center;
    }

    .smileballRecipeAllKVArea p .kvText {
        padding-top: 12vw;
        width: 50.666vw;
    }
}

.smileballRecipesBorder {
    border-bottom: 1px solid #ddd;
}

.smileballRecipes {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 100px;
}

@media screen and (max-width: 1023px) {
    .smileballRecipes {
        padding-bottom: 0px;
    }
}

.smileballRecipes a {
    text-decoration: none;
    color: #4b4b4b;
}

.smileballRecipesHeaderWrap {
    margin: 40px 0 0;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .smileballRecipesHeaderWrap {
        margin: 0px 0 0;
    }
}

@media screen and (max-width: 1023px) {
    .smileballRecipesHeader {
        display: flex;
        padding: 10px;
        align-items: center;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipesHeader {
        position: absolute;
        top: 80px;
        left: 0;
    }
}

@media screen and (max-width: 1023px) {
    .smileballRecipesTitle {
        width: 50%;
        padding-right: 10px;
    }
}

.smileballRecipesLead {
    color: #4b4b4b;
}

@media screen and (max-width: 1023px) {
    .smileballRecipesLead {
        font-size: 10px;
        width: 50%;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipesLead {
        margin: 30px 0 0;
    }
}

.smileballRecipes1st {
    padding: 0 10px 10px;
}

@media screen and (max-width: 1023px) {
    .smileballRecipes1st {
        border-bottom: 1px solid #ddd;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipes1st {
        margin: 0 0 40px 410px;
    }
}

@media screen and (max-width: 1023px) {
    .smileballRecipes1stText {
        display: flex;
        justify-content: space-between;
        padding: 15px 0 15px;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipes1stText {
        background: #fff;
        padding: 40px 30px;
        position: absolute;
        right: 50%;
        bottom: 0;
        margin-right: 90px;
        text-align: center;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipes1stTitle {
        font-size: 20px;
        margin: 0 0 10px;
    }
}

.smileballRecipes1stLink {
    color: #e26a00;
}

@media screen and (max-width: 1023px) {
    .smileballRecipes1stLink {
        text-align: right;
    }
}

.smileballRecipes1stLink::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/tsunagu/vegetables/smileball/asset/img/arrow.png) 0 50% no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 0 4px 5px;
}

.smileballRecipes1stLink-2 {
    color: #e26a00;
}

@media screen and (max-width: 1023px) {
    .smileballRecipes1stLink-2 {
        text-align: right;
    }
}

.smileballRecipes1stLink-2::after {
    content: "";
    display: inline-block;
    margin-top: -6px;
    margin-left: 5px;
    width: 13px;
    height: 13px;
    background: url(/common/rwd/imgs/contents/icon_link_external.png) no-repeat 50% 50%;
    -webkit-background-size: 13px 13px;
    background-size: 13px 13px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

@media screen and (min-width: 1024px) {
    .smileballRecipesList {
        display: flex;
        flex-wrap: wrap;
    }
}

.smileballRecipesList.showAll li {
    display: block;
}

.smileballRecipesList li {
    display: none;
}

@media screen and (max-width: 1023px) {
    .smileballRecipesList li:nth-child(1), .smileballRecipesList li:nth-child(2), .smileballRecipesList li:nth-child(3), .smileballRecipesList li:nth-child(4) {
        display: block;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipesList li:nth-child(1), .smileballRecipesList li:nth-child(2), .smileballRecipesList li:nth-child(3), .smileballRecipesList li:nth-child(4), .smileballRecipesList li:nth-child(5), .smileballRecipesList li:nth-child(6), .smileballRecipesList li:nth-child(7), .smileballRecipesList li:nth-child(8) {
        display: block;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipesList li {
        width: 25%;
    }
}

@media screen and (max-width: 1023px) {
    .smileballRecipesList li a {
        display: flex;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        align-items: center;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipesList li a {
        display: block;
        margin: 10px;
    }
}

@media screen and (max-width: 1023px) {
    .smileballRecipesListImg {
        width: 37.3vw;
        padding-right: 10px;
    }
}

.smileballRecipesListTitle {
    margin: 0 0 5px;
}

@media screen and (max-width: 1023px) {
    .smileballRecipesListTitle {
        font-size: 13px;
        width: 50vw;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipesListTitle {
        margin: 15px 0 5px;
        font-size: 16px;
    }
}

.smileballRecipesListLink {
    font-size: 12px;
    color: #e26a00;
}

@media screen and (min-width: 1024px) {
    .smileballRecipesListLink {
        font-size: 14px;
    }
}

.smileballRecipesListLink::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/tsunagu/vegetables/smileball/asset/img/arrow.png) 0 50% no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 0 4px 5px;
}

.smileballRecipesListLink-2 {
    font-size: 12px;
    color: #e26a00;
}

@media screen and (min-width: 1024px) {
    .smileballRecipesListLink-2 {
        font-size: 14px;
    }
}

.smileballRecipesListLink-2::after {
    content: "";
    display: inline-block;
    margin-top: -6px;
    margin-left: 5px;
    width: 13px;
    height: 13px;
    background: url(/common/rwd/imgs/contents/icon_link_external.png) no-repeat 50% 50%;
    -webkit-background-size: 13px 13px;
    background-size: 13px 13px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.smileballRecipesListMoreBtn {
    position: relative;
    margin: -80px auto 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 99%, white 100%);
    padding-top: 80px;
}

@media screen and (min-width: 1024px) {
    .smileballRecipesListMoreBtn {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 99%, white 100%);
        margin: -240px auto -40px;
        padding: 170px 0 40px;
    }
}

.smileballRecipesListMoreBtn a {
    display: block;
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px;
    text-align: center;
    margin: 0 40px;
}

@media screen and (min-width: 1024px) {
    .smileballRecipesListMoreBtn a {
        width: 300px;
        margin: 0 auto 40px;
    }
}

.smileballRecipesListMoreBtn a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/tsunagu/vegetables/smileball/asset/img/recipe/iconPlus.png) 0 50% no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 5px 2px 0;
}

.smileballRecipesSnapDish {
    margin: 10px 10px 40px;
}

@media screen and (min-width: 1024px) {
    .smileballRecipesSnapDish {
        margin: 100px 0;
    }
}

.smileballRecipesUgcTitle {
    margin: 0 0 15px;
    text-align: center;
}

@media screen and (max-width: 1023px) {
    .smileballRecipesUgcTitle img {
        width: 67.7vw;
    }
}

@media screen and (min-width: 1024px) {
    .smileballRecipesUgcTitle {
        margin: 80px 0 15px;
    }
}

.smileballRecipesUgcLead {
    text-align: center;
    color: #4b4b4b;
    margin: 0 0 25px;
}

@media screen and (max-width: 1023px) {
    .smileballRecipesUgcLead {
        font-size: 12px;
    }
}

#vtdr_body {
    padding: 0 10px;
}

@media screen and (max-width: 1023px) {
    #vtdr_body .vtdr_contents + .vtdr_clear {
        position: relative;
        margin: 0 auto 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 99%, white 100%);
        padding-top: 80px;
        top: -80px;
    }

    #vtdr_body #more {
        width: auto;
        height: auto;
        display: block;
        border: 1px solid #ddd;
        background: #fff;
        padding: 10px;
        text-align: center;
        margin: 0 40px;
        border-radius: 0 !important;
        line-height: 1.6em;
    }

    #vtdr_body #more::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url(/tsunagu/vegetables/smileball/asset/img/recipe/iconPlus.png) 0 50% no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin: 0 5px 2px 0;
    }
}

@media screen and (min-width: 1024px) {
    #vtdr_body .vtdr_contents + .vtdr_clear {
        position: relative;
        top: -240px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 99%, white 100%);
        margin: 0 auto -240px;
        padding: 160px 0 40px;
    }
}

@media screen and (min-width: 1024px) and (min-width: 1024px) {
    #vtdr_body #more {
        width: 300px;
        height: auto;
        display: block;
        border: 1px solid #ddd;
        background: #fff;
        padding: 10px;
        text-align: center;
        margin: 0 auto;
        border-radius: 0 !important;
        line-height: 1.6em !important;
        font-size: 16px;
    }

    #vtdr_body #more:hover {
        font-size: inherit;
    }
}

@media screen and (min-width: 1024px) {
    #vtdr_body #more::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url(/tsunagu/vegetables/smileball/asset/img/recipe/iconPlus.png) 0 50% no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin: 0 5px 2px 0;
    }
}

#vtdr_body.jsMoreClicked .vtdr_contents + .vtdr_clear {
    background: none;
    top: 0;
    padding-top: 20px;
}

@media screen and (min-width: 1024px) {
    #vtdr_body.jsMoreClicked .vtdr_contents + .vtdr_clear {
        margin: 0 auto;
    }
}

.smileballRecipeKVArea {
    width: 100%;
    height: 200px;
    background-image: url("/tsunagu/vegetables/smileball/asset/img/recipe/kv.jpg");
    background-size: cover;
    background-position: 50%;
}

@media screen and (max-width: 1023px) {
    .smileballRecipeKVArea {
        width: 100vw;
        height: 26.6vw;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/recipe/sp/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }
}

.recipeDetail {
    max-width: 708px;
    margin: 80px auto;
}

@media screen and (max-width: 1023px) {
    .recipeDetail {
        margin: 0 auto;
        border-bottom: 1px solid #ddd;
    }

    .recipeDetailMainImg {
        margin: 0 auto;
        margin: 20px 0px 0px;
        text-align: center;
    }

    .recipeDetailMainImg img {
        width: 94.66vw;
    }
}

.recipeDetailTitle {
    padding: 30px 0 0;
    font-size: 30px;
    font-weight: bold;
}

@media screen and (max-width: 1023px) {
    .recipeDetailTitle {
        padding: 20px 20px 0;
        font-size: 20px;
    }
}

.recipeDetailListTitle {
    background: #f3ede2;
    padding: 10px;
    text-align: center;
    margin: 30px 0 30px;
    color: #4d4d4d;
}

@media screen and (max-width: 1023px) {
    .recipeDetailListTitle {
        margin: 20px 0;
    }
}

.recipeDetailListSubTitle {
    color: #e26a00;
    margin: 15px 0 0;
}

@media screen and (max-width: 1023px) {
    .recipeDetailListSubTitle {
        margin: 15px 20px;
    }
}

.recipeDetailListSubTitle small {
    font-size: 12px;
}

.recipeDetailList dl {
    display: flex;
    color: #4b4b4b;
    margin: 5px 0;
    align-items: baseline;
}

@media screen and (max-width: 1023px) {
    .recipeDetailList dl {
        margin: 5px 20px;
    }
}

.recipeDetailList dl dt {
    padding: 0 15px 0 0;
    word-break: keep-all;
    white-space: nowrap;
}

.recipeDetailList dl dd {
    width: 100%;
    background: url(/tsunagu/vegetables/smileball/asset/img/recipe/dot.gif) 0 50% repeat-x;
    text-align: right;
}

.recipeDetailList dl dd p {
    display: inline-block;
    background: #fff;
    padding: 0 0 0 15px;
}

.recipeDetailList ol {
    counter-reset: recipeStep;
}

@media screen and (max-width: 1023px) {
    .recipeDetailList ol {
        margin: 0 20px;
    }
}

.recipeDetailList ol li {
    list-style: none;
    margin: 15px 0;
    padding: 0 0 15px 50px;
    position: relative;
    border-bottom: 1px solid #ddd;
    color: #4b4b4b;
}

.recipeDetailList ol li::before {
    position: absolute;
    top: 0;
    left: 0;
    counter-increment: recipeStep;
    content: counter(recipeStep);
    background: #e26a00;
    color: #fff;
    padding: 5px;
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    line-height: 1em;
    border-radius: 50px;
    text-align: center;
}

.recipeDetailBackLink {
    margin: 50px 0 0;
    text-align: center;
    padding-bottom: 7.466vw;
}

.recipeDetailBackLink a {
    display: inline-block;
    border: 2px solid #e26a00;
    padding: 15px 80px;
    text-align: center;
    text-decoration: none;
    color: #e26a00;
    position: relative;
    overflow: hidden;
}

.recipeDetailBackLink a::after {
    content: "";
    display: block;
    background: #e26a00;
    position: absolute;
    top: 0;
    right: 100%;
    width: 100%;
    bottom: 0;
    z-index: -1;
}

.recipeDetailBackLink a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/tsunagu/vegetables/smileball/asset/img/arrowLeft.png) 0 50% no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 10px 4px 0;
}

.recipeDetailBackLink a:hover {
    color: #fff;
}

.recipeDetailBackLink a:hover::before {
    background: url(/tsunagu/vegetables/smileball/asset/img/arrowWhiteLeft.png) 0 50% no-repeat;
    background-size: contain;
}

.recipeDetailBackLink a:hover::after {
    transition: all .2s;
    right: 0%;
}

.recipeDetail .recipeDetailAnnotaition {
    font-size: 14px;
    color: #4b4b4b;
}

.recipeDetail .recipeDetailListAnnotaition {
    font-size: 14px;
    color: #4b4b4b;
    margin: 5px 20px;
}

.smileballInfoAreaBorder {
    border-top: 1px solid #ddd;
}

@media screen and (max-width: 1023px) {
    .smileballInfoAreaBorder {
        border-top: 0 solid #ddd;
    }
}

.mt12 {
    margin-top: 12px;
}

@media screen and (min-width: 1024px) {
    .kanshu_area {
        display: flex;
        margin-top: 100px;
    }

    .kanshu_area .kanshu01 {
        display: inline-block;
        width: 495px;
    }

    .kanshu_area .kanshu01 img {
        width: auto;
        float: left;
        margin-right: 35px;
    }

    .kanshu_area .kanshu01 h3 {
        display: block;
        float: left;
        font-size: 24px;
        color: #e26a00;
        font-weight: bold;
        margin: 38px 0 10px;
    }

    .kanshu_area .kanshu01 h3 span {
        font-size: 14px;
        margin-right: 12px;
    }

    .kanshu_area .kanshu01 .kanshushoukai {
        background: #f3ede2;
        padding: 20px;
        font-size: 12px;
        width: 275px;
        float: left;
    }

    .kanshu_area .kanshuText {
        padding: 30px 0 0 0;
        font-size: 16px;
        width: 485px;
        border-bottom: none;
        display: inline-block;
    }

    .kanshu_area .kanshu02 {
        display: inline-block;
        width: 530px;
    }

    .kanshu_area .kanshu02 img {
        width: auto;
        float: left;
        margin-right: 35px;
    }

    .kanshu_area .kanshu02 h3 {
        display: block;
        float: left;
        font-size: 24px;
        color: #e26a00;
        font-weight: bold;
        margin: 38px 0 10px;
    }

    .kanshu_area .kanshu02 h3 span {
        font-size: 14px;
        margin-right: 12px;
    }

    .kanshu_area .kanshu02 .kanshushoukai {
        background: #f3ede2;
        padding: 18px 20px 18px 20px;
        font-size: 13px;
        width: 275px;
        float: left;
    }
}

@media screen and (max-width: 1023px) {
    .kanshu_area {
        padding: 5.33vw 5.33vw 0;
    }

    .kanshu_area .kanshu01 img {
        width: 53.86vw;
        padding-bottom: 5.33vw;
    }

    .kanshu_area .kanshu01 .kanshushoukai {
        background: #f3ede2;
        padding: 4vw;
        font-size: 3.2vw;
    }

    .kanshu_area .kanshuText {
        padding-top: 4.8vw;
        padding-bottom: 8vw;
        font-size: 3.3vw;
        border-bottom: 0.266vw solid #dddddd;
    }

    .kanshu_area .kanshuText:last-child {
        border-bottom: none;
    }

    .kanshu_area .kanshu02 img {
        width: 75.6vw;
        padding: 5.33vw 0;
    }

    .kanshu_area .kanshu02 .kanshushoukai {
        background: #f3ede2;
        padding: 4vw;
        font-size: 3.2vw;
    }
}

/* 20181126　追加 */
.snapdishLogo {
    width: 280px;
    margin-top: 20px;
}

@media screen and (max-width: 1023px) {
    .snapdishLogo {
        width: 40vw;
        margin: 0.6666vw 0px 2vw 3vw;
    }
}

/* producer KV */
.smileballproducerKVArea {
    width: 100%;
    height: 458px;
    background-image: url("/tsunagu/vegetables/smileball/asset/img/producer/kv.jpg");
    background-size: cover;
    background-position: 50%;
}

.smileballproducerKVArea p {
    text-align: center;
}

.smileballproducerKVArea p .kvText {
    padding-top: 78px;
}

@media screen and (max-width: 1023px) {
    .smileballproducerKVArea {
        width: 100vw;
        height: 74.66vw;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/producer/sp/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballproducerKVArea p {
        text-align: center;
    }

    .smileballproducerKVArea p .kvText {
        padding-top: 12vw;
        width: 50.666vw;
    }
}

/* producer */
@media screen and (min-width: 1024px) {
    .producerAreaContent1 {
        margin: 0 auto;
        width: 100%;
    }

    .producerAreaContent1 .producerAreaContent1Inner {
        max-width: 1120px;
        margin: 80px auto 202px;
        display: flex;
        position: relative;
    }

    .producerAreaContent1 .producerAreaContent1Inner .producerAreaContent1TextArea {
        width: 420px;
        margin: 80px 0 0 -80px;
        padding: 58px 0 30px 60px;
        position: absolute;
        right: 0px;
        background-color: #fff;
    }

    .producerAreaContent1 .producerAreaContent1Inner .producerAreaContent1TextArea h2 {
        color: #e07300;
        font-size: 14px;
    }

    .producerAreaContent1 .producerAreaContent1Inner .producerAreaContent1TextArea h3 {
        padding: 30px 1px 0 0;
        font-size: 30px;
        text-align: left;
    }

    .producerAreaContent1 .producerAreaContent1Inner .producerAreaContent1TextArea .producerAreaContent1Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        text-align: left;
        color: #4b4b4b;
        width: 26em;
        line-height: 30px;
    }

    .producerAreaContent1 .producerAreaContent1Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .producerAreaContent1 .producerAreaContent1Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .producerAreaContent1 .producerAreaContent1Inner .title-border:before {
        margin-right: 0.5rem;
    }

    .producerAreaContent1 .Content1Different {
        background-color: #f3ede2;
    }

    .producerAreaContent1 .Content1Different h4 {
        text-align: center;
        font-size: 30px;
        padding: 60px 0 32px;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner {
        max-width: 1120px;
        margin: 0 auto;
        text-align: center;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea {
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner1 .Content1DifferentInnerNone {
        background-color: none;
        color: #999999;
        height: 70px;
        width: 160px;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner1 .Content1DifferentInnerNone p {
        font-size: 14px;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerGreen {
        background-color: #76b410;
        padding: 0px;
        width: 260px;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerGreen .Innertext01 {
        font-size: 24px;
        color: #fff;
        padding: 27px 0 0 0;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerGreen .Innertext02 {
        padding-top: 10px;
        padding-bottom: 36px;
        font-size: 14px;
        line-height: 1.3em;
        color: #dceacd;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite {
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
        height: 70px;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite .Innertext01 {
        padding-bottom: 2.133vw;
        color: #999999;
        font-size: 3.2vw;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite .Innertext02 {
        font-size: 16px;
        font-weight: bold;
        color: #4b4b4b;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner2 .Content1DifferentInnerWhite .Innertext03 {
        font-size: 20px;
        line-height: 1em;
        color: #e26a00;
        font-weight: bold;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerGreen {
        background-color: #76b410;
        padding: 0px;
        width: 260px;
        border-left: 1px solid #91be47;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerGreen .Innertext01 {
        font-size: 24px;
        color: #fff;
        padding: 27px 0 0 0;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerGreen .Innertext02 {
        padding-top: 10px;
        padding-bottom: 36px;
        font-size: 14px;
        line-height: 1.3em;
        color: #dceacd;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite {
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
        height: 70px;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite .Innertext01 {
        padding-bottom: 2.133vw;
        color: #999999;
        font-size: 3.2vw;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite .Innertext02 {
        font-size: 16px;
        font-weight: bold;
        color: #4b4b4b;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner3 .Content1DifferentInnerWhite .Innertext03 {
        font-size: 20px;
        line-height: 1em;
        color: #e26a00;
        font-weight: bold;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 table {
        margin-bottom: -10px;
        box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.4);
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange {
        background-color: #e26a00;
        padding: 33px 0 29px;
        width: 320px;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange .Innertext01 {
        font-size: 24px;
        color: #fff;
        line-height: 0.7em;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange .Innertext01 span {
        font-size: 14px;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerOrange .Innertext02 {
        padding-top: 14px;
        font-size: 14px;
        line-height: 1.3em;
        color: #dceacd;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite {
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        height: 70px;
        border-right: 1px solid #ddd;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite .Innertext02 {
        font-size: 20px;
        font-weight: bold;
        color: #4b4b4b;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite .Innertext03 {
        font-size: 20px;
        color: #e26a00;
        font-weight: bold;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .InnerArea .Inner4 .Content1DifferentInnerWhite .Innertext04 {
        font-size: 20px;
        color: #e26a00;
        font-weight: bold;
        padding: 25px 0;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner table {
        text-align: center;
    }

    .producerAreaContent1 .Content1Different .Content1DifferentInner .kome {
        font-size: 14px;
        text-align: center;
        padding-top: 50px;
        padding-bottom: 58px;
        color: #4d4d4d;
    }
}

@media screen and (max-width: 1023px) {
    .producerAreaContent1 {
        text-align: center;
    }

    .producerAreaContent1 .producerAreaContent1Inner {
        padding: 2.66vw 2.53vw 0;
    }

    .producerAreaContent1 .producerAreaContent1Inner img {
        width: 100vw;
    }

    .producerAreaContent1 .producerAreaContent1Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .producerAreaContent1 .producerAreaContent1Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .producerAreaContent1 .producerAreaContent1Inner .title-border:before {
        margin-right: 1rem;
    }

    .producerAreaContent1 .producerAreaContent1Inner .producerAreaContent1TextArea {
        padding: 7.466vw 0 8vw;
    }

    .producerAreaContent1 .producerAreaContent1Inner .producerAreaContent1TextArea h2 {
        padding: 0 2.8vw 0;
        color: #e07300;
        font-size: 2.666vw;
        font-weight: bold;
    }

    .producerAreaContent1 .producerAreaContent1Inner .producerAreaContent1TextArea h3 {
        padding: 2.8vw 2.53vw 0;
        font-size: 5.333vw;
        text-align: left;
    }

    .producerAreaContent1 .producerAreaContent1Inner .producerAreaContent1TextArea .producerAreaContent1Text {
        padding: 7.33vw 2.53vw 0;
        font-size: 3.46vw;
        text-align: left;
        color: #4b4b4b;
        line-height: 1.8em;
    }
}

@media screen and (min-width: 1024px) {
    .producerAreaContent2 {
        text-align: center;
        background-color: #f3ede2;
        padding: 90px 0 70px;
    }

    .producerAreaContent2 .producerAreaContent2Top {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .producerAreaContent2 .producerAreaContent2Top .producerAreaContent2InnerArea {
        display: flex;
    }

    .producerAreaContent2 .producerAreaContent2Btm {
        max-width: 1120px;
        margin: 60px auto 0;
        display: flex;
        justify-content: center;
    }

    .producerAreaContent2 .producerAreaContent2Btm .producerAreaContent2InnerArea {
        display: flex;
    }

    .producerAreaContent2 .producerAreaContent2Inner {
        background-color: #fff;
        margin-right: 16px;
        max-width: 268px;
    }

    .producerAreaContent2 .producerAreaContent2Inner img {
        margin-top: -40px;
        width: 140px;
    }

    .producerAreaContent2 .producerAreaContent2Inner-3 {
        background-color: #fff;
        background-size: cover;
        margin-top: 8vw;
        margin-bottom: 8vw;
    }

    .producerAreaContent2 .producerAreaContent2Inner-3 img {
        margin-top: -5.333vw;
        width: 30.66vw;
    }

    .producerAreaContent2 .producerAreaDepart {
        line-height: 1em;
        color: #e26a00;
        font-size: 14px;
        margin-top: 20px;
    }

    .producerAreaContent2 .producerAreaName {
        line-height: 1em;
        color: #e26a00;
        font-size: 24px;
        padding-top: 12px;
        padding-bottom: 24px;
        font-weight: bold;
    }

    .producerAreaContent2 h2 {
        padding-top: 5.33vw;
        font-size: 5.333vw;
        border-top: 0.266vw solid #dddddd;
        text-align: left;
        margin: 0 2.53vw 0;
    }

    .producerAreaContent2 .producerAreaContent2TextArea {
        text-align: left;
        padding: 0px 30px 34px;
        font-size: 16px;
        color: #4b4b4b;
        line-height: 1.7em;
    }
}

@media screen and (max-width: 1023px) {
    .producerAreaContent2 {
        text-align: center;
        background-color: #f3ede2;
        padding-bottom: 8vw;
    }

    .producerAreaContent2 .producerAreaContent2InnerArea {
        display: flex;
        justify-content: space-between;
    }

    .producerAreaContent2 .producerAreaContent2Inner {
        background-color: #fff;
        background-size: cover;
        margin-top: 8vw;
        width: 48vw;
    }

    .producerAreaContent2 .producerAreaContent2Inner img {
        margin-top: -5.333vw;
        width: 30.66vw;
    }

    .producerAreaContent2 .producerAreaContent2Inner:nth-child(odd) {
        margin-right: 1.6vw;
    }

    .producerAreaContent2 .producerAreaContent2Inner-3 {
        background-color: #fff;
        background-size: cover;
        margin-top: 8vw;
        margin-bottom: 8vw;
    }

    .producerAreaContent2 .producerAreaContent2Inner-3 img {
        margin-top: -5.333vw;
        width: 30.66vw;
    }

    .producerAreaContent2 .producerAreaDepart {
        line-height: 1em;
        color: #e26a00;
        font-size: 2.666vw;
        margin-top: 4vw;
    }

    .producerAreaContent2 .producerAreaName {
        line-height: 1em;
        color: #e26a00;
        font-size: 5.333vw;
        padding-top: 2.533vw;
        padding-bottom: 4.6vw;
        font-weight: bold;
    }

    .producerAreaContent2 h2 {
        padding-top: 5.33vw;
        font-size: 5.333vw;
        border-top: 0.266vw solid #dddddd;
        text-align: left;
        margin: 0 2.53vw 0;
    }

    .producerAreaContent2 .producerAreaContent2TextArea {
        text-align: left;
        padding: 0px 5.6vw 9.86vw;
        font-size: 3.46vw;
        color: #4b4b4b;
        line-height: 1.7em;
    }
}

@media screen and (min-width: 1024px) {
    .producerAreaContent3 {
        margin: 0 auto;
        width: 100%;
    }

    .producerAreaContent3 .producerAreaContent3Inner {
        max-width: 1120px;
        margin: 174px auto 100px;
        display: flex;
        position: relative;
    }

    .producerAreaContent3 .producerAreaContent3Inner .producerAreaContent3TextArea {
        width: 420px;
        background-color: #fff;
        position: absolute;
        top: -38px;
        padding: 0 62px 60px 0;
        margin-right: -60px;
        z-index: 10;
    }

    .producerAreaContent3 .producerAreaContent3Inner .producerAreaContent3TextArea h2 {
        color: #e07300;
        font-size: 14px;
    }

    .producerAreaContent3 .producerAreaContent3Inner .producerAreaContent3TextArea h3 {
        padding: 30px 0 0 0;
        font-size: 30px;
        text-align: left;
        width: 14em;
    }

    .producerAreaContent3 .producerAreaContent3Inner .producerAreaContent3TextArea .producerAreaContent3Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        text-align: left;
        color: #4b4b4b;
        width: 26em;
        line-height: 30px;
    }

    .producerAreaContent3 .producerAreaContent3Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .producerAreaContent3 .producerAreaContent3Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .producerAreaContent3 .producerAreaContent3Inner .title-border:before {
        margin-right: 0.5rem;
    }
}

@media screen and (max-width: 1023px) {
    .producerAreaContent3 {
        text-align: center;
    }

    .producerAreaContent3 .producerAreaContent3Inner {
        padding: 2.66vw 2.53vw 0;
    }

    .producerAreaContent3 .producerAreaContent3Inner img {
        width: 100vw;
    }

    .producerAreaContent3 .producerAreaContent3Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .producerAreaContent3 .producerAreaContent3Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .producerAreaContent3 .producerAreaContent3Inner .title-border:before {
        margin-right: 1rem;
    }

    .producerAreaContent3 .producerAreaContent3Inner .producerAreaContent3TextArea {
        padding: 7.466vw 0 8vw;
    }

    .producerAreaContent3 .producerAreaContent3Inner .producerAreaContent3TextArea h2 {
        padding: 0 2.8vw 0;
        color: #e07300;
        font-size: 2.666vw;
        font-weight: bold;
    }

    .producerAreaContent3 .producerAreaContent3Inner .producerAreaContent3TextArea h3 {
        padding: 2.8vw 2.53vw 0;
        font-size: 5.333vw;
        text-align: left;
    }

    .producerAreaContent3 .producerAreaContent3Inner .producerAreaContent3TextArea .producerAreaContent3Text {
        padding: 7.33vw 2.53vw 0;
        font-size: 3.46vw;
        text-align: left;
        color: #4b4b4b;
        line-height: 1.8em;
    }
}

@media screen and (min-width: 1024px) {
    .producerAreaContent4 {
        width: 100%;
        background-image: url(/tsunagu/vegetables/smileball/asset/img/producer/content4Kv.jpg);
        background-size: cover;
        background-position: 50%;
        padding-top: 88px;
        padding-bottom: 100px;
    }

    .producerAreaContent4 .producerAreaContent4Inner {
        max-width: 1120px;
        margin: 0 auto;
    }

    .producerAreaContent4 .producerAreaContent4Inner .producerAreaContent4Text01 {
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }

    .producerAreaContent4 .producerAreaContent4Inner .producerAreaContent4Content {
        max-width: 1120px;
        padding-top: 43px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .producerAreaContent4 .producerAreaContent4Inner .producerAreaContent4Content img {
        margin-right: 15px;
        margin-top: 15px;
        box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.3);
    }

    .producerAreaContent4 .producerAreaContent4Inner .producerAreaContent4Content img:last-child {
        height: auto;
        margin-right: 0px;
        padding-right: 0px;
    }
}

@media screen and (max-width: 1023px) {
    .producerAreaContent4 {
        width: 100%;
        background-image: url(/tsunagu/vegetables/smileball/asset/img/producer/sp/content4Kv.jpg);
        height: 59.33vw;
        background-position: center;
        background-size: cover;
        margin-bottom: 53.06vw;
    }

    .producerAreaContent4 .producerAreaContent4Inner {
        border-bottom: 0.26vw solid #dddddd;
    }

    .producerAreaContent4 .producerAreaContent4Inner img {
        width: 100vw;
    }

    .producerAreaContent4 .producerAreaContent4Inner .producerAreaContent4Content {
        width: auto;
        display: flex;
        align-items: flex-start;
        overflow-x: scroll;
        padding-top: 44.06vw;
        padding-bottom: 15.73vw;
        text-align: left;
    }

    .producerAreaContent4 .producerAreaContent4Inner .producerAreaContent4Content img {
        width: 41.333vw;
        margin-right: 4vw;
        box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.3);
    }

    .producerAreaContent4 .producerAreaContent4Inner .producerAreaContent4Content img:first-child {
        width: 41.333vw;
        margin-left: 4vw;
    }
}

.imgPdL370 {
    padding-left: 370px;
}

.imgPdR370 {
    padding-right: 370px;
}

.imgPdR370 img {
    max-width: 92%;
}

@media screen and (max-width: 1023px) {
    .imgPdR370 img {
        max-width: 100%;
    }
}

.mr0 {
    margin-right: 0px !important;
}

@media screen and (min-width: 1024px) {
    .smileballShopKVArea {
        width: 100%;
        height: 458px;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/shop/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballShopKVArea p {
        text-align: center;
    }

    .smileballShopKVArea p .kvText {
        padding-top: 78px;
    }
}

@media screen and (max-width: 1023px) {
    .smileballShopKVArea {
        width: 100vw;
        height: 74.66vw;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/shop/sp/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballShopKVArea p {
        text-align: center;
    }

    .smileballShopKVArea p .kvText {
        padding-top: 12vw;
        width: 50.666vw;
    }
}

/* shop */
@media screen and (min-width: 1024px) {
    .shopAreaContent1 {
        max-width: 1120px;
        margin: 0 auto;
    }

    .shopAreaContent1 .shopAreaContent1Inner {
        padding: 80px 0 50px;
        text-align: center;
    }

    .shopAreaContent1 .shopAreaContent1Inner .shopAreaContent1TextArea {
        text-align: center;
    }

    .shopAreaContent1 .shopAreaContent1Inner .shopAreaContent1TextArea .shopAreaContent1Text {
        font-size: 16px;
        padding-top: 48px;
        line-height: 30px;
        color: #4b4b4b;
    }

    .shopAreaContent1 .shopAreaContent1Inner .shopAreaContent1TextArea .shopAreaContent1Text:nth-of-type(2) {
      text-align: left;
      width: 500px;
      margin: 0 auto;
    }

    .shopAreaContent1 .shopAreaContent1Inner .shopAreaContent1TextArea .shopAreaContent1Text.end_memo {
        font-size: 22px;
        text-align: :center;
    }
}

@media screen and (max-width: 1023px) {
    .shopAreaContent1 {
        width: 100%;
    }

    .shopAreaContent1 .shopAreaContent1Inner {
        padding: 9.66vw 2.666vw 8.8vw;
        text-align: center;
    }

    .shopAreaContent1 .shopAreaContent1Inner img {
        width: 57.6vw;
    }

    .shopAreaContent1 .shopAreaContent1Inner .shopAreaContent1TextArea {
        text-align: left;
    }

    .shopAreaContent1 .shopAreaContent1Inner .shopAreaContent1TextArea .shopAreaContent1Text {
        font-size: 3.46vw;
        padding-top: 7.733vw;
        line-height: 1.8em;
        color: #4b4b4b;
    }

    .shopAreaContent1 .shopAreaContent1Inner .shopAreaContent1TextArea .shopAreaContent1Text.end_memo {
        font-size: 3.46vw;
        text-align: center;
    }
}

@media screen and (min-width: 1024px) {
    .shopAreaContent2 {
        width: 100%;
    }

    .shopAreaContent2 .shopAreaContent2Inner {
        width: 1120px;
        margin: 0 auto;
    }

    .shopAreaContent2 .shopAreaContent2Inner h2 {
        text-align: center;
        font-size: 30px;
    }

    .shopAreaContent2 .shopAreaContent2Inner .shopAreaContent2Logo {
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .shopAreaContent2 .shopAreaContent2Inner .shopAreaContent2Logo .Logo1 {
        margin-right: 20px;
    }
}

@media screen and (max-width: 1023px) {
    .shopAreaContent2 {
        width: 100%;
    }

    .shopAreaContent2 .shopAreaContent2Inner {
        padding: 0vw 2.666vw 0vw;
    }

    .shopAreaContent2 .shopAreaContent2Inner h2 {
        text-align: center;
        font-size: 5.33vw;
    }

    .shopAreaContent2 .shopAreaContent2Inner .Logo1 {
        padding-bottom: 2.66vw;
    }
}

@media screen and (min-width: 1024px) {
    .shopAreaContent2_bnr {
        width: 100%;
    }

    .shopAreaContent2_bnr .shopAreaContent2Inner {
        width: 1120px;
        margin: 0 auto;
    }

    .shopAreaContent2_bnr .shopAreaContent2Inner h2 {
        text-align: center;
        font-size: 30px;
    }

    .shopAreaContent2_bnr .shopAreaContent2Inner .shopAreaContent2Logo {
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .shopAreaContent2_bnr .shopAreaContent2Inner .shopAreaContent2Logo .Logo1 {
        margin-right: 20px;
    }
}

@media screen and (max-width: 1023px) {
    .shopAreaContent2 {
        width: 100%;
    }

    .shopAreaContent2_bnr .shopAreaContent2Inner {
        padding: 0vw 2.666vw 0vw;
    }

    .shopAreaContent2_bnr .shopAreaContent2Inner h2 {
        text-align: center;
        font-size: 5.33vw;
    }

    .shopAreaContent2_bnr .shopAreaContent2Inner .Logo1 {
        padding-bottom: 2.66vw;
    }
}

@media screen and (min-width: 1024px) {
    .shopAreaContent3 {
        border-bottom: 1px solid #ddd;
    }

    .shopAreaContent3 .shopAreaContent3Title {
        max-width: 1120px;
        margin: 0 auto 100px;
        padding: 30px 0 0 0;
        text-align: center;
        font-size: 30px;
        border-top: 2px solid #e26a00;
        line-height: 2em;
    }

    .shopAreaContent3 .shopAreaContent3Inner {
        max-width: 1120px;
        margin: 0 auto;
        padding: 96px 0 72px;
    }

    .shopAreaContent3 .shopAreaContent3Inner h2 {
        text-align: center;
        font-size: 30px;
        border-bottom: 2px solid #e26a00;
        padding-bottom: 24px;
        line-height: 1em;
    }

    .shopAreaContent3 .shopAreaContent3Inner h2 span {
        font-size: 15px;
    }

    .shopAreaContent3 .shopAreaContent3Inner .event {
        margin-bottom: 100px;
    }

    .shopAreaContent3 .shopAreaContent3Inner .event .event_list li {
        margin-bottom: 28px;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer {
        margin-top: 28px;
        margin-bottom: 96px;
        padding: 122px 0;
        text-align: center;
        background-color: #f4f4f4;
        color: #e26a00;
        font-size: 26px;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer02 {
        margin-top: 28px;
        padding-bottom: 14px;
        text-align: center;
        font-size: 22px;
        border-bottom: 3px dotted #ccc;
        line-height: 2em;
        color: #4b4b4b;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer02 .date {
        font-weight: bold;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer02 .time {
        color: #e60012;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer02 .kome {
        font-size: 18px;
    }
}

@media screen and (max-width: 1023px) {
    .shopAreaContent3 {
        width: 100%;
    }

    .shopAreaContent3 .shopAreaContent3Title {
        margin: 0 auto 12vw;
        padding: 4vw 0 0 0;
        text-align: center;
        font-size: 4.2vw;
        line-height: 2em;
        font-weight: bold;
    }

    .shopAreaContent3 .shopAreaContent3Inner {
        padding: 13.06vw 2.666vw 13.33vw;
        border-bottom: 1px solid #ddd;
    }

    .shopAreaContent3 .shopAreaContent3Inner h2 {
        text-align: center;
        font-size: 5.33vw;
        border-bottom: 0.533vw solid #e26a00;
        padding-bottom: 3vw;
        line-height: 1em;
    }

    .shopAreaContent3 .shopAreaContent3Inner h2 span {
        font-size: 2vw;
    }

    .shopAreaContent3 .shopAreaContent3Inner .event {
        margin-bottom: 9.775vw;
    }

    .shopAreaContent3 .shopAreaContent3Inner .event .event_list li {
        margin-bottom: 4.88vw;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer {
        margin-top: 5.33vw;
        margin-bottom: 13vw;
        padding: 11.46vw 0;
        text-align: center;
        background-color: #f4f4f4;
        color: #e26a00;
        font-size: 3.46vw;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer:last-child {
        margin-bottom: 0px;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer02 {
        margin-top: 2.737vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 0.19vw dotted #ccc;
        line-height: 2em;
        color: #4b4b4b;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer02 .date {
        font-weight: bold;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer02 .time {
        color: #e60012;
    }

    .shopAreaContent3 .shopAreaContent3Inner .answer02 .kome {
        font-size: 2vw;
    }
}

a:hover {
    opacity: 0.8;
}

.mb100 {
    margin-bottom: 100px;
}

@media screen and (max-width: 1023px) {
    .mb100 {
        margin-bottom: 12vw;
    }
}

.smileballShops {
    max-width: 1120px;
    margin: 0 auto;
}

.smileballShops a {
    text-decoration: none;
    color: #4b4b4b;
}

.smileballShopsHeaderWrap {
    margin: 40px 0 0;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .smileballShopsHeaderWrap {
        margin: 0px 0 0;
    }
}

@media screen and (max-width: 1023px) {
    .smileballShopsHeader {
        display: flex;
        padding: 10px;
        align-items: center;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShopsHeader {
        position: absolute;
        top: 80px;
        left: 0;
    }
}

@media screen and (max-width: 1023px) {
    .smileballShopsTitle {
        width: 50%;
        padding-right: 10px;
    }
}

.smileballShopsLead {
    color: #4b4b4b;
}

@media screen and (max-width: 1023px) {
    .smileballShopsLead {
        font-size: 10px;
        width: 50%;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShopsLead {
        margin: 30px 0 0;
    }
}

.smileballShops1st {
    padding: 0 10px 10px;
}

@media screen and (max-width: 1023px) {
    .smileballShops1st {
        border-bottom: 1px solid #ddd;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShops1st {
        margin: 0 0 40px 410px;
    }
}

@media screen and (max-width: 1023px) {
    .smileballShops1stText {
        display: flex;
        justify-content: space-between;
        padding: 15px 0 15px;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShops1stText {
        background: #fff;
        padding: 40px 30px;
        position: absolute;
        right: 50%;
        bottom: 0;
        margin-right: 90px;
        text-align: center;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShops1stTitle {
        font-size: 20px;
        margin: 0 0 10px;
    }
}

.smileballShops1stLink {
    color: #e26a00;
}

@media screen and (max-width: 1023px) {
    .smileballShops1stLink {
        text-align: right;
    }
}

.smileballShops1stLink::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/tsunagu/vegetables/smileball/asset/img/arrow.png) 0 50% no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 0 4px 5px;
}

@media screen and (min-width: 1024px) {
    .smileballShopsList {
        display: flex;
        flex-wrap: wrap;
    }
}

.smileballShopsList.showAll li {
    display: block;
}

.smileballShopsList li {
    display: none;
}

@media screen and (max-width: 1023px) {
    .smileballShopsList li {
        display: block;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShopsList li {
        display: block;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShopsList li {
        width: 50%;
    }
}

@media screen and (max-width: 1023px) {
    .smileballShopsList li a {
        display: inline-block;
        align-items: center;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShopsList li a {
        display: inline-block;
    }
}

@media screen and (max-width: 1023px) {
    .smileballShopsListImg {
        width: 100%;
    }
}

.smileballShopsListTitle {
    margin: 0 0 15px;
}

@media screen and (max-width: 1023px) {
    .smileballShopsListTitle {
        font-size: 2.8vw;
        width: 100%;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShopsListTitle {
        margin: 15px 0 5px;
        font-size: 16px;
    }
}

.smileballShopsListLink {
    font-size: 12px;
    color: #e26a00;
}

@media screen and (min-width: 1024px) {
    .smileballShopsListLink {
        font-size: 14px;
    }
}

.smileballShopsListMoreBtn {
    position: relative;
    margin: -80px auto 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 99%, white 100%);
    padding-top: 80px;
}

@media screen and (min-width: 1024px) {
    .smileballShopsListMoreBtn {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, white 99%, white 100%);
        margin: -240px auto -40px;
        padding: 170px 0 40px;
    }
}

.smileballShopsListMoreBtn a {
    display: block;
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px;
    text-align: center;
    margin: 0 40px;
}

@media screen and (min-width: 1024px) {
    .smileballShopsListMoreBtn a {
        width: 300px;
        margin: 0 auto 40px;
    }
}

.smileballShopsListMoreBtn a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/tsunagu/vegetables/smileball/asset/img/recipe/iconPlus.png) 0 50% no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 5px 2px 0;
}

.smileballShopsSnapDish {
    margin: 10px 10px 40px;
}

@media screen and (min-width: 1024px) {
    .smileballShopsSnapDish {
        margin: 100px 0;
    }
}

.smileballShopsUgcTitle {
    margin: 0 0 15px;
    text-align: center;
}

@media screen and (max-width: 1023px) {
    .smileballShopsUgcTitle img {
        width: 67.7vw;
    }
}

@media screen and (min-width: 1024px) {
    .smileballShopsUgcTitle {
        margin: 80px 0 15px;
    }
}

.smileballShopsUgcLead {
    text-align: center;
    color: #4b4b4b;
    margin: 0 0 25px;
}

@media screen and (max-width: 1023px) {
    .smileballShopsUgcLead {
        font-size: 12px;
    }
}

.listConts {
    margin: 10px;
    display: block;
    color: #4b4b4b;
}

.smileballShopsListText {
    margin-top: 10px;
}

.red {
    color: #ff0000;
}

.smileballShopsListTitle a::after {
    content: "";
    display: inline-block;
    margin-top: -6px;
    margin-left: 5px;
    width: 13px;
    height: 13px;
    background: url(/common/rwd/imgs/contents/icon_link_external.png) no-repeat 50% 50%;
    -webkit-background-size: 13px 13px;
    background-size: 13px 13px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.smileballShopsListTitle {
    padding-left: 10px;
}

.orange_border {
    font-weight: bold;
    border-left: 2px solid #e26a00;
}

.orange {
    color: #e26a00;
}

@media screen and (min-width: 1024px) {
    .smileballBlogKVArea {
        width: 100%;
        height: 400px;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/blog/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballBlogKVArea p {
        text-align: center;
    }

    .smileballBlogKVArea p .kvText {
        padding-top: 68px;
    }
}

@media screen and (max-width: 1023px) {
    .smileballBlogKVArea {
        width: 100vw;
        height: 84vw;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/blog/sp/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballBlogKVArea p {
        text-align: center;
    }

    .smileballBlogKVArea p .kvText {
        padding-top: 24.2vw;
        width: 87.73vw;
    }
}

.BreadcrumbArea {
    background: #ffeed7;
}

@media screen and (min-width: 1024px) {
    .Breadcrumb {
        max-width: 1120px;
        width: 100%;
        height: 66px;
        line-height: 66px;
        margin: 0 auto;
        font-size: 16px;
    }

    .Breadcrumb li {
        display: inline;
    }

    .Breadcrumb li a {
        color: #ff581c;
    }

    .Breadcrumb li a:hover {
        text-decoration: none;
    }
}

@media screen and (max-width: 1023px) {
    .Breadcrumb {
        height: 13.6vw;
        line-height: 13.6vw;
        background: #ffeed7;
        font-size: 3.6vw;
    }

    .Breadcrumb li {
        display: inline;
        padding-left: 2.66vw;
    }

    .Breadcrumb li a {
        color: #ff581c;
    }

    .Breadcrumb li a:hover {
        text-decoration: none;
    }
}

.smileballInfoBlogAreaShare ul {
    display: flex;
    font-weight: bold;
    justify-content: start;
    padding-top: 15px;
    padding-left: 10px;
}

.smileballInfoBlogAreaShare ul li {
    vertical-align: middle;
}

.smileballInfoBlogAreaShare ul .fb {
    margin-right: 15px;
}

.smileballInfoBlogAreaShare a:hover {
    opacity: 0.7;
}

@media screen and (min-width: 1024px) {
    .smileballInfoBlogAreaShare {
        width: 800px;
        margin: 0 auto;
        text-align: left;
    }

    .smileballInfoBlogAreaShare ul {
        justify-content: left;
    }
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1 {
        width: 100%;
        margin: 0 auto;
        border-bottom: 1px solid #ddd;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1 {
        border-bottom: 1px solid #ddd;
    }
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1Inner {
        width: 800px;
        margin: 0 auto;
        padding: 62px 0 170px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1Inner {
        padding: 6.66vw 4.53vw 0;
    }
}

@media screen and (min-width: 1024px) {
    .blogAreaDate {
        font-size: 16px;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaDate {
        font-size: 3.6vw;
        margin-bottom: 4.66vw;
    }
}

.blogAreaContent1H2 {
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .not_br {
      display: none; 
    }
  }

@media screen and (min-width: 1024px) {
    .blogAreaContent1H2 {
        margin-bottom: 50px;
        padding-left: 15px;
        font-size: 32px;
        border-left: solid 6px #ff581c;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1H2 {
        margin-bottom: 6.66vw;
        padding-left: 3.2vw;
        font-size: 6.3vw;
        border-left: solid 1.33vw #ff581c;
    }
}

.blogAreaContent1H3 {
    font-weight: bold;
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1H3 {
        margin-bottom: 42px;
        padding: 10px 0 6px;
        border-bottom: solid 1px #777777;
        font-size: 26px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1H3 {
        margin-bottom: 6.4vw;
        padding-top: 2.66vw;
        border-bottom: solid 0.4vw #777777;
        font-size: 5.4vw;
    }
}

.blogAreaContent1H4 {
    font-weight: bold;
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1H4 {
        margin-bottom: 40px;
        font-size: 20px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1H4 {
        margin-bottom: 5.06vw;
        font-size: 4.5vw;
    }
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1Text {
        margin-bottom: 40px;
        font-size: 16px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1Text {
        margin-bottom: 4.44vw;
        font-size: 3.9vw;
    }
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1Img {
        margin-bottom: 60px;
        border-bottom: 4px dotted #000;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1Img {
        margin-bottom: 8.93vw;
        border-bottom: 0.66vw dotted #000;
    }
}

@media screen and (min-width: 1024px) {
    .imgCenterBig {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 1023px) {
    .imgCenterBig {
        width: 100%;
        margin: 0 auto 4.44vw;
    }
}

@media screen and (min-width: 1024px) {
    .imgLeftsmall {
        margin-bottom: 60px;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .imgLeftsmall img {
        width: 500px;
        margin: 0 5px 5px 0;
    }
}

@media screen and (max-width: 1023px) {
    .imgLeftsmall {
        width: 53.33vw;
        text-align: left;
        margin-bottom: 5.86vw;
    }

    .imgLeftsmall img {
        margin: 0 2vw 2vw 0;
    }
}

@media screen and (min-width: 1024px) {
    .imgLeftsmallFlex {
        margin-bottom: 60px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .imgLeftsmallFlex img {
        width: 380px;
        margin: 0 5px 5px 0;
    }
}

@media screen and (max-width: 1023px) {
    .imgLeftsmallFlex {
        width: auto;
        text-align: left;
        margin-bottom: 5.86vw;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .imgLeftsmallFlex img {
        width: 42vw;
        margin: 0 2vw 2vw 0;
    }
}

@media screen and (min-width: 1024px) {
    .imgLeft {
        margin-bottom: 60px;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }

    .imgLeft img {
        width: 400px;
        margin: 0 5px 5px 0;
    }
}

@media screen and (max-width: 1023px) {
    .imgLeft {
        width: 53.33vw;
        text-align: left;
        margin-bottom: 5.86vw;
    }

    .imgLeft img {
        margin: 0 2vw 2vw 0;
    }
}

.blogAreaContent1Quote {
    color: #777777;
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1Quote {
        margin: 0 0 40px 20px;
        padding: 10px 0 10px 15px;
        border-left: 6px solid #777777;
        font-size: 16px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1Quote {
        margin: 0 0 6.4vw 6vw;
        padding: 0 0 0 2vw;
        border-left: 1.33vw solid #777777;
        font-size: 3.9vw;
        line-height: 1.8;
    }
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1ListNum {
        padding-left: 20px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1ListNum {
        padding-left: 6.13vw;
        font-size: 3.9vw;
    }
}

.blogAreaContent1ListNum li {
    list-style: decimal;
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1ListNum li {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1ListNum li {
        margin-bottom: 6.4vw;
    }
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1ListCircle {
        padding-left: 20px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1ListCircle {
        padding-left: 6.13vw;
        font-size: 3.9vw;
    }
}

.blogAreaContent1ListCircle li {
    list-style: disc;
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1ListCircle li {
        margin-bottom: 6.4vw;
    }
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1ListCircle li {
        margin-bottom: 30px;
    }
}

.blogAreaContent1FwbArea {
    font-weight: bold;
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1FwbArea {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1FwbArea {
        margin-bottom: 6.4vw;
    }
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1LinkArea {
        margin-bottom: 46px;
        padding-bottom: 46px;
        line-height: 1.6;
        border-bottom: 4px dotted #000;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1LinkArea {
        margin-bottom: 7.46vw;
        padding-bottom: 7.46vw;
        border-bottom: 0.66vw dotted #000;
    }
}

.blogAreaContent1LinkArea a {
    color: #ff581c;
    text-decoration: underline;
}

.blogAreaContent1LinkArea a:hover {
    text-decoration: none;
}

@media screen and (min-width: 1024px) {
    .blogAreaContent1TableArea tbody {
        display: flex;
        justify-content: center;
        width: 800px;
        border-top: 1px solid #626262;
        border-left: 1px solid #626262;
        margin-top: 60px;
    }

    .blogAreaContent1TableArea tbody tr {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        text-align: center;
        border-right: 1px solid #626262;
    }

    .blogAreaContent1TableArea tbody th {
        text-align: center;
        border-bottom: 1px solid #626262;
        background-color: #fbd588;
        font-size: 16px;
        font-weight: bold;
        height: 48px;
        line-height: 48px;
    }

    .blogAreaContent1TableArea tbody td {
        border-bottom: 1px solid #626262;
        height: 48px;
        line-height: 48px;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaContent1TableArea tbody tr {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .blogAreaContent1TableArea tbody tr th {
        font-size: 3.9vw;
        font-weight: bold;
        padding-bottom: 3.73vw;
    }

    .blogAreaContent1TableArea tbody tr td {
        font-size: 3.9vw;
        padding-bottom: 3.73vw;
    }
}

.blogAreaEvent .blogAreaEventInner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 0 0;
}

@media screen and (max-width: 1023px) {
    .blogAreaEvent .blogAreaEventInner {
        padding: 13.06vw 2.666vw 0;
    }
}

.blogAreaEvent .blogAreaEventInner h2 {
    text-align: center;
    font-size: 30px;
    border-bottom: 2px solid #e26a00;
    padding-bottom: 24px;
    line-height: 1em;
}

@media screen and (max-width: 1023px) {
    .blogAreaEvent .blogAreaEventInner h2 {
        text-align: center;
        font-size: 5.33vw;
        border-bottom: 0.533vw solid #e26a00;
        padding-bottom: 3vw;
        line-height: 1em;
    }
}

.blogAreaEvent .blogAreaEventInner h2 span {
    font-size: 15px;
}

@media screen and (max-width: 1023px) {
    .blogAreaEvent .blogAreaEventInner h2 span {
        font-size: 2vw;
    }
}

.blogAreaEvent .blogAreaEventInner .event {
    margin-bottom: 100px;
}

@media screen and (max-width: 1023px) {
    .blogAreaEvent .blogAreaEventInner .event {
        margin-bottom: 9.775vw;
    }
}

.blogAreaEvent .blogAreaEventInner .event .event_list li {
    margin-bottom: 28px;
}

@media screen and (max-width: 1023px) {
    .blogAreaEvent .blogAreaEventInner .event .event_list li {
        margin-bottom: 4.88vw;
    }
}

.blogAreaEvent .blogAreaEventInner .answer {
    margin-top: 28px;
    margin-bottom: 96px;
    padding: 122px 0;
    text-align: center;
    background-color: #f4f4f4;
    color: #e26a00;
    font-size: 26px;
}

@media screen and (max-width: 1023px) {
    .blogAreaEvent .blogAreaEventInner .answer {
        margin-top: 5.33vw;
        margin-bottom: 13vw;
        padding: 11.46vw 0;
        text-align: center;
        background-color: #f4f4f4;
        color: #e26a00;
        font-size: 3.46vw;
    }
}

@media screen and (max-width: 1023px) {
    .blogAreaEvent .blogAreaEventInner .answer .answer:last-child {
        margin-bottom: 0px;
    }
}

.blogAreaEvent .blogAreaEventInner .answer02 {
    margin-top: 28px;
    padding-bottom: 14px;
    text-align: center;
    font-size: 22px;
    border-bottom: 3px dotted #ccc;
    line-height: 2em;
    color: #4b4b4b;
}

@media screen and (max-width: 1023px) {
    .blogAreaEvent .blogAreaEventInner .answer02 {
        margin-top: 2.737vw;
        text-align: center;
        font-size: 2.55vw;
        border-bottom: 0.19vw dotted #ccc;
        line-height: 2em;
        color: #4b4b4b;
    }
}

.blogAreaEvent .blogAreaEventInner .answer02 .date {
    font-weight: bold;
}

.blogAreaEvent .blogAreaEventInner .answer02 .time {
    color: #e60012;
}

.blogAreaEvent .blogAreaEventInner .answer02 .kome {
    font-size: 18px;
}

@media screen and (max-width: 1023px) {
    .blogAreaEvent .blogAreaEventInner .answer02 .kome {
        font-size: 2vw;
    }
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1 {
        width: 100%;
        margin: 60px auto 0;
        border-bottom: 1px solid #ddd;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1 {
        border-bottom: 1px solid #ddd;
    }
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1Inner {
        max-width: 1120px;
        width: 100%;
        margin: 0 auto;
        font-size: 16px;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1Inner {
        padding: 6.66vw 4.66vw 0;
    }
}

.blogDetailContent1ReportRow-partition {
    border-bottom: 2px solid #7d7d7d;
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1ReportRow-partition {
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportRow-partition {
        margin-bottom: 6.66vw;
    }
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1ReportRow {
        display: flex;
        align-items: flex-start;
        margin-bottom: 50px;
    }
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1ReportRow li {
        max-width: 340px;
        width: 100%;
    }

    .blogDetailContent1ReportRow li:nth-of-type(1), .blogDetailContent1ReportRow li:nth-of-type(2) {
        margin-right: 50px;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportRow li {
        margin-bottom: 6.66vw;
    }
}

.blogDetailContent1ReportRow li a {
    text-decoration: none;
}

.blogDetailContent1ReportRow li a:hover .report {
    opacity: 0.8;
}

.blogDetailContent1ReportRow li .report {
    position: relative;
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1ReportRow li .report {
        max-width: 340px;
        width: 100%;
        width: auto;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportRow li .report {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.blogDetailContent1ReportRow li .report::before {
    content: "";
    background: url("/tsunagu/vegetables/smileball/asset/img/blog/report.jpg") no-repeat;
    background-size: contain;
    display: block;
    width: 86px;
    height: 34px;
    position: absolute;
    top: 10px;
    left: -10px;
    z-index: 1;
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportRow li .report::before {
        width: 19.2vw;
        top: -1.33vw;
        left: -1.33vw;
    }
}

.blogDetailContent1ReportRow li a:hover .tag {
    opacity: 0.8;
}

.blogDetailContent1ReportRow li .tag {
    position: relative;
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1ReportRow li .tag {
        max-width: 340px;
        width: 100%;
        width: auto;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportRow li .tag {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.blogDetailContent1ReportRow li .tag::before {
    content: "";
    background-color : #e26a00;
    color: #fff;
    padding-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    font-size: 20px;
    width: 86px;
    height: 34px;
    position: absolute;
    top: 10px;
    left: -10px;
    z-index: 1;
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportRow li .report::before {
        top: -1.33vw;
        left: -1.33vw;
    }
}

@media screen and (max-width: 500px) {
    .blogDetailContent1ReportRow li .tag::before {
        align-items: center;
        font-size: 4vw;
    }
}

.blogDetailContent1ReportRow li .tag-2024::before {
    content: "2024年";
    background-color: #E60012;
}

.blogDetailContent1ReportRow li .tag-2023::before {
    content: "2023年";
}

.blogDetailContent1ReportRow li .tag-2022::before {
    content: "2022年";
}

.blogDetailContent1ReportRow li .tag-2021::before {
    content: "2021年";
}

.blogDetailContent1ReportRow li .tag-2020::before {
    content: "2020年";
}

.blogDetailContent1ReportRow li .tag-2019::before {
    content: "2019年";
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1ReportImg {
        margin-bottom: 22px;
        max-width: 100%;
        width: 100%;
        width: auto;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportImg {
        width: 36vw;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportComingsoon {
        width: 90.66vw;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportRightArea {
        width: 47.66vw !important;
    }
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1ReportDate {
        position: absolute;
        top: 197px;
        right: 0px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 14px;
        width: 130px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportDate {
        font-size: 3.46vw;
        margin-bottom: 2vw;
    }
}

.blogDetailContent1ReportH2 {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: #e26a00;
    line-height: 1.5;
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportH2 {
        font-size: 4.26vw;
    }
}

.blogDetailContent1ReportText {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.8;
    color: #4b4b4b;
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1ReportText {
        display: none !important;
    }
}

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

.reader h2, .reader p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.reader h2 {
    -webkit-line-clamp: 5;
}

@media screen and (max-width: 1023px) {
    .reader h2 {
        -webkit-line-clamp: 3;
    }
}

.reader p {
    -webkit-line-clamp: 10;
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1ReportMore {
        font-size: 20px;
        font-weight: bold;
        color: #e26a00;
        text-align: right;
    }
}

nav.blogDetailContent1PageNav a {
    text-decoration: none;
}

nav.blogDetailContent1PageNav {
    margin: 2em 0;
    text-align: center;
}

@media screen and (max-width: 1023px) {
    nav.blogDetailContent1PageNav {
        margin: 0 auto 4vw;
    }
}

.blogDetailContent1PageNav .blogDetailContent1PageNavInner {
    display: inline-block;
    margin-top: 2em;
    padding: 0 0.5em;
}

.blogDetailContent1PageNav .pagenum {
    font-size: 1em;
    line-height: 50px;
    display: block;
    float: left;
    transition: 400ms ease;
    letter-spacing: 0.1em;
    color: #4b4b4b;
    width: 50px;
    height: 50px;
    margin: auto .5em;
    border: 1px solid #f39800;
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1PageNav .pagenum {
        font-size: 4.26vw;
        width: 10.66vw;
        height: 10.66vw;
        line-height: 10.66vw;
        border: 0.13vw solid #f39800;
    }
}

.blogDetailContent1PageNav .pagenum:hover {
    opacity: 0.8;
}

.blogDetailContent1PageNav .pagenum.current {
    color: #fff;
    background-color: #f39800;
    border: 2px solid #f39800;
}

.blogDetailContent1PageNav .pagenum.prev, .blogDetailContent1PageNav .pagenum.next {
    border: none;
}

.blogDetailContent1PageNav .pagenum.prev img, .blogDetailContent1PageNav .pagenum.next img {
    vertical-align: middle !important;
}

@media screen and (min-width: 1024px) {
    .blogDetailContent1PageNav .pagenum.prev img, .blogDetailContent1PageNav .pagenum.next img {
        width: 18px;
        height: 18px;
    }
}

@media screen and (max-width: 1023px) {
    .blogDetailContent1PageNav .pagenum.prev img, .blogDetailContent1PageNav .pagenum.next img {
        width: 3.73vw;
        height: 3.73vw;
    }
}

.list-return {
    text-align: center;
    margin-top: 60px;
}

@media screen and (max-width: 1023px) {
    .list-return {
        margin-top: 10.6666666667vw;
        margin-bottom: 10.6666666667vw;
    }
}

.list-return a {
    font-size: 18px;
    color: #ff581c;
}

@media screen and (max-width: 1023px) {
    .list-return a {
        font-size: 4.2666666667vw;
    }
}

.list-return a:hover {
    opacity: .7;
}

@media screen and (min-width: 1024px) {
    .smileballRecommendKVArea {
        width: 100%;
        height: 460px;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/recommend/sarasarared/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballRecommendKVArea p {
        text-align: center;
    }

    .smileballRecommendKVArea p .kvText {
        padding-top: 80px;
    }
}

@media screen and (max-width: 1023px) {
    .smileballRecommendKVArea {
        width: 100vw;
        height: 74.66vw;
        background-image: url("/tsunagu/vegetables/smileball/asset/img/recommend/sarasarared/sp/kv.jpg");
        background-size: cover;
        background-position: 50%;
    }

    .smileballRecommendKVArea p {
        text-align: center;
    }

    .smileballRecommendKVArea p .kvText {
        padding-top: 12vw;
        width: 50.66vw;
    }
}

.sarasararedIntro {
    margin: 0 auto;
    width: 100%;
}

@media screen and (min-width: 1024px) {
    .sarasararedIntro .sarasararedInner {
        max-width: 1120px;
        margin: 75px auto 164px;
        text-align: center;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedIntro .sarasararedInner {
        margin: 8vw 0 10.66vw;
        padding: 0 5.33vw;
        text-align: center;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedIntro .sarasaraLogo {
        width: 58.4vw;
    }
}

@media screen and (min-width: 1024px) {
    .sarasararedIntro .sarasararedIntroText {
        margin-top: 58px;
        padding-bottom: 60px;
        font-size: 16px;
        color: #4b4b4b;
        line-height: 1.875;
        border-bottom: 2px solid #e26a00;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedIntro .sarasararedIntroText {
        margin-top: 6.4vw;
        padding-bottom: 8vw;
        font-size: 3.46vw;
        color: #4b4b4b;
        line-height: 1.875;
        border-bottom: 0.26vw solid #e26a00;
    }
}

@media screen and (min-width: 1024px) {
    .sarasararedAreaContent1 {
        margin: 0 auto;
        width: 100%;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner {
        max-width: 1120px;
        margin: 164px auto 100px;
        display: flex;
        position: relative;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .sarasararedAreaContent1TextArea {
        width: 420px;
        background-color: #fff;
        position: absolute;
        top: -70px;
        padding-right: 62px;
        padding-bottom: 65px;
        margin-right: -60px;
        z-index: 10;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .sarasararedAreaContent1TextArea h2 {
        font-size: 14px;
        color: #e07300;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .sarasararedAreaContent1TextArea h3 {
        padding: 30px 0 0 0;
        font-size: 30px;
        width: 14em;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .sarasararedAreaContent1TextArea .sarasararedAreaContent1Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        width: 26em;
        line-height: 30px;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .title-border:before {
        margin-right: 0.5rem;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedAreaContent1 {
        text-align: center;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner {
        padding: 2.66vw 2.53vw 0;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner img {
        width: 100vw;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .title-border:before {
        margin-right: 1rem;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .sarasararedAreaContent1TextArea {
        padding: 7.466vw 0 8vw;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .sarasararedAreaContent1TextArea h2 {
        padding: 0 2.8vw 0;
        font-size: 2.666vw;
        font-weight: bold;
        color: #e07300;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .sarasararedAreaContent1TextArea h3 {
        padding: 2.8vw 2.53vw 0;
        font-size: 5.333vw;
        text-align: left;
    }

    .sarasararedAreaContent1 .sarasararedAreaContent1Inner .sarasararedAreaContent1TextArea .sarasararedAreaContent1Text {
        padding: 7.322vw 2.53vw 0;
        font-size: 3.46vw;
        line-height: 1.8em;
        text-align: left;
    }
}

@media screen and (min-width: 1024px) {
    .sarasararedAreaContent2 {
        margin: 0 auto;
        width: 100%;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner {
        max-width: 1120px;
        margin: 80px auto 164px;
        display: flex;
        position: relative;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .sarasararedAreaContent2TextArea {
        width: 420px;
        margin: 80px 0 0 -80px;
        padding: 58px 0 0 60px;
        position: absolute;
        background-color: #fff;
        right: 0px;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .sarasararedAreaContent2TextArea h2 {
        font-size: 14px;
        color: #e07300;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .sarasararedAreaContent2TextArea h3 {
        padding: 30px 0 0 0;
        font-size: 30px;
        width: 14em;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .sarasararedAreaContent2TextArea .sarasararedAreaContent2Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        width: 26em;
        line-height: 30px;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .title-border:before {
        margin-right: 0.5rem;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedAreaContent2 {
        text-align: center;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner {
        padding: 2.66vw 2.53vw 0;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner img {
        width: 100vw;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .title-border:before {
        margin-right: 1rem;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .sarasararedAreaContent2TextArea {
        padding: 7.466vw 0 8vw;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .sarasararedAreaContent2TextArea h2 {
        padding: 0 2.8vw 0;
        font-size: 2.666vw;
        font-weight: bold;
        color: #e07300;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .sarasararedAreaContent2TextArea h3 {
        padding: 2.8vw 2.53vw 0;
        font-size: 5.333vw;
        text-align: left;
    }

    .sarasararedAreaContent2 .sarasararedAreaContent2Inner .sarasararedAreaContent2TextArea .sarasararedAreaContent2Text {
        padding: 7.333vw 2.53vw 0;
        font-size: 3.46vw;
        line-height: 1.8em;
        text-align: left;
    }
}

@media screen and (min-width: 1024px) {
    .sarasararedAreaContent3 {
        margin: 0 auto;
        width: 100%;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner {
        max-width: 1120px;
        margin: 202px auto 100px;
        display: flex;
        position: relative;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .sarasararedAreaContent3TextArea {
        width: 420px;
        background-color: #fff;
        position: absolute;
        top: -70px;
        padding-right: 62px;
        padding-bottom: 65px;
        margin-right: -60px;
        z-index: 10;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .sarasararedAreaContent3TextArea h2 {
        font-size: 14px;
        color: #e07300;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .sarasararedAreaContent3TextArea h3 {
        padding: 30px 0 0 0;
        font-size: 30px;
        width: 14em;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .sarasararedAreaContent3TextArea .sarasararedAreaContent3Text {
        padding: 26px 0 0 0px;
        font-size: 16px;
        width: 26em;
        line-height: 30px;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .title-border:before {
        border-top: 2px solid;
        content: "";
        width: 20px;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .title-border:before {
        margin-right: 0.5rem;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedAreaContent3 {
        text-align: center;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner {
        padding: 2.66vw 2.53vw 0;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner img {
        width: 100vw;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .title-border {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .title-border:before {
        border-top: 0.533vw solid;
        content: "";
        width: 5.333vw;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .title-border:before {
        margin-right: 1rem;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .sarasararedAreaContent3TextArea {
        padding: 7.466vw 0 8vw;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .sarasararedAreaContent3TextArea h2 {
        padding: 0 2.8vw 0;
        font-size: 2.666vw;
        font-weight: bold;
        color: #e07300;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .sarasararedAreaContent3TextArea h3 {
        padding: 2.8vw 2.53vw 0;
        font-size: 5.333vw;
        text-align: left;
    }

    .sarasararedAreaContent3 .sarasararedAreaContent3Inner .sarasararedAreaContent3TextArea .sarasararedAreaContent3Text {
        padding: 7.322vw 2.53vw 0;
        font-size: 3.46vw;
        line-height: 1.8em;
        text-align: left;
    }
}

@media screen and (min-width: 1024px) {
    .sarasararedAreaContent4 {
        padding-bottom: 180px;
        border-bottom: 1px solid #dddddd;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedAreaContent4 {
        padding-bottom: 16vw;
        border-bottom: 0.26vw solid #dddddd;
    }
}

@media screen and (min-width: 1024px) {
    .sarasararedAreaContent4Inner {
        width: 1120px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedAreaContent4Inner {
        padding: 0 5.3vw;
    }
}

@media screen and (min-width: 1024px) {
    .sarasararedAreaContent4TitleH2 {
        font-size: 30px;
        text-align: center;
        margin-bottom: 50px;
        padding-bottom: 20px;
        border-bottom: 2px solid #e26a00;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedAreaContent4TitleH2 {
        font-size: 5.33vw;
        text-align: center;
        margin-bottom: 5.33vw;
        padding-bottom: 2.4vw;
        border-bottom: 2px solid #e26a00;
    }
}

@media screen and (min-width: 1024px) {
    .sarasararedAreaContent4Recipe {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.sarasararedAreaContent4Recipe .recipe {
    position: relative;
}

@media screen and (min-width: 1024px) {
    .sarasararedAreaContent4Recipe .recipe {
        width: 358px;
    }
}

@media screen and (max-width: 1023px) {
    .sarasararedAreaContent4Recipe .recipeImg {
        box-shadow: 1px 1px 1vw #d0d0d0;
        margin-bottom: 20px;
    }
}

.sarasararedAreaContent4Recipe .recipeBtn {
    position: absolute;
    bottom: -20px;
    right: -10px;
    box-shadow: 0 0 8px #a3a3a3;
}

#overLay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
}

#overLay.is-active {
    display: block;
}

#modalWrap {
    display: none;
    position: fixed;
    z-index: 10001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1060px;
    height: auto;
}

@media screen and (max-width: 1900px) {
    #modalWrap {
        width: 1000px;
    }
}

@media screen and (max-width: 1600px) {
    #modalWrap {
        width: 750px;
    }
}

@media screen and (max-width: 1023px) {
    #modalWrap {
        width: 66.6666666667vw;
    }
}

#modalWrap.is-active {
    display: block;
}

#modalCloseBtn {
    position: absolute;
    right: -50px;
    top: -50px;
    z-index: 10001;
    width: 50px;
}

@media screen and (max-width: 1023px) {
    #modalCloseBtn {
        width: 6.6666666667vw;
        right: -6.6666666667vw;
        top: -6.6666666667vw;
    }
}

#modalCloseBtn a:hover {
    opacity: .8;
}

.modal_group {
    display: none;
    width: 100%;
    height: 100%;
}

.modal_image {
    width: 100%;
    margin: 0 0 10px;
}

@media screen and (max-width: 1023px) {
    .modal_image {
        margin-bottom: 0.4vw;
    }
}

.modal_image img {
    width: 100%;
}

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

@media screen and (max-width: 1023px) {
    .pcOnly {
        display: none;
    }
}

a.hover {
    opacity: 1;
}

@media screen and (max-width: 1023px) {
    .fadeSp {
        opacity: 1;
        transform: translate(0, 10%);
    }
}

@media screen and (max-width: 1023px) {
    .fadeSp.fadeInSp {
        opacity: 1;
        transform: translate(0, 0);
        transition: all 1.2s;
    }
}

@keyframes fromStandard {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromTopShort {
    from {
        transform: translate(0, -6%);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromBottom {
    from {
        transform: translate(0, 10%);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromBottomLeft {
    from {
        transform: translate(-10%, 10%);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromLeft {
    from {
        transform: translate(-10%, 0);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromLeftShort {
    from {
        transform: translate(-5%, 0);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromLeftLong {
    from {
        transform: translate(-20%, 0);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromLeftTop {
    from {
        transform: translate(-10%, -10%);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromRight {
    from {
        transform: translate(10%, 0);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromRightShort {
    from {
        transform: translate(5%, 0);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromRightTop {
    from {
        transform: translate(10%, -10%);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromRightBottom {
    from {
        transform: translate(10%, 10%);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes fromRightBottomShort {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.c_group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

@media screen and (max-width: 1023px) {
    .c_group {
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: translate(0, -50%);
    }
}

.c_group.bg {
    padding: 120px;
    background: url(../img/bg_transparent.png) center center/100% no-repeat;
}

@media screen and (max-width: 1023px) {
    .c_group.bg {
        padding-top: 13.3333333333vw;
        padding-bottom: 13.3333333333vw;
        padding-right: 6.6666666667vw;
        padding-left: 6.6666666667vw;
        background-image: url(../img/bg_transparent_sp.png);
    }
}

.c_inner {
    position: relative;
    height: 100%;
}

.c_title {
    text-align: center;
}

@media screen and (max-width: 1023px) {
    .c_title {
        margin: 0 auto;
    }
}

@media screen and (max-width: 1023px) {
    .c_title img {
        display: none;
    }
}

.c_sub-title {
    text-align: center;
    margin-top: 30px;
    font-size: 36px;
    font-weight: bold;
    color: #e26a00;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .c_sub-title {
        margin-top: 4vw;
        font-size: 5.3333333333vw;
    }
}

.c_text {
    text-align: center;
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.7;
}

@media screen and (max-width: 1023px) {
    .c_text {
        margin-top: 5.3333333333vw;
        font-size: 3.7333333333vw;
        line-height: 1.4;
    }
}

.c_text:nth-of-type(2) {
    margin-top: 36px;
}

@media screen and (max-width: 1023px) {
    .c_text:nth-of-type(2) {
        margin-top: 5.3333333333vw;
    }
}

.c_button-wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

@media screen and (max-width: 1023px) {
    .c_button-wrap {
        display: block;
        margin-top: 8vw;
    }
}

.c_button {
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    border: 2px solid #e26a00;
    border-image: linear-gradient(to right, #e26a00 0%, #ffae00 80%);
    border-image-slice: 1;
    margin: auto;
    padding: 0 20px 0 0;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
    color: #e26a00;
    background: #fff;
    transition: .6s;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .c_button {
        max-width: 100%;
        width: 61.3333333333vw;
        height: 13.3333333333vw;
        margin: 0 auto;
        padding: 0;
        font-size: 3.4666666667vw;
    }
}

.c_button:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 26px;
    bottom: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background: url(../img/ic_arrow-right.png) center 0/auto no-repeat;
}

@media screen and (max-width: 1023px) {
    .c_button:before {
        width: 3.2vw;
        height: 3.2vw;
        right: 5.3333333333vw;
        background: url(../img/ic_arrow-right_sp.png) center 0/100% no-repeat;
    }
}

.c_button:nth-of-type(2) {
    margin-left: 20px;
}

@media screen and (max-width: 1023px) {
    .c_button:nth-of-type(2) {
        margin-left: auto;
        margin-top: 2.6666666667vw;
    }
}

.c_button:hover {
    opacity: 1;
    color: #fff;
    background: linear-gradient(to right, #e26a00 0%, #ffae00 80%);
}

@media screen and (max-width: 1023px) {
    .c_button:hover {
        color: #e26a00;
        background: #fff;
    }
}

.c_button:hover:before {
    background: url(../img/ic_arrow-right-o.png) center 0/auto no-repeat;
}

.c_button.short {
    width: 276px;
}

@media screen and (max-width: 1023px) {
    .c_button.short {
        width: 61.3333333333vw;
    }
}

.c_button.middle {
    width: 340px;
}

@media screen and (max-width: 1023px) {
    .c_button.middle {
        width: 61.3333333333vw;
    }
}

#bgVideoWrap1 {
    position: relative;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1023px) {
    #bgVideoWrap1 {
        display: none;
        overflow: hidden;
        height: 100%;
        margin-top: 0;
    }
}

#bgVideoWrap1 video {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
}

@media screen and (max-width: 1023px) {
    #bgVideoWrap1 video {
        left: 50%;
        transform: translateX(-50%);
    }
}

#bgVideoWrap2 {
    position: relative;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1023px) {
    #bgVideoWrap2 {
        display: none;
        overflow: hidden;
        height: 100%;
        margin-top: 0;
    }
}

#bgVideoWrap2 video {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
}

@media screen and (max-width: 1023px) {
    #bgVideoWrap2 video {
        left: 50%;
        transform: translateX(-50%);
    }
}

#boxVideoWrap1 {
    position: relative;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1023px) {
    #boxVideoWrap1 {
        display: none;
        overflow: hidden;
        height: 96vh;
    }
}

#boxVideoWrap1 video {
    display: block;
    position: absolute;
    top: 0;
    left: -28%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    z-index: 0;
}

#boxVideoWrap2 {
    position: relative;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1023px) {
    #boxVideoWrap2 {
        display: none;
        overflow: hidden;
        height: 96vh;
    }
}

#boxVideoWrap2 video {
    display: block;
    position: absolute;
    top: 0;
    left: -28%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    z-index: 0;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    background: #000;
}

#overlay.is-active {
    display: block;
}

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1900px) {
    .modal {
        max-width: 1000px;
    }
}

@media screen and (max-width: 1600px) {
    .modal {
        max-width: 750px;
    }
}

@media screen and (max-width: 1023px) {
    .modal {
        max-width: 100%;
        width: calc(100% - 30px);
    }
}

.modal.is-active {
    display: block;
}

#movieVideoWrap {
    width: 100%;
    height: 100%;
    padding-top: 56.2%;
}

#movieVideoWrap video {
    width: 100%;
    height: 100%;
}

.modal_inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.close-button {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #fff;
    z-index: 1;
}

@media screen and (max-width: 1023px) {
    .close-button {
        top: -13.3333333333vw;
        right: 0;
        width: 40px;
        height: 40px;
    }
}

.close-button div {
    position: relative;
    width: 100%;
    height: 100%;
}

.close-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 3px;
    margin: -1.5px 0 0 -15px;
    background: #ef993d;
}

.close-button span:nth-of-type(1) {
    transform: rotate(45deg);
}

.close-button span:nth-of-type(2) {
    transform: rotate(-45deg);
}

.scroll_image {
    position: fixed;
    right: 0;
    bottom: 30px;
    left: 0;
    z-index: 10;
    margin: 0 auto;
}

@media screen and (max-width: 1023px) {
    .scroll_image {
        display: none;
    }
}

.section {
    position: relative;
    width: 100%;
}

.loading {
    display: none;
    position: fixed;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 9999;
    height: 100vh;
    background: radial-gradient(circle, #f39800 20%, #f45c00 80%);
}

.animation {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: loadinganimation 5000ms ease-out forwards;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

@media screen and (max-width: 1023px) {
    .animation {
        margin-top: -6.6666666667vw;
    }
}

.animation p {
    margin-top: 50px;
    font-size: 28px;
    color: #fff;
}

@media screen and (max-width: 1023px) {
    .animation p {
        margin-top: 9.3333333333vw;
        font-size: 4.5333333333vw;
    }
}

@keyframes loadinganimation {
    from,to {
        opacity: 1;
    }

    60% {
        opacity: .5;
    }

    100% {
        opacity: 0;
    }
}

.cover {
    background: url(../img/bg_moku.png) center 0/cover no-repeat;
}

@media screen and (max-width: 1023px) {
    .cover {
        background-image: url(../img/bg_moku_sp.png);
    }
}

.cover.fadeIn .cover_image-left {
    animation: fromBottom 1.5s .5s forwards;
}

@media screen and (max-width: 1023px) {
    .cover.fadeIn .cover_image-left {
        animation: fromLeftShort 1.5s .5s forwards;
    }
}

.cover.fadeIn .cover_image-right {
    animation: fromTopShort 1.5s 1.2s forwards;
}

@media screen and (max-width: 1023px) {
    .cover.fadeIn .cover_image-right {
        animation: fromRightShort 1.5s 1.2s forwards;
    }
}

.cover.fadeIn .cover_title {
    animation: fromStandard 1.5s 1.7s forwards;
}

.cover_group {
    width: 618px;
    height: 396px;
}

@media screen and (max-width: 1023px) {
    .cover_group {
        width: 96.8vw;
        height: 64.8vw;
    }
}

.cover_inner {
    background: url(../img/bg_cloth.png) center 0/auto no-repeat;
}

@media screen and (max-width: 1023px) {
    .cover_inner {
        background-size: cover;
    }
}

.cover_title {
    text-align: center;
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .cover_title {
        width: 49.6vw;
        height: 49.8666666667vw;
        background: url(../img/tx_tamanegi.png) center 0/100% no-repeat;
    }
}

.cover_image-left {
    opacity: 0;
    position: absolute;
    bottom: -130px;
    left: -280px;
    z-index: 1;
}

@media screen and (max-width: 1023px) {
    .cover_image-left {
        top: -21.3333333333vw;
        bottom: auto;
        left: -1.6vw;
        width: 41.6vw;
        height: 135.3333333333vw;
        background: url(../img/pic_float1_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .cover_image-left img {
        display: none;
    }
}

.cover_image-right {
    opacity: 0;
    position: absolute;
    top: -218px;
    right: -210px;
    bottom: -130px;
    z-index: 1;
}

@media screen and (max-width: 1023px) {
    .cover_image-right {
        top: -41.3333333333vw;
        right: -1.6vw;
        width: 67.3333333333vw;
        height: 140vw;
        background: url(../img/pic_float2_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .cover_image-right img {
        display: none;
    }
}

.ticker {
    display: flex;
    position: absolute;
    left: -254px;
    bottom: -74px;
    z-index: 1;
}

@media screen and (max-width: 1023px) {
    .ticker {
        width: 92.5333333333vw;
        right: 0;
        bottom: -26.6666666667vw;
        left: 0;
        margin: auto;
    }
}

.ticker_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    font-size: 18px;
    color: #ee7600;
    background: #fff;
}

@media screen and (max-width: 1023px) {
    .ticker_icon {
        padding: 1.3333333333vw;
        font-size: 4.2666666667vw;
    }
}

.ticker-wrap {
    width: 510px;
    padding-left: 10px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.8);
}

@media screen and (max-width: 1023px) {
    .ticker-wrap {
        width: 100%;
        padding-left: 1.8666666667vw;
    }
}

.ticker_list {
    display: inline-block;
    line-height: 1.5;
    white-space: nowrap;
}

.ticker_item {
    display: inline-block;
    margin-right: 20px;
    padding: 6px;
    font-size: 14px;
    color: #000;
}

@media screen and (max-width: 1023px) {
    .ticker_item {
        margin-right: 3.7333333333vw;
        padding: 1.8666666667vw;
        font-size: 3.2666666667vw;
    }
}

.ticker_item .new {
    display: inline-block;
    margin-right: 10px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 14px;
    color: #fff;
    background: #f39800;
}

@media screen and (max-width: 1023px) {
    .ticker_item .new {
        margin-right: 1.8666666667vw;
        padding-top: 0.8vw;
        padding-right: 1.6vw;
        padding-bottom: 0.8vw;
        padding-left: 1.6vw;
        font-size: 3.4666666667vw;
    }
}

.ticker-wrap:hover .ticker_list {
    animation-play-state: paused;
}

.advertise {
    background: #fbfbfb;
}

.advertise.fadeIn .advertise_image-left {
    animation: fromLeftTop 1.5s .2s forwards;
}

@media screen and (max-width: 1023px) {
    .advertise.fadeIn .advertise_image-left {
        animation: fromLeft 1.5s .2s forwards;
    }
}

.advertise.fadeIn .advertise_image-wrap {
    animation: fromRightTop 1.5s .7s forwards;
}

@media screen and (max-width: 1023px) {
    .advertise.fadeIn .advertise_image-wrap {
        animation-name: fromRightBottom;
    }
}

.advertise.fadeIn .advertise_title-wrap {
    animation: fromStandard 1.5s 1.2s forwards;
}

.advertise_title-wrap {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .advertise_title {
        width: 59.3333333333vw;
        height: 17.7333333333vw;
        background: url(../img/tx_advertise-title_sp.png) center 0/100% no-repeat;
    }
}

.advertise_group-inner {
    position: relative;
}

.advertise_image-left {
    opacity: 0;
    position: absolute;
    top: -60px;
    left: -360px;
}

@media screen and (max-width: 1023px) {
    .advertise_image-left {
        top: -8vw;
        bottom: auto;
        left: -1.6vw;
        width: 34.2666666667vw;
        height: 128.8vw;
        background: url(../img/pic_advertise-float1_sp.png) center 0/cover no-repeat;
    }
}

.advertise_image-left img {
    opacity: 1;
}

@media screen and (max-width: 1023px) {
    .advertise_image-left img {
        display: none;
    }
}

.advertise_image-wrap {
    opacity: 0;
    position: absolute;
    top: -70px;
    right: -400px;
}

@media screen and (max-width: 1023px) {
    .advertise_image-wrap {
        top: auto;
        right: 0;
        bottom: 0;
    }
}

@media screen and (max-width: 1023px) {
    .advertise_image-right {
        width: 23.3333333333vw;
        height: 117.8666666667vw;
        background: url(../img/pic_advertise-float2_sp.png) center 0/cover no-repeat;
    }
}

.advertise_image-right img {
    opacity: 1;
}

@media screen and (max-width: 1023px) {
    .advertise_image-right img {
        display: none;
    }
}

.advertise_movie {
    width: 430px;
    height: 380px;
    margin-top: -70px;
    transform: rotate(-3deg);
    background: #000;
}

@media screen and (max-width: 1023px) {
    .advertise_movie {
        display: none;
    }
}

.advertise_button-wrap {
    width: 580px;
}

@media screen and (max-width: 1023px) {
    .advertise_button-wrap {
        width: auto;
    }
}

.smileblog {
    background: url(../img/bg_smileblog.jpg) center 0/cover no-repeat;
}

@media screen and (max-width: 1023px) {
    .smileblog {
        background-image: url(../img/bg_smileblog_sp.jpg);
    }
}

.smileblog.fadeIn .smileblog_list {
    animation: fromLeftShort 1.5s .2s forwards;
}

@media screen and (max-width: 1023px) {
    .smileblog.fadeIn .smileblog_list {
        animation: fromStandard 1.5s .7s forwards;
    }
}

.smileblog.fadeIn .smileblog_title {
    animation: fromStandard 1.5s .7s forwards;
}

@media screen and (max-width: 1023px) {
    .smileblog.fadeIn .smileblog_title {
        animation: fromStandard 1.5s .2s forwards;
    }
}

.smileblog.fadeIn .smileblog-wrap {
    animation: fromStandard 1.5s .7s forwards;
}

@media screen and (max-width: 1023px) {
    .smileblog.fadeIn .smileblog-wrap {
        animation: fromStandard 1.5s .7s forwards;
    }
}

.smileblog a:hover {
    opacity: .7;
    transition: .6s;
}

@media screen and (max-width: 1023px) {
    .smileblog a:hover {
        opacity: 1;
    }
}

.smileblog_title {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .smileblog_title {
        width: 66vw;
        height: 17.7333333333vw;
        background: url(../img/tx_smileblog_sp.png) center 0/cover no-repeat;
    }
}

.smileblog_list {
    opacity: 0;
    display: flex;
    justify-content: center;
    max-width: 1210px;
    width: 100%;
    margin-top: 30px;
}

@media screen and (max-width: 1023px) {
    .smileblog_list {
        display: block;
        max-width: 100%;
        width: 89.3333333333vw;
        margin-top: 2.1333333333vw;
        margin-right: auto;
        margin-left: auto;
    }
}

.smileblog-item {
    box-sizing: border-box;
    width: 270px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
    background: #fff;
}

@media screen and (max-width: 1023px) {
    .smileblog-item {
        width: auto;
        min-height: 25.6vw;
        margin-top: 2.6666666667vw;
        box-shadow: 0px 1.33vw 2.67vw rgba(0, 0, 0, 0.4);
        background: #fff;
    }
}

.smileblog-item a {
    box-sizing: border-box;
    opacity: 1;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    padding: 15px;
}

@media screen and (max-width: 1023px) {
    .smileblog-item a {
        display: flex;
        align-items: flex-start;
        padding: 2.1333333333vw;
    }
}

.smileblog-item.comingsoon {
    background: #fff url(../img/tx_comingsoon.png) center center/auto no-repeat;
}

@media screen and (max-width: 1023px) {
    .smileblog-item.comingsoon {
        background: #fff url(../img/tx_comingsoon_sp.png) center center/42vw no-repeat;
    }
}

.smileblog-item:nth-of-type(2), .smileblog-item:nth-of-type(3), .smileblog-item:nth-of-type(4) {
    margin-left: 34px;
}

@media screen and (max-width: 1023px) {
    .smileblog-item:nth-of-type(2), .smileblog-item:nth-of-type(3), .smileblog-item:nth-of-type(4) {
        margin-left: 0;
    }
}

@media screen and (max-width: 1023px) {
    .smileblog-item:nth-of-type(4) {
        display: none;
    }
}

.smileblog-item_image {
    position: relative;
}

@media screen and (max-width: 1023px) {
    .smileblog-item_image {
        max-width: 32vw;
        width: 100%;
        margin-right: 4vw;
    }
}

.smileblog-item_image img {
    width: 100%;
}

.smileblog-item_image span {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
    font-size: 10px;
    margin: auto;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
}

@media screen and (max-width: 1023px) {
    .smileblog-item_image span {
        top: 1.3333333333vw;
        right: -36vw;
        padding: 0;
        font-size: 3.2vw;
        color: #000;
        background: none;
    }
}

.smileblog-item_image:before {
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -8px;
    left: -23px;
    z-index: 1;
    margin: auto;
    width: 86px;
    height: 34px;
    color: #fff;
    background: #e26a00;
}

.smileblog-item_image--2024::before {
    content: "2024年";
    background-color: #E60012;
}

.smileblog-item_image--2023::before {
    content: "2023年";
    background-color: #E60012;
}

.smileblog-item_image--2022::before {
    content: "2022年";
}

@media screen and (max-width: 1023px) {
    .smileblog-item_image:before {
        top: -1.0666666667vw;
        left: -3.2vw;
        width: 16.8vw;
        height: 5.8666666667vw;
        font-size: 3.2vw;
    }
}

.smileblog-item_text {
    margin-top: 8px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
    color: #e26a00;
}

@media screen and (max-width: 1023px) {
    .smileblog-item_text {
        width: 46.6666666667vw;
        margin-top: 8vw;
        font-size: 3.7333333333vw;
    }
}

.smileblog-wrap {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .smileblog-wrap {
        margin-top: 5.3333333333vw;
    }
}

.secret {
    height: 100vh;
    background: radial-gradient(circle, #fbfbfb 20%, #ececec 80%);
}

.secret.fadeIn .secret_movie-wrap {
    animation: fromLeftTop 1.5s .2s forwards;
}

.secret.fadeIn .secret_image-right {
    animation: fromRightTop 1.5s .7s forwards;
}

@media screen and (max-width: 1023px) {
    .secret.fadeIn .secret_image-right {
        animation: fromBottom 1.5s .2s forwards;
    }
}

.secret.fadeIn .secret_title-wrap {
    animation: fromStandard 1.5s 1.2s forwards;
}

@media screen and (max-width: 1023px) {
    .secret.fadeIn .secret_title-wrap {
        animation: fromStandard 1.5s .7s forwards;
    }
}

.secret_image-right {
    opacity: 0;
    position: absolute;
    top: 10px;
    right: -300px;
}

@media screen and (max-width: 1023px) {
    .secret_image-right {
        top: auto;
        right: auto;
        bottom: -32vw;
        width: 100vw;
        height: 70.9333333333vw;
        background: url(../img/pic_secret-float1_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .secret_image-right img {
        display: none;
    }
}

.secret_title-wrap {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .secret_title {
        width: 46.9333333333vw;
        height: 17.6vw;
        background: url(../img/tx_secret-title_sp.png) center 0/100% no-repeat;
    }
}

.secret_movie-wrap {
    position: absolute;
    top: 120px;
    left: -400px;
    z-index: -1;
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .secret_movie-wrap {
        display: none;
    }
}

.secret_movie {
    width: 430px;
    height: 380px;
    transform: rotate(-5deg);
}

.secret-wrap {
    margin-top: 80px;
}

@media screen and (max-width: 1023px) {
    .secret-wrap {
        margin-top: 10.6666666667vw;
    }
}

.producer {
    background: url(../img/bg_producer.jpg) center 0/cover no-repeat;
}

@media screen and (max-width: 1023px) {
    .producer {
        background-image: url(../img/bg_producer_sp.jpg);
    }
}

.producer.fadeIn .producer_title-wrap {
    animation: fromStandard 1.5s .5s forwards;
}

.producer_title-wrap {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .producer_title {
        width: 58.9333333333vw;
        height: 17.6vw;
        background: url(../img/tx_producer-title_sp.png) center 0/cover no-repeat;
    }
}

.various {
    background: radial-gradient(circle, #fbfbfb 20%, #ececec 80%);
}

.various.fadeIn .various_list:nth-of-type(1) {
    animation: fromBottom 1.5s .2s forwards;
}

@media screen and (max-width: 1023px) {
    .various.fadeIn .various_list:nth-of-type(1) {
        animation: fromStandard 1.5s .7s forwards;
    }
}

.various.fadeIn .various_list:nth-of-type(2) {
    animation: fromBottom 1.5s .7s forwards;
}

@media screen and (max-width: 1023px) {
    .various.fadeIn .various_list:nth-of-type(2) {
        animation: fromStandard 1.5s .7s forwards;
    }
}

.various.fadeIn .various_title-wrap {
    animation: fromStandard 1.5s 1.2s forwards;
}

@media screen and (max-width: 1023px) {
    .various.fadeIn .various_title-wrap {
        animation: fromStandard 1.5s .2s forwards;
    }
}

.various.fadeIn .various_button-wrap {
    animation: fromStandard 1.5s 1.2s forwards;
}

.various_title-wrap {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .various_title {
        width: 37.3333333333vw;
        height: 19.3333333333vw;
        background: url(../img/tx_various-title_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .various_sub-title {
        margin-top: 1.3333333333vw;
    }
}

@media screen and (max-width: 1023px) {
    .various_text {
        margin-top: 2.1333333333vw;
    }
}

.various_list-wrap {
    position: absolute;
    top: -50px;
    left: -438px;
}

@media screen and (max-width: 1023px) {
    .various_list-wrap {
        position: static;
        margin-top: 1.3333333333vw;
    }
}

.various_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 1210px;
    margin-top: 20px;
}

@media screen and (max-width: 1023px) {
    .various_list {
        width: 78.6666666667vw;
        margin-top: 2.6666666667vw;
        margin-right: auto;
        margin-left: auto;
    }
}

.various_list:nth-of-type(1) {
    opacity: 0;
    margin-bottom: 40px;
}

@media screen and (max-width: 1023px) {
    .various_list:nth-of-type(1) {
        margin-bottom: 2.6666666667vw;
    }
}

.various_list:nth-of-type(2) {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .various_item {
        width: 37.3333333333vw;
    }
}

.various_item a {
    position: relative;
    display: block;
    width: 380px;
    height: 100%;
    box-sizing: border-box;
    opacity: 1;
    text-decoration: none;
    transition: .6s;
}

@media screen and (max-width: 1023px) {
    .various_item a {
        width: auto;
    }
}

.various_item a:hover .various_item-text {
    opacity: 1;
    color: #fff;
    background: #e26a00;
}

@media screen and (max-width: 1023px) {
    .various_item a:hover .various_item-text {
        color: #e26a00;
        background: #fff;
    }
}

.various_item a:hover .various_item-text span:before {
    background: url(../img/ic_arrow-right-o.png) center 0/auto no-repeat;
}

.various_item a:hover img {
    opacity: .7;
}

.various_item img {
    width: 100%;
}

.various_item-text {
    display: flex;
    align-items: center;
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 210px;
    height: 60px;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.25;
    color: #e26a00;
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 1023px) {
    .various_item-text {
        position: static;
        width: 100%;
        height: 9.0666666667vw;
        padding-left: 0;
        font-size: 2.6666666667vw;
    }
}

.various_item-text span {
    position: relative;
    display: block;
    width: 100%;
}

@media screen and (max-width: 1023px) {
    .various_item-text span {
        padding-left: 1.6vw;
    }
}

.various_item-text span:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 26px;
    bottom: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background: url(../img/ic_arrow-right.png) center 0/auto no-repeat;
}

@media screen and (max-width: 1023px) {
    .various_item-text span:before {
        width: 3.2vw;
        height: 3.2vw;
        right: 2.1333333333vw;
        background: url(../img/ic_arrow-right_sp.png) center 0/100% no-repeat;
    }
}

.various_button-wrap {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .various_button-wrap {
        margin-top: 5.3333333333vw;
    }
}

.onion {
    background: radial-gradient(circle, #fbfbfb 20%, #ececec 80%);
}

.onion.fadeIn .onion_image-left {
    animation: fromLeftTop 1.5s .2s forwards;
}

@media screen and (max-width: 1023px) {
    .onion.fadeIn .onion_image-left {
        animation: fromLeft 1.5s .2s forwards;
    }
}

.onion.fadeIn .onion_image-right {
    animation: fromRightTop 1.5s .7s forwards;
}

@media screen and (max-width: 1023px) {
    .onion.fadeIn .onion_image-right {
        animation: fromRight 1.5s .7s forwards;
    }
}

.onion.fadeIn .onion_title-wrap {
    animation: fromStandard 1.5s 1.2s forwards;
}

.onion_image-left {
    opacity: 0;
    position: absolute;
    top: -100px;
    left: -550px;
    z-index: -1;
}

@media screen and (max-width: 1023px) {
    .onion_image-left {
        top: auto;
        bottom: 4vw;
        left: 0;
        width: 100vw;
        height: 127.4666666667vw;
        background: url(../img/pic_onion-float1_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .onion_image-left img {
        display: none;
    }
}

.onion_image-right {
    opacity: 0;
    position: absolute;
    top: 350px;
    right: 0;
    z-index: 0;
}

@media screen and (max-width: 1023px) {
    .onion_image-right {
        top: auto;
        right: 0;
        bottom: 0;
        width: 79.8666666667vw;
        height: 68.4vw;
        background: url(../img/pic_onion-float2_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .onion_image-right img {
        display: none;
    }
}

.onion_title-wrap {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .onion_title {
        width: 58.8vw;
        height: 17.4666666667vw;
        background: url(../img/tx_onion-title_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .onion_sub-title {
        margin-top: 5.3333333333vw;
        margin-right: auto;
        margin-left: auto;
        width: 59.0666666667vw;
        height: 19.8666666667vw;
        background: url(../img/tx_onion-sub-title_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .onion_sub-title img {
        display: none;
    }
}

.season {
    background: radial-gradient(circle, #fbfbfb 20%, #ececec 80%);
}

.season.fadeIn .season_image-left {
    animation: fromLeftTop 1.5s .2s forwards;
}

@media screen and (max-width: 1023px) {
    .season.fadeIn .season_image-left {
        animation-name: fromLeft;
    }
}

.season.fadeIn .season_image-right {
    animation: fromRightBottomShort 1.5s .7s forwards;
}

.season.fadeIn .season_title-wrap {
    animation: fromStandard 1.5s 1.2s forwards;
}

.season_title-wrap {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .season_title {
        width: 44.5333333333vw;
        height: 22.9333333333vw;
        background: url(../img/tx_season-title_sp.png) center 0/cover no-repeat;
    }
}

.season_image-left {
    opacity: 0;
    position: absolute;
    top: -90px;
    left: -420px;
    z-index: -1;
}

@media screen and (max-width: 1023px) {
    .season_image-left {
        top: 0;
        left: 0;
        width: 45.4666666667vw;
        height: 116.8vw;
        background: url(../img/pic_season-float1_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .season_image-left img {
        display: none;
    }
}

.season_image-right {
    opacity: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
}

@media screen and (max-width: 1023px) {
    .season_image-right {
        width: 64.2666666667vw;
        height: 149.2vw;
        background: url(../img/pic_season-float2_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .season_image-right img {
        display: none;
    }
}

.foot.fadeIn .foot_title-wrap {
    animation: fromStandard 1.5s .5s forwards;
}

@media screen and (max-width: 1023px) {
    .foot_group {
        position: static;
        transform: translate(0, 0);
    }
}

.foot_title-wrap {
    opacity: 0;
}

@media screen and (max-width: 1023px) {
    .foot_title-wrap {
        padding-top: 4vw;
    }
}

.foot_title {
    text-align: center;
}

@media screen and (max-width: 1023px) {
    .foot_title {
        width: 45.0666666667vw;
        height: 24.5333333333vw;
        margin-top: 6.6666666667vw;
        margin-right: auto;
        margin-left: auto;
        background: url(../img/pic_foot-smile_sp.png) center 0/cover no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .foot_title img {
        display: none;
    }
}

.foot_list {
    display: flex;
    flex-wrap: wrap;
    width: 900px;
    margin: 30px auto 0;
}

@media screen and (max-width: 1023px) {
    .foot_list {
        width: 82.6666666667vw;
        margin-top: 6.6666666667vw;
    }
}

.foot_item {
    box-sizing: border-box;
    position: relative;
    width: 25%;
    margin-top: 20px;
    padding-left: 22px;
    font-size: 16px;
}

@media screen and (max-width: 1023px) {
    .foot_item {
        width: 50%;
        margin-top: 4vw;
        padding-left: 4.8vw;
        font-size: 3.7333333333vw;
    }
}

.foot_item:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background: url(../img/ic_arrow-right.png) center 0/auto no-repeat;
}

@media screen and (max-width: 1023px) {
    .foot_item:before {
        top: 1.0666666667vw;
        bottom: auto;
        width: 3.2vw;
        height: 3.2vw;
        background: url(../img/ic_arrow-right_sp.png) center 0/100% no-repeat;
    }
}

.foot_item a {
    color: #4b4b4b;
    text-decoration: none;
}

.foot_item a.hover {
    opacity: 0.8 !important;
    text-decoration: underline !important;
}

.foot-share {
    margin-top: 36px;
}

@media screen and (max-width: 1023px) {
    .foot-share {
        margin-top: 5.3333333333vw;
        padding-bottom: 6.6666666667vw;
    }
}

.foot-share_title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #4b4b4b;
}

@media screen and (max-width: 1023px) {
    .foot-share_title {
        font-size: 3.7333333333vw;
    }
}

.foot-share_list {
    justify-content: center !important;
    margin-top: 6px;
}

@media screen and (max-width: 1023px) {
    .foot-share_list {
        margin-top: 2.6666666667vw;
    }
}

@media screen and (max-width: 1023px) {
    .foot-share_item {
        margin-top: 0;
    }
}

.foot-share_item:nth-of-type(1) {
    margin-right: 26px;
}

@media screen and (max-width: 1023px) {
    .foot-share_item:nth-of-type(1) {
        margin-right: 2.9333333333vw;
    }
}

.fb_iframe_widget > span {
    vertical-align: baseline !important;
}

.ft {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11;
}

@media screen and (max-width: 1023px) {
    .ft {
        position: static;
    }
}

@media screen and (max-width: 1023px) {
    .ft #topicpass {
        margin-top: 0;
    }
}

#smileball {
    display: block;
}

.content {
    position: relative;
}

.pager {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 1;
    transform: translateY(-50%);
    padding: 0;
}

.pager li {
    display: block;
    margin: 20px;
}

@media screen and (max-width: 1023px) {
    .pager li {
        margin-top: 4vw;
        margin-left: 2.6666666667vw;
    }
}

.pager li a {
    opacity: .6;
    display: block;
    width: 14px;
    height: 14px;
    border: 1px solid #f39800;
    background: #fff;
    border-radius: 50%;
}

@media screen and (max-width: 1023px) {
    .pager li a {
        width: 1.8666666667vw;
        height: 1.8666666667vw;
        border: 0.27vw solid #f39800;
    }
}

.pager .is-current a {
    opacity: 1;
    background: #f39800;
}

.mb0 {
    margin-bottom: 0;
}

/*# sourceMappingURL=main.css.map */
/* top SP kv
---------------------- */
@media screen and (max-width: 1023px) {
    .cover_title {
        width: 55.8vw;
        height: 49.8666666667vw;
        background: url(../img/tx_tamanegi.png) center 0/100% no-repeat;
    }
}

/* icon_youronions
---------------------- */
.icon_youronions {
    position: absolute;
    text-align: center;
    font-size: 14px;
    z-index: 100;
    bottom: -80px;
    right: -185px;
}

.icon_youronions a {
    text-decoration: none;
    color: #23b24b;
}

@media screen and (max-width: 1023px) {
    .icon_youronions {
        font-size: 10px;
        bottom: 6%;
        right: 1%;
    }

    .icon_youronions img {
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-width: 320px) {
    .icon_youronions {
        right: -1%;
    }

    .icon_youronions img {
        width: 35px;
        height: 35px;
    }
}

.pager {
    z-index: 11;
}

.footer {
    z-index: 10;
}

.l-footer__company-link {
    background: #fff;
}

@media screen and (min-width: 1024px) {
    .section.footer .l-footer {
        width: 100%;
        position: absolute;
        bottom: 0;
    }
}

.l-content * {
    box-sizing: content-box;
}

@media screen and (min-width: 960px) {
    .smileball_index .l-header.is-scroll {
        top: 0;
    }
}

/* text-red */
.text-red {
    color: #E60012;
}