/*-------------------------------------
	Guide
-------------------------------------*/

/* common */
.br { display: inline-block; text-decoration: inherit;}

.center { text-align: center !important;}

#GuideB { padding: 124px 0 0;}
#GuideB a,
#GuideB a::before,
#GuideB a::after,
#GuideB a img { transition: .3s;}

#GuideB a.btn { padding: 10px 25px 8px; color: #FFF !important; font-weight: bold; text-shadow: none; background: #338cd8;; border: none}
#GuideB a.btn.buy { background: #F66;}

@media (hover: hover) {
#GuideB a.btn:hover { opacity: .6;}
}
#GuideB #Breadcrumbs { margin-bottom: 40px; max-width: 1260px;}
#GuideB #Content { max-width: 1260px;}

#asidePos { position: sticky; top: 134px;}

#GuideB #Content aside { width: 360px;}
#GuideB #Content aside .toc_widget { margin: 0 0 20px; padding: 20px 25px 12px; background: #f0f5f9; }
.toc_widget .widgettitle { margin: 0 0 5px; font-size: 16px; font-weight: bold; }
.toc_widget ul { margin: 0; list-style: none; }
.toc_widget ul ul { margin: 0 0 0 16px; }
.toc_widget li { margin: 5px 0; }
.toc_widget a { color: #2385dd; }
.toc_widget a:hover { color: #0CC; text-decoration: underline; }

#GuideB .col-title-list a { align-items: center;}
#GuideB .col-title-list figure { width: 115px; min-width: 115px; height: 115px;}
#GuideB .col-title-list p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	text-decoration: none !important;
	text-overflow: ellipsis;
}

/* header */
#menuTrigger:before,
#menuTrigger:after,
#menuTrigger a:before,
#spNav { transition: .3s;}

#GuideB header {
	position: fixed;
	top: 0;
	left: 0;
	padding: 0 !important;
	width: 100%;
	max-width: none;
	height: 124px;
	background: #FFF;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	z-index: 100;
}
#GuideB header .headInner { display: block; position: relative; margin: 0 auto; padding: 15px 110px 0 40px; max-width: 1480px;}
#GuideB header div { float: none; margin: 0;}
#GuideB header h1 { margin: 0 0 10px;}
#GuideB header .headFlex { display: flex; align-items: center; width: 100%;}
#GuideB header p.logo { padding-left: 0; border: none;}
#GuideB header .headLinks { margin: 0 7px 0 auto; width: 165px;}
#GuideB header div p.shop { padding-right: 15px !important; border-right: 1px solid #CCC;}
#GuideB header div li { display: inline-block; margin: 4px 8px;}

#menuTrigger { display: block; position: absolute; top: 50px; right: 40px; padding: 40px 0 0; width: 50px; border: none; cursor: pointer; z-index: 10000;}
#menuTrigger a { display: block; color: #111 !important; text-align: center; text-decoration: none; white-space: nowrap;}
#menuTrigger:before,
#menuTrigger:after,
#menuTrigger a:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #535353; border-radius: 3px;}
#menuTrigger:after { top: 14px;}
#menuTrigger a:before { top: 28px;}
#menuTrigger span { display: block; margin: 0; padding: 0; width: 100%; color: #111; font-size: 14px; font-weight: bold; letter-spacing: 1px; background: none;}
#menuTrigger span.close { display: none; color: #FFF; text-shadow: 0 0 4px rgba(14, 67, 156, 0.8);}

#menuTrigger.active:before { background: #FFF; -webkit-transform: translate(0, 13px) rotate(225deg); transform: translate(0, 13px) rotate(225deg);}
#menuTrigger.active:after { background: #FFF; opacity: 0;}
#menuTrigger.active a:before { background: #FFF; -webkit-transform: translate(0, -16px) rotate(-225deg); transform: translate(0, -16px) rotate(-225deg);}
#menuTrigger.active span { display: none;}
#menuTrigger.active span.close { display: block;}

