@charset "euc-jp";

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

	common
	
==============================================================================*/

body {
	background: #ffffff;
	font-size: 14px;
	color: #333333;
	line-height: 1.6;
	font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

@media all and (-ms-high-contrast: none) {
	body {
		font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	}
}

.styleFormat ul,
.styleFormat ol {
	list-style: none;
}
.styleFormat p,
.styleFormat h1,
.styleFormat h2,
.styleFormat h3,
.styleFormat h4,
.styleFormat h5,
.styleFormat h6,
.styleFormat ul,
.styleFormat ol,
.styleFormat dl,
.styleFormat dt,
.styleFormat dd,
.styleFormat li {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

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

a:link {
	color: #0058dc;
	text-decoration: underline;
}

a:visited {
	color: #0058dc;
	text-decoration: underline;
}

a:hover {
	color: #0058dc;
	text-decoration: none;
}

a:active {
	color: #0058dc;
	text-decoration: none;
}

/*------------------------------------------------------------------------------
	clearfix
------------------------------------------------------------------------------*/

.clearfix {
	zoom: 1;
}

.clearfix:after {
	content: ""; 
    display: block; 
    clear: both;
}

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

	Layout
	
==============================================================================*/

#wrap {
	overflow: hidden;
	background: url(../../assets/images/top/itemsearch_sub_bg.jpg) #fff4f4 no-repeat center top;
	background-size: 100% auto;
}

#footer .inner,
#contents .inner {
	width: 1040px;
	margin: 0 auto;
}

#contents .inner {
	width: 1040px;
	margin: 0 auto;
}

#main {
	width: 1040px;
	margin: 0 auto;
}

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

#header {
	position: fixed;
	width: 100%;
	min-width: 1040px;
	background: #ffffff;
	box-shadow: 0 0 3px rgba(0,0,0,0.12);
	z-index: 1000;
	transition: all 0.3s ease-out 0s;
}

#header.wh {
	background: rgba(255,255,255,0.95);
}

#header img {
	vertical-align: top;
}

#header h1,
#header ul {
	margin: 0;
	padding: 0;
}

#header #logo {
	position: absolute;
	left: 25px;
	top: 13px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	font-size: 28px;
	letter-spacing: 0.05em;
}

#header #logo a {
	text-decoration: none;
	color: #111111;
	transition: all 0.2s ease-out 0s;
}

#header #logo a:hover {
	opacity: 0.6;
}

#header #logo img {
	width: auto;
	height: auto;
	vertical-align: top;
}

#header > .inner {
	height: 68px;
	position: relative;
	transition: all 0.3s ease-out 0s;
}

/* nav */

#header #gnav {
	position: absolute;
	right: 35px;
}

#header #gnav ul {
	display: flex;
	width: auto;
	margin-left: auto;
	line-height: 1;
}

#header #gnav ul li {
	margin: 0 0 0 30px;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

#header #gnav ul li a {
	box-sizing: border-box;
	position: relative;
	display: block;
	height: 68px;
	padding: 24px 0 0 0;
	font-weight: bold;
	color: #444444;
	text-decoration: none;
	transition: all 0.3s ease-out 0s;
}

#header #gnav ul li.contact {
	margin-left: 38px;
}

#header #gnav ul li.contact a {
	position: relative;
	display: block;
	padding: 24px 25px 0 55px;
	color: #ffffff;
	transition: all 0.2s ease-out 0s;
	z-index: 1;
}

#header #gnav ul li.contact a::before {
	content: "";
	position: absolute;
	left: 25px;
	top: 26px;
	width: 20px;
	height: 20px;
	background: url(../../assets/images/top/mail_icon.png) no-repeat left top;
	background-size: contain;
	z-index: 1;
}

#header #gnav ul li.contact a::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background: linear-gradient(90deg, #FB6E8C 0%, #FA8694 50%, #FA8694 50%, #FE547E 100%) no-repeat 50% 50% / 100% 100%;
	transform: skewX(-20deg);
	z-index: -1;
}

#header #gnav ul li.contact a:hover {
	opacity: 0.8;
}

#header #gnav ul li a span {
	position: relative;
	display: block;
	color:#444444;
	padding-bottom: 22px;
	transition: all 0.2s ease-out 0s;
	overflow: hidden;
	font-weight: bold;
	cursor: pointer;
}

