@charset "utf-8";
/*====================================
ヤシノミ×ポケモン特設サイト
0.汎用
    0.1 カラー
    0.2 レイアウト
    0.3 テキスト
    0.4 リンク
1.メイン
2.これからもずっと一緒！家事の“相棒”をえらぼう。
3.ポケモンデザイン ラインアップ
4.ご購入はこちら
    4.1 発売日
    4.2 店舗でのご購入はこちら
    4.3 オンラインでのご購入はこちら
5.キャンペーン
    5.1 キャンペーン概要
    5.2 えらべる応募コース
    5.3 Wチャンス
    5.4 応募方法
    5.5 応募に関する注意
    5.6 応募する
    5.7 キャンペーンは終了しました
6.イメージ
7.ポケモンコピーライト
8.フッター
9.メディアクエリ
    9.1 画面サイズが578pxから1024pxまでのCSSを記述
    9.2 画面サイズが577pxまでのCSSを記述
====================================*/

#yashinomigekkan {
    width: 100%;
    background: #fff;
    font-family: "A1 Gothic R", "A1ゴシック R", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    font-size: 0.8vw; /*16px*/
    font-size: clamp(15px, 0.8vw, 16px);
    line-height: 1.9;
    color: #333;
    text-align: justify;
}


/*====================================

 キャンペーンは終了しました。（ページクローズ）

====================================*/
#yashinomigekkan .end-message {
    background: #fff;
    margin: 48px auto 0;
    text-align: center;
    color: #333;
}
#yashinomigekkan .end-message-ttl {
    margin: 0 0 24px;
    font-size: 40px;
    font-size: 2.0vw; /*40px*/
    font-size: clamp(36px, 2.0vw, 40px);
    line-height: 1.3;
}
#yashinomigekkan .end-message-ttl-sub {
    font-size: 1.45vw; /*28px*/
    font-size: clamp(20px, 1.45vw, 28px);
    line-height: 1.7;
}
#yashinomigekkan .end-message-ttl-sub a {
    border-bottom: 1px solid #333;
}
#yashinomigekkan .end-message-ttl-sub a:hover {
    opacity: 0.8;
    transition: all 0.5s;
}

@media screen and (max-width: 577px)  {

}



/*====================================

 0.汎用

====================================*/
/*
 	0.1 カラー
====================================*/
#yashinomigekkan .text-green {
    color: #008c2f;
}

/*
 	0.2 レイアウト
====================================*/
#yashinomigekkan .gekkan-wrapper {
    width: 100%;
    margin: 0 auto;
}
#yashinomigekkan .gekkan-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

/*画像*/
#yashinomigekkan img { vertical-align: bottom; }

/*デバイスごとに要素を表示・非表示*/
#yashinomigekkan .pc-v { display: block !important; }
#yashinomigekkan .pc-no { display: none !important; }
#yashinomigekkan .tablet-v { display: none !important; }
#yashinomigekkan .sp-v { display: none !important; }

/*Flex*/
#yashinomigekkan .flex-d-row { display: flex; }
#yashinomigekkan .flex-d-row-reverse { display: flex; flex-direction: row-reverse;
}
#yashinomigekkan .flex-wrap { flex-wrap: wrap; }
#yashinomigekkan .justify-flex-start { justify-content: flex-start; }
#yashinomigekkan .justify-center { justify-content: center; }
#yashinomigekkan .justify-between { justify-content: space-between; }
#yashinomigekkan .justify-around { justify-content: space-around; }
#yashinomigekkan .items-flex-end { align-items: flex-end; }
#yashinomigekkan .items-center { align-items: center; }

/*
 	0.3 テキスト
====================================*/
#yashinomigekkan .font-weight-medium {
    font-family: "A1 Gothic M", "A1ゴシック M", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}
#yashinomigekkan .font-weight-bold {
    font-family: "A1 Gothic B", "A1ゴシック B", "Yu Gothic Bold", "游ゴシック Bold", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}
#yashinomigekkan .text-align-center {
    text-align: center;
}
/*
#yashinomigekkan .fs-xs { font-size: 12px; line-height: 1.7; }
#yashinomigekkan .fs-s { font-size: 14px; line-height: 1.7; }
#yashinomigekkan .fs-base { font-size: 16px; line-height: 1.7; }
#yashinomigekkan .fs-sm { font-size: 20px; line-height: 1.5; }
#yashinomigekkan .fs-m { font-size: 24px; line-height: 1.5; }
#yashinomigekkan .fs-l { font-size: 32px; line-height: 1.4; }
#yashinomigekkan .fs-2xl { font-size: 48px; line-height: 1.3; }
*/

/*
 	0.4 リンク
====================================*/
#yashinomigekkan a.btn-yashinomigekkan {
    position: relative;
    display: block;
    width: 320px;
    height: 64px;
    line-height: 64px;
    margin: 64px auto 0;
    border: 1px solid #333;
    color: #333;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
#yashinomigekkan a.btn-yashinomigekkan:hover {
    background: #333;
    color: #fff;
}
#yashinomigekkan a.btn-yashinomigekkan.bg-gray {
    border: none;
    background: #585757;
    color: #fff;
}
#yashinomigekkan a.btn-yashinomigekkan.bg-gray:hover {
    background: none;
    border: 1px solid #333;
    color: #333;
}

/*ヤシノミ洗剤 環境への取り組み*/
/* 使用上の注意等はこちら */
#yashinomigekkan a.btn-borderbottom {
    display: inline-block;
    border-bottom: 1px solid #008c2f;
    text-decoration: none;
    color: #008c2f;
    cursor: pointer;
    font-size: 14px;
    font-size: clamp(14px, 0.7vw, 14px);
    line-height: 1.3;
}
#yashinomigekkan a.btn-borderbottom:hover {
    text-decoration:  none;
	opacity: 0.8;
    transition: all 0.5s;
}

/*====================================

 1.メイン

====================================*/
#yashinomigekkan .main-contents {
    width: 100%;
    overflow: hidden;
    margin: 16px 0 96px;
}
#yashinomigekkan .main-img-area {
    width: 100%;
    margin: 0 -10% 0 0;
}
#yashinomigekkan .main-img-area.fadeIn {
    animation-name:fadeInAnime;
    animation-duration:2s;
    animation-delay:1s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeInAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
#yashinomigekkan .main-ttl-area {
    width: 25%;
    padding: 0 0 0 5%;
}
#yashinomigekkan .main-ttl-text.fadeIn {
    animation-name:fadeInAnime;
    animation-duration:2s;
    animation-delay:2s;
    animation-fill-mode:forwards;
    opacity:0;
}

#yashinomigekkan .main-ttl-text-midashi {
    line-height: 1.7;
}
#yashinomigekkan .yashinomi-logo {
    max-width: 9.5vw; /*184px*/
    /*margin: 24px 0 56px;*/
    margin: 24px 0 24px 24px;
}

#yashinomigekkan .yashinomi-logo.fadeIn {
    animation-name:fadeInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
}
#yashinomigekkan .main-ttl-area h1 {
    margin: 0 0 24px;
    font-size: 3.3vw; /*64px*/
    line-height: 1.3;
}
#yashinomigekkan .main-ttl-area h1 span {
    font-size: 1.6vw; /*32px*/
}
#yashinomigekkan .release-date {
    font-size: 1.25vw; /*24px*/
}
#yashinomigekkan .release-date span {
    font-size: 2.5vw; /*48px*/
    line-height: 1.3;
}
#yashinomigekkan .release-date-attention {
    font-size: 0.7vw; /*14px*/
    font-size: clamp(12px, 0.7vw, 14px);
}