#spNav {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: -30px;
	left: 0;
	padding: 60px;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: linear-gradient(to right, rgba(33, 122, 211, 0.8) 10%, rgba(14, 67, 156, 0.8) 80%);
	backdrop-filter: blur(15px);
	opacity: 0;
	overflow: auto;
	pointer-events: none;
}
#spNav div li:after { content: none;}
#spNav a { color: #FFF !important; text-shadow: 0 0 4px rgba(14, 67, 156, 0.8);}
#spNav a img { opacity: 1 !important;}
#spNav img { max-width: 100%;}

.open #spNav { top: 0; opacity: 1; pointer-events: auto;}

#spNavFlex { display: flex; gap: 60px; margin: auto; width: 100%; max-width: 1480px;}
#spNavFlex div.logos { width: 31%; text-align: center;}
#spNavFlex div.logos a.logoW img { transition: .3s;}
#spNavFlex div.logos h4 {
	margin: 30px auto 15px;
	color: #FFF;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	text-shadow: 0 0 4px rgba(14, 67, 156, 0.8);
}
#spNavFlex div.logos h4 span { display: inline-block; position: relative;}
#spNavFlex div.logos h4 span::before,
#spNavFlex div.logos h4 span::after {
	content: "";
	position: absolute;
	top: 0;
	left: -20px;
	width: 2px;
	height: 100%;
	background: #FFF;
	transform: rotate(-20deg);
}
#spNavFlex div.logos h4 span::after { left: auto; right: -20px; transform: rotate(20deg);}
#spNavFlex div.logos h4 strong { font-size: 20px;}
#spNavFlex div.logos .bannar {
	display: flex;
	align-items: center;
	position: relative;
	height: 100px;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid #FFF;
	transition: .3s;
}
#spNavFlex div.logos .bannar ~ .bannar { margin: 20px 0 0;}
#spNavFlex div.logos .bannar::after {
	content: "";
	position: absolute;
	top: calc(50% - 5px);
	right: 20px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotate(45deg);
	transition: .3s;
}
#spNavFlex div.logos .bannar figure { width: 35%; min-width: 35%; height: 100%;}
#spNavFlex div.logos .bannar img { width: 100%; height: 100%; object-fit: cover;}
#spNavFlex div.logos .bannar .text { margin: 0 auto; padding: 0 30px 0 10px; font-size: 16px; font-weight: bold; line-height: 1.2;}

#spNavFlex ul.spLinks { display: flex; flex-direction: column; justify-content: space-between; margin: 0; width: 23%;}
#spNavFlex ul.spLinks li { display: block; margin: 0; padding: 0; line-height: 1;}
#spNavFlex ul.spLinks h3 a {
	display: block;
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 8px;
	font-size: 26px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none !important;
	border-bottom: 2px solid #FFF;
	transition: .3s;
}
#spNavFlex ul.spLinks h3 a::after {
	content: "";
	position: absolute;
	top: calc(50% - 15px);
	right: 10px;
	width: 14px;
	height: 14px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotate(45deg);
	transition: .3s;
}
#spNavFlex ul.spLinks a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 5px 0;
	width: 100%;
	font-size: 18px;
	text-decoration: none !important;
	transition: .3s;
}
#spNavFlex ul.spLinks li ~ li:has(h3) { margin: auto 0 0;}
#spNavFlex ul.spLinks li ~ li:has(h3) a { margin: 0;}
#spNavFlex ul.spLinks img { margin: 0 10px 0 0; width: 46px;}
#spNavFlex ul.spLinks img.icon { margin: 5px 10px 5px 5px; width: 32px;}
#spNavFlex ul.spLinks li.sub { margin: auto 0 0;}
#spNavFlex ul.spLinks a.underline { display: inline-block; margin: 15px 0 0 10px; padding: 0; background: none !important;}

/* MV */
#guideMV { display: flex; height: 300px; background: url(/images/home/visual.png) center no-repeat; background-size: 1920px auto;}
#guideMV .bg { margin: auto auto; padding: 40px 60px 35px; color: #FFF; background: rgba(0, 0, 0, 0.8);}
#guideMV .bg h2 { margin: 0 0 20px; color: #FFF; font-size: 36px; text-align: center;}
#guideMV .bg p { font-size: 16px; line-height: 1.6; text-align: center;}

