@charset "utf-8";
* {
    box-sizing: border-box;
    font-feature-settings: "palt" 1;
}

@media (prefers-color-scheme: dark) {
    body {background-color: #fff;}
    .icon {background:#fff;}
    .mainClm4 li {background:#fff;}
  }
body {
    -webkit-text-size-adjust: 100%;
    position: relative;
    width: 100%;
    font-family:"Hiragino Sans", "ヒラギノ角ゴシック", "YuGothic", "Meiryo", "sans-serif";
    overflow-x: hidden;
    background:#fff;
}

/* ヘッダーを非表示 */
header {display: none;}
#maincantents .contents {
    margin:0;
}
/* ヘッダー非表示end */

#footer {background:#17A0DA;}

#body-inside {
    overflow-x: hidden;
}
.topimage {
    width: 100%;
    max-height: 800px;
    background-color: #17A0DA;
    justify-content: center;
}
.xxx {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.top {
    overflow: hidden;
}
.pc {display: none;}
.sp {display: block;}
.tablet {display: none;}
   
/* topimage */
.arc{
    background:url(../../images/pickup_lp/city.png) no-repeat bottom center / 375px #17A0DA;
    height:550px;
    border-bottom:2px solid #8dd6f5;
    padding-top:100px;
    position: relative;
}
.top-slide {
    width:100%;
    height:60px;
    position: relative;
    display:flex;
    justify-content: center;
    align-items: center;
    max-height: 100px;
}
.top-slide-ani1 {
    position:absolute;
    left:0;
    max-width: 500%;
    width:500%;
    animation:food 12s linear infinite;
}
@keyframes food {
    0% {transform: translateX(0);}
    100% {transform: translateX(-33.3333%);}
}
.logomark {
    position:absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    width:60px;
}
.logotype {
    width:240px;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top:70px;
}
.logotype img {
    width:100%;
    vertical-align: bottom;
}
.top-visual-wrap {
    position:relative;
}
.catchcopy {
    width:200px;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top:70px;
}
.catchcopy img {
    width:100%;
    vertical-align: bottom;
}
.photo-wrap {
    max-width:400px;
    width:100%;
    height:390px;
    margin:0 auto;
    position: relative;
}
.top-photo1 {
    width:200px;
    position:absolute;
    left:-30px;
    top:140px;
}
.top-photo1 img {
    width:100%;
    vertical-align: bottom;
}
.top-photo2 {
    width:200px;
    position:absolute;
    right:-30px;
    top:140px;
}
.top-photo2 img {
    width:100%;
    vertical-align: bottom;
}
.car-wrap {
    max-width: 300px;
    width:100%;
    position: absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
}
.car {
    width:50px;
    animation: car 5s linear infinite;
}
@keyframes car {
    0% {transform: translateX(20px);}
    45% {transform: translateX(200px);}
    50% {transform: translateX(200px) rotateY(180deg);}
    95% {transform: translateX(20px) rotateY(180deg);}
    100% {transform: translateX(20px) rotateY(0deg);}
}


/* 大枠 */
.wrapper {
    justify-content: center;
    width: 100%
    
}

section {
    width: 100%;
    margin: auto;
    padding:50px 0;
}
#howto p {
    font-weight: normal;
    color:#333;
}
#howto .p-1 {
    margin-top:20px;
}



/* フォント */
h2,
h3,
h4,
h5,
p {
    font-family: Hiragino Sans;
}

h2 {
    font-size: 22px;
    font-weight: normal;
}

h3 {
    font-size: 15px;
    font-weight: normal;
}

h4 {
    font-size: 17px;
    font-weight: normal;
    color: #17A0DA;
}