/*====================================

 2.これからもずっと一緒！家事の“相棒”をえらぼう。

====================================*/
#yashinomigekkan .concept-contents {
    margin: 0 0 10%;
}
#yashinomigekkan .concept-img_01 {
    position: relative;
    width: 40%;
    margin: 0 10% 80px 10%;
}
#yashinomigekkan .concept-img-caption_01 {
    position: absolute;
    top: -11%;
    right: 0;
    font-size: 1.6vw; /*32px*/
}
#yashinomigekkan .concept-img-caption_02 {
    display: inline-block;
    position: absolute;
    top: 0;
    right: -7%;
    font-size: 1.6vw; /*32px*/
    writing-mode: vertical-rl;
    font-feature-settings: initial;
}
#yashinomigekkan .concept-img-caption_03 {
    position: absolute;
    top: -9%;
    right: 0;
    font-size: 1.6vw; /*32px*/
}
#yashinomigekkan .concept-img-caption_04 {
    display: inline-block;
    position: absolute;
    top: 0;
    right: -6%;
    font-size: 1.6vw; /*32px*/
    writing-mode: vertical-rl;
    font-feature-settings: initial;
}
#yashinomigekkan .concept-text-01-area {
    width: 40%;
    margin: 64px 0 0;
}
#yashinomigekkan .concept-text-01-heading {
    margin: 0 0 8px;
    font-size: 2.5vw; /*48px*/
    line-height: 1.4;
}
#yashinomigekkan .concept-text-01-area h2 {
    font-size: 3.3vw; /*64px*/
    line-height: 1.3;
}
#yashinomigekkan .concept-text-01-area h2 span {
    font-size: 2.5vw; /*48px*/
}
#yashinomigekkan .concept-text-01-area h2 span.emphasis {
    font-size: 3.3vw; /*64px*/
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#yashinomigekkan .concept-img_02 {
    position: relative;
    width: 50%;
    margin: 0 10% 96px 5%;
}
#yashinomigekkan .concept-text-02-area {
    width: 25%;
    margin: 0 0 0 15%;
}
#yashinomigekkan .concept-text-02-text {
    margin: 0 0 48px;
}
#yashinomigekkan dl.mark-area {
    margin: 0 0 32px;
}
#yashinomigekkan dl.mark-area dt {
    margin: 0 24px 0 0;
}
#yashinomigekkan dl.mark-area dd {
    font-size: 0.7vw; /*14px*/
    font-size: clamp(12px, 0.7vw, 14px);
}
#yashinomigekkan .mark-rspo,
#yashinomigekkan .mark-borneotrust {
    max-width: 72px;
}

/*====================================

 3.ポケモンデザイン　ラインアップ

====================================*/
#yashinomigekkan .lineup-contents {
    position: relative;
    width: 100%;
    margin: 0 0 -48px;
    padding: 32px 5% 0;
    background:#f3f9f5;
}
#yashinomigekkan .lineup-item-area {
    margin: 0 0 1%;
}
#yashinomigekkan .lineup-ttl-area {
    position: absolute;
    margin: 0 0 96px;
    padding: 0 10%;
    top: -12%;
}
#yashinomigekkan .lineup-ttl-area h2 {
    font-size: 3.3vw; /*64px*/
    line-height: 1.3;
}
#yashinomigekkan .lineup-ttl-area h2 span {
    font-size: 1.6vw; /*32px*/
}
#yashinomigekkan .lineup-ttl-img {
    width: 35%;
    margin: 0 5%;
}
#yashinomigekkan .lineup-img {
    width: 58%;
}
#yashinomigekkan .lineup-text-area {
    width: 35%;
    padding: 6% 0 0% 0;
}
#yashinomigekkan .flex-d-row-reverse .lineup-text-area {
    width: 35%;
    padding: 6% 0 0% 10%;
}
#yashinomigekkan .lineup-text-area h3 {
    margin: 0 0 16px;
    font-size: 2.0vw; /*40px*/
    font-size: clamp(22px, 2.0vw, 40px);
    line-height: 1.3;
}
#yashinomigekkan .lineup-text-area h3 span {
    font-size: 1.0vw; /*20px*/
    font-size: clamp(16px, 1.0vw, 20px);
}
#yashinomigekkan .lineup-text-area h4 {
    margin: 32px 0 12px;
    font-size: 1.25vw; /*24px*/
    line-height: 1.5;
}
#yashinomigekkan .lineup-subtext {
    margin: 0 0 32px;
}

/*====================================

 4.ご購入はこちら

====================================*/
/*
 	4.1 発売日
====================================
#yashinomigekkan .footer-release-contents {
    width: 100%;
    margin: 48px 0 64px;
    text-align: center;
}
#yashinomigekkan .footer-release-date {
    margin-bottom: 24px;
    font-size: 1.6vw; /*32px
    line-height: 1.3;
}
#yashinomigekkan .footer-release-date span {
    font-size: 3.3vw; /*64px
}
*/

/*
 	4.2 店舗でのご購入はこちら
====================================*/
#yashinomigekkan .buy-shop-contents {
    width: 100%;
    margin: 48px 0 56px;
    text-align: center;
}
#yashinomigekkan .buy-shop-contents h3 {
    margin: 0 0 16px;
    font-size: 1.45vw; /*28px*/
    font-size: clamp(20px, 1.45vw, 28px);
}
#yashinomigekkan .buy-shop-attention {
    margin: 16px 0 0;
    font-size: 0.7vw; /*14px*/
    font-size: clamp(12px, 0.7vw, 14px);
    line-height: 1.7;
}
#yashinomigekkan a.btn-buy-shop {
    position: relative;
    display: block;
    width: 352px;
    height: 64px;
    background-image: linear-gradient(90deg, rgba(111, 186, 44, 1) 25%, rgba(0, 140, 47, 1) 75%);
    border-radius: 32px;
    line-height: 64px;
    margin: 0 auto 0;
    color: #fff;
    font-size: 1vw; /*20px*/
    font-size: clamp(20px, 1.14vw, 20px);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
#yashinomigekkan a.btn-buy-shop:hover {
	opacity: 0.5;
    transition: all 0.5s;
}

/*
 	4.3 オンラインでのご購入はこちら
====================================*/
#yashinomigekkan .buy-online-contents {
    width: 100%;
    margin: 48px 0 64px;
    text-align: center;
}
#yashinomigekkan .buy-online-contents h3 {
    margin: 0 0 16px;
    font-size: 1.45vw; /*28px*/
    font-size: clamp(20px, 1.45vw, 28px);
}
#yashinomigekkan .buy-online-area {
}
#yashinomigekkan ul.buy-online-area li {
    margin: 0 8px;
}
#yashinomigekkan ul.buy-online-area li a {
    display: block;
    width: 100%;
    min-width: 352px;
    height: 80px;
    border-radius: 40px;
    padding: 16px 0;
    border: 1px solid #c5c5c5;
}
#yashinomigekkan ul.buy-online-area li a img {
    width: 100%;
    max-width: 128px;
}
#yashinomigekkan .buy-online-attention {
    margin: 16px 0 0;
    font-size: 0.7vw; /*14px*/
    font-size: clamp(12px, 0.7vw, 14px);
    line-height: 1.5;
}

/*====================================

 5.キャンペーン

====================================*/
#yashinomigekkan .campaign-contents-bg {
    padding: 32px 5% 104px;
    background:#f3f9f5;
}
#yashinomigekkan .campaign-contents {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto -48px;
}
#yashinomigekkan .campaign-ttl-area {
    position: absolute;
    margin: -12% 0 0;
    padding: 0 0;
    top: 0;
}
@media screen and (min-width: 1366px)  {
    #yashinomigekkan .campaign-ttl-area {
        position: absolute;
        margin: -16% 0 0;
        padding: 0 0;
        top: 0;
    }
}



#yashinomigekkan .campaign-ttl-area h2 {
    font-size: 3.3vw; /*64px*/
    line-height: 1.3;
}

/*キャンペーンタイトル*/
#yashinomigekkan .campaign-cpttl-img {
    max-width: 179px;
    margin: 0 64px 0 0;
}
#yashinomigekkan h3.campaign-cpttl {
    font-size: 3.3vw; /*64px*/
    font-size: clamp(56px, 3.3vw, 64px);
    line-height: 1.4;
}
#yashinomigekkan h3.campaign-cpttl span.heading {
    font-size: 1.45vw; /*28px*/
    font-size: clamp(24px, 1.45vw, 28px);
}
#yashinomigekkan h3.campaign-cpttl span.marker {
    display: inline;
    padding: 0;
    background-image: linear-gradient(transparent 90%, #ffff00 90%);
    line-height: 1;
}

