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


/* ========共通======== */      
html {
  scroll-behavior: smooth;
}
body {
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
color: #323232;
}
p {
font-size: 16px;
line-height: 1.8em;
}

img {
-webkit-backface-visibility: hidden;
padding :0;
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
}

h1{ 
margin:0;
padding :0;
 }

.catch{ 
text-align: center;
font-size:20px;
font-weight: bold;
color: #FFFFFF;
 }

@media screen and (max-width: 768px) {
.ygreen_bg .catch br {
display:none !important;
}
.ygreen_bg .catch{ 
text-align: left;
 }
}

h2{ 
text-align: center;
font-size: 26px;
font-weight: bold;
color: #323232;
 }
@media screen and (max-width: 768px) {
h2{ 
font-size: 24px;
text-align: left;
 }
}

h3{ 
font-size: 23px;
font-weight: bold;
color: #323232;
 }
 
 
/* ========メインイメージ======== */ 

.logo { 
margin:0 auto;
text-align: center;
 }

.main { 
padding:0;
margin:0;
background: #FFF450;
} 

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/* パソコンで見たときは"pc"のidがついた画像が表示される */
#pc { display: block !important; }
#sp { display: none !important; }

/* スマートフォンで見たときは"sp"のidがついた画像が表示される */
@media only screen and (max-width: 768px) {
#pc { display: none !important; }
#sp { display: block !important; }
}




.tenpo {
    display:inline-flex;
    margin-top:50px;
}

@media screen and (max-width: 767px) {
.tenpo {
    display:inline-block;
    margin-top:50px;
}
}

/* おすすめ */

.contentMg{
  padding: 40px 0;
}
@media screen and (max-width: 767px) {
.contentMg{
  padding: 35px 0;
}
}

.pd_t_80{
  padding-top: 40px;
}
@media screen and (max-width: 767px) {
.pd_t_80{
  padding-top: 35px;
}
}



.contetBorder{
  border: 3px solid #CBCBCB;
  padding: 40px 0;
}

@media screen and (max-width: 767px) {
.contetBorder{
  padding: 30px 0px;
}
}

