@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;}
  }

html,
body {
    width: 100%;
    font-family:"Hiragino Sans", "ヒラギノ角ゴシック", "YuGothic", "Meiryo", "sans-serif";
}
body {
    overflow-x: hidden;
    background:#fff;
}
main {
    overflow-x: hidden;
}
#footer {background:#17A0DA;}
#body-inside {
    overflow-x: hidden;
}
/* ヘッダーを非表示 */
header {display: none;}
#maincantents .contents {
    margin:0;
}
/* ヘッダー非表示end */

.topimage {
    width: auto;
    max-height: 400px;
    background-color: #17A0DA;
    justify-content: center;
    border-bottom: 2px #17BEF5;
}
.xxx {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.top {
    overflow: hidden;
}
.pc {display: block;}
.sp {display: none;}


/* topimage */
.arc{
    background:url(../../images/pickup_lp/MV_ill_city.png) no-repeat bottom center #17A0DA ;
    height:540px;
    border-bottom:2px solid #8dd6f5;
    padding-top:120px;
    position: relative;
}
.top-slide {
    width:100%;
    height:100px;
    position: relative;
    display:flex;
    justify-content: center;
    align-items: center;
}
.top-slide-ani1 {
    max-width:2950px;
    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:100px;
}
.logotype {
    width:340px;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top:100px;
}
.logotype img {
    width:100%;
    vertical-align: bottom;
}
.top-visual-wrap {
    position:relative;
}
.catchcopy {
    width:260px;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top:90px;
}

.catchcopy img {
    width:100%;
    vertical-align: bottom;
}
.photo-wrap {
    max-width:1020px;
    width:100%;
    height:320px;
    margin:0 auto;
    position: relative;
}
.top-photo1 {
    width:220px;
    position:absolute;
    left:0px;
    top:0;
}
.top-photo1 img {
    width:100%;
    vertical-align: bottom;
}
.top-photo2 {
    width:220px;
    position:absolute;
    right:0px;
    top:0;
}
.top-photo2 img {
    width:100%;
    vertical-align: bottom;
}
.car-wrap {
    max-width: 650px;
    width: 100%;
    height: 300px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.car {
    position:absolute;
    bottom:0;
    left:0;
    animation: car 8s linear infinite;
}
@keyframes car {
    0% {transform: translateX(0);}
    45% {transform: translateX(600px);}
    50% {transform: translateX(600px) rotateY(180deg);}
    95% {transform: translateX(0) rotateY(180deg);}
    100% {transform: rotateY(0deg);}
}


@media screen and (max-width:1020px) {
    .arc{
        background-size:800px;
    }
    .photo-wrap {
        max-width:900px;
        width:100%;
    }
    .top-photo1 {
        width:200px;
        position:absolute;
        left:-20px;
        top:20px;
    }
    .top-photo2 {
        width:200px;
        position:absolute;
        right:-20px;
        top:20px;
    }
    .car-wrap {
        max-width: 540px;
    }
    @keyframes car {
        0% {transform: translateX(0);}
        45% {transform: translateX(480px);}
        50% {transform: translateX(480px) rotateY(180deg);}
        95% {transform: translateX(0) rotateY(180deg);}
        100% {transform: rotateY(0deg);}
    }    
}

/* topimage end */


/* 大枠 */
.wrapper {
    justify-content: center;
    max-width: 1020px;
    
}
section {
    max-width: 1020px;
    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", "ヒラギノ角ゴシック", "YuGothic", "Meiryo", "sans-serif";
}

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

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

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

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


.ilst {
    text-align: center;
    align-items: center;
}

.ilst1_1 {
    width: auto;
    max-height: 100px;
}

.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", "ヒラギノ角ゴシック", "YuGothic", "Meiryo", "sans-serif";
    font-weight: normal;
}
.numbers {
    transform: translateY(5px);
}
.point-wrap {
    background:url(../../images/pickup_lp/top_bg.png) no-repeat top center / contain;
}
.mainClm4 {
    display: flex;
    flex-wrap: wrap;
    align-items: top;
    margin-bottom: 30px;
    justify-content: space-between;
}
.mainClm4 li {
    width:calc((100% - 60px) / 4);
    padding:1em;
    color: #17A0DA;
    background: #FFF;
    border: solid 4px #17A0DA;
    border-radius: 20px;
    position: relative;
}
.mainClm4 li .icon {
    position: absolute;
    top: -30px;
    left:50%;
    transform: translateX(-50%);
}
.hlA {
    margin: 1rem 0 30px 0;
    text-align: center;
}
.hlA_1 {
    margin: 1rem 0 0 0;
    text-align: center;
}
p.att{
	text-align: center;
}
.QRLINK {
    margin: 50px auto 0;
    max-width: 860px;
    display: flex;
}
.QRLINK_sp {
    display: none
}
.QRLINK > div:first-of-type {
    flex:1;
    max-height:100px;
}
.btn_PC_link {
    background: #17A0DA;
    display: block;
    width:100%;
    border-radius: 50px;
    height:100%;
    padding:20px;
    text-align: center;
    transition: background .3s;
    border: 2px solid #fff;
    box-shadow: 0 3px #0F7DAC;
}
.btn_PC_link:hover { 
    background: #17BEF5;
    opacity: 1;
} 
.btn_PC_link img {
    width: 100%;
}
.btn_SP_link .btn_sp {
    display: none;
}
.QR {
    width:253px;
    margin-left:20px;
}
.QR img {
    width:100%;
}


/*===================================================
タイトル
===================================================*/

.title {
    display: flex;
    justify-content: center;
}

.line {
    color: #17A0DA;
    margin: 100px 0 50px;
    text-align: center;
    border-bottom: solid 3px #17A0DA;
    letter-spacing:0.1em;
}
.line2 {
    color: #17A0DA;
    margin-top: 100px;
    text-align: center;
    border-bottom: solid 3px #17A0DA;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

.subtitle_pc {
    color: #17A0DA;
    text-align: center;
    margin: 0;
    
}
.subtitle_sp {
    color: #17A0DA;
    text-align: center;
    margin: 0;
    display: none;
}


/*===================================================
こんなあなたに最適
===================================================*/

.title01 {
    width:100%;
    display: flex;
    justify-content: center;
}
.title02 {
    display: flex;
    justify-content: center;
}
.interview {
    text-align: center;
    display: inline;
    color: #17A0DA;
    margin-top: 16px;
    border-bottom: dashed 3px #fff;
}
.sample {
    margin-bottom: 50px;
    margin: 0;
}
.sample-inner {
    /* display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center; */
    text-align: center;
}
.sample-inner > div {
    display: inline-block;
    vertical-align: middle;
}
.sample-inner img {
    width:100%;
}
.box01 {
    max-width: 390px;
}
.box02_pc {
    max-width: 129px;
}
.box02_sp {
    display: none !important;
}
.box03 {
    max-width: 350px;
}
.box04_pc {
    max-width: 16px;
}
.box04_sp {
    display: none !important;
}
.box05 {
    max-width: 440px;
}
.tablet {
    display: none;
}
@media screen and (min-width:769px) and (max-width:1380px) {
    .tablet {
        display: block;
    }
}

#best {
    margin:0 calc(50% - 50vw);
    background: #D5F2FF;
    clip-path: polygon(0 0%, 100% 5%, 100% 95%, 0 100%); 
    width:100vw;
    padding:120px 0;
}
.best-bg-middle {
    background: #BEECFF;
    clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0 90%); 
    padding:120px 0;
}



