/* top-img */
#top-img {
padding: 0px;
height: auto;
position: relative;
overflow: hidden;
margin: 0px;
}

.top-img-sp {
}
.top-img-pc {
display: none;
}

.main-catch {
position: relative;
z-index: 1;
opacity: 0;
}
.main-back,
.main-back2 {
width: 80%;
}
.main-back2 {
position: absolute;
top: 10%;
right: -55%;
}
.main-catch h1 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
font-size: calc(100vw / 24);
line-height: 1.3em;
color: rgba(255,255,255,1.00);
font-weight: bold;
display: flex;
align-items: center;
padding-left: 5%;
}

.main-img img {
animation-duration: 3s;
animation-fill-mode: forwards;
animation-name: zoominEfc;
}
.main-img {
margin: -10% 0% 0% -5%;
width: 110%;
/* opacity: 0; */
animation-duration: 3s;
animation-fill-mode: forwards;
overflow: hidden;
}


.merchandise-block {
background-color: rgba(173,221,224,1.00);
padding: 6% 2% 2%;
text-align: center;
position: relative;
}
.merchandise-block::after {
content: "";
position: absolute;
width: 100%;
height: 52%;
bottom: 0px;
left: 0px;
display: block;
background-color: rgba(39,193,200,1.00);
}
.top_link_out a {
font-size: calc(100vw / 26);
line-height: 1.3em;
color: rgba(44,148,153,1.00);
padding: 0.4em 2em;
border: 1px solid rgba(44,148,153,1.00);
display: inline-block;
transition: all 0.4s;
background-color: rgba(254,254,254,1.00);
margin-bottom: 5%;
}

.top_link_out a:hover {
color: rgba(255,255,255,1.00);
border: 2px solid rgba(44,148,153,1.00);
background-color: rgba(44,148,153,1.00);
}

.merchandise-img {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}
.merchandise-img > li {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
padding-bottom: 2%;
}

.faq-list .faq-txt p strong {
font-weight: bold;
}
/*
						<dd class="faq-an">
							<div class="faq-txt">
<p><strong>〈受取期限について〉</strong><br>
受取期限は、商品によって異なります。<br>
*/




.img-blur-top {
  animation-name: imageBlur;
}

.main-zoominEfc {
animation-duration: 3s;
animation-fill-mode: forwards;
animation-name: zoominEfc;
animation-delay: 0.3s;
}

.image-back {
animation-duration: 2s;
animation-fill-mode: forwards;
animation-name: imageBlur;
}

.main-top-mov-l {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-name: top-mov-l;
animation-timing-function: ease-out;
opacity: 0;
}
.main-top-mov-r {
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-name: top-mov-r;
animation-timing-function: ease-out;
opacity: 0;
}

@keyframes zoominEfc {
  0% {
    opacity: 0.0;
		transform: scale(1.03,1.03);
  }
  100% {
    opacity: 1;
		transform: scale(1.0,1.0);
  }
}

