@charset "utf-8";
/* CSS Document */
.section__body {
  padding: 0 22rem;
}
.body-content {
  text-align: left;
  padding: 17rem 0 11rem 13rem;
}
.body-content__image {
  width: 100%;
}
.body-content__image img {
  width: 100%;
}
.body-content__text {
  width: 100%;
}
.body-content__text-odd {
  padding: 0 0 0 8rem;
}
.body-content__text p {
  letter-spacing: 1px;
}
.body-content-genre {
  display: inline-block;
  border: 1px #1f160e solid;
  border-radius: 7px;
  padding: 0.8rem 1rem;
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 2rem;
}
.body-content__text h2 {
  padding: 0 0 3rem;
}
.body-content-date {
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0 0 1rem;
}
.body-content__genre {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.body-genre {
  padding: 3rem 0 0;
  display: flex;
}
.body-genre p {
  padding: 0.3rem 0.5rem;
  margin: 0 1rem 0.5rem 0;
  background-color: #1f160e;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}
.button{
  flex-basis: 25%;
}
.btnchangeline02{
  padding: 1.5rem 23.5%;
}
.body__button02 {
  margin: 3rem auto 13rem;
  display: inline-block;
}
.body__button p {
  font-weight: 600;
  color: #fff;
}
.section__thumbnail {
  padding: 0 22rem 13rem 35rem;
  display: flex;
  justify-content: space-between;
}
.thumbnail_PC {
  max-width: 65rem;
}
.thumbnail_sp {
  max-width: 26rem;
}
.scroll {
  height: 40rem;
  overflow: auto;
}
.scroll img {
  width: 100%;
}
.scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: none;
}
.scroll::-webkit-scrollbar-thumb {
  background: #efc0c2;
}
/*detail*/
.work__detail {
  padding: 0 22rem 4rem 22rem;
  text-align: left;
}
.work__detail h3 {
  padding: 0 0 9rem;
}
.work__detail01 {
  margin: 0 0 9rem 6rem;
  position: relative;
}
.image_detail01 {
  position: absolute;
  top: -16%;
  left: -4%;
  z-index: 0;
}
.image_detail02 {
  position: absolute;
  top: -9%;
  left: -4%;
  z-index: 0;
}
.image_detail03 {
  position: absolute;
  top: -11%;
  left: -4%;
  z-index: 0;
}
.image_detail04 {
  position: absolute;
  top: -13%;
  left: -4%;
  z-index: 0;
}
.work__detail01 h4 {
  padding: 0 0 3rem;
  position: relative;
  z-index: 100;
}
.detail_tool-flex {
  display: flex;
  flex-wrap: wrap;
}
.detail_tool {
  background-color: #efc0c2;
  padding: 1rem 0;
  margin: 0 1rem 2rem 0;
  width: 11rem;
  text-align: center;
}
/*concept*/
.concept_flex {
  display: flex;
  justify-content: space-between;
}
.concept_flex-inner {
  flex-basis: 29%;
}
.concept_flex-inner p {
  padding: 0 0 1rem;
  line-height: 1.6;
}
.concept_color {
  padding: 3rem 0 0;
}
.color_list {
  display: flex;
  justify-content: center;
  padding: 2rem 0 0;
}
.site_color {
  background-color: #fdedd3;
  width: 42rem;
  height: 5rem;
}
.site_color02 {
  background-color: #342211;
  width: 15rem;
  height: 5rem;
}
.site_color03 {
  background-color: #c68d35;
  width: 3rem;
  height: 5rem;
}
.site_color-01 {
  background-color: #fff;
  width: 42rem;
  height: 5rem;
  border:1px solid #000;
}
.site_color-02 {
  background-color: #000;
  width: 15rem;
  height: 5rem;
    border:1px solid #000;
}
.site_color-03 {
  background-color: #fbd739;
  width: 3rem;
  height: 5rem;
    border:1px solid #fbd739;
}
.target-inner {
  padding: 0 0 1rem;
}
.target-inner p {
  padding: 0 0 1rem;
}
.target_title {
  line-height: 1.6;
}
.responsive_tool-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 0 0 12rem;
}
.section__problem{
  padding: 0 0 13rem;
}
.problem__detail {
  padding: 0 22rem 2rem;
  text-align: left;
}
.problem__detail h3 {
  padding: 0 0 6rem;
}
.problem__detail01 {
  padding: 0 7rem 7rem 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.curry-problem{
  display: flex;
}
.curry-problem__detail01 {
  padding: 0 7rem 7rem 5rem;
}

.problem__detail03 {
  padding: 0 5rem 7rem 5rem;
}
.problem__detail01:nth-child(odd) {
  flex-direction: row-reverse;
  padding: 0 5rem 7rem;
}
.problem__inner-text p {
  padding: 2rem 0;
  line-height: 1.6;
}
.problem__inner-text:nth-child(odd) {
  max-width: 47rem;
}
.problem__inner-text span {
  font-size: 1.8rem;
  font-weight: 600;
}
.problem__text {
  line-height: 1.6;
}
.problem__inner-image:first-child img {
  padding: 0 0 3rem;
}
.problem__inner-text__image {
  display: none;
}
/* 矢印の描写 */
.scrolldown4 {
  width: 3px;
  height: 6rem;
  background: #efc0c2;
  margin: 0 auto;
  position: relative;
}
.scrolldown4:after {
  content: "";
  /*描画位置*/
  position: absolute;
  transform: rotate(45deg);
  bottom: -3%;
  left: 160%;
  /*矢印の形状*/
  width: 3px;
  height: 1.5rem;
  background: #efc0c2;
}
@media(max-width:1440px) { 
  .btnchangeline02{
    padding: 1.5rem 20.5%;
  }
  .btnchangeline::before{
    min-width: 22rem;
  }
}
@media(max-width:1200px) {
  .btnchangeline02{
  padding: 1.5rem 10%;
}
  .section__body {
    padding: 0;
  }
  .body-content {
    padding: 17rem 10rem 11rem 30rem;
  }
  .body-content__genre {
    display: block;
  }
  .section__thumbnail {
    padding: 0 10rem 13rem;
  }
  .work__detail {
    padding: 0 10rem 4rem;
  }
  .problem__detail {
    padding: 0 10rem;
  }
  .problem__detail01 {
    padding: 0 0 7rem 5rem;
  }
  .problem__inner-text:nth-child(even) {
    padding: 0 0 0 9rem;
  }
  .problem__inner-text:nth-child(odd) {
    padding: 0;
    max-width: 40rem;
  }
  .problem__inner-image:nth-child(even) {
    padding: 0 0 0 1rem;
  }
  .problem__detail01:nth-child(odd) {
    padding: 0 0 7rem;
  }
  .problem__detail03 {
    padding: 0 0 7rem 5rem;
  }
}
@media(max-width:960px) {
    .btnchangeline02{
    margin: 3rem 0 0;
  }
  .body-content {
    padding: 23rem 5rem 13rem;
  }
  .section__thumbnail {
    display: block;
    padding: 0 5rem;
  }
  .thumbnail_sp {
    padding: 5rem 0 11rem;
    margin: 0 auto;
  }
  .work__detail {
    padding: 0 5rem 5rem;
  }
  .responsive_tool-flex {
    padding: 0;
  }
  .concept_flex {
    display: block;
  }
  .curry-problem{
  flex-wrap: wrap;
}
  .curry-problem__detail01{
    padding: 0 5rem 7rem;
  }
  .problem__detail {
    padding: 0 5rem;
  }
  .problem__detail01 {
    padding: 0 0 9rem;
    flex-direction: column-reverse;
  }
  .problem__detail01:nth-child(odd) {
    flex-direction: column-reverse;
    padding: 0 0 9rem;
  }
  .problem__inner-text:nth-child(even){
    max-width: 80%;
  }
  .problem__inner-text:nth-child(odd) {
    max-width: 80%;
  }
  .problem__inner-text_curry{
    max-width: 100%;
  }
  .problem__detail03 {
    padding: 0 0 7rem;
  }
  .body__button02 {
    margin: 0 auto 13rem;
  }
  .problem__inner-image {
    display: none;
  }
  .problem__inner-text__image {
    display: block;
    text-align: center;
    padding: 0 0 3rem;
  }
}
@media(max-width:540px) {
  .btnchangeline02{
    padding: 1.5rem 15%;
  }
  .body-content {
    padding: 15rem 3rem 7rem;
  }
  .body-genre p {
    font-size: 1.2rem;
    padding: 0.3rem 0.5rem;
    margin: 0 1rem 0.5rem 0;
  }
  .body-content-genre {
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
  }
  .body-genre {
    flex-wrap: wrap;
  }
  .body__button {
    margin: 2.5rem 0 0;
    max-width: 31.5rem;
    width: 100%;
    padding: 1rem 0;
  }
  .section__thumbnail {
    padding: 0 3rem;
  }

  .thumbnail_sp {
    padding: 5rem 0 7rem;
    max-width: 22rem;
  }
  .work__detail {
    padding: 0 3rem;
  }
  .work__detail h3 {
    padding: 0 0 6rem;
    font-size: 2.2rem;
  }
  .work__detail01 {
    margin: 0 0 7rem;
  }
  .image_detail01 {
    top: -11%;
    left: 1%;
  }
  .image_detail01 img, .image_detail02 img, .image_detail03 img, .image_detail04 img {
    width: 86%;
  }
  .image_detail02{
    top: -5%;
    left: 1%;
  }
  .image_detail03{
    top: -6%;
    left: 1%;
  }
  .image_detail04{
    top: -10%;
    left: 2%;
  }
  .work__detail01 h4 {
    padding: 0 0 3rem 2rem;
  }
  .detail_tool {
    width: 9rem;
    padding: 0;
    height: 2.5rem;
  }
  .detail_tool p {
    font-size: 1.2rem;
  }
  .detail_tool-flex {
    justify-content: space-between;
  }
  .concept_flex-inner p {
    padding: 0 0 2rem;
  }
  .concept_flex-inner .p__bold {
    padding: 0 0 1rem;
  }
  .target_title {
    padding: 0 0 2rem;
  }
  .concept_color {
    padding: 0.5rem 0 0;
  }
  .responsive_tool-flex {
    overflow-x: scroll;
    padding: 0 0 2rem;
  }
    .responsive_tool-sp img{
    width: 6rem;
  }
  .responsive_tool-ta img{
    width: 11rem;
  }
  .responsive_tool-PC img{
    width:25rem;
  }

  .problem__top-image{
    width:42%;
  }
  .problem__inner-text__image img {
    width: 70%;
  }
  .problem__inner-text__image01 img {
    width: 58%;
  }
  .work__detail02 {
    margin: 0 0 5rem;
  }
  .responsive_tool {
    padding: 0 3rem 0 0;
  }
  .problem__detail {
    padding: 0 3rem;
  }
  .problem__detail h3 {
    padding: 0 0 4rem;
  }
  .problem__detail01 {
    padding: 0 0 2rem;
  }
  .curry-problem__detail01{
padding:0 0 3rem;
}
  .problem__inner-text:nth-child(odd) {
    max-width: 100%;
  }
  .problem__inner-text p {
    padding: 1.5rem 0 2rem;
  }
  .problem__inner-text__image {
    padding: 0 0 1rem;
  }
  .problem__inner-text span {
    font-size: 1.4rem;
  }
  .problem__detail01:nth-child(odd){
    padding: 0 0 2rem;
  }
  .problem__detail01:nth-child(odd) .problem__inner-text__image img{
    padding: 1rem 0 0;
  }
  .section__problem{
    padding: 0 0 9rem;
  }
  .concept_color {
  padding: 0.5rem 0 0;
}
.color_list {
  padding:1rem 0 0;
}
.site_color,.site_color-01 {
  width: 22rem;
  height: 2.5rem;
}
.site_color02,.site_color-02 {
  width: 7.8rem;
  height: 2.5rem;
}
.site_color03,.site_color-03 {
  width: 1.8rem;
  height: 2.5rem;
}
}
@media(max-width:350px) {
  .body-content{
    padding: 15rem 1rem 7rem;
  }
  .btnchangeline::before{
    min-width: 20rem;
  }
}