h5 {
    font-size: 20px;
    font-weight: normal;
}
.ilst {
    margin: 20px 0;
    text-align: center;
    align-items: center;
}
.ilst1_1 {
    margin-bottom: 10px;
    width: auto;
    max-height: 130px;
}
.ilst1_2 {
    vertical-align: bottom;
    width: auto;
    max-height: 80px;
}
.icon {
    width: 50px;
    height: 30px;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    /* border: 4px solid #17A0DA; */
    border-bottom: 0;
    color: #17A0DA;
    background-color: #fff;
    display: flex;
    justify-content: center;
    vertical-align: text-bottom;
    font-size: 1.5rem;
    font-family: 'Hiragino Sans';
    font-weight: normal;
    transform: translateX(100%);
}

.numbers {
    transform: translateY(8px);
}
.point-wrap {
    background:url(../../images/pickup_lp/top_bg.png) no-repeat top 59% center / 130% ,
    linear-gradient(to bottom, #17A0DA 56%, #fff 50%);
}

.mainClm4 {
    display: flex;
    flex-wrap: wrap;
    align-items: top;
    margin-bottom: 0;
    justify-content: space-between;
    padding:0 10px
}
.mainClm4 li {
    width:calc((100% - 10px) / 2);
    padding: 0.5em 1em;
    color: #17A0DA;
    background: #FFF;
    border: solid 4px #17A0DA;
    border-radius: 20px;
    list-style: none;
    position: relative;
    justify-content: center;
    align-items: center;
    margin-bottom:40px;
}

@media screen and (max-width:340px) {
    .mainClm4 li {
        width:100%;
        flex-wrap:wrap;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .mainClm4 li .hlA_1,
    .mainClm4 li p {
        width:55%;
        margin-right:10px;
        display: block;
    }
    .mainClm4 li .hlA_1 {
        font-size:16px;
        text-align: left;
    }
    .mainClm4 li p {
        margin-top:-30px;
        font-size:13px;
    }
    .mainClm4 li .p-1,
    .mainClm4 li .ilst {
        width:calc(45% - 10px);
        display: block;
    }
    .mainClm4 li .ilst {
        margin:0;
    }
    .mainClm4 li .ilst img {
        margin:0;
    }
    .mainClm4 li .p-1 {
        font-size:13px;
        color:#333;
        margin:0
    }
    .point-wrap {
        background: url(../../images/pickup_lp/top_bg.png) no-repeat top 71% center / 130% , linear-gradient(to bottom, #17A0DA 67%, #fff 67%);
    }
}

.mainClm4 li .icon {
    position: absolute;
    top: -29px;
    left:50%;
    transform: translateX(-50%);
}
.hlA {
    margin: 1rem 0 0 0;
    text-align: center;
}
.hlA_1 {
    margin: 1rem 0 0 0;
    text-align: center;
    font-size: 17px;
}
.QRLINK_sp {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 10px 0 40px; */
    padding: 20px 0 0px;
}
.a:hover { 
    background: #17BEF5;
    opacity: 1;
} 
.btn_SP_link {
    width: 94%;
    margin:0 auto;
    border-radius: 70px;
    background: #17A0DA;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px;
    border: 2px solid #fff;
    box-shadow: 0 3px #0F7DAC;
}
.btn_SP_link img {
    width: 100%;
    margin:0 auto;
}
.btn_PC_link .btn_pc {
    display: none;
}
.btn_SP_link .btn_sp {
    display: block;
}
.QR {
    display: none;
}



/*===================================================
タイトル
===================================================*/
.title {
    display: flex;
    justify-content: center;
}

.line {
    color: #17A0DA;
    text-align: center;
    border-bottom: solid 3px #17A0DA;
    margin-bottom: 70px;
}
.line2 {
    color: #17A0DA;
    text-align: center;
    border-bottom: solid 3px #17A0DA;
    margin-bottom: 20px;
}
.subtitle_pc {
    color: #17A0DA;
    text-align: center;
    margin: 0;
    display: none;
    font-size: 22px;
}
.subtitle_sp {
    color: #17A0DA;
    text-align: center;
    margin: 0;
    font-size: 22px;
}


/*===================================================
こんなあなたに最適
===================================================*/
.title01 {
    display: flex;
    justify-content: center;
    /* margin-top: 20px; */
}
.title02 {
    display: flex;
    justify-content: center;
}
.interview {
    text-align: center;
    color: #17A0DA;
    margin: 16px 0;
    border-bottom: dashed 3px #fff;
}
.sample {
    margin-bottom: 50px;
    margin: 0;
}
.sample-inner {
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    flex-direction: column;
}
.box01 {
    max-width: 350px;
    width: auto;
}
.box02_pc {
    display: none;
}
.box02_sp {
    max-width: 151px;
    display: block;
    width: auto;
}
.box03 {
    max-width: 350px;
}
.box04_pc {
    display: none;
}
.box04_sp {
    max-width: 45px;
    display: block;
    width: auto;
}
.box05 {
    max-width: 350px;
}
#best {
    margin:0 calc(50% - 50vw);
    background: #d5f2ff;
    clip-path: polygon(0 0%, 100% 2%, 100% 98%, 0 100%); 
    width:100vw;
    padding:100px 0;
}
.best-bg-middle {
    background: #BEECFF;
    clip-path: polygon(0 4%, 100% 0%, 100% 100%, 0 96%); 
    padding:120px 0;
    width:100vw;
}


/*===================================================
PLANTだからこその利点 
===================================================*/
.mainClm3_1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media screen and (max-width:1060px) {
    .mainClm3_1 {
        padding:0 20px;
    }
}
.mainClm3_1 li {
    width:calc((100% - 40px) / 3);
    border:1px solid #dadada;
}
.mainClm3_1 li img {
    width:100%;
    vertical-align: bottom;
}

@media screen and (max-width:640px) {
    .mainClm3_1 {
        display: block;
    }
    .mainClm3_1 li {
        max-width: 350px;
        width:100%;
        margin:0 auto;
    }
}



/*===================================================
さらに便利機能でらくらくお買い物 
===================================================*/
#function {
    margin:0 calc(50% - 50vw);
    padding:0 calc(50vw - 50%);
    background: #D5F2FF;
    clip-path: polygon(0 0%, 100% 3%, 100% 97%, 0 100%); 
    width:100vw;
    padding:100px 0;
} 
.mainClm3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-inline-start: 0px;
}
@media screen and (max-width:1060px) {
    .mainClm3 {
        padding:0 20px;
    }
}
.mainClm3 li {
    width:calc((100% - 60px) / 3);
    margin-top: 60px;
    color: #17A0DA;
    list-style: none;
    position: relative;
}
@media screen and (max-width:640px) {
    .mainClm3 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
    }
    .mainClm3 li {
        max-width:300px;
        width:100%;
        padding: 0.5em 1em;
        margin-top: 60px;
        color: #17A0DA;
        position: relative;
    }
}

