@charset "UTF-8";
#anpanman {
  /* 共通 */
  /* study_mv */
  /* study_cont */
  /* link_box */ }
  #anpanman .study_mv h1, #anpanman .study_mv h2, #anpanman .study_mv h3, #anpanman .study_mv p,
  #anpanman .study_cont h1,
  #anpanman .study_cont h2,
  #anpanman .study_cont h3,
  #anpanman .study_cont p {
    margin: 0; }
  #anpanman .study_mv img,
  #anpanman .study_cont img {
    display: block; }
  #anpanman .study_mv a,
  #anpanman .study_cont a {
    color: #000;
    display: block;
    outline: none;
    text-decoration: none; }
    #anpanman .study_mv a:hover,
    #anpanman .study_cont a:hover {
      opacity: 0.8; }
  #anpanman .study_mv ul,
  #anpanman .study_cont ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  #anpanman .study_mv span,
  #anpanman .study_cont span {
    display: inline-block; }
  #anpanman .study_mv {
    background-color: #fffcbf;
    background-image: url(../img/study/mv_bg.png); }
    @media screen and (max-width: 768px) {
      #anpanman .study_mv {
        background-image: url(../img/study/mv_bg_sp.png); } }
  @media screen and (max-width: 768px) {
    #anpanman .study_cont:before {
      background-color: #e0f6ec; } }
  #anpanman .study_cont > div {
    padding: 95px 0 55px;
    background: #e0f6ec url(../img/study/bg.png) no-repeat;
    background-size: 1280px;
    background-position: top 30px center; }
    @media screen and (max-width: 768px) {
      #anpanman .study_cont > div {
        padding: 0 0 8vw;
        background-image: none; } }
    #anpanman .study_cont > div .wrapper {
      max-width: 950px; }
      #anpanman .study_cont > div .wrapper > ul {
        display: flex; }
        #anpanman .study_cont > div .wrapper > ul li a {
          padding-bottom: 30px; }
          @media screen and (max-width: 768px) {
            #anpanman .study_cont > div .wrapper > ul li a {
              padding-bottom: 5vw; } }
          #anpanman .study_cont > div .wrapper > ul li a .link_btn2 {
            width: 80%;
            margin-top: 30px; }
            @media screen and (max-width: 768px) {
              #anpanman .study_cont > div .wrapper > ul li a .link_btn2 {
                margin-top: 4vw; } }
  @media screen and (min-width: 769px) {
    #anpanman .study_cont.process > div {
      padding: 75px 0; } }
  @media screen and (max-width: 768px) {
    #anpanman .study_cont.process > div {
      position: relative; }
      #anpanman .study_cont.process > div:after {
        content: "";
        width: 100%;
        height: calc(100% + 10vw);
        background: url(../img/study/bg_sp.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: -10vw;
        left: 0; } }
  #anpanman .study_cont.process > div .wrapper {
    padding: 0 75px 35px;
    background-color: #fff;
    border: 4px #008bd5 solid;
    border-radius: 20px;
    margin-top: 75px;
    position: relative;
    z-index: 9; }
    @media screen and (max-width: 768px) {
      #anpanman .study_cont.process > div .wrapper {
        width: 93%;
        padding: 0 4% 5%;
        border-width: 0.8vw;
        border-radius: 3vw;
        margin-top: 5vw; } }
    #anpanman .study_cont.process > div .wrapper:after {
      content: "";
      width: calc(100% + 8px);
      height: 190px;
      background-color: #fff;
      border: 4px #008bd5 solid;
      border-bottom: none;
      box-sizing: border-box;
      border-radius: 50% 50% 0 0;
      position: absolute;
      top: -80px;
      left: -4px;
      z-index: -1; }
      @media screen and (max-width: 768px) {
        #anpanman .study_cont.process > div .wrapper:after {
          width: calc(100% + 1.6vw);
          height: 27vw;
          border-width: 0.8vw;
          top: -11vw;
          left: -0.8vw; } }
    #anpanman .study_cont.process > div .wrapper .text_box {
      padding-left: 110px;
      margin: -15px 0 30px;
      position: relative; }
      @media screen and (max-width: 768px) {
        #anpanman .study_cont.process > div .wrapper .text_box {
          padding-left: 18%;
          margin: -3vw 0 5vw; } }
      #anpanman .study_cont.process > div .wrapper .text_box:after {
        content: "";
        width: 105px;
        height: 155px;
        background: url(../img/study/process_illust.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: -25px;
        left: 60px; }
        @media screen and (max-width: 768px) {
          #anpanman .study_cont.process > div .wrapper .text_box:after {
            width: 23.8%;
            height: 23.5vw;
            background-image: url(../img/study/process_illust_sp.png);
            top: 1.2vw;
            left: 0; } }
      #anpanman .study_cont.process > div .wrapper .text_box h2 {
        width: 570px;
        padding: 20px 0;
        background-color: #008bd5;
        border-radius: 50px;
        margin: 0 auto 15px; }
        @media screen and (max-width: 768px) {
          #anpanman .study_cont.process > div .wrapper .text_box h2 {
            width: 78%;
            padding: 2.5vw 0;
            border-radius: 5vw;
            margin-bottom: 2vw; } }
        #anpanman .study_cont.process > div .wrapper .text_box h2 img {
          height: 40px;
          margin: 0 auto; }
          @media screen and (max-width: 768px) {
            #anpanman .study_cont.process > div .wrapper .text_box h2 img {
              height: 11vw; } }
      #anpanman .study_cont.process > div .wrapper .text_box p img {
        height: 27px;
        margin: 0 auto; }
        @media screen and (max-width: 768px) {
          #anpanman .study_cont.process > div .wrapper .text_box p img {
            height: 3.8vw; } }
    #anpanman .study_cont.process > div .wrapper .making {
      padding: 15px 25px 25px;
      background: url(../img/study/process_bg.jpg) no-repeat;
      background-size: cover;
      box-shadow: 5px 5px 0 #c78442;
      border-radius: 10px;
      margin-bottom: 40px;
      position: relative; }
      @media screen and (max-width: 768px) {
        #anpanman .study_cont.process > div .wrapper .making {
          padding: 3% 6% 6%;
          background-repeat: repeat-y;
          background-size: 100%;
          box-shadow: 1vw 1vw 0 #c78442;
          border-radius: 1.5vw;
          margin-bottom: 7vw; } }
      #anpanman .study_cont.process > div .wrapper .making:after {
        content: "※上記イラストはイメージです";
        font-size: 12px;
        font-weight: bold;
        color: #471c07;
        position: absolute;
        right: 0;
        bottom: -30px; }
        @media screen and (max-width: 768px) {
          #anpanman .study_cont.process > div .wrapper .making:after {
            font-size: 2.5vw;
            bottom: -6vw; } }
      #anpanman .study_cont.process > div .wrapper .making h3 {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        margin-bottom: 10px; }
        @media screen and (max-width: 768px) {
          #anpanman .study_cont.process > div .wrapper .making h3 {
            margin-bottom: 2.5vw; } }
        #anpanman .study_cont.process > div .wrapper .making h3:before {
          content: "";
          width: 58px;
          height: 90px;
          background: url(../img/study/process_item01.png) no-repeat;
          background-size: 100%;
          display: block;
          margin-right: 5px; }
          @media screen and (max-width: 768px) {
            #anpanman .study_cont.process > div .wrapper .making h3:before {
              width: 15.5%;
              height: 18vw;
              margin-right: 2vw; } }
        #anpanman .study_cont.process > div .wrapper .making h3 img {
          height: 58px; }
          @media screen and (max-width: 768px) {
            #anpanman .study_cont.process > div .wrapper .making h3 img {
              height: 17.5vw; } }
      #anpanman .study_cont.process > div .wrapper .making .img_box {
        padding: 30px 0 20px;
        background-color: #fff;
        border-radius: 10px; }
        @media screen and (max-width: 768px) {
          #anpanman .study_cont.process > div .wrapper .making .img_box {
            padding: 4vw 0;
            border-radius: 1.5vw; } }
        #anpanman .study_cont.process > div .wrapper .making .img_box img {
          width: 100%; }
    #anpanman .study_cont.process > div .wrapper .list {
      padding-bottom: 70px;
      background: url(../img/study/process_cloud.png) no-repeat;
      background-size: 100%;
      background-position: bottom;
      position: relative; }
      @media screen and (max-width: 768px) {
        #anpanman .study_cont.process > div .wrapper .list {
          padding-bottom: 9vw;
          background-image: url(../img/study/process_cloud_sp.png); } }
      #anpanman .study_cont.process > div .wrapper .list:after {
        content: "";
        width: 195px;
        height: 100px;
        background: url(../img/study/process_star.png) no-repeat;
        background-size: 100%;
        position: absolute;
        bottom: 45px;
        left: -20px; }
        @media screen and (max-width: 768px) {
          #anpanman .study_cont.process > div .wrapper .list:after {
            width: 17vw;
            height: 9vw;
            bottom: 8vw;
            left: -2vw; } }
      #anpanman .study_cont.process > div .wrapper .list ul {
        display: flex;
        justify-content: center;
        margin-bottom: 15px; }
        @media screen and (max-width: 768px) {
          #anpanman .study_cont.process > div .wrapper .list ul {
            margin-bottom: 4vw; } }
        #anpanman .study_cont.process > div .wrapper .list ul li {
          margin: 0 2px; }
          @media screen and (max-width: 768px) {
            #anpanman .study_cont.process > div .wrapper .list ul li {
              margin: 0 0.5vw; } }
          #anpanman .study_cont.process > div .wrapper .list ul li img {
            height: 200px; }
            @media screen and (max-width: 768px) {
              #anpanman .study_cont.process > div .wrapper .list ul li img {
                height: 21.5vw; } }
      #anpanman .study_cont.process > div .wrapper .list p img {
        height: 78px;
        margin: 0 auto; }
        @media screen and (max-width: 768px) {
          #anpanman .study_cont.process > div .wrapper .list p img {
            height: 10vw; } }
  #anpanman .link_box {
    background-color: #fffcbf; }

/*# sourceMappingURL=study.css.map */