@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	common
	header（PC）
	header（SP）
	contents
	title
	path
	main
	footer
------------------------------------------------------------------------ */


/* ========================================================================
	common
======================================================================== */
@media print, screen and (min-width:768px){
body{
	min-width:1240px;
	background:url(../../img/common/bg_second.png) no-repeat center top;
	background-size:100% auto;
}
body#top{ background-image:url(../../img/common/bg_top.png); }

body::before{
}

.sp{
	display:none;
}

.inner{
	position:relative;
	width:1080px;
	margin:0 auto;
}

a img, .fade, .fades a{ transition-duration:0.2s; }
a:hover img, .fade:hover, .fades a:hover{ opacity:0.8; }
.fade:hover img, .fades a:hover img{ opacity:1; }
}

@media screen and (max-width:767px){
body{
	min-width:320px;
}

.pc{
	display:none;
}

.inner{
	padding:0 15px;
}

iframe{
	width:100%;
	height:200px;
}
}


@media print, screen and (min-width:768px){
/* ========================================================================
	header（PC）
======================================================================== */
header .inner{
	width:auto;
	max-width:1440px;
	padding:0 20px;
}

header h1,
header .logo{
	padding:70px 0 40px 0;
}


/* ----------------------------------------
	menu
---------------------------------------- */
#menu .btn{
	display:none;
}

#menu .menu{
	display:flex !important;
	flex-wrap:wrap;
	align-items:flex-end;
	position:absolute;
	top:60px;
	right:20px;
}


/* search
---------------------------------------- */
#menu .search{
	position:relative;
	/* width:290px; */
	margin:0 0 10px 10px;
}

#menu .search input{
	/* width:100%; */
	height:40px;
	padding:0 61px 0 30px;
	background:#ffffff;
	border:none;
	border-radius:4px;
	font-size:1.4rem;
	color:#808080;
}

#menu .search input::placeholder{
	font-size:1.2rem;
}

#menu .search button{
	position:absolute;
	top:0;
	right:0;
	width:61px;
	height:40px;
	padding:0 0 0 20px;
	text-align:left;
}


/* navi
---------------------------------------- */
#menu .navi{
	display:flex;
	margin:0 0 0 20px;
}

#menu .navi li{
	margin:0 0 0 24px;
}

#menu .navi a{
	display:block;
	position:relative;
	font-size:1.2rem;
	font-weight:500;
	color:#333333;
	line-height:1;
	letter-spacing:normal;
	text-decoration:none;
}

#menu .navi img{
	display:block;
	margin:0 auto 6px;
}


/* ---------- cart ---------- */
#menu .navi .cart span{
	position:absolute;
	top:-5px;
	right:10px;
	width:20px;
	background:#00acb3;
	border-radius:50%;
	text-align:center;
	color:#ffffff;
	line-height:2.0rem;
}


/* gnavi
---------------------------------------- */
#menu .gnavi{
	display:flex;
	position:absolute;
	top:76px;
	right:0;
}

#menu .gnavi li{
	margin:0 0 0 40px;
}

#menu .gnavi li a{
	display:block;
	position:relative;
	font-size:1.8rem;
	font-weight:500;
	color:#333333;
	line-height:4.2rem;
	white-space:nowrap;
	text-decoration:none;
}

#menu .gnavi li a::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:2px;
	background:transparent;
	border-radius:2px;
	transition-duration:0.2s;
}
#menu .gnavi li a:hover::before{ background:#00acb3; }

#menu .gnavi li a[target="_blank"]{
	padding:0 18px 0 0;
	background:url(../../img/common/icon_blank.png) no-repeat center right;
	background-size:12px;
}
}

@media print, screen and (min-width:768px) and (max-width:1400px){
#menu .search{
/*	width:280px; */
	margin-left:0;
}

#menu .gnavi li{
	margin:0 30px 0 0;
}

#menu .gnavi li a{
	font-size:1.6rem;
}
}


@media screen and (max-width:767px){
/* ========================================================================
	header（SP）
======================================================================== */
header{
	position:fixed;
	top:0;
	width:100%;
	background:#ffffff;
	box-shadow:0 0 4px rgba(0,0,0,0.1);
	z-index:10;
}

header h1,
header .logo{
	padding:6px 0 10px 0;
}

header h1 img,
header .logo img{
	width:auto;
	height:54px;
}


/* ----------------------------------------
	menu
---------------------------------------- */
#menu .btn{
	position:absolute;
	top:15px;
	right:15px;
	cursor:pointer;
}

#menu .menu{
	display:none;
	position:fixed;
	top:70px;
	left:0;
	width:100%;
	height:100%;
	padding:20px 15px 0;
	background:#ffffff;
}


/* search
---------------------------------------- */
#menu .search{
	position:relative;
	width:100%;
	margin:0 0 20px 0;
}

#menu .search input{
	width:100%;
	height:40px;
	padding:0 51px 0 20px;
	background:#f4f4f4;
	border:none;
	border-radius:4px;
	font-size:1.4rem;
}

#menu .search button{
	position:absolute;
	/* top:0; */
	top: 42px;
	right:0;
	width:51px;
	height:40px;
	padding:0 0 0 10px;
	text-align:left;
}


/* navi
---------------------------------------- */
#menu .navi{
	display:flex;
	justify-content:center;
}

#menu .navi li{
	margin:0 10px 20px;
}

#menu .navi a{
	display:block;
	position:relative;
	font-size:1.2rem;
	font-weight:500;
	color:#333333;
	line-height:1;
	letter-spacing:normal;
	text-decoration:none;
}

#menu .navi img{
	display:block;
	margin:0 auto 5px;
}


