@charset "utf-8";

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

	YOKOHAMA Display Museum CSS
	ATHR : Assiette Ltd.
	DATE : 2021/11

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

/*-------------------------------------
	reset
-------------------------------------*/

body,
h1, h2, h3, h4, h5, h6,
p, address, blockquote, pre, div,
dl, dt, dd, ol, ul, li,
th, td,
form, fieldset, input, textarea { margin: 0; padding: 0; outline: none;}

input{ vertical-align : middle ;}

select { margin: 0; }

abbr, acronym { border:0 none; }
q::before, q::after { content:""; }
img { width: auto; max-width: 100%; height: auto; max-height: 100%; border:0 none; vertical-align:bottom; }
object { outline:none; }
table { border-collapse: collapse; border-spacing: 0; word-break: break-all; word-wrap: break-word; }
caption { text-align:left; }
th,
td { text-align:left; vertical-align:middle; empty-cells:show; }
fieldset { border:0 none; }
label { cursor: pointer; }
iframe { margin: 0; padding: 0; width: 100%; overflow:auto; border: none;}
p, address, blockquote, pre, div,
abbr, acronym, dfn, cite, q, code, kbd, samp, var,
dl, ol, ul,
caption, th { font-weight: 500; font-style:normal; }
em, strong, optgroup { font-weight:900; font-style:normal; }

main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { position:relative; display:block; margin:0 0 0 0; padding:0 0 0 0; }