#header #gnav ul li a span:before {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	border-bottom: 5px solid #FB6E8C;
	transition: transform .2s;
	transform: translateY(5px);
}

#header #gnav ul li a:hover span:before {
	transform: scale(1, 1);
}

#header.wh #logo {
	left: 25px;
	top: 13px;
	font-size: 28px;
}

#header i.fa {
	display: none;
}

/*------------------------------------------------------------------------------
	panlist
------------------------------------------------------------------------------*/

#contents #panlist {
	position: absolute;
	top: -80px;
	right: 0;
	margin: 0;
	padding: 0 0 20px 0;
}

#contents #panlist p {
	width: auto;
	margin: 0 auto;
	padding: 0 0 20px 0;
	color: #333333;
	font-size: 12px;
	text-align: right;
	line-height: 1.4;
	opacity: 0.75;
}

#contents #panlist p span {
	margin: 0 10px;
	font-weight: bold;
	opacity: 0.5;
}

#contents #panlist a {
	color: #111111;
	text-decoration: none;
	opacity: 0.9;
	transition: all 0.2s ease-out 0s;
}

#contents #panlist a:hover {
	text-decoration: none;
	opacity: 0.5;
}

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

	contents
	
==============================================================================*/

#contents {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 50px 0;
	zoom: 1;
}

#contents::before {
	display: block;
	content: "";
	width: 100%;
	height: 290px;
	background: url(../../assets/images/top/all_sub_bg.jpg) no-repeat top center;
	background-size: cover;
}

#contents:after {
	content: "";
  display: block;
  clear: both;
}

#contents .inner {
	position: relative;
}

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

#contents #main {
	float: right;
	width: 700px;
	margin: -50px 0 0 0;
	text-align: left;
	background: #ffffff;
}

#contents #mainInner {
	min-height: 480px;
	height: auto !important;
	height: 480px;
}

#contents #main #mainBox {
	padding: 50px 43px 55px 43px;
	font-size: 13px;
}

/*--------------------------------------
	title
--------------------------------------*/

/* h1 */

#main #pageTitle {
	margin: 0;
	padding: 30px 25px 25px 25px;
	background: #fb6e8c url(../../assets/images/top/sub_tit_peterpan_bg.png) no-repeat bottom right 10px;
	color: #ffffff;
}

#main h1.title {
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-size: 26px;
	color: #ffffff;
}

#main h1.title span {
	padding: 0 0 0 10px;
	font-weight: bold;
	font-size: 14px;
}

#main #pageTitle p {
	margin: 0;
	padding: 0;
	color: #ffffff !important;
}

#main #pageTitle p a {
	color: #FF6 !important;
}

/* h2 */

#main h2.title {
	position: relative;
	margin: 15px 0 20px 0;
	padding: 10px 10px 10px 23px;
	background: #0399cc;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.4;
}

#main h2.title:before {
	position: absolute;
	display: block;
	content: "";
	top: 10px;
	left: 10px;
	width: 6px;
	height: 20px;
	background: #cbf2ff;
}

#main h2.title span {
	padding: 0 0 0 10px;
	font-weight: normal;
	font-size: 12px;
}

/* h2 col2 */

#main h2.title-col2 {
	padding: 0 0 13px 0;
	background: url(../images/h2_title_col2_bottom_bg.gif) no-repeat left bottom;
	color: #032d63;
	font-weight: bold;
	font-size: 16px;
}

#main h2.title-col2 span {
	display: block;
	padding: 20px 0 0 28px;
	background: url(../images/h2_title_col2_top_bg.gif) no-repeat left top;
}

/* h2 col2 link */

#main h2.title-col2-link {
	padding: 0 0 2px 0;
	background: url(../images/h2_title_col2_link_bottom_bg.gif) no-repeat left bottom;
	color: #032d63;
	font-weight: bold;
	font-size: 12px;
}

#main h2.title-col2-link a {
	display: block;
	padding: 15px 12px 10px 12px;
	background: url(../images/h2_title_col2_link_top_bg.gif) no-repeat left top;
	color: #032d63;
	text-decoration: none;
}

#main h2.title-col2-link a span {
	display: block;
	padding: 0 0 0 20px;
	background: url(../images/h2_title_link_icon.png) no-repeat left top;
}

#main h2.title-col2-link a:hover {
	background: url(../images/h2_title_col2_link_top_bg_on.gif) no-repeat left top;
	color: #fff;
}

