@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);


@media screen and (min-width: 768px) {
/*==========================================
 pc/tab
===========================================*/
/*----------------------
共通
----------------------*/

.fr {float: right;}
.fl {float: left;}
.cf:after {
 content: "";
 clear: both;
 display: block;
}
.mt16 {margin-top: 16px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mb16 {margin-bottom: 16px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}

.fixed {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
}

.pc_none {
 display: none !important;
}

.position {
 position: absolute;
}

.red a,.red a:hover {
 font: normal normal 14px/24px 'Noto Sans JP', sans-serif; 
 color: #8c1d40;
 text-decoration: none;
}

body {
 margin: 0px auto;
 padding: 0px;
 font: normal normal 14px/24px 'Noto Sans JP', sans-serif; 
 color: #000000;
}

a,a:hover {
 font: normal normal 14px/24px 'Noto Sans JP', sans-serif; 
 color: #000000;
 text-decoration: none;
}

#wrap_box {
 overflow: hidden;
}


.mi {
 padding: 95px 0 35px 0;
 font: normal bold 24px/34px 'Noto Sans JP', sans-serif; 
 color: #8c1d40;
 text-align: center;
}

.mi span {
 font: normal bold 14px/24px 'Source Sans Pro', sans-serif;
 color: #8c1d40;
 text-align: center;
 letter-spacing: 0.3em;
 display: block;
}

.more,.more a,.more a:hover {
 margin: 0px auto;
 padding: 0;
 width: 1100px;
 font: normal bold 14px/24px 'Noto Sans JP', sans-serif; 
 color: #8c1d40;
 text-align: right;
}

.mi_02 {
 padding: 60px 0 25px 0;
 font: normal normal 30px/40px '小塚ゴシック Pro L','Kozuka Gothic Pro Light',sans-serif;
 color: #000000;
 text-align: center;
}

.mi_03 {
 padding: 120px 0 74px 0;
 font: normal bold 60px/70px 'Source Sans Pro', sans-serif;
 color: #8b1c40;
 text-align: center;
}

.mi_04 {
 margin: 0px auto 0 auto;
 padding: 0px 0 5px 0;
 width: 1100px;
 font: normal bold 18px/28px 'Noto Sans JP', sans-serif; 
 color: #000;
 text-align: left;
}

.mi_05 {
 padding: 0;
 font: normal normal 30px/40px 'Source Sans Pro', sans-serif;
 color: #000000;
 text-align: left;
}

.sub_mi {
 margin: 0px auto 30px auto;
 padding: 7px 0;
 width: 1100px;
 font: normal bold 14px/24px 'Noto Sans JP', sans-serif; 
 color: #FFF;
 text-align: center;
 background: #8f1736;
}

.sub_mi_02 {
 margin: 100px auto 53px auto;
 padding: 0 0 13px 0;
 width: 1100px;
 font: normal normal 22px/24px 'Noto Sans JP', sans-serif; 
 color: #8f1736;
 text-align: center;
 border-bottom: 2px solid #8f1736;
}

.more img {
 padding: 0 0 0 5px;
 vertical-align: middle;
}


/*----------------------
top_header
----------------------*/

#header_box {
 margin: 0px auto;
 padding: 40px 0 30px 0;
 /*border-bottom: solid 3px #8f1736;*/
}

#header {
 margin: 0px auto;
 padding: 0px;
 width: 1008px;
}

#header h1 {
 float: left;
}

#header #head_r {
 width: 790px;
 float: right;
 position: relative;
}

#header #head_r h2 {
 padding: 14px 0 0 0;
 float: left;
}

#header #head_r .s_nav {
 float: right;
}

#header #head_r .nav {
 clear: both;
 padding: 20px 0 0 0;
}

#header #head_r .nav li,#header #head_r .s_nav li {
 padding: 0 35px 8px 0;
 display: inline-block;
 font: normal normal 14px/14px 'Noto Sans JP', sans-serif; 
 color: #221814;
}

#header #head_r .nav li a,#header #head_r .s_nav li a {
 font: normal normal 14px/14px 'Noto Sans JP', sans-serif; 
 color: #221814;
 text-decoration: none;
}

#header #head_r .nav li a:hover,#header #head_r .s_nav li a:hover {
 font: normal normal 14px/14px 'Noto Sans JP', sans-serif; 
 color: #8b1c40;
 text-decoration: none;
}

#nav_box {
 /*position: relative;*/
}

#nav_box span{
 background:#8f1736;
 height: 3px;
 display:block;
 position: absolute;
 width:50px;
 left:0px;
}


