@charset "UTF-8";
@import url("reset.min.css");

/*フォント設定
-----------------------------------------*/
@font-face
{
    font-family: 'Zen';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../font/ZenKakuGothicNew-Regular.ttf') format('truetype');
}

@font-face
{
    font-family: 'Zen';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../font/ZenKakuGothicNew-Medium.ttf') format('truetype');
}

@font-face
{
    font-family: 'Zen';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../font/ZZenKakuGothicNew-Bold.ttf') format('truetype');
}

/* 全体
-------------------------------------*/
html
{
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: var(--black);
    font-family: sans-serif;
    line-height: 1.15;
    scroll-behavior: smooth;
}

body
{
    position: relative;
    background: #fff;
    color: var(--black);
    font-family: 'Zen', sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

body,
html
{
    height: 100%;
    width: 100%;
}

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

a
{
    display: block;
    color: #000;
    text-decoration-line: none;
    word-break: break-all;
}

a:hover
{
    opacity: 0.8;
    transition-duration: 0.8s;
}

a img:hover
{
    opacity: 0.8;
    transition-duration: 0.8s;
}

.pc-none
{
    display: none;
}

.sp-none
{
    display: block;
}

.clear
{
    clear: both;
}

@media screen and (max-width: 767px)
{
    .pc-none
    {
        display: block;
    }

    .sp-none
    {
        display: none;
    }

    body,
    html
    {
        width: auto;
    }
}

/* ヘッダー
-------------------------------------*/
header
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 125px;
    background: #fff;
    text-align: center;
    padding: 35px 0;
    z-index: 3;
}

header img
{
    width: 190px;
}

@media screen and (max-width: 767px)
{
    header
    {
        height: 55px;
        padding: 14px 0;
    }

    header img
    {
        width: 95.81px;
    }
}

/* フッター
-------------------------------------*/
footer
{
    background: #FAF7EF;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 11px;
}

@media screen and (max-width: 767px)
{
    footer
    {
        height: 65px;
        line-height: 1.1;
        padding-top: 20px;
    }
}

/* 共通コンテンツ
-------------------------------------*/
main
{
    padding-top: 125px;
}

.container
{
    width: 1039px;
    margin: 0 auto;
    padding: 0 30px;
}

@media screen and (max-width: 767px)
{
    main
    {
        padding-top: 65px;
    }

    .container
    {
        width: 90%;
        padding: 0;
    }
}

/* 各コンテンツ
-------------------------------------*/

