@charset 'utf-8';

/* =IMPORTS
----------------------------------------------------------------------------- */


/* =DefaultStyle Reset
----------------------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,section {
	margin: 0;
	padding: 0;
    border: none;
}
article, aside, figure, figure img, figcaption, hgroup, footer, nav, section, video, object {
	display: block;
}
img {
	border: none;
    vertical-align: bottom;
}
a:link {color: #3399FF;text-decoration: underline;}
a:active {color: #3399FF;text-decoration: underline;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
.clearfix:after {  
    content: ".";   
    display: block;   
    height: 0;   
    clear: both;   
    visibility: hidden;  
}

.clearfix { display: inline-table; }  

/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* End hide from IE-mac */

.clear {
	clear: both;
}

html{
  scroll-behavior: smooth;
}



/* =Layout
----------------------------------------------------------------------------- */
body {
  margin: 0;
  font-family: "Yu Gothic", "游ゴシック", yugothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  position: relative;
  font-feature-settings: "palt";
  background:
    url("../img/line.svg") repeat-y center top,
    url("../img/back.jpg") repeat;
  background-size:
    600px auto, 
    auto;       
  background-repeat:
    repeat-y,
    repeat;
  background-position:
    center top,
    left top;
  background-attachment: fixed, fixed;
  }

@media screen and (max-width:768px) {
body {
  font-size: 0.9rem;
}
}

li {
	list-style: none;
}

img{
max-width: 100%;
}


#box {
	margin: 0 auto;
	padding: 0;
	max-width: 560px;
	overflow: hidden;
	text-align: left;
	background: #FFF;
}

.contents {
	background: #f4cd11;
	padding: 100px 30px;
	text-align: center;
}

@media screen and (max-width:768px) {
.contents {
	padding: 10% 5%;
}
}


.footer {
	padding: 100px 0;
}

#copyright {
	background: #000;
	padding: 10px;
	color: #FFF;
	text-align: center;
}





/* spacer */

.marb02 {
	margin-bottom: 2% !important;
}

.marb03 {
	margin-bottom: 3% !important;
}

.marb05 {
	margin-bottom: 5% !important;
}

.marb08 {
	margin-bottom: 8% !important;
}

.marb10 {
	margin-bottom: 10% !important;
}

.mar02 {
	margin: 2% auto !important;
}

.mar03 {
	margin: 3% auto !important;
}

.mar05 {
	margin: 5% auto !important;
}


.marb10px {
	margin-bottom: 10px;
}

.marb20px {
	margin-bottom: 20px;
}

.marb30px {
	margin-bottom: 30px;
}

.marb40px {
	margin-bottom: 40px;
}

.marb50px {
	margin-bottom: 50px;
}

.marb60px {
	margin-bottom: 60px;
}

.marb70px {
	margin-bottom: 70px;
}

.marb80px {
	margin-bottom: 80px;
}

.marb90px {
	margin-bottom: 90px;
}

.marb100px {
	margin-bottom: 100px;
}

.marb110px {
	margin-bottom: 110px;
}

.marb120px {
	margin-bottom: 120px;
}

.marb150px {
	margin-bottom: 150px;
}

}

/* img */

.mw10 {
	max-width: 10% !important;
	margin-left:45%;
	margin-right:45%;
}
.mw20 {
	max-width: 20% !important;
	margin-left:40%;
	margin-right:40%;
}
.mw30 {
	max-width: 30% !important;
	margin-left:35%;
	margin-right:35%;
}
.mw40 {
	max-width: 40% !important;
	margin-left:30%;
	margin-right:30%;
}
.mw50 {
	max-width: 50% !important;
	margin-left:25%;
	margin-right:25%;
}
.mw60 {
	max-width: 60% !important;
	margin-left:20%;
	margin-right:20%;
}
.mw70 {
	max-width: 70% !important;
	margin-left:15%;
	margin-right:15%;
}
.mw80 {
	max-width: 80% !important;
	margin-left:10%;
	margin-right:10%;
}
.mw90 {
	max-width: 90% !important;
	margin-left:5%;
	margin-right:5%;
}
.mwl10 {
	max-width: 10% !important;
	margin: auto 90% auto 0;
}
.mwl20 {
	max-width: 20% !important;
	margin: auto 80% auto 0;
}
.mwl30 {
	max-width: 30% !important;
	margin: auto 70% auto 0;
}
.mwl40 {
	max-width: 40% !important;
	margin: auto 60% auto 0;
}
.mwl50 {
	max-width: 50% !important;
	margin: auto 50% auto 0;
}
.mwl60 {
	max-width: 60% !important;
	margin: auto 40% auto 0;
}
.mwl70 {
	max-width: 70% !important;
	margin: auto 30% auto 0;
}
.mwl80 {
	max-width: 80% !important;
	margin: auto 20% auto 0;
}
.mwl90 {
	max-width: 90% !important;
	margin: auto 10% auto 0;
}


@media screen and (max-width:768px) {
.marb10px {
	margin-bottom: 2%;
}

.marb20px {
	margin-bottom: 4%;
}

.marb30px {
	margin-bottom: 6%;
}

.marb40px {
	margin-bottom: 8%;
}

.marb50px {
	margin-bottom: 10%;
}

.marb60px {
	margin-bottom: 12%;
}

.marb70px {
	margin-bottom: 14%;
}

.marb80px {
	margin-bottom: 16%;
}

.marb90px {
	margin-bottom: 18%;
}

.marb100px {
	margin-bottom: 20%;
}

.marb110px {
	margin-bottom: 22%;
}

.marb120px {
	margin-bottom: 24%;
}

.marb150px {
	margin-bottom: 30%;
}

}