/*
 	5.1 キャンペーン概要
====================================*/
#yashinomigekkan .campaign-overview-area {
    margin: 96px 0 120px;
    font-size: 22px;
    font-size: 1.14vw; /*22px*/
    font-size: clamp(18px, 1.14vw, 22px);
}
#yashinomigekkan .campaign-overview-area h4 {
    margin: 0 0 32px;
    font-size: 2.0vw; /*40px*/
    font-size: clamp(28px, 2.0vw, 40px);
}
#yashinomigekkan .campaign-overview-emphasis {
    display: inline-block;
    margin: 8px 0 64px;
    padding: 0;
    background-image: linear-gradient(transparent 90%, #ffff00 90%);
    line-height: 1;
    font-size: 1.45vw; /*28px*/
    font-size: clamp(24px, 1.45vw, 28px);
}
#yashinomigekkan .campaign-overview-emphasis span {
    font-size: 2.0vw; /*40px*/
    font-size: clamp(32px, 2.0vw, 40px);
}
#yashinomigekkan .campaign-date {
    width: 100%;
    max-width: 1120px;
    min-height: 64px;
    border: 2px solid #ffff00;
    border-radius: 32px;
    margin: 0 0 24px;
    padding: 12px 32px;
    font-size: 1.25vw; /*24px*/
    font-size: clamp(20px, 1.25vw, 24px);
    line-height: 1;
}
#yashinomigekkan .campaign-date span {
    font-size: 2.0vw; /*40px*/
    font-size: clamp(32px, 2.0vw, 40px);
}

/*
 	5.2 えらべる応募コース
====================================*/
#yashinomigekkan .campaign-course-area {
    margin: 0 0 96px;
}
#yashinomigekkan .campaign-course-area h4 {
    margin: 0 0 32px;
    font-size: 2.0vw; /*40px*/
    font-size: clamp(32px, 2.0vw, 40px);
}
#yashinomigekkan .campaign-course-box {
    position: relative;
    background: #fff;
    margin: 0 0 64px;
    padding: 64px;
    border-radius: 32px;
}
#yashinomigekkan .campaign-course-textarea {
    max-width: 432px;
    margin: 24px 0;
}
#yashinomigekkan .campaign-course-box h5 {
    font-size: 2.5vw; /*48px*/
    font-size: clamp(48px, 2.0vw, 48px);
    line-height: 1.5;
    display: inline;
    padding: 0;
    background-image: linear-gradient(transparent 90%, #ffff00 90%);
}
#yashinomigekkan .campaign-course-box h5 span {
    font-size: 1.6vw; /*32px*/
    font-size: clamp(32px, 1.45vw, 32px);
}
#yashinomigekkan .campaign-course-box h6 {
    margin: 64px 0 16px;
    font-size: 1.45vw; /*28px*/
    font-size: clamp(24px, 1.45vw, 28px);
    line-height: 0.8;
}
#yashinomigekkan .campaign-course-box h6 span {
    font-size: 40px;
}
#yashinomigekkan .course-washingdishes-img {
    position: absolute;
    width: 100%;
    max-width: 644px;
    top: -72px;
    right: -32px;
}
#yashinomigekkan .course-laundry-img {
    position: absolute;
    width: 100%;
    max-width: 644px;
    top: 48px;
    right: -32px;
}

/*対象商品*/
#yashinomigekkan .eligible-ttl {
    margin: 48px 0 24px;
    text-align: center;
    font-size: 1.6vw; /*32px*/
    font-size: clamp(24px, 1.45vw, 32px);
}
#yashinomigekkan .eligible-ttl::before,
#yashinomigekkan .eligible-ttl::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #6fba2c;
}
#yashinomigekkan .eligible-ttl::before {
    margin-right: 0.5em;
}
#yashinomigekkan .eligible-ttl::after {
    margin-left: 0.5em;
}

#yashinomigekkan .eligible-item-img {
    max-width: 120px;
    margin: 0 16px 0 40px;
}
#yashinomigekkan .eligible-item-ttl {
    font-size: 1.25vw; /*24px*/
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.5;
}
#yashinomigekkan .eligible-item-ttl span {
    font-size: 14px;
    color: #333;
}

/*
 	5.3 Wチャンス
====================================*/
#yashinomigekkan .campaign-wchance-area {
    margin: 0 0 32px;
    padding: 32px 64px 24px;
    border-radius: 32px;
    border: 2px solid #6fba2c;
}
#yashinomigekkan .campaign-wchance-area h5 {
    font-size: 2.5vw; /*48px*/
    font-size: clamp(40px, 2.0vw, 48px);
    line-height: 1.5;
    display: inline;
    padding: 0;
    background-image: linear-gradient(transparent 90%, #ffff00 90%);
}
#yashinomigekkan .campaign-wchance-area h5 span {
    font-size: 64px;
}
#yashinomigekkan .campaign-wchance-text {
    font-size: 1.25vw; /*24px*/
    font-size: clamp(20px, 1.25vw, 24px);
    line-height: 1.5;
}
#yashinomigekkan .campaign-wchance-text span {
    font-size: 1.875vwvw; /*36px*/
    font-size: clamp(32px, 1.875vw, 36px);
    line-height: 1.5;
}
#yashinomigekkan .campaign-wchance-attention {
    margin: 0 0 104px;
    text-align: center;
}
#yashinomigekkan .wchance-img {
    max-width: 342px;
    margin: -80px -24px 0 0;
}

/*
 	5.4 応募方法
====================================*/
#yashinomigekkan .campaign-howto-area {
    margin: 0 0 64px;
}
#yashinomigekkan .campaign-howto-area h4 {
    margin: 0 0 32px;
    font-size: 2.0vw; /*40px*/
    font-size: clamp(32px, 2.0vw, 40px);
}
#yashinomigekkan .campaign-howto-text {
    font-size: 1.14vw; /*22px*/
    font-size: clamp(20px, 1.14vw, 22px);
}
#yashinomigekkan .campaign-howto-text span {
    padding: 0 0 4px;
    border-bottom: 2px solid #008c2f;
}

/*
 	5.5 応募に関する注意
====================================*/
#yashinomigekkan .campaign-attention-area {
    width: 100%;
    max-width: 1120px;
    margin: 0 0 48px;
    padding: 24px 64px 24px;
    background: #fff;
    border-radius: 32px;
    font-size: 16px;
}

/*========== アコーディオン ==========*/
/*
#yashinomigekkan .toggle {
    display: none;
}
#yashinomigekkan label {
    display: block;
}
*/
#yashinomigekkan .toggle {
    display: none;
}
#yashinomigekkan .option {
    position: relative;
}
#yashinomigekkan .title,
#yashinomigekkan .content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.5s;
}
#yashinomigekkan .title {
    display: block;
    height: 64px;
    margin: 0;
    line-height: 64px;
    /*border: solid 1px #b2b2b2;*/
    /*padding: 1em;*/
    display: block;
    /*color: #333;*/
}
#yashinomigekkan .title::after,
#yashinomigekkan .title::before {
    content: "";
    position: absolute;
    right: 24px;
    top: 1em;
    width: 2px;
    height: 2em;
    background-color: #008c2f;
    transition: all 0.3s;
}
#yashinomigekkan .title::after {
    transform: rotate(90deg);
}
#yashinomigekkan .content {
    max-height: 0;
    overflow: hidden;
}
#yashinomigekkan .content p {
    margin: 0;
    /*padding: 0.5em 1em 1em;
    font-size: 0.9em;
    line-height: 1.5;*/
}
#yashinomigekkan .toggle:checked + .title + .content {
    min-height: 3350px;
    transition: all 0.5s;
}
#yashinomigekkan .toggle:checked + .title::before {
    transform: rotate(90deg) !important;
}



#yashinomigekkan .campaign-attention-box {
    margin: 16px 0 0;
    border-top: 1px solid #008c2f;
}
#yashinomigekkan .campaign-attention-area h4 {
    font-size: 1.6vw; /*32px*/
    font-size: clamp(28px, 1.6vw, 32px);
}
#yashinomigekkan .campaign-attention-area h5 {
    font-size: 1.25vw; /*24px*/
    font-size: clamp(20px, 1.25vw, 24px);
    margin: 40px 0 8px;
}

