@charset "UTF-8";
/* CSS Document */

/* --------------------------------
 * base
 * -------------------------------- */
:root {
	--white:     #ffffff;
	--dwblue:    #009CDE;
	--blue:      #A3DCF3;
	--lightblue: #D9F0FA;
	--lightgray: #cccccc;
	--darkgray:  #535353;
	--bggray:    #f8f8f8;
	--ftgray:    #eaeaeb;
	--red:       #FF0004;
}
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}
body {
	color: var(--darkgray);
	font-size: 1.4rem;
	font-family: "hedley-new-web","noto-sans-cjk-jp","sans-serif" ;
	font-style: normal;
	font-weight: 400;
}
body.fixed {
　width: 100%;
　height: 100%;
　position: fixed;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    transition: 0.15s;
	color: var(--darkgray);
}
a:hover {
	opacity: 0.5;
}
a.btn,
a.btn-s,
a.btn-50,
a.btn-30{color: var(--dwblue);}


img{width: 100%;}
h1, h2, h3, h4, h5, h6{
	font-weight: 500; margin-bottom: 8%; 
	letter-spacing: 1px; line-height: 1.6;
	color: var(--darkgray);
}
h1{font-size: 2.4rem; text-align: left;}
h2{font-size: 2.4rem; text-align: left;}
h3{font-size: 1.8rem; text-align: center; margin-bottom: 4%;}
p {line-height: 1.8;}
section{
	width: 100%; margin: 0 auto; padding-top: 10%;
	overflow: hidden; clear: both;
}
main{width: 100%; padding: 0; order: 2;}
aside{width: 92%; margin: 0 auto 2rem; order: 1;}

.inner {
	width: 90%; margin: 0 auto;
	overflow: hidden; clear: both;
	max-width: 1024px;
}
.container {
	width: 100%; margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction:column-reverse;
	/*flex-direction: column;*/
	max-width: 1024px;
}
.container-tit {
	width: 92%; margin: 20% auto 0;
}
.archive{padding: 0;}
.contents{width: 92%; margin:0 auto; padding: 0;}
.col{
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	padding: 0; margin: 0 auto;
	max-width: 1024px; list-style: none;
}
.col li{ margin: 0 auto; overflow: hidden; clear: both;}
.col .col-l,
.col .col-m,
.col .col-s{width: 100%; margin-bottom: 8%;}
.col .col-h{width: 96%;}


.contents .col-in{margin-bottom:5%;}

		@media screen and (min-width: 481px) {
			h1{font-size: 3.2rem; text-align: left;}
			h2{font-size: 2.4rem; text-align: left;}
			h3{font-size: 1.8rem; text-align: center;}
			.container-tit {margin-top: 10%;}
			.col li{ margin: 0 4% 3rem 0;}
			.col .col-l{width: 100%;}
			.col .col-m{width: 61.5%;}
			.col .col-s{width: 30.5%;}
			.col .col-h{width: 48%;}
			.col .col-h:last-child{margin-right: 0;}
		}	
		@media screen and (min-width: 1024px) {
			main{order: 2;}
			aside{width: 25%; height: 100%; display: block; order: 1;}
			.inner {width: 96%;}
			.container {min-height: 100vh; flex-direction: row; margin: 5% auto 0;}
			.container-tit {width: 100%; max-width: 1024px; display: table;}
			.contents{width: 100%; margin-bottom: 20%; padding: 0;}
			.contents .col-in{width: calc(96%/2); margin:0 4% 1rem 0; padding:0;}
			.contents .col-in:last-child{margin-right: 0;}
		}

#loading{
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: rgba(12, 106, 194, 1);
	/* 以下のコードを追加 
  position: fixed;
  top: 0;
  left: 0;*/
  z-index: 99999;
}
.loaded {
  opacity: 0;
  visibility: hidden;
}
.spinner {
  width: 40px;
  height: 40px;
  margin: 50vh auto 0;
  background-color: var(--white);

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/*ボタン*/
.btn,
.btn-30,
.btn-50,
.btn-s,
.btn-g{
	width: 100%; margin: 0 auto 3rem; padding: .5rem 0;
	max-width: 300px;
	display: block; text-align: center; color: var(--dwblue);
	border: 1px solid var(--dwblue);
	border-radius: 2.4rem;
	background-color: var(--white);
}
.btn-s{width: 50%;}
.btn-50,.btn-30{width: 80%;}
.btn-g {width: 80%;color: var(--darkgray); background-color: var(--bggray);border: none;}

a.btn[href$=".pdf"]:before,
a.btn-s[href$=".pdf"]:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 18px;
  height: 18px;
  background: url(/images/common/i_pdf.svg) center/20px no-repeat;
  padding: 3px;
}

/*テキスト*/
.tx-left{text-align: left !important;}
.tx-right{text-align: right !important;}
.tx-center{text-align: center !important;}
.tx-justify{text-align: justify !important;}
.tx-red{color: var(--red) !important;}
.tx-blue{color: var(--dwblue) !important;}
.tx-gray{color: var(--darkgray) !important;}
.tx-large{font-size:120% !important;}
.tx-middle{font-size:110% !important;}

.note{font-size: 1.2rem !important; line-height: 1.6;}
.new {
	width: auto; line-height: 1; text-align: center; border-radius: 2px;
	display: inline-block; background-color: var(--blue); color: var(--white); font-weight: normal;
	vertical-align: middle; font-size: 1.2rem; padding: .5% 1rem;
}
.close {
	width: auto; line-height: 1; text-align: center; border-radius: 2px;
	display: inline-block; background-color: var(--lightgray); color: var(--white); font-weight: normal;
	vertical-align: middle; font-size: 1.2rem; padding: .5% 1rem;
}
.img-R{float: right;}
.img-L{float: left;}
.movie{width: 100%; margin-bottom: 2rem; display: block;}

/*境界線*/
hr{clear: both; display: block; width: 100%;}
.line-gray{
	height: 1px; margin-bottom: 5%;
	background-color: var(--bggray);
	border: 0;
}
.line-box{
	border: 1px solid #ccc;
	border-radius: 10px; padding: 4%;
	overflow: hidden; clear: both;
}

/* --------------------------------
 * navigation
 * -------------------------------- */
.common-nav{z-index: 10000;}
.bg-hamberger{
	position: fixed; top: -80px; right: -70px; width: 170px; height: 170px;
    transform:rotate(180deg);
	background-image: url("/images/common/i_cloudall.svg");
	background-repeat: no-repeat;
	background-size: 100%;
    z-index: 998;
}
/*スクロール時*/
.bg-hamberger.is_scroll{
	top: -80px; right: -80px; width: 180px; height: 180px;
	transition : all 200ms;
}

img[src*="i_sns_"],
img[src*="i_cart"]{width: 30px; height: 30px; vertical-align: bottom;}


.dw-logo {display: flex; width: 42%; margin: 0; max-width: 200px;}
.dw-logo img[src*="logo_dw.svg"] {max-width: 150px;}
.dw-logo img[src*="sitelogo_30th.svg"] {max-width: 50px; margin-left: 15px;}