.point2 {
    margin-top: 35px;
    width: 100%;
}
/* アニメーション */
.benri-img1,
.benri-img2,
.benri-img3 {
    width:100%;
}
.benri-ani {
    position: relative;
}
.benri-1-1,
.benri-1-2 {
    position:absolute;
    top:20%;
    left:52%;
    width:15%;
}
.benri-1-3 {
    position:absolute;
    top:40%;
    left:70%;
    width:15%;
}

/* 1つめ */
.benri-1-1.active {
    animation:benri-1-1 0.5s linear 1s both;
    z-index: 99;
}
@keyframes benri-1-1 {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.benri-1-2.active {
    animation:benri-1-2 0.5s linear 1s both;
}
@keyframes benri-1-2 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.benri-1-3.active {
    animation: benri-1-3 0.5s linear 0.5s both;
}
@keyframes benri-1-3 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(-40%, -40%);}
}

/* 2つめ */
.benri-2-1,
.benri-2-2 {
    position:absolute;
    top:30%;
    left:65%;
    width:11%;
}
.benri-2-3 {
    position:absolute;
    top:47%;
    left:77%;
    width:15%;
}
.benri-2-1.active {
    animation:benri-2-1 0.5s linear 1s both;
}
@keyframes benri-2-1 {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.benri-2-2.active {
    animation:benri-1-2 0.5s linear 1s both;
}
@keyframes benri-2-2 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.benri-2-3.active {
    animation: benri-1-3 0.5s linear 0.5s both;
}
@keyframes benri-2-3 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(-40%, -40%);}
}

