@charset "utf-8";

*,*::before,*::after{box-sizing:border-box;}
* { margin: 0;}
html{font-size:62.5%;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none; scroll-behavior: smooth; scrollbar-gutter: stable;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;}
ul[role='list'],ol[role='list']{list-style:none;}
body{min-height:100vh;-webkit-font-smoothing: antialiased;}
h1,h2,h3,h4,button,input,label{line-height:1.1;}
h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor;}

img,picture{max-width:100%;display:block;}
input,button,textarea,select{font:inherit;}
textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex;}

:where(ul,dl,ol,li,dt,dd,p){margin:0;padding:0;}
:where(ol,ul,menu){list-style:none;}
:where(em,address){ font-style: normal;}

html:focus-within { scroll-behavior: smooth;}
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth;}}

details > summary {
  list-style: none;
  cursor: pointer;
  display: block;
  outline: none;
}

details summary::-webkit-details-marker { display: none;}


:root {
  --ravio-fs-xxs: 1rem;
  --ravio-fs-xs: min(max(1rem, calc(1rem + ((1vw - 0.48rem) * 0.3846))), 1.2rem);
  --ravio-fs-s: min(max(1.2rem, calc(1.2rem + ((1vw - 0.48rem) * 0.3846))), 1.4rem);
  --ravio-fs-m: min(max(1.4rem, calc(1.4rem + ((1vw - 0.48rem) * 0.3846))), 1.6rem);
  --ravio-fs-ml: min(max(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 0.3846))), 1.8rem);
  --ravio-fs-l: min(max(1.8rem, calc(1.8rem + ((1vw - 0.48rem) * 0.3846))), 2rem);
  --ravio-fs-xl: min(max(2rem, calc(2rem + ((1vw - 0.48rem) * 0.7692))), 2.4rem);
  --ravio-fs-xxl: min(max(2.4rem, calc(2.4rem + ((1vw - 0.48rem) * 0.7692))), 2.8rem);
  --ravio-fs-exs: min(max(2.6rem, calc(2.6rem + ((1vw - 0.48rem) * 0.7692))), 3rem);
  --ravio-fs-exm: min(max(3rem, calc(3rem + ((1vw - 0.48rem) * 0.7692))), 3.4rem);
  --ravio-fs-exl: min(max(3.4rem, calc(3.4rem + ((1vw - 0.48rem) * 0.7692))), 3.8rem);

  --ravio-fs-12: 1.2rem;
  --ravio-fs-14: 1.4rem;
  --ravio-fs-16: 1.6rem;
  --ravio-fs-18: 1.8rem;

  --ravio-fw-nomal: 400;
  --ravio-fw-bold: 500;

  --ravio-lh-none: none;
  --ravio-lh-xs: 1.2;
  --ravio-lh-s: 1.4;
  --ravio-lh-m: 1.6;
  --ravio-lh-l: 1.8;
  --ravio-lh-xl: 2;

  --ravio-black: #333;
  --ravio-red: #9e1b32;
  --ravio-gray-1: #666;
  --ravio-gray-2: #999;
  --ravio-gray-3: #ccc;
  --ravio-gray-4: #eee;
  --ravio-gray-5: #f1f1f1;
}


body{
  background-color: #fff;
  color: var(--ravio-black);
  font-size: var(--ravio-fs-m);
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-display: swap;
  font-weight: var(--ravio-fw-nomal);
  line-height: var(--ravio-lh-m);
}

.inter-sans-serif {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-display: swap;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
}

.font-size-xxs{ font-size: var(--ravio-fs-xxs);}
.font-size-xs{ font-size: var(--ravio-fs-xs);}
.font-size-s{ font-size: var(--ravio-fs-s);}
.font-size-m{ font-size: var(--ravio-fs-m);}
.font-size-ml{ font-size: var(--ravio-fs-ml);}
.font-size-l{ font-size: var(--ravio-fs-l);}
.font-size-xl{ font-size: var(--ravio-fs-xl);}
.font-size-xxl{ font-size: var(--ravio-fs-xxl);}

