@charset "UTF-8";
/*////////////////////////
garb-public.jp
plan.css
///////////////////////*/

#main_visual{
    background-image: url(../images/plan/plan_main.jpg);
}

.accordion_container{
    margin: 2rem 2rem 5rem;
}

.accordion {
  margin-top: 20px;
  background-color: #003D6C;
  color: #fff;
  border-radius: 1rem;
}

.question {
  font-weight: bold;
  padding: 2rem;
  background-color: #003D6C;
  color: #fff;
  position: relative;
  border-radius: 1rem;
}

.question::before {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    content: '\f13a';
    font-weight: 900;
    top: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;
    font-size: 1.8rem;
}

.question.open::before {
  transform: rotate(180deg);
  top: 1rem;
  left: 47%;
}

.question .img{
    position: relative;
    margin: 2rem 0;
}

.question .img p{
    position: absolute;
    bottom: -1rem;
    left: -.5rem;
    background-color: #fff;
    color: #003D6C;
    font-size: 1.2rem;
    padding: .8rem 1rem;
    border-radius: 1rem;
}

.question img{
    border-radius: 1rem;
}

.question .plan_ttl{
    font-size: 1.6rem;
}

.question .plan_ttl span.mini{
    font-size: 1.1rem;
    font-weight: 300;
}

.question .plan_ttl span.read{
    display: inline-block;
    font-size: 1.2rem;
    margin-top: 1.5rem;
    line-height: 2.2rem;
    font-weight: 400;
}

.answer {
    padding: 0 2rem 2rem;
    display: none;
}

.answer p.menu{
    font-size: 1.2rem;
    line-height: 2.2rem;
    font-weight: 400;
}

.answer .red {
    color: #e15d5d;
    font-weight: 700;
}

.answer div.drink{
    background-color: #fff;
    padding: 1rem;
    border-radius: 1rem;
}

.answer div.drink p{
    font-size: 1.2rem;
    color: #003D6C;
    line-height: 2.2rem;
}

.answer div.drink p.drink_menu{
    margin-bottom: 1rem;
}

.answer div.drink p.option span.en{
    background-color: #003D6C;
    color: #fff;
    padding: .1rem .3rem;
    border-radius: .3rem;
    border-bottom: 1px solid;
}

.answer div.drink p.option span.name{
    padding-left: 1rem;
}

.answer div.drink p.option span{
    border-bottom: 1px solid #003D6C;
}


.private{
    position: relative;
    background-color: #fff;
    padding: 3rem 2rem 6rem;
    margin: 10rem 0 5rem;
}

.private .sec_ttl {
    position: relative;
    margin-top: -2rem;
    z-index: 2;
}

.private::before{
    position: absolute;
    content: "";
    top: -3%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #fff;
    display: inline-block;
    width: 220px;
    height: 70px;
    border-radius: 50% / 100% 100% 0 0;
}

.private p{
    font-size: 1.2rem;
    line-height: 2.2rem;
    text-align: center;
}

.private_flex{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.private_cont01{
    width: 85%;
    margin: 2rem -2rem 2rem auto;
}

.private_cont01 img{
    border-radius: 1rem 0 0 1rem;
}

.private_cont02{
    width: 85%;
    margin: 2rem auto 2rem -2rem;
}

.private_cont02 img{
    border-radius: 0 1rem 1rem 0;
}

.kashikiri{
    position: relative;
    width: 80%;
    margin: -10rem auto 8rem;
    z-index: 2;
    background-color: #003D6C;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
}

.kashikiri p{
    color: #fff;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 2.2rem;
    font-size: 1.2rem;
}

.kashikiri p span{
    display: inline-block;
    font-size: 2.2rem;
    margin-bottom: 2rem;
}


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

#main_visual{
    background-image: url(../images/plan/plan_main_pc.jpg);
}

.question {
    pointer-events: none;
}

.question::before{
    display: none;
}

.question .img {
    margin: 0 0 4rem;
}

.question .img p {
    font-size: 1.4rem;
}

.question .plan_ttl {
    font-size: 2.5rem;
}

.question .plan_ttl span.mini {
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0;
}

.question .plan_ttl span.read {
    font-size: 1.4rem;
    margin-top: 2.5rem;
    line-height: 2.5rem;
}

.accordion_container {
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin: 4rem auto 10rem;
}

.accordion {
    width: 33%;
    margin: 0 .5rem 0;
    height: max-content;
}

.answer {
    display: block;
}

.answer p.menu {
    font-size: 1.4rem;
    line-height: 3rem;
}

.answer .red {
    font-weight: bold;
}

.answer div.drink {
    padding: 1.5rem;
}

.answer div.drink p {
    font-size: 1.4rem;
    line-height: 2.5rem;
}

.answer div.drink p.drink_menu {
    margin-bottom: 2rem;
}

.private {
    width: 80%;
    border-radius: 1rem;
    margin: 15rem auto 5rem;
    padding: 3rem 5rem 6rem;
}

.private::before {
    top: -3rem;
    width: 380px;
}

.private p {
    font-size: 1.6rem;
    margin-bottom: 2rem;
    line-height: 2.5rem;
}

.private_cont01,.private_cont02 {
    width: 45%;
    margin: 1rem 2rem;
}

.private_cont01 img,.private_cont02 img {
    border-radius: 1rem;
}

.kashikiri {
    width: 40%;
}

.kashikiri p {
    line-height: 3rem;
    font-size: 1.4rem;
}

.kashikiri p span {
    font-size: 3rem;
}
}