@charset "UTF-8";
/* CSS Document */
.main {
  background-color: #FFFCF2;
}
.circle_number { /*  https://wp-load.in/html-css/html-circled-number　と　http://clue-design.com/css/css-maru-no-mojiこのサイトを参考にしている　*/
  width: 23px;
  height: 23px;
  background-color: #F07B47;
  border-radius: 50%;
  line-height: 23px;
  text-align: center;
  box-sizing: border-box;
  font-size: 1.6rem;
  color: #FFF;
}
.recipe2-top__image {
  width: 100%;
  position: center;
}
.recipe2-top__image__title {
  margin-top: -30px;
}
.recipe2-top__image__title img {
  width: 60%;
  margin-bottom: 90px;
}
@media(min-width: 900px) {
  .recipe2-top__main-title {
    height: 747px;
  }
}
.recipe2-top-junbi img {
  height: 37px;
  margin-bottom: 20px;
}
.recipe2-top-junbi h2 {
  margin-bottom: 20px;
}
.recipe2-top-junbi p {
  margin-bottom: 40px;
}
.recipe2-top-dogu h2 {
  margin: 20px 0;
}
.recipe2-top-dogu p {
  margin-bottom: 40px;
}
.section-procedure {
  padding: 0 48px;
  margin: 0 auto;
}
.section-procedure__title img {
  height: 37px;
  margin-bottom: 20px;
}
.section-procedure__1__description {
  text-align: left;
  padding: 0 48px;
  margin: 0 auto 20px;
}
.section-procedure__1__kostu {
  width: 294px;
  background-color: #E7FFE6;
  border-radius: 15px;
  margin: 0 auto 15px;
}
.section-procedure__1__kostu__title {
  display: block;
  pointer-events: none;
  padding: 8px;
}
input {
  display: none;
}
.section-procedure__1__kostu__toggle {
  padding: 8px;
  list-style: none;
}
.section-procedure__1__kostu__title img {
  height: 32px;
}
.section-procedure__1__contents p {
  padding: 8px;
  text-align: left;
}
@media screen and (max-width: 900px) {
  .section-procedure__1__kostu__title {
    position: relative;
    pointer-events: all;
  }
  .section-procedure__1__kostu__title::after, .section-procedure__1__kostu__title::before {
    content: "";
    position: absolute;
    width: 2px;
    right: 25px;
    top: 15px;
    height: 20px;
    background-color: #999;
    transition: all 0.3s;
  }
  .section-procedure__1__kostu__title::after {
    transform: rotate(90deg); 
  }
  .section-procedure__1__contents {
    max-height: 0;
    padding: 0 8px;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  input:checked + .section-procedure__1__kostu__title::before {
    transform: rotate(90deg) !important;
  } 
   input:checked + .section-procedure__1__kostu__toggle {
    height: auto;
    padding: 8px;
  }
  input:checked + .section-procedure__1__kostu__title + .section-procedure__1__contents {
    max-height: 2000px;
    transition: all 1.5s ease;
  }
}
.section-procedure__1__koegake {
  width: 294px;
  background: #E6F8FF;
  border-radius: 15px;
  margin: 0 auto 15px;
}
.section-procedure__1__koegake__title {
  display: block;
  pointer-events: none;
  padding: 8px;
}
input {
  display: none;
}
.section-procedure__1__koegake__toggle {
  padding: 8px;
  list-style: none;
}
.section-procedure__1__koegake__title img {
  height: 32px;
}
.section-procedure__1__contents2 p {
  padding: 8px;
  text-align: left;
}
@media screen and (max-width: 900px) {
   .section-procedure__1__koegake__title {
    position: relative;
    pointer-events: all;
  }
  .section-procedure__1__koegake__title::after, .section-procedure__1__koegake__title::before {
    content: "";
    position: absolute;
    width: 2px;
    right: 25px;
    top: 15px;
    height: 20px;
    background-color: #999;
    transition: all 0.3s;
  }
  .section-procedure__1__koegake__title::after {
    transform: rotate(90deg); 
  }
  .section-procedure__1__contents2 {
    max-height: 0;
    padding: 0 8px;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  input:checked + .section-procedure__1__koegake__title::before {
    transform: rotate(90deg) !important;
  } 
   input:checked + .section-procedure__1__koegake__toggle {
    height: auto;
    padding: 8px;
  }
  input:checked + .section-procedure__1__koegake__title + .section-procedure__1__contents2 {
    max-height: 2000px;
    transition: all 1.5s ease;
  }
}
.section-procedure__1__image {
  max-width: 100%;
  margin: 0 auto 20px;
}
@media(min-width: 900px) {
  .section-procedure__1 {
    border-bottom: dotted 3px #333;
    padding-bottom: 60px;
  }
  .section-procedure__1__main {
    display: flex;
  }
  .section-procedure__1__left {
    width: 50vw;
    box-sizing: border-box;
  }
  .omake {
    display: flex;
  }
  .section-procedure__1__kostu {
    width: 100%;
    padding: 0 22px;
    margin: 0 20px 20px 0;
  }
  .section-procedure__1__kostu p {
    width: 100%;
    text-align: left;
    margin: 0 auto;
  }
  .section-procedure__1__koegake {
    width: 100%;
    padding: 0 22px;
    margin: 0 auto 20px;
  }
  .section-procedure__1__koegake p {
    width: 100%;
    margin: 0 auto 20px;
  }
  .section-procedure__1__image {
    width: 50vw;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .border {
    border-bottom: 1px solid #333;
  }
}
.section-procedure__2__description {
  text-align: left;
  padding: 0 48px;
  margin: 0 auto 20px;
}
.section-procedure__2__kostu {
  width: 294px;
  background-color: #E7FFE6;
  border-radius: 15px;
  margin: 0 auto 15px;
}
.section-procedure__2__kostu__title {
  display: block;
  pointer-events: none;
  padding: 8px;
}
input {
  display: none;
}
.section-procedure__2__kostu__toggle {
  padding: 8px;
  list-style: none;
}
.section-procedure__2__kostu__title img {
  height: 32px;
}
.section-procedure__2__contents p {
  padding: 8px;
  text-align: left;
}
@media screen and (max-width: 900px) {
  .section-procedure__2__kostu__title {
    position: relative;
    pointer-events: all;
  }
  .section-procedure__2__kostu__title::after, .section-procedure__2__kostu__title::before {
    content: "";
    position: absolute;
    width: 2px;
    right: 25px;
    top: 15px;
    height: 20px;
    background-color: #999;
    transition: all 0.3s;
  }
  .section-procedure__2__kostu__title::after {
    transform: rotate(90deg); 
  }
  .section-procedure__2__contents {
    max-height: 0;
    padding: 0 8px;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  input:checked + .section-procedure__2__kostu__title::before {
    transform: rotate(90deg) !important;
  } 
   input:checked + .section-procedure__2__kostu__toggle {
    height: auto;
    padding: 8px;
  }
  input:checked + .section-procedure__2__kostu__title + .section-procedure__2__contents {
    max-height: 2000px;
    transition: all 1.5s ease;
  }
}
.section-procedure__2__koegake {
  width: 294px;
  background: #E6F8FF;
  border-radius: 15px;
  margin: 0 auto 15px;
}
.section-procedure__2__koegake__title {
  display: block;
  pointer-events: none;
  padding: 8px;
}
input {
  display: none;
}
.section-procedure__2__koegake__toggle {
  padding: 8px;
  list-style: none;
}
.section-procedure__2__koegake__title img {
  height: 32px;
}
.section-procedure__2__contents p {
  padding: 8px;
  text-align: left;
}
@media screen and (max-width: 900px) {
   .section-procedure__2__koegake__title {
    position: relative;
    pointer-events: all;
  }
  .section-procedure__2__koegake__title::after, .section-procedure__2__koegake__title::before {
    content: "";
    position: absolute;
    width: 2px;
    right: 25px;
    top: 15px;
    height: 20px;
    background-color: #999;
    transition: all 0.3s;
  }
  .section-procedure__2__koegake__title::after {
    transform: rotate(90deg); 
  }
  .section-procedure__2__contents {
    max-height: 0;
    padding: 0 8px;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  input:checked + .section-procedure__2__koegake__title::before {
    transform: rotate(90deg) !important;
  } 
   input:checked + .section-procedure__2__koegake__toggle {
    height: auto;
    padding: 8px;
  }
  input:checked + .section-procedure__2__koegake__title + .section-procedure__2__contents {
    max-height: 2000px;
    transition: all 1.5s ease;
  }
}
.section-procedure__2__image {
  width: 294px;
  margin: 0 auto 20px;
}
@media(min-width: 900px) {
  .section-procedure__2 {
    border-bottom: dotted 3px #333;
    padding: 60px 0;
  }
  .section-procedure__2__main {
    display: flex;
  }
  .section-procedure__2__left {
    width: 50vw;
    box-sizing: border-box;
  }
  .omake {
    display: flex;
  }
	.section-procedure__2__kostu {
    padding: 0 22px;
    margin: 0 20px 20px 0;
  }
  .section-procedure__2__kostu p {
    width: 100%;
    text-align: left;
    margin: 0 auto;
  }
  .section-procedure__2__koegake {
    width: 294px;
    margin: 0 auto 20px;
  }
  .section-procedure__2__koegake p {
    width: 75%;
    margin: 0 auto 20px;
  }
  .section-procedure__2__image {
    width: 50vw;
    padding-left: 20px;
    box-sizing: border-box;
  }
}
.section-procedure__3__description {
  text-align: left;
  padding: 0 48px;
  margin: 0 auto 20px;
}
.section-procedure__3__kostu {
  width: 294px;
  background: #E7FFE6;
  border-radius: 15px;
  margin: 0 auto 15px;
}
.section-procedure__3__kostu__title {
  display: block;
  pointer-events: none;
  padding: 8px;
}
input {
  display: none;
}
.section-procedure__3__kostu__toggle {
  padding: 8px;
  list-style: none;
}
.section-procedure__3__kostu__title img {
  height: 32px;
}
.section-procedure__3__contents p {
  padding: 8px;
  text-align: left;
}
@media screen and (max-width: 900px) {
   .section-procedure__3__kostu__title {
    position: relative;
    pointer-events: all;
  }
  .section-procedure__3__kostu__title::after, .section-procedure__3__kostu__title::before {
    content: "";
    position: absolute;
    width: 2px;
    right: 25px;
    top: 15px;
    height: 20px;
    background-color: #999;
    transition: all 0.3s;
  }
  .section-procedure__3__kostu__title::after {
    transform: rotate(90deg); 
  }
  .section-procedure__3__contents {
    max-height: 0;
    padding: 0 8px;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  input:checked + .section-procedure__3__kostu__title::before {
    transform: rotate(90deg) !important;
  } 
   input:checked + .section-procedure__3__kostu__toggle {
    height: auto;
    padding: 8px;
  }
  input:checked + .section-procedure__3__kostu__title + .section-procedure__3__contents {
    max-height: 2000px;
    transition: all 1.5s ease;
  }
}
.section-procedure__3__image {
  width: 294px;
  margin: 0 auto 20px;
}
@media(min-width: 900px) {
  .section-procedure__3 {
    border-bottom: dotted 3px #333;
    padding: 60px 0;
  }
  .section-procedure__3__main {
    display: flex;
  }
  .section-procedure__3__left {
    width: 50vw;
    box-sizing: border-box;
  }
  .omake {
    display: flex;
  }
  .section-procedure__3__koegake {
    width: 294px;
    margin: 0 auto 20px;
  }
  .section-procedure__3__koegake p {
    width: 75%;
    margin: 0 auto 20px;
  }
  .section-procedure__3__image {
    width: 50vw;
    padding-left: 20px;
    box-sizing: border-box;
  }
}
.section-procedure__4__description {
  text-align: left;
  padding: 0 48px;
  margin: 0 auto 20px;
}
.section-procedure__4__kostu {
  width: 294px;
  background: #E7FFE6;
  border-radius: 15px;
  margin: 0 auto 15px;
}
.section-procedure__4__kostu__title {
  display: block;
  pointer-events: none;
  padding: 8px;
}
input {
  display: none;
}
.section-procedure__4__kostu__toggle {
  padding: 8px;
  list-style: none;
}
.section-procedure__4__kostu__title img {
  height: 32px;
}
.section-procedure__4__contents p {
  padding: 8px;
  text-align: left;
}
@media screen and (max-width: 900px) {
   .section-procedure__4__kostu__title {
    position: relative;
    pointer-events: all;
  }
  .section-procedure__4__kostu__title::after, .section-procedure__4__kostu__title::before {
    content: "";
    position: absolute;
    width: 2px;
    right: 25px;
    top: 15px;
    height: 20px;
    background-color: #999;
    transition: all 0.3s;
  }
  .section-procedure__4__kostu__title::after {
    transform: rotate(90deg); 
  }
  .section-procedure__4__contents {
    max-height: 0;
    padding: 0 8px;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  input:checked + .section-procedure__4__kostu__title::before {
    transform: rotate(90deg) !important;
  } 
   input:checked + .section-procedure__4__kostu__toggle {
    height: auto;
    padding: 8px;
  }
  input:checked + .section-procedure__4__kostu__title + .section-procedure__4__contents {
    max-height: 2000px;
    transition: all 1.5s ease;
  }
}
.section-procedure__4__image {
  width: 294px;
  margin: 0 auto 20px;
}
@media(min-width: 900px) {
  .section-procedure__4 {
    border-bottom: dotted 3px #333;
    padding: 60px 0;
  }
  .section-procedure__4__main {
    display: flex;
  }
  .section-procedure__4__left {
    width: 50vw;
    box-sizing: border-box;
  }
  .omake {
    display: flex;
  }
  .section-procedure__4__koegake {
    width: 294px;
    margin: 0 auto 20px;
  }
  .section-procedure__4__koegake p {
    width: 75%;
    margin: 0 auto 20px;
  }
  .section-procedure__4__image {
    width: 50vw;
    padding-left: 20px;
    box-sizing: border-box;
  }
}
.section-procedure__5__description {
  text-align: left;
  margin: 0 auto 20px;
  width: 50vw;
}
.section-procedure__5__kostu {
  width: 294px;
  background: #E7FFE6;
  border-radius: 15px;
  margin: 0 auto 15px;
}
.section-procedure__5__kostu__title {
  display: block;
  pointer-events: none;
  padding: 8px;
}
input {
  display: none;
}
.section-procedure__5__kostu__toggle {
  padding: 8px;
  list-style: none;
}
.section-procedure__5__kostu__title img {
  height: 32px;
}
.section-procedure__5__contents p {
  padding: 8px;
  text-align: left;
}
@media screen and (max-width: 900px) {
  .section-procedure__5__kostu__title {
   position: relative;
   pointer-events: all;
 }
 .section-procedure__5__kostu__title::after, .section-procedure__5__kostu__title::before {
   content: "";
   position: absolute;
   width: 2px;
   right: 25px;
   top: 15px;
   height: 20px;
   background-color: #999;
   transition: all 0.3s;
 }
 .section-procedure__5__kostu__title::after {
   transform: rotate(90deg); 
 }
 .section-procedure__5__contents {
   max-height: 0;
   padding: 0 8px;
   transition: all 0.3s ease;
   overflow: hidden;
 }
 input:checked + .section-procedure__5__kostu__title::before {
   transform: rotate(90deg) !important;
 } 
  input:checked + .section-procedure__5__kostu__toggle {
   height: auto;
   padding: 8px;
 }
 input:checked + .section-procedure__5__kostu__title + .section-procedure__5__contents {
   max-height: 2000px;
   transition: all 1.5s ease;
 }
}
.section-procedure__5__image {
  width: 294px;
  margin: 0 auto 20px;
}
@media(min-width: 900px) {
  .section-procedure__5 {
    padding: 60px 0;
  }
  .section-procedure__5__main {
    display: flex;
    box-sizing: border-box;
  }
  .section-procedure__5__description {
    text-align: left;
    padding: 0 48px;
    margin: 0 auto 20px;
    width: 50vw;
  }
  .section-procedure__5__image {
    width: 50vw;
    padding-left: 20px;
    margin: 0;
    box-sizing: border-box;
  }
}
.back-button {
  text-align: right;
  position: relative;
}
.back-button img {
  width: 50px;
}
@media(min-width: 900px) {
  .back-button img {
    display: none;
  }
}