@charset "UTF-8";
/* =====================
  reset
===================== */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (min-width: 1030px) {
  html{
    overflow: auto!important;
    margin-right: 0!important;
  }
}

article, header, footer, aside, figure, figcaption, nav, section { 
  display:block;
}
body {
  font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	background: #fff;
  color: #000;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
	position: relative;
}
ol, ul {
  list-style: none;
  list-style-type: none;
}
img {
  vertical-align: top;
  max-width: 100%;
  line-height: 1;
  font-size: 0;
}
.pc_disnone {
  display: none;
}

.t_center { text-align: center!important;}
.content {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.colBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
  justify-content: space-between;
}

._pc {display: none;}
._sp {display: block;}
@media screen and (min-width: 750px) {
	._pc {display: block;}
	._sp {display: none;}
}

.btn a {
	display: inline-block;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	transition: 0.2s;
}
.btn a:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
}
@media screen and (max-width: 768px) {
	.btn a:hover {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1);
	}
}
@media screen and (max-width: 750px){
	body {
		background: #fff;
	}
	.pc_disnone {
		display: block;
	}
	.sp_disnone {
		display: none;
	}
	.content {
		width: 90%;
		max-width: initial;
            /*overflow:hidden;*/
	}
       img{   
		width: 100%;   
            height: auto;
      }      
}

/* =====================
  header
===================== */
header {
      width: 100%;
      height: 70px;
      z-index: 200;
      background:#138141;
}
header .content {
	max-width: 100%;
	margin: 0 auto;
      width: 90%;
}
header .logo {
        position: absolute;
        top: 15px;
        left: 0;
        width: 162px;
}
header nav {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 300;
}
header .menu {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 10;
      width: 56px;
      padding: 16px;
}
header nav ul {
      display: none;
      position: absolute;
      left: 0px;
      top: 0;
      width: 100%;
      padding: 15px 10px 10px;
      background: #fff;
      border: 1px solid #eee;
      text-align: center;
}
header nav ul li a {
      display: block;
      padding: 15px 20px 12px;
      font-size: 13px;
      border-bottom: 1px dotted #eee;
      color: #000;
      text-decoration: none;
}
header nav ul li:last-child a {
      border: none;
}
@media screen and (max-width: 750px) {
      header {
            height: 44px;
            z-index: 2;
            position: relative;
            top: 0;
            left: 0;
      }
      header .logo {
            position: relative;
            top: 15px;
            left: 10px;
            width: 82px;
            height: 44px;
      }
}

/* =====================
  main
===================== */
main {
      
}
#main {
      position: relative;
}
@media screen and (max-width: 750px) {
      main {
            padding-top: 0;
      }
}

/* =====================
  breen_h2
===================== */
h2.breen_h2 {
      text-align: center;
      color:#fff;
      background:#138141;
      font-size: 27px;
      font-weight: 700;
      border-radius : 30px;
      width: 370px;
      line-height: 2.4;
      margin: 0 auto;
      letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
      h2.breen_h2 {
            font-size: 18px;
            font-weight: 700;
            width: 70%;
      }
}



/* =====================
  mainVisual
===================== */

#mainVisual_box {
      background:url("../img/main_bg_border.png") repeat-x center bottom #138141;
      background-size: auto 41px ;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 70px;
	text-align: center;
	z-index: 1;

}
#mainVisual_box .mainVisual{
      width: 90%;
      padding: 0 5px;
      margin: 0 auto;
      box-sizing: border-box;
}
#mainVisual_box .mainVisual picture img{
      width: 100%;
      height: auto;
}
@media screen and (max-width: 750px) {
      #mainVisual_box {
            background:none;
            background-color: #138141;
      	padding: 10px 0 50px;
      }
      #mainVisual {
            background: none;
            height: auto;
            max-width: initial;
            margin: 0 auto 30px;
      }
}

/* =====================
  special-main
===================== */
#special-main {
	margin: 0;
}
#special-main .content {
	text-align: center;
      margin-bottom: 90px;
}
#special-main .lead {
      width: 650px;
	margin: 90px auto 25px ;
}
#special-main .lead + p {
      font-size: 14px;
	margin-bottom: 85px;
}

@media screen and (max-width: 750px) {
      #special-main .content {
            text-align: center;
            margin-bottom: 30px;
      }
      #special-main .lead {
            width: 100%;
            margin: 50px auto 25px ;
      }
      #special-main .lead + p {
            font-size: 10px;
            margin:0 auto 40px;
            text-align: center;
            width: 78.66vw;
      }
}

