@charset "UTF-8";

/* ----------------------------------
 Reset
---------------------------------- */
html {
	color:#000;
	background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, figure, legend, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
/*
address, caption, cite, code, dfn, em, strong, th, var {
*/
address, caption, cite, code, dfn, th, var {
	font-style:normal;
	font-weight:normal;
}
li {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}

input, select, button {
  color: #000;
}

/* ----------------------------------
 Base
---------------------------------- */
body {
	margin: 0;
	padding: 0;
	border: none;
	font-family: 'IBM Plex Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
	color: #15181C;
	overflow-x: hidden;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

a { text-decoration: none; color: #15181C;}
a:hover,
a:focus { text-decoration: underline;}
a:focus-visivle { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;}

img { max-width: 100%;}
address { font-style: normal;}

h1, .h1 { padding: 0; margin: 30px 0 20px; border: 0; font-size: 26px; font-weight: 600; text-align: center; color: #0047BA;}
h2, .h2 { padding: 0; margin: 0 0 20px; border: 0; font-size: 24px; font-weight: 600;}
h3, .h3 { padding: 0; margin: 0 0 20px; border: 0; font-size: 18px; font-weight: bold;}
h4, .h4 { padding: 0; margin: 0 0 15px; font-size: 16px; font-weight: bold; border-bottom: 0;}
h5, .h5 { padding: 0; margin: 0 0 15px; font-size: 14px; font-weight: bold;}
h6, .h6 { padding: 0; margin: 0 0 10px; font-size: 14px; font-weight: 600;}

.img-center { display: flex; justify-content: center; align-items: center;}
.img-center img { font-size: 8px;}
.legend { padding: 0 0 10px 0; margin: 40px 0 20px; border-bottom: #0047BA 2px solid; font-size: 16px; font-weight: bold; color: #0047BA;}
.alert  { margin-top: 20px; margin-bottom: 20px;}

/* ----------------------------------
 Design
---------------------------------- */
.font-Roc { font-family: "roc-grotesk", sans-serif; font-weight: 800; font-style: normal;}

.design-headerline      { margin: 0 0 40px 0; text-align: center;}
.design-headerline h2   { padding: 0; margin: 0 0 10px 0; border: none; text-align: center; font-size: 54px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.0; color: #0047BA;}
.design-headerline .sub { font-size: 20px; font-weight: 600; text-align: center; line-height: 1.0;}

.link-more         { width: 300px; margin: 20px auto 0;}
.link-more a       { width: 100%; height: 45px; padding: 1px 0 0 0; border: #0047BA 2px solid; border-radius: 45px; font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1.0; color: #0047BA; display: flex; justify-content: center; align-items: center; background: #fff; transition: 0.3s;}
.link-more a:hover { background: #0047BA; color: #fff; box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.3);}

/* ----------------------------------
 Form Parts
---------------------------------- */
/* input */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea { -webkit-appearance: none; -moz-appearance: none; min-height: 42px; padding: 4px 10px; border: #E9EEF0 1px solid; background-color: #fff;}
select   { -webkit-appearance: none; -moz-appearance: none; height: 42px; padding: 4px; border: #E9EEF0 1px solid; background-color: #fff; line-height: 34px;}
input[type="number"] { min-width: 50px; min-height: 42px; padding: 4px; border: #E9EEF0 1px solid; background-color: #fff; box-sizing: border-box;}

input[type="text"][name="s_name"],
input[type="text"][name="s_name2"],
input[type="text"][name="d_name"],
input[type="text"][name="d_name2"],
input[type="text"][name="s_kana"],
input[type="text"][name="s_kana2"],
input[type="text"][name="d_kana"],
input[type="text"][name="d_kana2"] { width: 200px;}

select[name^="yy_"] { width: 80px; text-align: center;}
select[name^="mm_"],
select[name^="dd_"] { width: 50px; text-align: center;}

/* radio */
input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; width: 20px; height: 20px; margin-bottom: 3px; margin-right: 5px; border: #E9EEF0 1px solid; border-radius: 10px; background: #fff; position: relative; outline: 0; transition: 0.3s;}
input[type="radio"]:before { transition: 0.3s;}
input[type="radio"]:checked { border: #1846BA 1px solid;}
input[type="radio"]:checked:before { content: ""; width: 10px; height: 10px; margin: 0; border: #1846BA 1px solid; border-radius: 10px; position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); display: block; background: #1846BA;}
input[type="radio"]:checked + label { color: #1846BA; font-weight: 700;}

/* checkbox */
input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; width: 20px; height: 20px; margin-bottom: 3px; margin-right: 5px; border: #E9EEF0 1px solid; background: #fff; position: relative; outline: 0; transition: 0.3s;}
input[type="checkbox"]:before { transition: 0.3s;}
input[type="checkbox"]:checked { border: #1846BA 1px solid; background: #1846BA;}
input[type="checkbox"]:checked:before { content: ""; width: 10px; height: 6px; margin: 0; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(135deg); position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); display: block;}
input[type="checkbox"]:checked + label { font-weight: 700;}

/* ----------------------------------
 Icon
---------------------------------- */
div.block-icon { display: flex; flex-wrap: wrap;}
div.block-icon .text-icon { padding: 1px 4px 0; margin: 0 4px 4px 0; height: 18px; border: #0047BA 1px solid; border-radius: 3px; font-size: 10px; font-weight: 400; color: #0047BA; display: flex; justify-content: center; align-items: center;}
div.block-icon .image-icon { max-height: 18px; margin: 0 4px 4px 0; display: flex; justify-content: center; align-items: center;}
div.block-icon .image-icon img { width: auto; height: 18px; vertical-align: top;}
div.block-icon .block-icon--auto-soldout   { border-color: #9DA3A6; color: #9DA3A6;}
div.block-icon .block-icon--auto-on-sales  { border-color: #FF0000; color: #FF0000;}
div.block-icon .block-icon--auto-new       { border-color: #0047BA; color: #0047BA;}
div.block-icon .icon-name-new              { border-color: #0047BA; color: #0047BA;}
div.block-icon .icon-name-sale             { border-color: #FF0000; color: #FF0000;}
div.block-icon .icon-name-importan         { border-color: #000000; color: #000000;}
div.block-icon .icon-name-presale          { border-color: #FF0091; color: #FF0091;}
div.block-icon .icon-name-prerese          { border-color: #6A0DA1; color: #6A0DA1;}
div.block-icon .icon-name-arrival          { border-color: #FF8000; color: #FF8000;}

div.block-icon *[class*="_icon_important"] { border-color: #000000; color: #000000;}
div.block-icon *[class*="_icon_sale"]      { border-color: #FF0000; color: #FF0000;}
div.block-icon *[class*="_icon_presale"]   { border-color: #FF0091; color: #FF0091;}
div.block-icon *[class*="_icon_prereserve"]{ border-color: #6A0DA1; color: #6A0DA1;}
div.block-icon *[class*="_icon_rearrival"] { border-color: #FF8000; color: #FF8000;}

div.block-icon .image-icon.block-icon--receipt_store_src { padding: 1px 4px 0; margin: 0 4px 4px 0; height: 18px; border: #0047BA 1px solid; border-radius: 3px; font-size: 10px; font-weight: 400; color: #0047BA; display: flex; justify-content: center; align-items: center;}
div.block-icon .image-icon.block-icon--receipt_store_src::before { content: "店舗受取"; font-size: 10px; font-weight: 400; color: #0047BA; display: inline;}
div.block-icon .image-icon.block-icon--receipt_store_src img { display: none !important;}