/* 3つめ */
.benri-3-1,
.benri-3-2 {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.benri-3-1.active {
    width:40%;
    animation: benri-3-1 0.5s linear 0.5s both;
}
@keyframes benri-3-1 {
    0% {margin-top:0;}
    100% {margin-top:-30%;}
}
.benri-3-2 {width:70%;}


/*===================================================
よくある質問
===================================================*/
*,
*::after,
*::before {
  box-sizing: border-box;
}
.accordion {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 20px;
  flex-wrap: wrap;

}

/*------------------------------

ここからアコーディオンのCSS

------------------------------*/
/* チェックボックスは非表示 */
.accordion-hidden{
  display: none;
}

/* Question部分 */
.accordion-open {
  display: block;
  background: #fff;
  cursor: pointer;
  margin: 5px 0;
  position: relative;
}

/* 開閉状態を示すアイコン+の作成 */
.accordion-open::before,
.accordion-open::after {
  content: '';
  width: 21px;
  height: 2px;
  background: #17A0DA;
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-300%);
}

/* 一本は縦にして+を作る */
.accordion-open::after {
  transform: translateY(-300%) rotate(90deg);
  transition: .5s;
}

/* QとAのデザイン */
.accordion-open span,
.accordion-close span {
  align-items: center; 
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
}


/* 長い質問の場合、チェックボックスは非表示 */
.accordion-hidden_1 {
    display: none;
  }

  /* 長い質問の場合、Question部分 */
  .accordion-open_1 {
    display: block;
    background: #fff;
    cursor: pointer;
    margin: 5px 0;
    position: relative;
  }
/* 長い質問の場合、開閉状態を示すアイコン+の作成 */
.accordion-open_1::before,
.accordion-open_1::after {
  content: '';
  width: 21px;
  height: 2px;
  background: #17A0DA;
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-300%);
}

/* 長い質問の場合、一本は縦にして+を作る */
.accordion-open_1::after {
  transform: translateY(-300%) rotate(90deg);
  transition: .5s;
}

/* 長い質問の場合、QとAのデザイン */
.accordion-open_1 span,
.accordion-close_1 span {
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
}