.font-size-exs{ font-size: var(--ravio-fs-exs);}
.font-size-exm{ font-size: var(--ravio-fs-exm);}
.font-size-exl{ font-size: var(--ravio-fs-exl);}

.font-size-12{ font-size: var(--ravio-fs-12);}
.font-size-14{ font-size: var(--ravio-fs-14);}
.font-size-16{ font-size: var(--ravio-fs-16);}
.font-size-18{ font-size: var(--ravio-fs-18);}

.font-weight-nomal{ font-weight: var(--ravio-fw-nomal);}
.font-weight-bold,strong{ font-weight: var(--ravio-fw-bold);}

.line-height-none{ line-height: var(--ravio-lh-none);} 
.line-height-12{ line-height: var(--ravio-lh-xs);} 
.line-height-14{ line-height: var(--ravio-lh-s);} 
.line-height-16{ line-height: var(--ravio-lh-m);} 
.line-height-18{ line-height: var(--ravio-lh-l);} 
.line-height-2{ line-height: var(--ravio-lh-xl);} 

.font-color-black{ color: var(--ravio-black);}
.font-color-red{ color: var(--ravio-red);}
.font-color-gray-1{ color: var(--ravio-gray-1);}
.font-color-gray-2{ color: var(--ravio-gray-2);}
.font-color-gray-3{ color: var(--ravio-gray-3);}
.font-color-gray-4{ color: var(--ravio-gray-4);}
.font-color-gray-5{ color: var(--ravio-gray-5);}

.notline{ text-decoration: line-through;}
.no-wrap{ white-space: nowrap;}

strong{ font-weight: var(--ravio-fw-bold);}

a,area,button,input,label,select,summary,textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

a {
  color: var(--ravio-red);
  text-decoration: underline;
  cursor: pointer;
}

.no-line a,
a.no-line { text-decoration: none;}

a:visited,
a:hover,
a:focus,
a:active { color: #inherit;}

@media (hover: hover) {
a { transition: opacity .3s ease;}
a:hover { opacity: 0.7;}

.hover-image:hover { opacity: 1;}
.hover-image img { transition: transform 0.5s ease;}
.hover-image:hover img { transform: scale(1.05);}

}/* End hover */


#WRAP{
  position: relative;
  padding: 8rem 0 0;
  width: 100%;
  display: block;
  overflow: clip;
}

@media screen and (max-width: 880px) {

#WRAP{ padding: 6rem 0 0;}

}/* End max 880 */


/*** HEADER ***/

#FIXED-HEADER{
  position: fixed;
  top: 0;
  padding: 0 0 0 2rem;
  width: 100%;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  transition: transform 0.5s ease;
  transform: translate(0, 0);
  z-index: 1000;
}

#FIXED-HEADER.is-hide {transform: translate(0, -10rem);}

#FIXED-HEADER .ravio-logo{
  max-width: 17rem;
  aspect-ratio: 460 / 120;
}

.global-navi{
  height: 8rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.head-menu{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.head-menu li{ margin-right: 1vw;}
.head-menu li.head-shop-link{ margin-right: 0; margin-left: 1vw;}
.head-menu li.head-inquiry-link{ margin-right: 0;}

.head-menu a{
  color: var(--ravio-black);
  text-decoration: none;
}

.head-menu .head-shop-link a{
  position: relative;
  padding: 0 0 0 6.5rem;
  min-width: 24rem;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--ravio-gray-4);
  text-align: left;
}

.head-menu .head-shop-link a::before{
  position: absolute;
  top: 0;
  left: 1em;
  bottom: 0;
  margin: auto;
  width: 4rem;
  height: 4rem;
  display: block;
  background: url(/ravio/common/img/icon_cart.svg);
  content: "";
}

.head-menu .head-inquiry-link a{
  position: relative;
  padding: 0;
  width: 10rem;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--ravio-red);
  color: #fff;
}

.head-menu .head-inquiry-link a::before{
  position: relative;
  width: 3rem;
  height: 3rem;
  display: block;
  background: url(/ravio/common/img/icon_mail.svg) center center no-repeat;
  content: "";
}

.head-inquiry-link-sp a{ display: none;}

