<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";

/* COMMON */
h1, h2, h3, h4, h5, h6 {
    text-align: center;
    font-weight: bold;
}
.pcTbOnly {
    display: block;
}
.spOnly--br {
    display: none;
}
.heading_section--primary .title.title--large {
    display: inline-block;
    font-size: 25px;
    letter-spacing: 0.05em;
    background: linear-gradient(transparent 70%, hsl(195deg 100% 50% / 15%) 30%);
}
.heading_section--primary .title--en {
    font-family: 'Roboto Slab', serif;
    color: #000099;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.heading_section--secondary {
    font-size: 20px;
}
.eordergift {
    display: inline-block !important;
    padding: 0 0.25em;
}
.title.title--large strong {
    font-weight: bold !important;
}
.text--center {
    font-size:16px;
    text-align: center;
}
.image--center {
    display: block;
    margin: auto; 
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .l-section .inner {
    padding: 0 4% !important;
    }
    .heading_section--primary .title--en {
    font-size: 16px;
    }    
    .heading_section--primary .title.title--large {
    font-size: 20px;
    }  
    .text--center { 
    font-size: 14px;
    }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .pcTbOnly {
    display: none;
    }
    .spOnly--br {
    display: block;
    }
}


/* RAYOUT */
.l-wrapper {
    padding-top: 40px;
}
.l-wrapper .l-header-wrapper {
    height: 0; 
}
.l-content::before {
    background-image: none;
}
.l-content {
    background-color: #f0fafc;
}
.kv._top+.l-content {
    padding-top: 300px !important;
    margin-top: -200px !important;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .l-wrapper {
    padding-top: 45px;    
    }
    .kv._top+.l-content {
    padding-top: 40px !important;
    margin-top: 50px !important;
    }  
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .kv._top+.l-content {
    padding-top: 30px !important;
    margin-top: 40px !important;
    }    
}


/* HEADER */
.l-header {
    background-color: rgb(255 255 255 / 70%);
}
.l-header .header-global a {
    background-color: rgb(255 255 255 / 70%);
}
.l-header .header-global a:hover {
    background-color: #ffffff !important
}
.l-header .header-global a:before {
    content: "";
    background-image: url(/AOS/user_data/recommend/e-ordergift/images/icon_arrow.png);
}


/* MAIN VISUAL */
.kv._top {
    height: 566px;
    margin-top: 70px;
}
.kv._top .kv-image {
    height: 566px;
    background-image: url(/AOS/user_data/recommend/e-ordergift/images/mainVisual-pc.png?20231211);
    background-position: center;   
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .kv._top .kv-image {
    width: 100%;    
    }    
}    
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .kv._top {
    height: auto;
    margin-top: 0;  
    }
    .kv._top .kv-image {
    height: 363px;
    }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .kv._top {
    height: auto;
    margin-top: 0;
    }
    .kv._top .kv-image {
    height: 302px;
    background-image: url(/AOS/user_data/recommend/e-ordergift/images/mainVisual-sp.png?20231211);
    }
}
/* iPhone5/SE only */
@media screen and (min-width: 1px) and (max-width: 320px) {
    .kv._top .kv-image {
    height: 258px;
    }
}
   

/* INTRODUCTION */ 
.introduction .inner {
    max-width: 1024px;
}
.introduction .text--center {
    font-size: 18px;
    line-height: 2.5em;
    margin-top: 25px;
}
.introduction .image--center {
    width: 600px;
    margin-top: 25px;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .introduction .text--center {
    font-size: 14px;  
    line-height: 2em;
    }
}    
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .introduction img.spOnly {
    display: none;
    }
    .introduction .text--center {
    font-size: 14px;
    line-height: 2em;
    margin-top: 20px;
    }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .introduction .inner {
    margin: 0;
    }

}