@keyframes imageBlur {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes top-mov-l {
  0% {
	 left: -20%;
	 opacity: 0;
  }
  100% {
		left: 0%;
		opacity: 1;
  }
}
@keyframes top-mov-r {
  0% {
	 right: -20%;
	 opacity: 0;
  }
  100% {
		right: 0%;
		opacity: 1;
  }
}


@keyframes top-mov-l-pc {
  0% {
	 left: -11%;
	 opacity: 0;
  }
  100% {
		left: 0%;
		opacity: 1;
  }
}
@keyframes top-mov-r-pc {
  0% {
	 right: -11%;
	 opacity: 0;
  }
  100% {
		right: 0%;
		opacity: 1;
  }
}



img.lrmovie-a {
	position: relative;
	animation-duration: 3s;
	animation-name: lrmovie;
	animation-delay: 0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
img.lrmovie-b {
	position: relative;
	animation-duration: 3s;
	animation-name: lrmovie;
	animation-delay: -1.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

img.tbmovie-a {
	position: relative;
	animation-duration: 3s;
	animation-name: tbmovie;
	animation-delay: 0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
img.tbmovie-b {
	position: relative;
	animation-duration: 3s;
	animation-name: tbmovie;
	animation-delay: -1.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes lrmovie {
  0% {
	 left: -2px;
  }
	50% {
	 left: 2px;
  }
  100% {
		left: -2px;
  }
}
@keyframes tbmovie {
  0% {
	 top: -2px;
  }
	50% {
	 top: 2px;
  }
  100% {
		top: -2px;
  }
}

@keyframes lrmovie-pc {
  0% {
	 left: -4px;
  }
	50% {
	 left: 4px;
  }
  100% {
		left: -4px;
  }
}
@keyframes tbmovie-pc {
  0% {
	 top: -4px;
  }
	50% {
	 top: 4px;
  }
  100% {
		top: -4px;
  }
}


@media print, screen and (min-width: 960px) @keyframes lrmovie {

}




@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {
.main-catch h1 {
font-size: calc(100vw / 26);
line-height: 1.3em;
}

}


@media print, screen and (min-width: 960px) {
.top-img-sp {
display: none;
}
.top-img-pc {
display: block;
background-color: rgba(167,222,224,1.00);
padding: 7% 0px 0%;
margin-top: 1%;
}
.main-img {
margin: 0%;
width: 100%;
position: relative;
overflow: hidden;
}
.main-img img {
width: 80%;
margin-right: 0px;
margin-bottom: -2%;
}
.main-img::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: -50%;
display: block;
background-image: url(../../../img/life/ekichokubin/top_photocover.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
}
.p-main-block {
margin: 0px auto;
width: 85%;
opacity: 0;
position: relative;
}

.p-main-catch {
position: absolute;
width: 100%;
left: 0%;
top: 20%;
opacity: 0;
}

.main-back {
width: 75%;
margin-left: -19%;
}

.p-main-catch h1 {
position: absolute;
top: 19%;
left: 7%;
font-size: calc(100vw / 36);
line-height: 1.6em;
color: rgba(44,148,153,1.00);
font-weight: bold;
}

.p-top_link_out {
position: absolute;
top: 60%;
left: 7%;
}
.p-top_link_out a {
font-size: calc(100vw / 48);
line-height: 1.3em;
color: rgba(44,148,153,1.00);
padding: 0.5em 2em;
border: 2px solid rgba(44,148,153,1.00);
display: inline-block;
transition: all 0.4s;
}
.p-top_link_out a:hover {
color: rgba(255,255,255,1.00);
border: 2px solid rgba(44,148,153,1.00);
background-color: rgba(44,148,153,1.00);
}


.merchandise-block {
padding: 4% 3% 3.2%;
margin-top: 2%;
}
.merchandise-block::after {
height: 52%;
}
.merchandise-img > li {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
padding-bottom: 0%;
}


img.lrmovie-a {
	animation-name: lrmovie-pc;
}
img.lrmovie-b {
	animation-name: lrmovie-pc;
}

img.tbmovie-a {
	animation-name: tbmovie-pc;
}
img.tbmovie-b {
	animation-name: tbmovie-pc;
}


.main-top-mov-l {
animation-duration: 1.0s;
animation-name: top-mov-l-pc;
}
.main-top-mov-r {
animation-duration: 1.0s;
animation-name: top-mov-r-pc;
}

}




@media print, screen and (min-width: 1200px) {

}


@media print, screen and (min-width: 1400px) {

}














/*
<section class="contents-block-de" id="how">
	<div class="contents-block-in">
		<h2 class="section-title animation"><img src="images/c02_title.svg" alt="こんな時ありませんか？" width="724" height="50" loading="lazy"></h2>
		<div class="contents-box-in">
			<div class="fukidashi01 animation"><img src="images/c02_fukidashi01.svg" alt="こあの人気の商品が欲しいけど買いに行けない" width="256" height="194" loading="lazy"></div>
			<div class="fukidashi02 animation"><img src="images/c02_fukidashi02.svg" alt="こ買い物に行きたいけど会社帰りに時間がない" width="256" height="194" loading="lazy"></div>
			<div class="fukidashi03 animation"><img src="images/c02_fukidashi03.svg" alt="宅配を頼みたいけど受け取りの時間に縛られたくない" width="256" height="194" loading="lazy"></div>
			<div class="sousa_img animation"><img src="images/c02_Illust.svg" alt="「駅チョク便」なら自分のタイミングで欲しいものが駅のロッカーで受け取れます" width="256" height="194" loading="lazy"></div>
		</div>

	</div>
</section>
*/

/* how */
#how {
background-color: rgba(173,221,224,1.00);
}
#how .fukidashi01,
#how .fukidashi02,
#how .fukidashi03 {
width: 45%;
}
#how .fukidashi01 {
margin-left: 7%;
margin-top: 18%;
}
#how .fukidashi02 {
margin-left: 48%;
margin-top: -52%;
}
#how .fukidashi03 {
margin-left: 38%;
margin-top: 9%;
position: relative;
z-index: 1;
}
#how .sousa_img {
width: 80%;
margin: -5% auto 0px;
}


