@charset "utf-8";

/* ========================================================================================================================/
	
	Document    : common.css
	Description : 共通css

/======================================================================================================================== */


/* ------------------------------------------------------------------------------------------------------------------------/
   0-0, include
/------------------------------------------------------------------------------------------------------------------------ */

@import url("./basic.css");
@import url("./custom/margin_sp.css");
@import url("./custom/padding_sp.css");
@import url("./custom/width_sp.css");


/* ------------------------------------------------------------------------------------------------------------------------/
   base
/------------------------------------------------------------------------------------------------------------------------ */

body {
	min-width:640px;
	color:#232323;
	-webkit-text-size-adjust:100%;
	font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,Osaka,'MS PGothic',arial,helvetica,sans-serif;
	letter-spacing:0.25px;
	line-height:180%;
	background:#ffffff url("../image/layout/bg02.gif") left top repeat;
	font-size:24px;
	overflow-x:hidden;
	}
body.sub {
	min-width:auto;
	}

.pc { display:none !important; }

h1 {}
h2:not(.no_footprint) {
	font-size:30px;
	font-weight:bold;
	line-height:100%;
	box-sizing:border-box;
	border-bottom:solid 1px #d0b596;
	margin:0 0 50px 0;
	padding:0 0 15px 0;
	}
h2:not(.no_footprint):before {
	content:"";
	display:inline-block;
	width:40px;
	height:39px;
	box-sizing:border-box;
	background:transparent url("../image/layout/footprint_l.png") center center no-repeat;
	background-size:40px auto;
	margin:0 20px -5px 0;
	}
h2:not(.no_footprint):after {
	content:"";
	display:inline-block;
	width:40px;
	height:39px;
	box-sizing:border-box;
	background:transparent url("../image/layout/footprint_r.png") center center no-repeat;
	background-size:40px auto;
	margin:0 0 -5px 20px;
	}
h3 {
	font-size:25px;
	font-weight:bold;
	text-align:center;
	margin:0 0 20px 0;
	}

