@charset "UTF-8";





/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
リセット
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

html, body, div, span, object, iframe { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; vertical-align: baseline; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; vertical-align: baseline; }
cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var, b, i { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; vertical-align: baseline; }
sup { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }
dl, dt, dd, ol, ul, li { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; vertical-align: baseline; }
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; vertical-align: baseline; }
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; vertical-align: baseline; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: “”; content: none; }
a { margin: 0; padding: 0; font-size: 100%; background: transparent; color: #838691; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: “”; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #CCC; margin: 1em 0; padding: 0; }
img { border: 0; vertical-align: bottom; }
table { table-layout: fixed; }
body { height: 100%; margin: 0; padding: 0; color: #4D4F5C; font-family: 'Source Sans Pro', sans-serif; min-height: 0%; -webkit-text-size-adjust: 100%; }





/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
共通
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

html { background: #EFEDEA; }
body { -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; min-height: -webkit-fill-available; }
#wrapper { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
#container { min-height: 100vh; min-height: 100dvh; display: -ms-grid; display: grid; -ms-grid-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); -ms-grid-rows: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "col1"; box-sizing: border-box; }
#containerInner { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: col1; /*height: 100vh;*/ height: 100%; width: 100%; padding: 60px 0 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #EFEDEA; box-sizing: border-box; }
#containerInner > div[class^="step"] { flex-grow: 1; flex-shrink: 1; flex-basis: auto; display: flex; flex-direction: column; justify-content: center; width: 65vw; max-width: 700px; }
_:-ms-fullscreen, :root #containerInner div[class^="step"] { justify-content: flex-start; }
@media (min-width: 651px) and (max-width: 885px) {
  #containerInner { padding: 30px; }
  #containerInner > div[class^="step"] { width: 100%; max-width: 600px; }
}
@media (min-width: 481px) and (max-width: 650px) {
  #containerInner { padding: 30px; }
  #containerInner > div[class^="step"] { width: 100%; max-width: 100%; }
}
@media (max-width: 480px) {
	#containerInner { height: auto !important; padding: 20px; }
  #containerInner > div[class^="step"] { width: 100%; max-width: 100%; display: block !important; }
}
@media screen and (orientation: landscape) and (max-width: 896px) {
	/*スマホ画面 横長のとき*/
  #containerInner { height: auto !important; padding: 20px; }
  #containerInner > div[class^="step"] { display: block !important; }
}
@media all and (-ms-high-contrast: none) {
  /* IE用 */
	#containerInner { height: 100vh !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
}

/*入力項*/
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] { height: 35px; padding: 0 10px; border-radius: 3px; border: 1px solid #E8E9EC; box-sizing: border-box; font-size: 14px; background-color: #F5F6FA; outline-offset: -5px; }
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder { color: #D4D4D4; }
textarea { display: block; padding: 10px; border-radius: 3px; border: 1px solid #E8E9EC; font-size: 14px; width: 100%; box-sizing: border-box; background-color: #F5F6FA; outline-offset: -5px; }
input[type="submit"], input[type="reset"], input[type="button"] { -webkit-appearance: none; }
button:focus { outline: 0; }
@media (max-width: 480px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"] { font-size: 16px; }
	textarea { font-size: 16px; }
}

/*select*/
select { color: #4D4F5C; background-color: #F5F6FA; border: 1px solid #CCC; border-radius: 3px; display: inline-block; line-height: 1; font-size: 13px !important; white-space: nowrap; height: 30px; padding: 0 35px 0 10px !important; margin: 0; -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; cursor: pointer; }
select:focus { border-color: #09A0F6; }
select::-ms-expand { display: none; }
select[multiple] { vertical-align: top; }
select[disabled] { -webkit-text-fill-color: #333; color: #333; border-color: #F5F6FA; background-color: #F5F6FA; }
.select-wrap { position: relative; display: inline-block; }
.select-wrap:after { content: ""; width: 6px; height: 6px; border: 0; border-bottom: solid 1px #808495; border-right: solid 1px #808495; position: absolute; top: 50%; right: calc(0% + 14px); margin-top: -6px; transform: rotate(45deg); pointer-events: none; }

/*リンクアロー*/
.linkArrow:after { content: "\00a0\00a0\003e"; }

/*ステップ*/
.box1 { text-align: center; }
.box1 .ttlBox h1 { height: 24px; background: url(../images/logo.png) no-repeat center center; background-size: contain; text-indent: -9999px; }
.box1 .stepBox { margin-top: 40px; }
.box1 .stepBox ul { list-style: none; display: flex; justify-content: center; }
.box1 .stepBox ul li { padding-left: 74px; font-family: 'Source Sans Pro', sans-serif; font-size: 13px; line-height: 1; width: 38px; color: #AEAEB1; position: relative; }
.box1 .stepBox ul li:nth-of-type(1) { padding-left: 0; }
.box1 .stepBox ul li:after { content: ""; position: absolute; top: 19px; left: 0; display: block; width: 50px; height: 1px; margin: 0 12px; background-color: #DDD; }
.box1 .stepBox ul li:nth-of-type(1):after { content: none; }
.box1 .stepBox ul li span:nth-of-type(1) { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background-color: #CCE1DF; background-repeat: no-repeat; border-radius: 50%; color: #63BCBC; font-size: 17px; }
.box1 .stepBox ul li span:nth-of-type(2) { display: block; text-align: center; margin-top: 10px; }
.box1 .stepBox ul li.visited span:nth-of-type(1) { background-color: #63BCBC; color: #FFF; }
.box1 .stepBox ul li.visited span:nth-of-type(2) { color: #4D4F5C; }
.box1 .stepBox ul li a { text-decoration: none; color: #AEAEB1; }
@media (min-width: 481px) and (max-width: 850px) {
  .box1 .stepBox { margin-top: 30px; }
  .box1 .stepBox ul li { padding-left: 40px; width: 35px; }
  .box1 .stepBox ul li:after { content: ""; position: absolute; top: 19px; left: 0; display: block; width: 28px; height: 1px; margin: 0 6px; background-color: #DDD; }
}
@media (max-width: 480px) {
  .box1 .stepBox { margin-top: 20px; }
  .box1 .stepBox ul li { padding-left: 20px; width: 30px; }
  .box1 .stepBox ul li:after { content: ""; position: absolute; top: 17px; left: 0; display: block; width: 15px; height: 1px; margin: 0 3px; background-color: #DDD; }
  .box1 .stepBox ul li span:nth-of-type(1) { width: 30px; height: 30px; }
}
@media screen and (orientation: landscape) and (max-width: 896px) {
	/*スマホ画面 横長のとき*/
  .box1 .stepBox { margin-top: 20px; }
}

/*Box2共通*/
.box2 { position: relative; background-color: #FFF; max-height: 500px; box-sizing: border-box; height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 35px; flex: 1; }
.box2 .outerBox2 { /*position: absolute; top: 0; right: 0; bottom: 0; left: 0;*/ height: 100%; width: 100%; flex: 1; overflow: hidden; padding: 35px; box-sizing: border-box; box-shadow: 0px 3px 53px 0px rgba(0, 0, 0, 0.16); }
.box2 .innerBox2 { height: 100%; max-height: 430px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
@media (min-width: 481px) and (max-width: 850px) {
  .box2 { margin-top: 20px; }
  .box2 .outerBox2 { padding: 35px 30px; }
}
@media (max-width: 480px) {
	.box2 { height: auto; max-height: none !important; display: block !important; background-color: transparent !important; margin-top: 20px; }
  .box2 .outerBox2 { position: static !important; height: auto !important; background-color: #FFF; padding: 25px 20px; }
  .box2 .innerBox2 { height: auto; max-height: none; overflow: visible; /*overflow-y: hidden !important;*/ }
}
@media screen and (orientation: landscape) and (max-width: 896px) {
	/*スマホ画面 横長のとき*/
  .box2 { max-height: none !important; display: block !important; background-color: transparent !important; margin-top: 20px; }
  .box2 .outerBox2 { position: static !important; height: auto !important; background-color: #FFF; } 
}
@media all and (-ms-high-contrast: none) {
  /* IE用 */
	.box2 .innerBox2 { height: 100%; max-height: 430px; /*height: 430px;*/ overflow-y: auto; overflow-x: hidden; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
}

/*ページング（矢印）*/
a.backArrow { position: absolute; left: -140px; top: calc(50% - 52px); padding-top: 80px; background: url(../images/ico_link_back.png) no-repeat top 0 center; text-decoration: none; color: #959595; }
a.nextArrow { position: absolute; right: -140px; top: calc(50% - 52px); padding-top: 80px; background: url(../images/ico_link_next.png) no-repeat top 0 center; text-decoration: none; color: #959595; }
@media (min-width: 851px) and (max-width: 1020px) {
  a.backArrow { font-size: 16px; left: -120px; }
  a.nextArrow { font-size: 16px; right: -120px; }
}
@media (min-width: 601px) and (max-width: 850px) {
  a.backArrow,
  a.nextArrow { display: none; }
}
@media (min-width: 481px) and (max-width: 600px) {
  a.backArrow,
  a.nextArrow { display: none; }
}
@media (max-width: 480px) {
  a.backArrow,
  a.nextArrow { display: none; }
}

/*戻る・進むボタン*/
.btnBox { width: 65vw; max-width: 100%; margin: 30px auto 0; }
.btnBox .btnBoxInner { display: flex; justify-content: center; margin-right: -15px; padding: 0 35px; }
.btnBox .btnBoxInner a { flex-grow: 0; flex-shrink: 0; flex-basis: calc((100% / 2) - 15px); max-width: calc((100% / 2) - 15px); margin-right: 15px; display: flex; justify-content: center; align-items: center; text-decoration: none; color: #FFF; font-size: 15px; line-height: 1; padding: 15px 0; border-radius: 23px; }
.btnBox .btnBoxInner a.backBtn { background-color: #838691; }
.btnBox .btnBoxInner a.nextBtn { background-color: #63BCBC; }
@media (min-width: 601px) and (max-width: 850px) {
  .btnBox .btnBoxInner { padding: 0; }
}
@media (min-width: 481px) and (max-width: 600px) {
  .btnBox { margin: 25px auto 0; }
  .btnBox .btnBoxInner { display: block; padding: 0; margin-right: 0; }
  .btnBox .btnBoxInner a { max-width: 100%; margin-right: 0; margin-bottom: 10px; }
  .btnBox .btnBoxInner a:nth-last-of-type(1) { margin-bottom: 0; }
}
@media (max-width: 480px) {
  .btnBox { width: 100%; margin: 25px auto 0; }
  .btnBox .btnBoxInner { display: block; padding: 0; margin-right: 0; }
  .btnBox .btnBoxInner a { max-width: 100%; margin-right: 0; margin-bottom: 10px; }
  .btnBox .btnBoxInner a:nth-last-of-type(1) { margin-bottom: 0; }
}

/*スマホ画面横長のとき*/
/*@media screen and (orientation: landscape) and (max-width: 896px) {
  #containerInner { height: auto !important; padding: 30px 0; }
  #containerInner div[class^="step"] { display: block !important; }
  .box1 .stepBox { margin-top: 25px; }
  .box2 { max-height: none !important; display: block !important; background-color: transparent !important; margin-top: 20px; }
  .box2 .outerBox2 { position: static !important; height: auto !important; background-color: #FFF; } 
}*/

/*error*/
.err { background-color: rgba(232, 66, 98, .1) !important; }
input[type="text"].err,
input[type="email"].err,
input[type="tel"].err,
select.err { color: #E84262 !important; -webkit-text-fill-color: #E84262 !important; }
input[type="text"].err::placeholder,
input[type="email"].err::placeholder,
input[type="tel"].err::placeholder { color: rgba(232, 66, 98, .4) !important; -webkit-text-fill-color: rgba(232, 66, 98, .4) !important; }
textarea.err { color: #E84262 !important; -webkit-text-fill-color: #E84262 !important; }
textarea.err::placeholder { color: rgba(232, 66, 98, .4) !important; -webkit-text-fill-color: rgba(232, 66, 98, .4) !important; }

/*エラーメッセージ*/
.errBox { text-align: center; background-color: rgba(232, 66, 98, .1); border: 1px solid rgba(232, 66, 98, .3); color: #E84262; margin-bottom: 30px; padding: 15px; font-size: 16px; display: flex; flex-direction: column; justify-content: flex-start; }
.errBox li { text-align: left; display: inline-block; margin-left: 0 !important; font-size: 0.85em; }

/*リセットボタン*/
.btnReset { position: relative; text-decoration: none !important; line-height: 1em; font-weight: bold; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 3px; transition: all 0.2s; border: 0; font-size: 1.2em; width: 144px; height: 38px; color: #FFF; background-color: #C1C1C1; }


.required { background-color: rgba(232, 66, 98, .1) !important; }



/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
welcome
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

#containerInner div.welcome { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 65vw; max-width: 700px; }
_:-ms-fullscreen, :root #containerInner div.welcome { justify-content: flex-start; }
.welcome .box2 { display: block; max-height: 267px; padding: 35px 45px; background-color: transparent; }
.welcome .box2 .inner .imageBox { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; }
.welcome .box2 .inner .imageBox img { display: block; width: 42px; height: auto; margin-right: 10px; }
.welcome .box2 .inner .imageBox p { display: block; color: #A79065; font-size: 18px; }
.welcome .box2 .inner > p { margin-bottom: 30px; font-size: 13px; line-height: 1.8em; text-align: center; } 
.welcome .box2 .inner .inputBox { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; }
.welcome .box2 .inner .inputBox span { display: inline-block; margin-right: 5px; font-size: 16px; white-space: nowrap; }
.welcome .box2 .inner .inputBox .searchBox { margin: 0 15px 0 0; }
.welcome .box2 .inner .inputBox .searchBox .inputOuter input.selectedText { width: 100%; height: 40px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 30px; }
.welcome .box2 .inner .inputBox .searchBox .inputOuter .searchResultBox .searchBox { margin-bottom: 10px; }
.welcome .box2 .inner .inputBox .searchBox .inputOuter .searchResultBox .searchBox .searchText { height: 40px; }
.welcome .box2 .inner .inputBox .searchBox .inputOuter .searchResultBox .searchBox input[type="submit"] { font-size: 0.9em; font-weight: 500; }
.welcome .box2 .inner .inputBox .searchBox .inputOuter .extSearch .searchResultBox .inner .ttlBox { font-size: 0.8em; font-weight: 600; }
.welcome .box2 .inner .inputBox .searchBox .inputOuter .extSearch .searchResultBox .inner .searchResult ul li a { text-align: left; font-weight: normal; font-size: 0.8em; }
.welcome .box2 .inner .inputBox .searchBox .inputOuter .extSearch .searchResultBox .inner .btnBox { padding: 10px; background-color: #F5F6FA; justify-content: center; box-sizing: border-box; }
.welcome .box2 .inner .inputBox .searchBox .inputOuter .extSearch .searchResultBox .inner .btnBox .btnSub3SS { font-weight: 500; font-size: 0.8em; font-family: system-ui; }
.welcome .box2 .inner .inputBox .confirmBox a { display: inline-block; text-decoration: none; color: #FFF; font-size: 16px; line-height: 1; background-color: #63BCBC; min-width: 72px; padding: 12px 20px; border-radius: 3px; box-sizing: border-box; }
@media (min-width: 481px) and (max-width: 850px) {
  #containerInner div.welcome { width: calc(100% - 40px); max-width: none; margin: 0 20px; }
  .welcome .box2 { padding: 0; }
  .welcome .box2 .inner .imageBox { margin-bottom: 15px; }
  .welcome .box2 .inner > p { margin-bottom: 20px; } 
  .welcome .box2 .inner .inputBox { display: block; text-align: center; }
  .welcome .box2 .inner .inputBox span { margin: 0 0 10px; }
  .welcome .box2 .inner .inputBox .searchBox { margin: 0; }
  .welcome .box2 .inner .inputBox .searchBox .inputOuter input.selectedText { margin-right: 0; }
  .welcome .box2 .inner .inputBox .confirmBox { margin-top: 15px; }
  .welcome .box2 .inner .inputBox .confirmBox a { width: 237px; }
}
@media (max-width: 480px) { 
  #containerInner div.welcome { width: 100%; max-width: none; padding: 0; box-sizing: border-box; }
  .welcome .box2 { padding: 0; }
  .welcome .box2 .inner .imageBox { margin-bottom: 15px; }
  .welcome .box2 .inner > p { margin-bottom: 20px; } 
  .welcome .box2 .inner .inputBox { display: block; text-align: center; }
  .welcome .box2 .inner .inputBox span { margin: 0 0 10px; }
  .welcome .box2 .inner .inputBox .searchBox { margin: 0; }
  .welcome .box2 .inner .inputBox .searchBox .inputOuter input.selectedText { margin-right: 0; }
  .welcome .box2 .inner .inputBox .confirmBox  { margin-top: 15px; }
  .welcome .box2 .inner .inputBox .confirmBox a { width: 100%; }
}





/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
login
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

#containerInner div.login { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 65vw; max-width: 700px; }
_:-ms-fullscreen, :root #containerInner div.login { justify-content: flex-start; }
@media (min-width: 481px) and (max-width: 950px) {
  #containerInner div.login { width: 100%; box-sizing: border-box; }
}
@media (max-width: 480px) {
  #containerInner div.login { width: 100%; box-sizing: border-box; }
}
  
/*box2*/
.login .box2 { font-size: 13px; }

/*利用式場*/
.login .box2 .innerBox2 .hallBox { text-align: center; margin-bottom: 60px; }
.login .box2 .innerBox2 .hallBox > p:nth-of-type(1) { font-size: 18px; margin-bottom: 20px; line-height: 1; color: #63BCBC; }
.login .box2 .innerBox2 .hallBox > p:nth-of-type(2) { display: block; margin-bottom: 15px; padding: 30px; font-size: 16px; background-color: #DDD; }
.login .box2 .innerBox2 .hallBox div { display: inline-block; text-align: center; padding: 0 30px; max-width: 500px; }
.login .box2 .innerBox2 .hallBox div p { font-size: 13px; text-align: left; }
@media (min-width: 481px) and (max-width: 950px) {
  .login .box2 .innerBox2 .hallBox div { display: block; text-align: left; padding: 0; width: 100%; }
}
@media (max-width: 480px) {
	.login .box2 .innerBox2 { overflow-y: auto !important; }
  .login .box2 .innerBox2 .hallBox { margin-bottom: 40px; }
  .login .box2 .innerBox2 .hallBox > p:nth-of-type(1) { margin-bottom: 15px; }
  .login .box2 .innerBox2 .hallBox > p:nth-of-type(2) { margin-bottom: 10px; padding: 15px; font-size: 13px; }
  .login .box2 .innerBox2 .hallBox div { display: block; text-align: left; padding: 0; width: 100%; }
}

/*注意事項*/
.login .box2 .innerBox2 .checklistBox > p { text-align: center; font-size: 18px; margin-bottom: 20px; line-height: 1; color: #63BCBC; }
.login .box2 .innerBox2 .checklistBox .guideBox { padding: 30px; background-color: #F4F4F4; margin-bottom: 30px; }
.login .box2 .innerBox2 .checklistBox .guideBox dl { display: flex; margin-bottom: 20px; }
.login .box2 .innerBox2 .checklistBox .guideBox dl:nth-last-of-type(1) { margin-bottom: 0; }
.login .box2 .innerBox2 .checklistBox .guideBox dt { flex-grow: 0; flex-shrink: 0; flex-basis: 150px; font-size: 12px; font-weight: bold; line-height: 1.8em; }
.login .box2 .innerBox2 .checklistBox .guideBox dt span { display: block; font-weight: normal; }
.login .box2 .innerBox2 .checklistBox .guideBox dd { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 150px); max-width: calc(100% - 150px); line-height: 1.8em; }
.login .box2 .innerBox2 .checklistBox .guideBox dd div { display: flex; }
.login .box2 .innerBox2 .checklistBox .guideBox dd div span:nth-of-type(1) { flex-grow: 0; flex-shrink: 0; flex-basis: 120px; }
.login .box2 .innerBox2 .checklistBox .guideBox dd div span:nth-of-type(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 120px); max-width: calc(100% - 120px); font-weight: bold; }
.login .box2 .innerBox2 .checklistBox .guideBox dd .linkArrow:after { content:"\00a0\00a0\003e"; }
.login .box2 .innerBox2 .checklistBox .guideBox dd img { display: block; margin-bottom: 10px; }
.login .box2 .innerBox2 .checklistBox .guideBox dl.flowertone dd { background: url("../images/img_finish_color.png") no-repeat 0 0; padding-top: 72px; background-size: contain; }
@media (max-width: 480px) { 
  .login .box2 .innerBox2 .checklistBox > p { margin-bottom: 15px; font-size: 16px; }
  .login .box2 .innerBox2 .checklistBox .guideBox { padding: 20px; margin-bottom: 20px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dl { display: block; margin-bottom: 20px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt { margin-bottom: 5px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt span { display: inline-block; padding-left: 15px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dd { max-width: 100%; line-height: 1.6em; }
  .login .box2 .innerBox2 .checklistBox .guideBox dl.flowertone dd { background: url("../images/img_finish_color_sp.png") no-repeat 0 0; background-size: contain; padding-top: 63%; }
}
@media (min-width: 481px) and (max-width: 520px) {
  .login .box2 .innerBox2 .checklistBox .guideBox { padding: 25px; margin-bottom: 25px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dl { display: block; margin-bottom: 20px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt { margin-bottom: 10px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt span { display: inline-block; padding-left: 15px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dd { max-width: 100%; }
  .login .box2 .innerBox2 .checklistBox .guideBox dl.flowertone dd { background: url("../images/img_finish_color_sp.png") no-repeat 0 0; background-size: contain; padding-top: 62%; }
}
@media (min-width: 521px) and (max-width: 650px) {
  .login .box2 .innerBox2 .checklistBox .guideBox dl { display: block; margin-bottom: 30px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt { margin-bottom: 10px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt span { display: inline-block; padding-left: 15px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dd { max-width: 100%; }
  .login .box2 .innerBox2 .checklistBox .guideBox dl.flowertone dd { background: url("../images/img_finish_color_sp.png") no-repeat 0 0; background-size: 285px auto; padding-top: 180px; }
}
@media (min-width: 651px) and (max-width: 850px) {
  .login .box2 .innerBox2 .checklistBox .guideBox dl { display: block; margin-bottom: 30px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt { margin-bottom: 10px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt span { display: inline-block; padding-left: 15px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dd { max-width: 100%; }
  .login .box2 .innerBox2 .checklistBox .guideBox dl.flowertone dd { max-width: 400px; }
}
@media (min-width: 851px) and (max-width: 1080px) {
  .login .box2 .innerBox2 .checklistBox .guideBox dl { display: block; margin-bottom: 30px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt { margin-bottom: 10px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dt span { display: inline-block; padding-left: 15px; }
  .login .box2 .innerBox2 .checklistBox .guideBox dd { max-width: 100%; }
  .login .box2 .innerBox2 .checklistBox .guideBox dl.flowertone dd { max-width: 400px; }
}

/*同意チェック*/
.login .box2 .innerBox2 .agreementBox { text-align: center; margin-bottom: 40px; }
.login .box2 .innerBox2 .agreementBox p { margin-bottom: 20px; }
.login .box2 .innerBox2 .agreementBox label { height: 35px; display: inline-block; }
.login .box2 .innerBox2 .agreementBox input { display: none; }
.login .box2 .innerBox2 .agreementBox input:checked + .agreeParts:after { content: ""; display: block; position: absolute; top: -4px; left: 12px; width: 8px; height: 17px; transform: rotate(40deg); border-bottom: 4px solid #009A9A; border-right: 4px solid #009A9A; }
.login .box2 .innerBox2 .agreementBox .agreeParts { padding-left: 50px; position: relative; font-size: 16px; }
.login .box2 .innerBox2 .agreementBox .agreeParts:before { content: ""; display: block; position: absolute; top: -8px; left: 0; width: 35px; height: 35px; border: 3px solid #98C9C8; box-sizing: border-box; }
@media (min-width: 481px) and (max-width: 600px) {
  .login .box2 .innerBox2 .agreementBox { margin-bottom: 20px; }
  .login .box2 .innerBox2 .agreementBox p { text-align: left; }
}
@media (max-width: 480px) {
  .login .box2 .innerBox2 .agreementBox { margin-bottom: 20px; }
  .login .box2 .innerBox2 .agreementBox p { text-align: left; }
}

/*ボタン*/
.login .box2 .innerBox2 .buttonArea { display: flex; justify-content: center; margin-right: -15px; }
.login .box2 .innerBox2 .buttonArea a { flex-grow: 0; flex-shrink: 0; flex-basis: calc((100% / 2) - 15px); max-width: calc((100% / 2) - 15px); margin-right: 15px; display: flex; justify-content: center; align-items: center; text-decoration: none; color: #FFF; font-size: 15px; line-height: 1; padding: 15px 0; border-radius: 23px; }
.login .box2 .innerBox2 .buttonArea a.backBtn { background-color: #838691; }
.login .box2 .innerBox2 .buttonArea a.nextBtn { background-color: #63BCBC; }
@media (min-width: 481px) and (max-width: 550px) {
  .login .box2 .innerBox2 .buttonArea  { display: block; }
  .login .box2 .innerBox2 .buttonArea a { max-width: 100%; }
  .login .box2 .innerBox2 .buttonArea a.backBtn { margin-bottom: 10px; } 
}
@media (max-width: 480px) {
  .login .box2 .innerBox2 .buttonArea  { display: block; }
  .login .box2 .innerBox2 .buttonArea a { max-width: 100%; }
  .login .box2 .innerBox2 .buttonArea a.backBtn { margin-bottom: 10px; }
}





/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
common
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.ui-dialog { box-shadow: 0 0 18px 9px rgba(0, 0, 0, 0.13); }
.ui-dialog .ui-dialog-content { /*padding: 20px !important;*/ }
.ui-dialog .ui-dialog-titlebar {}
.ui-widget-header { background: #63BCBC !important; }
.ui-widget-header .ui-icon { background-image: url("images/ui-icons_ffffff_256x240.png") !important; }
.ui-dialog .ui-dialog-titlebar-close { right: 20px; border: none !important; transition: opacity ease 0.3s; }
.ui-dialog .ui-dialog-titlebar-close:hover { opacity: 0.6; }
.ui-dialog .ui-dialog-title { padding: 10px 10px 8px 10px !important; }
.ui-dialog .ui-dialog-content .dialogInner {}
.ui-dialog .ui-dialog-content .dialogInner ul { border-top: 1px dotted #DDD; }
.ui-dialog .ui-dialog-content .dialogInner ul li { border-bottom: 1px dotted #CCC; }
.ui-dialog .ui-dialog-content .dialogInner ul li a { display: block; padding: 7px 10px 5px 10px !important; text-decoration: none !important; font-size: 14px !important; color: #838691 !important; box-sizing: border-box; }
.ui-dialog .ui-dialog-content .dialogInner ul li a:hover { background-color: #63BCBC !important; color: #FFF !important; }
@media (max-width: 480px) {
	.ui-dialog { width: 100%; }
}





/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
Step1
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.purchaseBox { text-align: center; }
.purchaseBox a { display: inline-block; text-decoration: none; color: #959595; font-size: 16px; font-weight: bold; line-height: 1; border: 2px solid #959595; padding: 10px 35px; border-radius: 23px; }
.step01 { width: 100vw !important; max-width: none !important; display: block !important; height: 100%; }
.step01 .box1 { /*width: 65vw; max-width: 700px;*/ margin: 0 auto; position: relative; }
.step01 .box1 .ttlBox { display: flex; justify-content: space-between; align-items: center; }
.step01 .box1 .ttlBox .col1 { flex: 1; }
.step01 .box1 .ttlBox h1 { width: 145px; display: flex; justify-content: center; align-items: center; }
.step01 .box1 .ttlBox .col2 { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
.step01 .box1 .ttlBox .col2 .searchOuter { display: flex; }
.step01 .box1 .ttlBox .col2 .searchOuter input#searchCheckbox { display: none; }
.step01 .box1 .ttlBox .col2 .searchOuter .searchIco { display: block; width: 30px; min-width: 30px; height: 30px; background: url("../images/ico_search_white.svg") no-repeat center bottom 7px; background-size: auto 16px; border-radius: 50%; background-color: #C1C1C1; text-indent: -9999px; transition: 0.3s; cursor: pointer; }
.step01 .box1 .ttlBox .col2 .searchOuter input#searchCheckbox + label + .searchBox { opacity: 0; overflow: hidden; position: absolute; top: 40px; right: calc(50% - 120px); width: auto; background-color: #FFF; padding: 20px; box-sizing: border-box; display: flex; justify-content: space-between; box-shadow: 0px 3px 53px 0px rgb(0 0 0 / 16%); transition: all linear 0.6s; z-index: 3; }
.step01 .box1 .ttlBox .col2 .searchOuter input#searchCheckbox:checked + label + .searchBox { opacity: 1; display: flex; transition: all linear 0.6s; }
.step01 .box1 .ttlBox .col2 .switching { margin-left: 10px; }
.step01 .box1 .ttlBox .col2 .switching .btnSwitch { position: relative; height: 30px; display: inline-flex; align-items: center; font-size: 12px; line-height: 1; font-weight: bold; white-space: nowrap; padding: 0 15px 0 35px; background-repeat: no-repeat; background-position: 15px center; color: #FFF; background-color: #B9B9B9; border-radius: 30px; border: 0; cursor: pointer; }
.step01 .box1 .ttlBox .col2 .switching .btnSwitch.list { background-image: url(../images/ico_list.svg); background-size: 16px 10px; }
.step01 .box1 .ttlBox .col2 .switching .btnSwitch.card { background-image: url(../images/ico_card.svg); background-size: 16px 10px; }
.step01 .box1 .stepBox { width: auto !important; max-width: none !important; } 
.step01 .box2 { background-color: transparent; margin-top: 0; padding: 0; display: block; height: auto; max-height: 100%; }
.step01 .box2 .swiper-container { overflow: hidden; /*overflow-x: auto;*/ padding: 30px 0 20px; }
.step01 .box2 .swiper-slide .productBox { text-align: center; background-color: #FFF; margin-bottom: 25px; box-shadow: 0px 3px 53px 0px rgba(0, 0, 0, 0.16); overflow: visible; line-height: 0; height: 100%; max-height: calc(100vh - 450px);/*スクロールなしで表示対策のため必要*/ display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "g1" "g2"; }
.step01 .box2 .swiper-slide .productBox a.productItem { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: g1; display: flex; justify-content: center; align-items: center; background-color: #F7F7F7; }
.step01 .box2 .swiper-slide .productBox a.productItem img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; }
.step01 .box2 .swiper-slide .productBox .productNote { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: g2; padding: 20px 10px; background-color: #FFF; }
.step01 .box2 .swiper-slide .productBox .productNote .productName { font-size: 16px; font-weight: bold; line-height: 1; margin-bottom: 10px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif", "Hiragino Sans"; }
.step01 .box2 .swiper-slide .productBox .productNote .price { font-size: 12px; color: #A0A0A0; line-height: 1; }
.step01 .box2 .swiper-pagination { position: static; margin-top: 35px; color: #A0A0A0; }
.step01 .box2 .scrollArrow { position: relative; padding-left: 60px; font-size: 12px; color: #4D4F5C; margin-bottom: 10px; }
.step01 .box2 .scrollArrow:before { content: ""; display: block; position: absolute; top: 11px; left: 240px; width: 100px; height: 2px; background: #959595; border-radius: 10px; }
.step01 .box2 .scrollArrow:after { content: ""; display: block; position: absolute; top: 4px; left: 312px; width: 20px; height: 20px; border: 2px solid; border-color: transparent transparent #959595 transparent; transform: rotate(-150deg); } 

/*商品一覧 表示切り替え用*/
.step01.cardView .box1 { max-width: 600px; }
.step01.listView { height: 100%; display: -ms-grid; display: grid !important; -ms-grid-rows: auto 0px 1fr; grid-template-rows: auto 1fr; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 0px; grid-template-areas: "col1" "col3"; }
.step01.listView .box1 { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: col1; }
.step01.listView .box3 { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: col3; }
.step01.listView .box3 .scrollOuter { position: relative; height: 100%; width: 100%; overflow: hidden; box-sizing: border-box; }
.step01.listView .box3 .scrollOuter .scrollArea { position: absolute; top: 20px; right: 0; left: 0; height: calc(100% - 20px); width: 100%; max-width: 1040px; margin: 0 auto; padding: 20px 20px 0; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
.step01.listView .box3 .scrollOuter .scrollArea .scrollInner { display: flex; flex-wrap: wrap; width: 100%; }
.step01.listView .box3 .scrollOuter .scrollArea .scrollInner .productBox { width: calc((100% - 20px) / 2); flex-basis: calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 20px; }
.step01.listView .box3 .scrollOuter .scrollArea .scrollInner .productBox:nth-child(even) { margin-right: 0; }
.step01.listView .box3 .productBox { display: flex; justify-content: space-between; align-items: center; background-color: #FFF; box-shadow: 0px 3px 20px 0px rgb(0 0 0 / 16%); }
.step01.listView .box3 .productBox .productItem { aspect-ratio: 1 / 1; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.step01.listView .box3 .productBox .productItem img { aspect-ratio: 1 / 1; height: auto; max-height: 100%; width: auto; max-width: 100%; }
.step01.listView .box3 .productBox .productNote { margin-left: 10px; flex: 1; }
.step01.listView .box3 .productBox .productNote .productName { font-size: 16px; font-weight: bold; line-height: 1.3em; margin-bottom: 8px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif", "Hiragino Sans"; }
.step01.listView .box3 .productBox .productNote .price { font-size: 12px; color: #A0A0A0; line-height: 1; }
.step01.listView .box3 .productBox .purchaseBox { margin: 0 20px 0 10px; }
.step01.listView .box3 .productBox .purchaseBox a { font-size: 12px; padding: 10px; }
@media (min-width: 651px) and (max-width: 885px) {
  .step01 .box2 .swiper-slide .productBox { max-height: calc(100vh - 385px); }
}
@media (min-width: 640px) and (max-width: 849px) {
	.step01 .box2 .scrollArrow { padding-left: 40px; }
	.step01 .box2 .scrollArrow:before { left: 220px; }
	.step01 .box2 .scrollArrow:after { left: 292px; }
}
@media (min-width: 481px) and (max-width: 850px) {
	.step01 .box1 { width: calc(100% - 40px) !important; display: flex; flex-direction: column; align-items: center; }
  .step01 .box2 .swiper-slide .productBox { margin-bottom: 20px; }
  .step01 .box2 .swiper-slide .productBox a.productItem img {}
  .step01 .box2 .swiper-slide .productBox .productNote .productName { font-size: 14px; margin-bottom: 7px; }
  .step01 .box2 .swiper-slide .productBox .productNote .price {}
  .purchaseBox a { padding: 10px 20px; font-size: 12px; }
  .step01 .box2 .swiper-pagination { margin-top: 20px; }
}
@media (max-width: 780px) {
	.step01 .box1 { width: calc(100% - 40px) !important; display: flex; flex-direction: column; align-items: center; }
	.step01.listView .box3 .scrollOuter .scrollArea .scrollInner { display: block; }
	.step01.listView .box3 .scrollOuter .scrollArea .scrollInner .productBox { width: 100%; margin-right: 0; }
}
@media (min-width: 481px) and (max-width: 650px) {
  .step01 .box2 .swiper-slide .productBox { max-height: calc(100vh - 356px); }
}
@media (max-width: 639px) {
	.step01 .box2 .scrollArrow { padding-left: 20px; }
	.step01 .box2 .scrollArrow:before { left: 200px; }
	.step01 .box2 .scrollArrow:after { left: 272px; }
}
@media (max-width: 480px) {
	.step01 .box1 .ttlBox h1 { width: 100px; margin-right: 10px; }
	.step01 .box1 .ttlBox .col2 .searchOuter input#searchCheckbox + label + .searchBox { right: 60px; }
  .step01 .box2 .swiper-slide .productBox { margin-bottom: 20px; max-height: calc(100vh - 326px); }
  .step01 .box2 .swiper-slide .productBox .productNote .productName { font-size: 14px; margin-bottom: 7px; }
  .purchaseBox a { padding: 8px 20px; font-size: 12px; }
  .step01 .box2 .swiper-pagination { margin-top: 20px; }
	.step01.listView .box2 { display: none !important; }
	.step01.listView .box3 .scrollOuter { overflow: visible !important; }
	.step01.listView .box3 .scrollOuter .scrollArea { position: unset; overflow: visible; }
	.step01.listView .box3 .productBox .productItem { width: 80px; height: 80px; }
	.step01.listView .box3 .productBox .productNote .productName { font-size: 14px; }
	.step01.listView .box3 .productBox .purchaseBox { margin: 0 10px 0 5px; }
	.step01.listView .box3 .productBox .purchaseBox a { padding: 8px; }
}
@media all and (-ms-high-contrast: none) {
  /* IE用 */
	#containerInner .step01 { width: calc(100vw - 16px) !important; display: flex !important; }
	.step01 .box1 { width: 65vw; max-width: 700px; }
  .step01 .box2 .swiper-slide { display: flex; flex-direction: column; align-items: center; }
  .step01 .box2 .swiper-slide .productBox { width: 100%; max-height: none; }
	.step01.listView .box3 { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 15px; flex: 1; }
	.step01.listView .box3 .scrollOuter { height: 100%; width: 100%; max-width: 1080px; flex: 1; overflow: hidden; padding: 20px; box-sizing: border-box; }
	.step01.listView .box3 .scrollOuter .scrollArea { height: 100%; max-height: 100%; width: 100%; }
}
@media screen and (orientation: landscape) and (max-width: 896px) {
	/*スマホ画面横長のとき*/
	.step01 .box1 { width: calc(100% - 40px) !important; display: flex; flex-direction: column; align-items: center; }
  .step01 .box2 .swiper-slide .productBox { max-height: none; }
  .step01.listView .box2 { display: none !important; }
	.step01.listView .box3 .scrollOuter { overflow: visible !important; }
	.step01.listView .box3 .scrollOuter .scrollArea { position: unset; overflow: visible; }
}

/*モーダル*/
#modal { position: fixed; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; padding: 40px 0; box-sizing: border-box; background-color: rgba(239, 237, 234, 0.8); z-index: 2; color: #4D4F5C; }
#modal + #wrapper { height: 100vh; overflow: hidden; }
#modal .modal-outer { position: relative; width: 900px; display: flex; flex-direction: column; }
#modal .modal-inner { flex: 1 1 auto; display: flex; background-color: #FFF; box-shadow: 0px 3px 53px 0px rgba(0, 0, 0, 0.16); margin-bottom: 33px; overflow-y: auto; overflow-x:hidden; max-height: 450px; height: auto; width: 900px; position: relative; }
#modal .box1 { flex-shrink: 0; flex-grow: 0; flex-basis: 50%; display: flex; justify-content: center; align-items: center; }
#modal .box2 { display: block; flex-shrink: 1; flex-grow: 0; flex-basis: 50%; height: auto; padding: 35px; box-sizing: border-box; margin-top: 0; }
#modal .box1 img { display: block; width: 100%; height: auto; }
#modal .titleBox { margin-bottom: 25px; }
#modal .titleBox h2 { font-size: 24px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif", "Hiragino Sans"; }
#modal .titleBox span { color: #A0A0A0; font-size: 12px; }
#modal .detailBox { font-size: 12px; overflow: auto; -webkit-overflow-scrolling: touch; /*height: 290px;*/ height: auto; }
#modal .detailDescription p { margin-bottom: 25px; font-family: 'Source Sans Pro', sans-serif; }
#modal .detailSize,
#modal .detailCloth,
#modal .detailLayoutRequest { display: flex; margin-bottom: 15px; }
#modal .detailRecommend { display: flex; }
#modal .detailBox .detailSubTtl { font-weight: bold; }
#modal .detailSize .detailSubTtl,
#modal .detailCloth .detailSubTtl { flex-grow: 0; flex-shrink: 0; flex-basis: 5em; }
#modal .detailLayoutRequest .detailSubTtl,
#modal .detailRecommend .detailSubTtl { flex-grow: 0; flex-shrink: 0; flex-basis: 11em; }
#modal .detailSize .inner { display: inline-flex; }
#modal .detailSize .inner p:nth-of-type(1):after { content: "/"; padding-left: 5px; margin-right: 5px; display: inline-block; }
#modal .detailCloth .inner { display: flex; flex-wrap: wrap; margin-right: -10px; }
#modal .detailCloth .inner span { flex-grow: 0; flex-shrink: 0; flex-basis: calc((100% / 2) - 10px); max-width: calc((100% / 2) - 10px); margin-right: 10px; margin-bottom: 3px; }
#modal .detailCloth .inner span[class^="clothColor"] { display: inline-block; position: relative; padding-left: 20px; width: 150px; box-sizing: border-box; }
#modal .detailCloth .inner span[class^="clothColor"]:nth-last-of-type(1) { width: 150px; }
#modal .detailCloth .inner span[class^="clothColor"]:after  { content:""; position: absolute; top: 0; left: 0; display: block; width: 12px; height: 12px; border: 1px solid #AAA; }
#modal .detailCloth .inner .clothColor01:after { background-color: #FFF; }
#modal .detailCloth .inner .clothColor02:after { background-color: #D7ECE1; }
#modal .detailCloth .inner .clothColor03:after { background-color: #BFA282; }
#modal .detailCloth .inner .clothColor04:after { background-color: #777D42; }
#modal .detailCloth .inner .clothColor05:after { background-color: #B9C8DD; }
#modal .detailCloth .inner .clothColor06:after { background-color: #DFABAA; }
#modal .detailCloth .inner .clothColor07:after { background-color: #BD81AD; }
#modal .detailCloth .inner .clothColor08:after { border-radius: 50%; background-color: #FFF; }
#modal .detailCloth .inner .clothColor09:after { background-color: #775C45; }
#modal .detailCloth .inner .clothColor10:after { background-color: #82D2D4; }
#modal .detailCloth .inner .clothColor11:after { background-color: #3F3F3F; }
#modal .detailCloth .inner .clothColor12:after { background-color: #F18F3D; }
#modal .detailCloth .inner .clothColor13:after { background-color: #FFF; }
#modal .detailCloth .inner .clothColor14:after { background-color: #D2E8DE; }
#modal .detailCloth .inner .clothColor15:after { background-color: #D9C2B4; }/*ピンク #FAE5E8 => サンドベージュ #D9C2B4*/
#modal .detailCloth .inner .clothColor16:after { background-color: #cdb7aa; }
#modal .detailCloth .inner .clothColor17:after { background-color: #d5cccd; }
#modal .detailLayoutRequest .icons span { display: block; margin-bottom: 5px; }
#modal .detailLayoutRequest .icons img { display: inline-block; width: 18px; height: 18px; margin-right: 6px; }
#modal .closeBtn { position: absolute; top: 20px; right: 20px; display: block; width: 33px; height: 33px; }
@media (min-width: 801px) {
	#modal .closeBtn.small { position: absolute; top: 20px; right: 20px; display: block; width: 25px; height: 25px; }
	#modal .closeBtn.small a img { width: 25px; height: auto; }
}
@media (min-width: 801px) and (max-width: 950px) {
  #modal .modal-outer { width: 740px; }
  #modal .modal-inner { width: 740px; }
  #modal .detailBox { height: 217px; }
  #modal .closeBtn { width: 25px; height: 25px; }
  #modal .closeBtn a img { width: 25px; height: auto; }
}
@media (min-width: 481px) and (max-width: 800px) {
  #modal .modal-outer { width: 100%; max-width: 480px; height: auto; margin: 0 auto; padding: 40px; box-sizing: border-box; }
  #modal .modal-inner { display: block; margin-bottom: 20px; width: 100%; max-height: 500px; }
  #modal .box2 { padding: 20px; }
  #modal .titleBox { margin-bottom: 15px; }
  #modal .titleBox h2 { font-size: 16px; }
  #modal .closeBtn { top: 60px; right: 60px; width: 25px; height: 25px; }
  #modal .closeBtn a img { width: 25px; height: auto; }
  #modal .detailBox { overflow: visible; }
  #modal .purchaseBox { margin-bottom: 30px; }
  #modal .purchaseBox a { padding: 10px 50px; font-size: 13px; }
  #modal .detailRecommend { padding-bottom: 20px; }
  #modal .detailSize,
  #modal .detailCloth,
  #modal .detailLayoutRequest,
  #modal .detailRecommend{ display: block; margin-bottom: 20px; }
  #modal .detailBox div p:nth-of-type(1) { margin-bottom: 8px; }
  #modal .detailBox div.detailDescription p { margin-bottom: 25px; }
}
@media (max-width: 480px) {
/* 設定している理由が分からないが不要そうなので削除 2024.03.01
	#modal { top: 10px; }
*/
  #modal .modal-outer { width: 100%; height: auto; padding: 0 20px; box-sizing: border-box; }
  #modal .modal-inner { display: block; margin-bottom: 20px; width: 100%; max-height: 480px; }
  #modal .box2 { padding: 20px; }
  #modal .titleBox { margin-bottom: 15px; }
  #modal .titleBox h2 { font-size: 16px; }
  #modal .closeBtn { top: 20px; right: 40px; width: 20px; height: 20px; }
  #modal .closeBtn a img { width: 20px; height: auto; }
  #modal .detailBox { overflow: visible; }
  #modal .purchaseBox { margin-bottom: 30px; }
  #modal .purchaseBox a { padding: 10px 35px; }
  #modal .detailRecommend { padding-bottom: 20px; }
  #modal .detailSize,
  #modal .detailCloth,
  #modal .detailLayoutRequest,
  #modal .detailRecommend{ display: block; margin-bottom: 20px; }
  #modal .detailBox div p:nth-of-type(1) { margin-bottom: 8px; }
  #modal .detailBox div.detailDescription p { margin-bottom: 25px; }
}
@media screen and (orientation: landscape) and (max-width: 896px) {
	/*スマホ画面 横長のとき*/
  #modal { display: block; padding: 0; overflow-y: auto; }
  #modal .modal-outer { padding: 20px; }
  #modal .modal-inner { height: 100%; max-height: unset; overflow-y: hidden; }
  #modal .detailBox { height: auto; }
  #modal .closeBtn { top: 45px; right: 43px; }
}





/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
Step2
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.step02 .box2 .ttl { font-size: 17px; color: #63BCBC; }
.step02 .box2 .innerBox2 > .ttl { margin-bottom: 35px; }
@media (max-width: 480px) {
  .step02 .box2 .ttl { font-size: 16px; line-height: 1.4em; }
  .step02 .box2 .innerBox2 > .ttl { margin-bottom: 20px; }
}

/*カート*/
.box2 .cartListBox { margin-top: 20px; }
.box2 .cartListBox:nth-of-type(1) { margin: 0; }
.box2 .cartListBox:nth-of-type(n + 2) .ttlBox { display: none; } 
.box2 .cartListBox .ttlBox { display: flex; justify-content: space-between; margin-bottom: 15px; padding-bottom: 10px; font-size: 12px; font-weight: bold; color: #838691; border-bottom: 1px solid #CCC; }
.box2 .cartListBox .ttlBox .product  { flex: 1; text-align: center; }
.box2 .cartListBox .ttlBox .quantity { flex-grow: 0; flex-shrink: 0; flex-basis: 15%; text-align: center; }
.box2 .cartListBox .ttlBox .unitPrice { flex-grow: 0; flex-shrink: 0; flex-basis: 18%; text-align: center; }
.box2 .cartListBox .ttlBox .subtotal { flex-grow: 0; flex-shrink: 0; flex-basis: 18%; text-align: center; }
.box2 .cartListBox .ttlBox .delete { flex-grow: 0; flex-shrink: 0; flex-basis: 5%; text-align: center; }
.box2 .cartListBox .detailBox { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.box2 .cartListBox .detailBox .product1 { flex-grow: 0; flex-shrink: 0; flex-basis: 85px; margin-right: 10px; }
.box2 .cartListBox .detailBox .product1 img {  width: 85px; height: auto; }
.box2 .cartListBox .detailBox .product2 { flex: 1; }
.box2 .cartListBox .detailBox .product2 p { font-size: 13px; }
.box2 .cartListBox .detailBox .product2 .name { font-weight: bold; display: block; font-size: 13px; line-height: 1.5em; }
.box2 .cartListBox .detailBox .quantity { flex-grow: 0; flex-shrink: 0; flex-basis: 15%; text-align: center; }
.box2 .cartListBox .detailBox .quantity .btnUpdateS { display: none; }
.box2 .cartListBox .detailBox .quantity select { -webkit-appearance:none; -moz-appearance:none; appearance:none; width: 5em; cursor: pointer; background: url(../images/select_bg.png) no-repeat; background-position: right center; background-color: #F5F6FA; /*background-color: #FFF !important;*/ line-height: 40px; height: 40px; border: 1px solid #E8E9EC; padding: 0 15px; font-size: 14px; border-radius: 3px; box-sizing: border-box; }
.box2 .cartListBox .detailBox .quantity select:focus { outline: none; }
.box2 .cartListBox .detailBox .unitPrice { flex-grow: 0; flex-shrink: 0; flex-basis: 18%; text-align: center; }
.box2 .cartListBox .detailBox .unitPrice p { font-size: 16px; }
.box2 .cartListBox .detailBox .unitPrice p span { display: block; font-size: 13px; }
.box2 .cartListBox .detailBox .subtotal { flex-grow: 0; flex-shrink: 0; flex-basis: 18%; text-align: center; }
.box2 .cartListBox .detailBox .subtotal p { font-size: 16px; }
.box2 .cartListBox .detailBox .subtotal p span:nth-of-type(1) { display: inline-block; font-size: 16px; }
.box2 .cartListBox .detailBox .subtotal p span:nth-of-type(2) { display: block; font-size: 13px; }
.box2 .cartListBox .detailBox .delete { flex-grow: 0; flex-shrink: 0; flex-basis: 5%; text-align: center; }
.box2 .cartListBox .detailBox .delete a { display: block; width: 18px; height: 18px; background: url(../images/ico_cross.png) no-repeat 0 0; margin: 0 auto; text-indent: -9999px; }
.box2 .cartListBox .deliveryDate { width: 100%; display: flex; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #CCC; }
.box2 .cartListBox .deliveryDate:nth-last-of-type(1) { margin: 0; }
.box2 .cartListBox .deliveryDate p { font-size: 12px; }
.box2 .cartListBox .deliveryDate .indication { display: block; padding: 15px 20px; margin-bottom: 5px; background-color: #F4F4F4; line-height: 1.4em; }
.box2 .cartListBox .deliveryDate .indication span:nth-of-type(1) { display: block; margin-bottom: 5px; }
.box2 .cartListBox .deliveryDate .indication span:nth-of-type(2) { color: #3B4043; font-weight: bold; font-size: 13px; }
.box2 .cartListBox .deliveryDate .notes { padding-left: 15px; display: flex; align-items: center; }
.box2 .cartListBox .deliveryDate .notes span { display: block; font-size: 12px; color: #E84262; line-height: 1.5em; }
.box2 .cartTotalBox { display: flex; flex-direction: column; align-items: flex-end; }
.box2 .cartTotalBox dl { border-bottom: 1px solid #CCC; display: flex; justify-content: center; align-items: center; padding-right: 30px; width: 40%; height: 47px; line-height: 1; }
.box2 .cartTotalBox dt { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; font-size: 13px; font-weight: bold; text-align: center; line-height: 1; }
.box2 .cartTotalBox dd { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; text-align: right; line-height: 1; }
@media (min-width: 651px) and (max-width: 850px) {
  .box2 .cartListBox .deliveryDate .indication { flex: 1 0 auto; }
}
@media (min-width: 481px) and (max-width: 650px) {
  .box2 .cartListBox .ttlBox .product  { order: 1; }
  .box2 .cartListBox .ttlBox .quantity { order: 3; flex-basis: 19%; }
  .box2 .cartListBox .ttlBox .unitPrice { order: 2; flex-basis: 20%; }
  .box2 .cartListBox .ttlBox .subtotal { order: 4; display: none; }
  .box2 .cartListBox .ttlBox .delete { order: 5; flex-basis: 8%; }
  .box2 .cartListBox .detailBox .product1 { flex-basis: 75px; margin-right: 5px; }
  .box2 .cartListBox .detailBox .product1 img { width: 70px; }
  .box2 .cartListBox .detailBox .product2 { margin-right: 5px; }
  .box2 .cartListBox .detailBox .quantity { order: 3; margin-right: 5px; }
  .box2 .cartListBox .detailBox .quantity select { width: 4em; }
  .box2 .cartListBox .detailBox .unitPrice { order: 2; margin-right: 5px; }
  .box2 .cartListBox .detailBox .subtotal { order: 4; display: none; }
  .box2 .cartListBox .detailBox .delete { order: 5; flex-basis: 8%; }
  .box2 .cartListBox .deliveryDate .indication { flex: 1 0 auto; }
  .box2 .cartTotalBox dl { width: 50%; }
}
@media (max-width: 480px) {
  .box2 .cartListBox .ttlBox { display: none; }
  .box2 .cartListBox .detailBox { flex-wrap: wrap; margin-bottom: 10px; }
  .box2 .cartListBox .detailBox .product1 { order: 2; flex-basis: 80px; margin-right: 5px; }
  .box2 .cartListBox .detailBox .product1 img { width: 80px; }
  .box2 .cartListBox .detailBox .product2 { order: 1; flex: 0 0 100%; display: flex; flex-wrap: wrap;line-height: 1em; }
  .box2 .cartListBox .detailBox .product2 .name { flex: 0 0 100%; }
  .box2 .cartListBox .detailBox .product2 .press { white-space: nowrap; margin-right: 1em; }
  .box2 .cartListBox .detailBox .quantity { order: 4; flex-basis: 70px; margin-right: 5px; }
	.box2 .cartListBox .detailBox .quantity select { font-size: 16px; }
  .box2 .cartListBox .detailBox .unitPrice { order: 3; flex-basis: 30%; margin-right: 5px; }
  .box2 .cartListBox .detailBox .unitPrice p { text-align: left; }
  .box2 .cartListBox .detailBox .subtotal { display: none; }
  .box2 .cartListBox .detailBox .delete { order: 5; flex-basis: 20px; }
  .box2 .cartListBox .deliveryDate { display: block; }
  .box2 .cartListBox .deliveryDate .indication { display: block; margin-bottom: 10px; }
  .box2 .cartListBox .deliveryDate .notes { padding-left: 0; }
  .box2 .cartTotalBox dl { width: 60%; }
}





/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
Step3
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.step03 .box2 .ttl { font-size: 17px; margin-bottom: 32px; color: #63BCBC; }
@media (min-width: 481px) and (max-width: 1020px) {
  .step03 .box2 .ttl { margin-bottom: 30px; }
}
@media (max-width: 480px) {
  .step03 .box2 .ttl { font-size: 16px; line-height: 1.4em; margin-bottom: 20px; }
}

/*ご注文者様情報をご入力ください*/
.step03 .box2 .cartBillingBox .ttl { margin-bottom: 5px; }
.step03 .box2 .cartBillingBox .ttlImp { font-size: 12px; color: #E84262; margin-top: 10px; margin-bottom: 32px; text-indent: -1em; padding-left: 1em; }


/*基本情報*/
.step03 .box2 .cartBillingBox { margin-bottom: 50px; }
.step03 .box2 .inner { display: flex; margin-bottom: 30px; }
.step03 .box2 .inner:nth-last-of-type(1) { margin: 0; }
.step03 .box2 .inner dl.groomNameTitle,
.step03 .box2 .inner dl.brideNameTitle,
.step03 .box2 .inner dl.nameTtl { margin-right: 10px; }
.step03 .box2 .inner dt { font-size: 12px; font-weight: bold; margin-bottom: 10px; line-height: 1; color: #838691; }
.step03 .box2 .inner dt .imp { color: #E84262; }
.step03 .box2 .inner dd .imp { color: #E84262; }
.step03 .box2 .inner dl.prefectures .customSelect { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 150px; cursor: pointer; background: url(../images/select_bg.png) no-repeat; background-position: right center; background-color: #F5F6FA; line-height: 40px; height: 40px; border: 1px solid #E8E9EC; padding: 0 15px; font-size: 14px; border-radius: 3px; box-sizing: border-box; }
.step03 .box2 .inner dl.prefectures .customSelect:focus { outline: none; }
.step03 .box2 .inner dl.remarks { width: 100%; }
.step03 .box2 .inner dd input { height: 40px; font-size: 14px; }
.step03 .box2 .inner dl.postalCode dd { display: flex; align-items: center; }
.step03 .box2 .inner dl.postalCode input.btnZipCode { font-size: 14px; background-color: #3B4043; border: 1px solid #3B4043; box-sizing: border-box; color: #FFF; padding: 8px 10px 9px; border-radius: 3px; vertical-align: top; cursor: pointer; }
.step03 .box2 .inner dd.date { font-size: 14px; height: 40px; display: flex; align-items: center; box-sizing: border-box; }
.step03 .box2 .inner dd.date input { width: 50px; margin-left: 10px; }
.step03 .box2 .inner dd.date input:nth-of-type(1) { margin: 0; }
.step03 .box2 .inner dd p.imp { font-size: 12px; color: #E84262; margin-top: 10px; text-indent: -1em; padding-left: 1em; }
.step03 .box2 .inner dl.pay dd > div { margin-bottom: 15px; }
.step03 .box2 .inner dl.pay dd input { display: none; }
.step03 .box2 .inner dl.pay dd input[type="radio"] + label.radio { margin-left: -2px; display: inline-flex; align-items: center; justify-content: center; border-top: 2px solid #E8E9EC; border-bottom: 2px solid #E8E9EC; border-left: 2px solid #E8E9EC; border-right: 2px solid #E8E9EC; background-color: #F5F6FA; height: 35px; padding: 0 10px; box-sizing: border-box; font-size: 13px; line-height: 1; cursor: pointer; transition: all ease 0.3s; }
.step03 .box2 .inner dl.pay dd input[type="radio"] + label.radio:nth-of-type(1) { margin-left: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.step03 .box2 .inner dl.pay dd input[type="radio"] + label.radio:nth-last-of-type(1) { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.step03 .box2 .inner dl.pay dd input[type="radio"]:checked + label.radio { background-color: #3B4043; color: #FFF; border-color: #3B4043; z-index: 1; position: relative; }
.step03 .box2 .inner dl.pay dd span { display: block; margin-bottom: 10px; font-size: 12px; }
.step03 .box2 .inner dl.pay dd span:nth-last-of-type(1) { margin-bottom: 0; }
.step03 .box2 .inner dl.pay dd span img { width: auto; height: 30px; padding-left: 10px; }
@media (min-width: 481px) and (max-width: 1020px) {
  .step03 .box2 .inner dl.Municipality input, 
  .step03 .box2 .inner dl.address input, 
  .step03 .box2 .inner dl.apartmentNameEtc input, 
  .step03 .box2 .inner dl.mail01 input, 
  .step03 .box2 .inner dl.mail02 input { width: 100%; }
  .step03 .box2 .inner dl.pay dd span img { padding-top: 5px; }
}
@media (max-width: 480px) {
  .step03 .box2 .inner { display: block; margin-bottom: 25px; }
  .step03 .box2 .inner dl:nth-of-type(1) { margin-bottom: 15px; }
  .step03 .box2 .inner dl.Municipality input, 
  .step03 .box2 .inner dl.address input, 
  .step03 .box2 .inner dl.apartmentNameEtc input, 
  .step03 .box2 .inner dl.mail01 input, 
  .step03 .box2 .inner dl.mail02 input { width: 100%; }
  .step03 .box2 .inner dl.pay dd input[type="radio"] + label.radio { font-size: 14px; padding: 0 8px; }
  .step03 .box2 .inner dl.pay dd span img { padding-top: 5px; }
	.step03 .box2 .inner dd input { font-size: 16px; }
}

/*配送先*/
.step03 .box2 .addressSelectBox { margin-bottom: 50px; }
.step03 .box2 .addressSelectInner { margin-bottom: 50px; }
.step03 .box2 .addressSelectInner:nth-last-of-type(1) { margin: 0; }
.step03 .box2 .addressSelectInner > .inner { display: flex; justify-content: space-between; }
.step03 .box2 .addressSelectInner .colLeft { flex-grow: 0; flex-shrink: 0; flex-basis: 160px; margin-right: 15px; }
.step03 .box2 .addressSelectInner .colLeft img { display: block; width: 160px; height: auto; align-self: flex-start; margin-bottom: 15px; }
.step03 .box2 .addressSelectInner .colLeft { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
.step03 .box2 .addressSelectInner .colLeft p:nth-of-type(1) { font-size: 13px; font-weight: bold; }
.step03 .box2 .addressSelectInner .colLeft p:nth-of-type(2) { font-size: 14px; }
.step03 .box2 .addressSelectInner .colLeft .extEcList1LiPrice strong { font-weight: normal; font-size: 12px; }
.step03 .box2 .addressSelectInner .colLeft .extEcList1LiPrice .tax { font-size: 10px; }
.step03 .box2 .addressSelectInner .colRight { flex-grow: 0; flex-shrink: 1; flex-basis: calc(100% - 175px); max-width: calc(100% - 175px); }
.step03 .box2 .addressSelectInner .colRight .addressSelect { margin-bottom: 40px; }
.step03 .box2 .addressSelectInner .colRight .addressSelect > .selectOuter { flex-wrap: nowrap; }
.step03 .box2 .addressSelectInner .colRight .addressSelect input { display: none; }
.step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"] + label.radio { display: inline-flex; align-items: center; justify-content: center; border-top: 2px solid #E8E9EC; border-bottom: 2px solid #E8E9EC; border-left: 2px solid #E8E9EC; border-right: 2px solid #E8E9EC; background-color: #F5F6FA; height: 35px; padding: 0 8px; margin-left: -2px; box-sizing: border-box; font-size: 13px; line-height: 1; cursor: pointer; transition: all ease 0.3s; }
.step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"] + label.radio:nth-of-type(1) { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"] + label.radio:nth-last-of-type(1) { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"]:checked + label.radio { background-color: #3B4043; color: #FFF; border-color: #3B4043; }
.step03 .box2 .addressSelectInner .colRight .addressSelect p { font-size: 12px; margin-top: 15px; }
.step03 .box2 .addressSelectInner .colRight .addressSelect p a { color: #838691; }
.step03 .box2 .addressSelectInner .colRight .addressSelect p .linkArrow:after { content:"\00a0\00a0\003e"; }
.step03 .box2 .addressSelectInner .municipality dd input,
.step03 .box2 .addressSelectInner .address dd input,
.step03 .box2 .addressSelectInner .apartmentNameEtc dd input { width: 100%; }
@media (min-width: 501px) and (max-width: 1074px) {
  .step03 .box2 .addressSelectInner > .inner { /*display: block;*/ }
  .step03 .box2 .addressSelectInner .colLeft { text-align: center; margin-bottom: 20px; }
  .step03 .box2 .addressSelectInner .colLeft img { margin: 0 auto 15px; }
  .step03 .box2 .addressSelectInner .colLeft .extEcList1LiPrice { line-height: 1; }
  .step03 .box2 .addressSelectInner .colLeft .extEcList1LiPrice strong { font-size: 11px; }
	.step03 .box2 .addressSelectInner .colRight { max-width: none; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect { margin-bottom: 25px; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"] + label.radio { font-size: 12px; padding: 0 6px; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"] + label.radio:first-of-type { margin-left: 0; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect .sub a { line-height: 1.8em; }
}
@media (max-width: 834px) {
	.step03 .box2 .addressSelectInner > .inner { display: block; }
}
@media (max-width: 500px) {
  .step03 .box2 .addressSelectInner > .inner { display: block; }
  .step03 .box2 .addressSelectInner .colLeft { text-align: center; margin-bottom: 20px; }
  .step03 .box2 .addressSelectInner .colLeft img { margin: 0 auto 15px; }
  .step03 .box2 .addressSelectInner .colLeft .extEcList1LiPrice { line-height: 1; }
  .step03 .box2 .addressSelectInner .colLeft .extEcList1LiPrice strong { font-size: 11px; }
	.step03 .box2 .addressSelectInner .colRight { max-width: none; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect { margin-bottom: 25px; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"] + label.radio { font-size: 12px; padding: 0 6px; margin-left: 0; width: 100%; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"] + label.radio:not(:first-of-type) { margin-top: -2px; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"] + label.radio:nth-of-type(1) { border-top-right-radius: 3px; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect input[type="radio"] + label.radio:nth-last-of-type(1) { border-bottom-left-radius: 3px; }
  .step03 .box2 .addressSelectInner .colRight .addressSelect .sub a { line-height: 1.8em; }
}

/*ご注文者の住所*/
.step03 .box2 .addressSelectBox2 .ttl { margin-bottom: 5px; }
.step03 .box2 .addressSelectBox2 .ttlImp { font-size: 12px; color: #E84262; margin-top: 10px; margin-bottom: 32px; text-indent: -1em; padding-left: 1em; }

/*会場にてお渡しの住所*/
.step03 .box2 .addressSelectInner .customerAddress [disabled=disabled] { opacity: 0.6; }




/*同意チェック*/
.step03 .box2 .agreementBox { text-align: center; margin-bottom: 40px; }
.step03 .box2 .agreementBox p { margin-bottom: 20px; }
.step03 .box2 .agreementBox label { height: 35px; display: inline-block; }
.step03 .box2 .agreementBox input { display: none; }
.step03 .box2 .agreementBox input:checked + .agreeParts:after { content: ""; display: block; position: absolute; top: -4px; left: 12px; width: 8px; height: 17px; transform: rotate(40deg); border-bottom: 4px solid #009A9A; border-right: 4px solid #009A9A; }
.step03 .box2 .agreementBox .agreeParts { padding-left: 50px; position: relative; font-size: 16px; }
.step03 .box2 .agreementBox .agreeParts:before { content: ""; display: block; position: absolute; top: -8px; left: 0; width: 35px; height: 35px; border: 3px solid #98C9C8; box-sizing: border-box; }
@media (min-width: 481px) and (max-width: 600px) {
  .step03 .box2 .agreementBox { margin-bottom: 20px; }
  .step03 .box2 .agreementBox p { text-align: left; }
}
@media (max-width: 480px) {
  .step03 .box2 .agreementBox { margin-bottom: 20px; }
  .step03 .box2 .agreementBox p { text-align: left; }
}

/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
Step4
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.step04 .box2 .ttl { font-size: 17px; margin-bottom: 35px; color: #63BCBC; }
.step04 .box2 .contentTtl { font-size: 12px; font-weight: bold; margin-bottom: 15px; color: #838691; line-height: 1; }
.step04 .box2 .contentTtl input[name="wordCopy"] { display: inline-flex; justify-content: center; align-items: center; font-size: 13px; line-height: 1; font-family: system-ui; color: #FFF; padding: 6px 10px 5px; border: none; border-radius: 5px; background-color: #63BCBC; }
@media (min-width: 481px) and (max-width: 850px) {
  .step04 .box2 .contentTtl { margin-bottom: 10px; }
}
@media (max-width: 480px) {
  .step04 .box2 .ttl { font-size: 16px; line-height: 1.4em; }
  .step04 .box2 .contentTtl { margin-bottom: 10px; }
}

/*お花の特徴と加工の仕上がり情報をご入力ください*/
.step04 .box2 .detailBox .ttl { margin-bottom: 5px; }
.step04 .box2 .detailBox .ttlImp { font-size: 12px; color: #E84262; margin-top: 10px; margin-bottom: 32px; text-indent: -1em; padding-left: 1em; }

/*n額目 - 商品名*/
.step04 .box2 .detailBox { margin-bottom: 50px; }
.step04 .box2 .detailBox:nth-last-of-type(1) { margin: 0; }
.step04 .box2 .detailBox .picTtl { display: flex; align-items: center; margin-bottom: 30px; margin-top: 100px; }
.step04 .box2 .detailBox .picTtl:nth-of-type(1) { margin-top: 0; }
.step04 .box2 .detailBox .picTtl img { display: block; margin-right: 10px; width: 100px; height: auto; align-self: flex-start; }
.step04 .box2 .detailBox .picTtl .name { display: block; font-size: 16px; line-height: 1.5em; }
.step04 .box2 .detailBox .picTtl .name span:nth-of-type(1) { font-weight: bold; font-size: 13px; display: block; }
@media (min-width: 481px) and (max-width: 850px) {
  .step04 .box2 .detailBox { margin-bottom: 25px; }
  .step04 .box2 .detailBox .picTtl { display: block; text-align: center; }
  .step04 .box2 .detailBox .picTtl img { margin: 0 auto 15px; width: 140px; }
}
@media (max-width: 480px) {
  .step04 .box2 .detailBox { margin-bottom: 35px; }
  .step04 .box2 .detailBox .picTtl { display: block; text-align: center; }
  .step04 .box2 .detailBox .picTtl img { margin: 0 auto 15px; width: 140px; }
}

/*花の特徴*/
.step04 .box2 .flowerFeaturesBox { /*margin-bottom: 66px;*/margin-bottom: 40px; }
.step04 .box2 .flowerFeaturesBox .flowerDetails { flex-shrink: 0; flex-grow: 1; flex-basis: auto; }
.step04 .box2 .flowerFeaturesBox .flowerDetails p { display: block; font-size: 12px; margin-bottom: 5px; }
.step04 .box2 .flowerFeaturesBox .flowerDetails textarea { font-size: 14px; height: 100px; margin-bottom: 10px; }
@media (max-width: 480px) {
	.step04 .box2 .flowerFeaturesBox .flowerDetails textarea { font-size: 16px; }
}

/*花の特徴_ファイルアップロード*/
.FeatureFile { position: relative; margin-bottom: 3px; margin-top: 8px; display: flex; flex-wrap: wrap; }
.FeatureFile > a { order: 1; align-self: flex-start; text-decoration: none; font-size: 12px; border-radius: 3px; padding: 3px 10px; margin-right: 20px; box-sizing: border-box; background-color: #838691; color: #FFF; }
div[id^="uploaded_FeatureFile"] { order: 3; position: relative; width: 100px; }
div[id^="uploaded_FeatureFile"] a { position: absolute; top: 5px; right: 5px; width: 19px; height: 19px; text-indent: -9999px; background: url("../images/ico_cross.png") no-repeat center center; transition: opacity ease 0.3s; }
#FeatureFileOld1 { order: 2; position: relative; top: 0; left: 0px; width: 100px; }
#FeatureFileOld1 a { position: absolute; top: 5px; right: 5px; width: 19px; height: 19px; text-indent: -9999px; background: url("../images/ico_cross.png") no-repeat center center; transition: opacity ease 0.3s; }
.FeatureFileOld { order: 2; position: relative; top: 0; left: 0px; width: 100px; }
.FeatureFileOld a { position: absolute; top: 5px; right: 5px; width: 19px; height: 19px; text-indent: -9999px; background: url("../images/ico_cross.png") no-repeat center center; transition: opacity ease 0.3s; }
.step04 .box2 .flowerFeaturesBox .flowerDetails span { order: 4; display: block; font-size: 11px; color: #E84262; flex-basis: 100%; position: absolute; top: 28px; left: 0; }


.step04 .box2 .inner dt .imp { color: #E84262; position: unset; display: inline; }
.step04 .box2 .inner dd .imp { color: #E84262; position: unset; display: inline; }
.step04 .box2 .inner dd .kokuinThirdLineImp.noImp { color: #FFFFFF; }

/*クロス*/
.step04 .optionClothBox { margin-bottom: 40px; overflow: hidden; }
.step04 .optionClothBox .contentTtl { margin-bottom: 5px; }
.step04 .optionClothBox .radioBox { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-right: -10px; }
.step04 .optionClothBox .radioBox input[type="radio"] { display: none; }
.step04 .optionClothBox .radioBox input[type="radio"] + label.radio { flex-grow: 0; flex-shrink: 0; flex-basis: calc((100% / 6) - 10px); max-width: calc((100% / 6) - 10px); margin-top: 10px; margin-right: 10px; font-size: 10px; line-height: 1.3em; text-align: center; cursor: pointer; }
.step04 .optionClothBox .radioBox input[type="radio"] + label.radio:before { content: ''; border: 2px solid #E8E9EC; display: block; margin-bottom: 5px; height: 30px; transition: all 250ms ease; z-index: 1; box-sizing: border-box; }
.step04 .optionClothBox .radioBox input[type="radio"]:checked + .radio:before { border: 2px solid #3B4043; box-sizing: border-box; }
.step04 .optionClothBox .radioBox .rabel { cursor: pointer; }
.step04 .optionClothBox .radioBox input[type="radio"].white + label.radio:before { background-color: #FFF; }
.step04 .optionClothBox .radioBox input[type="radio"].mint + label.radio:before { background-color: #DDEAE4; }
.step04 .optionClothBox .radioBox input[type="radio"].kinari + label.radio:before { background-color: #D1BBA0; }
.step04 .optionClothBox .radioBox input[type="radio"].moss + label.radio:before { background-color: #8B8855; }
.step04 .optionClothBox .radioBox input[type="radio"].bluegray + label.radio:before { background-color: #C1CFDF; }
.step04 .optionClothBox .radioBox input[type="radio"].coral + label.radio:before { background-color: #DFBAB6; }
.step04 .optionClothBox .radioBox input[type="radio"].plum + label.radio:before { background-color: #C09BB9; }
.step04 .optionClothBox .radioBox input[type="radio"].select + label.radio:before { background-color: #FFF; }
.step04 .optionClothBox .radioBox input[type="radio"].bran + label.radio:before { background-color: #775C45; }
.step04 .optionClothBox .radioBox input[type="radio"].blue + label.radio:before { background-color: #82D2D4; }
.step04 .optionClothBox .radioBox input[type="radio"].noir + label.radio:before { background-color: #3F3F3F; }
.step04 .optionClothBox .radioBox input[type="radio"].orange + label.radio:before { background-color: #F18F3D; }
.step04 .optionClothBox .radioBox input[type="radio"].neige + label.radio:before { background-color: #FFF; }
.step04 .optionClothBox .radioBox input[type="radio"].ivory + label.radio:before { background-color: #F7EDDD; }
.step04 .optionClothBox .radioBox input[type="radio"].pink + label.radio:before { background-color: #D9C2B4; } /*ピンク #FAE5E8 => サンドベージュ #D9C2B4*/
.step04 .optionClothBox .radioBox input[type="radio"].greige + label.radio:before { background-color: #cdb7aa; }
.step04 .optionClothBox .radioBox input[type="radio"].gray + label.radio:before { background-color: #d5cccd; }
@media (min-width: 851px) and (max-width: 1020px) {
	.step04 .optionClothBox .radioBox input[type="radio"] + label.radio { flex-basis: calc((100% / 5) - 10px); max-width: calc((100% / 5) - 10px); }
}
@media (min-width: 481px) and (max-width: 850px) {
	.step04 .optionClothBox .radioBox input[type="radio"] + label.radio { flex-basis: calc((100% / 4) - 10px); max-width: calc((100% / 4) - 10px); }
}
@media (max-width: 480px) {
  .step04 .optionClothBox .radioBox input[type="radio"] + label.radio { flex-basis: calc((100% / 3) - 10px); max-width: calc((100% / 3) - 10px); margin-top: 8px; }
  .step04 .optionClothBox .radioBox input[type="radio"] + label.radio:before { margin-bottom: 2px; }
}

/*ワード（刻印）*/
.step04 .optionWordBox { margin-bottom: 40px; }
.step04 .optionWordBox .inner { display: flex; justify-content: space-between; margin-top: 15px; font-size: 13px; }
.step04 .optionWordBox > .inner .colLeft dl { margin-bottom: 15px; display: flex; align-items: center; }
.step04 .optionWordBox > .inner .colLeft dl:nth-last-of-type(1) { margin: 0; }
.step04 .optionWordBox > .inner .colLeft dl dt { font-size: 12px; font-weight: bold; margin-right: 10px; color: #838691; flex: 0 0 auto; }
.step04 .optionWordBox input[type="radio"] + label { font-size: 16px; }
.step04 .optionWordBox > .inner .colLeft dl dd input.word_name { width: 230px; }
.step04 .optionWordBox > .inner .colLeft dl dd input.word_name::placeholder { font-size: 12px; }
.step04 .optionWordBox > .inner .colLeft dl dd input[type="text"] { height: 35px; padding: 0 4px; text-align: center; font-size: 16px; font-family: 'Source Sans Pro', sans-serif; vertical-align: middle; }
.step04 .optionWordBox input[type="text"] { border-radius: 3px; border: 1px solid #E8E9EC; box-sizing: border-box; font-size: 16px; }
/*.step04 .optionWordBox > .inner .colLeft dl dd input.word_year { width: 47px; }*/
.step04 .optionWordBox > .inner .colLeft dl dd input.word_year { width: 40px; }
.step04 .optionWordBox > .inner .colLeft dl dd input.word_month { width: 34px; }
.step04 .optionWordBox > .inner .colLeft dl dd input.word_day { width: 34px; }
.step04 .optionWordBox > .inner .colLeft dl dd input[type="tel"] { height: 35px; padding: 0 4px; text-align: center; font-size: 16px; font-family: 'Source Sans Pro', sans-serif; vertical-align: middle; }
.step04 .optionWordBox input[type="tel"] { border-radius: 3px; border: 1px solid #E8E9EC; box-sizing: border-box; font-size: 16px; }
.step04 .optionWordBox > .inner .colLeft dl dd[class^="kokuin"] { display: flex; align-items: center; }
.step04 .optionWordBox > .inner .colLeft dl dd .radioBox { vertical-align: top; display: inline-block; margin-right: 5px; }
.step04 .optionWordBox > .inner .colLeft dl dd .radioBox input { display: none; }
.step04 .optionWordBox > .inner .colLeft dl dd .radioBox input[type="radio"] + label.radio { display: inline-flex; align-items: center; justify-content: center; border-top: 2px solid #E8E9EC; border-bottom: 2px solid #E8E9EC; border-left: 2px solid #E8E9EC; border-right: 2px solid #E8E9EC; background-color: #F5F6FA; height: 35px; padding: 0 10px; box-sizing: border-box; font-size: 13px; line-height: 1; cursor: pointer; transition: all ease 0.3s; }
.step04 .optionWordBox > .inner .colLeft dl dd .radioBox input[type="radio"] + label.radio:nth-of-type(1) { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.step04 .optionWordBox > .inner .colLeft dl dd .radioBox input[type="radio"] + label.radio:nth-last-of-type(1) { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.step04 .optionWordBox > .inner .colLeft dl dd .radioBox input[type="radio"]:checked + label.radio { background-color: #3B4043; color: #FFF; border-color: #3B4043; }
.step04 .optionWordBox > .inner .colRight { display: block; }
.step04 .optionWordBox > .inner .colRight p:nth-of-type(1) { font-size: 12px; font-weight: bold; line-height: 1; margin-bottom: 10px; color: #838691; }
.step04 .optionWordBox > .inner .colRight p:nth-of-type(2) { font-size: 10px; line-height: 1; }
.step04 .optionWordBox > .inner .colRight .prevArea { display: block; margin-top: 8px; margin-bottom: 5px; width: 180px; padding: 10px; background-color: #ECECEC; text-align: center; font-size: 11px; bx-sizing: border-box; }
.step04 .optionWordBox > .inner .colRight .prevArea span { display: block; line-height: 1.5em; }
.step04 .optionWordBox > .inner .colRight .prevArea .line1 { font-family: 'Cormorant Infant', serif; letter-spacing: 1px; }
.step04 .optionWordBox > .inner .colRight .prevArea .line2 { font-family: 'Cormorant Infant', serif; }
.step04 .optionWordBox > .inner .colRight .prevArea .line3 { font-family: 'Gabriela', serif; font-style: italic; }
@media (min-width: 951px) and (max-width: 1020px) {
  .step04 .optionWordBox > .inner .colLeft dl { align-items: flex-start; line-height: 40px; margin-bottom: 5px; }
  .step04 .optionWordBox > .inner .colLeft dl dd.kokuinThirdLine input[type="text"] { margin-left: 5px; margin-right: 2px; }
  .step04 .optionWordBox > .inner .colLeft dl dd[class^="kokuin"] { display: block; margin-right: 20px; }
  .step04 .optionWordBox > .inner .colLeft dl dd.kokuinThirdLine { white-space: nowrap; }
  .step04 .optionWordBox > .inner .colLeft dl dd .radioBox { display: inline-block; }
}
@media (min-width: 481px) and (max-width: 950px) {
	.step04 .optionWordBox .inner { display: block; }
  .step04 .optionWordBox > .inner .colLeft { margin-bottom: 25px; }
  .step04 .optionWordBox > .inner .colLeft dl dd.kokuinThirdLine { white-space: nowrap; }
  .step04 .optionWordBox > .inner .colRight { display: flex; flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .step04 .optionWordBox .inner { display: block; }
  .step04 .optionWordBox > .inner .colLeft { margin-bottom: 10px; }
  .step04 .optionWordBox > .inner .colLeft dl { align-items: flex-start; line-height: 40px; margin-bottom: 5px; }
  .step04 .optionWordBox > .inner .colLeft dl dd div { margin-bottom: 2px; }
  .step04 .optionWordBox > .inner .colLeft dl dd[class^="kokuin"]{ display: block; }
  .step04 .optionWordBox > .inner .colLeft dl dd .radioBox { display: inline-block; }
  .step04 .optionWordBox > .inner .colRight { display: flex; flex-direction: column; align-items: center; }
}

/*レイアウトリクエスト*/
.step04 .optionLayoutBox { font-family: 'Source Sans Pro', sans-serif; font-size: 12px; }
.step04 .optionLayoutBox .inner { margin-top: 15px; position: relative; }
.step04 .optionLayoutBox .layoutSelect input { display: none; }
.step04 .optionLayoutBox .layoutSelect input:checked + label { background-color: #3B4043; color: #FFF; border-color: #3B4043; position: relative; z-index: 1; }
.step04 .optionLayoutBox .layoutSelect label { margin-left: -2px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #E8E9EC; height: 35px; margin-bottom: 6px; padding: 0 10px; box-sizing: border-box; font-size: 13px; line-height: 1; cursor: pointer; transition: all ease 0.3s; }
.step04 .optionLayoutBox .layoutSelect label:nth-of-type(1) { margin-left: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.step04 .optionLayoutBox .layoutSelect label:nth-last-of-type(1) { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.step04 .optionLayoutBox .layoutSelect { vertical-align: top; display: inline-block; margin-right: 10px; }
.step04 .optionLayoutBox .layoutSelect input { display: none; }
.step04 .optionLayoutBox .layoutSelect input[type="radio"] + label.radio { display: inline-flex; align-items: center; justify-content: center; border-top: 2px solid #E8E9EC; border-bottom: 2px solid #E8E9EC; border-left: 2px solid #E8E9EC; border-right: 2px solid #E8E9EC; background-color: #F5F6FA; height: 35px; padding: 0 10px; box-sizing: border-box; font-size: 13px; line-height: 1; cursor: pointer; transition: all ease 0.3s; }
.step04 .optionLayoutBox .layoutSelect input[type="radio"] + label.radio:nth-of-type(1) { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.step04 .optionLayoutBox .layoutSelect input[type="radio"] + label.radio:nth-last-of-type(1) { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.step04 .optionLayoutBox .layoutSelect input[type="radio"]:checked + label.radio { background-color: #3B4043; color: #FFF; border-color: #3B4043; }
.step04 .optionLayoutBox .layoutSelect.layoutList label { border-radius: 3px; margin-left: 0; }
.step04 .optionLayoutBox .layoutSelect.layoutList label:not(:last-of-type) { margin-right: 5px; }
.step04 .optionLayoutBox .layoutSelect.layoutList input[type="checkbox"] + label { background-color: #F5F6FA; }
.step04 .optionLayoutBox .layoutSelect.layoutList input[type="checkbox"]:disabled + label { cursor: default; opacity: 0.3 !important; }
.step04 .optionLayoutBox .layoutSelect.layoutList input[type="checkbox"]:checked + label { background-color: #3B4043; }
.step04 .optionLayoutBox .inner textarea { width: 100%; padding: 15px !important; border-radius: 3px; border: 1px solid #E8E9EC; box-sizing: border-box; font-size: 14px; margin-bottom: 10px; }
.step04 .optionLayoutBox .LayoutFile > span { display: block; font-size: 11px; color: #E84262; position: absolute; top: 28px; left: 0; }
@media (max-width: 480px) {
  .step04 .optionLayoutBox .layoutSelect label { font-size: 12px; padding: 0 7px; }
	.step04 .optionLayoutBox .inner textarea { font-size: 16px; }
}

/*レイアウトリクエスト　備考*/
.step04 .optionLayoutNoteBox { font-family: 'Source Sans Pro', sans-serif; font-size: 12px; }
.step04 .optionLayoutNoteBox .inner { margin-top: 15px; position: relative; }
.step04 .optionLayoutNoteBox .inner textarea { width: 100%; padding: 15px !important; border-radius: 3px; border: 1px solid #E8E9EC; box-sizing: border-box; font-size: 14px; margin-bottom: 10px; }
.step04 .optionLayoutNoteBox .LayoutFile > span { display: block; font-size: 11px; color: #E84262; position: absolute; top: 28px; left: 0; }
@media (max-width: 480px) {
	.step04 .optionLayoutNoteBox .inner textarea { font-size: 16px; }
}


/*レイアウトリクエスト_ファイルアップロード*/
.LayoutFile { position: relative; margin-bottom: 3px; margin-top: 8px; display: flex; flex-wrap: wrap; }
.LayoutFile > a { order: 1; align-self: flex-start; text-decoration: none; font-size: 12px; border-radius: 3px; padding: 3px 10px; margin-right: 20px; box-sizing: border-box; background-color: #838691; color: #FFF; }
div[id^="uploaded_LayoutFile"] { order: 3; position: relative; width: 100px; }
div[id^="uploaded_LayoutFile"] a { position: absolute; top: 5px; right: 5px; width: 19px; height: 19px; text-indent: -9999px; background: url("../images/ico_cross.png") no-repeat center center; transition: opacity ease 0.3s; }
#LayoutFileOld1 { order: 2; position: relative; top: 0; left: 0px; width: 100px; }
#LayoutFileOld1 a { position: absolute; top: 5px; right: 5px; width: 19px; height: 19px; text-indent: -9999px; background: url("../images/ico_cross.png") no-repeat center center; transition: opacity ease 0.3s; }

.LayoutFileOld { order: 2; position: relative; top: 0; left: 0px; width: 100px; }
.LayoutFileOld a { position: absolute; top: 5px; right: 5px; width: 19px; height: 19px; text-indent: -9999px; background: url("../images/ico_cross.png") no-repeat center center; transition: opacity ease 0.3s; }


/*レイアウトリクエスト 設定できないときのコメント*/
.step04 .optionLayoutNoteBox .inner .ttlImp { position: absolute; top: -15px; left: 1em; }

/*額の向き*/
.step04 .optionDirectionBox { font-family: 'Source Sans Pro', sans-serif; font-size: 12px; }
.step04 .optionDirectionBox .inner { margin-top: 15px; position: relative; }
.step04 .optionDirectionBox .directionSelect input { display: none; }
.step04 .optionDirectionBox .directionSelect input:checked + label { background-color: #3B4043; color: #FFF; border-color: #3B4043; position: relative; z-index: 1; }
.step04 .optionDirectionBox .directionSelect label { margin-left: -2px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #E8E9EC; height: 35px; margin-bottom: 6px; padding: 0 10px; box-sizing: border-box; font-size: 13px; line-height: 1; cursor: pointer; transition: all ease 0.3s; }
.step04 .optionDirectionBox .directionSelect label:nth-of-type(1) { margin-left: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.step04 .optionDirectionBox .directionSelect label:nth-last-of-type(1) { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.step04 .optionDirectionBox .directionSelect { vertical-align: top; display: inline-block; margin-right: 10px; }
.step04 .optionDirectionBox .directionSelect input { display: none; }
.step04 .optionDirectionBox .directionSelect input[type="radio"] + label.radio { display: inline-flex; align-items: center; justify-content: center; border-top: 2px solid #E8E9EC; border-bottom: 2px solid #E8E9EC; border-left: 2px solid #E8E9EC; border-right: 2px solid #E8E9EC; background-color: #F5F6FA; height: 35px; padding: 0 10px; box-sizing: border-box; font-size: 13px; line-height: 1; cursor: pointer; transition: all ease 0.3s; }
.step04 .optionDirectionBox .directionSelect input[type="radio"] + label.radio:nth-of-type(1) { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.step04 .optionDirectionBox .directionSelect input[type="radio"] + label.radio:nth-last-of-type(1) { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.step04 .optionDirectionBox .directionSelect input[type="radio"]:checked + label.radio { background-color: #3B4043; color: #FFF; border-color: #3B4043; }
@media (max-width: 480px) {
  .step04 .optionDirectionBox .layoutSelect label { font-size: 12px; padding: 0 7px; }
	.step04 .optionDirectionBox .inner textarea { font-size: 16px; }
}



/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
Step5
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.step05 .box2 .ttl { font-size: 17px; color: #63BCBC; }
.step05 .box2 .innerBox2 .contentBox { position: relative; margin-bottom: 100px; }
.step05 .box2 .innerBox2 .contentBox:nth-last-of-type(1) { margin-bottom: 0; }
.step05 .box2 .contentBox > .ttl { margin-bottom: 35px; }
.step05 .box2 .innerBox2 .contentBox .btnChange { position: absolute; top: 0; right: 0; }
@media (min-width: 501px) and (max-width: 850px) {
  .step05 .box2 .ttl { font-size: 16px; line-height: 1.4em; }
  .step05 .box2 .innerBox2 .contentBox { margin-bottom: 50px; }
  .step05 .box2 .innerBox2 .contentBox .btnChange { top: 0; }
}
@media (max-width: 500px) {
  .step05 .box2 .ttl { font-size: 16px; line-height: 1.4em; }
  .step05 .box2 .innerBox2 .contentBox { margin-bottom: 50px; }
  .step05 .box2 .contentBox > .ttl { margin-bottom: 45px; }
  .step05 .box2 .innerBox2 .contentBox .btnChange { top: 30px; }
}

/*変更するボタン*/
.step05 .box2 .contentBox a.btnChange { display: inline-block; padding: 8px 25px; background-color: #838691; border-radius: 3px; text-decoration: none; font-size: 13px; color: #FFF; line-height: 1; }
@media (min-width: 481px) and (max-width: 850px) {
  .step05 .box2 .contentBox a.btnChange { padding: 6px 12px; font-size: 12px; }
}
@media (max-width: 480px) {
  .step05 .box2 .contentBox a.btnChange { padding: 6px 12px; font-size: 12px; }
}

/*カート*/
.step05 .box2 .cartListBox .ttlBox .delete { display: none; }
.step05 .box2 .cartListBox .detailBox .delete { display: none; }
@media (min-width: 481px) and (max-width: 850px) {
  .step05 .box2 .cartListBox .detailBox .quantity p:before { content: "×\00a0"; }
}
@media (max-width: 480px) {
  .step05 .box2 .cartListBox .detailBox .quantity p:before { content: "×\00a0"; }
}

/*ご注文者様情報*/
.step05 .box2 .ordererBox {}
.step05 .box2 .ordererBox .inner dl { display: flex; margin-bottom: 30px; }
.step05 .box2 .ordererBox .inner:nth-last-of-type(1) dl { margin: 0; } 
.step05 .box2 .ordererBox .inner dt { flex-grow: 0; flex-shrink: 0; flex-basis: 190px; font-size: 12px; font-weight: bold; color: #838691; }
.step05 .box2 .ordererBox .inner dd { font-size: 14px; }
.step05 .box2 .ordererBox .inner .imp { color: #E84262; }
@media (min-width: 481px) and (max-width: 850px) {
  .step05 .box2 .ordererBox .inner dt { flex-basis: 150px; }
}
@media (max-width: 480px) {
  .step05 .box2 .ordererBox .inner dt { flex-basis: 140px; }
}

/*花の特徴・加工の仕上がり情報*/
.step05 .box2 .detailBoxInner { display: flex; justify-content: space-between; margin-bottom: 100px; }
.step05 .box2 .detailBoxInner:nth-last-of-type(1) { margin: 0; }
.step05 .box2 .detailBoxInner .colLeft { flex-grow: 0; flex-shrink: 0; flex-basis: 200px; margin-right: 15px; }
.step05 .box2 .detailBoxInner .colLeft img { display: block; margin-right: 10px; width: 85px; height: auto; align-self: flex-start; margin-bottom: 10px; }
.step05 .box2 .detailBoxInner .colLeft p:nth-of-type(1) { font-size: 13px; font-weight: bold; }
.step05 .box2 .detailBoxInner .colLeft p:nth-of-type(2) { font-size: 14px; } 
.step05 .box2 .detailBoxInner .colRight { flex-grow: 0; flex-shrink: 1; flex-basis: calc( 100% - 200px); max-width: calc( 100% - 200px); }
.step05 .box2 .detailBoxInner .colRight > div > dl { display: flex; margin-bottom: 30px; }
.step05 .box2 .detailBoxInner .colRight > div:nth-last-of-type(1) > dl { margin: 0; } 
.step05 .box2 .detailBoxInner .colRight > div > dl > dt { flex-grow: 0; flex-shrink: 0; flex-basis: 150px; font-size: 12px; font-weight: bold; color: #838691; }
.step05 .box2 .detailBoxInner .colRight > div > dl > dd { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 150px); max-width: calc(100% - 150px); font-size: 14px; }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .anotherAddress { margin-top: 15px; background-color: #F4F4F4; padding: 15px; }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .anotherAddress dl { display: flex; margin-bottom: 15px; }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .customerAddress { margin-top: 15px; background-color: #F4F4F4; padding: 15px; }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .customerAddress dl { display: flex; margin-bottom: 15px; }
.step05 .box2 .detailBoxInner .colRight .inner:nth-last-of-type(1) dl { margin: 0; }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .anotherAddress dt { flex-grow: 0; flex-shrink: 0; flex-basis: 120px; }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .anotherAddress dt .imp { color: #E84262; }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .anotherAddress dd { flex-grow: 1; flex-shrink: 0; flex-basis: calc(100% - 120px); max-width: calc(100% - 120px); }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .customerAddress dt { flex-grow: 0; flex-shrink: 0; flex-basis: 120px; }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .customerAddress dt .imp { color: #E84262; }
.step05 .box2 .detailBoxInner .colRight .shippingAddressBox .customerAddress dd { flex-grow: 1; flex-shrink: 0; flex-basis: calc(100% - 120px); max-width: calc(100% - 120px); }
.step05 .box2 .detailBoxInner .colRight .flowerFeaturesBox dd p { margin-bottom: 10px; }
.step05 .box2 .detailBoxInner .colRight .flowerFeaturesBox dd img { width: 85px; height: auto; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dl { display: flex; margin-bottom: 18px; } 
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dt { flex-grow: 0; flex-shrink: 0; flex-basis: 60px; font-size: 12px; line-height: 14px; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dd { font-size: 14px; line-height: 1; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 { display: block; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 p:nth-of-type(1) { font-size: 12px; font-weight: bold; line-height: 1; margin-bottom: 10px; color: #838691; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 p:nth-of-type(2) { font-size: 10px; line-height: 1; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 .prevArea { display: block; margin-top: 8px; margin-bottom: 5px; width: 180px; padding: 10px; background-color: #ECECEC; text-align: center; font-size: 11px; bx-sizing: border-box; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 .prevArea span { display: block; line-height: 1.5em; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 .prevArea .line1 { font-family: 'Cormorant Infant', serif; letter-spacing: 1px; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 .prevArea .line2 { font-family: 'Cormorant Infant', serif; }
.step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 .prevArea .line3 { font-family: 'Gabriela', serif; font-style: italic; }
.step05 .box2 .detailBoxInner .colRight .optionLayoutBox dd .layoutSelect { margin-bottom: 10px; }
.step05 .box2 .detailBoxInner .colRight .optionLayoutBox dd .inner div:nth-of-type(1) { margin-bottom: 10px; }
.step05 .box2 .detailBoxInner .colRight .optionLayoutBox dd img { width: 85px; height: auto; }
@media (min-width: 851px) and (max-width: 1080px) {
  .step05 .box2 .detailBoxInner { margin-bottom: 50px; }
  .step05 .box2 .detailBoxInner .colRight { flex-basis: calc( 100% - 140px); max-width: calc( 100% - 140px); }
  .step05 .box2 .detailBoxInner .colRight > div > dl > dt { flex-basis: 140px; }
  .step05 .box2 .detailBoxInner .colRight > div > dl > dd { flex-basis: calc(100% - 140px); max-width: calc(100% - 140px); }
  .step05 .box2 .detailBoxInner .colLeft { flex-basis: 140px; }
  .step05 .box2 .detailBoxInner .colRight .shippingAddressBox .anotherAddress dl { display: block; }
  .step05 .box2 .detailBoxInner .colRight .shippingAddressBox .anotherAddress dt { margin-bottom: 5px; }
  .step05 .box2 .detailBoxInner .colRight .shippingAddressBox .anotherAddress dd { max-width: 100%; }
  .step05 .box2 .detailBoxInner .colRight .shippingAddressBox .customerAddress dl { display: block; }
  .step05 .box2 .detailBoxInner .colRight .shippingAddressBox .customerAddress dt { margin-bottom: 5px; }
  .step05 .box2 .detailBoxInner .colRight .shippingAddressBox .customerAddress dd { max-width: 100%; }
}
@media (min-width: 651px) and (max-width: 850px) {
  .step05 .box2 .detailBoxInner { margin-bottom: 50px; }
  .step05 .box2 .detailBoxInner .colLeft { text-align: center; margin-bottom: 30px; }
  .step05 .box2 .detailBoxInner .colLeft img { margin: 0 auto 15px; width: 140px; }
  .step05 .box2 .detailBoxInner { display: block; }
  .step05 .box2 .detailBoxInner .colRight { max-width: 100%; }
  .step05 .box2 .detailBoxInner .colRight > div > dl > dt { flex-basis: 140px; }
  .step05 .box2 .detailBoxInner .colRight > div > dl > dd { flex-basis: calc(100% - 140px); max-width: calc(100% - 140px); }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dl dt { margin-bottom: 9px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 { margin-bottom: 20px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dl { margin-bottom: 12px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dt { margin-bottom: 0; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dd {}
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 { text-align: center; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 p:nth-of-type(2) { margin-bottom: 8px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 .prevArea { margin: 0 auto; }
}
@media (min-width: 501px) and (max-width: 650px) {
  .step05 .box2 .detailBoxInner { margin-bottom: 50px; }
  .step05 .box2 .detailBoxInner .colLeft { text-align: center; margin-bottom: 30px; }
  .step05 .box2 .detailBoxInner .colLeft img { margin: 0 auto 15px; width: 140px; }
  .step05 .box2 .detailBoxInner { display: block; }
  .step05 .box2 .detailBoxInner .colRight { max-width: 100%; }
  .step05 .box2 .detailBoxInner .colRight > div > dl > dt { flex-basis: 140px; }
  .step05 .box2 .detailBoxInner .colRight > div > dl > dd { flex-basis: calc(100% - 140px); max-width: calc(100% - 140px); }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dl dt { margin-bottom: 9px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 { margin-bottom: 20px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dl { margin-bottom: 12px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dt { margin-bottom: 0; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dd {}
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 { text-align: center; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 p:nth-of-type(2) { margin-bottom: 8px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 .prevArea { margin: 0 auto; }
}
@media (max-width: 500px) {
  .step05 .box2 .detailBoxInner { margin-bottom: 50px; }
  .step05 .box2 .detailBoxInner .colLeft { text-align: center; margin-bottom: 30px; }
  .step05 .box2 .detailBoxInner .colLeft img { margin: 0 auto 15px; width: 140px; }
  .step05 .box2 .detailBoxInner { display: block; }
  .step05 .box2 .detailBoxInner .colRight { max-width: 100%; }
  .step05 .box2 .detailBoxInner .colRight > div > dl { display: block; margin-bottom: 25px; }
  .step05 .box2 .detailBoxInner .colRight > div > dl > dt { margin-bottom: 5px; }
  .step05 .box2 .detailBoxInner .colRight > div > dl > dd { max-width: 100%; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dl dt { margin-bottom: 9px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 { margin-bottom: 20px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dl { margin-bottom: 12px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner1 dt { margin-bottom: 0; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 { text-align: center; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 p:nth-of-type(2) { margin-bottom: 8px; }
  .step05 .box2 .detailBoxInner .colRight .optionWordBox dd .inner2 .prevArea { margin: 0 auto; }
  .step05 .box2 .detailBoxInner .colRight .flowerFeaturesBox dd p { margin-bottom: 5px; }
}

/*お支払い情報_クレジットカード*/
.step05 .box2 .payCardBox dl { display: flex; align-items: center; margin-bottom: 15px; }
.step05 .box2 .payCardBox dt { flex-grow: 0; flex-shrink: 0; flex-basis: 190px; font-size: 13px; font-weight: bold; color: #838691; }
.step05 .box2 .payCardBox dd img { width: auto; height: 30px; }
.step05 .box2 .payCardBox dd input { height: 40px; }
.step05 .box2 .payCardBox dd input[name=CardNumber] { width: 15em; }
.step05 .box2 .payCardBox dd.code input { width: /*7em;*/8em; }
.step05 .box2 .payCardBox dd.date { display: flex; align-items: flex-end; }
.step05 .box2 .payCardBox dd.date input { width: 4em; }
.step05 .box2 .payCardBox p { font-size: 12px; }
@media (min-width: 481px) and (max-width: 850px) {
  .step05 .box2 .payCardBox dt { flex-basis: 150px; }
}
@media (max-width: 480px) {
  .step05 .box2 .payCardBox dl { display: block; }
  .step05 .box2 .payCardBox dt { margin-bottom: 5px; }
}

/*お支払い情報_銀行振込*/
.step05 .box2 .payBankBox > dl { display: flex; margin-bottom: 15px; font-size: 12px; }
.step05 .box2 .payBankBox > dl dt { margin-right: 40px; font-size: 13px; font-weight: bold; color: #838691; }
.step05 .box2 .payBankBox > dl dd { color: #E84262; }
.step05 .box2 .payBankBox .detail { padding: 40px; box-sizing: border-box; background-color: #F4F4F4; line-height: 1.5em; font-size: 12px; }
.step05 .box2 .payBankBox .detail p:nth-of-type(1) { margin-right: 40px; font-size: 13px; font-weight: bold; margin-bottom: 15px; }
.step05 .box2 .payBankBox .detail p:nth-of-type(2) { margin-bottom: 15px; } 
.step05 .box2 .payBankBox .detail p:nth-of-type(3) { background-color: #DDD; padding: 20px; font-size: 16px; text-align: center; margin-bottom: 20px; } 
.step05 .box2 .payBankBox .detail p:nth-of-type(3) span { font-size: 16px; }
.step05 .box2 .payBankBox .detail p:nth-of-type(3) span:nth-of-type(1) { margin-right: 40px; }
.step05 .box2 .payBankBox .detail dl { display: flex; justify-content: space-between; margin-bottom: 10px; }
.step05 .box2 .payBankBox .detail dl:nth-last-of-type(1) { margin: 0; }
.step05 .box2 .payBankBox .detail dl dt { flex-grow: 0; flex-shrink: 0; flex-basis: 150px; }
.step05 .box2 .payBankBox .detail dl dd { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 150px); max-width: calc(100% - 150px); }
@media (max-width: 480px) {
  .step05 .box2 .payBankBox > dl { display: block; margin-bottom: 5px; }
  .step05 .box2 .payBankBox > dl dt { margin-bottom: 5px; }
  .step05 .box2 .payBankBox .detail { padding: 20px; }
  .step05 .box2 .payBankBox .detail dl { justify-content: flex-start; }
  .step05 .box2 .payBankBox .detail dl dt { flex-basis: 80px; margin-right: 10px; }
  .step05 .box2 .payBankBox .detail dl dd { flex-basis: auto;  max-width: 100%; }
}

/*お支払い情報_クレジットカード_説明（モーダル）*/
.CardInformation .modal-inner {
  max-height: 500px !important;
}
.CardInformation .paymentBox .inner {
  margin: 40px 30px;
  line-height: 1.7em;
}
.CardInformation .paymentBox .inner h3 {
  display: inline-block;
  font-size: 20px;
}
.CardInformation .paymentBox .inner span {
  line-height: 1em;
  font-size: 12px !important;
  color: #FFF !important;
  background-color: #FF7BAC;
  padding: 5px 10px;
  position: relative;
  top: -3px;
}
.CardInformation .paymentBox .inner .cardListRow {
  padding-bottom: 5px;
}
.CardInformation .paymentBox .inner p:nth-of-type(1) {
  padding-top: 10px;
  padding-bottom: 15px;
  font-size: 12px;
  line-height: 1.3em;
}
.CardInformation .paymentBox .inner div {
  padding-bottom: 15px;
  line-height: 1em;
}





/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
Step6
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

.step06 .box2 { background-color: transparent; }
.step06 .box2 .outerBox2 { box-shadow: none; background-color: transparent; }
.step06 .box2 .innerBox2 { overflow: visible; }
.step06 .box2 .inner p { font-size: 13px; line-height: 1.8em; }
.step06 .box2 .inner p:nth-last-of-type(1) {padding-bottom: 30px; box-sizing: border-box; }
.step06 .box2 .inner p span { display: block; font-weight: bold; font-size: 12px; }
.step06 .box2 .inner .thanks { width: 159px; height: 62px; margin: 0 auto 30px; text-indent: -9999px; background: url("../images/img_thanks.png") no-repeat center center; }
.step06 .box2 .inner .notes { margin-bottom: 15px; }





/* dx の common.css からコピー/ */
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
共通検索
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

/*------------------------------------------------------------
検索ボックス（全体）
-------------------------------------------------------------*/
a.btnSearch { display: inline-block; width: 38px; height: 38px; border-radius: 3px; background-color: #3B4043 !important; background: url("../images/ico_search_white.svg") no-repeat center center; background-size: 16px 16px; text-indent: -9999px; transition: 0.2s; }
a:hover.btnSearch { opacity: 0.7; }
a.btnSearch.active { display: inline-block; width: 38px; height: 43px; margin-bottom: -10px; border-radius: 3px 3px 0 0; background-color: #FFF !important; background: url("../images/ico_close_black.svg") no-repeat center bottom 17px; background-size: 14px 14px; text-indent: -9999px; transition: 0.2s; }
.searchBox { margin-top: -5px; margin-bottom: 15px; box-sizing: border-box; }
.searchBox .formGroup { flex-wrap: wrap; padding: 10px 20px 20px; box-sizing: border-box; background-color: #FFF; }
.searchBox .formGroup > .inner { margin-top: 10px; }
.searchBox .formGroup > .inner:not(:last-of-type) { margin-right: 5px; }
.searchBox .btnBox { display: flex; justify-content: flex-end; align-self: flex-end; margin-top: 3px; background-color: #FFF; }
.searchBox .btnBox .btnReset { position: relative; text-decoration: none !important; line-height: 1em; font-weight: bold; display: inline-flex; justify-content: center; align-items: center; cursor: pointer;　border-radius: 3px; transition: all 0.2s; border: 0; font-size: 1em; width: 90px; height: 30px; color: #FFF; background-color: #C1C1C1; }
.searchBox .btnBox .btnSearch { position: relative; text-decoration: none !important; line-height: 1em; font-weight: bold; display: inline-flex; justify-content: center; align-items: center; cursor: pointer;　border-radius: 3px !important; transition: all 0.2s; border: 0; font-size: 1em; width: 90px; height: 30px; margin-left: 5px; color: #FFF; background-color: #3B4043; }
@media screen and (max-width: 550px) {
  a.btnSearch { width: 30px; height: 30px; background-size: 13px 13px; margin-left: 5px; }
  a.btnSearch.active { width: 30px; height: 35px; border-radius: 3px 3px 0 0; background: url("../images/ico_close_black.svg") no-repeat center bottom 14px; background-size: 12px 12px; }
  .searchBox { margin-top: -5px; }
  .searchBox .btnBox { justify-content: center; }
  .searchBox .btnBox .btnReset { width: 50%; }
  .searchBox .btnBox .btnSearch { width: 50%; }
}
/* /dx の common.css からコピー */

/* dx の imported.css からコピー/ */
/*extSearch*/
.searchBox { position: relative; }
.searchBox .inputOuter { position: relative; display: inline-block; }
.searchBox .inputOuter:after { content: ""; width: 6px; height: 6px; border: 0; border-bottom: solid 1px #808495; border-right: solid 1px #808495; position: absolute; top: 50%; right: calc(0% + 14px); margin-top: -6px; transform: rotate(45deg); pointer-events: none; z-index: 4; }
.searchBox input.selectedText { z-index: 3; position: relative; width: 350px; cursor: pointer; }
.extSearch { display: none; position: absolute; top: -10px; left: -10px; width: 370px; box-sizing: border-box; padding: 50px 5px 5px 5px; box-shadow: 0 0 18px 9px rgba(0, 0, 0, 0.13); border: 5px solid #F5F6FA; background-color: #FFF; z-index: 2; }
.searchBox input.selectedText:focus + .extSearch { display: inline-block; }
.extSearch .searchResultBox .searchBox { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.extSearch .searchResultBox .searchBox input.searchText { flex: 1; }
.extSearch .searchResultBox .searchBox input[type="submit"] { position: relative; margin-left: 5px; text-decoration: none !important; line-height: 1em; font-weight: bold; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 3px; transition: all 0.2s; border: 0; font-size: 1.2em; width: 60px; height: 38px; color: #FFF; background-color: #63BCBC; }
.extSearch .searchResultBox .searchBox input[type="submit"]:hover { opacity: 0.6; }
.extSearch .searchResultBox .searchBox input[readonly]:focus { border-color: #CCC !important; }
.extSearch .searchResultBox .inner .ttlBox { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; }
.extSearch .searchResultBox .inner .ttlBox .ttl { font-weight: bold; }
.extSearch .searchResultBox .inner .ttlBox .btnReset { width: 60px !important; height: 25px !important; font-size: 12px !important; }
.extSearch .searchResultBox .inner .searchResult { height: 150px; overflow: auto; }
.extSearch .searchResultBox .inner .searchResult ul { border-top: 1px dotted #CCC; }
.extSearch .searchResultBox .inner .searchResult ul li { border-bottom: 1px dotted #CCC; }
.extSearch .searchResultBox .inner .searchResult ul li a { display: block; padding: 7px 8px 5px 8px; text-decoration: none; }
.extSearch .searchResultBox .inner .searchResult ul li a:hover { background-color: #63BCBC; color: #FFF; }
.extSearch .searchResultBox .inner .btnBox { background-color: #F5F6FA; text-align: center; }
@media screen and (max-width: 480px) {
	.searchBox .inputOuter { width: 100%; }
	.searchBox input.selectedText { width: 100%; }
	.extSearch { width: calc(100% + 20px); }
}
/* /dx の imported.css からコピー */


/*------------------------------------------------------------
フォントカラー
-------------------------------------------------------------*/
.attentionTxt { color: #FF2626; }