@charset "utf-8";  
/*------------------------------------------------------------ 
    DELIVERY css
------------------------------------------------------------*/

/**** フォントサイズ　*************

基本を12pxに、サイズは％指定。

====偶数====　　　====奇数====
■10px = 84%      ■11px = 92%
■12px = 100%     ■13px = 109%
■14px = 117%     ■15px = 125%
■16px = 134%     ■17px = 142%
■18px = 150%     ■19px = 159%
■20px = 167%     ■21px = 175%
■22px = 184%     ■23px = 192%
■24px = 200%     ■25px = 209%
■26px = 217%     ■27px = 226%

**********************************/

.bg-light-gray { background-color: #f5f5f5; }

/* layout.cssの.list-flagをオーバーライド */
.list-flag.list-flag-info{ color:#17b0e9; border: 1px solid #17b0e9; }

.section-title { text-align: center; padding-top: 50px; padding-bottom: 40px; }
.section-title-main { font-size: 248%; color: #189ffc; border-bottom: 1px solid #189ffc; margin-bottom: 20px; }
.section-title-main--with-img { padding-bottom: 4px; }
.section-title-main--with-img img { width: auto; height: 1em; }
.section-title-main.normal { color: #000; border-bottom: none; }
.section-title-sub { font-size: 172%; margin-bottom: 20px; }

/* layout.css .listで並べた子要素の列幅 */
/* col-2: 1/2幅、col-3: 1/3幅... のように指定  */
.list-item-col-2 { width: calc(50% - 10px); margin-bottom: 10px; }
.list-item-col-3 { width: calc(33.33333% - 10px); margin-bottom: 10px; }
.list-item-col-4 { width: calc(25% - 10px); margin-bottom: 10px; }
.list-item-content { margin-left: 5%; margin-right: 5%; margin-bottom: 16px; }
.mx-10 { margin-left: 10%; margin-right: 10%; }

.price { text-align: center; margin-bottom: 40px;}
.price > img { width: 400px; }

.image-button { text-align: center; margin-top: 40px; margin-bottom: 40px; }
.image-button--mx { margin-left: 20px; margin-right: 20px; }
.list--center .image-button { margin-left: 20px; margin-right: 20px; }
.list--start .image-button:last-child { margin-left: 20px; }
.img-btn { display: inline-block;}
.img-btn:hover > img { opacity: 0.7; transition: opacity 0.2s ease-in-out; }
.img-btn > img { width: 300px; }

#priceTbl { width:100%; font-size:125%; border:1px solid #aaa; }
#priceTbl tr:not(:last-child) { border-bottom:1px solid #ccc; }
#priceTbl th {
	vertical-align:middle;
	width:200px;
	text-align:center;
	padding:10px 0;
	background-color: #ddd;
	border-bottom:1px solid #aaa;
}
#priceTbl td { vertical-align:middle; padding:10px; }
#priceTbl td:not(.header-cell) { text-align: center; }
#priceTbl .header-cell { width: 40%; background-color: #ddd; border-right:1px solid #aaa; }

.notice { background-color: #fff; border: 1px solid #aaa; padding-left: 50px; padding-right: 50px; padding-bottom: 40px; }
.notice-title { text-align: center; margin-top: 40px; margin-bottom: 32px; }
.notice-title-main { font-size: 172%; }
.notice ul { list-style-type: disc; }

/* TB */
@media (max-width: 767.98px) {
	.list-item-col-md-2 { width: calc(50% - 10px); margin-bottom: 20px; }
	.list-item-col-md { width: 100%; }
	.list-item-content { margin-left: 0; margin-right: 0; }

	.section-title { padding-top: 40px; padding-bottom: 30px; }
	.section-title-main { font-size: 218%; }
	.section-title-sub { font-size: 142% }
	
	.price > img { width: 240px; }

	#priceTbl { font-size: 120%; }
	#priceTbl .header-cell { width: 48%; }

	.img-btn > img { width: 240px; }
	.notice { padding-left: 30px; padding-right: 30px; padding-bottom: 30px; margin-bottom: 40px;}
	.notice-title { margin-top: 30px; margin-bottom: 30px; }
	.notice-title-main { font-size: 142% }
	.notice ul li { line-height: 1.7; }
}

/*
 バナー
---------------------------------------------------------------------- */
.banner-img-wrapper { margin: 50px 50px 0 50px; }

/* SP */
@media (max-width: 560px) {
	.banner-img-wrapper { margin: 12px 0; }
}

/*
 メディア
---------------------------------------------------------------------- */
.media-wrapper { border: 1px solid #ddd; border-radius: 6px; padding: 3%; }
.media { display:flex; justify-content:center; }
.media-body { flex: 0 1 52%; margin-right: 6%; }
.media-title-wrapper { display: flex; align-items: center; }
.media-title-icon { width: 12.5%; height: auto; margin-right: 3%;}
.media-title { font-size: 172%; }
.media-title--normal { font-size: 109% !important; color: #000 !important; font-weight: normal !important; width: 100%; }
.media-text-wrapper { margin-top: 5%; }
.media-text { font-size: 125%; }
.media-img-wrapper { flex: 1; }
.media-img { width:100%; height:auto; }

/* メディアの場合はオーバーライド */
.media .image-button { text-align: initial; margin-top: 6%; margin-bottom: 6%;}
.media .img-btn > img { width: 56%; }

/* 左右反転 */
.media-reverse { flex-direction: row-reverse; }
.media-reverse .media-body { margin-right: 0; }
.media-reverse .media-img-wrapper { margin-right: 6%; }

/* 口コミ */
.review { display: grid; grid-template-columns: repeat(2, 1fr); grid-row-gap: 2em; grid-column-gap: 3em; }
.review--wid { display: block; margin-bottom: 2%; }
.review-media-wrapper { border: 1px solid #ddd; border-radius: 6px; padding: 4%; }
.review--wid .review-media-wrapper { padding-bottom: 2%; padding-top: 2%; }
.media-review .media-body { flex: 0 1 80%; }
.review--wid .media-review .media-body { flex: 0 1 84%; }
.media-review .media-title-wrapper { margin-top: 2%; }
.review--wid .media-review .media-title-wrapper { margin-top: 8%; }
.media-review .media-title { font-size: 142%; font-weight: bold; color: #189ffc; }
.media-review .media-text-wrapper { margin-top: 1%; }
.media-review .media-text { font-size: 109%; }
.media-review .media-img-wrapper {
	width: 100px;
  height: 100px;
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
	padding: 3% 4% 3% 0;
	margin: 0;
  box-sizing: border-box;
}
.media-review .media-img-wrapper img { display: block; }
.media-review .media-rating { display: flex; align-items: center; }
.media-review .media-rating img { height: 16px; margin-right: 4px; }

/* SP */
@media (max-width: 560px) {
	.review { display: block; }
	.review-media-wrapper { padding: 3%; }
	.media-review { display: flex !important; }
	.media-review .media-img-wrapper { padding: 0 5% 0 0; }
}

/*
 ページャー
---------------------------------------------------------------------- */
.icon-gray { color: #ddd; }
.pager-wrapper { margin-top: 6%; margin-bottom: 3%; }
.pager { display: flex; overflow-x: auto; }
.pager-inner { display: flex; justify-content: center; margin-right: auto; margin-left: auto; }
.pager-inner > *:last-child { margin-right: 0; }
.pager-item { }
.pager-item:first-child .pager-link { border: transparent; }
.pager-item:last-child .pager-link { border: transparent; }
.pager-item:not(:nth-last-child(2)) .pager-link { border-right-color: transparent; }
.pager-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #ddd;
	color: #189ffc;
	text-decoration: none;
	transition: .25s;
}
.pager-link--font-lg { font-size: 134%; }
.pager-link:focus,
.pager-link:hover { background-color: #189ffc; color: #fff; opacity: .75; }
.pager-link:active { background-color: #189ffc; color: #fff; pointer-events: none; }


/*
 下向き矢印
---------------------------------------------------------------------- */
.down-arrow { width: 84px; display: inline-block; margin-top: 3%; margin-bottom: 3%;}
.down-arrow.down-arrow-double-line { margin-top: 5%; margin-bottom: 5%;}

/* SP */
@media (max-width: 560px) {
	.media-wrapper { padding: 5%; }
	.media { display: block; }
	.media-body { margin-right: 0; margin-bottom: 8%; }
	.media-reverse .media-img-wrapper { margin-right: 0; }
	.media .image-button { text-align: center; }
	.media .img-btn > img { width: 76%; }
	.down-arrow { width: 14%; margin-top: 5%; margin-bottom: 5%;}
}

/*
 カード
---------------------------------------------------------------------- */
.list-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2%; }

.card { border: 1px solid #ddd; border-radius: 6px; padding: 4%; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.card-body { align-self: flex-end; }
.card-img-wrapper { text-align: center; padding: 5% 0; }
.card-img { width: auto; height: 70px }
.card-body { }
.card-body > *:last-child { margin-bottom: 0; }
.card-title { font-size: 142%; }
.card-text {  }
.emphasis { font-size: 150%; color: #189ffc; padding-left: 1%; padding-right: 1%; }

/* SP */
@media (max-width: 560px) {
	.list-grid { grid-template-columns: repeat(2, 2fr); row-gap: 5%; column-gap: 4%; }
	.card { padding: 5%; }
}

/*
 洗濯ラベル
---------------------------------------------------------------------- */
/* layout.css で定義せず、洗濯ラベルでのみ使用 */
.ml-4 { margin-left: 4%; }
.ml-minus-4 { margin-left: -4%; }

.list-styled-disc > li { list-style-type: disc; }
.list.align-items-center { align-items: center; }

.care-label { margin-top: 54px; }
.care-label .list { margin-bottom: 0; }
.care-label li { padding-right: 0.7em; }
.care-label-title-wrapper { background-color: #0096FF; border-top-left-radius: 5px; border-top-right-radius: 5px; padding-top: 10px; }
.care-label-title { font-size: 172%; color: #fff; padding-bottom: 8px;}
.care-label-title-info { color: #0096FF; }
.care-label-body { border-left: 1px solid #0096FF; border-right: 1px solid #0096FF; border-bottom: 1px solid #0096FF; padding: 10px; }
.care-label-body:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.care-label-img-wrapper { text-align: center; }
.care-label-symbol-img { width: 40%; }
.care-label-text-img { width: 80%; }

/* SP */
@media (max-width: 560px) {
	.care-label > .list { display: block; }
	.list-item-col-sm { width: 100%; margin-bottom: 8px; }
	.list-item-col-sm-2 { width: calc(50% - 4px); }
	.list-item-col-sm-4 { width: calc(25% - 4px); }
	.care-label-body { padding: 4%; }
}


/*
 アコーディオン
---------------------------------------------------------------------- */
.accordion-body + .accordion-title { margin-top: 20px; }

.faq-row {
  position: relative;
	min-height: 74px;
}

.accordion-btn {
  display: block;
  width: 100%;
  padding: 1.5rem 2.5rem 1.5rem 5.75rem;
  background-color: #f5f5f5;
  border: 2px solid #f5f5f5;
  color: #000;
  font-size: 125%;
  text-align: left;
  cursor: pointer;
  transition: .25s;
}

.accordion-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 27px;
  transform: translateY(-50%);
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
	color: #05158b;
}

.accordion-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  display: block;
  width: 2px;
  height: 20px;
  background-color: currentColor;
	color: #05158b;
}

.accordion-btn--active::after { content: none; }
.accordion-body { display: none; padding: 1.5rem 2.5rem .25rem 5.75rem; }
.accordion-body > *:last-child { margin-bottom: 0; }
.accordion-body--active { display: block; }
.accordion-text { margin-top: 12px; margin-bottom: 20px; }
.accordion-text--answer { font-size: 125%; }
.faq-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 74px;
	height: 74px;
	line-height: 74px;
	text-align: center;
  font-size: 2em;
  margin-left: .25em;
}
.faq-icon--question { font-size: 2em; color: #05158b; }
.faq-icon--answer { font-size: 2em; color: #0096FF; }

/* SP */
@media (max-width: 560px) {
	.accordion-btn { padding: .75rem 3.75rem .75rem 4rem; }
	.accordion-body { padding: 1.5rem 3.75rem .25rem 4rem; }
	.faq-icon { width: 50px; height: 50px; }
}

/*
 プラン
---------------------------------------------------------------------- */
.plan { display: flex; justify-content: center; align-items: flex-end; }
.plan-item { width: 30%; height: auto; }
.plan-img-wrapper { padding: .75rem 4.25rem .75rem 4.25rem; }
.plan-item-content {
	height: 280px;
	overflow-y: auto;
	display: flex; flex-direction: column;
  align-items: center;
	background-color: #fff;
	border: 1px solid #ddd;
	padding-top: 2em;
	padding-left: .75em;
	padding-right: .75em;
}
.plan-item-content:not(:first-child) { border-left: 1px solid transparent; }
.plan-item-content > * { margin-bottom: 2em;}
.plan-title {
	font-size:1.5em;
	color: #fff;
	text-align: center;
	background-color: #05158b;
	padding: .5em 1em;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.plan-title--no1 { background-color: #0096FF; padding: 1em 2em; }
.plan-price { font-size:1.875em; }
.plan-price-row { font-size: 1.25em; font-weight: bold; }
.plan-recommendation { color: #05158b; font-weight: bold; }
.plan-list > li { text-align: left; }
.plan-list > li::before { content: url('../img/plan-check.png'); display: inline-block; margin-right: .375em; }
.icon-none::before { content:'' !important; }

/* SP */
@media (max-width: 560px) {
	.plan { flex-wrap: wrap; }
	.plan-item { width: 50%; margin-bottom: 1rem; }
	.plan-item-content { height: 300px; }
	.plan-img-wrapper { padding-left: 2rem; padding-right: 2rem; }
}

/*
 口コミ
---------------------------------------------------------------------- */
/* 入力フォーム */
.review-form .form-input { width: 200px; }
.review-form .form-textarea { width: 640px; }
.review-form .form-input, .review-form .form-textarea {
	background: #fff; 
	border: 2px solid #ddd;
	border-radius: 4px;
}
.rating { margin: 10px 0 16px 0; }
.rating input[type="radio"] { display: none; }
.rating-icon { width: 24px; height: auto; }

/* SP */
@media (max-width: 560px) {
	.review-form .form-textarea { width: 100%; }
}