a { transition:0.25s; }
a:link 		{ color:#eb2c8c; text-decoration:underline; }
a:visited 	{ color:#c1136a; text-decoration:underline; }
a:hover 	{ color:#ef5fa7; text-decoration:none; }

.shadow {
	box-shadow:2px 3px 5px 0 rgba(0,0,0,0.25);
	}

#container {
	width:100%;
	min-width:640px;
	text-align:center;
	margin:0 auto;
	overflow:hidden;
	}


/* ------------------------------------------------------------------------------------------------------------------------/
   sidenavi
/------------------------------------------------------------------------------------------------------------------------ */

.drawer_menu * {
	font:inherit;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	text-align:left;
	text-decoration:none;
	outline:none;
	border:none;
	margin:0;
	padding:0;
	list-style:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	}
.drawer_menu .drawer_bg {
	position:fixed;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100%;
	background-color:rgba(51,51,51,.5);
	z-index:999;
	}

.drawer_button {
	position:fixed;
	top: 0;
	right: 0;
	display:block;
	width: 110px;
	color:#ffffff;
	font-size:20px;
	text-align:center;
	outline:none;
	letter-spacing:0.1em;
	background:#645551;
	border:none;
	padding: 9px 21px;
	cursor:pointer;
	z-index:1001;
	}
	.drawer_button span.bar {
		display:block;
		width:47px;
		height:3px;
		background-color:#ffffff;
		margin:13px auto;
		transition:all 0.2s;
		transform-origin:0 0;
		}
	.drawer_button .close {
		display:none;
		letter-spacing:0.08em;
		}
	.drawer_button .menu {
		display:block;
		margin:-7px 0 0 0;
		}
	.drawer_button.active span.bar {
		width:57px;
		margin-left:10px;
		}
	.drawer_button.active .bar1 {
		transform:rotate(35deg);
		}
	.drawer_button.active .bar2 {
		opacity:0;
		}
	.drawer_button.active .bar3 {
		transform:rotate(-35deg);
		}
	.drawer_button.active .menu {
		display:none;
		}
	.drawer_button.active .close {
		display:block;
		margin:-7px 0 0 -5px;
		}

	.drawer_menu .drawer_nav_wrapper {
		position:fixed;
		top:0;
		right:0;
		width:100%;
		height:100%;
		background:#645551;
		border-left:solid 3px #ffffff;
		z-index:1000;
		transition:all .2s;
		transform:translate(100%);
		}
	.drawer_menu .drawer_nav_wrapper.open {
		transform:translate(0);
		}
	.drawer_menu.right .drawer_button {
		right:auto;
		right:30px;
		}
	.drawer_menu.right .drawer_nav_wrapper {
		right:auto;
		right:0;
		transform:translate(-312px);
		}
	.drawer_menu.left .drawer_nav_wrapper.open {
		transform:translate(0);
		}
	.drawer_menu .drawer_nav {
		padding:112px 24px;
		}
	.drawer_menu .drawer_nav li {
		font-size:16px;
		margin-bottom:15px;
		}

	.drawer_menu ul.drawer_nav {
		box-sizing:border-box;
		margin:50px 0 30px 0;
		padding:0 30px;
		list-style:none;
		overflow-y:scroll;
		}
		.drawer_menu ul.drawer_nav > li {
			box-sizing:border-box;
			border-bottom:solid 1px #ffffff;
			margin:0;
			}
			.drawer_menu ul.drawer_nav > li:not(:last-child) > a,
			.drawer_menu ul.drawer_nav > li > span {
				position:relative;
				display:block;
				color:#ffffff;
				font-size:24px;
				text-decoration:none;
				box-sizing:border-box;
				padding:15px 0 15px 45px;
				cursor:pointer;
				}
                .drawer_menu ul.drawer_nav > li:last-child {
                box-sizing:border-box;
                border-bottom:solid 0px #ffffff;
                display: flex;
                justify-content: space-around;
                }
                .drawer_menu ul.drawer_nav > li:last-child a{
                box-sizing:border-box;
                border-bottom:solid 0px #ffffff;
                display: flex;
                margin-top: 20px;
                } 
                .drawer_menu ul.drawer_nav > li:last-child img {
                width: 70px;
                height: 70px;
                }
                
                
			.drawer_menu ul.drawer_nav > li > span:after {
				content:"";
				display:block;
				position:absolute;
				top:25px;
				left:15px;
				width:10px;
				height:10px;
				border:solid 2px #ffffff;
				border-color:transparent transparent #ffffff #ffffff;
				transform:rotate(-45deg);
				}
			.drawer_menu ul.drawer_nav > li > span.active:after {
				top:35px;
				left:15px;
				transform:rotate(135deg);
				}
			.drawer_menu ul.drawer_nav > li:first-child > span {
				border-top:solid 1px #ffffff;
				}
			.drawer_menu ul.drawer_nav > li > ul {
				display:none;
				padding:0 0 0 20px;
				list-style:none;
				}
				.drawer_menu ul.drawer_nav > li > ul > li {
					width:100%;
					margin:0;
					}
					.drawer_menu ul.drawer_nav > li > ul > li > a {
						position:relative;
						display:block;
						color:#ffffff;
						font-size:20px;
						text-decoration:none;
						box-sizing:border-box;
						border-top:dotted 1px #ffffff;
						padding:12px 0 8px 35px;
						}
					.drawer_menu ul.drawer_nav > li > ul > li > a:after {
						content:"";
						display:block;
						position:absolute;
						top:27px;
						left:10px;
						width:6px;
						height:6px;
						border:solid 2px #ffffff;
						border-color:transparent transparent #ffffff #ffffff;
						transform:rotate(-135deg);
						}


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

header {
	width:100%;
	box-sizing:border-box;
	background:#1c1c1c;
	border-top: #505050 solid 5px;
	}
	header .inner {
		position:relative;
		width:600px;
		box-sizing:border-box;
		margin:0 auto;
		padding:20px 0;
		}
		header .inner h1 {
			width:1030px;
			height: 70px;
			text-align:left;
			line-height: 70px;
			box-sizing:border-box;
			background:#ffffff/;
			margin:0 0 0 0px;
			}
			header .inner h1 a {
				display:inline-block;
				box-sizing:border-box;
				padding:0 30px 0 0;
				}
				header .inner h1 a img {
					height:auto;
					vertical-align:middle;
					}
header .inner span{
	position: absolute;
	bottom: 27px;
	line-height: 24px;
	width: 100%;
	left: 270px;
	font-size: 16px;
	text-align: center;
	width: auto;
	color: #ffffff;
}

		/*header .inner .accessories {
			display:none!important;
			}*/
header nav ul , header p{
	display:none;
}

header .inner .accessories01 , header .inner .accessories02 , header .inner .accessories03 , header .inner .accessories04 , header .inner .accessories05 , header .inner .accessories06 , header .inner .accessories07{
	display:none;	
}

/* ------------------------------------------------------------------------------------------------------------------------/
   visual
/------------------------------------------------------------------------------------------------------------------------ */

#visual {
	position:relative;
	width:100%;
	height:480px;
	box-sizing:border-box;
	background:#ffffff url("../image/layout/bg01.gif") left top repeat;
	border-bottom:solid 3px #efefef;
	margin:0;
	padding:30px 0 50px 0;
    overflow:hidden !important;
	z-index:995;
	}
	#visual ul {
		width:100%;
		list-style:none;
		margin:0 auto;
		}
		#visual ul li {
			position:relative;
			display:block;
			width:600px;
			height:400px;
			box-sizing:border-box;
			}
             #visual ul li p{
			 color: #eb2c8c;
             font-family: "FOT-GMaruGoPro-B_0";
             font-weight: bold;
             font-size: 20px;
             
             width: 100%;
             position: absolute;
             bottom: 30px;
             text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0-2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
             
			}  
		#visual ul li.type01 { background:#ffffff url("../image/visual/01.jpg") center top no-repeat; background-size:733px 400px; }
		#visual ul li.type02 { background:#ffffff url("../image/visual/02.jpg") center top no-repeat; background-size:733px 400px; }
		#visual ul li.type03 { background:#ffffff url("../image/visual/03.jpg") center top no-repeat; background-size:733px 400px; }
		