#main h2.title-col2-link a:hover span {
	background: url(../images/h2_title_link_icon_on.png) no-repeat left top;
}

/* h3 */

#main h3.title {
	margin: 18px 0 15px 0;
	padding: 0 10px;
	color: #005491;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.2;
}

/* h4 */

#main h4.title {
	font-weight: bold;
	line-height: 1.2;
}

/* h5 */

#main h5.title {
	font-weight: bold;
	line-height: 1.2;
}

/*--------------------------------------
	component
--------------------------------------*/

#main p {
	margin: 0;
	padding: 0 0 15px 0;
	line-height: 1.8em;
	font-size: 14px;
	text-align: left;
}

#main ul,
#main ol {
	margin: 0;
	padding: 0 0 16px 0;
	line-height: 1.8em;
}

/* ul list */

#main ul.list {
	margin: 0 1em 0 1.5em;
}

#main ul.list li {
	list-style: disc;
}

#main ul.imgList {
	margin: 0 1em 0 1.5em;
}

#main ul.imgList li {
	display: inline;
}

/* ul link */

#main ul.link {
	list-style: none;
	padding: 0 0 16px 0;
}

#main ul.link li {
	margin: 0 18px 0 0;
	padding: 0 0 0 18px;
	background: url(../images/link_icon.gif) no-repeat left center;
}

/* dl list */

#main dl.list {
	margin: 0 0 15px 0;
	padding: 0;
	background: url(../images/dl_dd_mid_bg.gif) repeat-y left top;
}

#main dl.list dt {
	margin: 0;
	padding: 10px 15px;
	background: url(../images/dl_dt_bg.gif) no-repeat left top;
	color: #413818;
	font-weight: bold;
	line-height: 1.5;
}

#main dl.list dd {
	margin: 0;
	padding: 15px 20px 5px 20px;
	background: url(../images/dl_dd_bottom_bg.gif) no-repeat left bottom;
	line-height: 1.5;
}

#main dl.list dd h3 {
	margin: 0 0 5px 0;
	padding: 0;
	border: none;
}

#main dl.list dd p {
	margin: 0;
	padding: 0 0 12px 0;
}

/* pagetop */

#main p.pagetop {
	text-align: right;
	font-size: 85%;
	*font-size: xx-small !important;
}

#main p.pagetop span {
	padding: 0 0 0 15px;
	background: url(../images/pagetop_icon.gif) no-repeat left center;
}

#main p.pagetop a {
	color: #333;
}

/* att */

#main .att {
	margin: 0 0 25px 0;
	border-radius: 10px;
	background: rgba(255,246,193,1);
	border: 1px solid #ffe654;
}

#main .attInner {
	padding: 10px
}

#main .att ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#main .att ul li {
	margin: 0 0 0 1.3em;
	padding: 0 0 5px 0;
	text-indent: -1em;
	color: #333333;
}

#main .att ul li span {
	color: #cf0003;
	font-weight: bold;
}

/* pageLink */

.pageLink {
	margin: 0 0 30px 0;
	padding: 0 0 4px 0;
	background: #f0ead6 url(../images/pagelink_bottom_bg.gif) no-repeat left bottom;
}

.pageLink .pageLinkInner {
	margin: 0;
	padding: 10px 10px 0 4px;
	background: url(../images/pagelink_top_bg.gif) no-repeat left top;
}

.pageLink ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pageLink ul li {
	float: left;
}

.pageLink ul li a {
	display: block;
	height: 35px;
	margin: 0 0 6px 5px;
	padding: 0 0 0 10px;
	background: url(../images/pagelink_btn_bg.gif) no-repeat left top;
	color: #413818;
	font-weight: bold;
	text-decoration: none;
}

.pageLink ul li a:hover {
	text-decoration: underline;
	background: url(../images/pagelink_btn_bg.gif) no-repeat left -35px;
}

.pageLink ul li a span {
	display: block;
	padding: 5px 25px 5px 0;
	background: url(../images/pagelink_btn_bg.gif) no-repeat right top;
	white-space: nowrap;
}

.pageLink ul li a:hover span {
	background: url(../images/pagelink_btn_bg.gif) no-repeat right -35px;
}

/*--------------------------------------
	table
--------------------------------------*/

table.nomal {
	width: 100%;
	margin: 0 0 20px 0;
	border-collapse: 0;
	border-spacing: 0;
	border-top: 1px solid #d8c8af;
	border-left: 1px solid #d8c8af;
	background: #ffffff;
}