@media print, screen and (min-width: 375px) {

}

@media print, screen and (min-width: 768px) {

}

@media print, screen and (min-width: 960px) {
#how .fukidashi01,
#how .fukidashi02,
#how .fukidashi03 {
width: 28%;
}

#how .fukidashi01 {
margin-left: 16%;
margin-top: -2%;
}
#how .fukidashi02 {
margin-left: 56%;
margin-top: -24%;
}
#how .fukidashi03 {
margin-left: 35%;
margin-top: -4%;
}

#how .sousa_img {
width: 60%;
margin: -2% auto 0px;
padding-left: 7%;
}

}



@media print, screen and (min-width: 1200px) {

}


@media print, screen and (min-width: 1400px) {

}















/*
<section class="contents-block-de" id="station">
	<div class="contents-block-in">
		<h2 class="section-title animation"><img src="images/c04_title.svg" alt="「駅チョク便」が受け取れる駅は？" width="724" height="104" loading="lazy"></h2>

		<div class="stations animation">
			<img src="images/c04_text.svg" alt="常温対応駅‥‥全駅　冷蔵対応駅‥‥新宿・池袋・東京・赤羽・京王新宿・八幡山・調布・府中・聖蹟桜ヶ丘" width="630" height="91" loading="lazy" class="pc-cont">
			<img src="images/c04_text_sp.svg" alt="常温対応駅‥‥全駅　冷蔵対応駅‥‥新宿・池袋・東京・赤羽・京王新宿・八幡山・調布・府中・聖蹟桜ヶ丘" width="245" height="65" loading="lazy" class="sp-cont">
		</div>
		
		<div class="station-map animation">
			<img src="images/c04_map.png" alt="受け取れる駅" width="880" height="604" usemap="#Map" class="pc-cont" loading="lazy">
<div class="my-gallery"><figure>
*/
/* station */
#station {
}
section.contents-block-de#station {
padding-bottom: 12%;
background-color: rgba(238,238,238,1.00);
}
#station .stations {
margin: 0% auto 8%;
width: 90%;
}
#about .station-map {
width: 100%;
margin: 0px auto;
}



@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {
section.contents-block-de#station {
padding-bottom: 11%;
}
#station .stations {
margin: 0% auto 6%;
width: 70%;
}
#about .station-map {
width: 90%;
}

}


@media print, screen and (min-width: 960px) {
section.contents-block-de#station {
padding-bottom: 9%;
}
#station .stations {
margin: -2% auto 5%;
width: 70%;
}
#about .station-map {
width: 90%;
}

}


@media print, screen and (min-width: 1200px) {
section.contents-block-de#station {
padding-bottom: 7%;
}
#about .text-box {
font-size: 24px;
line-height: 1.6em;
margin: -3% auto 7%;
padding: 0px;
}

}


@media print, screen and (min-width: 1400px) {

}





























/* about */
#about {
}
section.contents-block-de#about {
padding-bottom: 12%;
}
#about .text-box {
font-size: calc(100vw / 24);
line-height: 1.5em;
margin: -2% auto 10%;
max-width: 720px;
text-align: justify;
padding: 0px 5%;
}
.pc-cont {
display: none;
}
.sp-cont {
display: block;
}
#about .text-time {
margin: 0% auto 10%;
width: 70%;
}
#about .text-time2{
width: 100%;
margin: 0px auto;
}



@media print, screen and (min-width: 375px) {

#about .text-box {
font-size: calc(100vw / 26);
line-height: 1.5em;
padding: 0px 6%;
}

}


@media print, screen and (min-width: 768px) {

section.contents-block-de#about {
padding-bottom: 10%;
}
#about .text-box {
font-size: calc(100vw / 39);
line-height: 1.6em;
padding: 0px 7%;
}
#about .text-time {
margin: 0% auto 10%;
width: 60%;
}
#about .text-time2{
width: 80%;
}

}


@media print, screen and (min-width: 960px) {

section.contents-block-de#about {
padding-bottom: 8%;
}
#about .text-box {
font-size: 21px;
line-height: 1.6em;
margin: -3% auto 7%;
padding: 0px 4%;
}
.pc-cont {
display: block;
}
.sp-cont {
display: none;
}
#about .text-time {
margin: 0% auto 7%;
width: 70%;
}
#about .text-time2{
width: 70%;
}

}


