/** Shopify CDN: Minification failed

Line 1685:0 Expected "*/" to terminate multi-line comment

**/
/*-----------------------------------
 personal-check.css
 楽天 診断LP → Shopify 移植版
 対象25枚（入口1 / 質問12 / 結果12）が使うルールのみ
 全セレクタを .pcheck 配下にスコープ
-----------------------------------*/

/*-----------------------------------
 Bootstrap 代替（Bootstrapは読み込まない）
-----------------------------------*/
.pcheck *,
.pcheck *::before,
.pcheck *::after {
  box-sizing: border-box;
}

.pcheck .container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/*-----------------------------------
 ブレークポイント
-----------------------------------*/
@media all and (min-width: 769px) {
  .pcheck .sp {
    display: none;
  }
}

@media all and (max-width: 768px) {
  .pcheck .pc {
    display: none;
  }
}



/*-----------------------------------
 共通
-----------------------------------*/
/* html {
  scroll-behavior: smooth;
} */

.pcheck .container {
  max-width: 720px;
  /* margin-bottom: 400px; */
}
@media screen and (max-width: 768px) {
  .pcheck .container {
    padding-bottom: 50px;
  }
} /*  */

.pcheck img {
  width: 100%;
}

.pcheck a {
  color: #000;
  text-decoration-line: underline;
  text-decoration: none;
}
.pcheck a:hover {
  color: #000;
}

/*-----------------------------------
 ヘッダー
-----------------------------------*/
.pcheck .header{
  background-color: #FFFFFF;
}
.pcheck .header__logo {
  width: 100%;
  border-bottom: 1px solid #ccc;
  text-align: center;
  padding: 16px 0;
}

.pcheck .header__logo img {
  width: 10%;
}
@media screen and (max-width: 768px) {
  /* .header {
    position: sticky;
    top: 0;
  } */
  .pcheck .header__logo img {
    width: 30%;
  }
}


/*----------------------------------
 共通_トピックタイトル
-----------------------------------*/

.pcheck .container {
  max-width: 720px;
  text-align: center;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .pcheck .container {
    padding: 50px 0 20px;
  }
}

.pcheck .bg_gray {
  background-color: #f5f5f5;
}




/*----------------------------------
 共通_文字サイズ
-----------------------------------*/

.pcheck .txt_left {
  text-align: left;
}


.pcheck .h2_sub {
  text-transform: uppercase;
  font-family: 'Work Sans', sans-serif;/* グーグルフォント */
  font-size: 28px;
  font-weight: bold;

  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .pcheck .h2_sub {
    font-size: 12px;
  }
}


.pcheck .line {
  width: 5%;
  height: 3px;
  margin: auto;
  background:#111;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .pcheck .line {
    margin-bottom: 30px;
  }
}


.pcheck h2 {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.07em;/* 字間サイズ */

  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .pcheck h2 {
    font-size: 24px;
  }
}


.pcheck .txt_h2big {
  font-size: 36px;
}
@media screen and (max-width: 768px) {
  .pcheck .txt_h2big {
    font-size: 26px;
  }
}


.pcheck p {
  padding: 0 30px;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .pcheck p {
    font-size: 14px;
    padding: 0 0px;
  }
}


@media screen and (max-width: 768px) {
  .pcheck .padding_20 {
    padding: 0 20px;
  }
}


.pcheck .w_570 {
  max-width: 570px;
  margin: auto;
  margin-bottom: 40px;
}

.pcheck .p_link {
  font-size: small;
  text-align: right;
  padding: 0;
  margin: 0;
}



/*----------------------------------
 共通_画像マージン
-----------------------------------*/
.pcheck .mb_30 {
  margin-bottom: 30px;
}





/*----------------------------------
 共通_ btn 診断する
-----------------------------------*/
.pcheck .btn_black_b{
  width: 80%;
  max-width:400px;
  background:#000;
  border-radius:15px; /* ボックスの四つ角を丸くする */
  margin: auto;
  padding: 25px 0;
}
@media screen and (max-width: 768px) {
  .pcheck .btn_black_b{
    padding: 15px 0;
  }
}