.head-menu li.close-menu{ display: none;}

@media screen and (max-width: 880px) {

#FIXED-HEADER{ height: 6rem;}

#FIXED-HEADER .ravio-logo{ max-width: 15rem;}

.global-navi{ height: 6rem;}

.head-menu{
  position: relative;
  width: 100%;
  max-width: 38rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.5s ease;
  transform: translate(100%, 0);
  background-color: #fff;
  opacity: 1;
  z-index: 2000;
}

.global-menu-active .head-menu{
  transform: translate(0, 0);
  opacity: 1;
}

.head-menu li{
  position: relative;
  margin: 0;
  width: 100%;
}

.head-menu li:first-child{
  margin: 5.8rem 0 0;
  border-top: 0.1rem solid var(--ravio-gray-3);
}

.head-menu li:first-child::before{
  position: absolute;
  top: -5.8rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 14.6rem;
  height: 3.8rem;
  display: block;
  background: url(/ravio/common/img/ravio_logo.svg) no-repeat;
  background-size: contain;
  content: "";
}

.head-menu li.head-shop-link{ margin: 0;}
.head-menu li.head-inquiry-link{ margin: 0;}

.head-menu a{
  padding: 1.5em 0.5em;
  display: block;
  border-bottom: 0.1rem dotted var(--ravio-gray-3);
}

.head-menu li:nth-child(3) a{ border-bottom: none;}

.head-menu .head-shop-link a{
  min-width: 100%;
  border-bottom: none;
}

.head-menu .head-inquiry-link a{
  position: relative;
  padding: 0 1em;
  width: 100%;
  height: 6rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  background-color: var(--ravio-red);
  color: #fff;
  border-bottom: none;
}

.head-menu .head-inquiry-link a::before{
  position: relative;
  width: 3rem;
  height: 3rem;
  display: block;
  background: url(/ravio/common/img/icon_mail.svg) center center no-repeat;
  content: "";
}

.head-menu .head-inquiry-link a .font-size-xxs{ font-size: var(--ravio-fs-m);}

.head-inquiry-link-sp a{
  position: relative;
  padding: 0;
  width: 6rem;
  height: 6rem;
  display: block;
  overflow: hidden;
  background-color: var(--ravio-red);
  color: #fff;
  line-height: 300;
  z-index: 1000;
}

.head-inquiry-link-sp a::before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  display: block;
  background: url(/ravio/common/img/icon_mail.svg) center center no-repeat;
  content: "";
}

.head-menu li.close-menu{ padding: 2em 1em 1em; display: block; text-align: center;}
.head-menu li.close-menu strong{ position: relative; padding-left: 2.5rem; cursor: pointer;}

.head-menu li.close-menu strong::before,
.head-menu li.close-menu strong::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 1.8rem;
  height: 0.2rem;
  background: var(--ravio-red);
  content: "";
}
.head-menu li.close-menu strong::before { transform: rotate(45deg);}
.head-menu li.close-menu strong::after { transform: rotate(-45deg);}


}/* End max 880 */





/* burger-menu */

.burger-menu-trigger-button{
  position: absolute;
  top: 0;
  right: 6rem;
  margin: 0;
  width: 6rem;
  height: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--ravio-gray-4);
  font-size: var(--ravio-fs-xxs);
  line-height: var(--ravio-lh-xs);
  cursor: pointer;
  z-index: 5000;
  overflow: hidden;
}


@media screen and (min-width: 881px) {

.burger-menu-trigger-button{ display: none;}

}/* End min 881 */

.burger-menu-trigger-button em{
  position: relative;
  margin: 0 0 0;
  padding: 0;
  width: 2.4rem;
  height: 0.2rem;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: var(--ravio-red);
  cursor:pointer;
  outline: 0;
  transition: background-color 0.3s ease,transform 0.3s ease;
}

.burger-menu-trigger-button em::before,
.burger-menu-trigger-button em::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--ravio-red);
  transition: transform 0.3s ease, background-color .3s ease;
  content: "";
}