@media print, screen and (min-width: 1200px) {
section.contents-block-de#about {
padding-bottom: 7%;
}
#about .text-box {
font-size: 24px;
line-height: 1.6em;
margin: -3% auto 7%;
padding: 0px;
}

}


@media print, screen and (min-width: 1400px) {

}


























/* flow */
#flow {
  background-color: rgba(179,221,224,1.00);
}
section.contents-block-de#flow {
padding-bottom: 12%;
}
#flow .contents-block-in {
  padding: 0px;
  width: 80%;
  max-width: 810px;
}
.flow-block {
  font-size: calc(100vw / 25);
  line-height: 1.5em;
  text-align: justify;
  padding: 6% 8%;
  background-color: rgba(255,255,255,1.00);
  border-radius: 15px;
}
.flow-num {
  position: absolute;
  width: 55px;
  left: 1%;
  top: 1%;
}
.flow-text {
}
.flow-text br {
display: none;
}
.flow-img {
  width: 65%;
  margin: 3% auto;
}



@media print, screen and (min-width: 375px) {
.flow-block {
  font-size: 15px;
  line-height: 1.5em;
  padding: 6% 8%;
  border-radius: 20px;
}
.flow-num {
  width: 60px;
  left: 2%;
  top: 2%;
}

}


@media print, screen and (min-width: 768px) {
section.contents-block-de#flow {
padding-bottom: 10%;
}

}
/*
<section class="contents-block-de" id="flow">
	<div class="contents-block-in">
		<h2 class="section-title animation"><img src="images/c05_title.svg" alt="ご利用のながれ" width="724" height="104" loading="lazy"></h2>

		<div class="flow-block resmab30 animation">
			<div class="flow-num"><img src="images/c05_01.svg" alt="1" width="107" height="107" loading="lazy"></div>
      <ul class="flow-flex">
        <li><div class="graphic-img"><img src="images/flow01.jpg" alt="「LINEやWEBから商品を選択します」のイメージ" width="472" height="408" loading="lazy"></div></li>
        <li>
          <div class="flow-text resmab20">LINEやWEBから商品を選択します。<br>受け取りたい駅を選びます。<br>受取日は14日先まで指定できます。<br>決済をして注文完了。</div>
          <div class="graphic-img"><img src="images/icon_card.png" alt="カード" width="474" height="56" loading="lazy"></div>
        </li>
      </ul>
		</div>
*/

@media print, screen and (min-width: 960px) {
section.contents-block-de#flow {
padding-bottom: 8%;
}
.flow-block {
  font-size: 18px;
  line-height: 1.5em;
  padding: 4% 7%;
  border-radius: 20px;
}
.flow-text br {
display: table;
}
.flow-num {
  width: 90px;
  left: 2%;
  top: 4%;
}
.flow-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flow-flex > li {
	-ms-flex-preferred-size: 45%;
	flex-basis: 45%;
}
.flow-flex > li:last-child {
-ms-flex-preferred-size: 55%;
flex-basis: 55%;
display: flex;
align-items: center;
}

}


@media print, screen and (min-width: 1200px) {
section.contents-block-de#flow {
padding-bottom: 7%;
}
.flow-block {
  font-size: 19px;
  line-height: 1.5em;
}

}


@media print, screen and (min-width: 1400px) {

}





















/*
<section class="contents-block-de" id="customer">
	<div class="contents-block-in">
		<h2 class="section-title animation"><img src="images/c06_title.svg" alt="お客さまの声" width="724" height="104" loading="lazy"></h2>

    <ul class="customer-block">
      <li>
        <div class="customer-text resmab20">
          <p class="resmab20">帰宅時間が読めなくても、自分のタイミングで駅ロッカーで受け取れるから助かります。</p>
          <p class="t-right">20代　会社員</p>
        </div>
        <div class="graphic-img"><img src="images/c06_illust01.svg" alt="20代　会社員のイメージ" width="472" height="408" loading="lazy"></div>
      </li>
      <li>
*/

/* customer */
#customer {
}
section.contents-block-de#customer {
padding-bottom: 12%;
}
#customer .contents-block-in {
  padding: 0px;
  width: 80%;
  max-width: 1000px;
}
.customer-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.customer-block > li {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: 0px 0px 5%;
}
.customer-block > li:last-child {
  padding: 0px;
}
.customer-text {
  font-size: calc(100vw / 23);
  line-height: 1.5em;
  text-align: justify;
  padding: 6% 8%;
  background-color: rgba(255,255,255,1.00);
  border-radius: 15px;
  border: 1px solid rgba(94,191,199,1.00);
}
.customer-block .graphic-img {
  width: 58%;
  margin: -7% auto 3%;
}



