@charset "Shift_JIS";

/*----------- header -----------*/
@media (max-width: 767px) {
	header {
		position: static !important;
	}
	.wrapper_ {
		padding-top: 0 !important;
	}
}

/*----------- 共通仕様など -----------*/
.contents_ {
	font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}
.contents_ h2.guide {
	background-color: #009FCC;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	color: #FFF;
	font-size: 18px;
	font-weight: bold;
	padding: 8px 16px 6px;
}
@media (max-width: 767px) {
	.contents_ h2.guide {
		background: none;
		border-left: 5px solid #009fcc;
		border-radius: 0px;
		color: #009fcc;
		font-size: 18px;
		font-weight: bold;
		margin-top: 8px;
		margin-left: 8px;
		padding: 8px 8px 6px;
	}
}
.guideWrap {
	margin: 0 auto;
	background-color: #FFFFFF;
	padding: 16px;
}
@media (max-width: 767px) {
	.guideWrap h3 {
		margin-right: -16px;
		margin-left: -16px;
	}
}
.yellowTxt {
	background: #ffff00;
}
.guideWrap a {
	color: #ff9300;
	text-decoration: underline;
	word-break: break-all;
}
.guideWrap a:hover {
	text-decoration: none;
}
.guideWrap .bgPink {
	background: #ffeeee;
	font-size: 14px;
	margin: 8px 0;
	padding: 8px;
}
.guideWrap p,
.guideWrap dl {
	margin: 0 8px 16px;
}
.guideWrap ul {
	margin: 0 8px 16px;
}
.guideWrap ul li {
	margin-bottom: 8px;
}
@media (max-width: 767px) {
	.guideWrap ul li {
		margin-bottom: 4px;
	}
}
.guideWrap ul.maru {
	margin-left: 24px;
}
.guideWrap ul.maru li {
	list-style-type: disc;
}
.guideWrap ul.maru li li {
	list-style-type: none;
}
.guideWrap ul.maru li li span {
	color:#F00;
}
.guideWrap ul.attWrap li {
	font-size: 14px;
	margin-left: 1em;
	text-indent: -1em;
}
.guideWrap ul.attWrap span{
	color: #F00;
}
.guideWrap strong {
	font-weight: bold;
}
.guideWrap em {
	color: #F00;
	font-style: normal;
}
/* 青ボタン */
.blueBtn {
	background: #FFF;
	border: 2px solid #009fcc;
	border-radius: 10px;
	font-size: 18px;
	margin-bottom: 16px !important;
	text-align: center;
}
.blueBtn a {
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.1);
	color: #009fcc;
	display: block;
	font-weight: bold;
	padding: 10px 0;
	text-decoration: none;
}
/* グリーンボタン */
.greenBtn {
	background: #FFF;
	border: 2px solid #9cc817;
	border-radius: 10px;
	font-size: 18px;
	margin-bottom: 16px !important;
	text-align: center;
}
.greenBtn a {
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.1);
	color: #9cc817;
	display: block;
	font-weight: bold;
	padding: 10px 0;
	text-decoration: none;
}
/* オレンジボタン */
.orangeBtn {
	background: #f09e30;
	border-radius: 10px;
	font-size: 18px;
	text-align: center;
}
.orangeBtn a {
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.1);
	color: #fff;
	display: block;
	font-weight: bold;
	padding: 8px 0;
	text-decoration: none;
}
.mt8 {
	margin-top: 8px !important;
}
.mb8 {
	margin-bottom: 8px !important;
}
.mb16 {
	margin-bottom: 16px !important;
}
.mb24 {
	margin-bottom: 24px !important;
}
.mb40 {
	margin-bottom: 40px !important;
}
.pt16 {
	padding-top: 16px !important;
}
/*----------- メニュー部分 -----------*/
.guideWrap ul.nav {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
@media (max-width: 767px) {
	.guideWrap ul.nav {
		background: #FFF;
		margin-right: -20px;
		margin-left: -20px;
	}
	.fixTop {
		position: fixed;
		top: 0;
		z-index: 10000;
		margin-right: 0;
		margin-left: 0;
		width: 102%;
	}
}
.guideWrap ul.nav li {
	margin-bottom: 0;
	text-align: center;
	width: 25%;
}
.guideWrap ul.nav li img {
	height: 14px;
	width: 14px;
}
@media (max-width: 767px) {
	.guideWrap ul.nav li {
		font-size: 11px;
	}
}
@media (min-width: 768px) {
	.guideWrap ul.nav li img {
		height: 20px;
		width: 20px;
	}
}
.guideWrap ul.nav li a {
	color: #FFF;
	display: block;
	padding: 8px 0 0;
	text-decoration: none;
}
.guideWrap ul.nav li:first-child {
	background: #c93a40;
}
.guideWrap ul.nav li:nth-child(2) {
	background: #9460a0;
}
.guideWrap ul.nav li:nth-child(3) {
	background: #0074bf;
}
.guideWrap ul.nav li:nth-child(4) {
	background: #d06d8c;
}
.guideWrap ul.nav li:nth-child(5) {
	background: #d6900e;
}
.guideWrap ul.nav li:nth-child(6) {
	background: #56a764;
}
.guideWrap ul.nav li:last-child {
	background: #c93a40;
}
@media (max-width: 767px) {
	.guideWrap ul.pc {
		display: none;
	}
}
@media (min-width: 768px) {
	.guideWrap ul.sp {
		display: none;
	}
}


/*----------- ご利用前に -----------*/
#beforeUse {
	margin-bottom: 40px;
}
#beforeUse h3 {
	background: #c93a40;
	color: #FFF;
	font-size: 20px;
	margin-bottom: 16px;
	padding: 8px;
}
#beforeUse h4 {
	border-bottom: 3px solid #c93a40;
	font-weight: bold;
	margin-bottom: 8px;
	padding: 0 0 4px 8px;
}
#beforeUse dl dt {
	font-weight: bold;
}
#beforeUse dl dd ul {
	margin-left: 24px;
}
#beforeUse dl dd li {
	list-style-type: disc;
}