.pcheck .btn_black_b p{
  font-size: 20px;
  color: #fff;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .pcheck .btn_black_b p{
    font-size: 16px;
  }
}


.pcheck .btn_andertxt {
  font-size: 12px;
  margin: 10px 0 20px;
}




/*----------------------------------
 共通_ btn 詳しく見る
-----------------------------------*/
.pcheck .btn_white{
  font-size: 12px;
  width:130px;
  background:#fff;
  border: 2px solid #000; /* 境界線を実線で指定 */
  border-radius: 50px; /* ボックスの四つ角を丸くする */
  margin: auto;
  padding: 5px 0;
}
@media screen and (max-width: 768px) {
  .pcheck .btn_white{
    padding: 2px 0;
    width:100px;
  }
}




/*----------------------------------
 共通_ エキスポ_説明部分
-----------------------------------*/
.pcheck .explanation {
  width: 100%;
  max-width: 700px;
  background-color: #fff;
  box-shadow: 2px 4px 6px gray;
  text-align: center; /* テキストを中央寄せに指定 */

  border-radius: 20px; /* ボックスの四つ角を丸くする */

  margin: auto;
  padding: 30px 0;
}
@media screen and (max-width: 768px) {
  .pcheck .explanation {
    box-shadow: 1px 2px 3px gray;
    width: 95%;
  }
}


.pcheck .exp_txt {
  margin: 15px 35px;
}

.pcheck .exp_txt span {
  font-weight: bold;
}

.pcheck .exp_txt a {
  text-decoration:underline;
}



/*----------------------------------
 イントロダクション
-----------------------------------*/


.pcheck .introduction{
  width: 100%;
  max-width: 870px;
  background-color: #fff;
  border: 2px solid #000; /* 境界線を実線で指定 */
  text-align: center; /* テキストを中央寄せに指定 */

  border-radius: 20px; /* ボックスの四つ角を丸くする */

  margin: auto;
  padding: 90px 0 70px;

  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .pcheck .introduction{
    width: 95%;
  }
}




/*----------------------------------
 ザッキーさん紹介
-----------------------------------*/
.pcheck .zakky {
  width: 80%;
  max-width: 700px;
  background-color: #fff;
  text-align: center; /* テキストを中央寄せに指定 */

  border-radius: 20px; /* ボックスの四つ角を丸くする */


  /* フレックス */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* 余白 */

  margin: auto;
  padding: 30px 0;
}
@media screen and (max-width: 768px) {
  .pcheck .zakky {
    display: block;
    width: 80%;
    margin-bottom: 80px;
  }
}

.pcheck .zakky img {
  width:160px;
  height:160px;
  border-radius:50%;
  margin-left: 10px;
}


@media screen and (max-width: 768px) {
  .pcheck .zakky_txt_box{
    margin: 20px 20px 0px 20px;
  }
}

.pcheck .zakky h2 {
  font-size: medium;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .pcheck .zakky h2 {
    font-size: medium;
  }
}


.pcheck .zakky h2 span {
  font-size: 26px
}
@media screen and (max-width: 768px) {
  .pcheck .zakky h2 span {
    font-size: 20px
  }
}



.pcheck .zakky_txt {
  /* margin-bottom: 0.2rem; */
  padding: 0 0 0 0.5rem; /* 左側に線 */
  border-left: 4px solid; /* 左側に線 */

  margin: 0;
  padding-bottom: 10px;
}




/*-----------------------------------
 骨格診断って？
-----------------------------------*/
.pcheck .p_style_3type {
  /* フレックス */
  display: flex;
  justify-content: center;
  gap: 10px; /* 余白 */

  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .pcheck .p_style_3type {
    width: 90%;
    margin: auto;
    gap: 0px; /* 余白 */
    margin-bottom: 50px;
  }
}

.pcheck .p_style_3type p {
  font-weight: bold;
  margin-bottom: 10px;
}


.pcheck .p_style_3type img {
  width: 90%;
}