/* MESSAGE */
.bnr-message  {
    margin-top: 80px;
    background-color: #fff;
    padding: 50px 0 60px 0;
}
.bnr-message .inner {
    max-width: 1024px;
}
.bnr-message img {
    padding: 0;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .bnr-message {
    padding: 40px 0;
    margin-top: 40px;
    }
    .bnr-message img.spOnly {
    display: none;    
    }  
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .bnr-message {
    padding: 40px 0;
    margin-top: 30px;
    }
    .bnr-message .inner {
    padding: 0 !important;    
    }
    .bnr-message img {
    width: 100%;    
    }
}


/* CAMPAIGN BANNER */
.bnr-campaign {
    background-color: #fff;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-bottom: 80px;
}
.bnr-campaign__p5-pc {
    /* margin-top: 20px; */
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .bnr-campaign img.spOnly {
    display: none;    
    }    
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .bnr-campaign {
    padding-top: 0;
    padding-bottom: 40px;
    /* margin-top: -10px; */
    margin-top: -40px !important;
    margin-bottom: 30px;
    }
    .bnr-campaign .inner {
    padding: 0 !important;    
    }
    .bnr-campaign img.spOnly {
    width: 100%;
    }
    .bnr-campaign__p5-pc {
    display: none;
    }
    .bnr-campaign__p5-sp {
    /* margin-top: 10px; */
    }
}


/* ANCHOR LINK */
.links {
    padding: 100px 0;
}
.links .inner {
    display: block;
    max-width: 1164px;
    margin: 0 auto;
}
.links h2 {
    margin-bottom: 30px;
}
.links__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.links__item {
    margin-top: 1%;
}
.links__item:last-child { 
    margin-right: 0;
}
.links__item a {
    background: #00bfff;
    width: 162px;
    height: 162px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-align: center;
	-ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
	-ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
    flex-direction: column; 
    color: #fff;
    font-size: 15px;
    transform: translate3d(0, 3px, 0);
    box-shadow: 0 0 0 rgb(64 64 60 / 0%);
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
}   
.links__item a::after {
    display: block;
    content: "";
    position: absolute;
    bottom: 20px;
    border-top: 2px solid #fff;
    width: 12px;
    height: 12px;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
}
/*
.links__item a span {
    font-size: 16px;
} */
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .links {
    padding: 60px 0;
    }
    .links h2 {
    margin-bottom: 20px;
    }
    .links__list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    }
    .links__item a::after {
    width: 10px;
    height: 10px;
    bottom: 15px;    
    }
    .links__item a span {
    font-size: 13px;    
    }
}    
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .links__list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    }
    /* .links__list::after {
    display: block;
    content: "";
    width: 110px;
    height: 110px;
    } */
    .links__item {
    margin-top: 3%;
    margin-right: 3%;
    }
    .links__item a {
    width: 150px;
    height: 150px;
    font-size: 14px;
    }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    /* .links__list::after {
    display: block;
    content: "";
    width: 110px;
    height: 110px;
    } */
    .links__item {
    margin-top: 2%;   
    }
    .links__item:nth-child(3n) {
    margin-right: 0;    
    }
    .links__item a {
    width: 110px;
    height: 110px;
    font-size: 12px;
    }
    .links__item a span {
    font-size: 11px;    
    }
}
/* iPhone 5/SE only */ 
@media screen and (min-width: 1px) and (max-width: 320px) {
    .links h2 {
    margin-bottom: 15px;
    }
    .links__list::after {
    display: block;
    content: "";
    width: 140px;
    height: 140px;
    }
    .links__item a {
    width: 140px;
    height: 140px;
    }
    .links__item a::after {
    bottom: 20px;    
    }
}
/* PC only */
@media screen and (min-width: 1024px) {
    .links__list {
    /* -webkit-box-pack: justify;
	-ms-flex-pack: justify;
    justify-content: space-between; */
    } 
    .links__item a:hover {
    box-shadow: 7px 12px 20px rgb(64 64 60 / 15%);
    transition-duration: .5s;
    transform: translate3d(0, 0, 0);
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
    } 
}