table.nomal th,
table.nomal td {
	border-bottom: 1px solid #d8c8af;
	border-right: 1px solid #d8c8af;
	vertical-align: top;
	line-height: 1.6;
	table-layout: fixed;
	word-break: break-all;
	text-align: left !important;
}

table.nomal th {
	width: 24%;
	padding: 10px 10px;
	border-right: 1px solid #d8c8af;
	background: url(../images/table_th_bg.gif) repeat left top;
	font-weight: bold;
	color: #5d5748;
	font-size: 14px;
}

table.nomal td {
	padding: 10px 15px;
	background: #fff;
	font-size: 14px;
}

table.nomal td.vm {
	vertical-align: middle;
}

table.nomal th.line,
table.nomal td.line {
	border-bottom: 1px dotted #d8c8af;
	font-size: 14px;
}

table.nomal td input {
	max-width: 400px !important;
}

table.nomal td table {
	margin: 10px 0 0 0;
	padding: 0;
	border: none;
}

table.nomal td table th,
table.nomal td table td {
	margin: 0;
	padding: 0 10px 10px 0;
	border: none;
	table-layout: fixed;
	word-break: break-all;
}

table.nomal td table td img {
	display: block;
}

/*--------------------------------------
	tablePager
--------------------------------------*/

#contents #main .tablepager-links {
	margin: 10px 0 !important;
	padding: 12px 10px;
	background: #fffce9 !important;
	border: 2px dotted #5db6d0;
}

#contents #main .tablepager-links span.tablepager-infos {
	padding-right: 15px;
}

#contents #main .tablepager-links a {
	margin-right: 5px;
}

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

#contents #side {
	float: left;
	width: 300px;
	margin: 50px 0 0 0;
	text-align: left;
}

#contents #side p#buy {
	margin: 0 0 20px 0;
}

#contents #side p#buy a {
	display: block;
	width: 285px;
	height: 100px;
	background: url(../images/buy_btn.png) no-repeat left top;
	text-indent: -9999em;
}

#contents #side p#buy a:hover {
	background: url(../images/buy_btn.png) no-repeat left -39px;
}

/*--------------------------------------
	itemNav
--------------------------------------*/

#contents #side #itemNav h2 {
	position: relative;
	margin: 0 0 30px 0;
	padding: 45px 0 0 20px;
	font-size: 20px;
	font-weight: bold;
	color: #444444;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

#contents #side #itemNav h2::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: "";
	width: 260px;
	height: 31px;
	background: url(../../assets/images/top/top_tit_en_item-search_bg.png) no-repeat top left;
	background-size: 100% auto;
}

#contents #side #itemNav h2::after {
	position: absolute;
	left: 0;
	top: 62px;
	content: "";
	background: #444444;
	width: 15px;
	height: 1px;
}

#contents #side #itemNav h2 .ja::before {
	position: absolute;
	left: 0;
	top: 9px;
	content: "";
	background: #444444;
	width: 15px;
	height: 1px;
}

#contents #side #itemNav #itemNavList {
	margin-bottom: 50px;
	box-shadow: 0 0 25px rgba(242,114,114,0.25);
}

#contents #side #itemNav #itemNavList > ul {
	margin: 0;
	padding: 0;
	border: none;
}

#contents #side #itemNav #itemNavList > ul.topnav {
	margin: 0;
	padding: 0;
	list-style: none;
}

#contents #side #itemNav #itemNavList > ul > li {
	margin: 0;
	padding: 0;
	font-size: 14px;
	border: none;
}
/*
#contents #side #itemNav #itemNavList > ul > li.noBodr:last-child > a {
	border-bottom: none;
}*/

#contents #side #itemNav #itemNavList > ul > li > a {
	box-sizing: border-box;
	display: block;
	padding: 33px 15px 30px 72px;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 3px solid #ff99a1;
	color: #ff5882;
	line-height: 1.4;
	transition: all 0.2s ease-out 0s;
}