.gl-nav__wrap,.breadthumb{display: none;}

		@media screen and (min-width: 481px) {
			.bg-hamberger{width: 200px; height: 200px;}
			.bg-hamberger.is_scroll{top: -120px; right: -100px; width: 240px; height: 240px;}
		}
		@media screen and (min-width: 1024px) {
			.btn-50{width: 50%;}
			.btn-30{width: 30%;}
			.breadthumb {
				margin-bottom: 7rem; margin-right: 10%;
				text-align: right; font-size: 1.2rem; display: table-cell;
			}
			.breadthumb li{display: inline-block;}
			.breadthumb li a{margin-right: 1rem;}
			.breadthumb li a:after{content: '>'; margin-left: 1rem;}
			
			.bg-hamberger,
			.bg-hamberger.is_scroll,
			label.hamburger{display: none;}
			
			.gl-nav__wrap {
				width: 100%;
				padding: 2%;
				background: var(--white);
				display: -webkit-flex;
				display: flex;
				justify-content: flex-start; 
				align-items: center;
				z-index: 999;
			}
			.gl-nav__wrap .dw-logo {max-width: 210px; line-height: 1;}
			.gl-nav__wrap .dw-logo img[src*="logo_dw.svg"] {max-width: 170px;}
			.gl-nav__wrap .dw-logo img[src*="sitelogo_30th.svg"] {max-width: 60px; margin-left: 15px;}
			#top .dw-logo {max-width: 300px;}
			
			.gl-nav {
				width: 100%; margin: 0; text-align: right;
				display: flex; vertical-align: middle;
				justify-content: flex-end; 
				align-items: center;
			 }
			.gl-nav li{
				margin: 0 2%; list-style: none;
				letter-spacing: 2px; font-weight: 700; font-size: 16px;
				text-align: center; position: relative;
				transition: all .3s;
			}
			.gl-nav li span{
				display: block; margin-top:.5rem;
				letter-spacing: 0; font-weight: normal; font-size: 10px;
			}
			.gl-nav li a{
				display: block;
				width: 100%;
				height: 100%;
				transition: all .3s;
			}
			.gl-nav li.onlinestore{
				background:url(/images/common/icon-cart-blue.svg) no-repeat 0 0;
				background-size:auto 20px;
				padding-left: 30px;
			}
			.gl-nav li .dropdown__lists {
				transform: scaleY(0);/*デフォルトでは非表示の状態にしておく*/
				transform-origin: center top;/*変形を適応する基準をtopとする*/
				transition: all .3s;/*表示の変化を0.3秒に指定*/
				width: 100%;
				position: absolute;
				top: 50px; left: 0;
				z-index: 100; text-align: left;
			}
			.gl-nav li.onlinestore .dropdown__lists{left: auto; right: 120px;}
			.gl-nav li:hover .dropdown__lists {
				transform: scaleY(1);/*Gナビメニューにホバーしたら表示*/
			}
			.gl-nav li.dropdown__list,
			.gl-nav li.dropdown__list .dropdown__third-level li{
				background-color: var(--dwblue);
				width: 300px; font-weight: normal;
				height: 50px;
				transition: all .3s;
				position: relative;
				font-size: 14px;
			}
			.gl-nav li.dropdown__list:first-child{border-radius: 20px 20px 0 0;}
			.gl-nav li .dropdown__lists li.dropdown__list .dropdown__third-level li:first-child{border-radius: 20px 0 0 0;}
			.gl-nav li.dropdown__list:last-child,
			.gl-nav li .dropdown__lists li.dropdown__list .dropdown__third-level li:last-child{border-radius: 0 0 20px 20px;}
			.gl-nav li.dropdown__list:not(:first-child)::before{
				content: "";
				width: 100%;
				height: 1px;
				background-color: #3492d1;
				position: absolute;
				top: 0;
				left: 0;
			}
			.gl-nav li.dropdown__list:hover,
			.gl-nav li .dropdown__lists li.dropdown__list .dropdown__third-level li:hover{
				background-color: #003558;
			}
			.gl-nav li.dropdown__list a {
				display: flex;
				justify-content:flex-start;
				align-items:center;
				color: var(--white);
				text-decoration: none;
				position: relative;
				text-align: left;
				padding: 0 4%;
				letter-spacing: .25;
			}
			.gl-nav li.dropdown__list a::before {
				content: '';
				display: block;
				width: 6px;
				height: 6px;
				border-top: 2px solid var(--white);
				border-left: 2px solid var(--white);
				transform: rotate(135deg);
				position: absolute;
				right: 15px;
				top: calc(50% - 5px);
			}
			.gl-nav li .dropdown__lists li.dropdown__list .dropdown__third-level{
				visibility: hidden; opacity: 0;
				transition: all .3s;/*表示の変化を0.3秒に指定*/
				width: 100%;
				position: absolute;
				top: 1px; right:102%;
				text-align: left; z-index: 99;
			}
			.gl-nav li .dropdown__lists li.dropdown__list:hover .dropdown__third-level {
				visibility: visible; opacity: 1;
			}
		}

/*footer*/
.ft-img-wrp {position:relative;}
.ft-img {
 	padding-top: 56.25%;
	background-repeat: no-repeat;
	background-size: cover;
	object-fit: cover;
}
#top .ft-img     { background-image: url('/images/kv/ft_1.jpg');}
#news .ft-img    { background-image: url('/images/kv/kv_07-min.jpg');}
#company .ft-img { background-image: url('/images/kv/kv_12-min.jpg');}
#csr .ft-img     { background-image: url('/images/kv/kv_08-min.jpg');}
#faq .ft-img     { background-image: url('/images/kv/kv_10-min.jpg');}
#stores .ft-img  { background-image: url('/images/kv/kv_06-min.jpg');}
#brands .ft-img  { background-image: url('/images/kv/kv_11-min.jpg');}
#column .ft-img  { background-image: url('/images/kv/kv_09-min.jpg');}
footer{
	width: 100%; overflow: hidden; clear: both;
	background-image: url("/images/common/i_cloud2.svg");
	background-repeat: no-repeat;
	background-size: 25%;
	background-color: var(--ftgray);
	background-position: bottom 65px right 0;
}
.slogan{
	width: 90%; margin: 0 auto 4%;
	text-align: left; font-weight: bold;
}
.ft-nav{
	width: 100%; margin: 0 auto 10%;
	text-align: left;
	border-top: 1px solid var(--lightgray);
}
.ft-nav li{
	border-bottom: 1px solid var(--lightgray);
	margin: .5rem 0;
	font-size: 1.2rem; line-height: 1.4;
}
.ft-nav li a{
	display: block; padding: 1.5rem 5%;
}

.sns-ft-nav{width: 100%; margin: 5% auto 15%; text-align: center;}
.sns-ft-nav li{width: 15%; display: inline-block;}
.p-mark{
	width: 100%; padding: .5% 2%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background-color: var(--white);
}
.p-mark img{width: 65px; float: left;}
.p-mark .copyright{width: 100%; text-align:right; font-size: 1rem;}
#synalio-iframe{
	right: 0;
	bottom: 0!important;
}
#synalio-iframe .synalio-chat-window{
	background-color: var(--dwblue)!important;
}

			@media screen and (min-width: 481px) {
				.slogan{width: 96%;}
				.slogan > br{display: none;}
			}
			@media screen and (min-width: 1024px) {
				.ft-img {
					background-attachment: fixed;/*画面からの相対位置（背景固定）*/
					width: 100%;
					height: 320px;
					padding-top: 0;
					background-repeat: no-repeat;
					background-size: cover;
					object-fit: cover;
					background-position-x:50%;
				}
				footer{background-size: 15%;}
				.slogan{margin-bottom:2%;}
				.ft-nav{
					width: 96%; margin: 0 auto 2%;
					border-top: none;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				.ft-nav li{
					display: block; margin: .5rem 0;
					font-size: 1.2rem; line-height: 1.2;
					border-bottom: none;
				}
				.ft-nav li a{
					padding: 0 1rem;
					border-right: 1px solid var(--darkgray);
				}
				.ft-nav li:first-child a{border-left: 1px solid var(--darkgray);}
				.ft-nav li.copyright{padding-left: 1rem;}
				.sns-ft-nav li{width: 5%; display: inline-block;}
				.sns-ft-nav{margin: 2% auto 15%;}
				.p-mark{align-items: center;}
				.p-mark img{width: 65px; float: left;}
				.p-mark .copyright{text-align: center;}
				#synalio-iframe{bottom: 0!important;}
			}

/*アコーディオン*/
.acd-check{
    display: none;
}
.acd-label{
    color: var(--white);
    display: block;
    margin-bottom: 1px;
    padding: 10px;
	position: relative;
}
.acd-label:after{
    box-sizing: border-box;
    content: '';
    display: block;
    /*height: 52px;*/
    padding: 4px 10px;
    position: absolute;
    right: 0;
    top: 0px;
}
.acd-content{
    height: 0;
    opacity: 0;
    padding: 0;
    transition: .3s;
    visibility: hidden;
}
.acd-check:checked + .acd-label:after{
    content: '';
}
.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    visibility: visible;
}

/*モーダル*/
.modal-wrapper {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 10px;
  text-align: center
}
.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}
.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}
.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 94%;
  max-width: 600px;
  padding: 30px 30px 15px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}
.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
    padding-right: 1rem;
}
.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}
.modal-overlay:hover {opacity: 1;}
.modal-wrapper .modal-close {
	z-index: 20;
	position: absolute;
	width: 50px;
	height: 50px;
	line-height: 60px;
	top: 0;
	right: 0;
	background-color: var(--white);
	text-decoration: none;
	text-indent: 0;
	text-align: center;
	-webkit-border-radius: 0 6px 0 6px / 0 6px 0 6px;
	-moz-border-radius: 0 6px 0 6px / 0 6px 0 6px;
	border-radius: 0 6px 0 6px / 0 6px 0 6px;
	/*水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下*/
}
.modal-wrapper .modal-close img{width: 20px;}

			@media screen and (min-width: 1024px){
				#sp-indexnav{display: none;}
				.modal-wrapper .modal-window {max-width: 960px;}
				.modal-wrapper .modal-close {width: 60px; height: 50px; line-height: 60px;}
}
/* --------------------------------
 * top page
 * -------------------------------- */