/*----------------------
sub_header
----------------------*/
#nav_fix {
 background: #FFF;
 z-index: 10000;
}

#s_header {
 margin: 0px auto;
 padding: 0 0 0 0;
 width: 1073px;
 height: 64px;
}

#s_header h1 {
 float: left;
 padding: 5px 0 0 0;
}

#s_nav_box {
 float: right;
 position: relative;
}

#s_nav_box .cart {
 padding: 0 0 0 10px;
 vertical-align: middle;
}

#s_nav_box a{
 font: normal normal 16px/64px 'Noto Sans JP', sans-serif; 
 text-decoration:none;
 color:#000000;
 text-align: left;
}

#s_nav_box a:hover{
 font: normal normal 16px/64px 'Noto Sans JP', sans-serif; 
 text-decoration:none;
 color:#8f1736;
/* background: #8f1736;
 display: block;*/
 text-align: left;
}

#s_nav_box li{
 padding: 0px 0 0 52px;
 display:inline-block;
}


#s_nav_box span{
 background:#8f1736;
 height: 3px;
 display:block;
 position: absolute;
 width:50px;
 left:50px;
 bottom: 12px;
}

.contents {
 margin: 0px auto;
 padding: 0px;
}

.contents_w {
 margin: 0px auto;
 width: 1100px;
}


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

.top_arrow {
 margin: 0px auto;
 padding: 95px 0 17px 0;
 width: 32px;
}

#footer_box {
 background: #8f1736;
}

#footer_line {
 margin: 0px auto 41px auto;
 padding: 37px 0 34px 0;
 width: 1100px;
}

#footer_line h2 {
 width: 277px;
 float: left;
}

#footer_line ul {
 float: right;
}

#footer_line li {
 padding: 0 0 0 41px;
 display: inline;
 font: normal normal 14px/24px 'Noto Sans JP', sans-serif; 
 color: #FFF;
}

#footer_line li a,#footer_line li a:hover {
 font: normal normal 14px/24px 'Noto Sans JP', sans-serif; 
 color: #FFF;
 text-decoration: none;
}

#footer_nav {
 margin: 0px auto;
 padding: 0 0 50px 0;
 width: 1100px;
 font-size: 12px;
}

#footer_nav li:before {
 content: "・";
 color: #8f1736;
}

#footer_nav a,#footer_nav a:hover {
 font-size: 12px;
 color: #000;
}

#footer_nav dl {
 padding: 0 78px 0 0;
 float: left;
}

#footer_nav li {
 padding: 4px 0;
}

#copy {
 float: right;
}

#footer_nav dt, #footer_nav dt a, #footer_nav dt a:hover {
 padding: 0 0 5px 0;
 font-size: 14px;
}

#footer_nav dd {
 padding: 0 0 0 10px;
}
}

@media screen and (max-width: 767px) {
/*==========================================
 smp
===========================================*/
body {
	margin: 0px auto;
	padding: 0px;
 font: normal normal 12px/19px 'Noto Sans JP', sans-serif; 
 color: #000000;
}

#wrap_box {
 overflow: hidden;
}

.red a,.red a:hover {
 font: normal normal 12px/19px 'Noto Sans JP', sans-serif; 
 color: #8c1d40;
 text-decoration: none;
}

a,a:hover {
 font: normal normal 12px/19px 'Noto Sans JP', sans-serif; 
 color: #8c1d40;
 text-decoration: none;
}

img {
 margin: 0px auto;
 padding: 0px;
 width: 100%;
 height: auto;
 vertical-align: bottom;
}

.mb30 {margin-bottom: 30px;}

/*clearfix*/
.cf:after,.sp_cf:after {
 content: "";
 clear: both;
 display: block;
}

.s_pt30 {
 padding-top: 30px !important;
}

.s_pt20 {
 padding-bottom: 20px !important;
}

.sp_none {
 display: none !important;
}

.mi {
 padding: 53px 0 22px 0;
 font: normal bold 15px/30px 'Noto Sans JP', sans-serif; 
 color: #8c1d40;
 text-align: center;
}

.mi span {
 font: normal bold 9px/19px 'Source Sans Pro', sans-serif;
 color: #8c1d40;
 text-align: center;
 letter-spacing: 0.3em;
 display: block;
}

.more img {
 width: 18px;
 vertical-align: middle;
}

.more,.more a,.more a:hover {
 clear: both;
 margin: 0px auto;
 padding: 0;
 width: 100%;
 font: normal bold 7px/17px 'Noto Sans JP', sans-serif; 
 color: #8c1d40;
 text-align: center;
}

