@charset "UTF-8";


/*	Structure
------------------------------------------------ */

html {
	/* firefox　スクロールバー対策 */
	overflow-y:scroll;
	font-size: 62.5%;
	margin: 0px;
	padding: 0px;
	/* YUI 3のCSS ResetでのCSSバグ解除用 */
	background-color: transparent;
	background-image: none;
}
body {
	color: #333;
	  font-family: 'Noto Sans JP',"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-size: 1.5em;
	line-height: 2;
	overflow: hidden;
	*font-size:small;
	*font:x-small;
	font-weight: 200;
	margin: 0px;
	padding: 0px;
	letter-spacing: 0.04em;
}


img,iframe{
	vertical-align: bottom;
	border-style: none;
}
i{font-style: italic;}
table {
    font-size:inherit;
    font:100%;
}
strong{ font-weight:bold;}
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, a {
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*	link
------------------------------------------------ */
a{
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

a:link {
	text-decoration: none;
	outline: none;
	color: #222;
}
a:visited {
	color: #222;
}
a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	color: #222;
}

.pointer{cursor:pointer;}

/*	text
------------------------------------------------ */

.fontstyle-serif{	font-family: "Times New Roman", Times, serif;}



.font-10 {font-size: 1.0rem; font-size: 10px;}
.font-11 {font-size: 1.1rem; font-size: 11px;}
.font-12 {font-size: 1.2rem; font-size: 12px;}
.font-13 {font-size: 1.3rem; font-size: 13px;}
.font-14 {font-size: 1.4rem; font-size: 14px;}
.font-15 {font-size: 1.5rem; font-size: 15px;}
.font-16 {font-size: 1.6rem; font-size: 16px;}
.font-17 {font-size: 1.7rem; font-size: 17px;}
.font-18 {font-size: 1.8rem; font-size: 18px;}
.font-19 {font-size: 1.9rem; font-size: 19px;}
.font-20 {font-size: 2.0rem; font-size: 20px;}
.font-21 {font-size: 2.1rem; font-size: 21px;}
.font-22 {font-size: 2.2rem; font-size: 22px;}
.font-23 {font-size: 2.3rem; font-size: 23px;}
.font-24 {font-size: 2.4rem; font-size: 24px;}
.font-25 {font-size: 2.5rem; font-size: 25px;}
.font-26 {font-size: 2.6rem; font-size: 26px;}
.font-32 {font-size: 2.8rem; font-size: 32px;}
.font-36 {font-size: 3.7rem; font-size: 36px;}


.red {
	color: #990000;
}
.white{color:#FFF;}
.black{color:#666666;}
.yellow{color: #FFFF33;}
.blue{	color: #1d736f;}

.bg-white {background: #FFFFFF;}
.bg-black {background: #000;}
.bg-gray {
	background: #E5E5E5;
}



.lh100 { line-height: 100%;}
.lh120 { line-height: 120%;}
.lh130 { line-height: 130%;}
.lh150 { line-height: 150%;}
.lh180 { line-height: 180%;}
.lh200 { line-height: 200%;}

.lspacing01 { letter-spacing: 0.1em;}
.lspacing02 { letter-spacing: 0.2em;}


.p0 {	padding: 0px;}
.p3 {	padding: 3px;}
.p5 {	padding: 5px;}
.p10 {	padding: 10px;}
.p15 {	padding: 15px;}
.p20 {	padding: 20px;}
.p30 {	padding: 30px;}
.p40 {	padding: 40px;}

.m0 {	margin: 0px;}
.m5 {	margin: 5px;}
.m10 {	margin: 10px;}
.m15 {	margin: 15px;}
.m20 {	margin: 20px;}

.pL10  { padding-left: 10px;}
.pL20  { padding-left: 20px;}
.pL30  { padding-left: 30px;}
.pL40  { padding-left: 40px;}
.pL60  { padding-left: 60px;}
.pL80  { padding-left: 80px;}

.pR10  { padding-right: 10px;}
.pR20  { padding-right: 20px;}
.pR30  { padding-right: 30px;}

.pT20 {	padding-top: 20px;}
.pT30 {	padding-top: 30px;}
.pT40 {	padding-top: 40px;}
.pT60 {	padding-top: 60px;}

.pB10 {	padding-bottom: 10px;}
.pB20 {	padding-bottom: 20px;}
.pB40 {	padding-bottom: 40px;}
.pB80 {	padding-bottom: 80px;}

.mB5 {	margin-bottom: 5px;}
.mB10 {	margin-bottom: 10px;}
.mB15 {	margin-bottom: 15px;}
.mB20 {	margin-bottom: 20px;}
.mB30 {	margin-bottom: 30px;}
.mB40 {	margin-bottom: 40px;}
.mB60 {	margin-bottom: 60px;}
.mB80 {	margin-bottom: 80px;}
.mB100 {	margin-bottom: 100px;}

.mTB-10 {	margin-bottom: -10px;}

.mT10 {	margin-top: 10px;}
.mT20 {	margin-top: 20px;}
.mT40 {	margin-top: 40px;}
.mT60 {	margin-top: 60px;}
.mT100 {	margin-top: 100px;}

.mT-10 {	margin-top: -10px;}

.mL5 {	margin-left: 5px;}
.mL10 {	margin-left: 10px;}
.mL20 {	margin-left: 20px;}
.mL30 {	margin-left: 30px;}
.mL40 {	margin-left: 40px;}
.mL60 {	margin-left: 60px;}
.mL80 {	margin-left: 80px;}
.mL100 {	margin-left: 100px;}
.mL200 {	margin-left: 200px;}
.mL260 {	margin-left: 260px;}
.mL300 {	margin-left: 300px;}

.mL-5 {	margin-left: -5px;}
.mL-10 {	margin-left: -10px;}

.mR6 {	margin-right: 6px;}
.mR10 {	margin-right: 10px;}
.mR20 {	margin-right: 20px;}
.mR30 {	margin-right: 30px;}
.mR40 {	margin-right: 40px;}
.mR50 {	margin-right: 50px;}
.mR60 {	margin-right: 60px;}
.mR200 {	margin-right: 200px;}
.mR300 {	margin-right: 300px;}
.mR340 {	margin-right: 340px;}

.mR-5 {	margin-right: -5px;}
.mR-10 {	margin-right: -10px;}

.txt-aL {text-align: left;}
.txt-aR {text-align: right;}
.txt-aC {text-align: center;}
.cnt-aC {
	margin-right: auto;
	margin-left: auto;
}

.txt-vaC {
	vertical-align: middle;
	display: inline;
}


/*	float
------------------------------------------------ */

.floatR{float:right}
.floatL{float:left}
.clear {clear:both;}
.overflow-h{overflow:hidden;zoom:1;}
.overflow-a{overflow:auto;zoom:1;}
.posistionR{	position: relative;}



/*	flex
------------------------------------------------ */
.flex {
  display: -webkit-flex; /* Safari */
  display: flex;
	-webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
	flex-flow: row wrap;
}

/*	width
------------------------------------------------ */

.wrapper{
	margin-right: auto;
	margin-left: auto;
}

.width100 {width: 100px;}
.width260 {width: 260px;}
.width400 {width: 400px;}
.width500 {width: 500px;}
.width600 {width: 600px;}
.width800 {width: 800px;}
.width920 {width: 920px;}
.width1000 {width: 1000px;}

.height40 {height: 40px}
.height60 {height: 60px}
.height80 {height: 80px}


/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/*	border
------------------------------------------------ */

.border-non{
	border-right: none!important;
	border-top-style: none !important;
	border-bottom-style: none!important;
	border-left-style: none!important;
	}
.border01{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #A89155;
	}
.border02{
	border: 1px solid #CCC;
	}

/*	box
------------------------------------------------ */
.box660{
	padding: 15px 12px;
	width: 636px;
	background: #FFFFFF;
	-moz-box-shadow: 1px 1px 3px 			rgba(0,0,0,.2);
	-webkit-box-shadow: 1px 1px 3px 		rgba(0,0,0,.2);
	box-shadow: 1px 1px 3px 				rgba(0,0,0,.2);
	border-radius: 4px;        /* CSS3草案 */
	-webkit-border-radius: 4px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 4px;   /* Firefox用 */
	font-weight: normal;
}

/*	bottom
------------------------------------------------ */
a.btn01{
	color:#fff;
}
.btn01{
	display: inline;
	color: #fff;
	padding: 10px  80px;
	margin:40px 0;
	background: linear-gradient(to right, #e50014 0%, #dc22a0 51%, #e50014 100%);
	background-size: 200% auto;
	transition: 0.3s;
  }
  
@media screen and (max-width:667px){
	a.btn01{padding: 15px  60px;}
}
.btn01:link {
	color:#fff;	
}
.btn01 :visited {
	color:#fff;	
}
.btn01:hover {
	color: #fff;
	background-position: right center;
	opacity: 1;
	filter: alpha(opacity=100);
	box-shadow: 5px 5px 20px	 rgba(0,0,0,.3)inset;
}

a.btn02 {
	margin:20px 0;
	}
a.btn02{
	display: inline;
	color: #e50014;
	padding: 10px  40px;
	border:solid 1px #e50014;
}
a.btn02:link {
	color:#333;
}
a.btn02:visited {
	color:#333;	
}
a.btn02:hover {
	color: #333;
	background-color:#fff;
}

.arrow,
.arrow2,
.arrow3,
.arrow4{
    position: relative;
    display: inline-block;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
}
.arrow::before,
.arrow::after,
.arrow2::before,
.arrow2::after,
.arrow3::before,
.arrow3::after,
.arrow4::before,
.arrow4::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.arrow::before{
    right: 16px;
    width: 12px;
    height: 1px;
    background: #fff;
}
.arrow::after{
    right: 16px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.arrow2::before{
    right: 16px;
    width: 12px;
    height: 1px;
    background: #e50014;
}
.arrow2::after{
    right: 16px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #e50014;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow3::before{
    right: 16px;
    width: 1px;
    height: 12px;
    background: #fff;
}
.arrow3::after{
    right: 13px;
    bottom: -2px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.arrow4::before{
    right: 19px;
    width: 1px;
    height: 12px;
    background: #fff;
}
.arrow4::after{
    right: 16px;
    bottom: 3px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*	radius 
------------------------------------------------ */

.radius10   {  
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}
.radius20   {  
    border-radius: 20px;        /* CSS3草案 */  
    -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 20px;   /* Firefox用 */  
}
.radius4-top   {  
    border-top-left-radius: 4px;        /* CSS3草案 */  
    border-top-right-radius: 4px;        /* CSS3草案 */  
    -webkit-border-top-left--radius: 4px;    /* Safari,Google Chrome用 */  
    -webkit-border-top-right--radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius-topleft: 4px;   /* Firefox用 */  
    -moz-border-radius-topright: 4px;   /* Firefox用 */  
}
.radius20-btm   {  
    border-bottom-left-radius: 20px;        /* CSS3草案 */  
    border-bottom-right-radius: 20px;        /* CSS3草案 */  
    -webkit-border-bottom-left--radius: 20px;    /* Safari,Google Chrome用 */  
    -webkit-border-bottom-right--radius: 20px;    /* Safari,Google Chrome用 */  
    -moz-border-radius-bottomleft: 20px;   /* Firefox用 */  
    -moz-border-radius-bottomright: 20px;   /* Firefox用 */  
}
.radius6-right   {  
    border-top-right-radius: 6px;        /* CSS3草案 */  
    border-bottom-right-radius: 6px;        /* CSS3草案 */  
    -webkit-border-top-right--radius: 6px;    /* Safari,Google Chrome用 */  
    -webkit-border-bottom-right--radius: 6px;    /* Safari,Google Chrome用 */  
    -moz-border-radius-topright: 6px;   /* Firefox用 */  
    -moz-border-radius-bottomright: 6px;   /* Firefox用 */  
}

/*	shadow 
------------------------------------------------ */


.shadow {
	-moz-box-shadow: 5px 5px 20px			rgba(0,0,0,.3);
	-webkit-box-shadow: 5px 5px 20px		rgba(0,0,0,.3);
	box-shadow: 5px 5px 20px				rgba(0,0,0,.3);
}
.shadow2 {
	filter: drop-shadow(5px 5px 20px rgba(0,0,0,0.3))}
.txt-shadow{
	text-shadow: 1px 1px 3px #000; 
}

.img-fream01 img {
	border: 5px solid #FFFFFF;
	-moz-box-shadow: 1px 1px 2px 			rgba(0,0,0,.3);
	-webkit-box-shadow: 1px 1px 2px 		rgba(0,0,0,.3);
	box-shadow: 1px 1px 2px 				rgba(0,0,0,.3);
}

.img-fream02 img {
	border: 3px solid #FFFFFF;
	-moz-box-shadow: 1px 1px 2px 			rgba(0,0,0,.3);
	-webkit-box-shadow: 1px 1px 2px 		rgba(0,0,0,.3);
	box-shadow: 1px 1px 2px 				rgba(0,0,0,.3);
}