/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

    html {
      font-size: 62.5%;
    }

    ::-moz-selection {
        background-color: #17171C;
        text-shadow: none;
        color: #fff;
    }

    ::selection {
        background-color: #17171C;
        text-shadow: none;
        color: #fff;
    }

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td {
      margin: 0;
      padding: 0;
    }

    ul, li {
        list-style: none;
    }

    audio,
    canvas,
    iframe,
    img,
    svg,
    video {
        vertical-align: middle;
    }

    div, iframe {
      max-width: 100%;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }

    textarea {
        resize: vertical;
    }

    .browserupgrade {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
    }                

    /*----- iOS Safri 対策 ----*/
    /*電話番号リンクを自動で追加しない*/
    .disable-auto-tel a {
      color: inherit;
      text-decoration: none;
      pointer-events: none;/*クリックを無効化する*/
    }

/* Base ---------------------------------------- */

    body {
        font-family: "游ゴシック","YuGothic","游ゴシック Medium","Yu Gothic Medium","Yu Gothic","ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Std","Hiragino Kaku Gothic Pro","Roboto","Open Sans","Noto Sans JP","Hiragino Sans","メイリオ","ヒラギノ角ゴ Pro W3","-apple-system","blinkMacSystemFont","sans-serif";
		line-height: 1.6;
		text-align: justify;
		background-color: #fff;
		font-size: 16px;
		letter-spacing: .12em;
		color: #333;
		font-feature-settings: "palt";	
				
    }

    h1, h2 {
        padding: 0;
        margin: 0;
    }

    ul, li {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    img {
        width: 100%;
        height: auto;
    }

    p {
        margin: 50px 100px;
        font-size: 0.9em;
    }

    a {
        color: #09F;
    }

    a:hover {
        text-decoration: none;
    }
    
    .wrap {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
    }

    .inner {
      padding: 5% 0;
    }

    h1, h2, h3, h4 {
      line-break: strict;
    }
    
@media screen and (max-width: 767px) {

    body {
        width: 100%;
    }

    .wrap {
        width: 94%;
        margin: 0 3%;
    }

    img {
        width: 100%;
        height: auto;
    }

    p {
        margin: 7% 3%;
    }

    p br {
        display: inline;
    }

  .inner {
        padding: 10% 0;
  }
  
}

/* text ----------------------------------------- */
    
    .fsM {
      font-size: 1.5em;
    }
    .fsS {
      font-size: 0.8em;
    }
    .fsG{
        font-size: 0.6em;
    }

    .fsSS {
      font-size: .75em;
    }

    .center {
      text-align: center;
    }

    .bold {
      font-weight: bold;;
    }

    .underline {
      text-decoration: underline;
    }

	.underline {
		text-decoration: underline; /* 下線 */
		text-decoration-thickness: 0.5em; /* 線の太さ */
		text-decoration-color: rgba(255, 255, 0, 0.4); /* 線の色 */
		text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
		text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
	}

    .underline2{
      border-bottom: solid 1px;
        padding: 24px 0;
        margin: 0 4% 5%;
    }
    .yellow {
      color: #f6ff0c;
    }

    .red {
      color:#d50e46;
    }

    .gold {
      color:#caa24b;
    }
    
    .green {
      color:#2596a6;
    }

    .marker {
      background: linear-gradient(transparent 70%, #f6ff0c 70%);
    }

/* ttl ----------------------------------------- */	
    
    .ttl{
        text-align: center;
        position: relative;
        z-index: 10;
    }
    
    .ttl h2{
        display: inline;
        font-family: 'Oswald', sans-serif;
		font-weight: 500;
        font-size: 3.5em;
        letter-spacing: 0.1em;
        line-height: 0.8em;
    }
    
    .ttl h2 span{
        font-size: 0.4em;
    }
    
    .profile .ttl{
        text-align: left;
    }
    
    .profile .ttl h2{
        display: inline;
        font-family: 游ゴシック体, "Yu Gothic", YuGothic, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
		font-weight: bold;
        font-size: 3.5em;
        letter-spacing: 0.1em;
        line-height: 0.8em;
        color: #fff;
    }
    
    .faq .flex_box .ttl{
        margin: 0 0 5%;
    }
    
    .faq .flex_box .ttl h2{
        font-size: 2.0em;
    }

    .ttl h3{
        margin: 4% 0;
        font-size: 2.5em;
        line-height: 1.6em;
    }
    
    .ttl h3 span{
        font-size: 0.5em;
    }
    
    .ttl h4{
        color: #fff;
        margin: 0 0 3%;
    	font-weight: bold;
    }

    .exp h3,
    .faq1 h3,
    .faq2 h3,
    .faq3 h3{
        color: #ff758d;
		text-align: center;
  		font-size: 30px;
    }
    

@media screen and (max-width: 767px) {

    .ttl h2,
    .faq1 .ttl h2,
    .faq2 .ttl h2,
    .faq3 .ttl h2{
        font-size: 2.5em
    }
    
    .profile .ttl h2{
        font-size: 2.0em
    }
    
    .ttl h3{
        margin: 2% 0;
        font-size: 1.2em;
        line-height: 1.7em;
    }
       
    .ttl h4{
        font-size: 0.8em;
    }

}

@media screen and (max-width: 480px) {

    .ttl h3{
        margin: 2% 0 5%;
        font-size: 1.1em;
    }
    .ttl h3 span {
        font-size: 0.7em;
    }
    
    .profile .ttl h3{
        font-size: 0.8em;
    }
}

/* flex ----------------------------------------- */	   
    
    .flex_box{
    	flex-wrap: wrap;
		display: flex;
		justify-content: space-between;
        position: relative;
        z-index: 10;
        margin: 0;
    }
    
    .exp .flex_box{
        margin: 50px 100px;
    }
    
/*    .content .flex_box{
        background: #fff;
        border-radius: 15px;
        padding: 5%
    }*/
    
    .exp .flex_box .text{
        width: 40%;
        font-size: 0.9em;
        font-weight: bold;
    }
    .exp .flex_box .img{
        width: 55%;
    }
      
    
@media screen and (max-width: 767px) {

     .flex_box{
        display: block;
    }
    
    .merit .flex_box{
		justify-content: center;
    }
    
    .content .flex_box{
        padding: 5%;
        margin: 2% !important;
    }
    
    .merit .flex_box .item{
        width: 100%;
        margin: 3% 0;
    }
    
    .merit .flex_box .item .car{
        font-size: 0.8em;
    }
        
	 .merit .ttl{
        text-align: center;
        position: relative;
        z-index: 10;
		padding: 6% 0 2%;
    }
	
}

@media ( min-width : 767px ){

  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
  
}

@media (max-width: 767px) {

  .sp {
    display: block;
  }
  .pc {
    display: none !important;
  }
  
}

/* header ----------------------------------------- */

    header {
      background-color: rgba(255,255,255,0);
      position: fixed;
      width: 100%;
      z-index: 100;
    }
    .header-inner {
      /*max-width: 1000px;*/
      margin: 0 auto;
      height: 60px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .header-logo {
      width: 120px;
      margin-left: 2%;
      margin-top: 20px;
    }
    .header-btn {
      width: 120px;
      height: 44px;
      margin-left: auto;
      margin-right: 2%;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

/* head ---------------------------------------- */

    .head {
        height: 50vw;
        background-image: url("../img/bg_head.jpg");
        background-size: cover;
        background-position: center center;
        position: relative;
        top: 0;
        padding: 130px 0 0;
    }
    
    .head_inner {
        max-width: 1000px;
        margin: 0 12% 0 6%;
        width: 90%;
    }

    .head_ttl {
        top: 13vw;
        max-width: 44vw;
        position: absolute;
        width: 60%;
    }

    .head_text{
        position: relative;
        z-index: 20;
    }

    .head_mv {
        padding-top: 6%;
        max-width: 30vw;
        font-size: 50%;
    }


@media screen and (max-width: 767px) {

    .head{
        background-image: url("../img/bg_head_sp.jpg");
        background-size: contain;
        background-position: top center;
        position: relative;
        background-repeat: no-repeat;
        height: 110vw;
        padding: 0;
        margin: 0;
    }

    .head_ttl {
        top: 10%;
        max-width: 100%;
        width: 90%;
        left: 5%;
    }

    .head_text {
        padding-top: 10px;
        line-height: 1.2em;
        font-size: 0.9em;
        width: 65%;
    }
    
    .head_mv {
        max-width: 74%;
        margin: 16% 12%;
        padding-top: 0;
    }
  
}

@media screen and (max-width: 480px) {


    .head_ttl {
        top: 10%;
        max-width: 100%;
        width: 90%;
        left: 5%;
    }

    .head_text {
        padding-top: 3px;
        line-height: 1.2em;
        font-size: 0.9em;
        width: 70%;
    }
    
    .head_mv {
        max-width: 74%;
        margin: 15% 12% 0;
        padding-top: 0;
    }
    

}

    
/* info -------------------------------------------- */

    .info{
        padding: 100px 0 50px;
        background: #fff;
    }

    .info .wrap {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }

    .info .btn_text{
        padding: 10%;
        background: #fff;
    }
   
	.info .title_text_l {
		max-width: 600px;
		margin: 5% auto 3%;
		width: 100%;
	}

    .btn_text .text{
        text-align: center;
        font-size: 170%;
        font-weight: bold;
        margin: 0 0 7%;
    }
    
	.info p {
		text-align: center;
	}

@media screen and (max-width: 767px) {

    .info{
        padding: 10% 0;
    }
   
    .info .wrap {
        width: 100%;
        margin: 0 auto;
    }	
    .info .btn_text{
        padding: 3% 5% 8%;
    }
    
	.info img {
    	width: 94%;
    	height: auto;
    	margin: 0 3%;
  	}
	
    .btn_text .text{
        font-size: 100%;
        margin: 5% 0 7%;
    }

}

@media screen and (max-width: 480px) {

    .btn_text .text{
        font-size: 80%;
    }

}

/* skil -------------------------------------------- */

    .skil {
        padding: 65px 0 0;
        background: #fff;
        color: #333;
        position: relative;
        overflow: hidden;
    }
    
    .skil .text{
        text-align: center;
        font-size: 16px;
        margin: 5% 0;
		font-weight: bold;
    }
    
	.skil p {
		font-size: 26px;
  		font-weight: bold;
  		margin: 35px 100px;
	}

	.skil .title_text_l {
		max-width: 600px;
		margin: 0 auto;
		width: 100%;
		padding: 2% 0 0 0;
	}

   
@media screen and (max-width: 767px) {

    .skil{
        padding: 7% 0;

    }
    
    .skil .text{
        font-size: 100%;
        margin: 5% 0 0;
    }

	.skil p {
		font-size: 20px;
  		font-weight: bold;
  		margin: 20px auto 10px;
	}	
	
	
}

@media screen and (max-width: 480px) {

}

/* exp -------------------------------------------- */

    .exp{
        padding: 70px 0 0;
        background: #fff;
		font-feature-settings: "palt";
    }

	.exp .title_text_l {
		max-width: 600px;
		margin: 0 auto;
		width: 100%;
	}

	.exp .pink_box {
  		border: 2px solid #ff758d;
  		position: relative;
  		text-align: left;
  		padding: 50px 50px 16px;
  		border-radius: 20px;
  		margin: 5% auto 10%;
  		width: 70%;
  		font-size: 18px;
  		text-align: justify;
		line-height: 30px;
	}

	.exp p {
  		margin: 20px 200px 40px;
  		font-size: 16px;
  		font-weight: bold;
	}

@media screen and (max-width: 767px) {

    .exp{
        padding: 7% 0 0;
    }

	.exp p {
  		margin: 3%;
  		font-size: 16px;
  		font-weight: bold;
		text-align: justify;
		font-feature-settings: "palt";
	}
	
	.exp h3 {
		color: #ff758d;
		text-align: center;
		font-size: 30px;
		line-height: 36px;
	}
	
	
	.exp .pink_box {
		font-size: 1em;
		box-sizing: border-box;
		padding: 5% 6% 3%;
    	width: 94%;
		margin: 10% auto;
		line-height: 26px;
  }
	}	

/* merit -------------------------------------------- */

    .merit {
		background-color: #ffcfd2;
		font-weight: bold;
		padding: 70px 0;
		color: #333;
	}

    .merit .text{
        margin: 3% 5% 0 0;
        color: #222222;
        font-size: 0.9em;
        font-weight: bold;
    }

	.merit p {
  		margin: 50px;
		font-weight: bold;
		font-size: 16px;
		text-align: justify;
		font-feature-settings: "palt";
		color: #333;
		line-height: 28px
	}

    .merit .text2{
        text-align: center;
        font-size: 180%;
        font-weight: bold;
        margin: 5% 0;
        color: #fff;
    }

	.inbox {
		margin: 2% 0;
	}

	.inbox p {
		line-height: 36px;
		font-size: 24px;
		font-weight: bold;
		margin: 0 50px;
	}

    .content{
        background: #fff;
        border-radius: 15px;
        padding: 5%;
        margin: 50px 100px;
        
    }
    .content .ttl{
        margin: 1% 0 0;
        color: #2596a6;
        font-size: 1.5em;
        font-weight: bold;
        text-align: left;
    }

@media screen and (max-width: 767px) {

    .merit {
        padding: 1px 0 5px;
		background-color: #ffcfd2;
    }
    
	.merit p {
  		margin: 0;	
	}

	.merit h3 {
		color: #333;
		text-align: center;
		font-size: 30px;
		line-height: 36px;
	}
	
	.inbox {
		margin: 5% 0;
	}

	.inbox p {
		line-height: 36px;
		font-size: 1.2em;
		font-weight: bold;
	}	
	
	.content .flex_box {
    	padding: 6% 3%;
    	margin: 0;
		text-align: justify;
		font-feature-settings: "palt";
  	}	
	
    .content{
        width: 94%;
    	margin: 2% auto;
    	padding: 0 3%;
		text-align: justify;
		font-feature-settings: "palt";		
    }
	
    .content .ttl {
        margin: 6% 0 0;
        font-size: 1.3em;
    }
    
    .content .c_img{
        max-width: 200px;
        width: 30%;
        margin: 0 35%;
    }

    .merit .text2{
        font-size: 150%;
    }

}

	/* faq ------------------- */

	.faq {
		background-color: #f7f3f1;
		padding: 6% 0;
	}
	
	.faq .title_text_l {
		max-width: 350px;
		margin: 0 auto;
		width: 25%;
	}
	
	.faq .wrap {
		width: 60%;
		max-width: 900px;
	}

	.Qa-Box .Qa {
		padding: 1% 0;	
	}

	.Qa-Box .Qa dt,
	.Qa-Box .Qa dd {
		display: flex;
		align-items: baseline;
		margin: 30px 0;
	}

	.Qa-Box .Qa dt p {
		margin: 0;
		padding-left: 10px;
		font-weight: bold;
		width: 100%;
		font-size: 18px;
		font-feature-settings: "palt";
	}

	.Qa-Box .Qa dd p {
		margin: 0;
		padding-left: 10px;
		width: 100%;
		font-size: 16px;
		text-align: justify;
		font-feature-settings: "palt";
	}

	.Qa-Box .Qa dt::before {
		content: "Q";
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ff758d;
		color: #fff;
		width: 42px;
		height: 38px;
		border-radius: 50px;
	}

	.Qa-Box .Qa dd::before {
		content: "A";
		display: flex;
		justify-content: center;
		align-items: center;
		background: #333333;
		color: #fff;
		width: 42px;
		height: 38px;
		border-radius: 50px;
	}

	@media screen and (max-width: 960px) {
	
	.faq .wrap {
		width: 96%;
		max-width: 100%;
		margin: 0 2%;
	}

	.faq .title_text_l {
		max-width: 350px;
		margin: 0 auto;
		width: 50%;
	}		
		
	.Qa p {
		font-size: 15px;		
	}
		
	.Qa-Box {
		width: 95%;
		margin: 0 auto;
	}
	
	.Qa-Box .Qa dt, .Qa-Box .Qa dd {
		margin: 3% 0;
		font-size: 15px; 
	}
	
	.Qa-Box .Qa dt::before,
	.Qa-Box .Qa dd::before {	
		width: 40px;
		height: 34px;
	}
	
	}

/* btn ---------------------------------------------- */

	.btn a {
		display: block;
        width: 80%;
        padding: 22px 0 20px;
		margin: 0 auto;
		color: #fff;
		font-size: 200%;
		line-height: 100%;
		text-align: center;
		text-decoration: none;
		letter-spacing: 0;
		-webkit-border-radius: 1px 1px 5px 5px;
		-moz-border-radius:  1px 1px 5px 5px;
		border-radius:  300px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all  0.3s ease;
		cursor: pointer;
		*zoom: 1;
		max-width: 700px;
		position: relative;
		z-index: 26;
		font-weight: 600;
        letter-spacing: 0.05em;
	}

	.btn a span {
		font-size: 1.2rem;
        line-height: 1.5;
		font-weight: normal;
	}

	.btn a:hover {
		box-shadow: none;
		transform: translate3d(0, 10px, 0);
	}

	.btn-green a {
        background: -webkit-linear-gradient(left, #94fea1 0%, #0dd325 100%);
        background: -o-linear-gradient(left, #94fea1 0%, #0dd325 100%);
        background: linear-gradient(to right, #94fea1 0%, #0dd325 100%);
        background-size: 100%;
        box-shadow: 0 5px 0 #037135;
    }

	.btn-orange a {
        background: -webkit-linear-gradient(left, #ffab3f 0%, #ff9860 50%, #ff8878 100%);
        background: -o-linear-gradient(left, #ffab3f 0%, #ff9860 50%, #ff8878 100%);
        background: linear-gradient(to right, #ffab3f 0%, #ff9860 50%, #ff8878 100%);
        background-size: 100%;
        box-shadow: 0 5px 0 #ae5043;
    }
    
    .btn_inner{
        margin: 7% auto 5%;
    }
    }

@media screen and (max-width: 768px) {
	
	.btn {
        width: 94%;
        padding: 0;
        margin: 2% 3% 6%;
    }

	.btn a {
        width: 90%;
        padding: 4% 0;
        margin: 0 auto;
        font-size: 130%;
        line-height: 90%;
    }
	
	.btn a span {
        font-size: 100%;
        font-size: 0.9rem;
    }

	.btn a:hover {
    	transform: translate3d(0, 9px, 0);
    }

    .btn_inner{
        margin: 0 0 9%;
    }
    
}
@media screen and (max-width: 480px) {

	.btn a {
        width: 90%;
        padding: 4% 0;
        margin: 0 auto;
        font-size: 140%;
    }
    
}

/* footer ----------------------------------------- */

	footer {
		width: 100%;
		color: #fff;
		text-align: center;
		background-color:#333;
		padding: 5px 0;
    }

    footer .inner {
		padding: 1% 0;
		width: 900px;
		margin: 0 auto;
    }

	.footer-logo {
		width: 180px;
		margin: 0 auto;
	}

	address {
		font-size: 1.3rem;
		font-style: normal;
		margin: 2% auto 0;
    }

	table {
		width: 700px;
		margin: 0 auto;
		font-size: 13px;
	}

	table th {
		width: 24%;
		padding: 1%;
		border-bottom: solid 1px #DDDDDD;
	}

	table td {
		width: 22%;
		padding: 1%;
		border-bottom: solid 1px #DDDDDD;
	}

@media ( max-width : 768px ){

      footer .flex {
        -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
      }
      
	table {
		width: 80%;
		margin: 0% 10% 4%;
		border-bottom: solid 1px #EEEEEE;
		font-size: 14px;
	}

	table {
		width: 95%;
		margin: 3% 2% 4%;
		border-bottom: solid 1px #EEEEEE;
	}
	
	table th {
		display: block;
		clear: both;
		width: 100%;
		padding: 0.5% 0;
	}
	
	table td {
		display: block;
		clear: both;
		width: 90%;				
		padding: 2% 5%;
	}	
	
}



/*-------------------- 下層ページ共通　--------------------------------*/
    .top {
      font-size: 24px;
      font-size: 2.4rem;
      line-height: 32px;
      letter-spacing: .1em;
      text-align: center;
      padding: 70px 0 40px;
      font-weight: bold;
    }
    .sub p{
        font-weight: normal;
    }
    .sub .container {
      width: 75%;
      max-width: 800px;
      margin: 0 auto 60px;
    }
    .sub .flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 25px 0;
    }
    .sub .item-head {
      width: 26.66667%;
      font-size: 14px;
    }
    .sub .item-body {
      width: 73.33333%;
      font-size: 14px;
    }
    .sub span {
      font-size: 12px;
      color: #666;
    }

@media (max-width: 767px) {

    .top {
        padding: 7% 0 5%;
    }
    .sub .container {
    width: 90%;
    margin: 0 auto 60px;
    }
    .sub .flex {
    padding: 15px 0;
    }
    .sub .item-head, .sub .item-body{
    font-size: 12px;
    }
    .sub .item-head {
    padding: 0 1em 0 0;
    }
  
}

    /*---- 会社概要　------*/
    .about .container {
      border-top: 1px solid #ececec;
    }

    /*---- 特商法　------*/
    .sctl .container {
      border-top: 1px solid #ececec;
    }

    /*---- プライバシー　------*/
    .privacy h2 {
        margin: 0 0 .4em;
        font-size: 1.6rem;
    }
    .privacy p, .privacy ol {
      margin: 0 0 2em;
      font-weight: normal;
    }
    .privacy li {
      list-style: decimal;
    }

    .mtn {
      padding-left: 30px;
      font-size: 0.9em;
    }


    /*---- お問い合わせ　------*/
    input, textarea{
      padding-left: 15px;
      padding-right: 15px;
      height: 55px;
      line-height: 55px;
      width: 90%;
      background: #f4f4f4;
      border: 1px solid #e9e9e9;
    }

    label {
      font-size: 15px;
      margin-top: 13px;
      width: 22%;
      text-align: right;
      line-height: 1;
      letter-spacing: 0.07em;
      color: #777;
    }

    textarea {
      height: 134px;
      line-height: 1.5;
      padding: 1em;
    }

    input::placeholder {
      color: #b5b5b5;
    }
    textarea::placeholder {
      color: #b5b5b5;
    }

    .form-group {
      margin-top: 17px;
    }

    .form-full {
      margin-left: 0%;
      margin-top: 0;
      width: 100%;
    }

    .actions {
      width: 60%;
      margin: 5% auto 0;
    }
    .actions input {
      height: 64px;
      line-height: 55px;
      width: 100%;
      background: #76cb9b;
      border: 1px solid #fff;
      color: #fff;
    }

@media (min-width: 768px) {
  .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-top: 26px;
  }
  .form-full {
    margin-left: 4%;
    margin-top: 0;
    width: 74%;
  }
}
/* margin padding ---------------------------------------------------------- */

.mt0 {margin-top:0 !important;}
.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.ml0 {margin-left:0 !important;}
.ml10 {margin-left:10px !important;}
.ml20 {margin-left:20px !important;}
.ml30 {margin-left:30px !important;}
.ml40 {margin-left:40px !important;}
.ml50 {margin-left:50px !important;}
.mr0 {margin-right:0 !important;}
.mr10 {margin-right:10px !important;}
.mr20 {margin-right:20px !important;}
.mr30 {margin-right:30px !important;}
.mr40 {margin-right:40px !important;}
.mr50 {margin-right:50px !important;}
.mb0 {margin-bottom:0 !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mb30 {margin-bottom:30px !important;}
.mb40 {margin-bottom:40px !important;}
.mb50 {margin-bottom:50px !important;}
.pt0 {padding-top:0 !important;}
.pt10 {padding-top:10px !important;}
.pt20 {padding-top:20px !important;}
.pt30 {padding-top:30px !important;}
.pt40 {padding-top:40px !important;}
.pt50 {padding-top:50px !important;}
.pt60 {padding-top:60px !important;}
.pt70 {padding-top:70px !important;}
.pl0 {padding-left:0 !important;}
.pl10 {padding-left:10px !important;}
.pl20 {padding-left:20px !important;}
.pl30 {padding-left:30px !important;}
.pl40 {padding-left:40px !important;}
.pl50 {padding-left:50px !important;}
.pr0 {padding-right:0 !important;}
.pr10 {padding-right:10px !important;}
.pr20 {padding-right:20px !important;}
.pr30 {padding-right:30px !important;}
.pr40 {padding-right:40px !important;}
.pr50 {padding-right:50px !important;}
.pb0 {padding-bottom:0 !important;}
.pb10 {padding-bottom:10px !important;}
.pb20 {padding-bottom:20px !important;}
.pb30 {padding-bottom:30px !important;}
.pb40 {padding-bottom:40px !important;}
.pb50 {padding-bottom:50px !important;}


@media screen and (max-width: 640px) {
	/* margin padding ---------------------------------------------------------- */

	.mt10 {margin-top:1% !important;}
	.mt20 {margin-top:2% !important;}
	.mt30 {margin-top:3% !important;}
	.mt40 {margin-top:4% !important;}
	.mt50 {margin-top:5% !important;}
	.ml10 {margin-left:1% !important;}
	.ml20 {margin-left:2% !important;}
	.ml30 {margin-left:3% !important;}
	.ml40 {margin-left:4% !important;}
	.ml50 {margin-left:5% !important;}
	.mr10 {margin-right:1% !important;}
	.mr20 {margin-right:2% !important;}
	.mr30 {margin-right:3% !important;}
	.mr40 {margin-right:4% !important;}
	.mr50 {margin-right:5% !important;}
	.mb10 {margin-bottom:1% !important;}
	.mb20 {margin-bottom:2% !important;}
	.mb30 {margin-bottom:3% !important;}
	.mb40 {margin-bottom:4% !important;}
	.mb50 {margin-bottom:5% !important;}
	.pt10 {padding-top:1% !important;}
	.pt20 {padding-top:2% !important;}
	.pt30 {padding-top:3% !important;}
	.pt40 {padding-top:4% !important;}
	.pt50 {padding-top:5% !important;}
	.pt60 {padding-top:6% !important;}
	.pt70 {padding-top:7% !important;}
	.pl0 {padding-left:0 !important;}
	.pl20 {padding-left:2% !important;}
	.pl30 {padding-left:3% !important;}
	.pl40 {padding-left:4% !important;}
	.pl50 {padding-left:5% !important;}
	.pr10 {padding-right:1% !important;}
	.pr20 {padding-right:2% !important;}
	.pr30 {padding-right:3% !important;}
	.pr40 {padding-right:4% !important;}
	.pr50 {padding-right:5% !important;}
	.pb10 {padding-bottom:1% !important;}
	.pb20 {	padding-bottom:2% !important;}
	.pb30 {padding-bottom:3% !important;}
	.pb40 {padding-bottom:4% !important;}
	.pb50 {padding-bottom:5% !important;}

}


	/* 称号 ---------------------------------------------------------- */
    
        hr {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #ccc;
            margin: 1em 0;
            padding: 0;
        }