/*レシート例*/
#yashinomigekkan ul.campaign-receipt-example {
    width: 100%;
    margin: 64px 0 0;
}
#yashinomigekkan ul.campaign-receipt-example li {
    width: 33%;
    max-width: 312px;
    line-height: 1.5;
}
#yashinomigekkan .receipt-ok {
    color: #008c2f;
    font-size: 1.6vw; /*32px*/
    font-size: clamp(28px, 1.45vw, 32px);
    margin: 0 16px 0 0 !important;
}
#yashinomigekkan .receipt-ng {
    color: #e60012;
    font-size: 1.6vw; /*32px*/
    font-size: clamp(28px, 1.45vw, 32px);
    margin: 0 16px 0 0 !important;
}
#yashinomigekkan .receipt-attention {
    display: inline-block;
    margin: 0 0 0;
    font-size: 12px;
    line-height: 1.4;
}
#yashinomigekkan .receipt-img {
    margin: 16px 0 48px;
    border: 1px solid #c4c4c4;
}

/*よくあるご質問*/
#yashinomigekkan h5.campaign-qa {
    margin: 16px 0 0;
}
#yashinomigekkan .campaign-qa span {
    font-size: 20px;
}


/*
 	5.6 応募する
====================================*/
#yashinomigekkan .campaign-apply-area {
    text-align: center;
}
#yashinomigekkan a.btn-apply {
    position: relative;
    display: block;
    width: 352px;
    height: 64px;
    background-image: linear-gradient(90deg, rgba(111, 186, 44, 1) 25%, rgba(0, 140, 47, 1) 75%);
    border-radius: 32px;
    line-height: 64px;
    margin: 0 auto 0;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
#yashinomigekkan a.btn-apply:hover {
	opacity: 0.5;
    transition: all 0.5s;
}
#yashinomigekkan .campaign-apply-attention {
    margin: 24px 0 0;
    text-align: center;
}

/*
 	5.7 キャンペーンは終了しました
====================================*/
#yashinomigekkan .campaign-end {
    background: #fff;
    margin: 48px 0 0;
    padding: 32px;
    border-radius: 32px;
    border: 2px solid #e60012;
    text-align: center;
    color: #e60012;
}
#yashinomigekkan .campaign-end-ttl {
    margin: 0 0 8px;
    font-size: 40px;
    font-size: 2.0vw; /*40px*/
    font-size: clamp(36px, 2.0vw, 40px);
    line-height: 1.3;
    text-shadow: 0.25px 0.25px 0 #e60012,-0.25px 0.25px 0 #e60012,0.25px -0.25px 0 #e60012,-0.25px -0.25px 0 #e60012;
}
#yashinomigekkan .campaign-end-ttl-sub {
    font-size: 1.45vw; /*28px*/
    font-size: clamp(20px, 1.45vw, 28px);
}


/*====================================

 6.イメージ

====================================*/
#yashinomigekkan .image-contents {
    width: 100%;
    margin: 0 0 24px;
}

/*====================================

 7.ポケモンコピーライト

====================================*/
#yashinomigekkan .pokemon-copyright-contents {
    width: 100%;
    margin: 0 0 56px;
    text-align: center;
}
#yashinomigekkan .pokemon-copyright-img {
    max-width: 240px;
    margin: 0 auto 24px;
}
#yashinomigekkan .pokemon-copyright-text {
    font-size: 0.7vw; /*14px*/
    font-size: clamp(12px, 0.7vw, 14px);
    line-height: 1.5;
}

/*====================================

 8.フッター

====================================*/
#yashinomigekkan .footer-contents {
    position: relative;
    width: 100%;
    max-height: 266px;
    margin: 0 0 0;
    padding: 104px 0 56px;
    background: url(../images/footer-bg.png) top center no-repeat;
    background-size: cover;
    text-align: center;
    color: #fff;
}
#yashinomigekkan ul.footer-nav {
    display: flex;
    justify-content: center;
    font-size: 0.7vw; /*14px*/
    font-size: clamp(12px, 0.7vw, 14px);
}
#yashinomigekkan .yashinomi-copyright {
    margin: 16px 0 0;
    font-size: 0.7vw; /*14px*/
    font-size: clamp(12px, 0.7vw, 14px);
}























