@charset "UTF-8";

/* Common */
.ataru_page .wavy {
    inline-size: 402rem;
    margin: 15rem auto;
}

.text-sm{
    font-size: 16rem;
}

.text-xs{
    font-size: 14rem;
}

.care_title {
    font-size: 23rem;
    color: #009BBA;
    font-weight: bold;
}

.pt-1{
    padding-top: 10rem;
}
.pt-5{
    padding-top: 50rem;
}
.pb-1{
    padding-bottom: 10rem;
}
.pb-2{
    padding-bottom: 20rem;
}
.pb-5{
    padding-bottom: 50rem;
}

/* Animation */
@keyframes anim_opct0-1 {
    0% {
        position: relative;
        opacity: 0;
        top: 50rem;
    }
    /* 80% {
        opacity: .5;
        top: 0rem;
    } */
    100% {
        opacity: 1;
        top: 0;
    }
}
.anim_open_0 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1000ms 1 forwards;
}
.anim_open_1 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1100ms 1 forwards;
}
.anim_open_2 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1200ms 1 forwards;
}
.anim_open_3 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1300ms 1 forwards;
}
.anim_open_4 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1400ms 1 forwards;
}
.anim_open_5 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1500ms 1 forwards;
}
.anim_open_6 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1600ms 1 forwards;
}
.anim_open_7 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1700ms 1 forwards;
}
.anim_open_8 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1800ms 1 forwards;
}
.anim_open_9 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 1900ms 1 forwards;
}
.anim_open_10 {
    opacity: 0;
    animation: anim_opct0-1 600ms cubic-bezier(0.155, 0.335, 0.005, 1.000) 2000ms 1 forwards;
}

/* Main */
.ataru_page #mainv {
    position: relative;
}

.ataru_page #mainv #myp_box {
	inline-size: 146rem;
	position: absolute;
	inset-inline-end: -20rem;
	inset-block-start: 483rem;
	padding-block-end: 20rem;
}

@media screen and (max-width: 500px) {
  .ataru_page #mainv #myp_box {
    display: block;
  }
.ataru_page #mainv #myp_box.fixed {
	position: fixed;
  z-index: 1;
	inset-inline-end: -20rem;
	inset-block-start: auto;
	inset-block-end: 100rem;
}
}


.ataru_page #mainv .title {
    inline-size: 440rem;
    position: absolute;
    inset-inline-start: 30rem;
    inset-block-start: 30rem;
}


.ataru_page #mainv .shape {
    position: absolute;
}


.ataru_page #mainv .anim1,
.ataru_page #mainv .anim2 {
    inline-size: 500rem;
    inset-inline-start: 0rem;
    inset-block-start: 140rem;
}


.ataru_page #mainv .exp {
    inline-size: 400rem;
    position: absolute;
    inset-inline-start: 30rem;
    inset-block-end: 30rem;
    width: 320rem;
    font-size: 17.3rem;
    line-height: 25rem;
    letter-spacing: 1.2rem;
    font-weight: 500;
    margin: 28rem auto 0 auto!important;
}

.ataru_page #mainv .event {
    font-weight: 700;
    inline-size: 400rem;
    position: absolute;
    inset-inline-start: 50rem;
    inset-block-start: 670rem;
    font-size: 18rem;
    line-height: 25rem;
    letter-spacing: 1.2rem;
    margin: 28rem auto 0 auto!important;
}
.ataru_page #mainv .event p {
    font-size: 18.6rem;
    letter-spacing: .3rem;
}
.ataru_page #mainv .event ul {
    font-size: 18rem;
    line-height: 25rem;
    letter-spacing: 0rem;
}
.ataru_page #mainv .event ul li {
  position: relative;
  padding-inline-start: 10rem;
  margin-top: 10rem;
  border-left: 4rem solid;
}
.ataru_page #mainv .event ul li a {
  text-decoration: underline;
}
.ataru_page #mainv .event ul li:first-child {
  border-left-color: #e64491;
}
.ataru_page #mainv .event ul li:nth-child(2) {
  border-left-color: #009fe8;
}
.ataru_page #mainv .event ul li:nth-child(3) {
  border-left-color: #32a100;
}
.ataru_page #mainv .event ul li:first-child a {
  color: #e64491;
}
.ataru_page #mainv .event ul li:nth-child(2) a {
  color: #009fe8;
}
.ataru_page #mainv .event ul li:nth-child(3) a {
  color: #32a100;
}