.burger-menu-trigger-button em::before { transform: translateY(-0.8rem);}
.burger-menu-trigger-button em::after { transform: translateY(0.8rem);}
.global-menu-active .burger-menu-trigger-button em { background-color: transparent;}
.global-menu-active .burger-menu-trigger-button em::before { transform: rotate(45deg);}
.global-menu-active .burger-menu-trigger-button em::after { transform: rotate(-45deg);}



@media screen and (max-width: 880px) {

.global-navi-body{
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  transition: opacity 0.5s ease;
  background: rgb(0,0,0,0.3);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
}

.global-menu-active .global-navi-body{
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: all;
  opacity: 1;
  overscroll-behavior: contain;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.global-menu-active .global-navi-body::before,
.global-menu-active .global-navi-body::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 0.1rem;
  height: calc(100vh + 0.1rem);
  display: flex;
  content: "";
}

}/* End max 880 */


.global-navi-close{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: block;
  pointer-events: none;
  opacity: 0;
}

.global-menu-active .global-navi-close{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: block;
  overscroll-behavior: contain;
  overflow-y: scroll;
  scrollbar-width: none;
  z-index: 1;
  pointer-events: all;
  cursor: pointer;
  opacity: 1;
}

.global-navi-close span{ display: none;}

.global-navi-close::before,
.global-navi-close::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 0.1rem;
  height: calc(100vh + 0.1rem);
  display: flex;
  content: "";
}


@media screen and (min-width: 881px) {

.global-navi-body{
  position: relative;
  display: block;
  opacity: 1;
}

}/* End min 881 */



/* TITLE */

.contents-title{
  position: relative;
  width: 100%;
  height: 40rem;
  display: block;
  overflow: hidden;
}

.contents-title img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}


.recruit .contents-title img{
  margin-left: auto;
  width: auto;
  height: 100%;
  object-fit: cover;
  object-position: bottom right;
}




.contents-title hgroup{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 2rem;
  width: 100%;
  max-width: 42rem;
  height: 20rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  background-color:  rgba(255,255,255,1);
}

.contents-title hgroup p{
  display: block;
  color: var(--ravio-gray-4);
  font-size: min(max(4rem, calc(4rem + ((1vw - 0.48rem) * 3.8462))), 6rem);
  line-height: 1;
}

.contents-title hgroup h1{
  font-size: var(--ravio-fs-exs);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.07em;
}

@media screen and (max-width: 800px) {

.contents-title{ height: 36rem;}
.contents-title img{
  width: auto;
  height: 36rem;
  object-fit: cover;
  object-position: center center;
}

.contents-title hgroup{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 1rem;
  width: calc(100% - 2.4em);
  max-width: 36rem;
  height: 16rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.4);
  box-shadow: 0 0 1.5rem -0.5rem rgba(0, 0, 0, 0.7);
  border: solid #fff 0.1rem;
}

.contents-title hgroup h1{
  color:rgba(255,255,255,1);
  text-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.3), 0 0 0.3rem rgba(0, 0, 0, 0.3);
}

.contents-title hgroup p{
  color: var(--ravio-gray-3);
  text-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.3), 0 0 0.3rem rgba(0, 0, 0, 0.3);
}

}/* End max 800 */






/* breadcrumb */

.breadcrumb{
  position: relative;
  margin: 0;
  padding: 0 2rem;
  width: 100%;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--ravio-gray-4);
}