/* ------------------------------------------------------------------------------------------------------------------------/
   breadcrumbs
/------------------------------------------------------------------------------------------------------------------------ */

#breadcrumbs {
	width:100%;
	box-sizing:border-box;
	background:transparent;
	margin:0 auto 40px auto;
	padding:20px 15px;
	}
	#breadcrumbs .inner {
		width:1100px;
		text-align:left;
		list-style:none;
		margin:0 auto;
		}
		#breadcrumbs .inner li {
			display:inline-block;
			height:21px;
			font-size:20px;
			line-height:21px;
			padding:1px 0 0 0;
			}
		#breadcrumbs .inner li:first-child a {
			height:21px;
			background:transparent url("../image/layout/bread_home.png") left center no-repeat;
			background-size:21px 21px;
			margin:0 -10px 0 0;
			padding:1px 0 0 25px;
			}
		#breadcrumbs .inner li:last-child {
			font-weight:bold;
			}
		#breadcrumbs .inner li:before {
			content:">";
			font-weight:normal;
			margin:0 10px;
			}
		#breadcrumbs .inner li:first-child:before {
			content:"";
			margin:0;
			}


/* ------------------------------------------------------------------------------------------------------------------------/
   contents
/------------------------------------------------------------------------------------------------------------------------ */

#contents {
	width:100%;
	background:url('../image/layout/bg.jpg') left top repeat;
	padding:0 0 50px 0;
	}


/* ------------------------------------------------------------------------------------------------------------------------/
   main
/------------------------------------------------------------------------------------------------------------------------ */

#main {
	width:100%;
	}


/* ------------------------------------------------------------------------------------------------------------------------/
   side
/------------------------------------------------------------------------------------------------------------------------ */

#side {
	}