/* =====================
  present
===================== */
#present {
	width: 100%;
	margin: 0 auto;
      background:url("../img/present_bg.jpg") ;
      background-size: auto 100% ;
      background-position: center top ;
      background-repeat: no-repeat ;
      background-color: #f3efec ;
	padding: 0;
	text-align: center;
}
#present .content {
      background:url("../img/sec01_border_top.png"),url("../img/sec01_border_bottom.png") ;
      background-size: auto 27px, auto 27px ;
      background-position: center top, center bottom ;
      background-repeat: repeat-x, repeat-x ;
	width: 100%;
	margin: 0 auto 50px;
      max-width: 100%;
      padding: 60px 0 95px;
}
#present h2 {
      padding: 0 30px;
	margin: 0 auto;
      line-height: 1;
      max-width: 890px;
}

@media screen and (max-width: 750px) {
      #present h2 {
            margin: 0 auto 12px;
            max-width: 100%;
            box-sizing: border-box;
      }
      #present .content {
            background:url("../img/sec01_border_top.png"),url("../img/sec01_border_bottom.png") ;
            background-size: auto 13px, auto 13px ;
            background-position: center top, center bottom ;
            background-repeat: repeat-x, repeat-x ;
            padding: 30px 0 40px;
      	margin: 0 auto 30px;
      }
}

/* =====================
  entryInfo
===================== */
#entryInfo {
      margin-top: 86px;
      margin-bottom: 97px;
}
#entryInfo .content {
	text-align: center;
}
#entryInfo .stepBox {
      max-width: 710px;
      padding: 0 30px;
      margin: 0 auto;
}
#entryInfo h2 {
	margin: 0 auto;
	padding-left: 12px;
	text-align: center;
	box-sizing: border-box;
}
#entryInfo .step {
      margin: 47px auto;
}
#entryInfo .step h3{
      background:#138141;
      line-height: 1;
      padding: 15px 0 ;
}
#entryInfo .step h3 img{
      max-width: 95px;
}
#entryInfo .step_cont{
      background:#efdebf;
      padding: 30px 0;
}
#entryInfo .step1 .step_cont_img  img{
      max-width: 560px;
}
#entryInfo .step1 .btn  img{
      max-width: 260px;
      margin: 40px 0 20px;
}
#entryInfo .step2 .step_cont_img  img{
      max-width: 485px;
}
#entryInfo .step3 .step_cont_img  img{
      max-width: 500px;
}
#entryInfo .stepBox .comment{
      font-size: 14px;
      margin-top: 30px;
}


@media screen and (max-width: 750px) {
      #entryInfo {
	      height: auto;
	      margin-top: 0;
            margin-bottom: 40px;
	      padding: 30px 0 0 0 ;
      }
      #entryInfo .step {
            margin: 30px auto;
      }
      #entryInfo .stepBox {
            padding: 0 0;
            max-width: 100%;
      }
      #entryInfo .step1 .step_cont_img  img{
            max-width: 90%;
      }
      #entryInfo .step1 .btn  img{
            max-width: 260px;
            margin: 30px 0 10px;
      }
      #entryInfo .step2 .step_cont_img  img,
      #entryInfo .step3 .step_cont_img  img{
                  max-width: 80%;
      }
      #entryInfo .stepBox .comment{
            font-size: 10px;
            margin-top: 0;
      }
}



/* =====================
  Guide_bg
===================== */
#Guide_bg{
      background:#fff7ec;
}
/* =====================
  entryGuide
===================== */

#entryGuide_cont h2 {
      letter-spacing: 0.3em;
}
#entryGuide_cont.content {
	width: 100%;
	max-width: 1040px;
	padding: 40px 0 0  0;
	margin: 0 auto;
	font-size: 19px;
}
#entryGuide_cont.content dl {
      margin-top: 45px;
	width: 100%;
      font-size: 14px;
}
#entryGuide_cont.content dt {
	width: 140px ;
	line-height: 2;
	float: left;
}
#entryGuide_cont.content dd {
	padding-left: 140px;
	line-height: 2;
	margin-bottom: 1.5em;
}
#entryGuide_cont.content dd:after{
      display: block;
      content: "";
      clear: both;
}
#entryGuide_cont.content dd ul li span.pc_space {
      display: block;
      padding-left: 6.5em;
}

