/* ============================================================
   stepAll セクション 再現用スタイル
   元ソース: reset.css / responsive_gs_16col.css / style.css より抜粋・統合
   ============================================================ */


/* ----------------------------------------------------------
   1. RESET（Meyer Reset より stepAll に必要な部分）
   ---------------------------------------------------------- */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div, p, h1, h2, h3, h4, ul, li, span, img {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
  white-space: normal;
  text-align: left;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

ul {
/*  list-style: none;*/
}

img {
  max-width: 100%;
}

a img {
  border: none;
}

a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}


/* ----------------------------------------------------------
   2. 基本設定
   ---------------------------------------------------------- */
body {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-size: 11pt;
  line-height: 1.5em;
  letter-spacing: 0;
  color: #000;
  background: #fff;
}

/* boldにしたい箇所だけW6（太字）フォントに切り替え。
   W6がなければ游ゴシック・メイリオ（どちらもbold対応）にフォールバック */
strong,
.txt-bold {
  font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-weight: bold;
}

/* clearfix */
.clr::after {
  content: "";
  display: table;
  clear: both;
}

/* wrapper */
.col {
  display: block;
  width: 100%;
  max-width: 940px;
  padding: 15px;
  margin: 0 auto;
}


/* ----------------------------------------------------------
   3. SP / PC 表示切り替え（デフォルト：SP）
   ---------------------------------------------------------- */
.spOnly { display: inline; }
.pcOnly { display: none; }


/* ----------------------------------------------------------
   4. stepAll（SP）
   ---------------------------------------------------------- */
.stepAll {
  border: 1px solid #efc5f9;
  border-radius: 5px;
  text-align: left;       /* 親要素からの center 継承をリセット */
  margin-bottom: 10px;
  padding-bottom: 25px;
}

.stepAll > h1 {
  text-align: center;
  padding: 10px;
  background: #B26ABF;
  margin-bottom: 20px;
}

.stepBox {
  width: 90%;
  margin: 0 auto 5px auto;
  background: #fff;
  border: 1px solid #dfcee1;
}

/* SP では h2（ステップ番号画像）は pcOnly で非表示のため幅指定のみ */
.stepBox h2 {
  width: 15%;
}

.stepBoxR {
  padding: 15px 10px;
}

.stepBoxR h3 {
  border-bottom: 2px solid #833b8f;
  margin-bottom: 10px;
}

.stepBoxR ul.ul01 {
  list-style-type: circle!important;
  list-style-position: inside!important;
  padding-left: 0;
  margin: 5px 0 5px 20px;
}
.bullet-points{
  margin: 5px 0 5px 20px;
}

.stepBoxR ul.ul01 li {
  font-size: 0.95em;
  font-weight: normal;
  line-height: 1.5;
  margin-bottom: 16px;
}
.stepBoxR ul.ul01 li {
  display: list-item !important;
  list-style-type: circle !important;
}

.stepBoxR ul.ul01 li strong {
  font-weight: bold;
}

.stepBoxR ul.ul01 li.color {
  background: #fff;
  border: 1px solid #dbdbdb;
  padding: 10px;
  text-align: left;
  line-height: 1;
}

.stepBoxR ul.ul01 li.color img {
  margin-bottom: 2px;
}

p.step_cyuui {
  font-size: 0.80em;
  line-height: 1.6;
  color: #666;
}

.step_yajirushi {
  text-align: center;
  margin-bottom: 5px;
}


/* ----------------------------------------------------------
   5. PC（880px 以上）
   ---------------------------------------------------------- */
@media (min-width: 880px) {

  body {
    font-size: 14px;
/*    line-height: 2.25em;*/
    background: #fff;
  }

  .col {
    padding: 15px 0;
    margin: 0 auto;
  }

  /* SP/PC 表示切り替え */
  .spOnly { display: none; }
  .pcOnly { display: inline; }

  /* stepBox：PC では h2 を左フロート、stepBoxR を右に */
  .stepBox h2 {
    float: left;
    width: 15%;
  }

  .stepBoxR {
    float: left;
    width: 80%;
    padding: 20px 0 15px 0;
  }

  .stepBoxR h3 {
    border-bottom: none;
    margin-bottom: 0;
  }

  .stepBoxR ul.ul01 li.color {
    text-align: center;
  }

  .stepBoxR ul.ul01 li.color img {
    margin-bottom: 0;
    margin-right: 4px;
  }
	
}

/*応募条件*/
.condition-section .condition-wrapper {
      display: flex;
      justify-content: center;
      padding: 1.5rem 0;

    }
 
    .condition-section .condition-box {
      width: 100%;
      max-width: 940px;
      border: 1px solid #efc5f9;
	  border-radius: 5px;
      padding: 1.5rem 1.5rem;
      max-height: 340px;
      overflow-y: auto;
      box-sizing: border-box;
/*	  background: #fff url(../img/nagare_bg.jpg) repeat-x left bottom;*/
    }
 
    .condition-section .condition-box h2 {
      color: #933591;
      font-size: 2em;
      font-weight: 800;
      margin: 0 0 1rem;
/*	  border-bottom: 2px solid #999;*/
	  background: #ECDCEE;
	  padding: 0.1em 0.5em;
	  line-height: 1.5;
		text-align: center;

    }
 
    .condition-section .condition-box p {
      font-size: 12px;
      line-height: 1.6;
      margin: 0;
    }
 
 
    @media (max-width: 768px) {
      .condition-section .condition-box {
        max-width: none;
      }
 
      .condition-section .condition-box h2 {
        font-size: 1.28em;
      }
    }

/*ご応募に関する注意点*/
.caution-section .caution-wrapper {
      display: flex;
      justify-content: center;
      padding: 1.5rem 0;
    }
 
    .caution-section .caution-box {
      width: 100%;
      max-width: 940px;
      border: 1px solid #933591;
      padding: 1.5rem 1.5rem;
      max-height: 340px;
      overflow-y: auto;
      box-sizing: border-box;
    }
 
    .caution-section .caution-box h2 {
      color: #933591;
      font-size: 2em;
      font-weight: 800;
      margin: 0 0 1rem;
	  border-bottom: 2px solid #933591;
	  line-height: 1.5;

    }
 
    .caution-section .caution-box p {
      font-size: 12px;
      line-height: 1.6;
      margin: 0;
    }
 
    .caution-section .caution-box::-webkit-scrollbar {
      width: 6px;
    }
 
    .caution-section .caution-box::-webkit-scrollbar-track {
      background: transparent;
    }
 
    .caution-section .caution-box::-webkit-scrollbar-thumb {
      background: #833b8f55;
      border-radius: 3px;
    }
	.for-yourcolor{
		  margin: 5px 0 5px 20px;
	}
	.for-yourcolor .colorchart{
		display: block;
		width: 380px;
		height: auto;
		margin: 20px auto; 
	}		
	.condition-section .condition-box ul li {
	  list-style-type: circle;
	  list-style-position: outside;
	  margin-left: 20px;
	  display: list-item;
	}
	.kome{margin-left: 20px;}

@media (max-width: 768px) {
      .caution-section .caution-box {
        width: 90%;
        max-width: none;
      }
 
      .caution-section .caution-box h2 {
        font-size: 1.28em;
      }
	.for-yourcolor .colorchart{
		display: block;
		width: 100%;
		height: auto;
		margin: 20px auto; 
	}		
    }