#contents #side #itemNav #itemNavList > ul > li > a:hover {
	border-color: #ff6e6e;
	color: #ffffff;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(1) > a {
	background: #fff7f4 url(../../assets/images/top/service_icon_syurui_02.png) no-repeat center left 15px;
	background-size: 42px auto;
	border-top: none;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(2) > a {
	background: #fff7f4 url(../../assets/images/top/service_icon_mokuteki_02.png) no-repeat center left 15px;
	background-size: 36px auto;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(3) > a {
	background: #fff7f4 url(../../assets/images/top/service_icon_atsukai_02.png) no-repeat center left 15px;
	background-size: 40px auto;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(4) > a {
	background: #fff7f4 url(../../assets/images/top/service_icon_uraji_02.png) no-repeat center left 17px;
	background-size: 34px auto;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(5) > a {
	background: #fff7f4 url(../../assets/images/top/service_icon_maker_02.png) no-repeat center left 18px;
	background-size: 32px auto;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(6) > a {
	background: #fff7f4 url(../../assets/images/top/service_icon_youto_02.png) no-repeat center left 18px;
	background-size: 36px auto;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(1) > a:hover {
	background: #fb819a url(../../assets/images/top/service_icon_syurui_02_wh.png) no-repeat center left 15px;
	background-size: 42px auto;
	border-top: none;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(2) > a:hover {
	background: #fb819a url(../../assets/images/top/service_icon_mokuteki_02_wh.png) no-repeat center left 15px;
	background-size: 36px auto;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(3) > a:hover {
	background: #fb819a url(../../assets/images/top/service_icon_atsukai_02_wh.png) no-repeat center left 15px;
	background-size: 40px auto;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(4) > a:hover {
	background: #fb819a url(../../assets/images/top/service_icon_uraji_02_wh.png) no-repeat center left 17px;
	background-size: 34px auto;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(5) > a:hover {
	background: #fb819a url(../../assets/images/top/service_icon_maker_02_wh.png) no-repeat center left 18px;
	background-size: 32px auto;
}

#contents #side #itemNav #itemNavList > ul > li:nth-child(6) > a:hover {
	background: #fb819a url(../../assets/images/top/service_icon_youto_02_wh.png) no-repeat center left 18px;
	background-size: 36px auto;
}

/* 入れ子 01 */

#contents #side #itemNav #itemNavList > ul > li > ul {
	padding: 0;
	background: none;
	/*border-bottom: 3px solid #ff99a1;*/
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li {
	margin: 0;
	padding: 0;
	background: none;
	list-style: none;
	font-size: 13px;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li a {
	display: block;
	padding: 16px 30px 16px 15px;
	border-radius: 0;
	border-top: 0;
	border-bottom: 1px solid rgba(0,0,0,0.085);
	border-image: none;
	background: #ffffff url(../images/sidenav_link_icon.png) no-repeat center right 15px;
	background-size: auto 12px;
	color: #444444;
	text-decoration: none;
	font-weight: normal;
}

#contents #side #itemNav #itemNavList > ul > li.noBodr > ul.chd > li:last-child a {
	border-bottom: none;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li a:hover {
	background: #ff6e6e url(../images/sidenav_link_icon_on.png) no-repeat center right 15px;
	background-size: auto 12px;
	text-decoration: none;
	color: #ffffff;
}

/*
#contents #side #itemNav #itemNavList > ul > li > ul.chd > li.last > a {
	border-bottom: none;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li.last > a:hover {
	border-bottom: none;
}*/


#contents #side #itemNav #itemNavList > ul > li > ul.chd > li.last {
	padding: 0;
	background: none;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li.on > a {
	background: #ff6e6e url(../images/sidenav_link_icon_on.png) no-repeat center right 15px;
	background-size: auto 12px;
	color: #ffffff;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li.on > a:hover {
	background: #ff8b8b url(../images/sidenav_link_icon_on.png) no-repeat center right 15px;
	background-size: auto 12px;
	color: #ffffff;
	text-decoration: none;
}

/* 入れ子 02 */

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li > ul.chd02 {
	margin: 0;
	padding: 0;
	border-top: none;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li > ul.chd02 li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li > ul.chd02 li.last {
	padding: 0;
	background: none;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li > ul.chd02 li a {
	display: block;
	padding: 10px 25px;
	background: #f1f0fa;
	text-indent: 0;
	text-decoration: none;
	color: #333333;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li > ul.chd02 li a:hover {
	background: #ff8d96;
	text-decoration: none;
	color: #ffffff;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li > ul.chd02 li.on a {
	background: #dddce5;
}

#contents #side #itemNav #itemNavList > ul > li > ul.chd > li > ul.chd02 li.on a:hover {
	background: #ff8d96;
	text-decoration: none;
	color: #ffffff;
}

/*--------------------------------------
	recommend
--------------------------------------*/

#contents #side #recommend ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#contents #side #recommend ul li {
	position: relative;
	margin: 0 0 15px 0;
	width: 300px;
	height: auto;
	overflow: hidden;
}

#contents #side #recommend ul li img {
	width: 100%;
	height: auto;
	vertical-align: top;
	transition: all 0.2s ease-out 0s;
}

#contents #side #recommend ul li a:hover img {
	opacity: 0.75;
}

#contents #side #recommend ul li:nth-child(1)::before {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "\5b9a\756a\5546\54c1";
	display: inline-block;
	padding: 6px 30px 6px 13px;
	background: linear-gradient(90deg, #FB6E8C 0%, #FE547E 100%) no-repeat 50% 50% / 100% 100%;
	font-weight: bold;
	font-size: 16px;
	color: #ffffff;
	letter-spacing: 0.05em;
	z-index: 1;
}

#contents #side #recommend ul li:nth-child(2)::before {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "\65b0\67c4";
	display: inline-block;
	padding: 6px 30px 6px 13px;
	background: linear-gradient(90deg, #FB6E8C 0%, #FE547E 100%) no-repeat 50% 50% / 100% 100%;
	font-weight: bold;
	font-size: 16px;
	color: #ffffff;
	letter-spacing: 0.05em;
	z-index: 1;
}

#contents #side #recommend ul li:nth-child(3)::before {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "\548c\8abf\67c4\30d7\30ea\30f3\30c8";
	display: inline-block;
	padding: 6px 30px 6px 13px;
	background: linear-gradient(90deg, #FB6E8C 0%, #FE547E 100%) no-repeat 50% 50% / 100% 100%;
	font-weight: bold;
	font-size: 16px;
	color: #ffffff;
	letter-spacing: 0.05em;
	z-index: 1;
}

#contents #side #recommend ul li:nth-child(4)::before {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "\4f53\80b2\796d\30fb\6587\5316\796d\7528";
	display: inline-block;
	padding: 6px 30px 6px 13px;
	background: linear-gradient(90deg, #FB6E8C 0%, #FE547E 100%) no-repeat 50% 50% / 100% 100%;
	font-weight: bold;
	font-size: 16px;
	color: #ffffff;
	letter-spacing: 0.05em;
	z-index: 1;
}

#contents #side #recommend ul li:nth-child(5)::before {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "\30c7\30a3\30b9\30d7\30ec\30a4\7528\751f\5730";
	display: inline-block;
	padding: 6px 30px 6px 13px;
	background: linear-gradient(90deg, #FB6E8C 0%, #FE547E 100%) no-repeat 50% 50% / 100% 100%;
	font-weight: bold;
	font-size: 16px;
	color: #ffffff;
	letter-spacing: 0.05em;
	z-index: 1;
}

#contents #side #recommend ul li:nth-child(6)::before {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "\30bb\30fc\30eb";
	display: inline-block;
	padding: 6px 30px 6px 13px;
	background: linear-gradient(90deg, #FB6E8C 0%, #FE547E 100%) no-repeat 50% 50% / 100% 100%;
	font-weight: bold;
	font-size: 16px;
	color: #ffffff;
	letter-spacing: 0.05em;
	z-index: 1;
}

/*------------------------------------------------------------------------------
	pagetop
------------------------------------------------------------------------------*/

#pagetop {
	position: fixed;
	bottom: 50px;
	right: 50px;
	z-index: 100;
}

#pagetop a {
	position: relative;
	display: block;
	width: 60px;
	height: 60px;
	width: 50px;
	height: 50px;
	background: rgba(0,0,0,0.25);
	text-decoration: none;
	transition: all 0.2s ease-out 0s;
}

#pagetop a::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 4px);
	left: 50%;
	width: 14px;
	height: 14px;
	border-top: 2px solid #666666;
	border-right: 2px solid #666666;
	transform: translateX(-50%) rotate(-45deg);
}

#pagetop a:hover {
	opacity: 0.8;
}

#pagetop a i {
	display: none;
}

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

#footer {
	margin: 0;
	padding: 0;
	background: #f1f2f6;
	box-shadow: inset 0 0 35px rgba(234,236,240,1);
	font-size: 14px;
	line-height: 1.4;
}

/* #fnav
----------------------------------*/

#footer #fnav {
	padding: 55px 0 50px 0;
}