/* 3 MERITS */
.merits {
    background-color: #fff;
    padding: 120px 0 90px;
}
.merits .inner {
    max-width: 1164px;
    margin: 0 auto;
}   
.merits__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 40px;
}
.merits__item {
    width: calc(100% / 3);
    text-align: center;
    padding: 20px;
}
.merits__image {
    border-radius: 5px;
    margin-bottom: 25px;
    box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 15%);
}
.merits__title {
    font-size: 20px;
    margin-top: 25px;
}  
.merits__text {
    line-height: 1.8em;
    margin-top: 30px;
}
.merits__text--small {
    margin-top: 10px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .merits {
    padding: 70px 0;
    }
    .merits__list {
    -webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
    flex-direction: column;
    }
    .merits__item {
    display:-webkit-box;
  	display:-ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
    justify-content: space-between; 
    -webkit-box-align: center;
	-ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 6%;
    }
    .merits__item--reverse {
    -webkit-box-orient: horizontal;
  	-webkit-box-direction: reverse;
  	-ms-flex-direction: row-reverse;
    flex-direction: row-reverse;     
    }
    .merits__image {
    margin-bottom: 0;    
    }
    .merits__body {
    display:-webkit-box;
  	display:-ms-flexbox;
    display: flex;  
    -webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
    flex-direction: column; 
    width: calc((100% - 300px) - 20px); 
    }
    .merits__title {
    margin-top: 0;   
    }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .merits {
    padding: 60px 0 40px;    
    }
    .merits__list {
    margin-top: 10px;   
    }
    .merits__item {
    width: 100%;
    padding: 6%;
    }
    .merits__image {
    margin-bottom: 0;    
    }
    .merits__title {
    font-size: 18px;  
    margin-top: 25px;
    }
    .merits__text {
    margin-top: 10px;   
    }
    .merits__text--small {
    font-size: 11px;
    }
}


/* LINEUP */
.l-content .lineup {
    background-color: #b7e1ff;
}    

.l-section.lineup .inner {
    max-width: 100%;
    background-color: #b7e1ff;
    margin: 0 auto;
    padding: 100px 0;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .l-section.lineup .inner {
    padding: 40px 6% !important;
    }
}    

.lineup .heading_section--primary  {
    margin-bottom: 50px;
}
.lineup .heading_section--primary .title.title--large {
    background: linear-gradient(transparent 70%, rgb(255 255 255 / 75%) 30%);
}
.lineup__list {
    max-width: 1024px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
} 
.lineup__item {
    width: 440px;
}
.lineup__item a:hover .lineup__body {
    color:#000099;
}
/* for PC only */
@media screen and (min-width: 1024px) {
    .lineup__item a:hover img {
    opacity: 0.7;    
    }
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .lineup .heading_section--primary {
    margin-bottom: 30px;    
    }
    .lineup__list {
    margin-top: -40px;
    }
    .lineup__item {
    width: 100%; 
    }
}
/* for TABLET */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .lineup__item { 
    /* display:-webkit-box;
    display:-ms-flexbox;    
    display: flex;
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
	-ms-flex-align: center;
    align-items: center; */
    margin-top: 50px;
    } 
    .lineup__item a {
    display: flex;
    justify-content: space-between;
    }
    /* .lineup__item--reverse {
    -webkit-box-orient: horizontal;
  	-webkit-box-direction: reverse;
  	-ms-flex-direction: row-reverse;
    flex-direction: row-reverse;    
    } */   
    .lineup__item--reverse a {
    -webkit-box-orient: horizontal;
  	-webkit-box-direction: reverse;
  	-ms-flex-direction: row-reverse;
    flex-direction: row-reverse;     
    }
    .lineup__image img {
    /* max-width: 350px; */   
    max-width: 300px;
    }
    .lineup__title {
    margin-top: 0;    
    }
}        
@media screen and (min-width: 1px) and (max-width: 767px) {
    .lineup__item {
    width: 100%;  
    margin-top: 40px;  
    }
}
/* PC only */  
@media screen and (min-width: 1024px) {
    .lineup__item a:hover img {
    box-shadow: 7px 12px 20px rgb(64 64 60 / 15%);
    transition-duration: .5s;
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
    }
}
.lineup__image {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin: auto;
}
.lineup__image img {
    width: 100%;
    border-radius: 5px;
} 
.lineup__image.lineup__image--label::before {
    display: block;
    content: "";
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    line-height: 38px;
    border-top: 35px solid #000099;
    border-right: 35px solid transparent;
    border-bottom: 35px solid transparent;
    border-left: 35px solid #000099;
}
.lineup__image--lableTxt {
    position: absolute;
    z-index: 10;
    font-family: 'Roboto Slab', serif;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    top: 13px;
    left: 1px;
    transform: rotate(-45deg);
    letter-spacing: 2px;
}
.lineup__title {
    font-size: 20px;
    margin-top: 30px;
}
.lineup__text {
    margin-top: 10px;
}
.lineup .button_line {
    display: block;
    margin: 60px auto 0;
}
.lineup .button_line:hover {
    background-color: #fff;
    border: 1px solid #fff;
    color: #40403C;
    opacity: 1;
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
}    
.lineup .button_line:hover::before {
    opacity: 1;
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
}    
.lineup .button_line:hover::after {
    opacity: 0;
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .l-content .button_line {
    padding: 18px 4% 18px 5%;
    margin: 20px auto 0;
    }
    .l-content .button_line::before,
    .l-content .button_line::after {
    right: 4%;
    }
}