@media screen and (max-width: 768px) {
  .pcheck .p_style_3type p {
    font-size: 13px;
  }
}

/*-----------------------------------
 パーソナルカラーって？
-----------------------------------*/
.pcheck .p_color_4type {
  /* フレックス */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 20px; /* 余白 */

  margin-bottom: 50px;
}

.pcheck .p_color_4type img {
  width: 300px;
  border-radius: 20px; /* ボックスの四つ角を丸くする */
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .pcheck .p_color_4type img {
    width: 150px;
  }
}


.pcheck .p_color_4type p {

  font-weight: bold;
  margin-bottom: 10px;

}




/*-------ボタンの色-------*/
.pcheck .bg_straight {
  background-color: #74a4e6;
  color: #fff;
}

.pcheck .bg_wave {
  background-color: #f08e81;
  color: #fff;
}

.pcheck .bg_natural {
  background-color: #c1d47a;
  color: #fff;
}




.pcheck .bg_spring {
  background-color: #fc989b;
  color: #fff;
}

.pcheck .bg_summer {
  background-color: #98c8da;
  color: #fff;
}

.pcheck .bg_autumn {
  background-color: #e0885d;
  color: #fff;
}

.pcheck .bg_winter {
  background-color: #b782bf;
  color: #fff;
}




/*-----------------------------------
 ラストバナー
-----------------------------------*/
.pcheck .link_bn {
  max-width: 800px;
  width: 80%;
  padding-bottom: 150px;
}
@media screen and (max-width: 768px) {
  .pcheck .link_bn {
    width: 95%;
    padding-bottom: 100px;
  }
}

.pcheck .bn_txt {
  text-align: center;
}

.pcheck .bn_txt p {
  margin-bottom: 20px
}




/*-----------------------------------
 サイドナビ
-----------------------------------*/

.pcheck .side_navi_wrap{
  position: sticky; /* 固定！ */
  top: 30px;
  z-index: 999;
}

.pcheck .side_navi {

  width: 200px;
  text-align: center;
  padding: 20px 10px;
  background-color: #fff;
  border-radius: 10px; /* ボックスの四つ角を丸くする */
  box-shadow: 0px 2px 7px 0px #ccc; /* 影指定 */
  margin: 100px 20px;
  position: absolute; /* 固定！ */

}
@media screen and (max-width: 768px) {
  .pcheck .side_navi {
    width: 100%;
    height: 100vh;
    top:0;
    margin: 0px;
    /* margin: -250px 0px; */
    position: fixed;
    right: 100%;/*leftの値を変更してメニューを画面外へ*/
    transition: all 0.5s;/*アニメーション設定*/
  }
  .pcheck #menu-btn-check:checked ~ .side_navi {
    right: 0;/*メニューを画面内へ*/
  }
}

.pcheck .side_navi p {
  font-size: 12px;
  margin-bottom: 0px;
  padding: 7px;
}
@media screen and (max-width: 768px) {
  .pcheck .side_navi p {
    font-size: 14px;
    margin-bottom: 0px;
    padding: 7px;
  }
}

.pcheck .side_navi_btn {
  width: 165px;
  border-radius: 50px; /* ボックスの四つ角を丸くする */
  margin: auto;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .pcheck .side_navi_btn {
    width: 80%;
  }
}

.pcheck .bg_white {
  background:#fff;
  border: 2px solid #000; /* 境界線を実線で指定 */
}


.pcheck .navi_sub p {
  font-size: 10px;
  font-weight: bold;
  text-transform:uppercase;
  color: #f08e81;
  padding: 0;
}


.pcheck .navi_title p {
  font-size: 11px;
  font-weight: bold;
  padding: 15px 0 5px;
}

/* #region ハンバーガーメニュー*/
.pcheck .menu-btn {
  position: fixed;
  top: 15px;
  left: 10px;
  display: none;
  height: 40px;
  width: 40px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  border-radius: 50%;
  background-color:#dfdfdf;
  padding: 30px;
}
@media screen and (max-width: 768px) {
  .pcheck .menu-btn {
    display: flex;
  }
}