.cloud{
	width: 100px; height: 100px;
	position: absolute; top: -1px; right: -1px;
	transform:rotate(180deg);z-index: 9990;
}
.index-btn{
	text-align: center;
	font-size: 1.2rem;
	letter-spacing: 2px;
	margin-bottom: 5%;
}
.index-btn a{position: relative; padding-right: 1.8rem;}
.index-btn a:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 14px;
	height: 14px;
	background-image: url("/images/common/mark_arrow.svg");
}
.important-notices{
	width: 100%; margin: 0 auto 10%; padding: 0;
    border: 1px solid var(--dwblue); border-radius: 20px;
    vertical-align: middle;
}
.important-notices-tit{border-bottom: 1px solid var(--dwblue);}
.important-notices h3{
	width: 100%; padding-top: 5%;
    color: var(--dwblue);
    text-align: center;
}
.important-notices ul{
	display: table-cell;
    line-height: 1.6;padding: 5% 4%;
}
.important-notices ul li{
    list-style: none;
    line-height: 1.8;
    margin-bottom: 1em;
	 font-size: 1.4rem;
}
.important-notices ul li span{font-size: 1.2rem; color: var(--lightgray); display: block;}
.important-notices li:last-child{margin-bottom: 0;}

			@media screen and (min-width: 1024px) {
			.index-btn{margin-bottom: 2.5%;font-size: 1.4rem;}
			.important-notices{
				display: flex;
				align-items: center;
				padding: 2% 2% 2% 0;
			}
			.important-notices-tit{width: 22%; border-bottom: none;}
			.important-notices h3{
				margin: 0 auto;
				vertical-align: middle;
			}
			.important-notices ul{width: 75%; border-left: 1px solid var(--dwblue);}
			.important-notices ul li span{
				font-size: 1.2rem; color: var(--lightgray); display: inline-block; margin-left: 1em;
			}
}
/*news, column list style*/
.date-area{clear: both; overflow: hidden;}
.contents .date{margin-bottom: 2.4rem; color:var(--lightgray);}
.img-area {margin-bottom: 1rem; display: block;}
.brand-area{float: right; text-align: right;}

.brand-list,
.news-list,
.column-list,
.link-list,
.company-list,
.recruit-list{
	width: 96%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	padding: 0; margin: 0 auto;
	max-width: 1024px;
}
.brand-list li{
	width: calc(76%/3);
	overflow: auto; margin:0 auto; padding:0;
	text-align: center;
}
.chara-list{width: 96%; margin: 0 auto;}
.chara-list .chara-list-contents{
	width: 100%; position: relative;
	margin-bottom: 5%;
	list-style: none;
}
.chara-list .chara-list-contents a{
	width: 100%; height: 100%; display: block;
	position: absolute; top: 0; left: 0;
}
.chara-list .chara-list-box{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	
}
.chara-list .chara-list-box .c-img{
	width: 31%; margin-right: 2%;
}
.chara-list .chara-list-box .c-txt-box{
	width: 67%; 
	display: flex; justify-content: flex-start; align-items: flex-start;
	flex-wrap: wrap;
}
.chara-list .chara-list-box .c-name-box{
	margin-bottom: 1rem;
	display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;
}
.chara-list .chara-list-box .c-logo{width: 64%; margin-right: 1%;}
.chara-list .chara-list-box .c-name{width: 35%; font-size: 11px; color: var(--linegray); font-weight: bold;}
.chara-list .chara-list-box .c-txt{font-size: 12px;}

			@media screen and (min-width: 481px) {
				.brand-list li{width: calc(81%/4);}
				.brand-list li img{width:50%;}
				#top .brand-list li img{width:80%;}
			}
			@media screen and (min-width: 1024px) {
				.brand-list,.news-list,.column-list,.link-list,.banner-list{ width: 100%;}
				.brand-list li{width: calc(74%/6); margin:0 2% 1rem; padding:0;}
				.brand-list li img{width:75%;}
				#top .brand-list li img{width:80%;}
				.chara-list{
					width: 100%; 
					display: flex; justify-content: flex-start; align-items: flex-start;flex-wrap: wrap;
				}
				.chara-list .chara-list-contents{width: calc(100% / 2 - 2%); margin: 0 1% 2%;}
			}
.banner-list{
	width: 90%;
	padding: 0; margin: 0 auto 5%;
	list-style: none;
	text-align: center;
}
.banner-list li {width: 100%; display: block;}
.banner-list li a{display: block; padding: 2% 0;}

		@media screen and (min-width: 481px) {
			.banner-list{
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				max-width: 1024px;
			}
			.banner-list li a{padding: 6% 0;}
		}

.news-list li,
.link-list li{
	overflow: auto; margin: 0 2%; padding:0;
	text-align: left; font-size: 1.4rem;
	width: calc(92%/2); 
}
.news-list li span,
.column-list li span,
.link-list li span{
	font-size: 1.2rem !important; 
	color: var(--lightgray); display: inline-block; 
	margin-bottom: .5em;
}
.news-list li img[src*="brand/l/logo_"] {
	width: 2.4em; display:inline-block;
	margin-left: 2px;
}
#top h1{text-align: center; color: var(--dwblue); margin-bottom: 1.5rem;}
#top h1 span{display: block; color: var(--lightgray); font-size: 14px; font-weight: bold;}
#top h2{font-size: 32px;margin-bottom: 1rem; color:var(--dwblue); text-align: center;}

#top .top-main-contents{padding:15% 0 0;}
#top .top-contents-about{
	margin: 0 auto 15%;
}
#top .top-contents-about-box{
	width: 88%; margin: 0 auto 5%;
	border: 6px solid #EAEAEA;
	border-radius: 20px;
}
#top .top-contents-about-box .about-img-box{
	position: relative;
}
#top .top-contents-about-box p{
	position: absolute;
	bottom: 0;
	font-size: 16px; letter-spacing: 2px;
	width: 100%; text-align: center;
	background-color: rgba(255,255,255,0.9);
	padding: 2% 0;
}
#top .top-contents-about-box .about-img{
	border-radius: 14px 14px 0 0;
}
#top .top-about-brandlist,
#top .top-about-storelist{
	display: flex;
	justify-content: center;
	align-items:center;
	list-style: none;
	margin-bottom: 1.5%;
	text-align: center;
}
#top .top-about-brandlist li,
#top .top-about-storelist li{
	width: calc(100% / 4);
}
#top .top-about-storelist li{
	width: calc(100% / 2);
}
#top .top-about-brandlist li img{width: 90%; margin: 0 auto;}
#top .top-about-storelist{padding: 2.5%;}
#top .top-about-storelist li a{color: var(--dwblue); font-weight: bold;}
#top .top-about-storelist li img{width: 20%; display: block; margin:0 auto 1rem;}
#top .top-brand-tit{
	font-size: 20px; 
	font-weight: bold; 
	color: var(--lightgray);
}
#top .top-brand-list{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0; margin: 0 auto 5%;
}
#top .top-brand-list li{
	width: calc(100% / 3);
	overflow: auto; margin:0 auto; padding:0;
	text-align: center;
}
#top .top-brand-list li img{width:80%;}
#top .top-company-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
	list-style: none;
	text-align: center;
}
#top .top-company-list li{
	position: relative;
	width: calc(100% / 2);
	margin: 0;
	padding: 1%;
	color: var(--white);
	min-height: 180px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#top .top-company-list li a{
	position: absolute;
	display: block;
	width: 100%; height: 100%;
	top: 0;left: 0;
}