/* ---------- cart ---------- */
#menu .navi .cart span{
	position:absolute;
	top:-5px;
	right:10px;
	width:20px;
	background:#00acb3;
	border-radius:50%;
	text-align:center;
	color:#ffffff;
	line-height:2.0rem;
}


/* gnavi
---------------------------------------- */
#menu .gnavi{
	text-align:center;
}

#menu .gnavi li{
	margin:0 0 5px 0;
}

#menu .gnavi li a{
	display:block;
	position:relative;
	font-weight:500;
	color:#333333;
	line-height:4.6rem;
	text-decoration:none;
}
}


/* ========================================================================
	contents
======================================================================== */
@media screen and (max-width:767px){
#contents{
	padding:90px 0 0 0;
}
}


/* ========================================================================
	title
======================================================================== */
#title{
	max-width:1440px;
	margin:0 auto;
	padding:0 20px;
}

#title .inner{
	display:flex;
	align-items:center;
	width:auto;
	height:480px;
	background:url(../../img/common/bg_title.jpg) no-repeat center;
	background-size:cover;
	border-radius:10px;
}
#title.product_list .inner{ background-image:url(../../img/common/bg_title_list.jpg); }
#title.product_detail .inner{ background-image:url(../../img/common/bg_title_detail.jpg); }

#title h1{
	width:1080px;
	margin:0 auto;
	font-size:5.0rem;
	line-height:9.0rem;
	letter-spacing:0.3em;
}

#title h1 span{
	padding:10px 20px;
	background:#ffffff;
	border-radius:3px;
}

@media screen and (max-width:767px){
#title{
	max-width:none;
	padding:0 15px;
}

#title .inner{
	height:auto;
	min-height:200px;
	padding:20px 15px;
}

#title h1{
	width:100%;
	font-size:2.8rem;
	line-height:4.8rem;
	letter-spacing:0.1em;
}

#title h1 span{
	padding:4px 10px;
}
}


/* ========================================================================
	path
======================================================================== */
#path{
	display:flex;
	flex-wrap:wrap;
	width:auto;
	max-width:1440px;
	margin:0 auto;
	padding:25px 20px 100px;
	font-size:1.4rem;
	line-height:2.4rem;
}

#path a{
	display:inline-block;
	color:#00acb3;
	text-decoration:none;
}
#path a:hover{ text-decoration:underline; }

#path li::before{
	content:"＞";
	padding:0 0.5em;
}
#path li:first-child::before{ content:none; }

@media screen and (max-width:767px){
#path{
	max-width:auto;
	padding:15px 15px 30px;
}
}


/* ========================================================================
	main
======================================================================== */
main > .main{
	padding:0 0 120px 0;
}

#main_bottom > div:nth-child(odd){
	background:#e7f7f5;
}

@media screen and (max-width:767px){
main > .main{
	padding:0 0 30px 0;
}
}


/* ========================================================================
	footer
======================================================================== */
footer{
	background:#13b2b9;
}

footer > .inner{
	min-height:200px;
}

footer .logo{
	padding:60px 0 0 0;
}

footer small{
	position:absolute;
	top:126px;
	left:0;
	font-size:1.4rem;
	color:#ffffff;
	line-height:1;
}

@media screen and (max-width:767px){
footer > .inner{
	min-height:0;
	padding:0;
}

footer .logo{
	padding:30px 0 0 0;
	text-align:center;
}

footer .logo img{
	width:auto;
	height:30px;
}

footer small{
	display:block;
	position:static;
	width:auto;
	padding:0 0 10px 0;
	text-align:center;
	font-size:1.0rem;
}
}


/* ----------------------------------------
	navi
---------------------------------------- */
footer .navi{
	display:flex;
	justify-content:center;
	padding:20px 0;
	background:#ffffff;
}

footer .navi li::before{
	content:"│";
	margin:0 1.0em;
}
footer .navi li:first-child::before{ content:none; }

footer .navi a{
	display:inline-block;
	font-weight:500;
	color:#333333;
	line-height:3.6rem;
	text-decoration:none;
}
footer .navi a:hover{ text-decoration:underline; }

@media screen and (max-width:767px){
footer .navi{
	flex-wrap:wrap;
	padding:30px 0 0 0;
}

footer .navi li{
	width:50%;
	border-top:1px solid #cacaca;
	border-right:1px solid #cacaca;
}
footer .navi li:nth-child(2n){ border-right:none; }

footer .navi li::before{
	content:none;
}

footer .navi a{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	padding:12px 10px;
	text-align:center;
	font-size:1.4rem;
	line-height:2.6rem;
	text-decoration:none;
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
footer .menu{
	display:flex;
	align-items:center;
	position:absolute;
	top:0;
	right:0;
	width:540px;
	height:100%;
}

footer .menu ul{
	display:flex;
	flex-wrap:wrap;
}

footer .menu ul li{
	width:28%;
}
footer .menu ul li:nth-child(1),
footer .menu ul li:nth-child(4){
	width:44%;
}
footer .menu ul li:nth-child(3),
footer .menu ul li:nth-child(6){
	text-align:right;
}

footer .menu a{
	display:inline-block;
	font-size:1.8rem;
	color:#ffffff;
	line-height:3.8rem;
	text-decoration:none;
}
footer .menu a:hover{ text-decoration:underline; }

footer .menu a[target="_blank"]{
	padding:0 18px 0 0;
	background:url(../../img/common/icon_blank.png) no-repeat center right;
	background-size:12px;
	filter:brightness(0) invert(1);
}

@media screen and (max-width:767px){
footer .menu{
	display:block;
	position:static;
	width:auto;
	padding:20px 0;
}

footer .menu ul{
	justify-content:center;
}

footer .menu ul li{
	width:auto !important;
	padding:0 1em;
}

footer .menu a{
	font-size:1.4rem;
	line-height:3.4rem;
}
}