.pcheck .menu-btn span,
.pcheck .menu-btn span:before,
.pcheck .menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #000000;
  position: absolute;
}
.pcheck .menu-btn span:before {
  bottom: 8px;
}
.pcheck .menu-btn span:after {
  top: 8px;
}

/* クリックで✕ */
.pcheck #menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
.pcheck #menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
.pcheck #menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}
.pcheck #menu-btn-check {
  display: none;
}
/* #endregion */



/*-----------------------------------
 診断するフッター
-----------------------------------*/

.pcheck .check_footer {
  display: none;
  position: sticky; /* 固定！ */
  bottom : 5px;
  margin-bottom: 100px;
  /* visibility: hidden; */
}

.pcheck .btn_footer {
  width: 100%;
  max-width:900px;
  background-color: #000;

  /*border: 2px solid #000; 境界線を実線で指定 */
  border-radius:15px; /* ボックスの四つ角を丸くする */
  margin: auto;
  padding: 10px 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .pcheck .btn_footer {
    width: 98%;
    padding: 20px 0;
  }
}
.pcheck .btn_footer p{
  font-size: 20px;
  /* color: #fff; */
  margin: 0;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .pcheck .btn_footer p{
    font-size: 16px;
  }
}


.pcheck .bg_space {
  height: 50px;
}




/*-----------------------------------
 トップへ戻るボタン
 ※ アイコンフォント依存を排除し、CSSの三角形で上向き矢印を描画
-----------------------------------*/

.pcheck #page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
@media screen and (max-width: 768px) {
  .pcheck #page_top{
    bottom:0px;
  }
}
.pcheck #page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
.pcheck #page_top a::before{
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 16px solid #111;
  position: absolute;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.pcheck #page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #111;
}




/*-----------------------------------
 フッター
-----------------------------------*/

.pcheck .fotter {
  text-align: center;
  background-color: #000;
}

.pcheck .footer_copyright {
  padding: 60px 0px 100px;
}

.pcheck .footer_copyright p {
  color: #ccc;
}

.pcheck .footer_copyright a {
  color: #ccc;
  text-decoration-line: none;
}




/*------------------------------------------------------------------------------------------------------------------
 診断_別ページ
-------------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 768px) {
  .pcheck .container_q {
    width: 90%;
    padding-bottom: 150px;
    margin-bottom: 0;
  }
}


@media screen and (max-width: 768px) {
  .pcheck .h2_sub_q {
    font-size: 26px;
  }
}


.pcheck .q_txt {
  font-size: 18px;
  line-height: 1.5em;
  font-weight: bold;
  margin-bottom: 30px;

}

.pcheck .btn_question {
  /* フレックス */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0px 30px; /* 余白 */

  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .pcheck .btn_question {
    gap: 10px 30px;
  }
}

.pcheck .pspc_question {
  padding-top: 50px;
  padding-bottom: 40px;
}

.pcheck .pspc_question img {
  width: 80%;
  max-width: 400px;
}


.pcheck .btn_yes {
  width:200px;
  color: #fff;
  background:#000;
  border-radius:15px; /* ボックスの四つ角を丸くする */
  padding: 15px 0;

}

.pcheck .btn_no {
  width:200px;
  color: #fff;
  background:#000;
  border-radius:15px; /* ボックスの四つ角を丸くする */
  padding: 15px 0;

}
.pcheck .btn_yes p {
  padding: 0;
  margin: 10px;
}

.pcheck .btn_no p {
  padding: 0;
  margin: 10px;
}



/* 初めから診断する */
.pcheck .btn_return_q {
  text-align: center;
  width: 100%;
  max-width:600px;
  color: #fff;
  background-color: #111;
  border-radius:15px; /* ボックスの四つ角を丸くする */
  margin: auto;
  padding: 15px 0;
  margin-bottom: 20px;
}

.pcheck .btn_return_q p{
  margin: 0;
}