/*====================================

 9.メディアクエリ

====================================*/
/*
    9.1 画面サイズが578pxから1024pxまでのCSSを記述
========================================================================*/
@media screen and (min-width: 578px) and (max-width: 1024px)  {
    #yashinomigekkan {
        font-size: 0.7vw; /*14px*/
        font-size: clamp(12px, 0.7vw, 14px);
        line-height: 1.9;
    }

    /*デバイスごとに要素を表示・非表示*/
    #yashinomigekkan .pc-v { display: block !important; }
    #yashinomigekkan .pc-no { display: none !important; }
    #yashinomigekkan .sp-v { display: none !important; }
    #yashinomigekkan .tablet-v { display: block !important; }
    #yashinomigekkan .tablet-no { display: none !important; }

    /* 使用上の注意等はこちら */
    #yashinomigekkan a.btn-borderbottom {
        display: inline-block;
        border-bottom: 1px solid #008c2f;
        text-decoration: none;
        color: #008c2f;
        cursor: pointer;
        font-size: 12px;
        font-size: clamp(12px, 0.7vw, 14px);
        line-height: 1.3;
    }
    #yashinomigekkan a.btn-borderbottom:hover {
        text-decoration:  none;
        opacity: 0.8;
        transition: all 0.5s;
    }

    /*====================================

    1.メイン

    ====================================*/
    #yashinomigekkan .main-contents {
        margin: 16px 0 48px;
    }
    #yashinomigekkan .yashinomi-logo {
        max-width: 9.5vw;/*184px*/
        margin: 24px 0 0 24px;
    }
    /*====================================

    2.これからもずっと一緒！家事の“相棒”をえらぼう。

    ====================================*/
    #yashinomigekkan .concept-contents {
        margin: 0 0 96px;
    }
    #yashinomigekkan .concept-img_01 {
        margin: 0 10% 32px 10%;
    }
    #yashinomigekkan .concept-text-01-area {
        margin: 40px 0 0;
    }
    #yashinomigekkan dl.mark-area {
        margin: 0 0 20px;
    }
    #yashinomigekkan .concept-img_02 {
        position: relative;
        width: 45%;
        margin: 0 10% 96px 5%;
    }
    #yashinomigekkan .concept-text-02-area {
        width: 32%;
        margin: 16px 0 0 10%;
    }
    #yashinomigekkan .concept-text-02-text {
        margin: 0 0 32px;
    }
    #yashinomigekkan dl.mark-area dd {
        font-size: 0.7vw; /*14px*/
        font-size: clamp(10px, 0.7vw, 14px);
        line-height: 1.5;
    }
    #yashinomigekkan .mark-rspo,
    #yashinomigekkan .mark-borneotrust {
        max-width: 48px;
    }

    /*====================================

    3.ポケモンデザイン　ラインアップ

    ====================================*/
    #yashinomigekkan .lineup-contents {
        margin: 0 0 -20px;
        padding: 5% 5% 0;
    }
    #yashinomigekkan .lineup-ttl-area {
        position: absolute;
        margin: 0 0 96px;
        padding: 0 10%;
        top: -10%;
    }
    #yashinomigekkan .lineup-text-area {
        width: 35%;
        padding: 6% 0 0 0;
    }
    #yashinomigekkan .lineup-text-area {
        width: 35%;
        padding: 6% 0 5% 0;
    }
    #yashinomigekkan .flex-d-row-reverse .lineup-text-area {
        width: 35%;
        padding: 6% 0 5% 10%;
    }
    #yashinomigekkan .lineup-text-area h4 {
        margin: 16px 0 16px;
        font-size: 1.25vw; /*24px*/
        line-height: 1.5;
    }
    #yashinomigekkan .lineup-subtext {
        margin: 0 0 20px;
    }
    /*====================================

    4.ご購入はこちら

    ====================================*/
    /*
        4.1 発売日
    ====================================
    #yashinomigekkan .footer-release-contents {
        width: 100%;
        margin: 24px 0 24px;
        text-align: center;
    }
    #yashinomigekkan .footer-release-date {
        margin-bottom: 12px;
    }
    */
    /*
        4.2 店舗でのご購入はこちら
    ====================================*/
    #yashinomigekkan .buy-shop-contents {
        width: 100%;
        margin: 40px 0 0px;
        text-align: center;
    }
    #yashinomigekkan .buy-shop-contents h3 {
        margin: 0 0 8px;
        font-size: 1.45vw; /*28px*/
        font-size: clamp(16px, 1.45vw, 28px);
    }
    #yashinomigekkan a.btn-buy-shop {
        position: relative;
        display: block;
        width: 240px;
        height: 48px;
        background-image: linear-gradient(90deg, rgba(111, 186, 44, 1) 25%, rgba(0, 140, 47, 1) 75%);
        border-radius: 32px;
        line-height: 48px;
        margin: 0 auto 0;
        color: #fff;
        font-size: 1vw; /*20px*/
        font-size: clamp(14px, 1.14vw, 20px);
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }
    /*
        4.3 オンラインでのご購入はこちら
    ====================================*/
    #yashinomigekkan .buy-online-contents {
        width: 100%;
        margin: 32px 0 56px;
        text-align: center;
    }
    #yashinomigekkan .buy-online-contents h3 {
        margin: 0 0 8px;
        font-size: 1.45vw; /*28px*/
        font-size: clamp(16px, 1.45vw, 28px);
    }
    #yashinomigekkan ul.buy-online-area li a {
        display: block;
        width: 100%;
        min-width: 240px;
        height: 56px;
        border-radius: 48px;
        padding: 12px 0;
        border: 1px solid #c5c5c5;
    }
    #yashinomigekkan ul.buy-online-area li a img {
        width: 100%;
        max-width: 80px;
    }

    /*====================================

    5.キャンペーン

    ====================================*/
    #yashinomigekkan .campaign-contents-bg {
        padding: 32px 5% 80px;
    }
    #yashinomigekkan .campaign-contents {
        position: relative;
        width: 90%;
        max-width: 1120px;
        margin: 0 auto -48px;
    }

    /*キャンペーンタイトル*/
    #yashinomigekkan .campaign-cpttl-img {
        max-width: 104px;
        margin: 0 32px 0 0;
    }
    #yashinomigekkan h3.campaign-cpttl {
        font-size: 3.3vw; /*64px*/
        font-size: clamp(24px, 3.3vw, 64px);
        line-height: 1.5;
    }
    #yashinomigekkan h3.campaign-cpttl span.heading {
        font-size: 1.45vw; /*28px*/
        font-size: clamp(16px, 1.45vw, 28px);
    }
    #yashinomigekkan h3.campaign-cpttl span.marker {
        display: inline;
        padding: 0;
        background-image: linear-gradient(transparent 90%, #ffff00 90%);
        line-height: 1;
    }

    /*
        5.1 キャンペーン概要
    ====================================*/
    #yashinomigekkan .campaign-overview-area {
        margin: 40px 0 64px;
        font-size: 22px;
        font-size: 1.14vw; /*22px*/
        font-size: clamp(12px, 1.14vw, 22px);
    }
    #yashinomigekkan .campaign-overview-area h4 {
        margin: 0 0 8px;
        font-size: 2.0vw; /*40px*/
        font-size: clamp(20px, 2.0vw, 40px);
    }
    #yashinomigekkan .campaign-overview-emphasis {
        display: inline-block;
        margin: 8px 0 48px;
        padding: 0;
        background-image: linear-gradient(transparent 90%, #ffff00 90%);
        line-height: 1;
        font-size: 1.45vw; /*28px*/
        font-size: clamp(16px, 1.45vw, 28px);
    }
    #yashinomigekkan .campaign-overview-emphasis span {
        font-size: 2.0vw; /*40px*/
        font-size: clamp(22px, 2.0vw, 40px);
    }
    #yashinomigekkan .campaign-date {
        width: 100%;
        max-width: 1120px;
        min-height: 48px;
        border: 2px solid #ffff00;
        border-radius: 32px;
        margin: 0 0 20px;
        padding: 12px 24px;
        font-size: 1.25vw; /*24px*/
        font-size: clamp(14px, 1.25vw, 24px);
        line-height: 1;
    }
    #yashinomigekkan .campaign-date span {
        font-size: 2.0vw; /*40px*/
        font-size: clamp(24px, 2.0vw, 40px);
    }

    /*
        5.2 えらべる応募コース
    ====================================*/
    #yashinomigekkan .campaign-course-area {
        margin: 0 0 48px;
    }
    #yashinomigekkan .campaign-course-area h4 {
        margin: 0 0 32px;
        font-size: 2.0vw; /*40px*/
        font-size: clamp(20px, 2.0vw, 40px);
    }
    #yashinomigekkan .campaign-course-box {
        position: relative;
        background: #fff;
        margin: 0 0 32px;
        padding: 32px;
        border-radius: 16px;
    }
    #yashinomigekkan .campaign-course-textarea {
        width: 70%;
        max-width: 432px;
        margin: 16px 0;
    }
    #yashinomigekkan .campaign-course-box h5 {
        font-size: 2.5vw; /*48px*/
        font-size: clamp(24px, 2.0vw, 48px);
        line-height: 1.5;
        display: inline;
        padding: 0;
        background-image: linear-gradient(transparent 90%, #ffff00 90%);
    }
    #yashinomigekkan .campaign-course-box h5 span {
        font-size: 1.6vw; /*32px*/
        font-size: clamp(16px, 1.45vw, 32px);
    }
    #yashinomigekkan .campaign-course-box h6 {
        margin: 32px 0 16px;
        font-size: 1.45vw; /*28px*/
        font-size: clamp(18px, 1.45vw, 28px);
        line-height: 0.7;
    }
    #yashinomigekkan .campaign-course-box h6 span {
        font-size: 32px;
    }
    #yashinomigekkan .course-washingdishes-img {
        position: absolute;
        width: 52%;
        max-width: 594px;
        top: -20px;
        right: -24px;
    }
    #yashinomigekkan .course-laundry-img {
        position: absolute;
        width: 52%;
        max-width: 594px;
        top: 40px;
        right: -24px;
    }

    /*対象商品*/
    #yashinomigekkan .eligible-ttl {
        margin: 32px 0 0px;
        text-align: center;
        font-size: 1.6vw; /*32px*/
        font-size: clamp(20px, 1.45vw, 32px);
    }
    #yashinomigekkan .eligible-item-img {
        max-width: 72px;
        margin: 0 24px;
    }
    #yashinomigekkan .eligible-item-ttl {
        font-size: 1.25vw; /*24px*/
        font-size: clamp(14px, 1.25vw, 24px);
        line-height: 1.5;
    }
    #yashinomigekkan .eligible-item-ttl span {
        font-size: 10px;
        color: #333;
    }

    /*
        5.3 Wチャンス
    ====================================*/
    #yashinomigekkan .campaign-wchance-area {
        margin: 0 0 24px;
        padding: 24px 32px;
        border-radius: 16px;
        border: 2px solid #6fba2c;
    }
    #yashinomigekkan .campaign-wchance-area h5 {
        font-size: 2.5vw; /*48px*/
        font-size: clamp(20px, 2.0vw, 48px);
        line-height: 1.5;
        display: inline;
        padding: 0;
        background-image: linear-gradient(transparent 90%, #ffff00 90%);
    }
    #yashinomigekkan .campaign-wchance-area h5 span {
        font-size: 32px;
    }
    #yashinomigekkan .campaign-wchance-text {
        font-size: 1.25vw; /*24px*/
        font-size: clamp(14px, 1.25vw, 24px);
        line-height: 1.5;
    }
    #yashinomigekkan .campaign-wchance-text span {
        font-size: 1.875vwvw; /*36px*/
        font-size: clamp(20px, 1.875vw, 36px);
        line-height: 1.5;
    }
    #yashinomigekkan .campaign-wchance-attention {
        margin: 0 0 64px;
        text-align: center;
    }
    #yashinomigekkan .wchance-img {
        max-width: 200px;
        margin: -56px 0px 0 0;
    }

    /*
        5.4 応募方法
    ====================================*/
    #yashinomigekkan .campaign-howto-area {
        margin: 0 0 48px;
    }
    #yashinomigekkan .campaign-howto-area h4 {
        margin: 0 0 8px;
        font-size: 2.0vw; /*40px*/
        font-size: clamp(20px, 2.0vw, 40px);
    }
    #yashinomigekkan .campaign-howto-text {
        font-size: 1.14vw; /*22px*/
        font-size: clamp(12px, 1.14vw, 22px);
    }
    #yashinomigekkan .campaign-howto-text span {
        padding: 0 0 4px;
        border-bottom: 1px solid #008c2f;
    }

    /*
        5.5 応募に関する注意
    ====================================*/
    #yashinomigekkan .campaign-attention-area {
        width: 100%;
        max-width: 1120px;
        margin: 0 0 48px;
        padding: 8px 32px 8px;
        background: #fff;
        border-radius: 16px;
        font-size: 12px;
        letter-spacing: -0.01em;
    }
    /*========== アコーディオン ==========*/
    #yashinomigekkan .title::after,
    #yashinomigekkan .title::before {
        content: "";
        position: absolute;
        right: 12px;
        top: 2em;
        width: 1px;
        height: 1.5em;
        background-color: #008c2f;
        transition: all 0.3s;
    }
    #yashinomigekkan .toggle:checked + .title + .content {
        min-height: 2580px;
        transition: all 0.5s;
    }
    #yashinomigekkan .campaign-attention-box {
        margin: 8px 0 0;
        border-top: 1px solid #008c2f;
    }
    #yashinomigekkan .campaign-attention-area h4 {
        font-size: 1.6vw; /*32px*/
        font-size: clamp(20px, 1.6vw, 32px);
    }
    #yashinomigekkan .campaign-attention-area h5 {
        font-size: 1.25vw; /*24px*/
        font-size: clamp(16px, 1.25vw, 24px);
        margin: 40px 0 8px;
    }

    /*レシート例*/
    #yashinomigekkan ul.campaign-receipt-example {
        width: 100%;
        margin: 64px 0 0;
    }
    #yashinomigekkan ul.campaign-receipt-example li {
        width: 33%;
        max-width: 312px;
        line-height: 1.5;
    }
    #yashinomigekkan .receipt-ok {
        color: #008c2f;
        font-size: 1.6vw; /*32px*/
        font-size: clamp(16px, 1.45vw, 32px);
        margin: 0 16px 0 0 !important;
    }
    #yashinomigekkan .receipt-ng {
        color: #e60012;
        font-size: 1.6vw; /*32px*/
        font-size: clamp(16px, 1.45vw, 32px);
        margin: 0 8px 0 0 !important;
    }
    #yashinomigekkan .receipt-attention {
        display: inline-block;
        margin: 0 0 0;
        font-size: 10px;
        line-height: 1.4;
    }
    #yashinomigekkan .receipt-img {
        margin: 8px 0 32px;
        border: 1px solid #c4c4c4;
    }

    /*よくあるご質問*/
    #yashinomigekkan h5.campaign-qa {
        margin: 16px 0 0;
        line-height: 1.5;
    }
    #yashinomigekkan .campaign-qa span {
        font-size: 16px;
    }


    /*
        5.6 応募する
    ====================================*/
    #yashinomigekkan .campaign-apply-area {
        text-align: center;
    }
    #yashinomigekkan a.btn-apply {
        position: relative;
        display: block;
        width: 240px;
        height: 48px;
        background-image: linear-gradient(90deg, rgba(111, 186, 44, 1) 25%, rgba(0, 140, 47, 1) 75%);
        border-radius: 32px;
        line-height: 48px;
        margin: 0 auto 0;
        color: #fff;
        font-size: 1vw; /*20px*/
        font-size: clamp(14px, 1.14vw, 20px);
        text-decoration: none;
        text-align: center;
        cursor: pointer;
    }
    #yashinomigekkan a.btn-apply:hover {
        opacity: 0.5;
        transition: all 0.5s;
    }
    #yashinomigekkan .campaign-apply-attention {
        margin: 20px 0 0;
        text-align: center;
        font-size: 12px;
    }

    /*====================================

    7.ポケモンコピーライト

    ====================================*/
    #yashinomigekkan .pokemon-copyright-contents {
        width: 100%;
        margin: 0 0 32px;
        text-align: center;
    }
    #yashinomigekkan .pokemon-copyright-img {
        max-width: 160px;
        margin: 0 auto 24px;
    }

}


























