@charset "utf-8";
/*====================================
ヤシノミ洗剤ポケモンデザイン特設サイト
0.汎用
    0.1 レイアウト
    0.2 テキスト
    0.3 リンク
1.メイン
2.コンセプト
3.ラインアップ
4.ご購入はこちら
    4.1 店舗でのご購入はこちら
    4.2 オンラインでのご購入はこちら
5.SARAYA公式通販限定企画 送料無料の4種セットが登場！
6.キャンペーン
    6.1 キャンペーン概要
    6.2 えらべる応募コース
    6.3 Wチャンス
    6.4 応募方法
    6.5 応募開始
    6.6 お問い合わせ
7.フッター
8.メディアクエリ
    8.1 画面サイズが1024px以上のCSSを記述
    8.2 画面サイズが578pxから1024pxまでのCSSを記述
====================================*/
/*
    画面サイズが577pxまでのCSSを記述
========================================================================*/
#yashinomigekkan {
    width: 100%;
    font-family: "Koburina Gothic W3 JIS2004", "こぶりなゴシック W3 JIS2004", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif;
    font-feature-settings: "palt";
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #656666;
    text-align: justify;
    box-sizing: border-box;
}
/*test2*/
#yashinomigekkan.ai-gothic {
    font-family: "A1 Gothic R", "A1ゴシック R", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif !important;
}
#yashinomigekkan.ai-gothic h1,
#yashinomigekkan.ai-gothic h2,
#yashinomigekkan.ai-gothic h3 {
    text-shadow: none !important;
}


#yashinomigekkan .yashinomigekkan-article {
    background: #fff;
}
#yashinomigekkan h1,
#yashinomigekkan h2,
#yashinomigekkan h3 {
    /*font-family: "Koburina Gothic W6 JIS2004", "こぶりなゴシック W6 JIS2004", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",  Verdana, sans-serif;*/
    text-shadow: 0.1px 0 currentColor, -0.1px 0 currentColor, 0 0.1px currentColor, 0 -0.1px currentColor;
}

/*
 	1.1 アニメーション
====================================*/
/* その場で */
.fadeIn {
    animation-name:fadeInAnime;
    animation-duration:3s;
    animation-delay:0s;
    animation-fill-mode:forwards;
    opacity:0;
}
.delay-1 { animation-delay: 1s; }  /* 1秒後に開始 */
.delay-2 { animation-delay: 2s; }  /* 2秒後に開始 */
.delay-3 { animation-delay: 3s; }  /* 3秒後に開始 */
.delay-4 { animation-delay: 4s; }  /* 4秒後に開始 */
.delay-5 { animation-delay: 5s; }  /* 5秒後に開始 */

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/*====================================

 0.汎用

====================================*/
/*
 	0.1 レイアウト
====================================*/
/*デバイスごとに要素を表示・非表示*/
#yashinomigekkan .pc-v { display: none !important; }
#yashinomigekkan .pc-no { display: block !important; }
#yashinomigekkan .tablet-v { display: none !important; }
#yashinomigekkan .sp-v { display: block !important; }
#yashinomigekkan .sp-no { 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-end { justify-content: end; }
#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; }

/*画像*/
#yashinomigekkan img {
    width: 100%;
    vertical-align: bottom !important;
}
/*画像余白ネガティブマージン*/
#yashinomigekkan .img-minus {
    margin-bottom: -2px;
}
#yashinomigekkan div,
#yashinomigekkan p,
#yashinomigekkan figure {
    margin: 0;
    padding: 0;
}

/*
 	0.2 テキスト
====================================*/

/*
 	0.3 リンク
====================================*/

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

 1.メイン

====================================*/
#yashinomigekkan .main-contents {
    position: relative;
    width: 100%;
    text-align: center;
}
#yashinomigekkan .midashi-text {
    margin: 24px 0 0;
    font-size: 18px;
    line-height: 1.5;
    color: #3a80bf;
}
#yashinomigekkan .main-contents h1 {
    margin: 16px 0 0;
    text-align: center;
    color: #3a80bf;
    font-size: 32px;
    line-height: 1.4;
}
#yashinomigekkan .main-contents h1 span {
    font-size: 24px;
}
#yashinomigekkan .main-contents .release-date {
    display: inline-block;
    margin: 16px 0 0;
    font-size: 26px;
    color: #3a80bf;
    background: linear-gradient(transparent 80%, #ffdc00 80%);
    line-height: 1.2;
}
#yashinomigekkan .main-contents .release-date span {
    font-size: 20px;
}
#yashinomigekkan .lineup-img {
    width: 85%;
    max-width: 336px;
    margin: 24px auto 0;
}

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

 2.コンセプト