/* LPトップへ戻る */
.pcheck .btn_return {
  text-align: center;
  width: 100%;
  max-width:600px;
  background-color: #fff;
  border: 1px solid #000; /* 境界線を実線で指定 */
  border-radius:15px; /* ボックスの四つ角を丸くする */
  margin: auto;
  padding: 15px 0;
}

.pcheck .btn_return p{
  margin: 0;
}





/*------------------------------------------------------------------------------------------------------------------
 診断結果_別ページ
-------------------------------------------------------------------------------------------------------------------*/

.pcheck .result_2type {
  /* フレックス */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0px 0px; /* 余白 */

  margin-bottom: 50px;
}


.pcheck .result_img_ps img {
  width: 150px;

}


.pcheck .result_x p {
  padding: 0;
  margin: 0;
  margin-bottom: 250px;
  font-size: 40px;
}
@media screen and (max-width: 768px) {
  .pcheck .result_x {
    display: block;
    width: 100%;
    margin: 0px;
  }
  .pcheck .result_x p {
    margin-bottom: 0px;
  }
}


.pcheck .result_img_pc img {
  margin-bottom: 25px;

}

.pcheck .result_txt {
  margin: 20px;
}

/* ============================================================
   本店（Shopify）用の追加分
   楽天版が <head> の直書きや jQuery に頼っていた部分をここで補う
   ============================================================ */

/* h1 を1つ立てたぶんの見た目あわせ。楽天版は h1 が無く h2 だけだった */
.pcheck h1 {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.07em;
  margin-bottom: 20px;
}

/* 質問ページの h1（元は p.q_txt）と、結果ページの h1（元は h2.h2_sub_q）は
   HTML側にインラインstyleが入っているため、スマホ用の上書きだけ !important で効かせる。
   .pcheck の中だけに閉じているのでテーマ側には影響しない */
@media screen and (max-width: 768px) {
  .pcheck h1 { font-size: 24px; }
  .pcheck h1.q_txt { padding: 0 !important; font-size: 14px; }
  .pcheck h1.h2_sub_q { font-size: 24px !important; }
}

/* 追従の「今すぐ診断する」ボタン。
   楽天版は index.min.js（jQuery）で出し入れしていたので、素のJSで置き換えた。
   JS が .is-visible を付け外しする */
.pcheck .check_footer.is-visible {
  display: block;
}

/* 診断の途中情報が無いときの案内文（本店で追加した安全策） */
.pcheck .pcheck-notice {
  color: #c00;
  font-size: 14px;
  margin-bottom: 20px;
}


/* ============================================================
   解説ページ（骨格3タイプ／パーソナルカラー4タイプ）用
   楽天GOLD ps_*.html / pc_*.html が使っていたルール
   出典：feature/personalcheck/css/style.css をそのまま .pcheck 配下にスコープ
   ============================================================ */