/* HOW TO */
.l-section.howto {
    padding: 120px 0;
}
.howto .inner {
    max-width: 1164px;
}
.howto__container {
    background-color: #fff;
    border-radius: 15px;
    padding: 50px 35px 80px;
    margin-top: 50px;
}
.heading_section--secondary .howto__heading {
    color: #000099;
    margin-bottom: 40px;
}
.heading_section--secondary .howto__headingNum {
    display: inline-block;
    font-family: 'Roboto Slab', serif;
    font-size: 30px;
    color: #00bfff;
    border-bottom: 2px solid #00bfff;
    margin-bottom: 20px;
}
.howto__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 40px;
}
.howto__item {
    width: calc((100% - 20px) / 3);
}
.howto__figure {
    position: relative;
}
.howto__image {
    display: block;
    box-sizing: border-box;
    border-radius: 5px;
    margin: auto;
    box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 15%);
}
.howto__num {
    position: absolute;
    top: -12px;
    left: 20px;
    width: 60px;
}
.howto__figure::before,
.howto__figure::after {
    display: block;
    position: absolute;
    font-family: 'Roboto Slab', serif;
    color: #fff;
    text-shadow: #000099 1px 1px 5px;
    font-weight: bold;
    z-index: 9;
}
.howto__figure::before {
    content: "Step";
    top: -10px;
    left: 35px;
    font-size: 14px;
}
.howto__figure::after {
    top: 4px;
    left: 37px;
    font-size: 22px;
}
.howto__item:nth-of-type(1) .howto__figure::after {
    content: "01";
}
.howto__item:nth-of-type(2) .howto__figure::after {
    content: "02";
}
.howto__item:nth-of-type(3) .howto__figure::after {
    content: "03";
}
.howto__body {
    margin-top: 25px;
}
.howto__title {
    font-size: 18px;  
}
.howto__text {
    margin-top: 15px;
}
.howto__text--small {
    margin-top: 10px;
}
.howto__arrow {
    text-align: center;
    margin-top: 65px;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .l-section.howto {
    padding: 60px 0;    
    }
    .howto .inner {
    padding: 0 6% !important;
    margin: 0;
    }
    .howto__container {
    padding: 6% 6% 10% 6%;
    margin-top: 30px;
    }
    .howto__list {
    margin-top: -40px;    
    }
    .howto__item {
    width: 100%;
    margin-top: 40px;
    }
    .howto__figure::before {
    left: 28px;   
    }
    .howto__figure::after {
    left: 32px;    
    }
    .howto__num {
    left: 15px;
    } 
    .howto__arrow {
    margin-top: 40px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .howto .inner { 
    padding: 0 4% !important;
    }    
    .howto__item {
    display:-webkit-box;
    display:-ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
    justify-content: space-between; 
    -webkit-box-align: center;
	-ms-flex-align: center;
    align-items: center;
    }  
    .howto__figure {
    width: calc((100% - 50%) - 20px);
    }
    .howto__body {
    width: 50%;
    display: flex;
    flex-direction: column;   
    }
    .howto__title {
    margin-top: 0;
    }
    .howto__list--noTitle .howto__text {
    margin-top: 0;   
    }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .heading_section--secondary .howto__heading {
    margin-bottom: 20px;
    }
    .howto__image {
    width: 100%;
    height: auto;
    }
}


/* RECOMMEND ITEMS */
.l-section.recommendItems {
    padding-top: 0;
    padding-bottom: 0;
}
.recommendItems__introduction {
    background-color: #fff;
    padding: 100px 0;
}
.l-section.recommendItems .inner {
    max-width: 1164px;
    margin: 0 auto;
}
.recommendItems__catalog {
    padding-top: 80px;
    padding-bottom: 100px;
}
.recommendItems__catalog .inner {
    max-width: 1164px;
    margin: 0 auto;
}
.recommendItems .heading_section--items {
    text-align: center;
    margin-bottom: 20px;
}
.recommendItems .heading_section--items .title {
    display: block;
    font-size: 20px;
    font-weight: bold;
}
.recommendItems .heading_section--items .title__catch {
    display: block;
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    letter-spacing: 1px;
}
.recommendItems .heading_section--items .title__catch::before {
    display: block;
    content: "";
    width: 30px;
    height: 2px;
    margin: 10px auto 12px;
}
.recommendItems .text--center {
    padding: 0 15px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.recommendItems .top-lineup-content {
    position: static !important;
}
.l-content .recommendItems  .top-lineup-content .panel {
    margin-top: 0;
}

.l-content .recommendItems .panel--baby.panel&gt;li&gt;a:hover .panel-thumb {
    opacity: 1;
}
.l-content .recommendItems .panel-heading,
.l-content .recommendItems .panel-note {
    transition-duration: unset;
}
.l-content .recommendItems .panel--baby.panel&gt;li&gt;a:hover .panel-heading,
.l-content .recommendItems .panel--baby.panel&gt;li&gt;a:hover .panel-note {
    color: rgba(64, 64, 60, .85);
} 

.l-content .panel--baby.panel._column4-2&gt;li {
    transform: translate3d(0, 3px, 0);
    box-shadow: 0 0 0 rgb(64 64 60 / 0%);
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
}
.l-content .panel&gt;li:nth-child(9),
.l-content .panel&gt;li:nth-child(13) {
    margin-left: 0;
}
.l-content .button_line.button_line--recommend:hover {
    color: #fff;
    border: 1px solid#fff;
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .recommendItems__introduction {
    padding: 50px 0;
    }
    .recommendItems .heading_section--items .title {
    font-size: 18px;
    }
    .recommendItems .heading_section--items .title__catch {
    font-size: 12px;
    }
    .recommendItems .top-lineup-content.is-active {
    padding: 0;
    }
    .l-content .top-lineup-feature {
    margin-top: 20px;    
    }
    .l-content .panel-heading {
    font-size: 13px;
    }
    .l-content .panel-note {
    font-size: 12px;
    }
}
/* for TABLET */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .l-content .panel--baby.panel._column4-2::after {
    display: block;
    content: "";
    width: calc((100% - 4%) / 3);
    margin-left: 10px;
    }
    .l-content .panel--baby.panel._column4-2&gt;li {
    width: calc((100% - 4%) / 3);
    }
    .l-content .panel--baby.panel._column4-2&gt;li:nth-of-type(4),
    .l-content .panel--baby.panel._column4-2&gt;li:nth-of-type(7)  {
    margin-left: 0;
    }
    .l-content .panel&gt;li:nth-child(5) {
    margin-left: 10px;
    }
}
/* PC only */
@media screen and (min-width: 1024px) {
    .l-content .panel--baby.panel._column4-2&gt;li:hover {
    box-shadow: 7px 12px 20px rgb(64 64 60 / 15%);
    transition-duration: .5s;
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
    }
}


/* LINEUP__CATALOG GIFT*/
.recommendItems__catalog .title__catch::before {
    background-color: #00bfff; ;
}
.recommendItems__catalog .title__catch {
    color: #00bfff;
}
.recommendItems__catalog .button_line.button_line--recommend:hover {
    background-color: #00bfff;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .recommendItems__catalog {
    padding: 40px 0 50px
    }
} 