#top .top-company-list li h2{font-size: 18px;color: var(--white); margin-bottom: 3rem;}
#top .top-company-list li h2.jpn{font-size: 16px;}
#top .top-company-list li h2 span{font-size: 12px; display: block;}
#top .top-company-list li.catalog{
	background-color: var(--dwblue);
}
#top .top-company-list li.csr{
	background-image: url(/images/top/top-company-csr.jpg);
	background-repeat: no-repeat;
	background-size:  cover;
	background-position: center;
}
#top .top-company-list li.recruit{
	background-color: var(--blue);
}
#top .top-company-list li.business{
	background-color: var(--lightgray);
}
#top .top-company-list li.column{
	background-image: url("/images/top/top-company-column.jpg");
	background-repeat: no-repeat;
	background-size:  cover;
	background-position: center;
}
#top .top-contents-company{display: none;}
#top .top-sub-contents{display: none;}
#top .top-news-contents{
	padding: 15% 0;
}
#top .news-list{margin-bottom: 3rem;}
#top .news-list li {width: 100%; margin-top: 3rem;}
#top .news-list .date-area a{margin-right: 1rem; font-weight: bold; color: var(--lightgray);}

		@media screen and (min-width: 1024px) {
			.news-list,
            .link-list{margin-top: 0;}
			.news-list li,
            .link-list li{width: calc(84%/4); margin: 0 2% 4%;}
			#top .news-list li{
				width: calc(86%/2);
				overflow: auto;
				margin:0 3.5% 4%;
				padding:0 0 2%;
			}
			#top .top-main-contents{padding:5% 0 0;}
			#top .top-contents-about{
				max-width: 1380px; margin: 0 auto 5%;
				display: flex;
				justify-content: center;
				align-items: stretch;
				flex-flow: row-reverse;
			}
			#top .top-contents-about-box{
				width: calc(100% / 3);
				margin: 0 10px;
			}
			#top .top-contents-about-box p{
				font-size: 20px;
				padding: 2% 0;
			}
			#top .top-brand-list{
				width: 100%;
				justify-content: flex-start;
				flex-wrap: nowrap;
				padding: 0; margin: 0 auto 5%;
			}
			#top .top-brand-list li{
				width: 200px;
				overflow: auto; margin:0 auto; padding:0;
				text-align: center;
			}
			#top .top-sub-contents{
				display: block;
				padding: 5% 0;
				background-color: var(--bggray);
			}
			#top .top-company-list{display: none;}
			#top .top-contents-company{
				display: flex;
				justify-content: space-around;
				align-items: stretch; flex-wrap: wrap;
				list-style: none;
				min-height: 500px;
				text-align: center;
			}
			#top .top-contents-company-box{
				position:relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: calc(100% / 2);
				/*min-height: 300px;*/
			}
			#top .top-contents-company-box h2,
			#top .top-contents-company-box p,
			#top .top-contents-company-box a{color: var(--white);}
			#top .top-contents-company-box h2.jpn{font-size: 26px; font-weight: 700;}
			#top .top-contents-company-box h2 span{display: block; font-size: 14px; font-weight: normal !important;}
			#top .top-contents-company-box a{
				 display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			#top .top-contents-company-box.catalog-box{
				background-color: var(--dwblue);
			}
			#top .top-contents-company-box.csr-box{
				background-image: url("/images/top/top-company-csr.jpg");
				background-repeat: no-repeat;
				background-size: cover;
			}
			#top .top-contents-company-box.business-box{
				background-image: url("/images/top/top-company-business.jpg");
				background-repeat: no-repeat;
				background-size: cover;
			}
			#top .top-contents-company-box.recruit-box{
				background-color: var(--blue);
			}
			#top .top-company-tit span {
				display: block;
				color: var(--lightgray);
				font-size: 14px;
			}
			/*#top .top-sub-contents h2{
				font-size:24px;
				color: var(--lightgray);
				margin-bottom: 3rem;
			}
			#top .top-business-contents{
				max-width: 1024px; margin: 0 auto;
				display: flex;
				justify-content: space-around;
				align-items: stretch;
			}
			#top .top-business-contents-box{
				width: calc(94% / 3);
				background-color: var(--white);
				border-radius: 16px;
				padding: 2.5%;
				margin: 0 1%;
				box-shadow: 0 0 8px var(--lightgray);
			}
			#top .top-business-contents-box h3{
				font-weight: bold;
				color: var(--dwblue);
				font-size: 28px;
				margin-bottom: 3rem;
			}
			#top .top-business-contents-box h3 span{
				display: block;
				font-size: 14px;
				color: var(--lightgray);
			}
			#top .top-business-contents-box .btn{margin-bottom: 0;}*/
			#top .business-list{
				list-style: none;
				max-width: 1380px; margin: 0 auto 2rem;
				display: flex;
				justify-content: flex-start;
				align-items: stretch;
				flex-wrap: wrap;
			}
			#top .business-list li{
				font-size: 1.6rem;
				width: calc(94% / 3);
				background-color: var(--white);
				border-radius: 16px;
				margin: 0 1% 2rem;
				box-shadow: 0 0 8px var(--lightgray);
			}
			#top .business-list li > a{
				width: 100%; height: 100%;
				padding: 3% 3% 3% 9%;
				position: relative;
				display: flex;
				align-items: center;
			}
			#top .business-list li > a:before{
				display: block;
				content: "";
				position: absolute;
				top: 41%;
				left: 3%;
				width: 14px;
				height: 14px;
				background-image: url("/images/common/mark_arrow.svg");
			}
			#top .top-business-cate-list{
				display: flex;
				justify-content: space-around;
				align-items: stretch;
				flex-wrap: wrap;
			}
			#top .top-business-cate-list > a{
				width: calc(96% / 2);
				margin: 2% 1%; padding: 1%;
				text-align: center;
				border: 1px solid var(--darkgray);
				border-radius: 4px;
			}
			#top .top-news-contents{padding: 5% 0;}
		}
		@media screen and (max-width: 481px) {
			#top .top-brand-list li:nth-of-type(10n),
			#top .top-brand-list li:nth-of-type(11n){display: none;}
		}
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 50s infinite linear 0.5s both;
}
.scroll-infinity__wrap:hover .scroll-infinity__list--left{
  animation-play-state: paused;
}
.scroll-infinity__item {
  width: calc(100vw / 13);
}
.scroll-infinity__item>img {
  width: 100%;
}



/* --------------------------------
 * news page / column page
 * -------------------------------- */

#news .contents a,
#column .contents a{color: var(--dwblue);}
#news .contents img.img-SS{width: 12%;}
#news .contents img.img-S{width: 25%;}
#news .contents img.img-M{width: 50%;}
#news .news-list li img{margin-bottom: 1rem;}
#news .news-list li span a {
	margin:0 1rem 1rem 0; color: var(--lightgray);
	border-bottom: 1px solid var(--lightgray); display: inline-block;
}
#news .contents .contents-table{border-collapse: collapse;border: solid 1px var(--lightgray); margin-bottom: 1rem;}
#news .contents .contents-table th {padding: 10px;border: solid 1px var(--lightgray);}
#news .contents .contents-table td {padding: 3px 10px;border: solid 1px var(--lightgray);}

.column-list li{
	width: 100%;
	overflow: auto; margin:0 auto 1rem; padding:0;
	text-align: left;
}
.column-list li img{width:100%;}
.column-list li .column-img{
	position: relative; margin-bottom: 10%;
	display: block;
}
.column-list li .column-img > p {
	position: absolute; bottom: 0; left: -1px; width: 100px; height: 100px;
	font-size: 6rem; font-weight: 700 ;line-height: 16rem; color: var(--lightgray); 
	background-image: url("/images/common/i_cloud.svg");
	background-repeat: no-repeat;
	background-size: 100%;
}
.column-list li .column-box{
	width: 100%; overflow: hidden; clear: both;
}
.column-list li .column-box .date{
	width: 28%; display: inline-block; margin-right: 1%;
	overflow: hidden; vertical-align: top; float: left;
	font-size: 1.2rem;
}
.column-list li .column-box .date span{display: block; margin-bottom: 2rem;}
.column-list li .column-box .column-txt{
	width: 71%; display: inline-block;
}
.column-list li .column-box .column-txt p{
	margin-bottom: 2rem;
	text-align:justify;
	text-justify:inter-character;
}
.column-list li .column-box .column-txt a{position: relative; font-size: 1.2rem; padding-right: 1.8rem;}
.column-list li .column-box .column-txt a:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 14px;
	height: 14px;
	background-image: url("/images/common/mark_arrow.svg");
}

			@media screen and (min-width: 1024px) {
				.column-list li{width: calc(92%/2); margin:0 0 2% 4%; padding:0;}
				.column-list li .column-img > p {
				width: 120px; height: 120px;
				font-size: 7rem; line-height: 19rem;}
                .column-list li .column-box .date{	width: 20%; margin-right: 1%;}
                .column-list li .column-box .column-txt{width: 79%;}
			}
			@media screen and (max-width: 640px) {
				#news h2{font-size: 2rem;}
			}
#column .column-list li .column-img > p {
	width: 90px; height: 90px;
	font-size: 5rem; ;line-height: 14rem;
}
#column .column-list li .column-img{margin-bottom: 4%;}
#column .contents h3,
#column .contents h4,
#column .contents p,
#column .contents img{margin-bottom: 2rem;}
#news .contents .sec,
#column .contents .sec{margin-bottom: 4rem; clear: both; overflow: hidden;}
#column .contents .note{text-align: right; margin-top: -1.5rem;}
.recommend{margin-bottom: 10%;}
#column .contents h3{text-align: left; font-weight: bold;}
#column .contents h4{font-size: 1.8rem; text-align: left; font-weight: bold;}
#column .link-list {width: 100%; margin: 0 auto; background-color: #f4f4f4; padding: 5%;}
#column .link-list li a{color: var(--darkgray); font-weight: bold;}
#column .link-list li span{color: var(--darkgray);}
#column .link-list li img{margin-bottom: 1rem;}
#news .contents .img-R,
#column .contents .sec .img-R,
#news .contents .img-L,
#column .contents .sec .img-L{width: 48%;}
#column .contents .sec .conv-name{color: var(--darkgray); font-weight: bold; display: inline-block; margin-right: 2em;}


.profile{ border-top:1px solid var(--lightgray);  padding: 4% 5% 5%;}
.profile h4{text-align: center; width: 100%;}
.profile img{margin-right: 2%; display: table-cell;}
.profile .name {
    width: 50%; display: table-cell; 
    color: #8f8f8f; vertical-align: middle; text-align: center;
    font-size: 1rem;
}
.profile .name strong{margin-bottom: 1rem; font-size: 1.4rem; display: block; color: var(--darkgray);}
.profile .prof-inner{width: 100%; clear:both; overflow: hidden; display: table;}
.profile .book {width: 30%; float: right; margin-left: 2rem; margin-right: 0;}
#column .caption{font-size: 1.2rem; color: #8f8f8f;}


.recommend h3{text-align: left;}
.sticky{
	postion: -webkit-sticky;
    position: sticky;
	top: 30%; margin-bottom: 5%;
}