/* メインビジュアル
-----------------*/
#mainimg
{
    width: 100%;
    height: 1033px;
    background-image: url(../images/mainimg_back_pc.avif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 20px;
}

#mainimg .container
{
    width: 1129px;
    margin: 0 auto;
    padding: 0 30px;
}

#mainimg .top
{
    width: 1069.23px;
    margin: 0 auto 24px;
}

#mainimg .bottom
{
    position: relative;
    z-index: 1;
    width: 911.68px;
    margin: 0 auto;
}

#mainimg .bottom .txt
{
    position: absolute;
    top: 145px;
    left: 0;
    z-index: -1;
    width: 931px;
    height: 186px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#mainimg .bottom .txt .item
{
    width: 32%;
    height: 186px;
    border-radius: 20px;
    background: #FFFFCC;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.556;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1em;
}

@media screen and (max-width: 767px)
{
    #mainimg
    {
        height: 725px;
        background-image: url(../images/mainimg_back_sp767.webp);
    }

    #mainimg .container
    {
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }

    #mainimg .top
    {
        width: 100%;
        max-width: 356px;
    }

    #mainimg .bottom
    {
        width: 100%;
        max-width: 356px;
    }

    #mainimg .bottom .txt
    {
        top: 82px;
        left: 0;
        z-index: -1;
        width: 100%;
        height: auto;
    }

    #mainimg .bottom .txt .item
    {
        width: 100%;
        height: 72px;
        border-radius: 10px;
        font-size: 16px;
        line-height: 1.25;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 500px)
{
    #mainimg
    {
        height: 725px;
        background-image: url(../images/mainimg_back_sp500.webp);
    }
}

/* おためしキャンペーン
-----------------*/
#campaign
{
    max-width: 100%;
    height: auto;
    background: #9FD5FF;
    overflow: hidden;
}

#campaign .container
{
    position: relative;
    z-index: 1;
}

#campaign .icon01
{
    position: absolute;
    top: 290px;
    left: -267px;
    width: 370.06px;
    height: 370.06px;
    z-index: -1;
}

#campaign .icon02
{
    position: absolute;
    top: 30px;
    right: -278px;
    width: 292.24px;
    height: 243.01px;
    z-index: -1;
}

#campaign .icon03
{
    position: absolute;
    bottom: 60px;
    left: -236px;
    width: 266.37px;
    height: 244.36px;
    z-index: -1;
}

#campaign .icon04
{
    position: absolute;
    bottom: 100px;
    right: -122px;
    width: 280.74px;
    height: 280.74px;
    z-index: -1;
}

#campaign .top
{
    width: 1007.43px;
    margin: 0 auto 50px;
}

#campaign .top h2
{
    padding-bottom: 24px;
    padding-right: 60px;
}

#campaign .top p
{
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    line-height: 1.52;
    padding-bottom: 24px;
}

#campaign .top .kikan
{
    width: 695.61px;
    margin: 0 auto;
}

#campaign .bottom
{
    width: 911.68px;
    margin: 0 auto;
}

#campaign .bottom .outline
{
    margin-top: 55px;
}

#campaign .bottom .outline h3 img
{
    height: 30.84px;
    margin-bottom: 20px;
}

#campaign .bottom .outline p
{
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    line-height: 1.458;
}

#campaign .bottom .outline p.sm
{
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding-top: 10px;
}

#campaign .bottom .outline .kikan
{
    margin-top: 20px;
}

#campaign a.btn
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 47px auto;
    width: 305px;
    height: 66px;
    border-radius: 33px;
    background: #EF6374;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    border: 2px solid #fff;
}

#campaign small
{
    font-size: 14px;
    line-height: 1.286;
    font-weight: 500;
}

#campaign small a
{
    display: inline;
    text-decoration: underline;
}

@media screen and (max-width: 767px)
{
    #campaign .icon01
    {
        display: none;
    }

    #campaign .icon02
    {
        top: 16%;
        right: -68px;
        width: 152.15px;
        height: 146.48px;
    }

    #campaign .icon03
    {
        bottom: 28%;
        left: -88px;
        width: 204.73px;
        height: 187.81px;
    }

    #campaign .icon04
    {
        bottom: 11%;
        right: -67px;
        width: 187.5px;
        height: 187.5px;
    }

    #campaign .top
    {
        width: 100%;
        max-width: 356px;
        margin: 0 auto 25px;
    }

    #campaign .top p
    {
        font-size: 22px;
        padding-bottom: 10px;
        line-height: 1.389;
    }

    #campaign .top .kikan
    {
        width: 268.61px;
        height: 55.68px;
    }

    #campaign .bottom
    {
        width: 100%;
        max-width: 356px;
    }

    #campaign .bottom .outline
    {
        margin-top: 35px;
    }

    #campaign .bottom .outline .flow
    {
        display: block;
        width: 274.92px;
        margin: 0 auto;
    }

    #campaign .bottom .outline h3 img
    {
        margin-bottom: 10px;
    }

    #campaign .bottom .outline p
    {
        font-size: 20px;
    }

    #campaign a.btn
    {
        margin: 25px auto;
        font-size: 27px;
    }

    #campaign small
    {
        font-size: 10px;
        line-height: 1.5;
    }
}

/* ヤクルト牧場を作ろう
-----------------*/
#make
{
    position: relative;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    background-image:
        repeating-linear-gradient(90deg,
            #E7F5FC,
            #E7F5FC 1px,
            transparent 1px,
            transparent 32px),
        repeating-linear-gradient(0deg,
            #E7F5FC,
            #E7F5FC 1px,
            #fff 1px,
            #fff 32px);
}

#make .container
{
    position: relative;
    z-index: 1;
}

#make .icon01
{
    position: absolute;
    top: 320px;
    left: -92px;
    width: 180.74px;
    height: 123.08px;
    z-index: -1;
}

#make .icon02
{
    position: absolute;
    top: 323px;
    right: -62px;
    width: 159.78px;
    height: 211.32px;
    z-index: -1;
}

#make .icon03
{
    position: absolute;
    bottom: -40px;
    left: 54px;
    width: 157.52px;
    height: 225.81px;
    z-index: -1;
}

#make .icon04
{
    position: absolute;
    bottom: 0;
    right: -80px;
    width: 138.76px;
    height: 219.69px;
    z-index: -1;
}

#make .top
{
    width: 919.85px;
    margin: 50px auto 40px;
}

#make .top h2
{
    margin-bottom: 20px;
}

#make .top p
{
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    line-height: 1.375;
}

#make .bottom
{
    width: 942.69px;
    margin: 0 auto;
}

#make .bottom .check
{
    display: block;
    width: 231.72px;
    margin: 0 auto;
}

#make a
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 97px;
    width: 305px;
    height: 66px;
    border-radius: 33px;
    background: #EF6374;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}

#make .wave
{
    width: 100%;
    height: 103px;
    background-image: url(../images/make_back_pc.svg);
    background-repeat: repeat-x;
}

#make .wave2
{
    width: 100%;
    height: 103px;
    background-image: url(../images/lot_back_pc.svg);
    background-repeat: repeat-x;
    transform: rotate(180deg);
}

@media screen and (max-width: 767px)
{
    #make .icon01
    {
        top: auto;
        bottom: 9%;
        left: 25px;
        width: 140.5px;
        height: 95.68px;
    }

    #make .icon02
    {
        display: none;
    }

    #make .icon03
    {
        display: none;
    }

    #make .icon04
    {
        bottom: 5%;
        right: 31px;
        width: 98.09px;
        height: 155.31px;
    }

    #make .top
    {
        width: 100%;
        max-width: 356px;
    }

    #make .top p
    {
        font-size: 20px;
    }

    #make .bottom
    {
        width: 90%;
        max-width: 356px;
    }

    #make .bottom .check
    {
        margin-top: 180px;
    }

    #make a
    {
        margin: 160px auto 40px;
        font-size: 27px;
    }

    #make .wave
    {
        background-image: url(../images/make_back_sp.svg);
    }

    #make .wave2
    {
        background-image: url(../images/lot_back_sp.svg);
    }
}

/* 子どもたちにいいことたくさん
-----------------*/
#lot
{
    position: relative;
    max-width: 100%;
    background: #FFFFC9;
    padding-bottom: 80px;
}

#lot .top
{
    width: 930.85px;
    margin: 0 auto 64px;
}

#lot .bottom
{
    width: 979px;
    margin: 0 auto;
    position: relative;
}

#lot .bottom .advantage
{
    background: #fff;
    border-radius: 20px;
    width: 100%;
    height: 571px;
    padding: 42px 0 28px;
    position: relative;
    z-index: 1;
}

#lot .bottom .advantage.cont01
{
    margin-bottom: 60px;
}

#lot .bottom .advantage.cont01 h3
{
    display: block;
    width: 681.51px;
    height: 76.02px;
    margin: 0 auto 30px;
}

#lot .bottom .advantage.cont02 h3
{
    display: block;
    width: 543.93px;
    height: 74.83px;
    margin: 0 auto 30px;
}

#lot .bottom .advantage .flex
{
    display: flex;
    flex-wrap: wrap;
}

#lot .bottom .advantage .flex .item
{
    width: calc(100%/3);
    padding: 23px 22px 0px;
    text-align: justify;
}

#lot .bottom .advantage.cont01 .flex .item:nth-child(2n)
{
    border-left: 1px dashed #ED6B00;
    border-right: 1px dashed #ED6B00;
}

#lot .bottom .advantage.cont02 .flex .item:nth-child(2n)
{
    border-left: 1px dashed #0057AA;
    border-right: 1px dashed #0057AA;
}

#lot .bottom .advantage .flex .item h4
{
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 14px;
    line-height: 1.25;
}

#lot .bottom .advantage .flex .item p
{
    font-size: 18px;
    line-height: 1.667;
}

#lot .bottom .advantage .flex .item img
{
    width: 120px;
    height: 109px;
    margin-top: 10px;
    float: right;
}

#lot .bottom .advantage.cont01 .flex .item h4
{
    color: #ED6B00;
}

#lot .bottom .advantage.cont02 .flex .item h4
{
    color: #0057AA;
}

#lot .bottom .advantage .icon01
{
    position: absolute;
    z-index: -1;
    width: 91px;
    height: 166.26px;
    top: -37px;
    left: 24px;
}

#lot .bottom .advantage .icon02
{
    position: absolute;
    z-index: -1;
    width: 105.73px;
    height: 160.98px;
    top: -22px;
    right: 24px;
}

#lot .bottom .advantage .icon03
{
    position: absolute;
    z-index: -1;
    width: 145.11px;
    height: 188.52px;
    top: -44px;
    left: 24px;
}

#lot .bottom .advantage .icon04
{
    position: absolute;
    z-index: -1;
    width: 234.56px;
    height: 158.9px;
    top: -44px;
    right: -37px;
}

#lot .bottom .advantage .icon05
{
    position: absolute;
    z-index: -1;
    width: 184.89px;
    height: 152.12px;
    bottom: -70px;
    left: 85px;
}

#lot .bottom .icon06
{
    display: none;
}

@media screen and (max-width: 767px)
{
    #lot .top
    {
        width: 100%;
        max-width: 316.85px;
        margin: 0 auto 30px;
    }

    #lot .bottom
    {
        width: 100%;
    }

    #lot .bottom .advantage
    {
        padding: 42px 14px 57px;
        height: auto;
    }

    #lot .bottom .advantage.cont01
    {
        margin-bottom: 45px;
        padding-bottom: 108px;
    }

    #lot .bottom .advantage.cont01 h3
    {
        width: 288.61px;
        height: 81.44px;
        margin: 0 auto 25px;
    }

    #lot .bottom .advantage.cont02 h3
    {
        width: 311.28px;
        height: 99.42px;
        margin: 0 auto 25px
    }

    #lot .bottom .advantage .flex .item
    {
        width: 100%;
        padding: 30px 0;
    }

    #lot .bottom .advantage .flex .item.before
    {
        padding: 30px 0 82px;
    }

    #lot .bottom .advantage .flex .item.after
    {
        padding: 82px 0 30px;
    }

    #lot .bottom .advantage.cont01 .flex .item:nth-child(2n)
    {
        border-left: none;
        border-right: none;

    }

    #lot .bottom .advantage.cont02 .flex .item:nth-child(2n)
    {
        border-left: none;
        border-right: none;
    }

    #lot .bottom .advantage.cont01 .flex .item
    {
        border-top: 1px dashed #ED6B00;
    }

    #lot .bottom .advantage.cont02 .flex .item
    {
        border-top: 1px dashed #0057AA;
    }

    #lot .bottom .advantage.cont01 .flex .item h4,
    #lot .bottom .advantage.cont02 .flex .item h4
    {
        font-size: 24px;
        margin-bottom: 8px;
    }

    #lot .bottom .advantage .flex .item img
    {
        float: none;
        display: block;
        margin: 10px auto 0;
    }

    #lot .bottom .advantage .flex .item p
    {
        padding: 0 5%;
    }

    #lot .bottom .advantage .icon01
    {
        display: none;
    }

    #lot .bottom .advantage .icon02
    {
        width: 105.73px;
        height: 160.98px;
        top: auto;
        bottom: -32px;
        right: 24px;
    }

    #lot .bottom .advantage .icon03
    {
        display: none;
    }

    #lot .bottom .advantage .icon04
    {
        width: 268.78px;
        height: 182.09px;
        top: auto;
        bottom: -110px;
        left: 0;
        right: 0;
        margin: auto;
    }

    #lot .bottom .advantage .icon05
    {
        width: 170.37px;
        height: 140.18px;
        bottom: 56.5%;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1;
    }

    #lot .bottom .icon06
    {
        display: block;
        position: absolute;
        width: 91px;
        height: 166.26px;
        top: auto;
        bottom: 48.4%;
        left: 24px;
        z-index: 2;
    }
}

/* ヤクルトが活用されています
-----------------*/
#utili
{
    position: relative;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    background-image:
        repeating-linear-gradient(90deg,
            #E7F5FC,
            #E7F5FC 1px,
            transparent 1px,
            transparent 32px),
        repeating-linear-gradient(0deg,
            #E7F5FC,
            #E7F5FC 1px,
            #fff 1px,
            #fff 32px);
}

#utili .wave2
{
    width: 100%;
    height: 103px;
    background-image: url(../images/lot_back_pc.svg);
    background-position: center;
    background-repeat: repeat-x;
}

#utili .top
{
    width: 890.66px;
    margin: 62px auto 32px;
}

#utili .bottom
{
    width: 985.36px;
    height: 840.04px;
    padding-top: 50px;
    padding-left: 70px;
    padding-right: 35px;
    margin: 0 auto 60px;
    background-image: url(../images/utili_back_pc.svg);
    background-position: center;
    background-repeat: no-repeat;
}

#utili .bottom h3
{
    display: block;
    width: 100%;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px dashed #DB0019;
}

#utili .bottom h3 img
{
    width: 703.87px;
    height: 32.79px;
}

#utili .bottom .flex
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#utili .bottom .flex .item
{
    width: 30.7%;
    font-size: 16px;
    line-height: 1.563;
    text-align: justify;
}

#utili .bottom .flex .item h4
{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.556;
}

#utili .bottom .flex .item p.sp
{
    padding-bottom: 0.8em;
}

#utili .bottom .flex .item p.big
{
    font-size: 20px;
    font-weight: 500;
    padding-top: 7px;
}

#utili .bottom .flex .item h5
{
    display: block;
    width: 100%;
    height: 20.73px;
    text-align: center;
    background: #0057AA;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10.3px;
    margin-top: 10px;
}

#utili .bottom .flex .item img
{
    padding: 10px 0;
}

#utili .bottom .flex .item img.cp
{
    padding: 10px 0 0;
}

#utili .bottom .flex .item img.sc
{
    width: 80%;
}

#utili .bottom .flex .item small
{
    font-size: 12px;
    line-height: 1;
    padding-bottom: 10px;
}

span.mk
{
    background: linear-gradient(transparent 50%, #FFFF00 50%);
}

@media screen and (max-width: 767px)
{
    #utili .top
    {
        width: 100%;
        max-width: 313px;
    }

    #utili .bottom
    {
        width: 351px;
        height: 2701.07px;
        background-image: url(../images/utili_back_sp.svg);
        padding-top: 97px;
        padding-right: 28px;
        padding-left: 28px;
    }

    #utili .bottom h3 img
    {
        width: 287.08px;
        height: 61.57px;
    }

    #utili .bottom .flex .item
    {
        width: 100%;
        font-size: 18px;
        line-height: 1.667;
    }

    #utili .bottom .flex .item img
    {
        padding: 20px 0;
    }

    #utili .bottom .flex .item p span.pc-none
    {
        display: inline;
    }

    #utili .bottom .flex .item h5
    {
        margin-top: 20px;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
    }

    #utili .bottom .flex .item img.sc
    {
        width: 100%;
    }
}

/* 応募フォーム
-------------------------------------*/
#campaign.top
{
    padding: 60px 0;
}

#campaign.top .icon04
{
    width: 200px;
    height: 200px;
    bottom: -100px;
}

.oubo
{
    width: 760px;
    margin: 40px auto 20px;
}

.oubo ul
{
    margin-left: 1.3em;
    margin-top: 15px;
}

.oubo ul li
{
    position: relative;
    line-height: 1.6;
}

.oubo ul li::before
{
    position: absolute;
    content: '*';
    top: 0;
    left: -1em;
    width: 1em;
    height: 1em;
}

.oubo ul a
{
    display: inline;
    text-decoration: underline;
}

#form
{
    width: 100%;
    height: auto;
    padding: 0 0 80px;
    text-align: center;
}

#form iframe
{
    width: 100%;
}

@media screen and (max-width: 757px)
{
    #campaign .top h2
    {
        padding-right: 20px;
    }

    #campaign.top .icon02
    {
        top: 53%;
        right: -88px;
    }

    #campaign.top .icon04
    {
        display: none;
    }

    .oubo
    {
        width: 90%;
        margin: 20px auto;
    }

    #form
    {
        padding: 0 0 40px;
        text-align: center;
    }

    #form iframe
    {
        width: 100%;
    }
}