====================================*/
#yashinomigekkan .concept-contents {
    width: 100%;
    text-align: center;
}
#yashinomigekkan .concept-midashi {
    margin: 40px 0 0;
    font-size: 18px;
    line-height: 1.5;
    color: #3a80bf;
    text-align: center;
}
#yashinomigekkan .concept-midashi span  {
    font-size: 14px;
}
/*アイコン*/
#yashinomigekkan .icon-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 320px;
    gap: 16px;
    margin: 0 auto;
    padding: 0;
}
#yashinomigekkan .icon-item {
    text-align: center;
    width: calc(33.333% - 10.666px); /* 3つ並び用 */
}
#yashinomigekkan .icon-item dt {
    margin: 0 auto 0;
}
#yashinomigekkan .icon-item dd {
    font-size: 12px;
    letter-spacing: -0.06em;
    color: #3a80bf;
}
#yashinomigekkan .icon-item img {
  max-width: 104px;
  height: auto;
}
#yashinomigekkan .concept-lead {
    max-width: 320px;
    margin: 40px auto 40px;
    text-align: left;
}
/*マーク*/
#yashinomigekkan dl.mark-area {
    width: 100%;
    max-width: 280px;
    margin: 0 auto 32px;
}
#yashinomigekkan dl.mark-area dt {
    margin: 0 24px 0 0;
}
#yashinomigekkan dl.mark-area dd {
    font-size: 12px;
    text-align: left;
}
#yashinomigekkan dl.mark-area dd span {
    font-size: 10px;
}
#yashinomigekkan .mark-rspo,
#yashinomigekkan .mark-borneotrust {
    max-width: 64px;
}

/*テキストリンク*/
#yashinomigekkan a.environment-link {
    display: inline-block;
    margin: 0 auto;
    line-height: 1.5;
    border-bottom: 1px solid #3a80bf;
    color: #3a80bf;
    text-decoration: none;
}
#yashinomigekkan a.environment-link:hover {
}

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

 3.ラインアップ

====================================*/
#yashinomigekkan .bg-nami-blue {
    margin: 48px 0 0;
}
#yashinomigekkan .lineup-contents {
    width: 100%;
    overflow: hidden;
    text-align: center;
    background: #eef6fa;
    margin: 0 0 0;
    padding: 0 0 0;
}
#yashinomigekkan .lineup-contents h2 {
    color: #3a80bf;
    font-size: 32px;
    line-height: 1.3;
}
#yashinomigekkan .lineup-contents h2 span {
    font-size: 20px;
}
#yashinomigekkan .lineup-contents .sub-text {
    display: inline-block;
    font-size: 16px;
    color: #99cbe4;
    margin: 0px 0 8px;
}

/*ラインアップ*/
#yashinomigekkan .lineup-item {
    margin: 0 0 32px;
}
#yashinomigekkan .lineup-img-left {
    margin-left: -8px;
}
#yashinomigekkan .lineup-img-right {
    margin-right: -8px;
}
#yashinomigekkan .lineup-img-01 {
}
#yashinomigekkan .lineup-img-02 {
}
#yashinomigekkan .lineup-img-03 {
    margin: 0 0 16px -8px;
}
#yashinomigekkan .lineup-img-04 {
    margin: 48px -8px -12px 0;
}

#yashinomigekkan .lineup-item h3 {
    font-size: 22px;
    line-height: 1.4;
    color: #3a80bf;
}
#yashinomigekkan .lineup-item h3 span {
    display: inline-block;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0 0;
}
#yashinomigekkan .lineup-item h4 {
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 1.5;
}
#yashinomigekkan .lineup-item-text {
    max-width: 320px;
    margin: 16px auto 0;
    text-align: left;
    text-align: justify;
}

