@charset "UTF-8";

/* 基本設定 */
body {
    text-align: center;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    background-color: #D4EEF1;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: #fff;
}
h1, h2, h3, h4, h5, p, ul,li {
    margin: 0;
    padding: 0;
}

/* ヘッダー */
.header {
    margin-bottom: 40px;
    background: url(../img/bg-top.png) no-repeat center bottom;
    background-size: cover;

}

.header .logo {
    width: 90px;
    margin: 0px auto;
    padding: 0;
}

.header .logo img {
    margin-top: 22px;
    margin-bottom: 8px;
}

@media screen and (min-width: 601px) {
    .header .logo {
        width: 120px;
    }
    .header .logo img {
        margin-top: 28px;
        margin-bottom: 12px;
    }
}


/* ヒーロー */
.header__hero {
    margin-bottom: 120px;
}

.header__hero h2 {
    position: relative;
    font-family: 'Noto Sans JP';
    font-size: 30px;
    z-index: 1;
}

.header__hero h3 {
    position: relative;
    font-size: 32px;
    color: #fff;
    margin-top: -16px;
    z-index: 2;
}

.header__hero p {
    font-size: 16px;
    line-height: 180%;
}

@media screen and (min-width: 601px) {
    .header__hero h2 {
        font-size: 40px;
    }
    .header__hero h3 {
        font-size: 40px;
    }
    .header__hero p {
        font-size: 20px;
    }
}


/* ヒーロー 画像 */
.pic_1, .pic_2, .pic_3, .pic_4, .pic_5, .pic_6 {
    position: absolute;
    z-index: 100;
}


.pic_1 { top: 56px;  left: 10px;   width: 74px; transform: rotate(-15deg); }
.pic_2 { top: 200px; left: -20px;  width: 62px; transform: rotate(-30deg); }
.pic_3 { top: 338px; left: 5px;    width: 80px; }
.pic_4 { top: 64px;  right: 10px;  width: 64px; transform: rotate(15deg);}
.pic_5 { top: 218px; right: 12px;  width: 52px; }
.pic_6 { top: 330px; right: 24px;  width: 74px; transform: rotate(-30deg); }

@media screen and (min-width: 601px) {
    .pic_1 { top: 56px;  left: calc(50% - 170px - 150px - 6vw);   width: 126px; }
    .pic_2 { top: 200px; left: calc(50% - 170px - 140px - 15vw);  width: 88px; }
    .pic_3 { top: 338px; left: calc(50% - 170px - 150px - 1vw);    width: 112px; }
    .pic_4 { top: 64px;  right: calc(50% - 170px - 140px - 10vw);  width: 120px; }
    .pic_5 { top: 218px; right: calc(50% - 170px - 140px - 18vw); width: 126px; }
    .pic_6 { top: 330px; right: calc(50% - 170px - 130px - 3vw);   width: 102px; }
}


/* コンテンツ */
.contents_1 {
    margin-bottom: 90px;
    padding: 0 20px;
}

.contents_1 .pic_11 {
    margin-bottom: 12px;
}
.contents_1 .pic_11 img {
    border-radius: 24px;
}

.contents_1 h2 {
    font-family: 'Noto Sans JP';
    font-size: 30px;
    margin-bottom: 24px;
}

.contents_1 p {
    text-align: left;
    line-height: 180%;
    padding: 0 12px;
}

.contents_2 {
    font-size: 30px;
    margin: 0;
    padding-bottom: 60px;
    background: url(../img/bg-bottom.png) no-repeat 50% 100%;
    background-size: contain;
}

.contents_2 .title {
    padding: 24px;
    margin: 0 20px;
    background: #F4A25C;
    border-radius: 60% 90% 50% 80% / 70%;
}

.contents_2 h2 {
    font-family: 'Noto Sans JP';
    font-size: 26px;
    color: #fff;
    margin: 0;
}

.contents_2 p {
    font-size: 16px;
    color: #fff;
    margin: 12px 26px;
}

@media screen and (min-width: 601px) {
    .contents_1 {
        max-width: 600px;
        margin: 0 auto 120px;
    }
    .contents_1 h2 {
        font-size: 40px;
    }
    .contents_1 p {
        font-size: 20px;
    }
    .contents_1 .pic_11 img {
        border-radius: 36px;
    }
    .contents_2 .title {
        max-width: 480px;
        margin: 0 auto 40px;
    }
    .contents_2 h2 {
        font-size: 36px;
    }
    .contents_2 p {
        font-size: 20px;
    }
}


/* スライダー画像 slick */
.slick-track {
    margin: 40px auto;
}
.slick-slide {
    width: 160px;
    margin: 0 24px;
    transform: rotate(-3deg);
    border: 4px solid #fff;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}
.slick-slide:nth-child(odd) {
    transform: rotate(3deg);
    margin-top: 6px;
}

@media screen and (min-width: 601px) {
    .slick-track {
        margin-bottom: 80px;
    }
    .slick-slide {
        width: 240px;
        margin: 0 32px;
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
    }
}


/* コンテンツ：AboutUs */
.aboutus {
    padding: 54px 0;
}
.contents_3 {
    margin: 0;
    background-color: #83CCD2;
}

.contents_3 .logo {
    width: 112px;
    margin: 0 auto 36px;
}

.contents_3 h2 {
    font-family: 'Noto Sans JP';
    color: #fff;
    font-size: 30px;
}

.contents_3 p {
    font-size: 16px;
    color: #fff;
    margin: auto 20px;
    margin-top: -16px;
    padding: 24px;
    background: #F6ABBF;
    border-radius: 70% 60% 30% 80% / 60%;
}

.shoplist {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;
    margin: 60px 0 20px;
    padding: 0;
}

.shoplist li {
    width: 148px;
    margin: 18px auto;
}
.shoplist li:nth-child(odd) {
    margin: -24px auto;
}

.instagram {
    display: block;
    margin-bottom: 24px;
}

.instagram span {
    font-size: 18px;
    vertical-align: middle;
}
.instagram img {
    width: 42px;
    margin: 0 12px;
    vertical-align: middle;
}

@media screen and (min-width: 601px) {
    .contents_3 .logo {
        width: 148px;
        margin-bottom: 42px;
    }
    .contents_3 h2 {
        font-size: 40px;
    }
    .contents_3 p {
        width: 380px;
        margin: -20px auto 12px;
    }
    .shoplist {
        margin: 72px 15vw 36px;
    }
    .shoplist li {
        width: 172px;
    }
    .instagram {
        margin-bottom: 36px;
    }
    .instagram img {
        width: 68px;
        margin: 0 24px;
    }
    .instagram span {
        font-size: 24px;
    }
}


/* フッター */
.footer {
    background-color: #83CCD2;
    font-size: 12px;
    color: #fff;
    padding-bottom: 24px;
}

@media screen and (min-width: 601px) {
    .footer {
        font-size: 16px;
        padding-bottom: 36px;
    }
}











/* ---- policy.html ----*/
.header_policy {
    margin: 36px auto;
}
.header_policy img {
    width: 96px;
}

.policy {
    text-align: left;
    max-width: 640px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.policy h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 42px;
}

.policy h2 {
    font-size: 18px;
    margin-bottom: 0.5em;
}

.policy p,
.policy ol {
    font-size: 14px;
    line-height: 180%;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 2em;
}

.policy ol li {
	list-style-type: none;
	counter-increment: cnt;
}
 
.policy ol li::before {
	content: "(" counter(cnt) ") ";
}

.footer_policy {
    font-size: 12px;
    padding-bottom: 24px;
}