/*----------- お買い物の流れ -----------*/
#flow {
	margin-bottom: 40px;
}
#flow h3 {
	background: #9460a0;
	color: #FFF;
	font-size: 20px;
	margin-bottom: 16px;
	padding: 8px;
}
#flow h4 {
	border-bottom: 3px solid #9460a0;
	font-weight: bold;
	margin-bottom: 8px;
	padding: 0 0 4px 8px;
}
#flow h5 {
	color: #9460a0;
	font-size: 16px;
	font-weight: bold;
	margin: 0 8px 8px;
}
#flow h5 span {
	background:  #9460a0;
	color: #FFF;
	margin-right: 4px;
	padding: 0 6px;
}
#flow h6 {
	color: #019fcc;
	font-weight: bold;
	margin: 0 0 8px 8px;
}
#flow .example {
	border-top: 1px solid #009fcc;
	border-bottom: 1px solid #009fcc;
	font-size: 14px;
	padding: 8px;
}
#flow .example dt {
	margin-bottom: 6px;
}
#flow .example dt span {
	background: #c9c9c9;
	padding: 1px 6px;
}
#flow .example dd {
	margin-left: 16px;
}
#flow .example .attWrap {
	margin-bottom: 8px;
}
#flow img {
	margin: 8px 0 16px;
	width: 100%;
}

/* sp表示 */
@media (max-width: 767px) {
	#flow img.cap_pc,
	#reservation img.cap_pc {
		display: none;
	}
}
/* pc表示 */
@media (min-width: 768px) {
	#flow img.cap_sp,
	#reservation img.cap_sp{
		display: none ;
	}
}

/*----------- ご予約について -----------*/
#reservation {
	margin-bottom: 40px;
}
#reservation h3 {
	background: #0074bf;
	color: #FFF;
	font-size: 20px;
	margin-bottom: 16px;
	padding: 8px;
}
#reservation h4 {
	border-bottom: 3px solid #0074bf;
	font-weight: bold;
	margin-bottom: 8px;
	padding: 0 0 4px 8px;
}
#reservation img {
	margin: 8px 0;
	width: 100%;
}


/*----------- お支払方法について -----------*/
#pay {
	margin-bottom: 40px;
}
#pay h3 {
	background: #d06d8c;
	color: #FFF;
	font-size: 20px;
	margin-bottom: 16px;
	padding: 8px;
}
#pay table {
	border-top: 1px dotted #009fcc;
	border-left: 1px dotted #009fcc;
	margin-bottom: 24px;
	width: 100%;
}
#pay table th {
	background: #f0f4f6;
	font-weight: bold;
	padding: 8px;
	width: 26%;
}
#pay table th,
#pay table td {
	border-right: 1px dotted #009fcc;
	border-bottom: 1px dotted #009fcc;
	font-size: 12px;
	padding: 8px;
}
#pay table td.td01 {
	width: 16%;
}
@media (min-width: 768px) {
	#pay table th,
	#pay table td {
		font-size: 14px;
	}
}