/*テキストリンク*/
#yashinomigekkan a.attention-link {
    display: inline-block;
    margin: 24px auto 0;
    line-height: 1.5;
    border-bottom: 1px solid #3a80bf;
    color: #3a80bf;
    text-decoration: none;
}
#yashinomigekkan a.environment-link:hover {
}

/*実はもう1匹*/
#yashinomigekkan .lineup-footer-text {
    max-width: 320px;
    margin: 40px auto 24px;
    padding: 24px 0;
    background: #fff;
    border-radius: 24px;
    color: #3a80bf;
    font-size: 16px;
}
#yashinomigekkan .lineup-footer-illust {
    max-width: 64px;
    margin: 0 auto 16px;
}

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

 4.ご購入はこちら

====================================*/
#yashinomigekkan .bg-nami-white {
    margin: 0 0 0;
}
#yashinomigekkan .buy-contents {
    width: 100%;
    margin: 0 0 0;
    padding: 24px 0 0;
    overflow: hidden;
    text-align: center;
}
#yashinomigekkan .buy-contents h4 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #3a80bf;
}

/*
 	4.1 店舗でのご購入はこちら
====================================*/
#yashinomigekkan .search-btn-none {
    width: 100%;
    max-width: 320px;
    height: 56px;
    margin: 0 auto 24px;
    background-color: rgba(58, 128, 191, 0.6);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 56px;
    border-radius: 28px;
    border: 1px solid #fff;
    /*cursor: pointer;*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
}
/*販売店舗を検索する*/
#yashinomigekkan a.search-btn {
    width: 100%;
    max-width: 320px;
    height: 56px;
    margin: 0 auto 24px;
    background-color: #3a80bf;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 56px;
    border-radius: 28px;
    border: 1px solid #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
}
#yashinomigekkan a.search-btn:hover {
    background-color: #fff;
    color: #3a80bf;
    border: 1px solid #3a80bf;
}
#yashinomigekkan .search-attention-text {
    max-width: 320px;
    margin: 0 auto 40px;
    font-size: 12px;
    text-align: left;
}
/*
 	4.2 オンラインでのご購入はこちら
====================================*/
#yashinomigekkan ul.buy-online-area {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}
#yashinomigekkan ul.buy-online-area li a {
    width: 100%;
    display: block;
    width: 320px;
    height: 56px;
    border-radius: 28px;
    margin: 0 auto 16px;
    border: 1px solid #c4c4c4;
    display: flex;
    align-items: center;
    justify-content: center;
}
#yashinomigekkan ul.buy-online-area li a img {
    width: 100%;
    max-width: 80px;
}

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

 5.SARAYA公式通販限定企画 送料無料の4種セットが登場！

====================================*/
#yashinomigekkan .bg-nami-gray {
    margin: 24px 0 0;
}
#yashinomigekkan .set-contents {
    width: 100%;
    margin: 0 0 0;
    padding: 16px 0 0;
    overflow: hidden;
    text-align: center;
    background: #eff1f1;
}
#yashinomigekkan .set-contents .set-midashi {
    margin: 0 0 4px;
    font-size: 18px;
    color: #3a80bf;
}
#yashinomigekkan .set-contents h2 {
    display: inline-block;
    font-size: 22px;
    line-height: 1.3;
    color: #3a80bf;
    background: linear-gradient(transparent 80%, #ffdc00 80%);
}
#yashinomigekkan .set-contents h2 span {
    font-size: 30px;
}
/*ここから削除*/
#yashinomigekkan .set-contents .release-date {
    display: inline-block;
    margin: 16px 0 0;
    font-size: 26px;
    color: #3a80bf;
    background: linear-gradient(transparent 80%, #ffdc00 80%);
    line-height: 1.2;
}
#yashinomigekkan .set-contents .release-date span {
    font-size: 18px;
}
/*ここまで削除*/

#yashinomigekkan .set-img {
    width: 85%;
    max-width: 336px;
    margin: 40px auto 20px;
}
#yashinomigekkan .set-attention {
    font-size: 12px;
}
#yashinomigekkan .set-contents h3 {
    margin: 32px 0 16px;
    font-size: 18px;
    color: #3a80bf;
}