.ataru_page #mainv .main_btn {
    inline-size: 400rem;
    position: absolute;
    inset-inline-start: 50rem;
    inset-block-end: 60rem;
    font-size: 18rem;
    line-height: 25rem;
    letter-spacing: 3rem;
}

.ataru_page #mainv .main_btn a {
    inline-size: 370rem;
    block-size: 56rem;
}

.ataru_page #mainv .main_btn a::before {
    inline-size: 370rem;
    block-size: 50rem;
    background-color: #0a1232;
    border-radius: 16rem;
}

.ataru_page #mainv .main_btn a span {
    inline-size: 370rem;
    block-size: 50rem;
    background-color: #e4007f;
    border: 4rem solid #0a1232;
    border-radius: 16rem;
    justify-content: center;
    align-items: center;
}

.ataru_page #mainv .main_btn a span img {
    inline-size: 231rem;
}



/* Point */
.ataru_page #point {
    position: relative;
    background-color: #fff100;
    padding-top: 50rem;
    padding-bottom: 60rem;
}

#point_slider {
    background-color: #fff100;
}
#point_slider .point-slider {
    block-size: 400rem;
    overflow: hidden;
    background: #FFF;
}

#point .push-btn.push-btn1{
    background-color: #fff100;
}


.ataru_page #point .description{
    inline-size: 378rem;
    margin: 0 auto;
}

.ataru_page #point h2{
    inline-size: 235rem;
    margin: 0 auto;
}

.ataru_page #point .point-row{
    height: 100rem;
    padding-top: 10rem;
}

.ataru_page #point .point-row .row1{
    position: absolute;
    inset-inline-start: 65rem;
    font-size: 18rem;
    padding-top: 10rem;
}
.ataru_page #point .point-row .row2{
    inline-size: 102rem;
    position: absolute;
    inset-inline-end: 50rem;
}

#prize .push-btn a:hover .front {
    inset-inline-start: 6rem;
    inset-block-start: 6rem;
}

/* Prize */
.ataru_page #prize {
    position: relative;
    background-color: #00b5e7;
    padding-top: 50rem;
    padding-bottom: 60rem;
}
.ataru_page #prize h2{
    inline-size: 260rem;
    margin: 0 auto 30rem auto;
}
.ataru_page #prize .exp {
    text-align: center;
}
.ataru_page #prize .note {
    text-align: left;
    margin: 10rem auto 0 auto;
    inline-size: 440rem;
    font-size: 14.6rem;
    line-height: 21.3rem;
    font-weight: 500;
    letter-spacing: .0em;
}
ul.prize_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0rem;
    margin: 0 10rem 0 30rem;
}
ul.prize_list li {
    inline-size: 230rem;
}
ul.prize_list li:first-child {
    inline-size: 460rem;
}

#prize .push-btn {
    text-align: center;
    padding-block-start: 23rem;
}
#prize .push-btn a {
    display: inline-block;
    position: relative;
    inline-size: 403rem;
    block-size: 56rem;
}
#prize .push-btn a::before {
    content: "";
    display: block;
    position: absolute;
    inset-block-end: 0;
    inline-size: 397rem;
    block-size: 50rem;
    background-color: #0a1232;
    border-radius: 16rem;
}
#prize .push-btn .front {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    inline-size: 397rem;
    block-size: 50rem;
    background-color: #e4007f;
    border: 3rem solid #0a1232;
    border-radius: 16rem;
}