#pay .howToPay {
	border: 1px dotted #be3660;
	margin-bottom: 24px;
	padding: 8px;
}
#pay .howToPay h4 {
	border-bottom: 1px solid #be3660;
	color: #be3660;
	font-weight: bold;
	margin-bottom: 8px;
	padding-bottom: 4px;
}
@media (max-width: 767px) {
	#pay .howToPay img {
		width: 100%;
	}
}

/*----------- 発送について -----------*/
#shipping {
	margin-bottom: 40px;
}
#shipping h3 {
	background: #d6900e;
	color: #FFF;
	font-size: 20px;
	margin-bottom: 16px;
	padding: 8px;
}
#shipping h4 {
	border-bottom: 3px solid #d6900e;
	font-weight: bold;
	margin-bottom: 8px;
	padding: 0 0 4px 8px;
}
#shipping .example {
	border-top: 1px solid #009fcc;
	border-bottom: 1px solid #009fcc;
	font-size: 14px;
	margin-bottom: 24px;
	padding: 8px;
}
#shipping .example dt {
	margin-bottom: 6px;
}
#shipping .example dt span {
	background: #c9c9c9;
	padding: 1px 6px;
}
#shipping .example dd {
	margin-left: 16px;
}
#shipping .orderWrap dt {
	color: #d6900e;
	font-weight: bold;
}
#shipping .orderWrap a {
	word-break: break-all;
}
@media (max-width: 767px) {
	#shipping dd img {
		width: 100%;
	}
}

/*----------- ポイントについて -----------*/
#point {
	margin-bottom: 40px;
}
#point h3 {
	background: #56a764;
	color: #FFF;
	font-size: 20px;
	margin-bottom: 16px;
	padding: 8px;
}
#point h4 {
	border-bottom: 3px solid #56a764;
	font-weight: bold;
	margin-bottom: 8px;
	padding: 0 0 4px 8px;
}


/*---------- 再販リクエストについて ----------*/
#request h3 {
	background: #c93a40;
	color: #FFF;
	font-size: 20px;
	margin-bottom: 16px;
	padding: 8px;
}
#request img {
	margin: 8px 0 16px;
	width: 100%;
}
/* sp表示 */
@media (max-width: 767px) {
	#request img.cap_pc {
		display: none;
	}
}
/* pc表示 */
@media (min-width: 768px) {
	#request img.cap_sp {
		display: none ;
	}
}


/* 2023.11追記　スマホのヘッダー虫眼鏡ボタンクリック後の挙動改修 */
@media (max-width: 767px){
	header {
	position: fixed !important;
	}
	.search_form_+div.wrapper_ .contents_{
		padding-top: 80px;
	}
}

/* 2023.11追記　SVG画像をPNGに差し替え */
.guideWrap ul.nav li img{
	height: auto;
}

@media (min-width: 768px){
	.guideWrap ul.nav li img{
		height: auto;
		padding: 4px 0;
	}
}

/* 2023.11追記　ご利用ガイド内メニュー改修 */
@media (max-width: 767px){
.guideWrap ul.nav {
    margin-right: -16px;
    margin-left: -16px;
	}
}

/* 2023 11追記 リンク色変更 */
.guideWrap a {
	color: #00a0ca;
}
.greenBtn a {
	color: #9cc817;
}

/* 2023　11小見出しの色を変更 */
#flow h6 {
	color: #000;
}

/* 2023　11メニューへ戻る追加 */
.anchor-text-right{
  text-align: right;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 32px 8px 40px;
}
.anchor-text-right:before{
  content: "";
  position: relative;
  width: 1em;
  height: 1em;
  display: block;
  background: url(../img/usr/link_pagetop.png) center center no-repeat;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(57%) sepia(27%) saturate(6814%) hue-rotate(157deg) brightness(89%) contrast(102%);
  margin-right: 8px;
}


/* 202312改修 */
.contents_ {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	line-height: 1.8;
}