/*限定セットはこちら*/
#yashinomigekkan a.set-btn {
    width: 100%;
    max-width: 320px;
    height: 64px;
    margin: 0 auto 24px;
    background-color: #fff;
    color: #3a80bf;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 28px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
    line-height: 1.3;
}
#yashinomigekkan a.set-btn:hover {
    background-color: #fff;
    color: #3a80bf;
}
#yashinomigekkan .bg-nami-gray-white {
    margin: 0 0 0;
}

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

 6.キャンペーン

====================================*/
/*
 	6.1 キャンペーン概要
====================================*/
#yashinomigekkan .cp-contents {
    width: 100%;
    text-align: center;
    padding: 24px 0 0;
}
#yashinomigekkan .cp-contents h2 {
    color: #3a80bf;
    font-size: 32px;
    line-height: 1.3;
}
#yashinomigekkan .cp-contents h2 span {
    font-size: 20px;
}
#yashinomigekkan .cp-contents .sub-text {
    display: inline-block;
    font-size: 16px;
    color: #99cbe4;
    margin: 0px 0 8px;
}
#yashinomigekkan .cp-midashi {
    margin: 24px 0 12px;
    font-size: 16px;
    color: #3a80bf;
}
#yashinomigekkan .cp-contents h3 {
    color: #3a80bf;
    font-size: 32px;
    line-height: 1.1;
}
#yashinomigekkan .cp-contents h3 span {
    font-size: 20px;
    line-height: 1;
}
#yashinomigekkan .cp-contents h4 {
    display: inline-block;
    margin: 32px 0 24px;
    font-size: 26px;
    color: #3a80bf;
    background: linear-gradient(transparent 80%, #d6eaf4 80%);
    line-height: 1.2;
}
#yashinomigekkan .cp-lead {
    max-width: 320px;
    margin: 0 auto;
    text-align: left;
}
#yashinomigekkan .cp-lead-present {
    max-width: 320px;
    margin: 8px auto 32px;
    text-align: left;
    color: #3a80bf;
    font-size: 16px;
    line-height: 1.5;
    /*letter-spacing: -0.03em;*/
}
#yashinomigekkan .cp-lead-present span {
    font-size: 22px;
}
#yashinomigekkan .cp-contents h5 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-align: center;
    color: #3a80bf;
    width: 100%;
    max-width: 344px;
    margin: 24px auto 8px;
}
#yashinomigekkan .cp-contents h5::before {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #3a80bf;
    margin: 0 8px 0 0; /* テキストと線の間に余白 */
    max-width: 56px; /* 追加：幅制限を解除 */
}
#yashinomigekkan .cp-contents h5::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #3a80bf;
    margin: 0 0 0 8px; /* テキストと線の間に余白 */
    max-width: 56px; /* 追加：幅制限を解除 */
}
#yashinomigekkan .cp-date span {
    font-size: 22px;
    line-height: 1.5;
}

/*
 	6.2 えらべる応募コース
====================================*/
#yashinomigekkan .course-contents {
    width: 100%;
    margin: 0 0 0;
    padding: 16px 0 0;
    overflow: hidden;
    text-align: center;
    background: #eef6fa;
}
#yashinomigekkan .course-contents h2 {
    color: #3a80bf;
    font-size: 20px;
    margin: 0 0 0;
}
#yashinomigekkan .course-contents h3 {
    margin: 20px 0 0;
    color: #3a80bf;
    font-size: 32px;
}
#yashinomigekkan .course-contents h3 span {
    font-size: 22px;
}
#yashinomigekkan .course-contents .sub-text {
    display: inline-block;
    font-size: 16px;
    color: #99cbe4;
    margin: 0px 0 8px;
}
#yashinomigekkan .course-dish-washing-img {
    width: 106%;
    margin: -48px 0 -3%;
    max-width: 424px;
}
#yashinomigekkan .course-laundry-img {
    width: 100%;
    margin: -8px -2% 0 auto;
    max-width: 375px;
}
#yashinomigekkan .course-contents h4.dish-washing-ttl {
    margin: -48px 0 0;
    color: #3a80bf;
    font-size: 22px;
    line-height: 1.3;
}
#yashinomigekkan .course-contents h4.laundry-ttl {
    margin: -32px 0 0;
    color: #3a80bf;
    font-size: 22px;
    line-height: 1.3;
}
#yashinomigekkan .course-contents h4 span {
    font-size: 32px;
}
#yashinomigekkan .course-text {
    max-width: 320px;
    margin: 20px auto 0;
    text-align: justify;
}
#yashinomigekkan .course-text span {
    color: #3a80bf;
}