/*===================================================
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;
}



/*===================================================
さらに便利機能でらくらくお買い物 
===================================================*/
#function {
    margin: 0 calc(50% - 50vw);
    padding: 60px calc(50vw - 50%) 170px;
    background: #D5F2FF;
    clip-path: polygon(0 0%, 100% 14%, 100% 88%, 0 100%);
    width: 100vw;
}
.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;
}
.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 1.5s both;
}
@keyframes benri-2-1 {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.benri-2-2.active {
    animation:benri-1-2 0.5s linear 1.5s both;
}
@keyframes benri-2-2 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.benri-2-3.active {
    animation: benri-1-3 0.5s linear 1s 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 1.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 199px;
  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(-100%);
}

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

/* QとAのデザイン */
.accordion-open span,
.accordion-close span {
  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(-400%);
}

/* 長い質問の場合、一本は縦にして+を作る */
.accordion-open_1::after {
  transform: translateY(-400%) 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: 50px;
    width: auto;
    transform: translatey(8%);
}
.Q_icon_1 {
    max-height: 50px;
    width: auto;
    transform: translatey(-16%);
}
label {
    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 p {
    font-size:16px;
    font-weight: 400;
    text-align: left;
}
.Q_text {
    margin: 0 15px;
    padding: 0 43px;  
}

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

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

/* チェックボックスにチェックが入ったら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(-400%) rotate(0);
  }
  
  /* 長い質問の場合、Answer部分 */
  .accordion-close_1 {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0 0 0 60px;
    opacity: 0;
    transition: 0.5s;
    position: relative;
    margin-left: 50px;
  }
  
  /* 長い質問の場合、チェックボックスにチェックが入ったら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 {
    max-width: 1020px;
}

.list {
    color: #17A0DA;
    list-style: none;
    max-width: 1020px;
    
}



/*2022.2.24 追記　*/
.movie_con{
    display: flex;
    margin: 50px auto 0px;
    justify-content: space-between;
    align-items: flex-start;
	width: 90%;
  }
.movie_in{
    flex-basis: 48%;
  }
.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%;
}
/*2022.2.24 追記　END*/

/*2023/10/6 追記　受け取り方法*/
section#uketori{
	padding: 0;
    margin-top: -165px;
}
.uketori_con{
	padding: 60px calc(50vw - 50%) 170px;
    margin: 0 calc(50% - 50vw);
    background: #BEECFF;
    clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0 93%);
    width: 100vw;
}
ul.uketori{
	margin-top: 83px;
    display: flex;
    justify-content: space-between;
	padding: 0 10px;
}
ul.uketori li{
	width: calc((100% - 30px) / 3 );
    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: 28px;
    font-weight: bold;
    text-align: center;
}
.box {
    padding: 20px 30px 20px;
}
.con_text {
    margin: 0px auto 20px;
    height: 76.5px;
	line-height: 1.6;
}
.con_img {
    margin: 0 auto;
}
.con_img.no1 {width: 100%;}
.con_img.no2 {width: 87%;}
.con_img.no3 {width: 65%;}
.con_img img {
    width: 100%;
}
.con_text_att {
    font-size: 13px;
    text-align: right;
    margin-top: 10px;
}
/*2023/10/6 追記　受け取り方法　END*/