.contents_ h2.guide {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
}
.guideWrap ul {
    margin: 0 0 16px 8px;
}
.guideWrap ul.nav {
	margin-bottom: 30px;
}
.guideWrap ul.nav li a {
	position: relative;
	display: inline-block;
	padding-left: 11px;
	color: #009fcc;
	text-decoration: none;
  }
  .guideWrap ul.nav li a:before {
    content: "";
    position: absolute;
    top: 1em;
    left: -0.4em;
    width: 16px;
    height: 16px;
    background-color: #009fcc;
    border-radius: 50%;
}
.guideWrap ul.nav li a:after {
	content: '';
	width: 4px;
	height: 4px;
	border: 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	top: 53%;
	left: -0.1em;
	transform: rotate(135deg);
	}

.guideWrap ul.nav li:hover,
.blueBtn:hover,
.greenBtn:hover {
	opacity: 0.6;
}

.guideWrap ul.nav li:first-child,
.guideWrap ul.nav li:nth-child(2),
.guideWrap ul.nav li:nth-child(3),
.guideWrap ul.nav li:nth-child(4),
.guideWrap ul.nav li:nth-child(5),
.guideWrap ul.nav li:nth-child(6),
.guideWrap ul.nav li:last-child {
	background: none;
}

.guideWrap ul.nav li {
	text-align: left;
	padding-right: 1.04em;
	width: auto;
}
_:lang(x)::-moz-placeholder, .guideWrap ul.nav li {
	padding-right: 1em;
}
#beforeUse h3,
#flow h3,
#reservation h3,
#pay h3,
#shipping h3,
#point h3,
#request h3 {
	background: #c1ebf7;
	color: #009fcc;
	font-weight: bold;
}
#beforeUse h4,
#flow h4,
#reservation h4,
#shipping h4,
#point h4 {
	border-bottom: 3px solid #009FCC;
	font-size: 18px;
	margin-top: 50px;
}

#beforeUse h4:first-of-type,
#reservation h4:first-of-type,
#shipping h4:first-of-type,
#point h4:first-of-type {
	margin-top: 0;
}

#shipping .orderWrap dt {
	color: #009FCC;
}

.cap {
	background: #f7f7f7;
    margin-bottom: 30px;
    border: 1px solid #dbdbdb;
    padding: 20px 15px;
}

#flow h5 {
	color: #009FCC;
}

#flow h5 span {
	background: #009FCC;
}

#flow img {
	margin: 0 0 0;
}

#pay .howToPay {
	border: 1px dotted #009FCC;
}

#pay .howToPay h4 {
	border-bottom: 1px solid #009FCC;
	color: #009FCC;
}

.blueBtn,
.greenBtn {
	width: 50%;
	margin: 40px auto !important;
}

.guideWrap a {
	text-decoration: none;
}

.anchor-text-right {
	position: relative;
}

.anchor-text-right:hover {
	opacity: 0.6;
}

.anchor-text-right:before {
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	background: #009fcc;
	content: "";
	position: absolute;
	width: 0.9em;
	height: 0.9em;
	display: block;
	bottom: 0.4em;
	right: 7em;
	filter: none;
	margin-right: 8px;
}

.anchor-text-right:after {
	background: #a6dded;
	content: "";
	position: absolute;
	width: 8.4em;
	height: 2px;
	right: 0;
	bottom: 1px;
}


@media (max-width: 767px) {
	.guideWrap ul.sp {
		display: block;
		margin: 0 8px 32px;
	}

	#beforeUse h3,
	#flow h3,
	#reservation h3,
	#pay h3,
	#shipping h3,
	#point h3,
	#request h3 {
		border-radius: none;
	}

	.blueBtn,
	.greenBtn {
		width: 80%;
	}

	.guideWrap ul.nav li br {
		display: none;
	}

	.pt16 {
		padding-top: 0 !important;
	}

	.guideWrap ul.nav li a {
		padding: 0 0 0.3em 1.2em;
	}

	.guideWrap ul.nav li {
		font-size: 16px;
	}

	.guideWrap ul.nav li a:before {
		top: 0.6em;
	}
	.guideWrap ul.nav li a:after {
		top: 42%;
	}
	.guideWrap dl .greenBtn{
		width: 83%;
	}
	#shipping .example {
		padding: 8px 0;
	}
	#shipping .example dd {
		font-size: 13px;
		letter-spacing: -1px;
		margin-left: 0;
	}
}

/* 20240216リンクテキストに下線追加 */
.guideWrap a {
    text-decoration: underline;
}