#footer #fnav ul {
	display: flex;
	justify-content: center;
	width: 1200px;
	margin: 0 auto;
	padding: 0;
}

#footer #fnav ul li {
	position: relative;
	margin: 0;
	padding: 0 15px 0 15px;
	line-height: 1.2;
}

#footer #fnav ul li:before {
	display: block;
	position: absolute;
	top: calc(50% - 8px);
	right: 0;
	content: "";
	height: 16px;
	width: 1px;
	background: #cecece;
}

#footer #fnav ul li:last-child:before {
	display: none;
}

#footer #fnav ul li a {
	display: block;
	font-size: 14px;
	color: #444444;
	text-align: center;
	text-decoration: none;
}

#footer #fnav ul li a:hover {
	text-decoration: none;
	opacity: 0.7;
}

#footer #ftInfo {
	background: #404040;
}

#footer #ftInfo .ftInfo-inner {
	position: relative;
	width: 1200px;
	height: 80px;
	margin: 0 auto;
}

#footer #ftInfo ul {
	position: absolute;
	top: 35px;
	left: 0;
	margin: 0 auto;
	padding: 0;
}

#footer #ftInfo ul li {
	display: inline-block;
	margin: 0 20px 0 0;
	padding: 0 0 0 0;
	line-height: 1.2;
}