/*
    9.2 画面サイズが577pxまでのCSSを記述
========================================================================*/
@media screen and (max-width: 577px)  {
        #yashinomigekkan {
            font-size: 14px;
            line-height: 1.7;
        }
        /*====================================

        0.汎用

        ====================================*/
        /*
            0.2 レイアウト
        ====================================*/
        /*デバイスごとに要素を表示・非表示*/
        #yashinomigekkan .pc-v { display: none !important; }
        #yashinomigekkan .pc-no { display: none !important; }
        #yashinomigekkan .tablet-v { display: none !important; }
        #yashinomigekkan .sp-v { display: block !important; }
        #yashinomigekkan .sp-no { display: none !important; }

        /*
            0.4 リンク
        ====================================*/
        /*ヤシノミ洗剤 環境への取り組み*/
        /* 使用上の注意等はこちら */
        #yashinomigekkan a.btn-borderbottom {
            display: inline-block;
            border-bottom: 1px solid #008c2f;
            font-size: 12px;
            text-decoration: none;
            color: #008c2f;
            cursor: pointer;
        }
        #yashinomigekkan a.btn-borderbottom:hover {
            text-decoration: none;
            opacity: 0.8;
            transition: all 0.5s;
        }


        /*====================================

        1.メイン

        ====================================*/
        #yashinomigekkan .main-contents {
            display: block;
            overflow: hidden;
            margin: 0 0 32px;
        }
        #yashinomigekkan .main-ttl-area {
            position: relative;
            z-index: 99;
            width: 85%;
            margin: 0 auto 0%;
            padding: 0 0 0%
        }
        #yashinomigekkan .yashinomi-logo {
            max-width: 72px;
            /*margin: -56px 0 24px;*/
            margin: 16px 0 24px 16px;
        }
        #yashinomigekkan .main-ttl-area h1 {
            margin: 0 0 8px;
            font-size: 28px;
            line-height: 1.3;
            letter-spacing: 0em;
        }
        #yashinomigekkan .main-ttl-area h1 span {
            font-size: 20px;
        }
        #yashinomigekkan .release-date {
            font-size: 16px;
        }
        #yashinomigekkan .release-date span {
            font-size: 24px;
            line-height: 1.3;
        }
        #yashinomigekkan .release-date-attention {
            font-size: 10px;
        }

        /*====================================

        2.これからもずっと一緒！家事の“相棒”をえらぼう。

        ====================================*/
        #yashinomigekkan .concept-contents {
            margin: 0 0 120px;
        }
        #yashinomigekkan .concept-area {
            display: block;
        }
        #yashinomigekkan .concept-img_01 {
            position: relative;
            width: 85%;
            margin: 0 10% 0 5%;
        }
        #yashinomigekkan .concept-img-caption_01 {
            position: absolute;
            top: -12%;
            right: 0;
            font-size: 14px;
        }
        #yashinomigekkan .concept-img-caption_02 {
            display: inline-block;
            position: absolute;
            top: 0;
            right: -8%;
            font-size: 14px;
            writing-mode: vertical-rl;
            font-feature-settings: initial;
            letter-spacing: 0.1em;
        }
        #yashinomigekkan .concept-img-caption_03 {
            position: absolute;
            top: -12%;
            right: 0;
            font-size: 14px;
        }
        #yashinomigekkan .concept-img-caption_04 {
            display: inline-block;
            position: absolute;
            top: 0;
            right: -8%;
            font-size: 14px;
            writing-mode: vertical-rl;
            font-feature-settings: initial;
        }
        #yashinomigekkan .concept-text-01-area {
            display: block;
            width: 70%;
            margin: 32px auto 32px
        }
        #yashinomigekkan .concept-text-01-heading {
            margin: 0 0 4px;
            font-size: 18px;
            line-height: 1.3;
        }
        #yashinomigekkan .concept-text-01-area h2 {
            font-size: 28px;
            line-height: 1.3;
        }
        #yashinomigekkan .concept-text-01-area h2 span {
            font-size: 18px;
        }
        #yashinomigekkan .concept-text-01-area h2 span.emphasis {
            font-size: 28px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
        #yashinomigekkan .concept-img_02 {
            position: relative;
            width: 85%;
            margin: 0 10% 32px 5%;
        }
        #yashinomigekkan .concept-text-02-area {
            width: 70%;
            margin: 32px auto 0;
        }
        #yashinomigekkan .concept-text-02-text {
            margin: 0 0 48px;
        }
        #yashinomigekkan dl.mark-area {
            margin: 0 auto 32px;
        }
        #yashinomigekkan dl.mark-area dt {
            margin: 0 24px 0 0;
        }
        #yashinomigekkan dl.mark-area dd {
            font-size: 12px;
        }
        #yashinomigekkan .mark-rspo,
        #yashinomigekkan .mark-borneotrust {
            max-width: 64px;
        }

        /*====================================

        3.ポケモンデザイン　ラインアップ

        ====================================*/
        #yashinomigekkan .lineup-contents {
            position: relative;
            width: 100%;
            margin: 0 0 -24px;
            padding: 32px 5% 0;
            background:#f3f9f5;
        }
        #yashinomigekkan .lineup-ttl-area {
            position: absolute;
            margin: 0 0 104px;
            padding: 0 2%;
            top: -120px;
        }
        #yashinomigekkan .lineup-ttl-area h2 {
            font-size: 28px;
            line-height: 1.3;
        }
        #yashinomigekkan .lineup-ttl-area h2 span {
            font-size: 18px;
        }
        #yashinomigekkan .lineup-ttl-img {
            width: 45%;
            margin: 0 0 0 5%;
        }
        #yashinomigekkan .lineup-item-area {
            width: 100%;
            display: block;
            margin: 0 auto 0;
            padding: 0 0 48px;
        }
        #yashinomigekkan .lineup-img {
            width: 100%;
        }
        #yashinomigekkan .lineup-text-area {
            width: 100%;
            margin: 0 auto;
            padding: 32px 0 0 10%;
        }
        #yashinomigekkan .flex-d-row-reverse .lineup-text-area {
            width: 100%;
            padding: 32px 0 0 10%;
        }
        #yashinomigekkan .lineup-text-area h3 {
            margin: 0 0 8px;
            font-size: 20px;
            line-height: 1.3;
        }
        #yashinomigekkan .lineup-text-area h3 span {
            font-size: 16px;
        }
        #yashinomigekkan .lineup-text-area h4 {
            margin: 24px 0 12px;
            font-size: 16px;
            line-height: 1.5;
        }
        #yashinomigekkan .lineup-subtext {
            margin: 0 0 24px;
            font-size: 14px;
        }

        /*====================================

        4.ご購入はこちら

        ====================================*/
        /*
            4.1 発売日
        ====================================
        #yashinomigekkan .footer-release-contents {
            width: 100%;
            margin: 32px 0 32px;
            text-align: center;
        }
        #yashinomigekkan .footer-release-date {
            margin-bottom: 24px;
            font-size: 16px;
            line-height: 1.3;
        }
        #yashinomigekkan .footer-release-date span {
            font-size: 24px;
        }
        #yashinomigekkan .footer-release-attention {
            font-size: 12px;
        }
        */
        /*
            4.2 店舗でのご購入はこちら
        ====================================*/
        #yashinomigekkan .buy-shop-contents {
            width: 100%;
            margin: 40px 0 40px;
            text-align: center;
        }
        #yashinomigekkan .buy-shop-contents h3 {
            margin: 0 0 16px;
            font-size: 18px;
        }
        #yashinomigekkan .buy-shop-attention {
            font-size: 12px;
            text-align: left;
            width: 90%;
            margin: 20px auto 0;
        }
        #yashinomigekkan a.btn-buy-shop {
            max-width: 292px;
            height: 48px;
            line-height: 48px;
            font-size: 16px;
        }

        /*
            4.3 オンラインでのご購入はこちら
        ====================================*/
        #yashinomigekkan .buy-online-contents {
            width: 100%;
            margin: 40px 0 40px;
            text-align: center;
        }
        #yashinomigekkan .buy-online-contents h3 {
            margin: 0 0 16px;
            font-size: 18px;
        }
        #yashinomigekkan .buy-online-area {
            display: block;
        }
        #yashinomigekkan ul.buy-online-area li {
            margin:16px 0;
        }
        #yashinomigekkan ul.buy-online-area li a {
            display: block;
            width: 100%;
            max-width: 292px;
            min-width: auto;
            height: 72px;
            margin: 0 auto;
            padding: 16px 0;
            border: 1px solid #c5c5c5;
        }
        #yashinomigekkan ul.buy-online-area li a img {
            width: 36%;
            max-width: 160px;
        }

        /*====================================

        5.キャンペーン

        ====================================*/
        #yashinomigekkan .campaign-contents-bg {
            padding: 32px 5% 80px;
        }
        #yashinomigekkan .campaign-ttl-area {
            position: absolute;
            margin: -20% 0 0;
            padding: 0 0;
            top: 0;
        }
        #yashinomigekkan .campaign-ttl-area h2 {
            font-size: 28px;
            line-height: 1.3;
        }

        /*キャンペーンタイトル*/
        #yashinomigekkan .campaign-cpttl-img {
            max-width: 104px;
            margin: 0 24px 0 16px;
        }
        #yashinomigekkan h3.campaign-cpttl {
            font-size: 24px;
            line-height: 1.4;
            letter-spacing: -0.01em;
        }
        #yashinomigekkan h3.campaign-cpttl span.heading {
            display: inline-block;
            margin: 0 0 8px;
            font-size: 14px;
            line-height: 1.5;
        }
        #yashinomigekkan h3.campaign-cpttl span.marker {
            display: inline;
            padding: 0;
            background-image: linear-gradient(transparent 90%, #ffff00 90%);
            line-height: 1;
        }

        /*
            5.1 キャンペーン概要
        ====================================*/
        #yashinomigekkan .campaign-overview-area {
            margin: 32px 0 48px;
            font-size: 14px;
        }
        #yashinomigekkan .campaign-overview-area h4 {
            margin: 0 0 12px;
            font-size: 20px;
        }
        #yashinomigekkan .campaign-overview-emphasis {
            display: inline;
            margin: 16px 0 40px;
            padding: 0;
            background-image: linear-gradient(transparent 90%, #ffff00 90%);
            line-height: 1.5;
            font-size: 16px;
        }
        #yashinomigekkan .campaign-overview-emphasis span {
            font-size: 24px;
        }
        #yashinomigekkan .campaign-date-area {
            margin: 32px 0 0;
        }
        #yashinomigekkan .campaign-date {
            width: 100%;
            max-width: 1120px;
            min-height: 48px;
            border: 2px solid #ffff00;
            border-radius: 16px;
            margin: 16px 0 8px;
            padding: 8px 20px;
            font-size: 14px;
            line-height: 1.3;
            letter-spacing: -0.01em;
        }
        #yashinomigekkan .campaign-date span {
            font-size: 20px;
        }

        /*
            5.2 えらべる応募コース
        ====================================*/
        #yashinomigekkan .campaign-course-area {
            margin: 0 0 48px;
        }
        #yashinomigekkan .campaign-course-area h4 {
            margin: 0 0 16px;
            font-size: 20px;
        }
        #yashinomigekkan .campaign-course-box {
            position: relative;
            background: #fff;
            margin: 0 0 32px;
            padding: 32px 32px 20px;
            border-radius: 16px;
        }
        #yashinomigekkan .campaign-course-textarea {
            max-width: 432px;
            margin: 16px 0;
        }
        #yashinomigekkan .campaign-course-itemarea {
            display: block;
        }
        #yashinomigekkan .campaign-course-box h5 {
            font-size: 28px;
            line-height: 1.5;
            display: inline;
            padding: 0;
            background-image: linear-gradient(transparent 90%, #ffff00 90%);
        }
        #yashinomigekkan .campaign-course-box h5 span {
            font-size: 16px;
        }
        #yashinomigekkan .campaign-course-box h6 {
            margin: 24px 0 8px;
            font-size: 20px;
            line-height: 0.9;
            letter-spacing: -0.02em;
        }
        #yashinomigekkan .campaign-course-box h6 span {
            font-size: 28px;
        }
        #yashinomigekkan .course-washingdishes-img {
            position: relative;
            width: 100%;
            max-width: 594px;
            margin: -10% 0 0 15%;
            top: auto;
            right: auto;
            text-align: center;
        }
        #yashinomigekkan .course-laundry-img {
            position: relative;
            width: 100%;
            max-width: 594px;
            margin: 24px auto 0;
            top: auto;
            right: auto;
            text-align: center;
        }

        /*対象商品*/
        #yashinomigekkan .eligible-ttl {
            margin: 32px 0 8px;
            text-align: center;
            font-size: 18px;
        }
        #yashinomigekkan .eligible-ttl::before,
        #yashinomigekkan .eligible-ttl::after {
            content: "";
            height: 1px;
            flex-grow: 1;
            background-color: #6fba2c;
        }
        #yashinomigekkan .eligible-ttl::before {
            margin-right: 0.7em;
        }
        #yashinomigekkan .eligible-ttl::after {
            margin-left: 0.7em;
        }
        #yashinomigekkan ul.eligible-item {
            display: block;
        }
        #yashinomigekkan ul.eligible-item li {
            margin: 0 0 16px;
        }
        #yashinomigekkan .eligible-item-img {
            max-width: 72px;
            margin: 0 16px;
        }
        #yashinomigekkan .eligible-item-ttl {
            font-size: 14px;
            line-height: 1.;
        }
        #yashinomigekkan .eligible-item-ttl span {
            font-size: 12px;
            color: #333;
        }

        /*
            5.3 Wチャンス
        ====================================*/
        #yashinomigekkan .campaign-wchance-area {
            position: relative;
            margin: 0 0 24px;
            padding: 24px 28px;
            border-radius: 16px;
            border: 2px solid #6fba2c;
        }
        #yashinomigekkan .campaign-wchance-area h5 {
            font-size: 20px;
            line-height: 1.5;
            display: inline;
            padding: 0;
            background-image: linear-gradient(transparent 90%, #ffff00 90%);
        }
        #yashinomigekkan .campaign-wchance-area h5 span {
            font-size: 28px;
        }
        #yashinomigekkan .campaign-wchance-text {
            margin: 16px 0 0;
            font-size: 12px;
            line-height: 1.5;
        }
        #yashinomigekkan .campaign-wchance-text span {
            font-size: 20px;
            line-height: 1.3;
        }
        #yashinomigekkan .campaign-wchance-attention {
            margin: 0 0 48px;
            text-align: center;
            font-size: 12px;
        }
        #yashinomigekkan .wchance-img {
            position: absolute;
            max-width: 148px;
            margin: auto;
            top: 24px;
            right: 8px;
        }

        /*
            5.4 応募方法
        ====================================*/
        #yashinomigekkan .campaign-howto-area {
            margin: 0 0 32px;
        }
        #yashinomigekkan .campaign-howto-area h4 {
            margin: 0 0 16px;
            font-size: 20px;
        }
        #yashinomigekkan .campaign-howto-text {
            font-size: 14px;
        }
        #yashinomigekkan .campaign-howto-text span {
            padding: 0 0 4px;
            border-bottom: 1px solid #008c2f;
        }

        /*
            5.5 応募に関する注意
        ====================================*/
        #yashinomigekkan .campaign-attention-area {
            width: 100%;
            max-width: 1120px;
            margin: 0 0 40px;
            padding: 4px 32px 4px;
            background: #fff;
            border-radius: 16px;
            font-size: 14px;
        }
        /*========== アコーディオン ==========*/
        #yashinomigekkan .title::after,
        #yashinomigekkan .title::before {
            content: "";
            position: absolute;
            right: 12px;
            top: 1.5em;
            width: 1px;
            height: 1.5em;
            background-color: #008c2f;
            transition: all 0.3s;
        }
        #yashinomigekkan .toggle:checked + .title + .content {
            min-height: 4230px;
            transition: all 0.5s;
        }

        #yashinomigekkan .campaign-attention-box {
            margin: 0px 0 0;
            border-top: 1px solid #008c2f;
        }
        #yashinomigekkan .campaign-attention-area h4 {
            font-size: 18px;
        }
        #yashinomigekkan .campaign-attention-area h5 {
            font-size: 16px;
            margin: 32px 0 4px;
        }

        /*レシート例*/
        #yashinomigekkan ul.campaign-receipt-example {
            display: block;
            width: 100%;
            margin: 32px 0 0;
        }
        #yashinomigekkan ul.campaign-receipt-example li {
            width: 100%;
            max-width:100%;
            display: flex;
            justify-content: space-between;
        }
        #yashinomigekkan ul.campaign-receipt-example li div {
            display: block;
        }
        #yashinomigekkan .receipt-ok {
            color: #008c2f;
            font-size: 24px;
            margin: 0 16px 0 0;
        }
        #yashinomigekkan .receipt-ng {
            color: #e60012;
            font-size: 20px;
            margin: 0 16px 0 0;
        }
        #yashinomigekkan .receipt-attention {
            display: inline-block;
            margin: 16px 0 0;
            font-size: 12px;
            line-height: 1.4;
        }
        #yashinomigekkan .receipt-img {
            width: 45%;
            margin: 0 0 24px 5%;
            border: 1px solid #c4c4c4;
        }

        /*
            5.6 応募する
        ====================================*/
        #yashinomigekkan a.btn-apply {
            max-width: 292px;
            height: 48px;
            line-height: 48px;
            font-size: 16px;
        }
        #yashinomigekkan .campaign-apply-attention {
            font-size: 12px
        }

        /*
            5.7 キャンペーンは終了しました
        ====================================*/
        #yashinomigekkan .campaign-end {
            background: #fff;
            margin: 32px 0 0;
            padding: 24px;
            border-radius: 16px;
            border: 2px solid #e60012;
            text-align: center;
            color: #e60012;
        }
        #yashinomigekkan .campaign-end-ttl {
            margin: 0 0 8px;
            font-size: 24px;

            line-height: 1.3;
        }
        #yashinomigekkan .campaign-end-ttl-sub {
            font-size: 12px;
            line-height: 1.3;
        }


        /*====================================

        6.イメージ

        ====================================*/
        #yashinomigekkan .image-contents {
            width: 100%;
            margin: 0 0 24px;
        }

        /*====================================

        7.ポケモンコピーライト

        ====================================*/
        #yashinomigekkan .pokemon-copyright-contents {
            width: 90%;
            margin: 0 auto 24px;
            text-align: center;
        }
        #yashinomigekkan .pokemon-copyright-img {
            width: 40%;
            max-width: 240px;
            margin: 0 auto 16px;
        }
        #yashinomigekkan .pokemon-copyright-text {
            font-size: 10px;
            line-height: 1.5;
        }
        /*====================================

        8.フッター

        ====================================*/
        #yashinomigekkan .footer-contents {
            position: relative;
            width: 100%;
            max-height: auto;
            margin: 0 0 0;
            padding: 64px 0 56px;
            background: url(../images/footer-bg.png) top center no-repeat;
            background-size: cover;
            text-align: center;
            color: #fff;
        }
        #yashinomigekkan ul.footer-nav {
            display: flex;
            justify-content: center;
            font-size: 12px;
        }
        #yashinomigekkan .yashinomi-copyright {
            margin: 16px 0 0;
            font-size: 10px;
        }

}