/* -----------------------------------------------------------
 Q&A → ご利用ガイドのアンカーリンク修正　2024.6
-------------------------------------------------------------- */
.contents_ .guideWrap img {
	width: 100%;
	height: auto;
}
@media (max-width: 480px) {
	:root {
		--header: 62.64px;
		scroll-padding-top: var(--header);
	}
	header {
		height: var(--header);
	}
}

/* -----------------------------------------------------------
 チェックインシステム追記 2024.8
-------------------------------------------------------------- */
#request {
	margin-bottom: 40px;
}
.guideWrap ul.nav li {
	padding-right: 2.1em;
	height: 48px;
}
#checkin h3 {
	background: #c1ebf7;
	color: #009fcc;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 16px;
	padding: 8px;
}
#checkin img{
	max-width:700px;
	margin-bottom: 30px;
}

@media (max-width: 767px) {
	#checkin img {
			width: 100%;
			margin-bottom: 25px;
	}
}
@media (min-width: 768px) {
#checkin .cap_pconly{
	background: #f7f7f7;
	margin-bottom: 30px;
	border: 1px solid #dbdbdb;
	padding: 20px 15px;
	display: inline-block;
}
#checkin img {
	margin: 8px 0 16px;
}
}

/* -----------------------------------------------------------
 チェックインシステム英語/中国語タブ切り替え 2024.9
-------------------------------------------------------------- */
#checkin h4 {
	color: #01a0ca;
	font-size: 18px;
	font-weight: bold;
	margin: 10px 8px 16px;
}
#checkin .tab {
	flex: 1;
}
#checkin .tab-wrapper{
	display: flex;
	margin: 26px 0px 0px;
}
#checkin input[name="tab-radio"] {
	display: none;
}
label.tab-label {
	display: block;
	background-color: #c8e0e7;
	color: #01a0ca;
	cursor: pointer;
	width: 100%;
  text-align: center;
	padding: 10px 0px;
	margin:0;
	transition: .3s;
}
label.tab-label::after{
	content: "";
	display: inline-block;
	vertical-align: middle;
	color: #01a0ca;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border: 0.16em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(45deg);
}
label.tab-label:hover {
  opacity: 1;
}
.selected .tab-label{
	color: #fff;
	background-color: #01a0ca;
	font-weight: bold;
	transition: .3s;
}
.selected .tab-label::after{
	content: "";
	display: inline-block;
	vertical-align: middle;
	color: #ffffff;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border: 0.16em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(135deg);
}
#checkin .tab-panel {
	border: 10px solid #01a0ca;
	padding: 10px;
}
@media (max-width: 767px) {
	#checkin .tab-panel {
		border: 5px solid #01a0ca;
	}
}
.panel-b{
	display: none;
}
#checkin .mx5{
	margin: 0 5px;
}

/* -----------------------------------------------------------
	ご利用ガイドのレイアウト修正 2024.11
-------------------------------------------------------------- */
.contents_ h2.guide {
	padding: 8px 16px;
}
.guideWrap ul.nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 30px;
}
.guideWrap ul.nav li {
	width: calc((100% - 10px * 3) / 4);
	height: auto;
	padding-right: 0;
}
.guideWrap ul.nav li > a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #404040;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid #009fcc;
	padding: 0.8em 2em 0.8em 1em;
}
.guideWrap ul.nav li a::before {
	content: none;
}
.guideWrap ul.nav li a:after {
	content: "\e5c6";
	position: absolute;
	color: #009fcc;
	font-size: 1.2em;
	font-family: "Material Symbols Outlined";
	top: 50%;
	left: inherit;
	right: 0.5em;
	transform: translateY(-50%);
	border: none;
	width: inherit;
	height: inherit;
}
#beforeUse h3,
#flow h3,
#reservation h3,
#pay h3,
#shipping h3,
#point h3,
#request h3,
#checkin h3 {
	padding-left: 16px;
	font-size: 18px;
}
@media (min-width: 768px) {
	.guideWrap {
		padding-top: 20px;
	}
}
@media (max-width: 767px) {
	.contents_ h2.guide {
		margin: 0 0 4px 15px;
		padding-top: 0;
		padding: 0 0 0 0.5em;
		font-size: 18px;
		line-height: 1.4;
		border-left: 3px solid #009fcc;
	}
	.guideWrap ul.nav {
		margin-bottom: 30px;
		gap: 6px;
	}
	.guideWrap ul.nav li {
		width: calc((100% - 6px) / 2);
	}
	.guideWrap ul.nav li > a {
		font-size: 12px;
	}
}