@charset "UTF-8";
/*////////////////////////
iyaiyasanbai.tokyo
plan.css
///////////////////////*/

#main{
background-image: url(../images/course_plan/main_sp.jpg);
}

#main::before {
  opacity:0.3;
}

#plan{
  width: 90%;
  margin: 3rem auto 16rem;
}
#plan .main_read{
  line-height: 2.2rem;
}
#plan .attention{
  color: #C83526;
  font-weight: bolder;
  line-height: 1.8;
  text-align: center;
  margin: 4rem auto 2rem;
}
#plan .btn_flex{
  display: flex;
  justify-content: center;
  margin: 5rem auto;
}
#plan .btn_flex a{
  width: 50%;
  margin: 0 2rem;
  border: 1px solid #1D201F;
  padding: 1rem;
  text-align: center;
  color: #1D201F;
  text-decoration: none;
}

#plan .kofuku{
  background-color: #e8e8e8;
  padding: 2rem;
}
#plan .kofuku h3,#plan .enkai h3{
  font-size: 2rem;
  text-align: center;
}
#plan .kofuku .read{
  margin: 2rem 0;
  line-height: 2.2rem;
}
#plan .kofuku .img{
  width: 100%;
  margin: auto;
}
#plan .kofuku .menu{
  line-height: 2.2rem;
  margin: 1rem 0 2rem;
}
#plan .btn{
  width: 80%;
  height: 4rem;
  line-height: 2rem;
  padding: 1rem 2rem;
  text-align: center;
}

.enkai{
  margin: 8rem 0;
}
.enkai .plan{
  margin: 3rem 0 5rem;
}
.enkai .plan h4{
  font-size: 1.4rem;
  margin-bottom: 2rem;
  font-weight: bold;
}
.enkai .plan h4 span{
  display: inline-block;
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 300;
}
.enkai .plan dl{
  display: flex;
  flex-wrap: wrap;
  line-height: 2.2rem;
}
.enkai .plan dl dt{
  width: 15%;
  margin-bottom: 1rem;
  color: #C83526;
}
.enkai .plan dl dd{
  width: 85%;
  margin-bottom: 1rem;
}
.enkai .plan dl dt.drink,.enkai .plan dl dd.drink{
  width: 100%;
}
.enkai .plan .box_one p{
  font-size: 1rem;
  line-height: 1.8rem;
  margin-top: 2rem;
}

/* アコーディオン */
.plan .accordion_one {
  max-width: 1024px;
  margin: 0 auto;
}
.plan .accordion_one .accordion_header {
  background-color: #e8e8e8;
  font-weight: bold;
  padding: 20px 11%;
  text-align: center;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
}

.plan .accordion_one .accordion_header:hover {
  opacity: .8;
}
.plan .accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  box-sizing: border-box;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  transform-origin: center center;
  transition-duration: 0.2s;
}
.plan .accordion_one .accordion_header.stay .i_box {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.plan .accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.plan .accordion_one .accordion_header.stay.open .i_box {
  -webkit-transform: rotate(180eg);
  transform: rotate(180deg);
}
.plan .accordion_one .accordion_inner {
  display: none;
  padding: 2rem;
  background-color: #e8e8e8;
  box-sizing: border-box;
}
.plan .accordion_one .accordion_inner.stay {
  display: block;
}



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

#main{
background-image: url(../images/course_plan/main_pc.jpg);
}

#plan .main_read{
  font-size: 1.4rem;
}

#plan .attention {
    margin: 6rem auto 2rem;
}

#plan .btn_flex {
    width: 450px;
    margin: 10rem auto 6rem;
}

#plan .kofuku {
    width: 80%;
    margin: auto;
    padding: 4rem 5rem;
}

#plan .kofuku_flex{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5rem 0 3rem;
}

#plan .kofuku_flex .menu_txt{
  order: 1;
  width: 62%;
  margin-right: 1rem;
}

#plan .kofuku_flex .menu_txt .read{
  margin: 0;
}

#plan .kofuku_flex .menu_txt .menu{
  background-color: #F6F8F5;
  padding: 1rem 1.5rem;
  margin: 2rem 0 0;
  line-height: 2.4rem;
}

#plan .kofuku_flex .img{
  order: 2;
  width: 38%;
}

#plan .btn {
    width: 40%;
}

#plan .kofuku h3, #plan .enkai h3 {
    font-size: 2.6rem;
}

.enkai {
    margin: 12rem 0;
}

.enkai_flex{
  display: flex;
  width: 95%;
  margin: 7rem auto 5rem;
}

.enkai .plan {
    margin: 0 3rem;
    width: 50%;
}

.enkai .plan h4 {
    font-size: 1.8rem;
}

.enkai .plan .box_one p{
  font-size: 1.1rem;
}

.plan .accordion_one {
    max-width: 800px;
}

.plan .accordion_one .accordion_inner {
    display: block;
}

.plan .accordion_one .accordion_header .i_box {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.plan .accordion_one .accordion_header.open .i_box {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
}