#prize .push-btn .front img {
    inline-size: 265rem;
}
#prize .push-btn a:hover .front {
    inset-inline-start: 6rem;
    inset-block-start: 6rem;
}
#prize .sponcer {
    width: 420rem;
    margin: 30rem auto 0 auto;
}
#prize .schedule{
    width: 420rem;
    margin: 30rem auto 0 auto;
}

/* Button */
.ataru_page #mainv .anc_map {
    inline-size: 55rem;
    position: absolute;
    inset-inline-end: 60rem;
    inset-block-start: 150rem;
}
.aroma_link .circle_btn {
    position: absolute;
    inset-inline-end: 35rem;
    inset-block-start: 15rem;
}

.circle_btn a {
    position: relative;
    display: block;
    width: 55rem;
    height: 57rem;
}
.circle_btn a::before {
    content: "";
    display: block;
    background-color: #0a132f;
    width: 53rem;
    height: 54rem;
    border-radius: 50%;
    position: absolute;
    right: 1rem;
    bottom: 0rem;
}
.circle_btn a img {
    width: 55rem;
    height: 54rem;
    position: relative;
}

.circle_btn a:hover img {
    top: 3rem;
}

.ataru_page .push-btn {
    text-align: center;
}
.ataru_page .push-btn a {
    display: inline-block;
    position: relative;
}
.ataru_page .push-btn a::before {
    content: "";
    display: block;
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
}

.ataru_page #prize .push-btn a::before {
    content: "";
    display: block;
    position: absolute;
    inset-block-end: 0;
    inline-size: 397rem;
    block-size: 50rem;
    background-color: #0a1232;
    border-radius: 16rem;
}

.ataru_page .push-btn .front {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}




.ataru_page #mainv .push-btn a:hover .front {
    inset-block-start: 6rem;
}



.ataru_page #point .point-row .row1 {
    position: absolute;
    inset-inline-start: 65rem;
    font-size: 18rem;
    padding-top: 10rem;
}


.ataru_page #activity,
.ataru_page #try {
    position: relative;
    /*padding-bottom: 50rem;*/
}

.ataru_page #evnet h2,
.ataru_page #try h2{
    inline-size: 348rem;
    margin: 0 auto 40rem auto;
}

.ataru_page .exp {
    font-size: 17rem;
    line-height: 28rem;
    letter-spacing: 2rem;
    margin: 28rem auto 0 auto;
}

/* .ataru_page #activity #healthy_beauty_lesson .care-row {
    padding-top: 10rem;
} */

.column1 {
    height: 50rem;
}

.column2 {
    height: 70rem;
}

.column3 {
    height: 50rem;
}

.care-row .row2{
    inline-size: 300rem;
    position: absolute;
    inset-inline-start: 160rem;
    font-size: 18rem;
}

.care-aroma-note1 {
    inline-size: 390rem;
    inset-inline-start: 18rem;
    line-height: 20rem;
    letter-spacing: 2rem;
    margin: 0 auto;
}


.link_wrap {
    margin-top: 50rem;
}

.thumbnail {
    inline-size: 400rem;
    margin: 0 auto;
}

#total_beauty .exp {
    padding-top: 20rem;
}

.care_title {
    inset-inline-start: 50rem;
}


.ataru_page #map {
    padding-top: 54rem;
    padding-bottom: 55rem;
    background-color: #00a0e9;
}

.ataru_page #map h2{
    padding-top: 20rem;
    inline-size: 98rem;
    margin: 0 auto 30rem auto;
}
.ataru_page #map > .map {
    width: 408rem;
    height: 268rem;
    border: 4rem solid #0a132f;
    border-radius: 10rem;
    overflow: hidden;
    margin: 28rem auto 0;
}

.experience:nth-child(odd) {
  background-color: #FFFFC6;
}
.experience:nth-child(even) {
  background-color: #DBEA94;
}


#renkei01 {
  background-color: #e64491;
}
#renkei02 {
  background-color: #009fe8;
}
#renkei03 {
  background-color: #32a100;
}