.page-nav{width: 100%; margin: 0 auto; text-align: center; display: block;}
.page-nav.sp{display: block; margin-top: 3rem;}
.page-nav li{display: inline-block; font-size: 1.4rem; margin:0 1rem 3rem; list-style: none;}
.page-nav li.old_article::before{
	content: '<'; width: 1rem;
}
.page-nav li.new_article::after{
	position: absolute; content: '>';
	width: 1rem;
}
		.pagination-container ul{
			width: 96%; margin:0 auto 15%;
			display: flex; height: 40px;
			justify-content: flex-start;
			align-items: center;
			list-style: none;
			flex-wrap: wrap;
		}
.pagination-container li{margin-bottom: 1rem;}
		.pagination-container li + li{ margin-left: -1px;}
		.pagination-container a{
			padding: 10px 15px;
			display: block;
			color: var(--darkgray);
			border-left: 1px solid var(--lightgray);
			text-decoration: none;
			background: var(--white);
			font-size: 1rem;
		}
		.pagination-container a:last-child{border-right: 1px solid var(--lightgray);}
		.pagination-container .navi-active a{
			font-weight: bold;
			background: #f4f4f4;
		}
		.pagination-container a:hover{
			color: var(--white);
			background: var(--dwblue);
		}
			@media screen and (min-width: 1024px){
				#news h1{width: 22%; word-break: break-word; display: table-cell;}
				#column main{margin-left: 4%;}
				#column .contents h3{margin-bottom: 4rem;}
				#column .contents .sec{margin-bottom: 8%;}
				#column .link-list li {margin-bottom: 0;}
                .profile img{width: 22%; display: inherit; float: left;}
                .profile .name {width: auto; display: inline-block; text-align: left; margin-bottom: 1rem;}
                .profile .name strong{display: inline; margin-right: 1rem; }
                .profile .prof-inner{clear:none; overflow: inherit; display: inline;}
                .profile .book {width: 12%;}
                
				.page-nav{text-align: left;}
				.page-nav.sp{display: none;}
				.page-nav li.old_article{text-align: left;}
				.page-nav li.new_article{text-align: right;}
				.page-nav li{width: calc(60%/2); margin-bottom: 3rem;}
				
				.pagination-container a{padding: 10px 20px;}
			}

.sub-nav-title{
	width: 100%; line-height: 1.6; 
	display: block; pointer-events: none;
	position: relative;
}
.toggle-check{display: none;}

.sub-nav{width: 100%; margin-top:6rem;}
.sub-nav li{width: 100%; font-size: 1.4rem; margin-bottom: 3rem; list-style: none;}
			
			@media screen and (max-width: 768px){
			.sub-nav-title{pointer-events: all; border-bottom: 1px solid var(--lightgray); transition: .5s;}
			.sub-nav-title::after{
					content: "";
					display: block;
					position: absolute;
					top: 5px;
					bottom: 0;
					right: 0;
					width: 10px;
					height: 10px;
					border-top: 1px solid var(--darkgray);
					border-right: 1px solid var(--darkgray);
					transform: translateX(-50%) rotate(135deg);
			}
			.sub-nav{width: 100%; margin-top:1rem;}
			.sub-nav li{margin-bottom: 0;}
			.toggle{
				height: 0;
				padding: 0 8px;
				transition: .2s;
			}
			input:checked + .toggle{
				height: auto;
				padding: 8px;
			}
			.toggle li{
				padding: 0 8px;
				line-height: 0;
				visibility: hidden;
				opacity: 0;
				transition: 
					padding .2s,
					line-height .2s,
					visibility .1s,
					opacity .1s;
			}
			input:checked + .toggle li{
				padding: 8px;
				line-height: 1.5;
				visibility: visible;
				opacity: 1;
			}
		}

			@media screen and (min-width: 1024px){
				.sub-nav{margin-bottom: 80%;}
				#column .sub-nav{margin-bottom: 0;}
				.sub-nav li{width: 100%; font-size: 1.4rem; margin-bottom: 3rem; list-style: none;}
				.sub-nav-title{color: var(--lightgray);}
			}


/*column backnumber*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
	width: 100%; display: block; line-height: 2.4; 
    cursor :pointer; transition: .5s;
	pointer-events: all; position: relative;
	border-bottom: 1px solid var(--lightgray);
}
.hidden_box label.hidden_box_in{border-bottom: none; margin:0 auto;}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show,
.hidden_box .hidden_show_in{
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
.hidden_box .hidden_show ul{
	width: 100%; margin: 0 auto;
	list-style: none;
}
.hidden_box .hidden_show label,
.hidden_box .hidden_show_in ul li{
	position: relative; margin-bottom: 1.6rem;
}
.hidden_box .hidden_show_in ul li{padding-left: 15px; font-weight: bold;}
.hidden_box .hidden_show_in ul li a{color: var(--lightblue);}
.hidden_box label:before,
.hidden_box .hidden_show label:before,
.hidden_box .hidden_show_in ul li a:before {
    content: "";
	display: block;
	position: absolute;
	top: 8px;
	bottom: 0;
	width: 8px;
	height: 8px;
	border-top: 1px solid var(--darkgray);
	border-right: 1px solid var(--darkgray);
    transition: 0.2s;
}
.hidden_box label:before,
.hidden_box .hidden_show label:before{
	right: 0; transform: translateX(-50%) rotate(135deg);}
.hidden_box .hidden_show_in ul li a:before{
	left: 0; transform: translateX(-50%) rotate(45deg);
	border-top: 1px solid #8fdbfb;
	border-right: 1px solid #8fdbfb;
}
.hidden_box input:checked ~ label:before {
	transform: translateX(-50%) rotate(-45deg);
}
.hidden_box .hidden_show_in ul li a span{
	display: block; font-size: 1.4rem; 
	color: var(--darkgray); margin-top: .5rem;
	 font-weight: normal;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show,
.hidden_box input:checked ~ .hidden_show_in{
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
			@media screen and (min-width: 1024px){
				.hidden_box{margin: 0;}
				.hidden_box label {line-height: 1.6;} 
			}

/* --------------------------------
 * stores page
 * -------------------------------- */
#stores h3{color:var(--dwblue); margin-top: 4%;}
#stores .banner-list{
	width: 100%;
	margin: 5% auto 8%;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}
#stores .banner-list li{width: calc(96% / 2);margin: 0 1% 1rem;}
#stores .banner-list li a{font-weight: bold; font-size: 1.8rem; padding: 2% 0;}
#stores .banner-list li a span{display: block; font-weight: normal; font-size: 1.2rem; color: var(--lightgray); margin-top: 1rem;}
#stores .banner-list li a img{margin-bottom: .5rem;}

#stores .btn{width: 80%;}

.stores-contents,
.stores-contents--img,
.stores-contents--txt{margin-bottom: 5%;}
.stores-info{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap:20px; margin-bottom: 5%;
}
.stores-info dt {
	font-size: 90%; font-weight: bold;
	margin-bottom: 1rem; width: 5em; 
}
.stores-info dd {width: calc(100% - 6em); margin-bottom: 2rem;}