/* ------------------------------------------------------------------------------------------------------------------------/
   under
/------------------------------------------------------------------------------------------------------------------------ */

#under {
	width:100%;
	box-sizing:border-box;
	padding:0 0 10px 0;
	}
	#under ul {
		width:535px;
		margin:0 auto;
		list-style:none;
		}
		#under ul li {
			/*margin:20px 30px 0 0;*/
			}
			#under ul li img {
				width:535px;
				height:auto !important;
				}
                
                

 

/* ------------------------------------------------------------------------------------------------------------------------/
   link
/------------------------------------------------------------------------------------------------------------------------ */

ul.link {
	width:600px;
	list-style:none;
	margin:30px auto 0 auto;
	padding:0 0 30px 0;
	max-height:99999px;
	}
	ul.link li {
		float:left;
		width:calc((100% - 20px) / 2);
		margin:0 20px 20px 0;
		}
	ul.link li:nth-of-type(2n) {
		margin:0 0 20px 0;
		}
		ul.link li a {
			display:block;
			width:100%;
			height:80px;
			color:#ffffff;
			text-align:center;
			text-decoration:none;
			box-sizing:border-box;
			background:#f58b36 url("../image/layout/ic01_off.png") 93% center no-repeat;
			background-size:10px 16px;
			padding:22px 20px 0 0;
			}

/* ------------------------------------------------------------------------------------------------------------------------/
   hlink
/------------------------------------------------------------------------------------------------------------------------ */

ul.hlink {
	width:600px;
	list-style:none;
	margin:0 auto;
	padding: 0 0 20px 0;
	}
	ul.hlink li {
		float:left;
		width: calc((100% - 50px) / 2);
		margin: 0 15px 20px;
		}
		ul.hlink li:last-child  {
			margin-bottom: 0;
			}
		ul.hlink li:nth-child(odd) {
			margin-right: 0;
			}
		ul.hlink li a {
			width:100%;
			color:#f58b36;
			text-align:left;
			text-decoration:none;
			box-sizing:border-box;
			background-size:10px 16px;
			font-size:1em;
			float:left; 
			}
		ul.hlink li a:hover {
			text-decoration: underline;
		}
		ul.hlink li a:before {
			content:'●';
			left:0;
			}

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

footer {
	width:100%;
	box-sizing:border-box;
	background:/*transparent url("../image/layout/bg01.gif") left top repeat*/#1c1c1c;
	border-top:solid 3px #efefef;
	max-height:99999;
	}
	footer .inner {
		position:relative;
		width:600px;
		text-align:left;
		margin:0 auto;
		}
		footer .inner .logo {
			margin:30px 0 0 0;
			text-align:center;
			}
		footer .inner .text {
			font-size:20px;
			text-align:left;
			line-height:160%;
			margin:20px 0 0 0;
            color: #fff;
			}
		footer .inner ul {
			margin:30px 0 0 0;
			list-style:none;
            position: relative;
            /*height: 120px*/
			}
			
			footer .inner ul li:nth-of-type(1),
			footer .inner ul li:nth-of-type(2) { width:290px; height:60px; margin:0 20px 0 0; float:left; }
			footer .inner ul li:nth-child(3) { width:270px; margin:20px 0 0 0px; float:left;}
			footer .inner ul li:nth-child(4) {  width:270px; margin:20px 0 0 0px; float:right;}
            footer .inner ul li:nth-of-type(3){right: 13%;}
            footer .inner ul li:nth-of-type(4){right: 0%;}
           
            footer .inner ul li:nth-child(even) { margin-right:0 !important; }
				footer .inner ul li:nth-child(1) a,
			footer .inner ul li:nth-child(2) a {
					display:block;
					height:60px;
					color:#ffffff;
					font-size:20px;
					text-align:center;
					text-decoration:none;
					box-sizing:border-box;
					background: #c1136a url("../image/layout/ic01_off.png") 96.5% center no-repeat;
					background-size:10px 16px;
					padding:10px 10px 0 0;
					}
				footer .inner ul li:nth-child(1) a:hover,
			footer .inner ul li:nth-child(2) a:hover {
					color:#c1136a;
					background:#ffffff;
					padding:10px 0 0 0;
					}

       footer .corona{
        position: absolute;
        bottom:-28px;
        width: 100%;
        right: 0px;
        padding-bottom: 0px;
       }
                    
	   footer .copyright {
		width:100%;
		height:45px;
		color:#ffffff;
		font-size:17px;
		line-height:45px;
		box-sizing:border-box;
		background:#505050;
		margin:30px auto 0 auto;
       }
        
       .white{
        color: #fff;
        font-size: 17px;
        line-height:160%;
       }