.wrapper {
    width: 84%;
    max-width: 420px;
    margin: auto;
    padding: 50rem 0;
}

.renkei .wrapper {
  color: #FFF
}

.wrapper h2 {
  text-align: center;
  margin: 20rem auto 40rem auto;
}

#healthy_beauty_lesson .detail {
    width: 85.5%;
}

.ataru_page .wavy {
    margin: 20rem auto;
}

.push-btn {
    margin-top: 40rem;
    padding-block-start: initial!important;
}

.wrapper .place {
  display: flex;
  align-items: flex-start;
  gap: 10rem;
  margin: 35rem auto 25rem;
  width: 406rem;
}
.wrapper .place .row1 {
  font-size: 13.7rem;
  line-height: 24rem;
  padding-top: 0rem;
  inline-size: 50rem;
  text-align: center;
  border: 2rem solid #000333;
  border-radius: 2rem;
  background: #FFF;
  color: #000;
}

.wrapper .place .row2 {
  inline-size: 350rem;
  font-size: 18.6rem;
  line-height: 24rem;
}

.wrapper .exp {
  width: 400rem;
  font-size: 17.3rem;
  line-height: 28.6rem;
  letter-spacing: .08em;
  margin: 0 auto;
  font-weight: 500;
}
.wrapper .note {
  width: 400rem;
  font-size: 14.6rem;
  line-height: 21.3rem;
  font-weight: 500;
  letter-spacing: .08em;
  margin: 10rem auto 0;
}

.wrapper hr {
  height: 0;
  padding: 0;
  border: 0;
  width: 400rem;
  margin: 40rem auto;
  border-top: #000 1.333em solid;
}

.link {
  position: relative;
  margin: 0 auto;
  width: 404rem;
  border: 2.67rem solid #000333;
  border-radius: 13.5rem;
  background: #fff100;
  padding: 15rem;
}

.renkei .link {
  color: #000;
  background: #FFF;
}

.link .btn_home a {
  position: absolute;
  top: 15rem;
  right: 15rem;
}

.link .name {
  font-size: 17.3rem;
  line-height: 28.6rem;
  font-weight: 700;
  height: 55rem;
  display: flex;
  align-items: center;
  letter-spacing: .1em;
}
.link .exp {
  font-size: 16rem;
  line-height: 25.3rem;
  letter-spacing: .1em;
  margin-top: 20rem;
  font-weight: 500;
  width: 100%;
}

.link .logo {
  display: block;
  margin: 25rem auto;
  text-align: center;
}
.link .logo img {
  height: 105rem;
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 10rem;
  margin: 0 auto 15rem;
  width: 406rem;
}


.row .row1 {
  font-size: 17rem;
  padding-top: 0rem;
  inline-size: 100rem;
  text-align: center;
  border: 2rem solid #000333;
  border-radius: 2rem;
}

.row .row2 {
    inline-size: 300rem;
    font-size: 18rem;
}

.second_circle_btn a {
    top: 410rem;
}

.bg_yellow .row1 {
    background-color: #FFF100;
}

.bg_green .row1 {
    background-color: #C5DD51;
}

#experience .day_place {
    margin-top: -20rem;
}

#proging .day_place {
    margin-top: -20rem;
}

#prize #experience04 .front img {
    inline-size: 316rem;
}

#prize #proging .front img {
    inline-size: 213rem;
}

#prize #experience12 .front img {
    inline-size: 344rem;
}


#mizuno .wrapper {
    padding-top: 0;
}

#experience12 .push-btn {
    margin-top: 20rem;
}

#pop_sch_achikochi.pop_item .pop_close .front {
    background-color: #FFF100;
}

#training .link_wrap,
#training .link,
#inbody .link_wrap,
#inbody .link,
#mizuno .link_wrap,
#mizuno .link {
    margin-top: 30rem;
}

#proging .link a {
    top: 25rem;
}

#proging .second_circle_btn a {
    top: 410rem;
}

#mainv .circle_btn a:hover img {
    transform: translateY(3rem);
}