.stores-accordion {
  border-top: 1px solid var(--lightgray);
}
.stores-accordion:last-child{
	border-bottom: 1px solid var(--lightgray); 
	margin-bottom: 15%;
}
.stores-accordion.stores-accordion-inner{border: 0;}
.stores-accordion__title {
  position: relative;
  padding: 2rem 10px;
  cursor: pointer;
	 list-style: none;
	font-size: 1.6rem;
}
.stores-accordion.stores-accordion-inner .stores-accordion__title{font-weight: bold;}
.stores-accordion__title::marker,
.stores-accordion__title::-webkit-details-marker {
  display: none;
}
.stores-accordion__icon {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  right:10px;
  transform: translateY(-50%);
  transition: opacity 0.3s;
}
.stores-accordion__icon--plus {
  opacity: 1;
}
.stores-accordion__icon--minus {
  opacity: 0;
}
.stores-accordion__item[open] .c-accordion__icon--plus {
  opacity: 0;
}
.stores-accordion__item[open] .c-accordion__icon--minus {
  opacity: 1;
}
.stores-accordion__content {
  padding: 0 0 20px;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.stores-list{border-top: 1px solid var(--lightgray);}
.stores-list.border-none{border:0;}
.stores-list-contents{
	position: relative;
	border-bottom: 1px solid var(--bggray);
	padding: 1rem;
}
.stores-list-link{
	position: absolute;
	display: block;
	width: 100%; height: 100%;
	top: 0; left: 0;
}
.stores-list-contents:after{
	content: "";
    position: absolute;
    display: inline-block;
    height: 10px;
    width: 10px;
    border-color: var(--darkgray);
    border-style: solid;
    border-width: 1px 1px 0 0;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    margin-top: -5px;
    right: 16px;
}
.store-list-info{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 1.2rem;
}
.store-list-name{font-size: 1.6rem; font-weight: bold;}
.store-list-address {width: auto; margin-right: 10px; color: var(--darkgray);}
.store-list-category .icon{
	display: inline-block;
	padding: 0; line-height: 16px;
	margin-right: 10px;
}
.store-list-category .icon.blue {color: var(--dwblue);}
.store-list-category .icon.red {color: var(--red);}
.store-list-category .icon.gray {color: var(--darkgray);}
.stores-contents .store-list-category{margin-bottom: 5%;}
.stores-contents .store-list-category .icon{padding: 0 .5rem;}
.stores-contents .store-list-category .icon.blue {border:1px solid var(--dwblue);}
.stores-contents .store-list-category .icon.red  {border:1px solid var(--red);}
.stores-contents .store-list-category .icon.gray {border:1px solid var(--darkgray);}

			@media screen and (min-width: 481px){
				#stores .banner-list li{width: calc(92%/4); height: auto; margin:0 1%;}
			}
			@media screen and (min-width: 1024px){
				#stores h1{width: 22%; word-break: break-word; display: table-cell;}
				#stores .banner-list{justify-content: center;}
				
				.stores-contents{
					display:flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-wrap: wrap;
					gap:0 40px;
					margin-bottom: 5%;
				}
				.stores-contents--img{width: 40%;}
				.stores-contents--map{width: 100%;}
				.stores-contents--txt{width: calc(60% - 40px);}
				.stores-list-name{font-size: 1.6rem;}
				.stores-info dt,
				.stores-info dd {margin-bottom: 0;}
			}


/* --------------------------------
 * brand page
 * -------------------------------- */

#brands h2,
#stores h2{text-align: center; color: var(--dwblue);}
#stores .contents h2{text-align: left; color: var(--darkgray);}
#brands #baby-brands{padding-top: 0;}
#brands #pet-brands{margin-bottom: 15%;}
.cate-btn{width: 100%; margin: 0 auto 10%; text-align: center;}
.cate-btn li{
	display: inline-block; 
	margin-left: 1rem; padding-left: 1rem; 
	border-left:1px solid var(--darkgray); font-size: 1.2rem;
}
.cate-btn li:first-child{border: none; margin:0; padding: 0;}
.brand-category {width: 94%; margin: 0 auto 3rem; border-bottom: 1px solid var(--lightgray);}
.brand-category#baby_original,
.brand-category#pet_original{border-top: 1px solid var(--lightgray); padding-top: 3rem;}
.brand-category h3 {
	width: 100%; margin-bottom: 2rem;
	font-size: 1.6rem; text-align: left;
}
.brand-category .brand-list {display: table-cell; width: 100%; vertical-align: top;}
.brand-category .brand-list li{display: inline-block;width: calc(91%/3); margin: 0 1%; position: relative;}
.brand-category .brand-list li a{display: block; }
.brand-category .brand-list li .new{
	position: absolute; top: 0; left:0; 
	border-radius: 0; margin: 0;
}
.brand-category .brand-list li img{ width: 100%;}
			
			@media screen and (min-width: 481px){
				.cate-btn{margin-bottom: 5%;}
				.brand-category .brand-list li{width: calc(87%/5);}
				.brand-list li{width: calc(81%/4);}
				.brand-list li img{width:50%;}
			}
			@media screen and (min-width: 1024px){
				#brands h1{text-align: left;}
				.cate-btn{margin-bottom: 5%;}
				.brand-category {width: 100%; display: flex;}
				.brand-category h3{width: 20%; display: table-cell; vertical-align: top; margin-right: 5%;}
				.brand-category .brand-list{display: table-cell; width: 100%; vertical-align: top;}
				.brand-list{ width: 100%;}
				.brand-list li{width: calc(74%/6); margin:0 2% 1rem; padding:0;}
				.brand-list li img{width:75%;}
				
			}


#brands .modal-wrapper .brand-link{
	width: 100%;
}
#brands .modal-wrapper .brand-link li{
	list-style: none; position: relative;
	margin-bottom: 2rem; font-size:1.2rem; padding-left: 1.8rem;
	vertical-align: middle;
}
#brands .modal-wrapper .brand-link li a::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 14px;
	height: 18px;
	line-height: 1.4;
	vertical-align: middle;
	background: url("/images/common/mark_arrow.svg") center/14px no-repeat;
}

#brands .modal-wrapper .brand-info{
	width: 100%; clear: both; overflow: hidden; margin-bottom: 2rem;
}
#brands .modal-wrapper .brand-info p{font-size: 1.4rem;}
#brands .modal-wrapper .brand-info br{display: none;}
#brands .modal-wrapper .brand-info strong{display: block; margin-bottom: 1rem;}
#brands .modal-wrapper .main{margin-bottom: 1rem;}
#brands .modal-wrapper .logo{width: inherit; max-width: 140px; max-height: 70px; margin-bottom: 2rem;}
#brands .modal-wrapper h4{font-size: 2.4rem; font-weight: bold; margin-bottom: 2rem;}
#brands .modal-wrapper h4 > span{
	display: block; margin-top: 0;
	font-size: 1.4rem; font-weight: normal;
}
#brands .modal-window{padding: 4%;}
			@media screen and (min-width: 1024px){
				#brands .modal-wrapper h4 > span{margin-top: 1rem;}
				#brands .modal-wrapper .brand-link{
					/*width: 13em;*/
					vertical-align: bottom;
					position: absolute;
					right: 7%; /*top:9rem;*/ top: 5rem;
					display: flex;
					width: 44%;
					justify-content: flex-start;
					align-items: stretch;
					flex-wrap: wrap;
				}
				#brands .modal-wrapper .brand-link li{
					width: 50%;
					margin-bottom: 1rem; font-size:1.3rem;
				}
				#brands .modal-wrapper .brand-info br{display: block;}
				#brands .modal-wrapper .main{float: right; width: 50%; margin-left: 4%;}
				#brands .modal-wrapper .logo{max-width: 180px; max-height: 100px; margin-bottom: 8rem;}
			}

/* --------------------------------
 * campany page
 * -------------------------------- */

#company .banner-list li{
	border: 1px solid var(--lightgray); line-height: 2.4; margin-bottom: 3rem;
}
.company-banner-list{
	width: 98%;
	padding: 0; margin: 0 auto;
	list-style: none;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.company-banner-list li {
	position: relative; 
	width: calc(100% / 2 - 4px); 
	margin: 0 2% 5% 0; padding:6% 4%;
	border: 1px solid var(--dwblue);
	border-radius: 10px;
	background: var(--white);
	font-size: 14px;
}
.company-banner-list li a{
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	display: block;
	color:  var(--dwblue);
	vertical-align: middle;
	text-decoration: none;
	transition: all .5s ease-in-out;
}
.company-banner-list li a:hover {
	color: var(--white);
	opacity: .8;
  background:  var(--dwblue);
	border-radius: 10px;
}
.company-banner-list li a::after{
	content: "";
    display: block;
    position: absolute;
    top:  calc(50% - .5em);
    bottom: 0;
    right: 4px;
    width: 14px;
    height: 14px;
    background-image: url(/images/common/mark_arrow.svg);
}


/*#company .col li img{max-width: 280px; display: block; margin: 0 auto 5%;}*/
#company .col li p br{display: none;}

#company section:first-child{padding-top: 5%;}
#company section.company-top-contents{width: 96%;}
#company img.company-top-logo{max-width: 280px; display: block; margin: 0 auto;}
.company-list{justify-content: space-between;}
.company-list li{
	width: calc(96%/2);
	margin:0 4% 3rem 0; padding:0;
	list-style: none;
	text-align: center;
	letter-spacing: 2px;
}
.company-list li img{margin-bottom: 1rem;}
.company-list li:nth-child(2n){margin-right: 0;}

img[src*="presidentsign"]{max-width: 100px; margin-top: 2rem;}
.map{width:100%; height:200px; margin-bottom: 2rem;}
.philosophy {margin-bottom: 10%;text-align: center;}
.philosophy h2{margin-bottom: 5%;text-align: center;}
.philosophy h2.rinen{padding-top:5%;}
.philosophy h3{font-weight: bold;}
.philosophy strong{
	font-weight: bold; color: var(--dwblue); 
	display: inline-block; margin-bottom: .5rem;
}
.philosophy p{margin:0 auto 2rem; text-align: center;}


.csr-nav {
	width: 100%; margin: 0 auto 10%;
	text-align: center; display: flex;
	justify-content:space-between;
}
.csr-nav li {
	width: calc(100%/4);
	padding: 0 0 6%; position: relative;
	font-size: 1.2rem; list-style: none;
	border-right:1px solid var(--lightgray);
}
.csr-nav.tab3 li {width: calc(100%/3);}
.csr-nav.tab4 li {width: calc(100%/4);}
.csr-nav.tab5 li {width: calc(100%/5);}
.csr-nav li:last-child{border-right:none;}

.csr-nav li a{color: var(--dwblue); display: block;}
.csr-nav li a:after{
        position: absolute;
        width: 10px; 
		height: 10px; 
		border-top: 2px solid var(--dwblue);
		border-right: 2px solid var(--dwblue);
		display: inline-block;
        bottom: -2%;
        content: "";
        left: 48%;
        z-index: 1;
		transform: rotate(135deg);
}
.tab_box{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	max-width: 1200px;
	margin: 0 auto;
	list-style: none;
}
.tab_box li{
	width: calc(100% / 3);
	margin: 0 2% 5%;
	font-size: 16px;
	text-align: center;
	display: flex;
	align-items: center;
	transition: 1s;
}
.tab_box li a{
	display: block;
	width: 100%; height: 100%; padding: 2% 4%; 
	background-color: var(--white);
	align-content: center;
}
.tab_box li.active a{
	color: var(--dwblue); font-weight: bold; 
	border-bottom: 4px solid var(--dwblue);
}
.tab_panel{display: none;transition: 1s; padding: 5% 0;}
.tab_panel.active{display: block;}

#company.privacy .csr .col [class*="acd-box"] p:last-child{
	margin-bottom: 0;
}
#company.privacy .csr .col [class*="acd-box"] p br{display: block;}
#company.privacy .csr .col [class*="privacy-list"] {
	margin-left: 14px;
}
#company.privacy .csr .col .privacy-list > li{
	margin-bottom: .5rem; overflow: inherit;
}
#company.privacy .csr .col .privacy-list-alpha > li{
	list-style-type: lower-alpha;
	margin-bottom: .5rem; overflow: inherit;
}
#company.privacy .csr .col .privacy-list-kana > li{
	list-style-type: katakana;
	margin-bottom: .5rem; overflow: inherit;
}
#company.privacy .contents-table{
	width: 100%; border-collapse: collapse;
	border: solid 1px var(--lightgray); margin-bottom: 2rem;}