.Q_icon {
    max-height: 40px;
    width: auto;
    transform: translatey(11%);
}
.Q_icon_1 {
    max-height: 40px;
    width: auto;
    transform: translatey(-10%);
}
label {
    display: flex;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.question {
    color: #17A0DA;
    align-items: center;
    font-weight: 400;
    border-bottom: dotted 2px #17A0DA;
    padding-bottom: 20px;
    text-align: left;
}
.answer01 {
    color: #17A0DA;
    display: flex;
}
.answer01 p {
    padding-left:40px;
    position: relative;
}
.answer01 p::before {
    content:"A";
    position:absolute;
    top:0;
    left:0;
    width:30px;
    height:30px;
    font-size:35px;
    line-height: 1;
}
h2.answer02 {
    color: #17A0DA;
    font-weight: lighter;
    letter-spacing: 0;
    font-size: 35px;
}
.accordion h5 {
    font-size:16px;
    font-weight: 400;
    text-align: left;
}
.accordion p {
    font-size:16px;
    font-weight: 400;
    text-align: left;
}


.Q_text {
    margin: 0 15px;
    padding: 0 30px; 
    font-size: 16px; 
}

/* アコーディオンが開いたら縦棒を横棒にして-にする */
.accordion-hidden:checked + .accordion-open:after {
  transform: translateY(-300%) rotate(0);
}

/* Answer部分 */
.accordion-close {
  display: block;
  height: 0;/* 要素の高さは0 */
  overflow: hidden;/* 非表示 */
  padding: 0 0 0 60px;
  opacity: 0;
  transition: 0.5s;/* 表示速度の設定 */
  position: relative;
}

/* チェックボックスにチェックが入ったらAnswer部分を表示する */
.accordion-hidden:checked + .accordion-open + .accordion-close {
  height: auto;
  opacity: 1;
  padding: 10px 10px 10px 10px;
  background: #fff;
  font-weight: 700;
}


/* 長い質問の場合、アコーディオンが開いたら縦棒を横棒にして-にする */
.accordion-hidden_1:checked + .accordion-open_1:after {
    transform: translateY(-300%) rotate(0);
  }
  
  /* 長い質問の場合、Answer部分 */
  .accordion-close_1 {
    display: block;
    height: 0;/* 要素の高さは0 */
    overflow: hidden;/* 非表示 */
    padding: 0 0 0 60px;
    opacity: 0;
    transition: 0.5s;/* 表示速度の設定 */
    position: relative;
  }
  
  /* 長い質問の場合、チェックボックスにチェックが入ったらAnswer部分を表示する */
  .accordion-hidden_1:checked + .accordion-open_1 + .accordion-close_1 {
    height: auto;
    opacity: 1;
    
    padding: 10px 10px 10px 10px;
    background: #fff;
    font-weight: 700;
  }


/*===================================================
注意事項
===================================================*/
.orverwidth05 {
    box-shadow: -1020px 0 0 #d5f2ff,
                1020px 0 0 #d5f2ff;
    background: #D5F2FF;
    margin:20px 0;
    padding:20px 30px;
}
.container h4 {
    font-size:22px;
    font-weight: bold;
    margin:10px 0 30px
}
.list {
    flex-wrap: wrap;
    color: #17A0DA;
    list-style: none;
    max-width: 100%;
}
.list li {
    font-family:"Hiragino Sans", "ヒラギノ角ゴシック", "YuGothic", "Meiryo", "sans-serif";
}


/*2022.2.24 追記　*/
.movie_con{
	width: 95%;
	margin: 40px auto 0px;
}
.movie {
  position: relative;
  height: 0;
  margin-bottom: 20px;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*2023/10/6 追記　受け取り*/
p.att{
	text-align: center;
	margin-bottom: 45px;
}
section#uketori {
    padding: 0;
    margin-top: -71px;
}
.uketori_con {
    padding: 60px calc(50vw - 50%) 60px;
    margin: 0 calc(50% - 50vw);
    background: #BEECFF;
    clip-path: polygon(0% 1%, 100% 0%, 100% 100%, 0 97%);
    width: 100vw;
}
@media screen and (max-width:640px) {
	section#uketori {
    padding: 0;
    margin-top: -98px;
}
	.uketori_con {
    clip-path: polygon(0% 2.5%, 100% 0%, 100% 100%, 0 97%);
}
}
ul.uketori {
    margin: 73px auto 0;
    display: block;
}
ul.uketori li {
    width: 83%;
    margin: 0 auto 70px;
    background-color: #fff;
    border-radius: 35px;
    border: solid 3px #17A0DA;
}
.con_ttl {
    background-color: #17A0DA;
    border-radius: 31px 30px 0 0;
    padding: 25px 0;
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}
.box {
    padding: 20px 30px 30px;
}
.con_text {
    margin-bottom: 20px;
	line-height: 1.6;
}
.con_img.no2 {
    width: 92%;
    margin: 0 auto;
}
.con_img.no3 {
    width: 64%;
    margin: 0 auto;
}
.con_text_att {
    text-align: right;
    font-size: 13px;
    margin-top: 10px;
}