/*対象商品*/
#yashinomigekkan .eligible-area {
    max-width: 320px;
    margin: 48px auto 32px;
    text-align: left;
}
#yashinomigekkan .eligible-area h5 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-align: center;
    color: #3a80bf;
    width: 100%;
    max-width: 344px;
    margin: 24px auto 16px;
}
#yashinomigekkan .eligible-area h5::before {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #3a80bf;
    margin: 0 8px 0 0; /* テキストと線の間に余白 */
    max-width: 56px; /* 追加：幅制限を解除 */
}
#yashinomigekkan .eligible-area h5::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #3a80bf;
    margin: 0 0 0 8px; /* テキストと線の間に余白 */
    max-width: 56px; /* 追加：幅制限を解除 */
}
#yashinomigekkan ul.eligible-item {
    display: block;
}
#yashinomigekkan ul.eligible-item li {
    margin: 0 0 24px;
}
#yashinomigekkan .eligible-item-img {
    max-width: 96px;
    margin: 0 20px 0;
}
#yashinomigekkan .eligible-item-ttl {
    font-size: 16px;
    line-height: 1.5;
    color: #3a80bf;
}
#yashinomigekkan .eligible-item-ttl span {
    display: inline-block;
    margin: 16px 0 0;
    font-size: 12px;
    color: #333;
}

/*
 	6.3 Wチャンス
====================================*/
#yashinomigekkan .chance-area {
    box-sizing: border-box;
    position: relative;
    max-width: 336px;
    height: auto;
    margin: 0 auto 32px;
    padding: 24px;
    background: #fff;
    border-radius: 24px;
}
#yashinomigekkan .chance-area h4 {
    font-size: 22px;
    color: #3a80bf;
}
#yashinomigekkan .chance-area h3 span {
    font-size: 32px;
}
#yashinomigekkan .chance-illust {
    position: absolute;
    top: -56px;
    right: 4%;
    max-width: 64px;
}
#yashinomigekkan .chance-img {
    max-width: 132px;
    font-size: 12px;
    line-height: 1.5;
    margin: 16px auto 16px;
}
#yashinomigekkan .chance-text {
    text-align: center;
    font-size: 18px;
    color: #3a80bf;
    line-height: 1.5;
}
#yashinomigekkan .chance-text span.small-text {
    font-size: 14px;
}
#yashinomigekkan .chance-text span.large-text {
    font-size: 30px;
}
#yashinomigekkan .chance-attention {
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 24px;
}































/*
 	6.4 応募方法
====================================*/
#yashinomigekkan .apply-contents {
    width: 100%;
    max-width: 336px;
    margin: 0 auto;
    text-align: center;
}
#yashinomigekkan .apply-contents h2 {
    display: inline-block;
    margin: 32px 0 24px;
    font-size: 24px;
    color: #3a80bf;
    background: linear-gradient(transparent 80%, #d6eaf4 80%);
    line-height: 1.2;
}
#yashinomigekkan .apply-lead {
    max-width: 320px;
    margin: 0 auto;
    text-align: left;
}
#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: 3520px;
    transition: all 0.5s;
}
#yashinomigekkan .toggle:checked + .title::before {
    transform: rotate(90deg) !important;
}
#yashinomigekkan .campaign-attention-box {
    margin: 16px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #3a80bf;
}
#yashinomigekkan .campaign-attention-box .text-bold {
    text-shadow: 0.1px 0 currentColor, -0.1px 0 currentColor, 0 0.1px currentColor, 0 -0.1px currentColor;
}
#yashinomigekkan .campaign-attention-area {
    margin: 20px 0 20px;
    box-sizing: border-box;
    border: 2px solid #d7ecf4;/*#e4f1f7*/
    border-radius: 24px;
    text-align: left;
    font-size: 12px;
    padding: 0 20px;
}
#yashinomigekkan .campaign-attention-area h4 {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #3a80bf;
}
#yashinomigekkan .campaign-attention-area h5 {
    text-align: center;
    color: #3a80bf;
}