@media print, screen and (min-width: 375px) {
section.contents-block-de#customer {
padding-bottom: 11%;
}
.customer-text {
  font-size: 15px;
  line-height: 1.5em;
  padding: 6% 8%;
  border-radius: 20px;
}

}


@media print, screen and (min-width: 768px) {
section.contents-block-de#customer {
padding-bottom: 10%;
}

}


@media print, screen and (min-width: 960px) {
section.contents-block-de#customer {
padding-bottom: 8%;
}

.customer-block > li {
	-ms-flex-preferred-size: calc(33.33% - 10px);
	flex-basis: calc(33.33% - 10px);
  padding: 0px;
}

}


@media print, screen and (min-width: 1200px) {
.customer-block > li {
	-ms-flex-preferred-size: calc(33.33% - 15px);
	flex-basis: calc(33.33% - 15px);
}
.customer-text {
  font-size: 17px;
  line-height: 1.5em;
}

}


@media print, screen and (min-width: 1400px) {

}























/* sns */
#sns {
}
section.contents-block-de#sns {
  padding: 12% 0px;
  background-color: rgba(237,237,237,1.00);
}
/*
#sns .contents-block-in {
  padding: 0px;
  width: 50%;
  max-width: 288px;
}
.sns-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sns-block > li {
	-ms-flex-preferred-size: calc(33.33% - 15px);
	flex-basis: calc(33.33% - 15px);
}
*/

#sns .contents-block-in {
  padding: 0px;
  width: 35%;
  max-width: 190px;
}
.sns-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sns-block > li {
	-ms-flex-preferred-size: calc(50% - 15px);
	flex-basis: calc(50% - 15px);
}



@media print, screen and (min-width: 375px) {
section.contents-block-de#sns {
  padding: 12% 0px;
}
.sns-block > li {
	-ms-flex-preferred-size: calc(50% - 20px);
	flex-basis: calc(50% - 20px);
}

}


@media print, screen and (min-width: 768px) {
section.contents-block-de#sns {
  padding: 7% 0px;
}

.sns-block > li {
	-ms-flex-preferred-size: 65px;
	flex-basis: 65px;
}

}


@media print, screen and (min-width: 960px) {
section.contents-block-de#sns {
  padding: 6% 0px;
}

}


@media print, screen and (min-width: 1200px) {
section.contents-block-de#sns {
  padding: 5% 0px;
}

}


@media print, screen and (min-width: 1400px) {

}























/*
<section class="contents-block-de" id="other">
	<div class="contents-block-in">

    <ul class="other-block">
      <li><a href="#" target="_blank">よくあるご質問・お問い合わせ</a></li>
      <li><a href="#" target="_blank">ご利用規約</a></li>
      <li><a href="#" target="_blank">特定取引法に基づく表記</a></li>
      <li><a href="#" target="_blank">プライバシーポリシー</a></li>
    </ul>
    
    <div class="graphic-img ekichoku"><img src="images/ekichokubin_logo.svg" alt="駅チョク便" width="188" height="72" loading="lazy"></div>

	</div>
</section>
*/


/* sns */
#other {
}
section.contents-block-de#other {
  padding: 12% 0px;
}
.other-block {
max-width: 800px;
width: 80%;
margin: 0px auto;
}
.other-block > li {
margin-bottom: 5%;
display: block;
}
.other-block > li a {
font-size: calc(100vw / 26);
line-height: 1.3em;
color: rgba(0,0,0,1.00);
padding: 0.5em 1em;
border: 1px solid rgba(44,148,153,1.00);
display: block;
transition: all 0.4s;
background-color: rgba(254,254,254,1.00);
position: relative;
text-align: center;
}
.other-block > li a::after {
content: "";
width: 18px;
height: 18px;
top: calc(50% - 9px);
right: 5px;
display: block;
position: absolute;
transition: all 0.4s;
background-image: url(../../../img/life/ekichokubin/arrow_in.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
}
.other-block > li a.pdf-icon::after {
background-image: url(../../../img/life/ekichokubin/icon_pdf.svg);
}
.other-block > li a.other-icon::after {
background-image: url(../../../img/life/ekichokubin/arrow_ot.svg);
}
.other-block > li a:hover {
color: rgba(255,255,255,1.00);
border: 2px solid rgba(44,148,153,1.00);
background-color: rgba(44,148,153,1.00);
}
.other-block > li a:hover::after {
background-image: url(../../../img/life/ekichokubin/arrow_in_w.svg);
}
.other-block > li a.pdf-icon:hover::after {
background-image: url(../../../img/life/ekichokubin/icon_pdf_w.svg);
}
.other-block > li a.other-icon:hover::after {
background-image: url(../../../img/life/ekichokubin/arrow_ot_w.svg);
}
.graphic-img.ekichoku {
max-width: 188px;
width: 40%;
margin: 5% auto 0px;
}






@media print, screen and (min-width: 375px) {
section.contents-block-de#other {
  padding: 11% 0px;
}
.other-block > li a {
font-size: 14px;
line-height: 1.3em;
}

}