/* list */
.col-list h3.line { margin: 0 0 30px; padding: 0 0 7px; font-size: 28px; font-weight: bold; border-bottom: 3px solid #338cd8;}
.col-list h3.line.buy { border-color: #F66;}

.guideList { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 40px; margin: 0 0 60px;}
.guideList li { display: flex; width: calc(50% - 20px);}
.guideList .picLink { display: block; margin: 0 20px 0 0; width: 35%;}
.guideList .picLink img { max-width: 100%; height: auto;}
.guideList .texts { width: calc(65% - 20px);}
.guideList .texts h3,
.guideList .texts h4,
.guideList .texts p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-decoration: none !important;
	text-overflow: ellipsis;
	white-space: normal;
    word-break: break-word;
	font-size: 16px;
	font-weight: bold;
}
.guideList .texts h3 a,
.guideList .texts h4 a { color: #111;}
.guideList .texts p { -webkit-line-clamp: 3; margin: 10px 0 0; font-size: 15px; font-weight: normal;}
.guideList .date { color: #999; font-size: 14px;}
.guideList ~ .center { margin: -20px 0 60px;}

/* detail */
#GuideB .col-post #toc_container { display: none;}

#GuideB .col-post h2,
#GuideB .col-post h5,
#GuideB .col-post h6 { padding: 0; color: #111; font-weight: bold; background: none;}
#GuideB .col-post h3,
#GuideB .col-post h4 { padding: 0 0 5px; color: #111; font-size: 24px; font-weight: bold; background: none; border-bottom: 3px solid #2385dd; border-radius: 0;}
#GuideB .col-post h4 { font-size: 22px; border-bottom: 2px solid #A2A2A2;}
#GuideB .col-post h5 { font-size: 20px;}
#GuideB .col-post h6 { font-size: 18px;}
#GuideB .col-post .subtitle03 { font-size: 16px;}
#GuideB .col-post .subtitle04 { font-size: 14px;}
#GuideB .col-post .subtitle05,
#GuideB .col-post .subtitle06 {
	display: inline-block;
	margin: 0 0 10px;
	padding: 5px 10px 4px;
	color: #111;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.3;
	background: #dfedfd;
	border-radius: 4px;
}
#GuideB .col-post .subtitle06 { margin: 3px 0; background: #DDD;}
#GuideB .col-post .block02 { margin: 0 0 20px;}
#GuideB .col-post .attention { margin: 40px 0; font-size: 13px; background: #f9f9f9;}
#GuideB .col-post .attention p { margin: 0 0 10px;}
#GuideB .col-post .attention p.bordered { padding: 10px 0 0; border-top: 1px solid #CCC;}
#GuideB .col-post .attention ul { margin: 0 0 0 16px;}
#GuideB .col-post .attention li { margin: 5px 0 0;}
#GuideB .col-post .attention li::marker { content: "※ ";}

#GuideB .col-post .pager { container-type: inline-size;}

@container (max-width: 475px) {
#GuideB .col-post .pager ul { display: flex; flex-wrap: wrap; justify-content: center;}
#GuideB .col-post .pager ul li:nth-child(2) { order: 2; margin: 15px 20px 0;}
}

@media (hover: hover) {
#menuTrigger:hover:before { transform: translate(0, 5px);}
#menuTrigger:hover a:before { transform: translate(0, -5px);}
#menuTrigger.active:hover:before { transform: translate(0, 10px) rotate(205deg);}
#menuTrigger.active:hover a:before { transform: translate(0, -19px) rotate(-205deg);}

#spNav a:hover { text-decoration: underline;}

#spNavFlex ul.spLinks h3 a:hover { text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); background: none; box-shadow: none;}
#spNavFlex ul.spLinks a:hover { background: rgba(255, 255, 255, 0.2);}
#spNavFlex div.logos a.logoW:hover img { opacity: .6 !important;}
#spNavFlex div.logos .bannar:hover { text-decoration: none; background: rgba(255, 255, 255, 0.4); box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);}
#spNavFlex div.logos .bannar:hover::after { right: 15px;}
#spNavFlex ul.spLinks h3 a:hover::after { right: 5px;}
#spNavFlex ul.spLinks a.underline:hover { text-decoration: underline !important;}

.guideList .texts h4 a:hover,
.guideList .texts .right a:hover { text-decoration: underline;}
}

/* responsive */
@media screen and (max-width: 1200px){
#GuideB header .headInner { padding: 15px 90px 0 20px;}
#menuTrigger { right: 20px;}
}
@media screen and (max-width: 1120px){

/* common */
#GuideB #Breadcrumbs { margin: 0; padding: 30px 20px;}

#GuideB #Content article,
#GuideB #Content aside { display: table-cell;}
#Content article section { min-width: 0 !important;}
#GuideB #Content aside { padding: 0 0 0 20px; width: 300px;}

/* header */
#spNav { align-items: start; padding: 120px 40px 40px;}

#spNavFlex { flex-wrap: wrap; gap: 40px;}
#spNavFlex div.logos,
#spNavFlex ul.spLinks { width: calc(33.333% - 80px / 3);}
#spNavFlex div.logos h4 { font-size: 15px;}
#spNavFlex div.logos h4 strong { font-size: 18px;}
#spNavFlex ul.spLinks h3 a { font-size: 22px;}
#spNavFlex ul.spLinks.forms { flex-direction: row; flex-wrap: wrap; margin-left: auto; width: calc((33.333% - 40px / 3) * 2 + 15px);}
#spNavFlex ul.spLinks.forms li { width: calc(50% - 20px);}
#spNavFlex ul.spLinks.forms li:has(h3) { width: 100%;}
#spNavFlex ul.spLinks.forms li.formLink { width: 100%;}
#spNavFlex ul.spLinks.forms li.telLink { margin: 0 0 20px;}

/* list */
.guideList { gap: 30px;}
.guideList.all li:nth-child(4) { display: none;}
.guideList li { display: block; width: calc(33.33% - 20px);}
.guideList .picLink { margin: 0 0 15px; width: 100%; height: 100%; aspect-ratio: 16 / 9; overflow: hidden;}
.guideList .picLink img { width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.guideList .texts { width: 100%;}
.guideList .texts h4 { -webkit-line-clamp: 3;}
.guideList .texts p { -webkit-line-clamp: 5;}
}
@media screen and (max-width: 1020px){

/* common */
#GuideB { padding: 80px 0 0;}
#GuideB #Content article section { min-width: 0;}

#GuideB #Content article,
#GuideB #Content aside { display: block;}
#GuideB #Content aside { padding: 0; width: 100%;}

#asidePos { position: static;}
#GuideB #Content aside .toc_widget { display: none;}

/* header */
#GuideB header { height: 80px;}
#GuideB header h1,
#GuideB header .headLinks,
#GuideB header .contact,
#GuideB header .shop { display: none;}
#GuideB header p.logo { margin: 0; width: auto !important; height: auto;}
#GuideB header p.logo img { margin: 0; width: auto !important; height: 50px;}

#menuTrigger { top: 17px;}

/* MV */
#guideMV { padding: 0 20px; height: auto;}
#guideMV .bg { margin: 40px auto; padding: 30px 40px;}
#guideMV .bg h2 { margin: 0 0 20px; font-size: 30px;}

/* list */
.col-list h3.line { margin: 0 0 20px; font-size: 24px;}

/* detail */
#GuideB .col-post #toc_container { display: block;}
}
@media screen and (max-width: 860px){
#GuideB footer .upside nav ul { width: 100%;}
}
@media screen and (max-width: 768px){

#GuideB footer .upside nav ul { margin: 0 0 20px; width: 50%;}
#GuideB footer .upside nav ul:nth-of-type(1) { margin-top: 64px;}
}
@media screen and (max-width: 768px){

#GuideB #aboutShop #ShopLeft { display: block;}

#GuideB footer .feature ul li { width: 33.333%; vertical-align: top;}
#GuideB footer .feature ul li li { width: 100%;}
#GuideB footer .feature ul li ul { display: block; margin: 5px 0 20px; padding: 0 10px;}
}
@media screen and (max-width: 760px){

/* common */
#GuideB #Breadcrumbs { margin: 0; padding: 20px;}

/* header */
#spNav { align-items: start; padding: 20px;}

#spNavFlex { gap: 40px 20px;}
#spNavFlex div.logos { display: flex; flex-wrap: wrap; gap: 0 20px; width: 100%;}
#spNavFlex div.logos .logoW { display: block; margin: 0 auto; width: 60%; max-width: 320px;}
#spNavFlex div.logos h4 { width: 100%;}
#spNavFlex div.logos .bannar { margin: 0 !important; width: calc(50% - 10px);}
#spNavFlex ul.spLinks { width: calc(50% - 10px);}
#spNavFlex ul.spLinks li:last-child h3 { margin-top: 40px;}
#spNavFlex ul.spLinks.forms { gap: 0 20px; width: 100%;}
#spNavFlex ul.spLinks.forms li { width: calc(50% - 10px);}
#spNavFlex ul.spLinks.forms li:has(h3) { width: 100%;}

/* MV */
#guideMV .bg { margin: 40px auto; padding: 30px;}
#guideMV .bg h2 { margin: 0 0 20px; font-size: 26px;}

/* list */
.col-list h3.line { font-size: 22px;}

.guideList { gap: 20px;}
.guideList.all li:nth-child(4) { display: block;}
.guideList li { display: block; width: calc(50% - 10px);}
}
@media screen and (max-width: 500px){

/* common */
#asidePos { top: 60px;}

#GuideB footer .logo { width: 60%; min-width: 260px;}
#GuideB footer .upside nav ul { width: 100%;}

#GuideB footer .feature > ul { padding: 40px 0 20px;}
#GuideB footer .feature ul li { width: 48%;}

/* header */
#GuideB  { padding: 60px 0 0;}
#GuideB header { height: 60px;}
#GuideB header .headInner { padding: 15px 60px 0 10px;}
#GuideB header p.logo img { height: 30px;}

#menuTrigger { top: 13px; right: 10px; padding: 25px 0 0; width: 35px; height: 35px;}
#menuTrigger:before { height: 2px;}
#menuTrigger:after { top: 9px; height: 2px;}
#menuTrigger a:before { top: 18px; height: 2px;}
#menuTrigger span { font-size: 10px;}
#menuTrigger span.close { font-size: 9px;}

#menuTrigger.active:before { -webkit-transform: translate(0, 8px) rotate(225deg); transform: translate(0, 8px) rotate(225deg);}
#menuTrigger.active a:before { -webkit-transform: translate(0, -10px) rotate(-225deg); transform: translate(0, -10px) rotate(-225deg);}

#spNavFlex div.logos h4 { font-size: 14px;}
#spNavFlex div.logos h4 strong { font-size: 16px;}
#spNavFlex div.logos .bannar { flex-direction: column; padding: 0 0 15px; height: auto;}
#spNavFlex div.logos .bannar figure { margin: 0 0 15px; width: 100%; height: 60px;}
#spNavFlex div.logos .bannar::after { top: auto; bottom: 20px; right: 10px;}
#spNavFlex div.logos .bannar .text { padding: 0 20px 0 5px; font-size: 14px;}

#spNavFlex ul.spLinks h3 a { font-size: 18px;}
#spNavFlex ul.spLinks a { font-size: 14px;}
#spNavFlex ul.spLinks img { margin: 0 5px 0 0; width: 38px;}
#spNavFlex ul.spLinks img.icon { width: 28px;}

/* list */
.guideList { gap: 30px;}
.guideList li { display: block; width: 100%;}
}