/*レシート例*/
#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: #3a80bf;
    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 16px;
}
#yashinomigekkan .campaign-qa span {
    font-size: 14px;
    color: #3a80bf;
}
#yashinomigekkan .campaign-qa-area {
    margin-bottom: 16px;
}
        /*========== アコーディオン ==========*/
        #yashinomigekkan .title::after,
        #yashinomigekkan .title::before {
            content: "";
            position: absolute;
            right: 12px;
            top: 2em;
            width: 1px;
            height: 1.5em;
            background-color: #3a80bf;
            transition: all 0.3s;
        }
        #yashinomigekkan .toggle:checked + .title + .content {
            min-height: 3520px;
            transition: all 0.5s;
        }

        #yashinomigekkan .campaign-attention-box {
            margin: 0px 0 0;
            border-top: 1px solid #3a80bf;
        }
        #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: #3a80bf;
            font-size: 16px;
            margin: 0 16px 0 0;
        }
        #yashinomigekkan .receipt-ng {
            color: #e60012;
            font-size: 16px;
            margin: 0 16px 0 0;
        }
        #yashinomigekkan .receipt-attention {
            display: inline-block;
            margin: 16px 0 0;
            font-size: 12px;
            line-height: 1.4;
            letter-spacing: -0.03em;
        }
        #yashinomigekkan .receipt-img {
            width: 40%;
            max-width: 96px;
            margin: 0 0 24px 5%;
            border: 1px solid #c4c4c4;
        }

/*テキストリンク*/
#yashinomigekkan .contact-area {
    text-align: center;
}
#yashinomigekkan a.contact-link {
    display: inline-block;
    text-align: center;
    line-height: 1.5;
    border-bottom: 1px solid #3a80bf;
    color: #3a80bf;
    text-decoration: none;
}
#yashinomigekkan a.environment-link:hover {
}


/*
 	6.5 応募開始
====================================*/
#yashinomigekkan .campaign-date-area {
    margin: 0 0 24px;
}
#yashinomigekkan .campaign-date-start {
    margin: -16px 0 0;
    font-size: 18px;
    color: #3a80bf;
}
#yashinomigekkan .campaign-date-start span {
    font-size: 28px;
}
#yashinomigekkan .campaign-date-attention {
    font-size: 12px;
}

/*ボタン*/
#yashinomigekkan a.form-btn {
    width: 100%;
    max-width: 320px;
    height: 56px;
    margin: 32px auto 24px;
    background-color: #3a80bf;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 56px;
    border-radius: 28px;
    border: 1px solid #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
}
#yashinomigekkan a.form-btn:hover {
    background-color: #fff;
    color: #3a80bf;
    border: 1px solid #3a80bf;
}
#yashinomigekkan .form-attention-text {
    max-width: 320px;
    margin: 0 auto 40px;
    font-size: 12px;
    text-align: left;
}

/*
 	6.6 お問い合わせ
====================================*/
#yashinomigekkan .campaign-date-area {
    margin: 0 0 24px;
}
/*お問い合わせ*/
#yashinomigekkan a.contact-btn {
    width: 100%;
    max-width: 320px;
    height: 56px;
    margin: 0 auto 24px;
    background-color: #fff;
    color: #3a80bf;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 56px;
    border-radius: 28px;
    border: 1px solid #3a80bf;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none;
}
#yashinomigekkan a.contact-btn:hover {
    background-color: #3a80bf;
    color: #fff;
    border: 1px solid #3a80bf;
}

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

 7.フッター

====================================*/
#yashinomigekkan .pokemon-copyright-contents {
    width: 90%;
    margin: 24px 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;
}

/*フッターリンク*/
#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);
}
#yashinomigekkan .footer-contents {
    position: relative;
    width: 100%;
    max-height: auto;
    margin: 0 0 0;
    padding: 64px 0 40px;
    background: url(../images/footer-bg.png) top center no-repeat;
    background-size: 100%;
    text-align: center;
    color: #fff;
}
#yashinomigekkan ul.footer-nav {
    display: flex;
    justify-content: center;
    font-size: 12px;
}
#yashinomigekkan ul.footer-nav li a {
    color: #fff;
    font-size: 12px;
    text-decoration: none;
}
#yashinomigekkan .yashinomi-copyright {
    margin: 16px 0 0;
    font-size: 10px;
}



















































































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

 8.メディアクエリ