.pcheck .exp_txt_straight a {
  color: #74a4e6;
}
.pcheck .exp_txt_wave a {
  color: #f08e81;
}
.pcheck .exp_txt_natural a {
  color: #c1d47a;
}
.pcheck .p_style_color {
  margin-bottom: 0px;
}
.pcheck .ps_tipe_main {
  width: 100%;
  max-width: 660px;
  margin-bottom: 20px;
}
.pcheck .ps_tipe_image {
  /* フレックス */
  display: flex;
  justify-content: center;
  gap: 20px; /* 余白 */
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .pcheck .ps_tipe_image {
    gap: 7px; /* 余白 */
  }
}
.pcheck .btn_ps_tipe_image {
  font-size: 12px;
  width: fit-content;/* 文字数に合わせて幅を変化 */
  background:#fff;
  border: 2px solid #000; /* 境界線を実線で指定 */
  border-radius: 50px; /* ボックスの四つ角を丸くする */ 
  margin: 0;
  padding: 3px 20px;
}
.pcheck .ps_tipe_h2 {
  font-size: 22px;
}
@media screen and (max-width: 768px) {
  .pcheck .ps_tipe_h2 {
    font-size: 17px;
  }
}
.pcheck .niau_box_top {
  width: fit-content;/* 文字数に合わせて幅を変化 */
  background-color: #000;
  text-align: center; /* テキストを中央寄せに指定 */
  border-radius: 20px 20px 0 0; /* ボックスの四つ角を丸くする */ 

  margin: auto;
  padding: 8px 0 5px;
}
.pcheck .niau_box_top p {
  color: #fff;
  margin: 0;
  padding: 0 30px;
}
.pcheck .ps_tipe_txt {
  margin-bottom: 100px;
}
.pcheck .niau_box {
  width: 100%;
  max-width: 700px;
  background-color: #fff;
  border: 2px solid #000; /* 境界線を実線で指定 */
  text-align: center; /* テキストを中央寄せに指定 */

  border-radius: 20px; /* ボックスの四つ角を丸くする */ 

  margin: auto;
  padding: 50px 0;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .pcheck .niau_box {
    width: 95%;
  }
}
.pcheck .btn_itemlink {
  font-size: 12px;
  color: #fff;
  width: 70%;
  background: #000;
  border-radius: 50px; /* ボックスの四つ角を丸くする */ 
  margin: auto;
  padding: 5px 0;
}
.pcheck .btn_itemlink p {
  margin: 0;
}
.pcheck .btn_itemlink a {
  color: #fff;
}
.pcheck .niau_design_img {
  /* フレックス */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px; /* 余白 */
}
.pcheck .niau_design_img img {
  width: 190px;
  margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
  .pcheck .niau_design_img img {
    width: 140px;
  }
}
.pcheck .niau_design_img p {
  margin-bottom: 10px;
}
.pcheck .niau_pattern_img {
  /* フレックス */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 20px; /* 余白 */

  padding: 0 100px;
}
@media screen and (max-width: 768px) {
  .pcheck .niau_pattern_img {
    padding: 0px;
  }
}
.pcheck .niau_pattern_img img {
  width: 180px;
}
@media screen and (max-width: 768px) {
  .pcheck .niau_pattern_img img {
    width: 120px;
  }
}
.pcheck .niau_color img {
  max-width: 500px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .pcheck .niau_color img {
    width: 80%;
  }
}
.pcheck .pickup_sam {
}
.pcheck .pickup_sam p {
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 10px;
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .pcheck .pickup_sam p {
    font-size: 16px;
  margin-top: 20px;
  padding-bottom: 10px;
  }
}
.pcheck .pickup_sam h2 {
  margin-bottom: 10px;
  font-size: 16px;
}
.pcheck .head-border {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}
.pcheck .head-border:before,
.pcheck .head-border:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 50px;
  height: 2px;
  background-color: #000;
}
@media screen and (max-width: 768px) {
  .pcheck .head-border:before,
  .pcheck .head-border:after {
    content: '';
    position: absolute;
    top: 30%;
    display: inline-block;
    width: 50px;
    height: 2px;
    background-color: #000;
  }
}
.pcheck .head-border:before {
  left: 0;
}
.pcheck .head-border:after {
  right: 0;
}
.pcheck .sam_box {
  margin: auto;
  /* padding: 0 0px; */
  display: flex;
  gap: 10px;
  width: 620px;
  height: 190px;
  overflow-x: scroll;
  margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
  .pcheck .sam_box {
    width: 90%;
    height: 130px;
  }
}
.pcheck .sam_box div {
  width: 170px;
  flex-shrink: 0;
  /* white-space: nowrap; */
}
@media screen and (max-width: 768px) {
  .pcheck .sam_box div {
    width: 120px;
  }
}
.pcheck .niau_code_box {
  width: 100%;
  max-width: 1000px;
  background-color: #fff;
  border: 2px solid #000; /* 境界線を実線で指定 */
  text-align: center; /* テキストを中央寄せに指定 */

  border-radius: 20px; /* ボックスの四つ角を丸くする */ 

  margin: auto;
  padding: 50px 0;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .pcheck .niau_box {
    width: 95%;
  }
}
.pcheck .code_box {
  margin: auto;
  /* padding: 0 0px; */
  display: flex;
  gap: 10px;
  width: 90%;
  max-width: 1400px;
  height: 460px;
  overflow-x: scroll;
}
@media screen and (max-width: 768px) {
  .pcheck .code_box {
    height: 240px;
  }
}
.pcheck .code_box div {
  width: 270px;
  flex-shrink: 0;
  /* white-space: nowrap; */
}
@media screen and (max-width: 768px) {
  .pcheck .code_box div {
    width: 140px;
  }
}
.pcheck .niau_code_box h3 {
  width: 90%;
  margin: auto;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  padding-bottom: 7px;
  padding-top: 30px;
}
@media screen and (max-width: 768px) {
  .pcheck .niau_code_box h3 {
    font-size: 14px;
  }
}
.pcheck .niau_code_box h2 {
  width: 90%;
  margin: auto;
  font-size: 28px;
  font-weight: bold;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .pcheck .niau_code_box h2 {
    font-size: 22px;
  }
}
.pcheck .niau_code_box p {
  width: 90%;
  margin: auto;
  font-size: 12px;
  text-align: right;
  padding: 0;
  padding-bottom: 5px;
}
.pcheck .code_keyword {
  padding-top: 10px;
  width: 90%;
  margin: auto;
  margin-bottom: 20px;
  /* フレックス */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* justify-content: center; */
  gap: 20px 20px; /* 余白 */
}
@media screen and (max-width: 768px) {
  .pcheck .code_keyword {
  gap: 10px; /* 余白 */
  margin-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  .pcheck .code_keyword .btn_ps_tipe_image {
    padding: 3px 10px;
  }
}
.pcheck .code_keyword p {
  width: 100%;
  font-size: 18px;
  padding-bottom: 0px;
}
@media screen and (max-width: 768px) {
  .pcheck .code_keyword p {
    font-size: 14px;
  }
}
.pcheck .code_txt p {
  text-align: left;
  font-size: 16px;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .pcheck .code_txt p {
    font-size: 14px;
  }
}
.pcheck .code_subtxt p {
  font-size: 12px;
  margin-bottom: 0px;
}
@media screen and (max-width: 768px) {
  .pcheck .code_subtxt p {
    font-size: 9px;
    padding-top: 5px;
  }
}
.pcheck .pickup_sk {
}
.pcheck .pickup_sk p {
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 10px;
  margin-top: 50px;
}
.pcheck .sk_box {
  margin: auto;
  /* padding: 0 0px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 620px;
  margin-top: 10px;
  margin-bottom: 25px;
}
.pcheck .sk_box div {
  width: 140px;
  /* flex-shrink: 0; */
}
@media screen and (max-width: 768px) {
  .pcheck .sk_box {
    width: 95%;
    /* height: 130px; */
  }
}
@media screen and (max-width: 768px) {
  .pcheck .sk_box div {
    width: 90px;
  }
}
.pcheck .codeset {
  width: 625px;
  margin: auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .pcheck .codeset {
    max-width: 100%;
  }
}
.pcheck .codeset h2 {
  font-size: 18px;
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #000;/*上線*/
  border-bottom: solid 3px #000;/*下線*/
}
.pcheck .codeset p {
  margin-bottom: 30px;
}
.pcheck .codeset_sam {
  /* フレックス */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 20px; /* 余白 */

  margin-bottom: 150px;
}
.pcheck .codeset_sam img {
  width: 300px;
}
.pcheck .hukumania_box {
  position: relative; /* point-titleをずらす */
  width: 100%;
  max-width: 800px;
  background-color: #fff;
  border: 1px solid #000; /* 境界線を実線で指定 */
  text-align: center; /* テキストを中央寄せに指定 */

  border-radius: 20px; /* ボックスの四つ角を丸くする */ 

  margin: auto;
  padding: 30px 30px 20px;
  margin-bottom: 80px;
}
.pcheck .hukumania_box_last {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .pcheck .hukumania_box {
    padding: 20px 20px 10px;
  }
}
.pcheck */

.hukumania_flex {
  /* フレックス */
  display: flex;
  align-items: center; 
  gap: 0px 20px; /* 余白 */
}
@media screen and (max-width: 768px) {
  .pcheck .hukumania_flex {
    gap: 0px 10px; /* 余白 */
  }
}
.pcheck .hukumania_flex img {
  width: 140px;
}
@media screen and (max-width: 768px) {
  .pcheck .hukumania_flex img {
    width: 100px;
  }
}
.pcheck .hukumania_box h2 {
  font-size: 16px;
  line-height: 1.5em
}
@media screen and (max-width: 768px) {
  .pcheck .hukumania_box h2 {
    margin-bottom: 10px;
  }
}
.pcheck .hukumania_box p {
  font-size: 13px;
  margin-bottom: 0px;
  padding: 0;
}
.pcheck .point-title {
  position: absolute;
  padding: 2px 10px;
  left: 30px;
  top: -13px; /* タイトルの位置を調整 */
  color: #fff; /* タイトルの文字色 */
  font-weight: bold;
  font-size:0.9em; /* タイトルの文字サイズ */
  background-color: #000;
}
@media screen and (max-width: 768px) {
  .pcheck .point-title {
    left: 20px;
  }
}
.pcheck .card_item .hukumania_title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.pcheck .card_item .hukumania_desc {
  color: #999;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
@media screen and (max-width: 768px) {
  .pcheck .card_item .hukumania_desc {
    -webkit-line-clamp: 2;
  }
}
.pcheck .hukumania_more {
  width: 100%;
  margin: auto;
  max-width: 960px;
  text-align: right;
}
.pcheck .hukumania_more p {
  font-size: 12px;
  padding-right: 100px;
}
@media screen and (max-width: 768px) {
  .pcheck .hukumania_more p {
    padding-right: 20px;
  }
}
.pcheck .stylecheck_footer {
  padding-top: 120px;
  text-align: center;
  padding-bottom: 110px;
  margin-bottom: 0;
}
.pcheck .stylecheck_footer .btn_black_b {
  max-width: 600px;
}
.pcheck .stylecheck_footer  h2 {
  font-size: 18px;
  margin-top: 100px;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .pcheck .stylecheck_footer  h2 {
    font-size: 15px;
    margin-top: 80px;
  }
}
.pcheck .stylecheck_footer p {
  font-weight: normal;
  padding: 0;
}
.pcheck .stylecheck_footer .p_style_3type {
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .pcheck .stylecheck_footer .p_style_3type {
    gap: 10px;
  }
}
.pcheck .stylecheck_footer .p_style_3type img {
  width: 200px;
  background-color: #fff;
  padding: 20px 40px;
  border-radius: 10px; /* ボックスの四つ角を丸くする */ 
  box-shadow: 3px 3px 5px #999;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .pcheck .stylecheck_footer .p_style_3type img {
    width: 100%;
    padding: 5px 15px;
  }
}
.pcheck .stylecheck_footer .p_color_4type {
  margin-bottom: 0;
  gap: 5px 20px;
}
.pcheck .stylecheck_footer .p_color_4type img {
  width: 200px;
  /* background-color: #fff; */
  /* padding: 20px 40px; */
  border-radius: 10px; /* ボックスの四つ角を丸くする */ 
  box-shadow: 3px 3px 5px #999;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .pcheck .stylecheck_footer .p_color_4type img {
    width: 100%;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  .pcheck .p_color_4type_in {
    width: 40%;
  }
}
.pcheck .stylecheck_footer .return {
  margin-top: 100px;
}
@media screen and (max-width: 768px) {
  .pcheck .stylecheck_footer .return {
    margin-top: 50px;
  }
}
.pcheck .bn_fukumania img {
  width: 60%;
  max-width: 350px;
  margin: 50px 0;
}
@media screen and (max-width: 768px) {
  .pcheck .btn_return_pspc {
    width: 80%;
  }
}
.pcheck .btn_itemlink {
  display: none;
}
.pcheck .hukumania_box {
  display: none;
}
.pcheck .hukumania_more {
  display: none;
}
.pcheck /* .codeset {
  display: none;
}