.mi_02 {
 padding: 60px 0 0 0;
 font: normal normal 15px/26px 'Noto Sans JP', sans-serif; 
 color: #000000;
 text-align: center;
}

.mi_03 {
 padding: 120px 0 74px 0;
 font: normal bold 60px/70px 'Source Sans Pro', sans-serif;
 color: #8b1c40;
 text-align: center;
}

.mi_04 {
 margin: 0px auto 0 auto;
 padding: 0px 0 5px 0;
 width: 94%;
 font: normal bold 12px/12px 'Noto Sans JP', sans-serif; 
 color: #000;
 text-align: left;
}

.mi_05 {
 padding: 0;
 font: normal bold 12px/12px 'Noto Sans JP', sans-serif; 
 color: #000000;
 text-align: left;
}

.sub_mi {
 margin: 0px auto 30px auto;
 padding: 5px 3%;
 width: 94%;
 font: normal bold 10px/20px 'Noto Sans JP', sans-serif; 
 color: #FFF;
 text-align: center;
 background: #8f1736;
}

.sub_mi_02 {
 margin: 30px auto;
 padding: 0 3% 13px 3%;
 width: 94%;
 font: normal normal 22px/24px 'Noto Sans JP', sans-serif; 
 color: #8f1736;
 text-align: center;
 border-bottom: 2px solid #8f1736;
}

.more img {
 padding: 0 0 0 5px;
 vertical-align: middle;
}

.contents {
 padding: 50px 0 0 0;
}

/*----------------------
top_header
----------------------*/
.menu-trigger strong {
 font: normal normal 10px/20px 'Noto Sans JP', sans-serif; 
 color: #8f1736;
 position: absolute;
 bottom: -20px;
}

.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .3s;
	box-sizing: border-box;
}
.menu-trigger {
	position: fixed;
	width: 28px;
	height: 18px;
 top :10px;
	left: 15px;
 z-index: 10002;
}
.menu-trigger span {
	position: absolute;
	right: 0;
	width: 100%;
	height: 2px;
	background-color: #8f1736;
	border-radius: 3px;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 8px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}

.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-7px) rotate(45deg);
	transform: translateY(-7px) rotate(45deg);
}

#nav_box {
 display: none;
}

#header_box {
 margin: 0px auto;
 padding: 0;
 height: 50px;
 background: #FFF;
 position: fixed;
 width: 100%;
 z-index: 10000;
}

#header h1 {
 margin: 4px auto 0px auto;
 width: 64px;
}

#header #head_r h2 {
 position: absolute;
 top: 10px;
 right: 15px;
 width: 80px;
}

#header #head_r .nav {
 clear: both;
 padding: 20px 0 0 0;
 width: 100%;
 height: 100%;
 background: rgba(255,255,255,1.0);
 position: fixed;
 z-index:10001;
 top: 0px;
}

#header #head_r .nav li {
 padding: 10px 0;
 font: normal normal 10px/20px 'Noto Sans JP', sans-serif; 
 color: #000;
 text-align: center;
 border-bottom: 1px dotted #8f1736;
}

#header #head_r .nav li a {
 font: normal normal 10px/20px 'Noto Sans JP', sans-serif; 
 color: #000;
 text-decoration: none;
}

#nav_fix {
 display: none;
}

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

.top_arrow {
 margin: 0px auto;
 padding: 47px 0 11px 0;
 width: 23px;
}

#footer_box {
 background: #8f1736;
 width: 94%;
 padding: 0 3%;
}

#footer_line {
 margin: 0px auto 26px auto;
 padding: 19px 0;
 width: 100%;
}

#footer_line h2 {
 width: 135px;
}

.f_nav_01 {
 font: normal normal 12px/19px 'Noto Sans JP', sans-serif; 
 color: #000;
}

#footer_nav {
 margin: 0px auto;
 padding: 0 0 20px 0;
 width: 94%;
 font-size: 12px;
}

#footer_nav li:before {
 content: "・";
 color: #8f1736;
}

#footer_nav a,#footer_nav a:hover {
 font-size: 12px;
 color: #000;
}

#footer_nav dl {
 padding: 0 78px 0 0;
 float: left;
}

#footer_nav li {
 padding: 4px 0;
}

#copy {
 clear: both;
 padding: 36px 0 0 0;
 text-align: center;
 font-size: 7px;
}

#footer_nav dt, #footer_nav dt a, #footer_nav dt a:hover {
 padding: 0 0 0px 0;
 font-size: 11px;
 color: #000;
}

#footer_nav dd {
 padding: 0 0 0 0;
}


}