/* 全対応 */
*, *:before, *:after {
	font-family: "游ゴシック体", "游ゴシック Medium", "Yu Gothic", "Yu Gothic Medium","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Helvetica, sans-serif;
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 { position: relative; margin: 0 0 2rem; color: #262C33; font-size: 2rem; font-weight: 900; font-style: normal; line-height: 1.2; text-align: center; }


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

html { position: relative; width: 100%; min-height: 100%; font-size: 7.5px; text-align: center; background: #FFF; }

body {
	padding: 0;
	width: 100%;
	color:  #333;
	text-align: center;
	line-height: 1;
	-webkit-text-size-adjust : none;
	 -webkit-text-size-adjust: 100%;
	}


/* links */
a, input, object{ outline:none; }

a {
	margin: 0;
	padding: 0;
	border: 0;
	color: #000;
	text-decoration: underline;
	vertical-align: baseline;
	background: transparent;
	transition: all 0.3s ease;
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	}

a:hover { text-decoration: none; }
a:visited {	color: #003461; }
a:active { color: #003461; text-decoration:none; }

a *,
a:before,
a:after { transition: all 0.3s ease; }

::selection { color: #FFF !important; background: rgba(1, 49, 97, 0.8); }
::-moz-selection { color: #FFF !important; background: rgba(1, 49, 97, 0.8); }

/* disabled */
.btn:disabled:hover{ cursor: default; opacity:.6; pointer-events: none; }

/* table */
table { width: 100%; border-top: 1px solid #333;}
th, td { display: block; padding: 1rem; font-size: 1.6rem; line-height: 1.4; text-align: left; border-bottom: 1px solid #333; }
table td { border-bottom: 1px solid #333; }
table a img { position: relative; top: -0.2rem; margin: 0 0.5rem 0 0; width: 1.4rem; vertical-align: middle; }

/* list dl リスト・定義 */
ul { margin: 0; padding: 0; list-style: none; list-style-position: inside; }
ol { margin: 0; padding: 0; }

li { position: relative; text-align: left; line-height: 140%; list-style: none; }

/* 文字装飾 */
em { color: #971B20; font-weight: normal;}
small { font-size: 70%;}
strong.red { color: #F00;}
i { font-style: normal; font-weight:  normal;}
u { text-decoration: none;}

mark { margin: 0 0.1rem; padding: 0 0.1rem; font-style: normal; font-weight: bold; background: linear-gradient(transparent 60%, rgba(0, 128, 255, 0.2) 60%);}

/* 罫線 */
hr {
	clear: both;
	position: relative;
	display: block;
	margin: 4rem auto;
	width: 100%;
	height: 1px;
	border: none;
	border-bottom: 1px dotted #CCC;
	text-shadow: none;
	z-index: -20;
	}

/* form関係 */
input, select, optgroup, textarea, label, kbd { vertical-align: middle; }

input[type="hidden"]{ display: none;}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="url"],
select,
textarea {
	display: inline-block;
	margin: 0;
	padding: 0 1rem;
	width: 100%;
	height: 4rem;
	color: #111;
	font-size: 16px;
	line-height: 1;
	background: #FFF;
	border: 1px solid #333;
	border-radius: 5px;
	box-shadow: none;
	box-sizing: border-box;
	vertical-align: baseline;
	transition: all 0.3s ease;
}

input:hover,
select:hover,
textarea:hover { border-color: #013161; box-shadow: 0 2px 10px rgba(1, 49, 97, 0.2); }

input:focus:not(.btn),
select:focus,
textarea:focus { background-color: #FFF !important; border-color: #013161 !important; box-shadow: 0 3px 15px rgba(1, 49, 97, 0.5); outline: none; }

input:disabled,
select:disabled,
textarea:disabled { background-color: #f6fafd; border-color: #abc0d4; pointer-events: none; }

fieldset { display: inline-block; margin: 0 1rem 0 0; }

input[type="tel"] { width: 17.3rem; }
input[type="number"] { width: 17.3rem; -moz-appearance:textfield; }
input[type="number"].age { width: 8rem; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

input.tel { margin: 0 0.5rem 0 0; width: 23% !important; max-width: 10rem; }
input.tel ~ .tel { margin: 0 0.5rem; }

input::-ms-clear,
input::-ms-reveal { visibility:hidden; }

textarea { padding: 1rem 0.8rem; max-width: 100%; height: 15rem; text-align: left !important; vertical-align: text-top;}

:placeholder-shown { color: #999 !important; }
::-webkit-input-placeholder { color: #999 !important; }
:-moz-placeholder { color: #999 !important; }
::-moz-placeholder { color: #999 !important; }
:-ms-input-placeholder { color: #999 !important; }

select { padding: 0 0 0 0.5rem; width: auto; }
select option { margin: 0; padding: 3px 8px; font-size: 16px; font-style: normal; background: #FFF; }
select option:checked { color: #FFF !important; background-color: #093186; }
select option:disabled { color: #999 !important; background: #FFF; }

.errorMsg { position: relative; margin: 0 0 2rem; padding: 1.5rem; color: #F00; line-height: 1.4; text-align: center; background: #fff0f0;}
.errorMsg:before { content: ""; display: inline-block; position: relative; top: -0.1rem; margin: 0 0.5rem 0 0; width: 2.2rem; height: 2.2rem; background: url("/images/common/icon-alert.svg") no-repeat; background-size: contain; vertical-align: middle;}

.errorRow th,
.errorRow td { background: #fff0f0;}
.errorRow input { border-color: #F00;}
.errorRow input:hover { border-color: #F00; box-shadow: 0 2px 10px rgba(255, 0, 0, 0.2); }
.errorRow input:focus { border-color: #F00 !important; box-shadow: 0 3px 15px rgba(255, 0, 0, 0.5); outline: none; }

/*　radio, checkbox　*/
input[type=radio],
input[type=checkbox] { display: inline-block; position: relative; top: -1px; margin-right: 0.6rem; box-shadow: none !important; vertical-align: middle; }

label { display: inline-block; position: relative; line-height: 1.4; cursor: pointer; }
/*
@media (min-width: 1px) {

input[type=radio],
input[type=checkbox] { display: none; margin: 0; }
	
input[type=radio] + .choices,
input[type=checkbox] + .choices { padding: 0 0 0 2.5rem; line-height: 1.8rem; }

input[type=radio] + .choices:before,
input[type=checkbox] + .choices:before { content: ""; position: absolute; display: block; top: 0.1rem; left: 0; width: 1.8rem; height: 1.8rem; background: #FFF; border: 1px solid #000; border-radius: 3px; transition: all ease 0.3s; }
input[type=radio] + .choices:before { border-radius: 2rem; }

label:hover input[type=radio] + .choices:before,
label:hover input[type=checkbox] + .choices:before { border-color: #013161; box-shadow: 0 2px 10px rgba(1, 49, 97, 0.3); }

input[type=radio]:checked + .choices:before,
input[type=checkbox]:checked + .choices:before { background: #013161; border-color: #013161; }

input[type=radio] + .choices:after,
input[type=checkbox] + .choices:after { content: ""; position: absolute; display: block; top: 0.6rem; left: 0.5rem; width: 0.8rem; height: 0.8rem; -webkit-transform: scale(0,0); transform: scale(0,0); transition: all ease 0.3s; }
input[type=radio] + .choices:after { background: #FFF; border-radius: 0.8rem; }
input[type=checkbox] + .choices:after {
    margin: -0.4rem 0 0 0.1rem;
    width: 0.6rem;
    height: 1.3rem;
    background: none;
    border-right: 3px solid #FFF;
    border-bottom: 3px solid #FFF;
    -ms-transform: rotate(45deg) scale(0,0);
    -webkit-transform: rotate(45deg) scale(0,0);
    transform: rotate(45deg) scale(0,0);
}

input[type=radio]:checked + .choices::after { -webkit-transform: scale(1,1); transform: scale(1,1); }
input[type=checkbox]:checked + .choices::after { -ms-transform: rotate(45deg) scale(1,1); -webkit-transform: rotate(45deg) scale(1,1); transform: rotate(45deg) scale(1,1); }
}
*/
/* btn */
.btn {
	display: inline-block;
	position: relative;
	padding: 1.3rem 2rem;
	width: auto;
    min-width: 20rem;
	color: #FFF !important;
	font-size: 1.6rem;
	font-weight: 900;
	text-align: center;
	text-decoration: none !important;
	line-height: 1.4;
	background: #013161;
	border: none;
	vertical-align: middle;
	cursor: pointer;
	outline: none !important;
	z-index: 0;
	transition: all 0.3s ease;
}
.btn:after { content: ""; position: absolute; top: -0.2rem; left: -0.2rem; width: calc(100% + 0.4rem); height: calc(100% + 0.4rem); border: 1px solid #FFF; transition: all 0.3s ease; }
.btn:hover:after { top: 0.2rem; left: 0.2rem; width: calc(100% - 0.4rem); height: calc(100% - 0.4rem);}

.btn .icon { position: relative; top: -0.1rem; left: 0; display: inline-block; margin: 0 0 0 0.5rem; width: 1.4rem; height:1.4rem; vertical-align: middle; background: center no-repeat; background-size: contain; transition: all 0.3s ease; }
.btn:hover .icon { left: 5px;}

.btn .icon.arrowR { background-image: url("/images/common/arrowRW.svg");}

.btn.back .icon { margin: 0 0.5rem 0 0;}
.btn.back .icon.arrowL { background-image: url("/images/common/arrowLG.svg");}
.btn.back:hover .icon { left: -5px;}

.btn .icon.plus:before,
.btn .icon.plus:after { content: ""; position: absolute; top: 50%; left: 0; margin: -0.1rem 0 0; width: 100% ; height: 0.2rem; background: #FFF; transition: all 0.3s ease;}
.btn .icon.plus:after { top: 0; left: 50%; margin: 0 0 0 -0.1rem; width: 0.2rem; height: 100% ;}
.btn:hover .icon.plus { left: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg);}

/* .round */
.btn.round,
.btn.round:after { border-radius: 99rem; }

/* .small */
.btn.small { padding: 0.6rem 1.5rem; min-width: 0; font-size: 1.3rem; }
.btn.small .icon { width: 1.0rem; height:1.0rem;}

/* .large */
.btn.large { padding: 1.8rem 3rem; }

/* .white */
.btn.white { color: #013161 !important; background: #FFF; box-shadow: 0 0.2rem 1rem rgba(1, 49, 97, 0.2);}
.btn.white:after { border-color: #013161; }
.btn.white:hover { box-shadow: 0 0.5rem 1.5rem rgba(1, 49, 97, 0.3);}

.btn.white .icon.arrowR { background-image: url("/images/common/arrowR.svg");}

.btn.white .icon.plus:before,
.btn.white .icon.plus:after { background: #013161;}

/* .red */
.btn.red { background: #FF00A6;}

/* .darkred */
.btn.darkred { background: #D00;}

/* .light */
.btn.light { color: #013161 !important; background: rgba(1, 49, 97, 0.2);}
.btn.light:after { border-color: #013161; }

.btn.light .icon.arrowR { background-image: url("/images/common/arrowR.svg");}

.btn.light .icon.plus:before,
.btn.light .icon.plus:after { background: #013161;}

/* .gray */
.btn.gray { color: #555 !important; font-weight: 500; background: #DDD;}
.btn.gray:after { border-color: #FFF; }
.btn.gray:hover { color: #333 !important; background: #CCC;}

.btn.gray .icon.arrowR { background-image: url("/images/common/arrowRG.svg");}

.btn.gray .icon.plus:before,
.btn.gray .icon.plus:after { background: #888;}

/* .ghost */
.btn.ghost { color: #FFF !important; background: rgba(1, 49, 97, 0.2); box-shadow: none;}
.btn.ghost:after { border-color: #FFF; }
.btn.ghost:hover { box-shadow: none;}

.btn.ghost .icon.plus:before,
.btn.ghost .icon.plus:after { background: #FFF;}

/* 20230822追加 .pink */
.btn.pink { color: #FFF !important; background: #FF0054; box-shadow: 0 0.2rem 1rem rgba(1, 49, 97, 0.2);}
.btn.pink:after { border-color: #FFF; }
.btn.pink:hover { box-shadow: 0 0.5rem 1.5rem rgba(1, 49, 97, 0.3);}

.btn.pink .icon.arrowR { background-image: url("/images/common/arrowR.svg");}

.btn.pink .icon.plus:before,
.btn.pink .icon.plus:after { background: #FF0054;}

/* for input */
.inputWrap { display: inline-block; position: relative;}

.btn ~ .inputAfter { content: ""; position: absolute; top: -0.2rem; left: -0.2rem; width: calc(100% + 0.4rem); height: calc(100% + 0.4rem); border: 1px solid #FFF; transition: all 0.3s ease; pointer-events: none;}
.btn:hover ~ .inputAfter { top: 0.2rem; left: 0.2rem; width: calc(100% - 0.4rem); height: calc(100% - 0.4rem);}

.btn.white ~ .inputAfter,
.btn.light ~ .inputAfter { border-color: #013161; }
.btn.gray ~ .inputAfter,
.btn.ghost ~ .inputAfter,
.btn.pink ~ .inputAfter { border-color: #FFF; }


/*-----------------------------------------
	header
-----------------------------------------*/
header,
#logo,
#logo span,
#logo img,
#headNav .search,
#headNav #langBtn,
#headNav .langMenu,
#headNav #searchBtn,
#headNav .searchBox,
#headNav .submenu,
#menuTrigger:before,
#menuTrigger:after,
#menuTrigger a:before,
#spNav { transition: all 0.5s ease;}

.searchBox p { position: relative; margin: 2rem; background: #FFF; border-radius: 4px;}
.searchBox p input { border-color: transparent !important;}
.searchBox p button { width: 4rem; background: #FFF url("/images/common/icon-search.svg") center no-repeat; background-size: 2.4rem; border: none; border-radius: 4px; cursor: pointer; outline: none;}
.searchBox p input:hover,
.searchBox p button:hover,
.searchBox p input:focus,
.searchBox p button:focus { border-color: transparent !important; box-shadow: none !important; outline: none !important;}

.snsLinks { color: #FFF; font-size: 1.4rem; font-weight: 900; text-align: center;}
.snsLinks strong { position: relative; top: 0.2rem;}
.snsLinks a { display: inline-block; margin: 0 0 0 1rem; vertical-align: middle;}
.snsLinks a:first-of-type { margin: 0 0 0 2rem;}
.snsLinks a img { width: 2.4rem;}
.snsLinks a img.footXicon { width: 1.7rem;}
.snsLinks a:hover img { opacity: .6;}

header { position: fixed; top: 0; left: 0; width: 100vw; max-width: 100%; height: 5.5rem; box-shadow: 0 0 0.5rem rgba(1, 49, 97, 0.1); z-index: 200;}

#logo { margin: 0; padding: 0.7rem 0 0 5rem; height: 5.5rem; text-align: left; background: #FFF;}
#logo a { display: inline-block; color: #013161 !important; font-size: 1.1rem; text-decoration: none;}
#logo a:hover { opacity: .6;}
#logo span { display: inline-block; margin: 0 0 0.3rem; height: 2.4rem;}
#logo img { margin-top: 0.8rem; height: 3.2rem !important; opacity: 1 !important;}

#headNav { position: absolute; top: 50%; right: 1rem; margin: -1.2rem 0 0;}
#headNav li { display: none; margin: 0 0 0 1rem; vertical-align: middle;}
#headNav a { display: block;}
#headNav a .notice {position: absolute;top: -0.7rem;right: -0.7rem;width: 1.6rem;height: 1.6rem;color: #FFF !important;font-size: 1rem;line-height: 1.6rem;text-align: center;background: #FF00A6;border-radius: 2rem;}
#headNav .search { display: inline-block;}
#headNav #langBtn,
#headNav #searchBtn { width: 2.4rem; height: 2.4rem; font-size: 0; background: url("/images/common/icon-userB.svg") center no-repeat; background-size: contain;}
#headNav #searchBtn { position: relative; background-image: url("/images/common/icon-searchB.svg");}
#headNav #searchBtn span,
#headNav #langBtn span { display: none;}
#headNav .searchBox { position: absolute; top: calc(100% + 1.5rem); right: -1rem; width: 100vw; height: 0; background: rgba(1, 49, 97, 0.5); overflow: hidden; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}

#headNav .mypage { display: inline-block;}
#headNav .mypage a { font-size: 1.4rem; text-decoration: none; transform: translateY(2px);}
#headNav .mypage a strong { display: none;}
#headNav .mypage.before { display: inline-block; padding: 0;}

#headNav .language { display: inline-block; position: relative;}
#headNav #langBtn { position: relative; background-image: url("/images/common/icon-global.svg");}
#headNav .langMenu { position: absolute; top: calc(100% + 1.5rem); right: -4rem; width: 14rem; height: 0; background: #FFF; overflow: hidden; box-shadow: 0 0 0.5rem rgba(1, 49, 97, 0.1); z-index: 200;}
#headNav .langMenu li { display: block; margin: 0; border-bottom: 1px solid rgba(1, 49, 97, 0.2);}
#headNav .langMenu li:last-child { border: none;}
#headNav .langMenu li.current a { background: rgba(1, 49, 97, 0.2);}
#headNav .langMenu a { display: block; width: 100%; font-size: 1.6rem; line-height: 5.2rem; text-align: center; text-decoration: none;}

#headNav #searchBtn.active ~form .searchBox { height: 8rem;}
#headNav #langBtn.active ~ .langMenu { height: 16rem;}

.ui-widget.ui-widget-content { border-color: #093186 !important; box-sizing: content-box; z-index: 1000;}
.ui-widget.ui-widget-content .ui-state-active { background: #0037af;}
.ui-menu .ui-menu-item { margin: 5px !important; font-size: 1.6rem;}

#headNav .submenu {
    position: fixed;
    top: 11rem;
    left: 0;
    width: 100vw;
	height: 0;
    background: #FFF;
    box-shadow: 0 0 0.5rem rgba(1, 49, 97, 0.1);
	overflow: hidden;
	z-index: 10;
}
#headNav .submenu ul { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 6rem 2rem; max-width: 184rem;}
#headNav .submenu li { margin: 0; padding: 2rem 1rem; width: 20%;}
#headNav .submenu a { display: flex; align-items: center; color: #000 !important;}
#headNav .submenu figure { position: relative; margin: 0 2rem 0 0; width: 8rem; height: 8rem; background: #FFF; border-radius: 8rem; overflow: hidden;}
#headNav .submenu figure:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(1, 49, 97, 0.2);
    border-radius: 8rem;
}
#headNav .submenu span { width: calc(100% - 10rem); font-size: 1.9rem; line-height: 1.2; text-align: left;}

#headNav li.catSub > a:hover { opacity: 1;}
#headNav li.catSub .submenu { position: absolute; top: 86%; width: 40rem;}
#headNav li.catSub .submenu ul { padding: 2rem;}
#headNav li.catSub .submenu li { width: 100%;}
#headNav li.catSub .submenu span { font-size: 1.2rem;}
#headNav li.loginSub .submenu { position: absolute; top: calc(100% + 1.5rem); left: -23rem; width: 33rem;}
#headNav li.loginSub .submenu li { padding: 0; width: 100%;}
#headNav li.loginSub .submenu ul { padding: 1rem;}
#headNav li.loginSub .submenu a { padding: 1.5rem; font-size: 1.6rem; text-decoration: none;}
#headNav li.loginSub .submenu img { position: relative; top: 0; margin: 0 0.5rem 0 0; width: 2.2rem;}

#headNav li:hover .submenu { height: 60rem;}
#headNav li.catSub:hover .submenu { height: 52rem;}
#headNav li.loginSub:hover .submenu { height: 12.4rem;}

#menuTrigger {display: block;position: absolute;top: 1.2rem;left: 1rem; padding: 2.6rem 0 0;width: 2.8rem;cursor: pointer;z-index: 999;}
#menuTrigger a { display: block; color: #111 !important; font-size: 0.9rem; font-weight: 900; 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: 2px; background: #535353; border-radius: 3px;}
#menuTrigger:after { top: 0.9rem; }
#menuTrigger a:before { top: 1.8rem; }
#menuTrigger span.close { display: none; color: #FFF; }

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

#spNav { position: absolute; top: 5.5rem; left: 0; width: 100%; height: 0; background: rgba(1, 49, 97, 0.5); overflow: hidden; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}
#spNav ul { margin: 0 2rem 6rem; border-top: 1px solid #FFF;}
#spNav li { display: block; margin: 0; width: 100%; font-size: 1.8rem; border-bottom: 1px solid #FFF;}
#spNav li:not(:first-child):not(:last-child),
#spNav li:not(:nth-child(2)):not(:last-child),
#spNav li:not(:nth-child(3)):not(:last-child) { border-bottom-color: rgba(255, 255, 255, 0.6);}
#spNav li a { display: block; padding: 2rem 0; color: #FFF !important; font-size: 2rem; text-decoration: none;}
#spNav li a:hover { background: rgba(255, 255, 255, 0.6);}
#spNav li.sub { border: none;}
#spNav li.sub:nth-last-child(3) { margin-top: 2rem;}
#spNav li.sub a { font-size: 1.6rem;}
#spNav .snsLinks { padding: 0 0 2rem;}

#spNav .spNavTitle { margin: 2rem 2rem 1rem; color: #FFF; font-size: 2rem; font-weight: bold; text-align: left;}
#spNav .spNavTitle:first-of-type { margin-top: 4rem;}

.open header { box-shadow: none;}
.open #logo { background: #013161;}
.open #logo a { color: #FFF !important; background: url("/images/common/logoW.svg") center no-repeat; background-size: contain;}
.open #logo img { opacity: 0 !important;}
.open #headNav .mypage a { color: #FFF !important;}
.open #headNav li.loginSub .submenu a { color: #FFF !important; background: none;}
.open #headNav li.loginSub .submenu img { filter: invert(93%) sepia(70%) saturate(0%) hue-rotate(128deg) brightness(107%) contrast(101%);}
.open #headNav .search { margin: 0 -2rem 0 0; opacity: 0; pointer-events: none;}
.open #headNav .submenu { background: #013161;}
.open #headNav #langBtn { background-image: url("/images/common/icon-globalW.svg");}
.open #headNav #langBtn span { color: #FFF !important;}
.open #headNav .langMenu { right: -1rem;}
.open #spNav { height: calc(100vh - 5.5rem); overflow: auto;}

/* iconNav */
#iconNav { top: 0; z-index: -1; background: #013161; transition: ease .3s;}
#iconNav li { position: static; margin: 0 !important; width: 25%; border-left: 1px solid #FFF; }
#iconNav li:first-child { border: none !important;}
#iconNav a {
	display: block;
	padding: 5rem 0 0.6rem;
	color: #FFF !important;
	font-size: clamp(0.9rem, 2vw, 1.6rem);
	text-align: center;
	text-decoration: none;
	background: center 1rem no-repeat;
	background-size: 3.6rem auto;
}

#iconNav li.onlineStore a { background-image: url("/images/common/icon-cartW.svg");}
#iconNav li.coordinate a { letter-spacing: -0.2rem; background-image: url("/images/common/icon-coordinateW.svg");}
#iconNav li.category a { background-image: url("/images/common/icon-layoutW.svg");}
#iconNav li.shop a { background-image: url("/images/common/icon-storeW.svg");}
#iconNav li.mypage a { background-image: url("/images/common/icon-userW.svg");}
#iconNav li.connect a { background-image: url("/images/common/icon-connectW.svg");}
#iconNav li.login a { background-image: url("/images/common/icon-loginW.svg");}

#iconNav .acd-content { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: rgb(1, 49, 97); z-index: 100;}
#iconNav .acd-content ul { display: block; padding: 1rem 2rem;}
#iconNav .acd-content li { width: 100%; border: none; border-top: 1px solid #FFF;}
#iconNav .acd-content li a {
	padding: 1.5rem 2rem;
	font-size: 1.5rem;
	background: url("/images/common/arrowRW.svg") right 1rem center no-repeat;
	background-size: 1rem auto;
	text-align: left;
}

.scrolled #iconNav { top: -10rem;}


/*-------------------------------------
	Common
-------------------------------------*/

body { opacity: 0; transition: 1s; transition-delay: .3s;}
body.noLoaded { opacity: 1; transition: none;}
body.loaded { opacity: 1;}

p:empty { display: none; }
p:last-child { margin-bottom: 0 !important; }

.br { display: inline-block; }
.pc { display: none !important; }

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

.rightBtn { margin: -4.7rem 0 2rem; text-align: right;}

.enlargeImg { display: block; overflow: hidden;}
.enlargeImg img { transition: all 0.4s ease-in-out;}
a:hover .enlargeImg img,
a.enlargeImg:hover img { -webkit-transform: scale(1.05); transform: scale(1.05);}

.square figure { position: relative; padding: 100% 0 0;}
.square .enlargeImg { position: absolute; top: 0; left: 0; width: 100%; padding: 100% 0 0;}
.square .enlargeImg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.square.long figure,
.square.long .enlargeImg { padding: 150% 0 0;}
.square.long .enlargeImg img { object-fit: contain;}

main { display: block; padding: 12.5rem 0 0;}
main section { padding: 3rem 2rem; overflow: hidden;}
main section.gray { margin: 1rem 0; padding: 4rem 2rem; background: #f1f5f9;}
/* 220719 ▼文字サイズ修正依頼対応済み▼ main div,main p { font-size: 1.6rem; text-align: left;}*/
main div,main p { font-size: 1.8rem; text-align: left;}
main h2.line { padding: 0 0 1rem; border-bottom: 1px solid #000;}

/* breadCrumbs */
#breadCrumbs { margin: 0 auto; padding: 2rem 1rem 0 2rem; max-width: 184rem;}
#breadCrumbs li { display: inline-block; margin: 0 1rem 0 0; vertical-align: top;}
#breadCrumbs li:after {  content: ""; display: inline-block; position: relative; top: -0.1rem; margin: 0 0 0 1rem; width: 1.4rem; height: 1.4rem; background: url("/images/common/arrowRBt.svg") no-repeat; background-size: contain; vertical-align: middle;}
#breadCrumbs li:last-child:after { display: none;}
#breadCrumbs a { text-decoration: none;}
#breadCrumbs a:hover { text-decoration: underline;}

/* flexList */
.flexList { margin: 0 -1rem;}
.flexList li { margin: 0 1rem 2rem; width: calc(50% - 2rem);}
.flexList a { display: block; text-decoration: none;}

/* ▼ 行間修正依頼対応済み▼ .flexList figcaption { margin: 0.5rem 0 0; font-size: 1.4rem; line-height: 1.2;} */
.flexList figcaption {
	margin: 0.5rem 0 0;
	font-size: 1.4rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
    word-break: break-word;
}
.flexList a:hover figcaption,
.flexList a:hover figcaption span { text-decoration: underline;}

.flexList.coordinate,
.flexList.catalog { margin: 0 -0.5rem 1rem;}
.flexList.coordinate li,
.flexList.catalog li { margin: 0 0.5rem 1rem; width: calc(33.33% - 1rem);}
.flexList.coordinate figcaption { display: none;}

.flexList.two li { width: calc(100% - 2rem);}
.flexList.six li { width: calc(33.33% - 2rem);}
.flexList li figcaption h2,
.flexList li figcaption h3,
.flexList li figcaption h4,
.flexList li figcaption h5,
.flexList li figcaption h6 { margin: 1rem 0 0.5rem !important;}

.flexList.lineList li { border: 1px solid #DDD;}
.flexList.lineList li a { padding: 0 0 1rem;}
.flexList.lineList figcaption { margin: 0; padding: 1rem 1rem 0; border-top: 1px solid #ddd;}

.flexList.whiteTitle figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 1.5rem 2rem;
	line-height: 1.4;
	background: rgba(255, 255, 255, 0.8);
	text-decoration: none !important;
}

.flexList.whiteTitle figcaption span {
	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;
}
/*
.flexList.sarchResult .enlargeImg { position: relative; padding: 100% 0 0;}
.flexList.sarchResult .enlargeImg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
*/
/* moreList */
.moreList .hiddenItem,
.hiddenBtn { margin: 0 !important; padding: 0 !important; width: 0; height: 0; opacity: 0; overflow: hidden;}
.moreList ~ .center { margin: 2rem 0 0;} 

/* price */
.price {margin: 0 0 0.5rem; padding: 0 0 0.5rem; line-height: 1; border-bottom: 1px solid #000;}

/* catTitle */
.catTitle { padding: 0 0 1.5rem; font-size: 2.8rem; text-align: center; border-bottom: 1px solid #333;}

/* bannerLink */
main section:last-child .bannerLink { margin-bottom: -2rem;}
.bannerLink { margin: 0 -2rem; padding: 6rem 2rem; text-align: center; background: center no-repeat; background-size: cover;}
.bannerLink h3 { color: #FFF; font-size: 3rem; text-shadow: 0 0 1rem rgba(1, 49, 97, 0.9);}

.bannerLink.company { padding: 3rem 2rem; background-image: url("/images/common/company_banner.png");}
.bannerLink.company img { margin: 0 0 1rem; max-width: 60%;}
.bannerLink.gousei { background-image: url("/images/common/banner01.jpg");}
.bannerLink.coordinate { background-image: url("/images/common/banner02.jpg");}
.bannerLink.howto { background-image: url("/images/common/banner01.jpg");}
.bannerLink.arrange { background-image: url("/images/common/banner03.jpg");}
.bannerLink.contest { background-image: url("/images/common/banner04.jpg");}
.bannerLink.store { background-image: url("/images/common/banner01.jpg");}

/* category */
li .category { display: inline-block; margin: 0.5rem 1rem 0.5rem 0; padding: 0 1rem; line-height: 1.6; text-decoration: none !important;}
li .category.shop { color: #00C1FE; background: #E6F9FF;}
li .category.arrange { color: #FE00B2; background: #FFEEFA;}
li .category.coordinate { color: #fe8700; background: #fff5ee;}
li .category.green { color: #00c42a; background: #eefff2;}
/* category 20230119追加*/
li .category.floor { color: #8600c4; background: #f8eeff;}

/* flex */
.searchBox p,
#spNav ul,
#iconNav ul,
#infoList a,
.flexList,
.recommendSlide .slick-dots,
#categoryList .categoryL,
#categoryList .categoryL h3 a,
#brandList,
#catFlex,
#catSide .sideDd.price,
#catMain .categoryL a,
.sorting,
.itemList ul,
#navSlide .slick-track,
#detailCont dl,
.itemList li .enlargeImg,
#cartSteps,
.listCtrl,
.orderList tr,
.tableFlex,
.orderedList tr,
#myList,
.paging,
.searchList tr,
#orderDetail,
#orderDetail dl,
.linkBtns,
.borderBox ol li,
.flexBlock .flexBlock,
.calendars,
.pagination,
.wpPage .mainVisualB > div,
.wpPage .textGroupFR > div,
.wpPage .textGroupFL > div,
.wpPage .imgTextGroupFR > div,
.wpPage .imgTextGroupFL > div,
.wpPage .imgTextGroupL > div,
.wpPage .imgTextGroupM > div,
.wpPage .imgTextGroupM > div > div,
.wpPage .imgTextGroupS > div,
.wpPage .imgTextGroupF > div,
.wpPage .imgTile4 > div,
.wpPage .imgTile9 > div,
.wpPage .imgTile16 > div,
.wpPage .imgTileL > div,
.wpPage .imgTileR > div,
.wpPage .tabChange,
.wpPage .menuGroupA ul,
.wpPage .menuGroupA li,
.wpPage .menuGroupA a,
.wpPage .menuGroupB ul,
.wpPage .menuGroupB li,
.wpPage .menuGroupB a,
.wpPage .menuGroupC ul,
.wpPage .menuGroupC li,
.wpPage .menuGroupC a,
.wpPage .menuGroupD ul,
.wpPage .menuGroupD li,
.wpPage .menuGroupD a,
.wpPage .menuGroupE,
.wpPage .menuGroupE li,
.wpPage .menuGroupE a,
.wpPage .menuGroupF,
.wpPage .menuGroupF ul,
.wpPage .menuGroupF li,
.wpPage .menuGroupF a,
.wpPage .menuGroupG,
.wpPage .menuGroupG li,
.wpPage .menuGroupG a,
.wpPage .listGroup2 > div,
.wpPage .listGroup3 > div,
#connectHead,
#connectCat,
.connectCatDiv ul,
.narrowChecks,
#connectSpecialList,
.cdCategory,
.cfTitle,
#cdPortfolio,
.cmTop,
#cmList .cmTitles,
.clMemList,
.clMemBlock { display: -webkit-box; display: -ms-flexbox; display: flex; }

#categoryList .categoryL h3 a,
#cartSteps,
.listCtrl,
.paging,
.borderBox ol li,
.pagination,
.wpPage .menuGroupA li,
.wpPage .menuGroupA a,
.wpPage .menuGroupB li,
.wpPage .menuGroupB a,
.wpPage .menuGroupC li,
.wpPage .menuGroupC a,
.wpPage .menuGroupD li,
.wpPage .menuGroupD a,
.wpPage .menuGroupE li,
.wpPage .menuGroupE a,
.wpPage .menuGroupF li,
.wpPage .menuGroupF a,
.wpPage .menuGroupG li,
.wpPage .menuGroupG a,
#connectHead,
.cfTitle,
#cmList .cmTitles,
.clMemBlock { align-items: center;}

.wpPage .imgTextGroupM > div > div { align-items: flex-start;}

#navSlide .slick-track,
.wpPage .imgTextGroupF > div,
.connectForm.comp .cfTitle { justify-content: center;}

.listCtrl,
.paging,
.linkBtns,
#connectHead { justify-content: space-between;}

.listCtrl,
.paging,
.linkBtns { justify-content: space-between;}

#spNav ul,
.flexList,
#categoryList .categoryL,
#brandList,
#catFlex,
.itemList ul,
#navSlide .slick-track,
#detailCont dl,
.listCtrl.bottom,
.orderList tr,
.orderedList tr,
#myList,
#searchCart .tableFlex,
.paging,
.searchList tr,
#orderDetail,
#orderDetail dl,
.linkBtns,
.calendars,
.wpPage .imgTextGroupFR > div,
.wpPage .imgTextGroupFL > div,
.wpPage .imgTextGroupM > div,
.wpPage .imgTextGroupS > div,
.wpPage .imgTextGroupF > div,
.wpPage .imgTile4 > div,
.wpPage .imgTile9 > div,
.wpPage .imgTile16 > div,
.wpPage .tabChange,
.wpPage .menuGroupA ul,
.wpPage .menuGroupB ul,
.wpPage .menuGroupC ul,
.wpPage .menuGroupD ul,
.wpPage .menuGroupF ul,
#connectHead,
.connectCatDiv ul,
.narrowChecks,
#connectSpecialList,
.cdCategory,
#cdPortfolio,
.cmTop,
.clMemList { -ms-flex-wrap: wrap; flex-wrap: wrap; }

/* slick */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list { position: relative; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list .dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.slick-track { position: relative; top: 0; left: 0; display: block; margin: 0; }
.slick-track:before,
.slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'].slick-slide { float: right; }
.slick-slide { text-align: center; overflow: hidden }
.slick-slide .slick-loadingimg { display: none; }
.slick-slide .draggingimg { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow .slick-hidden { display: none; }


/*-------------------------------------
	aside
-------------------------------------*/

#closeFixBtn,
#openFixBtn {
	display: block;
	margin: 0 auto;
	width: 5rem;
	height: 5rem;
	background: rgba(1, 49, 97, 0.3) url("/images/common/icon-cancelW.svg") center 1.2rem no-repeat;
	background-size: 2.6rem;
	border-radius: 50%;
}
#openFixBtn { display: none; background-image: url("/images/common/arrowLWt.svg");}

#fixBtns { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 10;}
#fixBtns .btn { display: block; margin: 1.5rem 0 0; padding: 3.8rem 0 0; width: 5rem; min-width: 0; height: 5rem; font-size: 0.9rem; background: #013161 url("/images/common/icon-form.svg") center 1.2rem no-repeat; background-size: 2.4rem;}

#fixBtns .btn.form { padding: 3.2rem 0 0; background-position: center 0.3rem; background: /*20221215 濃色に変更指示 #b39e05*/ #885500 url("/images/common/icon-form.svg") center 1.2rem no-repeat!important; background-size: 2.6rem!important;}
#fixBtns .btn.mail { background-image: url("/images/common/icon-mail.svg");}
#fixBtns .btn.chat { padding: 4rem 0 0; background-image: url("/images/common/icon-faq.svg"); background-position: center 1.2rem; background-size: 2.4rem;}
#fixBtns .btn.cart { padding: 4rem 0 0; font-size: 0.8rem; letter-spacing: -0.2rem; background-image: url("/images/common/icon-cartW.svg");}


@media screen and (max-width:1023.9px) {
	/*20220721 変更依頼対応
#fixBtns .btn { display: block; margin: 1.5rem 0 0; padding: 3.8rem 0 0; width: 6rem; min-width: 0; height: 6rem; font-size: 0.9rem; background: #013161 url("/images/common/icon-form.svg") center 1.2rem no-repeat; background-size: 2.4rem;}
*/
#fixBtns .btn { display: block; margin: 2rem 0 0; padding: 3em 0 0!important; width: 9rem; min-width: 0; height: 9rem; font-size: 1.4rem!important; background: #013161 url("/images/common/icon-form.svg") center 1.2rem no-repeat; background-size: 2.4rem;}
}


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

footer { position: relative; padding: 3rem 2rem 2rem; color: #013161; font-size: 1.4rem; background: #E6EAEF; margin-top: 4rem; }

#footLogo { margin: 0 0 2rem; text-align: center;}
#footLogo img { margin: 0 0 0.5rem; height: 3rem;}

#footNav { margin: 0 0 2rem;}
#footNav .acd { padding: 1rem; font-weight: 900; text-align: left; border-top: 1px solid #013161; border-bottom: 1px solid #013161; cursor: pointer; transition: all 0.3s ease;}
#footNav .acd:after { content: ""; display: inline-block; position: static; margin: 0 0 0 0.5rem; width: 1rem; height: 1rem; background: url("/images/common/arrowD.svg") center no-repeat; background-size:  contain; transition: all 0.3s ease;}
#footNav .acd:hover { background: rgba(1, 49, 97, 0.2);}
#footNav .acd.open:after { transform: scale(1, -1);}
#footNav .acd-content { padding: 1.2rem 1rem 0; border-bottom: 1px solid #013161;}
#footNav .acd-content li { margin: 0 0 1rem;}
#footNav .acd-content a { color: #013161 !important; text-decoration: none;}
#footNav .acd-content a:hover { text-decoration: underline;}

footer .snsLinks { margin: 0 0 2rem; color: #013161;}

#copy { font-size: 1rem;}

/*-------------------------------------
	other
-------------------------------------*/

/* 20230404追加 catsubtitle（カテゴリートップテンプレート） */
h1.catsubtitle { font-size: 4rem;}
h2.catsubtitle { font-size: 3.5rem;}
h3.catsubtitle { font-size: 3rem;}
h4.catsubtitle { font-size: 2.5rem;}
h5.catsubtitle { font-size: 2rem;}
h6.catsubtitle { font-size: 1.5rem;}

@media screen and (max-width: 1024px) {
    
    h1.catsubtitle { font-size: 3rem;}
    h2.catsubtitle { font-size: 2.5rem;}
    h3.catsubtitle { font-size: 2.2rem;}
    h4.catsubtitle { font-size: 2rem;}
    h5.catsubtitle { font-size: 1.8rem;}
    h6.catsubtitle { font-size: 1.5rem;}

}

/* 20230501追加 固定ページサンプル */

.imgtextreverse { flex-wrap: wrap-reverse !important;}

/* 20230529追加 固定ページサンプル 本文テキストサイズ */
.textM { font-size: 2rem;}
.textL { font-size: 2.4rem;}

/* 20230529追加 固定ページサンプル 本文幅1000px */
div.widthS { max-width: 1000px; margin: 20px auto !important;}

/* 20240430追加 固定ページサンプル 本文幅最大1000px 幅テキストサイズに合わせる */
div.widthT { width:fit-content; max-width: 1000px; margin: 20px auto !important; padding:4rem !important;}
@media screen and (max-width: 1024px) {
    
    div.widthT {padding:2rem !important;}

}

/*-------------------------------------
			CSS end
-------------------------------------*/