/* LINEUP__GOURMET GIFT*/
.recommendItems__gourmet {
    background-color: #fff4f0;
    padding-top: 80px;
    padding-bottom: 100px;
}
.recommendItems__gourmet .inner {
    max-width: 1164px;
    margin: 0 auto;
}
.recommendItems__gourmet .title__catch::before {
    background-color: #fea281;
}
.recommendItems__gourmet .title__catch {
    color: #fea281;
}
.recommendItems__gourmet .button_line.button_line--recommend:hover {
    background-color: #fea281;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .recommendItems__gourmet {
    padding: 40px 0 50px
    }
}

/* LINEUP__GOODS GIFT*/
.recommendItems__goods {
    background: #fffbee;
    padding-top: 80px;
    padding-bottom: 100px;
}
.recommendItems__goods .inner {
    max-width: 1164px;
    margin: 0 auto;
}
.recommendItems__goods .title__catch::before {
    background-color: #ffc300;
}
.recommendItems__goods .title__catch {
    color: #ffc300;
}
.recommendItems__goods .button_line.button_line--recommend:hover {
    background-color: #ffc300;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .recommendItems__goods {
    padding: 40px 0 50px
    }
}


/* PURPOSE -----*/
.l-content .top-lineup-tabs li.is-active span:after, .l-content .top-lineup-tabs li:hover span:after {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.l-section.purpose {
    padding: 100px 0 120px;
}
.l-section.purpose .inner {
    max-width: 1164px;
    margin: 0 auto;
}
.purpose .text--center {
    margin-top: 30px;
}
.top-lineup.purpose__lineup {
    background-color: inherit;
    padding: 0;
}
.top-lineup.purpose__lineup .inner {
    padding: 0 !important;
}
.top-lineup.purpose__lineup .heading_section--primary {
    margin-bottom: 30px;
}
.purpose__lineup .text--center {
    margin-top: 30px;
}
.purpose__lineup .top-lineup-feature {
    margin-top: 60px;
}
.purpose__lineup .top-lineup-tabs li {
    text-align: center;
}
.purpose__lineup .top-lineup-tabs li:before {
    top: 10%; 
}
.l-content .top-lineup-tabs li span {
    font-size: 16px;
    opacity: 0.7;
    padding: 0 10px 20px;
}
.purpose__lineup .top-lineup-tabs li span:after {
    background-color: #00bfff;
}
.purpose__lineup .top-lineup-tabs__heading {
    display: block;
}
.purpose__lineup .top-lineup-tabs__image {
    display: block;
    width: 150px;
    border: 1px solid rgba(64, 64, 60, .15);
    margin-top: 10px;
}
.purpose__lineup .top-lineup-content .panel {
    margin-bottom: 0;
}
.purpose__lineup .panel--baby.panel&gt;li&gt;a {
    height: auto;
}
.purpose__lineup  .panel--baby.panel&gt;li&gt;a:hover .panel-thumb {
    opacity: 1;
}
.purpose__lineup .panel--baby.panel._column4-2&gt;li a:hover .panel-heading {
    color: rgba(64, 64, 60, .85);
}
.purpose__lineup .panel--baby.panel._column4-2&gt;li a:hover .panel-note {
    color: rgba(64, 64, 60, .85);
}
@media screen and (max-width: 767px) {
    .l-section.purpose {
    padding: 40px 0 50px;   
    }
    .l-content .top-lineup-tabs { 
    padding-bottom: 0;
    }
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .l-section.purpose {
    padding: 50px 0;    
    }
    .l-section.purpose .inner {
    padding: 0 4% !important;
    }
    .top-lineup.purpose__lineup .inner {
    padding: 0 !important;
    }
    .purpose__lineup .top-lineup-feature {
    margin-top: 30px;
    }
    .l-content .top-lineup-tabs li span {
    padding: 0 15px 15px;
    }
    .purpose__lineup .top-lineup-tabs__image {
    width: 120px;    
    }
}
/* PC only */
@media screen and (min-width: 1024px) {
    .purpose__lineup .panel--baby.panel._column4-2&gt;li:hover {
    box-shadow: 7px 12px 20px rgb(64 64 60 / 15%);
    transition-duration: .5s;
    transition: all .4s cubic-bezier(.23, .54, .5, .87);
    }
}
/*----- PURPOSE */


/* PRICES -----*/
.prices {
    background-color: #fff;
    padding: 100px 0;
}
.prices .heading_section--primary .title.title--large {
    background: linear-gradient(transparent 70%, hsl(195deg 100% 50% / 15%) 30%);
}
.prices .inner {
    max-width: 1164px;
    margin: 0 auto;
}
.prices__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}
.prices__item {
    width: calc((100% - 60px) / 4);
    margin-top: 20px;
    margin-right: 20px;
} 
.prices__item:nth-child(4n) {
    margin-right: 0;
}
.prices__item a {
    display: flex;
    width: 100%;
    padding: 15px;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    transition-duration: .4s;
    height: 100%;
    justify-content: center;
    padding: 25px;
    border: 1px solid #00bfff;
    position: relative;
}
.prices__price {
    font-size: 18px;
}
.prices__item a::after {
    display: block;
    content: "";
    position: absolute;
    right: 20px;
    bottom: 32px;
    border-top: 2px solid #00bfff;
    width: 10px;
    height: 10px;
    border-right: 2px solid #00bfff;
    transform: rotate(45deg);
}
.prices__item a:hover {
    background-color: #00bfff;
    color: #fff;
}
.prices__item a:hover::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .prices {
    padding: 50px 0;   
    }
    .prices .inner {
    padding: 0 4% !important;
    }
    .prices__list {
    justify-content: space-between;    
    }
    .prices__item a {
    justify-content: flex-start; 
    height: 80px;
    padding: 15px 20px 15px 15px    
    }
    .prices__item a::after {
    width: 8px;
    height: 8px; 
    right: 15px;  
    bottom: 34px 
    }
    .prices__price {
    font-size: 12px;
    }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .prices__item {
    width: calc((100% - 5%) / 2);
    margin-top: 5%;
    margin-right: 0;
    }
}
/*----- PRICES */


