@charset "UTF-8";
div, p, ul, li, table, table tr td, table tr th, table tr td, dl, dt, dd, img, nav, footer {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 62.5%;
  /*10px*/ }

body {
  font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "Noto Sans Japanese", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  text-align: center;
  line-height: 1.8;
  word-break: break-all;
  font-size: 1.6em;
  color: #2a2a2a;
  background: #fce9ed;
  -webkit-text-size-adjust: 100%;
  /*スマホを横向きにした時用*/
  background-size: 100%; }

img {
  user-select: none;
  /* CSS3 */
  -moz-user-select: none;
  /* Firefox */
  -webkit-user-select: none;
  /* Safari、Chromeなど */
  -ms-user-select: none;
  /* IE10かららしい */ }

/* Page Top
=================================== */
#page-top {
  position: fixed;
  bottom: 16px;
  right: 15px;
  display: block;
  z-index: 9999;
  /*
	background-color: rgba(255, 255, 255, 0.8); 
	border-radius: 80%;
	border: 4px solid #999;
	color: #999;
	width: 50px;
	padding: 13px 10px;
	font-size: 14px;
	text-align: center;
*/
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  behavior: url(PIE.htc);
  width: 70px; }

#page-top a {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #999;
  text-decoration: none; }

#page-top:hover {
  opacity: 0.6;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; }

#main {
  width: 100%;
  margin: 0 auto; }
  #main img {
    width: 100%; }
  #main #top {
    background: url(../img/bg.jpg) repeat-x;
    background-size: 64px;
    background-position: bottom; }
    #main #top h1 {
      width: 100%;
      max-width: 960px;
      margin: 0 auto 30px;
      background-size: 100px; }
  #main #content {
    margin: 0 auto;
    width: 90%;
    max-width: 960px; }
    #main #content h2 {
      width: 35%;
      max-width: 220px;
      margin: 10px auto 20px; }
      #main #content h2:nth-of-type(1) + p {
        font-weight: 700; }
      #main #content h2:nth-of-type(2) {
        margin-top: 50px; }
    #main #content .wrap {
      position: relative;
      background: #FFF;
      padding: 4% 4% 4.5%;
      border-radius: 10px;
      margin-bottom: 50px; }
      #main #content .wrap::after {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        top: 2%;
        right: -4%;
        width: 100%;
        height: 100%;
        background-color: #fce9ed;
        border: 3px solid #FFF;
        border-radius: 10px; }
    #main #content .key {
      width: 100%;
      max-width: 650px;
      margin: 30px auto 10px; }

.note_txt {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  text-align: left;
  font-size: 0.9em; }

ul.note {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding-left: 1.1em; }
  ul.note li {
    text-align: left;
    list-style: disc !important;
    margin-bottom: 0.3em; }
    ul.note li a {
      color: #f44b93; }
      ul.note li a:hover {
        text-decoration: none; }

/* footer
=================================== */
footer {
  width: 100%;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.5; }

footer .footer-inner {
  width: 100%;
  margin: 0 auto; }

footer .copyright {
  clear: both;
  padding: 35px 0; }

footer .copyright a, footer .copyright .attention {
  display: block;
  color: #333333;
  text-decoration: none; }

footer .copyright a:hover {
  opacity: 0.5;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s; }

.sns-archive {
  background-color: transparent !important; }

/* -------------------------------------------------------------------------------------------------------------------
haro_root_element                                                                                              
------------------------------------------------------------------------------------------------------------------- */
div#haro_root_element {
  overflow: hidden; }

/* -------------------------------------------------------------------------------------------------------------------
Tablet&SP                                                                                                          
------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1099px) {
  .pc {
    display: none; }
  .sp {
    display: block; } }

/* -------------------------------------------------------------------------------------------------------------------
961px-                                                                                                             PC
------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1100px) {
  .pc {
    display: block; }
  .sp {
    display: none; }
  #main #top h1 {
    margin: 0 auto 80px; }
  #main #content {
    width: 100%; }
    #main #content h2 {
      margin: 10px auto 30px; }
      #main #content h2:nth-of-type(1) + p {
        font-size: 24px; }
      #main #content h2:nth-of-type(2) {
        margin-top: 100px; }
    #main #content .wrap {
      padding: 40px 40px 60px;
      border-radius: 12px;
      margin-bottom: 100px; }
      #main #content .wrap::after {
        top: 20px;
        right: -25px;
        border: 4px solid #FFF;
        border-radius: 12px; }
  .note_txt {
    text-align: center; }
  .sns-archive {
    width: 960px;
    margin: 0 auto; }
  #page-top {
    width: 100px; } }