====================================*/
/*
 	8.1 画面サイズが1024px以上のCSSを記述
========================================================================*/
@media screen and (min-width: 1024px) {
    #yashinomigekkan {
        background: url(../images/main-bg-pc.png) no-repeat bottom center;
        background-size: cover;
        background-attachment: fixed;
        padding: 40px 0 0;
    }

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

    /*
        左側
    ====================================*/
    #yashinomigekkan .yashinomigekkan-pc-left {
        width: calc(50% - 200px); /* 指定の幅 */
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-75%); /* 上下中央 */
        display: flex;
        justify-content: center; /* 左右中央 */
    }
    #yashinomigekkan .yashinomigekkan-pc-logo {
        max-width: 180px; /* 最大サイズ */
        width: 100%;
        height: auto; /* 縦横比維持 */
        margin: 0 auto; /* 中央配置 */
    }

    /*
        スマホコンテンツ部分
    ====================================*/
    #yashinomigekkan .yashinomigekkan-article {
        background-color: #fff; /* 背景色（必要なら） */
        box-shadow: 0 0 16px 0 rgba(58, 128, 191, 0.16);
        max-width: 400px;
        margin: 0 auto 0;
        border-radius: 24px 24px 0 0;
        overflow: hidden;
    }

    /*
        右側
    ====================================*/
    #yashinomigekkan .yashinomigekkan-pc-right {
        width: calc(50% - 200px); /* 指定の幅 */
        position: fixed;
        top: 50%;
        right: 0;
        /*transform: translateY(-50%); /* 上下中央 */
        display: flex;
        justify-content: center; /* 左右中央 */
    }
    #yashinomigekkan .lineup-img-pc {
        max-width: 440px; /* 最大サイズ */
        width: 100%; /* 画面サイズに応じて縮小 */
        height: auto; /* 縦横比を維持 */
        margin: 0 auto; /* 中央配置 */
    }
}

/*
 	8.2 画面サイズが578pxから1024pxまでのCSSを記述
========================================================================*/
@media screen and (min-width: 578px) and (max-width: 1024px) {
    #yashinomigekkan {
        background: url(../images/main-bg-pc_noimg.png) no-repeat top center;
        background-size: cover;
        background-attachment: fixed;
    }
    /*デバイスごとに要素を表示・非表示*/
    #yashinomigekkan .pc-v { display: block !important; }
    #yashinomigekkan .pc-no { display: none !important; }
    #yashinomigekkan .sp-v { display: none !important; }
    #yashinomigekkan .sp-no { display: block !important; }
    #yashinomigekkan .tablet-v { display: block !important; }
    #yashinomigekkan .tablet-no { display: none !important; }

    /*
        左側
    ====================================*/
    #yashinomigekkan .yashinomigekkan-pc-left {
        width: calc(50% - 200px); /* 指定の幅 */
        position: fixed;
        top: 50%;
        left: 0;
        transform: translateY(-50%); /* 上下中央 */
        display: flex;
        justify-content: center; /* 左右中央 */
    }
    #yashinomigekkan .yashinomigekkan-pc-logo {
        max-width: 510px; /* 最大サイズ */
        width: 100%;
        height: auto; /* 縦横比維持 */
        margin: 0 auto; /* 中央配置 */
    }

    /*
        スマホコンテンツ部分
    ====================================*/
    #yashinomigekkan .yashinomigekkan-article {
        max-width: 400px;
        margin: 0 auto 0;
        overflow: hidden;
    }

    /*
        右側
    ====================================*/
    #yashinomigekkan .yashinomigekkan-pc-right {
        width: calc(50% - 200px); /* 指定の幅 */
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%); /* 上下中央 */
        display: flex;
        justify-content: center; /* 左右中央 */
    }
    #yashinomigekkan .yashinomigekkan-pc-img {
        max-width: 300px; /* 最大サイズ */
        width: 100%; /* 画面サイズに応じて縮小 */
        height: auto; /* 縦横比を維持 */
        margin: 0 auto; /* 中央配置 */
    }

}