/* ------------------------------------------------------------------------------------------------------------------------/
   expansion
/------------------------------------------------------------------------------------------------------------------------ */

.submit {
	display:block;
	clear:both;
	width:100%;
	text-align:center;
	margin:0 auto;
	}
	.submit button,
	.submit a,
	.submit input[type="button"],
	.submit input[type="submit"] {
		float:none !important;
		display:inline-block !important;
		width:100% !important;
		height:auto !important;
		color:#ffffff;
		font-size:20px;
		font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,Osaka,'MS PGothic',arial,helvetica,sans-serif;
		text-decoration:none;
		line-height:65px;
		box-sizing:border-box;
		background:#f58b36;
		cursor:pointer;
		}
	.submit button:hover,
	.submit a:hover,
	.submit input[type="button"]:hover,
	.submit input[type="submit"]:hover {
		color:#f58b36;
		box-sizing:border-box;
		background:#ffffff;
		}

ul.submit {
	display:block;
	clear:both;
	width:100%;
	text-align:left;
	margin:0 auto;
	padding:0;
	list-style:none;
	}
	ul.submit button,
	ul.submit a,
	ul.submit input[type="button"],
	ul.submit input[type="submit"] {
		display:block !important;
		width:100% !important;
		height:auto !important;
		color:#232323;
		font-size:15px;
		font-family:'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,Osaka,'MS PGothic',arial,helvetica,sans-serif;
		text-align:center;
		text-decoration:none;
		line-height:34px;
		box-sizing:border-box;
		background:#f6f6f6;
		margin:0 !important;
		cursor:pointer;
		}
	ul.submit button:hover,
	ul.submit a:hover,
	ul.submit input[type="button"]:hover,
	ul.submit input[type="submit"]:hover {
		color:#232323;
		box-sizing:border-box;
		background:#ffffff;
		}

ul.pager {
	margin:30px 0 0 0;
	list-style:none;
	}
	ul.pager li {
		position:relative;
		display:inline-block;
		width:2.75em;
		font-size:15px;
		text-align:center;
		box-sizing:border-box;
		margin:0 2px;
		}
	ul.pager li .stay {
		display:block;
		width:2.75em;
		color:#ffffff;
		font-weight:bold;
		text-align:center;
		text-decoration:none;
		line-height:35px;
		box-sizing:border-box;
		background:#ef5fa7 !important;
		border:solid 3px #ef5fa7 !important;
		}
	ul.pager li a {
		display:block;
		width:2.75em;
		color:#232323;
		text-align:center;
		text-decoration:none;
		line-height:35px;
		box-sizing:border-box;
		background:#ffffff;
		border:solid 3px #efefef;
		}
	ul.pager li a:hover {
		color:#232323 !important;
		background:#ffffff !important;
		border:solid 3px #ef5fa7 !important;
		}


/* アニメーション */
.swing {
	-moz-animation:swing linear 1s infinite;
	-moz-transform-origin:48px 90px 0;
	-webkit-animation:swing linear 1s infinite;
	-webkit-transform-origin:48px 90px 0;
	-ms-animation:swing linear 3s infinite;
	-ms-transform-origin:48px 90px 0;
	-o-animation:swing linear 3s infinite;
	-o-transform-origin:48px 90px 0;
	animation:swing linear 3s infinite;
	transform-origin:48px 90px 0;
	display:block;
	float:left;
	}
 