.listTitleArea{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
.listTitleArea{
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
}

.listTitleArea p{
  color: #00A795;
  font-size: 20px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
.listTitleArea p{
  text-align: center;
  font-size: 20px;
  padding-bottom: 10px;
}
}

.listTitleArea span{
  color: #00A795;
  font-size: 35px;
  background: linear-gradient(transparent 70%,#8888 70%);
  font-weight: bold;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
.listTitleArea span{
  display: block;
  font-size: 30px;
  margin: 5px 0 0;
}
}

.pd_l_20{
  padding-left: 20px;
}

.listItemArea{
  width: 100%;
  max-width: 600px;
  margin: 20px auto 0;
  padding: 0 40px;
  list-style: none;
}
@media screen and (max-width: 767px) {
.listItemArea{
  padding: 0 15px;
}
}

.listItemArea li{
  font-size: 18px;
  color: #000;
  padding-bottom: 15px;
}
@media screen and (max-width: 767px) {
.listItemArea{
  max-width: 440px;
}
.listItemArea li{
  font-size: 15px;
  text-indent: -2.2em;
  padding-left: 2.2em;
}
}

.listItemArea li:before{
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 37px;/*画像の幅*/
  height: 40px;/*画像の高さ*/
  margin-right: 10px;
  background: url(../img/listicon.png) no-repeat 0 0;
  background-size: contain;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
.listItemArea li:before{
  margin-right: 5px;
  width: 27px;/*画像の幅*/
  height: 30px;/*画像の高さ*/
}
}

/* メリット */

.text_l_02 {
font-size: 18px;
font-weight: bold;
} 
@media screen and (max-width: 768px) {
.text_l_02 {
font-size: 16px;
text-align: left;
padding:0.5em 0 0.5em 1em;
}
}

.text_l_03{ 
font-size: 20px;
font-weight: bold;
padding-top:0.5em;
color: #00A795;
}
 @media screen and (max-width: 768px) {
.text_l_03{ 
font-size: 18px;
}
}

.line{ 
border-bottom: 1px dashed #efa8a8;
padding:1em 0;
}



/* ========受け取りサービスのご利用手順======== */      

.hedding{ 
text-align: center;
font-size: 28px;
font-weight: bold;
color: #323232;
 }
 
 
 dt {
  clear: left;
  float: left;
  width: 15%;
}

@media screen and (max-width: 768px) {
dt {
  width: 100%;
}
}
.step{ 
text-align: center;
font-size: 28px;
font-weight: bold;
 }


/* 矢印 */ 

.arrow{
  margin: 0.5em auto;
  width: 100px;
}
.arrow::before{
  content: "";
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 20px;
  background: #82cfe1;
}
.arrow::after{
  content: "";
  display:block;
  border-top: 50px solid #82cfe1;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  transform-origin: left top;
  transform: scaleY(.5);
}


.arrow2{
  margin: 0.5em auto;
  width: 100px;
}
.arrow2::before{
  content: "";
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 20px;
  background: #ff801e;
}
.arrow2::after{
  content: "";
  display:block;
  border-top: 50px solid #ff801e;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  transform-origin: left top;
  transform: scaleY(.5);
}

/* 背景カラーエリア */    

.ygreen_bg { 
background: #00A795;
padding:2em;
 }


.pink_bg { 
background: #FFF7B8;
padding:2em 2em 1em;
border-radius: 10px;
}

.saxe_bg { 
background: #ecf8fa;
padding:2em 2em 1em;
border-radius: 10px;
}

.yellow_bg { 
background: #FFF7B8;
padding:2em 2em 1em;
border-radius: 10px;
}


/* 文字色 */ 
.red { 
color: #00A795;
}

.bluegreen { 
color: #00A795;
}

.bluegreen2 { 
color: #00A795;
}

.orange { 
color: #00A795;
}

.orange2 { 
color: #00A795;
}

/* ======注意事項======- */ 
.attention { 
border: solid 1px #323232;
padding:2em;
border-radius: 10px;
}


@media only screen and (max-width: 768px) {
.attention { 
padding:1em;
}

}

li {
padding:0.5em 0 ;
}

ol {
padding-left:1em;
}


/* ========footer======= */    
.footer {
background: #00A795;
padding:1.5em 0 1em;
}

.copyright{
text-align: center;
color: #fff;
font-size: 12px;
}
/* ========page-top======== */      

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 12px;
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
#page-top a {
color: #00A795;
background: #fff;
opacity:0.8;   
text-decoration: none;
width: 80px;
padding: 25px 0;
text-align: center;
display: block;
border: 1px solid #00A795;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
opacity:0.5;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



/* ========微調整用======== */      


/* 空き調整 */

.mt10 {margin-top : 10px;} 
.mt20 {margin-top : 20px;
color: #000000;} 
.mt30 {margin-top : 30px;} 
.mt40 {margin-top : 40px;} 
.mt50 {margin-top : 50px;} 
.mt60 {margin-top : 60px;} 
.mt70 {margin-top : 70px;} 
.mt80 {margin-top : 80px;} 



.mb10 {margin-bottom : 10px;} 
.mb20 {margin-bottom : 20px;} 
.mb30 {margin-bottom : 30px;} 
.mb40 {margin-bottom : 40px;} 
.mb50 {margin-bottom : 50px;} 
.mb60 {margin-bottom : 60px;} 
.mb70 {margin-bottom : 70px;} 
.mb80 {margin-bottom : 80px;} 

.text_l {
font-size: 20px;
text-align: center;
} 

.text_ll {
font-size: 28px;
text-align: center;
} 

@media only screen and (max-width: 768px) {
.img_sp{
width: 70%;
text-align: center;
}
}

@media only screen and (max-width: 768px) {
.text-center{
text-align: left;
}
}


/* PCで電話番号リンクを無効に */
@media (min-width: 768px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}


/* Start Button */
.tenpo div:nth-of-type(1) {
	margin-right: 10px;
}
.tenpo div:nth-of-type(2) {
	margin-left: 10px;
}
.start_btn {
	width: 400px;
	margin: 0 auto !important;
	padding: 15px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background-color: #00A795;
}
.bnr_box {
	width: 65%;
	margin: 60px auto 0;
}
.bnr_box img {
	width: 100%;
}
.after {
	display: none;
}
@media (max-width:991px) {
	.start_btn {
		width: 350px;
		font-size: 20px;
	}
}
@media (max-width:767px) {
	.start_btn {
		width: 100%;
	}
	.tenpo {
		display: block;
        margin: 50px 15px 0;
	}
	.tenpo div:nth-of-type(1) {
		margin-right: 0;
	}
	.tenpo div:nth-of-type(2) {
		margin-left: 0;
		border-top: 15px solid #FFFFFF;
	}
	.bnr_box {
		width: 90%;
		margin: 40px auto 0;
	}
	.bnr_box img {
		width: 100%;
	}
}
/* Start Button */


/* ========バグ回避======== */ 

/* クロームで画像がボケるのを防ぐ */

img{
-webkit-backface-visibility: hidden;
}