/* LINEUP SECOND */
.l-section.lineup.lineup--bottom {
    background-color: #fff;
    padding: 100px 0;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .l-section.lineup.lineup--bottom {
    padding: 50px 0;
    }
}


/* FAQ */
.l-section.faq {
    padding: 120px 0 60px;
}    
.l-section.faq .inner {
    max-width: 970px;
    margin: 0 auto;
}
.faq h2 {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}    
.faq h2 img {
    display: block;
    margin: 0 auto 25px;
}
.qAndA {
    border-top: 1px solid #dcdcd9;
    padding: 80px 10px;
}

.qAndA:first-of-type {
    border-top: none;
}
.qAndA_q,
.qAndA_a {
    padding-left: 70px;
}
.qAndA_q {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding-top: 5px;
} 
.qAndA_q::before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    content: "Q";
    width: 45px;
    height: 45px;
    background-color: #00bfff;
    border-radius: 50%;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    color: #ffffff;
    font-size: 30px;
    font-weight: bold;
    line-height: 45px;
}   
.qAndA_q.js-accordion_button &gt; .toggle-icon {
    display: none;
}
.qAndA_a { 
    position: relative;
    font-size: 16px;
    padding-top: 5px;
    margin-top: 35px;
}    
.qAndA_a::before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    content: "A";
    width: 45px;
    height: 45px;
    background-color: #fff;
    border-radius: 50%;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    color: #00bfff;
    font-size: 30px;
    font-weight: bold;
    line-height: 45px;
}  
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .l-section.faq {
    padding: 50px 0 30px;
    }
    .faq h2 {
    font-size: 18px;    
    }
    .faq h2 img {
    width: 86px;  
    margin: 0 auto 15px;      
    }
    .qAndA { 
    padding: 35px 10px;
    margin: 0;
    }
    .qAndA_a {
    margin-top: 25px;    
    }
    .qAndA_q,
    .qAndA_a {
    padding-left: 40px;
    padding-right: 10px;
    }
    .qAndA_q::before,
    .qAndA_a::before {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 26px;
    }

    /* BUTTON - OPEN/CLOSE  */
    .qAndA_q {
    position: relative;
    padding-right: 30px;
    font-size: 16px;
    }
    .qAndA_q.js-accordion_button &gt; .toggle-icon {
    display: block;
    }
    .qAndA_q.js-accordion_button &gt; .toggle-icon:before,
    .qAndA_q.js-accordion_button &gt; .toggle-icon:after {
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    background-color: #40403C;
    position: absolute;
    right: 0;
    transform: translate(-50%, -50%);
    transform-origin: center;
    }
    .qAndA_q.js-accordion_button &gt; .toggle-icon:before {
    top: 16px;
    }
    .qAndA_q.js-accordion_button &gt; .toggle-icon:after {
    transform: rotate(90deg) translate(-50%, -50%);
    right: 9px;
    top: 23px;
    transition-duration: .4s;  
    }
    .qAndA_q.js-accordion_button.is-open .toggle-icon::before {
    opacity: 1;   
    }
    .qAndA_q.js-accordion_button.is-open .toggle-icon::after {
    opacity: 0; 
    }    
}