@-moz-keyframes swing {
	0% { -moz-transform:rotate(0deg) }
	25% { -moz-transform:rotate(5deg); }
	50% { -moz-transform:rotate(0deg); }
	75% { -moz-transform:rotate(-5deg); }
	100% { -moz-transform:rotate(0deg); }
}
@-webkit-keyframes swing {
	0% { -webkit-transform:rotate(0deg); }
	25% { -webkit-transform:rotate(5deg); }
	50% { -webkit-transform:rotate(0deg); }
	75% { -webkit-transform:rotate(-5deg); }
	100% { -webkit-transform:rotate(0deg); }
}    
@-o-keyframes swing {
	0% { -o-transform:rotate(0deg); }
	25% { -o-transform:rotate(5deg); }
	50% { -o-transform:rotate(0deg); }
	75% { -o-transform:rotate(-5deg); }
	100% { -o-transform:rotate(0deg); }
}
@-ms-keyframes swing {
	0% { -ms-transform:rotate(0deg); }
	25% { -ms-transform:rotate(5deg); }
	50% { -ms-transform:rotate(0deg); }
	75% { -ms-transform:rotate(-5deg); }
	100% { -ms-transform:rotate(0deg); }
}
@keyframes swing {
	0% { transform:rotate(0deg); }
	25% { transform:rotate(5deg); }
	50% { transform:rotate(0deg); }
	75% { transform:rotate(-5deg); }
	100% { transform:rotate(0deg); }
}


.reflection-img {
	position:relative;
	border-radius:50% 50%;
	overflow:hidden;
	}

.reflection {
	height:100%;
	width:30px;
	position:absolute;
	top:-180px;
	left:0;
	background-color:#ffffff;
	opacity:0;
	transform:rotate(45deg);
	animation:reflection 3s ease-in-out infinite;
	-webkit-transform:rotate(45deg);5.103.20
	-webkit-animation:reflection 3s ease-in-out infinite;
	-moz-transform:rotate(45deg);
	-moz-animation:reflection 3s ease-in-out infinite;
	-ms-transform:rotate(45deg);
	-ms-animation:reflection 3s ease-in-out infinite;
	-o-transform:rotate(45deg);
	-o-animation:reflection 3s ease-in-out infinite;
	}
 
@keyframes reflection {
	0% { transform:scale(0) rotate(45deg); opacity:0; }
	80% { transform:scale(0) rotate(45deg); opacity:0.5; }
	81% { transform:scale(4) rotate(45deg); opacity:0.75; }
	100% { transform:scale(50) rotate(45deg); opacity:0; }
}
@-webkit-keyframes reflection {
	0% { -webkit-transform:scale(0) rotate(45deg); opacity:0; }
	80% { -webkit-transform:scale(0) rotate(45deg); opacity:0.5; }
	81% { -webkit-transform:scale(4) rotate(45deg); opacity:0.75; }
	100% { -webkit-transform:scale(50) rotate(45deg); opacity:0; }
}
@-moz-keyframes reflection {
	0% { -moz-transform:scale(0) rotate(45deg); opacity:0; }
	80% { -moz-transform:scale(0) rotate(45deg); opacity:0.5; }
	81% { -moz-transform:scale(4) rotate(45deg); opacity:0.75; }
	100% { -moz-transform:scale(50) rotate(45deg); opacity:0; }
}
@-ms-keyframes reflection {
	0% { -ms-transform:scale(0) rotate(45deg); opacity:0; }
	80% { -ms-transform:scale(0) rotate(45deg); opacity:0.5; }
	81% { -ms-transform:scale(4) rotate(45deg); opacity:0.75; }
	100% { -ms-transform:scale(50) rotate(45deg); opacity:0; }
}
@-o-keyframes reflection {
	0% { -o-transform:scale(0) rotate(45deg); opacity:0; }
	80% { -o-transform:scale(0) rotate(45deg); opacity:0.5; }
	81% { -o-transform:scale(4) rotate(45deg); opacity:0.75; }
	100% { -o-transform:scale(50) rotate(45deg); opacity:0; }
}