#company.privacy .contents-table th {
	padding: 10px;
	border: solid 1px var(--white); 
	background: var(--lightgray);
}
#company.privacy .contents-table td {padding: 3px 10px;border: solid 1px var(--lightgray);}


		@media screen and (min-width: 1024px) {
			#company section.company-top-contents{width: 100%;}
			#company .banner-list {margin-bottom: 10%;}
			#company .banner-list li{width: calc(92%/4); margin:0 1% 2%;}
			/*#company .col li img{width: 100%; max-width: 100%;}*/
			#company .col li p br{display: block;}
			
			.company-list{width: 100%;}
			.company-list li{width: calc(92%/3); margin:0 3% 3rem 0;}
			.company-list li:nth-child(2n){margin-right: 3%;}
			.company-list li:nth-child(3n){margin-right: 0;}
			.map{height:350px;}
			.csr-nav{width: 60%; margin-bottom: 5%;}
			.csr-nav li {font-size: 1.8rem; padding-bottom: 2%;}
			#company.privacy .csr .col [class*="privacy-list"] {margin-left: 24px;}
			#company.privacy .contents-table th.number {width: 4em; text-align: center;}
			#company.privacy .contents-table th.type {width: 10em;}
			.philosophy strong{font-size: 2.4rem;}
			.philosophy p{margin:0 auto 2rem;}
			.philosophy h2.rinen{padding-top:5%;}
			
			.company-banner-list{
				width: 100%;
				max-width: 1024px;
			}
			.company-banner-list li {width: calc(97% / 4 - 8px); margin-top: 5%; margin-right: 2%; padding: 4%;}
			.company-banner-list li:last-child{margin-right: 0;}
			.company-banner-list li a::after{right: 2%;}
			}

			@media screen and (max-width: 640px) {
			#company.privacy .contents-table {width: 100%;}
			#company.privacy .contents-table .thead {display: none;}
			#company.privacy .contents-table tr {width: 100%;}
			#company.privacy .contents-table td {display: block; width: 100%;}
			#company.privacy .contents-table td:first-child {
				background: var(--lightgray); font-weight: bold; text-align: center;
			}
			#company.privacy .contents-table td:before {
				content: attr(data-label);
				display: block;
				text-align: left;
				font-weight: bold;
				margin-right: 10px;
			  }
			#company.privacy .contents-table td:first-child:before{display: inline-block;}
			.company-banner-list li:nth-child(even){margin-right: 0;}
			}

.bg-gray {
	padding: 5% 5% 2.5%; background-color: var(--bggray); 
	text-align: left; border-bottom: 1px solid var(--white);
}

#company .csr {
	padding: 5% 5% 2.5%; background-color: var(--bggray); 
	text-align: left; border-bottom: 1px solid var(--white);
}
#company .csr h2{
	margin-bottom: 5%;
	text-align: center;
	color: var(--dwblue);
}
#company .csr h3,
#company .csr h4{text-align: left;}
#company .csr .sub-copy{
	display: block; max-width: 1024px;
	margin:0 auto 2.5%;
	text-align: left;
	color: var(--dwblue);
}
#company .csr .col{margin-bottom: 0;}
#company .csr .acd-label,
#company .csr .acd-title{
	width: 100%;
    color: var(--darkgray);
    padding: 10px 8% 10px 4%; margin-bottom: 2rem;
	background-color: var(--white);
}
#company .csr .acd-title{padding-right: 4%;}
#company .csr .col li{margin-right: 0;}
#company .csr .col .col-m{width: 100%; margin-left: 0; margin-bottom: 4%;}
#company .csr .col .col-s{width: 100%; margin-bottom: 4%;}
#company .csr .acd-label:after{
    content: '+'; color: var(--dwblue); font-size: 24px;
}
#company .csr .acd-check:checked + .acd-label:after{
    content: '-';
}
#company .csr .acd-check:checked + .acd-label + .acd-content{
	margin-bottom: 2rem; padding: 2% 4%;
	background-color: var(--white);
	overflow: hidden; clear: both;
}
#company .csr .acd-check:checked + .acd-label{margin-bottom: 0;}
#company .csr .col [class*="acd-box"] p{margin-bottom: 2rem;}
#company .csr .col [class*="acd-box"] a{color: var(--dwblue);}
#company .csr .col [class*="acd-box"] strong{display: block; margin-bottom: 1rem;}
#company .csr .col [class*="acd-"] img{max-width: 100%;}
#company .csr .col [class*="acd-box"] .btn{width: 80%;}
#company .csr .col .list{width: 100%;}
#company .csr .col .list li{
	width: auto; 
	margin-bottom: 2rem;
}
#company .csr .col img[src*="logo_"]{
	display: block;
	max-width: 180px; margin: 2rem auto 2rem;
}
#company .csr .col img[src*="logo_fulfillmentcenter"],
#company .csr .col img[src*="logo_dwergo"]{
	max-width: 100%;
}
.outline-list{
	width: 90%; margin: 0 auto; clear: both; overflow: hidden;
	vertical-align: middle;
}
.outline-list dt {
	width: 100%; margin:0 0 .5rem 0; 
	font-size: 1.4rem; font-weight: bold;
}
.outline-list dd{ 
	width: 100%; margin:0 0 2rem 0; padding: 1rem 0;
	display: inline-block; 
	font-size: 1.4rem;
	border-bottom: 1px solid var(--lightgray);
}
#company.recruit .col-l{width: 100%;}
#company.recruit .note{font-size: 1.2rem;}
#company .business-brand-list{
	width: 100%; margin: 0 auto;
	display: flex;
	justify-content:flex-start;
	gap:0 10px;
	flex-wrap: wrap;
}
#company .business-brand-list li.business-brand-list--box{
	width:calc(100% / 3 - 10px);
}

.catalog h2{font-size: 1.6rem; text-align: center;}
.col.catalog .col-s{width:calc(96% / 2);text-align: center;}
.catalog img{margin-bottom: 2rem; width: 80%;}
.catalog img{border: 1px solid var(--lightgray);}

	@media screen and (min-width: 481px){
		#company .csr .col .col-m{width: 65.5%; margin-left:4%; }
		#company .csr .col .col-s{width: 30.5%;}
		#company .col [class*="acd-box"]{vertical-align: top; display: inline-block;}
		#company .csr .col [class*="acd-"] img:last-child{margin: 0 auto;}
		#company .col .acd-box-l{width: 100%; margin: 0;}
		#company .col .acd-box-m{width: calc(95%/2);}
		#company .col .acd-box-m:nth-child(odd){margin-right: 4%;}
		.catalog h2{font-size: 2rem;}
		.col.catalog .col-s{width: 31.3%;text-align: center;margin: 0 1% 3rem;}
        .col.catalog .col-s .btn{width: 80%;}
	}
	@media screen and (min-width: 1024px){
		#company .csr .acd-label{padding: 10px 8% 10px 2%;}
		#company .csr .acd-title{padding: 3% 2%;}
		#company .csr .acd-title.flexbox{display: flex; align-items: center;}
		#company .csr .acd-check:checked + .acd-label + .acd-content{padding: 2%;}
		#company .csr .col img[src*="logo_"]{margin: 0rem auto 3rem; max-width: 200px;}
		#company .csr .col img[src*="logo_fulfillmentcenter"],
		#company .csr .col img[src*="logo_dwergo"]{
			max-width: 100%;
		}
		#company .business-brand-list li.business-brand-list--box{width:calc(100% / 5 - 10px);}
		.outline-list {
			display: flex;
			flex-wrap: wrap;
		}
		.outline-list > dt,
		.outline-list > dd {
			display: flex;
			flex-direction: column;
			padding: 1rem 0;
			border-bottom: 1px solid var(--lightgray);
		}
		.outline-list > dt {
			width: 18%;
		}
		.outline-list > dd {
			width: 82%;
			margin-bottom: .5rem;
		}
		.outline-list--linktxt-nomargin{display: contents;}
	}
	@media screen and (max-width: 640px) {
	}
	