#footer #ftInfo ul li:last-child {
	margin: 0;
	padding: 0;
}

#footer #ftInfo ul li:last-child:before {
	display: none;
}

#footer #ftInfo ul li a {
	display: block;
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;
}

#footer #ftInfo ul li:last-child {
	margin-right: 0;
}

#footer #ftInfo ul li a:hover {
	text-decoration: none;
	opacity: 0.7;
}

#footer #ftInfo .copy {
	position: absolute;
	top: 35px;
	right: 0;
	margin: 0;
	padding: 0;
	line-height: 1.2;
	font-size: 12px;
	color: #ffffff;
}

/* #accessmap
----------------------------------*/

#accessmap {
	position: relative;
	margin: 35px auto 0 auto;
	background: #f1f2f6;
	box-shadow: inset 0 0 25px rgba(234,236,240,0.8);
}

#accessmap::before {
	position: absolute;
	top: -35px;
	left: 0;
	content: "";
	width: 100%;
	height: 35px;
	background: #ffffff;
}

#accessmap .access-inner {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding: 60px 0 0 0;
}

#accessmap .access-inner #pageTop {
	position: absolute;
	right: 0;
	top: 68px;
	z-index: 10;
}

#accessmap .access-inner #pageTop a {
	position: relative;
	display: block;
	width: 60px;
	height: 60px;
	width: 50px;
	height: 50px;
	background: rgba(0,0,0,0.1);
	text-decoration: none;
}

#accessmap .access-inner #pageTop a::before {
content: "";
display: block;
position: absolute;
top: calc(50% - 4px);
left: 50%;
width: 14px;
height: 14px;
border-top: 2px solid #666666;
border-right: 2px solid #666666;
transform: translateX(-50%) rotate(-45deg);
}

#accessmap .access-inner #pageTop a:hover {
	opacity: 0.8;
}

#accessmap h1 {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	font-size: 38px;
	color: #686868;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

#accessmap .access-inner a.map-icon {
	position: relative;
	display: inline-block;
	padding-left: 16px;
	color: #686868;
	transition: all 0.2s ease-out 0s;
}

#accessmap .access-inner a.map-icon:hover {
	text-decoration: none;
	opacity: 0.7;
}

#accessmap .access-inner a.map-icon::before {
	position: absolute;
	top: 50%;
	left: 2px;
	content: "";
	display: inline-block;
	width: 11px;
	height: 16px;
	margin: -8px 0 0 0;
	background: url(../../assets/images/top/map_icon.png) no-repeat left top;
	background-size: 100% auto;
}

#accessmap #mapWrap {
	margin: 0;
	padding: 0;
	background: #f1f2f6;
}

#accessmap #mapWrap #map {
	margin: 0;
	padding: 0;
	height: 350px;
	box-shadow: -35px 0 25px rgba(234,236,240,1);
}

#accessmap p {
	font-size: 14px;
	color: #686868;
	line-height: 2;
}

#accessmap p.name {
	margin-bottom: 25px;
	font-size: 16px;
}