@media screen and (max-width: 750px) {
      #entryGuide_cont.content {
            width: 90%;
	      max-width: initial;
	      padding: 40px 0 0  0;
      	margin: 0 auto;
      }
      #entryGuide_cont.content dl {
            margin-top: 25px;
	      width: 100%;
            font-size: 12px;
      } 
      #entryGuide_cont.content dt {
	      width: 110px ;
	      line-height: 2;
	      float: left;
      }
      #entryGuide_cont.content dd {
	      padding-left: 110px;
	      line-height: 2;
	      margin-bottom: 1em;
      }
      #entryGuide_cont.content dd ul li span.pc_space {
            display: inline;
            padding-left: 0;
      }
      #entryGuide_cont.content dd ul li span.sp_space {
            display: block;
            padding-left: 1em;
            text-indent: 0;
      }
      #entryGuide_cont.content dd ul li  {
	      text-indent: -1em;
	      padding-left: 1em;
      }
}


/* =====================
  agreement
===================== */

#agreement .content {
	width: 100%;
	max-width: 1040px;
	padding: 45px 0 110px;
	margin: 0 auto;
	font-size: 15px;
}
#agreement .content h3{
      background:#138141;
	font-size: 27px;
      color:#fff;
      text-align :center;
      padding: 15px 0;
      line-height: 1;
      font-weight: 700;
      letter-spacing: 0.3em;
}
#agreement .content dl {
      background:#efdebf;
      padding: 44px 53px;
}
#agreement .content dt {
	padding-top: 1.5em;
}
#agreement .content dt:first-child{
	padding-top: 0;
}
#agreement .content dd.rule_note {
	padding-bottom: 1.5em;
}
#agreement .content dd ul.notes li {
	margin-left: 1em;
}
#agreement .content dd ul.notes li {
	text-indent: -1em;
	padding-let: 1em;
}
#agreement .content dd ul.mbttom {
	margin-bottom: 1em;
}
@media screen and (max-width: 750px){
      #agreement {
            width: 100%;
            max-width: initial;
            margin: 0 auto 0;
            padding: 0 0 0;
      }
      #agreement .content {
            width: 90%;
            max-width: initial;
            padding: 2em 0 30px;
            margin: 0 auto;
            font-size: 12px;
      }
      #agreement .content h3{
	      font-size: 18px;
      }
      #agreement .content dl {
            background:#efdebf;
            padding: 30px;
      }
}
  
/* =====================
  footer
===================== */
footer {
  max-width: 880px;
  margin: 0 auto;
  padding: 37px 15px 100px;
  font-size: 13px;
  color: #221815;
  line-height: 1.7;
}
footer p {
  margin: 0 0 15px 21px;
}
footer p img {
  float: right;
  margin: 0 0 20px 60px;
}
@media screen and (max-width: 750px){
footer {
  padding: 25px;
  font-size: 10px;
}
footer p {
  margin: 0 0 15px;
}
footer p img {
  margin: 0 0 10px 20px;
}
}


.swing {
  animation-name: swing;
  animation-duration: 1s;
  animation-delay: 3s;
  animation-iteration-count: 2;
}
@-webkit-keyframes swing {
  0%,100% { 
    -webkit-transform-origin: bottom center; 
  }
  10% { -webkit-transform: rotate(-15deg); }
  20% { -webkit-transform: rotate(10deg); }
  30% { -webkit-transform: rotate(-5deg); }
  40% { -webkit-transform: rotate(5deg); }
  50% { -webkit-transform: rotate(-3deg); }
  60% { -webkit-transform: rotate(2deg); }
  70% { -webkit-transform: rotate(-2deg); }
  80% { -webkit-transform: rotate(1deg); }
  90% { -webkit-transform: rotate(-1deg); }
  100% { -webkit-transform: rotate(0deg); }
}



/* =====================
  footer
===================== */
@media screen and (max-width: 750px){
	body {
		background: #fff;
	}
	.pc_disnone {
		display: block;
	}
	.sp_disnone {
		display: none;
	}

	
	/* =====================
	  footer
	===================== */
	footer {
	padding: 25px;
	font-size: 10px;
	}
	footer p {
	margin: 0 0 15px;
	}
	footer p img {
	margin: 0 0 10px 20px;
	}
}

/* =====================
  #pageTop
===================== */
#pageTop {
  position: fixed;
  right: 30px;
  bottom: 50px;
  /*transform: translateX(480px)*/
}
@media screen and (max-width: 750px){
#pageTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
}
}