@media print, screen and (min-width: 768px) {
section.contents-block-de#other {
  padding: 9% 0px;
}
.other-block > li {
margin-bottom: 3%;
}
.other-block > li a {
padding: 0.7em 1em;
border: 2px solid rgba(44,148,153,1.00);
font-size: 16px;
line-height: 1.3em;
}
.other-block > li a::after {
width: 20px;
height: 20px;
top: calc(50% - 10px);
right: 6px;
}

}


@media print, screen and (min-width: 960px) {
section.contents-block-de#other {
  padding: 8% 0px;
}
.other-block > li {
margin-bottom: 3%;
}
.other-block > li a {
padding: 0.9em 1em;
font-size: 17px;
line-height: 1.3em;
}

.graphic-img.ekichoku {
margin: 4% auto 0px;
}

}


@media print, screen and (min-width: 1200px) {

}


@media print, screen and (min-width: 1400px) {

}
























/* sns */
#faq {
}
section.contents-block-de#faq {
padding: 12% 0px;
background-color: rgba(173,221,224,1.00);
}
#faq .contents-block-in {
width: 85%;
max-width: 900px;
}
.faq-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.faq-list > li {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding: 6% 6% 6% 10%;
background-color: rgba(255,255,255,1.00);
border-radius: 15px;
margin-bottom: 6%;
}

.faq-list .faq-title {
font-size: calc(100vw / 23);
line-height: 1.5em;
font-weight: 500;
margin-bottom: 1em;
padding-left: 15px;
position: relative;
}
.faq-list .faq-title::after {
content: "";
width: 27px;
height: 27px;
top: -3px;
left: -15px;
display: block;
position: absolute;
transition: all 0.4s;
background-image: url(../../../img/life/ekichokubin/f_q.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
}
.faq-list .faq-an {
font-size: calc(100vw / 26);
line-height: 1.5em;
}
.faq-list .faq-an p {
padding-bottom: 1.2em;
}
.faq-list .faq-an a {
text-decoration: underline;
}



@media print, screen and (min-width: 375px) {
section.contents-block-de#faq {
padding: 11% 0px;
}
.faq-list .faq-title {
font-size: 15px;
line-height: 1.5em;
padding-left: 15px;
}
.faq-list .faq-title::after {
width: 28px;
height: 28px;
top: -3px;
left: -17px;
}
.faq-list .faq-an {
font-size: 14px;
line-height: 1.5em;
}

}


@media print, screen and (min-width: 768px) {
section.contents-block-de#faq {
padding: 9% 0px;
}
.faq-list > li {
margin-bottom: 5%;
border-radius: 20px;
}
.faq-list .faq-title {
font-size: 21px;
line-height: 1.5em;
padding-left: 0px;
}
.faq-list .faq-title::after {
width: 40px;
height: 40px;
top: -3px;
left: -46px;
}
.faq-list .faq-an {
font-size: 16px;
line-height: 1.5em;
}

}


@media print, screen and (min-width: 960px) {
section.contents-block-de#faq {
padding: 6% 0px;
}
#faq .contents-block-in {
width: 100%;
}
.faq-list > li {
margin-bottom: 4%;
border-radius: 25px;
}
.faq-list .faq-title {
font-size: 24px;
line-height: 1.5em;
}
.faq-list .faq-title::after {
width: 45px;
height: 45px;
top: -3px;
left: -51px;
}
.faq-list .faq-an {
font-size: 17px;
line-height: 1.5em;
}

}


@media print, screen and (min-width: 1200px) {

}


@media print, screen and (min-width: 1400px) {

}