/* --------------------------------
 * faq page
 * -------------------------------- */
.tel{
	position: relative; font-weight: 700; 
	font-size: 1.8rem; margin-bottom: 1rem;
	line-height: 1; 
	/*padding-left: 6rem;*/
}
/*.tel a::before{
	box-sizing: border-box;
    content: '';
    display: block;
    height: 52px;
    padding: 10px 20px;
	padding-left: 3rem;
    position: absolute;
    left: 0;
    top: 0;
	background: url("/images/faq/mark_freecall.svg") no-repeat;
}*/
img[src*="congestion"]{max-width:400px;}
#faq h2{text-align: center; margin-top:8%;}
#faq h3{text-align: left;}
#faq .col-h{width: 100%; margin-bottom: 20%;}
#faq .col-h:last-child{margin-bottom: 0;}
#faq .faq-tb {border-collapse: collapse;}
#faq .faq-tb th, #faq .faq-tb td {border: solid 1px var(--lightgray); padding: .5rem;}
#inquiry .iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
	width: 100%;
}

#inquiry .iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.faq-contents{
	margin-bottom: 5%;
}
#faq-line{
	width: 90%;
	margin: 0 auto;
	max-width: 1200px;
}
.faq-item{
	background: #fff;
	border-radius: 6px;
	border: 1px solid #ade3fd;
	padding: 4%;
	margin-bottom: 17px;
	cursor: pointer;
}
.faq-item:last-child{
	margin: 0;
}
.faq-item-q{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background: url(../img/open.png) right center no-repeat;
}
.faq-item-q > p {width: calc(100% - 50px);}
.faq-item-q > span {
	padding: 0 .5rem; font-size: 12px;
	width: 60px; display: inline-block; border: 1px solid var(--darkgray);
	margin-left: 1rem; text-align: center; line-height: 1.8;
}
.faq-item-q.active{
	background: url(../img/close.png) right center no-repeat;
}
.faq-item-q h3{
	font-size: 18px;
	color: var(--darkgray);
	background: url(../img/q.png) no-repeat;
	margin: 0 0;
	padding: 0 0 0 54px;
	line-height: 1.6;
}
.faq-item-q h3:hover{
	opacity: 0.8;
}
.faq-item-a{
	display: none;
	padding-top: 15px;
}
.faq-item-q p::before{
	content: 'Q'; color: var(--dwblue);
	font-family: "hedley-new-web";
	font-weight: 700;
	font-size: 1.8rem;
	margin-right: 1.2rem;
}
.faq-item-a p::before{
	content: 'A'; color: var(--dwblue);
	font-family: "hedley-new-web";
	font-weight: 700;
	font-size: 1.8rem;
	margin-right: 1.2rem;
}
.faq-item-a a{
	font-size: 16px;
	color: var(--dwblue);
	padding: 0 0 0 1rem;
	line-height: 1.6;
	margin-top: 10px;
	display: block;
}
.faq-item-a a::before{
	content: '>>';
}
.faq-category{
	background-color: var(--lightblue);
	padding: 6% 0;
}
.faq-category-list{
	width: 100%;
	margin: 0 auto; padding: 0;
	max-width: 1024px;
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
	align-items: stretch;
}
.faq-category-list li{
	width: calc(94% / 3);
	margin: 0 1% 2%;
	list-style: none;
	background-color: var(--white);
	display: flex;
	align-items: center;
	border-radius: 6px;
	font-size: 12px;
}
.faq-category-list li a{
	width: 100%; height: 100%; display: block;
	text-align: center;
	margin: 0 auto;
	padding: 1rem;
}
.faq-category-list li a > img{width: 90%;}
.faq-category-list li.other{height: 120px;}
.faq-category-list li.other a{
	display: flex;
	align-items: center;
	justify-content: center;
}

.faq-index-list{
	width: 100%;
	padding: 0; margin: 0 auto 10%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
}
.faq-index-list li{
	width: calc(96% / 2);
	margin: 0 .5%;
	text-align: center;
	border: 1px solid var(--darkgray);
	list-style: none;
	margin-bottom: 3rem;
	display: flex;
	align-items: center;
	border-radius: 6px;
}
.faq-index-list li a{
	width: 100%; display: block;
	text-align: center;
	margin: 0 auto;
	padding: 1rem;
}


#faq .modal-wrapper .faq-info{
	width: 100%; clear: both; overflow: hidden; margin-bottom: 2rem;
}
#faq .modal-wrapper .faq-info h4{font-weight: bold; font-size: 1.6rem; margin-bottom: 1rem;}
#faq .modal-wrapper .faq-info p{font-size: 1.4rem;}
#faq .modal-wrapper .faq-info strong{display: block; margin-bottom: 1rem;}
#support .inner{width:100%; margin: 0 auto;}
#support .ft-img{display: NONE;}

		@media screen and (min-width: 1024px){
			#faq-line{width: 100%;margin: 0 auto;}
			.faq-item{padding: 2%;}
			#faq h2{text-align: left; margin:4% 0 2%;}
			#faq h3{margin-bottom:2%;}
			.faq-category{padding: 2% 0;}
			.faq-category-list{margin-bottom: 0; padding: 0;}
			.faq-index-list{margin-bottom: 5%; justify-content: flex-start;}
			.faq-category-list li{width: calc(90% / 5); margin-bottom: 2%;}
			.faq-index-list li{width: calc(75% / 4);}
			.faq-category-list li.other{height: auto;}
			.faq-category-list li a > img{width: 70%;}
			#faq .col-h{width: 48%; margin-bottom: 0;}
			#faq .faq-tb .nowrap{white-space: nowrap;}
			#faq .faq-item-a img.sp-img{max-width:400px;}
			#support .inner{width: 828px; margin: 0 auto;}
		}
		@media screen and (max-width: 640px) {
			#faq .faq-tb {width: 100%;}
			#faq .faq-tb .thead {display: none;}
			#faq .faq-tb tr {width: 100%;}
			#faq .faq-tb td {
				display: block;
				text-align: right;
				width: 100%;
			  }
			#faq .faq-tb td.faq-tb-tit {background-color: var(--lightgray); color: var(--white); text-align: center;}
			#faq .faq-tb td:first-child {font-weight: bold;}
			#faq .faq-tb td:before {
				content: attr(data-label);
				float: left;
				font-weight: bold;
				margin-right: 10px;
			  }
		}



/*追加マージン*/
.mt1{margin-top: 1rem !important;}
.mt2{margin-top: 2rem !important;}
.mt3{margin-top: 3rem !important;}
.mt4{margin-top: 4rem !important;}
.mb0{margin-bottom: 0 !important;}
.mb1{margin-bottom: 1rem !important;}
.mb2{margin-bottom: 2rem !important;}
.mb3{margin-bottom: 3rem !important;}
.mb4{margin-bottom: 4rem !important;}
.mr1{margin-right: 1rem !important;}
.mr2{margin-right: 2rem !important;}
.mr3{margin-right: 3rem !important;}
.mr4{margin-right: 4rem !important;}
.ml1{margin-left: 1rem !important;}
.ml2{margin-left: 2rem !important;}
.ml3{margin-left: 3rem !important;}
.ml4{margin-left: 4rem !important;}

/*画像サイズ*/
	.img-10{width: 30%!important;}
	.img-20{width: 30%!important;}
	.img-30{width: 50%!important;}
	.img-40{width: 50%!important;}
	.img-50{width: 100%!important;}
	.img-60{width: 100%!important;}
	.img-70{width: 100%!important;}
	.img-80{width: 100%!important;}
	.img-90{width: 100%!important;}
	@media screen and (min-width: 1024px){
		.img-10{width: 10%!important;}
		.img-20{width: 20%!important;}
		.img-30{width: 30%!important;}
		.img-40{width: 40%!important;}
		.img-50{width: 50%!important;}
		.img-60{width: 60%!important;}
		.img-70{width: 70%!important;}
		.img-80{width: 80%!important;}
		.img-90{width: 90%!important;}
	}

/*PC/SP 表示非表示*/
.sp{display: block!important;}
.pc{display: none!important;}
			@media screen and (min-width: 481px){
				.sp{display: none!important;}
			}
			@media screen and (min-width: 1024px){
				.sp{display: none!important;}
				.pc{display: block!important;}
			}