/****** button for back to top ******/
body {
	position: relative;
}
#js-pageTop {
	padding: 0;
	border: none;
	position: fixed;
	z-index: 10;
	right: 4%;
	bottom: 6%;
	width: 44px;
	height: 44px;
}
#js-pageTop:hover {
	opacity: 1;
}
#js-pageTop a {
	display: inline-block;
	width: 100%;
	height: 100%;
	position: relative;
}
#js-pageTop span {
	position: absolute;
	top: 20px;
	left: 18px;
	width: 15px;
	height: 15px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-45deg);
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
	#js-pageTop {
    right: 4%;
    bottom: 7%;
	width: 44px;
	height: 44px;
	}
	#js-pageTop span {
	top: 25px;
    left: 22px;
    width: 16px;
    height: 16px
	}
}


/* FOOTER */
.l-footer {
    background-color: #00bfff;
    padding: 80px 15%;
}
.l-footer .footer-banner {
    margin: 0;
}
@media screen and (min-width: 1px) and (max-width: 1023px) {
    .l-footer {
    padding: 40px 0 80px;    
    }
    .l-footer .footer-summary {
    margin: 30px auto 40px;    
    }
    .l-footer .footer-sns {
    margin-top: 40px 0 !important;   
    }
    .l-footer .footer-sns li img {
    width: 100%;
    }
    .l-footer .footer-banner {
    margin: 0 auto;
    }
}</pre></body></html>