.breadcrumb .breadcrumb-list{
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.breadcrumb .breadcrumb-list li{
  position: relative;
  margin: 0 2rem 0 0;
  color: var(--ravio-gray-1);
  font-size: var(--ravio-fs-s);
  line-height: car(--ravio-lh-xs);
  white-space: nowrap;
}

.breadcrumb .breadcrumb-list li a{
  position: relative;
  margin: 0.5rem 0;
  display: block;
  color: var(--ravio-red);
  text-decoration: none;
}

.breadcrumb .breadcrumb-list li a::before{
  position: absolute;
  top: 0;
  right: -1.5rem;
  bottom: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  background: url(/ravio/common/img/icon_arrow.svg) no-repeat;
  background-size: contain;
  content: "";
}



/*** CONTENTS ***/

#CONTENTS{ display: flex; flex-direction: column; align-items: center;}
.modal { opacity: 0;}

.contents-2-column{
  width: calc(100% - 4rem);
  max-width: 128rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 3rem;
}

.contents-body{
  position: relative;
  margin: 6rem 0 0;
  padding: 0;
  width: calc(100% - 4rem);
  max-width: 128rem;
}

.contents-2-column .contents-body{
  width: calc(100% - 27rem);
  max-width: 98rem;
}

.contents-2-column .contents-side-menu{
  position: relative;
  margin: 6rem 0 0;
  width: 24rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  order: -1;
}

.contents-2-column .contents-side-menu::before {
  position: absolute;
  right: 0;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  width: 100vw;
  height: 100%;
  display: block;
  background-color: var(--ravio-gray-4);
  z-index: -1;
  content: "";
}

.contents-2-column .contents-side-menu::after {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  width: 100vw;
  height: 40rem;
  display: block;
  background: linear-gradient(180deg,rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);  
  z-index: 1;
  content: "";
}

.contents-side-menu .letter-image{
  position: absolute;
  bottom: 3rem;
  right: -4rem;
  display: block;
  color: #fff;
  font-size: 12rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-display: swap;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  writing-mode: sideways-lr;
  z-index: 5;
}




@media screen and (max-width: 1024px) {

.contents-2-column{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  column-gap: 3rem;
}

.contents-2-column .contents-body{
  width: calc(100% - 4rem);
  max-width: 100%;
}

.contents-2-column .contents-side-menu{
  position: sticky;
  bottom: 0;
  width: 100%;
  display: block;
  order: 2;
  z-index: 100;
}

.contents-2-column .contents-side-menu::before,
.contents-2-column .contents-side-menu::after,
.contents-side-menu .letter-image{ display: none;}


}/* End max 1024 */


.contents-section{ position: relative; scroll-margin-top: 9rem; padding-bottom: 8rem;}

/* section-title */

.section-title{
  position: relative;
  margin-bottom: 1.5em;
  padding: 0 0 0.8em;
  font-size: var(--ravio-fs-exs);
  font-weight: 400;
  line-height: var(--ravio-lh-xs);
  letter-spacing: 0.05em;
  border-bottom: 0.2rem solid var(--ravio-gray-3);
}

.section-title::after{
  position: absolute;
  bottom: -0.2rem;
  left: 0;
  width: 25%;
  height: 0.2rem;
  display: block;
  background-color: var(--ravio-red);
  content: "";
}

.section-sub-title-1{
  position: relative;
  margin-bottom: 1em;
  padding: 0 0 0 2.5rem;
  font-size: var(--ravio-fs-xxl);
  font-weight: 400;
  line-height: var(--ravio-lh-xs);
  letter-spacing: 0.05em;
}

.section-sub-title-1::before{
  position: absolute;
  top: calc(0.5em - 0rem);
  left: 0;
  width: 1.5rem;
  height: 0.4rem;
  display: block;
  background-color: var(--ravio-red);
  content: "";
}

.section-sub-title-2{
  position: relative;
  margin-bottom: 1em;
  padding: 0 0 0.5em;
  font-size: var(--ravio-fs-xxl);
  font-weight: 400;
  line-height: var(--ravio-lh-xs);
  letter-spacing: 0.05em;
  border-bottom: 0.1rem dotted var(--ravio-gray-3);
}

/* float-menu */

.float-menu{
  position: sticky;
  top: 10rem;
  left: 0;
  width: 100%;
  display: block;
  background-color: var(--ravio-red);
  z-index: 10;
}

.float-menu::before{
  position: absolute;
  right: 0;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  width: 100vw;
  height: 100%;
  display: block;
  background-color: var(--ravio-red);
  z-index: -1;
  content: "";
}

.side-anchor-menu{
  padding: 1em 0;
  width: 100%;
  display: block;
}

.side-anchor-menu li{
  padding: 0.5em 0;
  display: block;
  border-bottom: 0.1rem dotted #fff;
}

.side-anchor-menu li:first-child{ border-top: 0.1rem dotted #fff;}

.side-anchor-menu li a{
  position: relative;
  padding: 0.5em 2em 0.5em 0.5em;
  display: block;
  color: #fff;
  text-decoration: none;
}

.side-anchor-menu li a::before{
  position: absolute;
  top: 0;
  right: 1rem;
  bottom: 0;
  margin: auto 0;
  width: 2.2rem;
  height: 2.2rem;
  display: block;
  border-radius: 2rem;
  border: solid #fff 0.1rem;
  content: "";
}

.side-anchor-menu li a::after{
  position: absolute;
  top: 0;
  right: 1.5rem;
  bottom: 0;
  margin: auto 0;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: url(/ravio/common/img/icon_arrow_white.svg) no-repeat;
  background-size: contain;
  transform: rotate(90deg);
  content: "";
}


@media screen and (min-width: 1025px) {

.side-anchor summary{ display: none;}

}/* End min 1025 */

@media screen and (max-width: 1024px) {

.side-anchor summary{
  position: relative;
  padding: 0.8em 1em;
  display: block;
  color: #fff;
  text-align: center;
}

.side-anchor-menu{ padding: 0 0 2em;}
.button-plus{ position: relative;}
.button-plus::after,.button-plus::before {
  position: absolute;
  left: -1.5em;
  top: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 1;
  content: "";
  display: inline-block;
  width: 0.2rem;
  height: 1em;
  background-color: #fff;
  transition: transform 0.3s ease;
}

.button-plus::after { transform: rotate(90deg);}
.accordion-details.side-anchor[open] .button-plus::before { transform: rotate(90deg) !important;}

}/* End min 1024 */



.list-ul li{
  margin: 0 0 0 1.5em;
  padding: 0 0 0.5em 0;
  list-style-type: disc;
}

.list-ul li.circle{ list-style-type: circle;}

.list-ol li{
  margin: 0 0 0 1.5em;
  padding: 0 0 0.5em 0;
  list-style-type: decimal;
}

/* notice */

.notice-txt,
.notice-list li{
  position: relative;
  padding: 0 0 0 1.2em;
  text-align: left;
}

.notice-list li{ padding: 0 0 0.5em 1.2em; list-style: none;}

.notice-txt:before,
.notice-list li:before{
  position: absolute;
  top: 0;
  left: 0;
  color: var(--ravio-red);
  font-weight: var(--ravio-fw-bold);
  content: "\203B";
}

.notice-txt.red,
.notice-list.red li{ color: var(--ravio-red);}



/* button */

.button{
  position: relative;
  padding: 0.8em 1em;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.4rem;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.button.button-l{ font-size: var(--ravio-fs-l);}
.button.button-s{ font-size: var(--ravio-fs-s);}
.button.button-xs{ font-size: var(--ravio-fs-xs);}

.button.button-gray3{ color: var(--ravio-black); background-color:var(--ravio-gray-3); border: solid 0.1rem var(--ravio-black);}
.button.button-white{ color: var(--ravio-black); background-color: #fff; border: solid 0.1rem var(--ravio-black);}
.button.button-black{ color: #fff; background-color: var(--ravio-black); border: solid 0.1rem var(--ravio-black);}
.button.button-red{ color: #fff; background-color: var(--ravio-red); border: solid 0.1rem var(--ravio-red);}
.button.button-white-red{ color: var(--ravio-black); background-color: #fff; border: solid 0.1rem var(--ravio-red);}

.button .svg-icon{
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  fill: var(--ravio-black);
  aspect-ratio: 1 / 1;
}

.button .svg-icon.size-l{ width: 2.8rem; height: 2.8rem;}
.button .svg-icon.red{ fill: var(--ravio-red);}

.arrow{ position: relative; display: inline-block;}
.arrow-block{ width: 100%; display: block;}

.arrow::before{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  background: url(/ravio/common/img/icon_arrow.svg) no-repeat;
  background-size: contain;
  content: "";
}

.arrow.size-s::before{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: url(/ravio/common/img/icon_arrow.svg) no-repeat;
  background-size: contain;
  content: "";
}


.arrow-white::before{ background: url(/ravio/common/img/icon_arrow_white.svg) no-repeat;}

.arrow-left{ padding-left: 1.4em;}
.arrow-right{ padding-right: 1.4em;}

.arrow-left::before{ left: 0;}
.arrow-right::before{ right: 0;}

.arrow-left.left-way::before{ transform: scale(-1, 1);}


.button.mail{ position: relative; padding-left: 2.2em;}

.button.mail::before{
  position: absolute;
  top: 0;
  left: 1em;
  bottom: 0;
  margin: auto;
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  background: url(/ravio/common/img/icon_mail.svg) no-repeat;
  background-size: contain;
  content: "";
}

.button.mail.size-l::before{ width: 3.4rem; height: 3.4rem;}


/* flex */

.flex-box{ display: flex; flex-wrap: wrap;}
.flex-box.align-center{ align-items: center;}
.flex-box.align-flex-start{ align-items: flex-start;}
.flex-box.justify-space-between{ justify-content: space-between;}
.flex-box.justify-center{ justify-content: center;}
.flex-box.justify-flex-end{ justify-content:flex-end;}

.flex-box.direction-column{ flex-direction: column;}
.flex-box.gap-05{ gap: 0.5rem;}
.flex-box.gap-1{ gap: 1rem;}

/*** IMAGE ASPECT-RATIO ***/

.aspect-1-1 { aspect-ratio: 1 / 1;}
.aspect-1-2 { aspect-ratio: 1 / 2;}
.aspect-2-1 { aspect-ratio: 2 / 1;}
.aspect-3-1 { aspect-ratio: 3 / 1;}
.aspect-3-2 { aspect-ratio: 3 / 2;}
.aspect-6-4 { aspect-ratio: 3 / 2;}
.aspect-4-3 { aspect-ratio: 4 / 3;}
.aspect-9-16 { aspect-ratio: 9 / 16;}
.aspect-16-9 { aspect-ratio: 16 / 9;}


.mt-auto{ margin-top: auto;}
.mt-1{ margin-top: 1em;}
.mt-2{ margin-top: 2em;}
.mt-3{ margin-top: 3em;}
.mt-4{ margin-top: 4em;}
.mt-5{ margin-top: 5em;}
.mt-05{ margin-top: 0.5em;}

.mb-1{ margin-bottom: 1em;}
.mb-2{ margin-bottom: 2em;}
.mb-3{ margin-bottom: 3em;}
.mb-4{ margin-bottom: 4em;}
.mb-5{ margin-bottom: 5em;}
.mb-05{ margin-bottom: 0.5em;}

.ml-1{ margin-left: 1em;}
.ml-2{ margin-left: 2em;}
.ml-3{ margin-left: 3em;}
.ml-4{ margin-left: 4em;}

.mr-1{ margin-right: 1em;}
.mr-2{ margin-right: 2em;}
.mr-3{ margin-right: 3em;}
.mr-4{ margin-right: 4em;}

.margin-1{ margin: 1em;}
.margin-2{ margin: 2em;}

.pt-1{ padding-top: 1em;}
.pt-2{ padding-top: 2em;}
.pt-3{ padding-top: 3em;}
.pt-4{ padding-top: 4em;}
.pt-5{ padding-top: 5em;}
.pt-05{ padding-top: 0.5em;}

.pb-1{ padding-bottom: 1em;}
.pb-2{ padding-bottom: 2em;}
.pb-3{ padding-bottom: 3em;}
.pb-4{ padding-bottom: 4em;}
.pb-5{ padding-bottom: 5em;}
.pb-05{ padding-bottom: 0.5em;}

.pl-1{ padding-left: 1em;}
.pl-2{ padding-left: 2em;}
.pl-3{ padding-left: 3em;}
.pl-4{ padding-left: 4em;}

.pr-1{ padding-right: 1em;}
.pr-2{ padding-right: 2em;}
.pr-3{ padding-right: 3em;}
.pr-4{ padding-right: 4em;}

.padding-1{ padding: 1em;}
.padding-2{ padding: 2em;}