@charset "UTF-8";
/*============================================
responsive
============================================*/
/*============================================
utility
============================================*/
.pc-only {
  display: block; }
  @media screen and (max-width: 897px) {
    .pc-only {
      display: none; } }

.sp-only {
  display: none; }
  @media screen and (max-width: 897px) {
    .sp-only {
      display: block; } }

/* inner 共通（幅だけ引数） */
/* セクション見出し（下のライン＋中央＋::after） */
/* giftee青グラボタン（about） */
/* 応募フォーム黄色ボタン（form） */
/*============================================
main
============================================*/
#giftee {
  font-weight: 400;
  /*============================================
  main visual
  ============================================*/
  /*============================================
  schedule
  ============================================*/
  /*============================================
  headline
  ============================================*/
  /*============================================
  about
  ============================================*/
  /*============================================
  form
  ============================================*/
  /*============================================
  flow
  ============================================*/
  /*============================================
  summary
  ============================================*/ }
  #giftee .inner {
    max-width: 840px;
    margin: auto;
    padding: 120px 0; }
    @media screen and (max-width: 897px) {
      #giftee .inner {
        padding: 40px 20px; } }
  #giftee .inner2 {
    max-width: 1040px;
    margin: auto;
    padding: 120px 0; }
    @media screen and (max-width: 897px) {
      #giftee .inner2 {
        padding: 40px 20px; } }
  #giftee .giftee__main {
    background: url("../img/giftee/bg-main.png");
    background-size: cover;
    position: relative; }
    #giftee .giftee__main__pankuzu {
      position: absolute;
      right: 20px;
      top: 120px; }
      #giftee .giftee__main__pankuzu ul {
        font-size: 1.5rem;
        font-weight: 500;
        display: flex;
        justify-content: flex-end; }
        #giftee .giftee__main__pankuzu ul li:first-of-type {
          padding: 0 10px 0 0; }
          #giftee .giftee__main__pankuzu ul li:first-of-type::after {
            padding: 0 0 0 10px;
            content: "/"; }
      @media screen and (max-width: 897px) {
        #giftee .giftee__main__pankuzu {
          right: 10px;
          top: 70px; }
          #giftee .giftee__main__pankuzu ul {
            font-size: 1.2rem; } }
    #giftee .giftee__main__img {
      max-width: 1357px;
      margin: auto;
      padding: 120px 20px 20px 20px; }
      #giftee .giftee__main__img img {
        max-width: 100%;
        height: auto; }
      @media screen and (max-width: 897px) {
        #giftee .giftee__main__img .sp-only {
          width: 80%;
          height: auto;
          margin: 0 auto; } }
  #giftee .giftee__schedule {
    background: #0077B8;
    color: #fff;
    padding: 15px 0; }
    #giftee .giftee__schedule dl {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      font-size: 2.0rem;
      font-weight: 600;
      letter-spacing: 1px; }
      #giftee .giftee__schedule dl dt {
        font-weight: 400; }
      #giftee .giftee__schedule dl dd span {
        font-size: 3.0rem; }
    @media screen and (max-width: 897px) {
      #giftee .giftee__schedule {
        padding: 7px 0 10px 0; }
        #giftee .giftee__schedule dl {
          gap: 10px;
          font-size: 1.4rem;
          display: block; }
          #giftee .giftee__schedule dl dt, #giftee .giftee__schedule dl dd {
            width: 100%;
            text-align: center; }
          #giftee .giftee__schedule dl dd span {
            font-size: 1.4rem; } }
  #giftee .giftee__headline {
    background: linear-gradient(to bottom, #F5FAFF 0%, #E5F4FF 30%, #E5F4FF 100%);
    text-align: center;
    font-size: 2.0rem;
    line-height: 1.7; }
    #giftee .giftee__headline__top {
      padding: 0 0 90px 0; }
      #giftee .giftee__headline__top p:not(:last-of-type) {
        padding: 0 0 30px 0; }
        @media screen and (max-width: 897px) {
          #giftee .giftee__headline__top p:not(:last-of-type) {
            padding: 0 0 15px 0; } }
      @media screen and (max-width: 897px) {
        #giftee .giftee__headline__top {
          padding: 0 0 20px 0; } }
    #giftee .giftee__headline__middle {
      padding: 0 0 90px 0; }
      #giftee .giftee__headline__middle img {
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
      @media screen and (max-width: 897px) {
        #giftee .giftee__headline__middle {
          padding: 0 0 20px 0; } }
    #giftee .giftee__headline__bottom p span {
      color: #F2583D; }
    #giftee .giftee__headline__bottom .inbox {
      display: flex;
      justify-content: space-between;
      padding: 45px 0; }
      #giftee .giftee__headline__bottom .inbox__item {
        background: #fff;
        border-radius: 15px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        padding: 45px;
        width: 48%; }
        #giftee .giftee__headline__bottom .inbox__item .txt h3 {
          color: #0077B8;
          font-size: 2.3rem;
          padding: 8px 0 0 0; }
          @media screen and (max-width: 897px) {
            #giftee .giftee__headline__bottom .inbox__item .txt h3 {
              font-size: 2.0rem; } }
        #giftee .giftee__headline__bottom .inbox__item .txt p {
          font-size: 1.8rem; }
          @media screen and (max-width: 897px) {
            #giftee .giftee__headline__bottom .inbox__item .txt p {
              font-size: 1.6rem; } }
        #giftee .giftee__headline__bottom .inbox__item .img img {
          max-width: 100%;
          min-height: 180px; }
        @media screen and (max-width: 897px) {
          #giftee .giftee__headline__bottom .inbox__item {
            width: 100%;
            padding: 20px;
            margin: 20px 0 0 0;
            text-align: center; } }
      @media screen and (max-width: 897px) {
        #giftee .giftee__headline__bottom .inbox {
          display: block;
          padding: 0 0 20px 0; } }
    #giftee .giftee__headline__bottom .caption {
      color: #0077B8;
      padding: 30px 0 0 0;
      border-top: 1px solid #0077B8; }
      @media screen and (max-width: 897px) {
        #giftee .giftee__headline__bottom .caption {
          padding: 15px 0 0 0; } }
    @media screen and (max-width: 897px) {
      #giftee .giftee__headline {
        font-size: 1.6rem;
        text-align: left; } }
  #giftee .giftee__about {
    background: url(../img/giftee/bg-about.png);
    background-size: cover; }
    #giftee .giftee__about h2 {
      color: #0077B8;
      text-align: center;
      padding: 0 0 20px 0;
      margin: 0 0 40px 0;
      border-bottom: 1px solid #E3EAF4;
      font-size: 3.2rem; }
      #giftee .giftee__about h2 img {
        vertical-align: middle; }
        @media screen and (max-width: 897px) {
          #giftee .giftee__about h2 img {
            max-width: 70%;
            max-height: 70%; } }
      @media screen and (max-width: 897px) {
        #giftee .giftee__about h2 {
          padding: 0 0 10px 0;
          margin: 0 0 20px 0;
          font-size: 2.4rem; } }
    #giftee .giftee__about p {
      text-align: center; }
      @media screen and (max-width: 897px) {
        #giftee .giftee__about p {
          text-align: left; } }
    #giftee .giftee__about .btn {
      max-width: 360px;
      margin: 40px auto auto auto; }
      #giftee .giftee__about .btn .btn-giftee {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 10px;
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        background: linear-gradient(90deg, #199CED 0%, #19B6ED 100%);
        border: 1px solid rgba(25, 156, 237, 0.95);
        box-shadow: 0 10px 18px rgba(25, 156, 237, 0.28);
        transition: filter 0.2s ease, transform 0.15s ease; }
        #giftee .giftee__about .btn .btn-giftee:hover {
          filter: brightness(1.02); }
        #giftee .giftee__about .btn .btn-giftee:active {
          transform: translateY(1px); }
        #giftee .giftee__about .btn .btn-giftee .btn-giftee__text {
          padding: 0 64px;
          text-align: center;
          line-height: 1.2; }
        #giftee .giftee__about .btn .btn-giftee .btn-giftee__icon {
          position: absolute;
          right: 14px;
          top: 50%;
          transform: translateY(-50%);
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #fff;
          display: grid;
          place-items: center;
          color: #199CED;
          font-size: 18px;
          font-weight: 900; }
      @media screen and (max-width: 897px) {
        #giftee .giftee__about .btn {
          margin: 20px 0 0 0; } }
  #giftee .giftee__form {
    background: url(../img/giftee/bg-form.png);
    background-size: cover; }
    #giftee .giftee__form .giftee__box {
      max-width: 540px;
      margin: auto;
      text-align: center; }
      #giftee .giftee__form .giftee__box .btn {
        max-width: 540px;
        margin: 15px auto 0 auto; }
        #giftee .giftee__form .giftee__box .btn a {
          width: 100%;
          height: 90px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          font-size: 3.0rem;
          text-decoration: none;
          font-weight: 700;
          color: #F2583D;
          border-radius: 15px;
          background: linear-gradient(180deg, #FFF6AF 0%, #FEED60 50%, #FEED60 100%);
          border: 2px solid #199CED;
          /* 内側白3px枠（outline方式） */
          outline: 3px solid #fff;
          outline-offset: -5px;
          box-shadow: 0 12px 22px rgba(25, 156, 237, 0.25);
          transition: filter 0.2s ease, transform 0.15s ease; }
          #giftee .giftee__form .giftee__box .btn a:hover {
            filter: brightness(1.02); }
          #giftee .giftee__form .giftee__box .btn a:active {
            transform: translateY(1px); }
          #giftee .giftee__form .giftee__box .btn a::after {
            content: "→";
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: #fff;
            display: grid;
            place-items: center;
            color: #F2583D;
            font-size: 18px;
            font-weight: 900; }
            @media screen and (max-width: 897px) {
              #giftee .giftee__form .giftee__box .btn a::after {
                width: 23px;
                height: 23px;
                font-size: 9px; } }
          @media screen and (max-width: 897px) {
            #giftee .giftee__form .giftee__box .btn a {
              height: 55px;
              font-size: 1.8rem; } }
  #giftee .giftee__flow {
    background: linear-gradient(to bottom, #F5FAFF 0%, #E5F4FF 30%, #E5F4FF 100%); }
    #giftee .giftee__flow__headline h2 {
      color: #0077B8;
      text-align: center;
      padding: 0 0 20px 0;
      margin: 0 0 40px 0;
      font-size: 2.8rem;
      position: relative; }
      #giftee .giftee__flow__headline h2::after {
        position: absolute;
        content: "";
        width: 30px;
        height: 2px;
        background: #19B6ED;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); }
      @media screen and (max-width: 897px) {
        #giftee .giftee__flow__headline h2 {
          padding: 0 0 10px 0;
          margin: 0 0 20px 0;
          font-size: 2rem; } }
    #giftee .giftee__flow__box {
      display: flex;
      justify-content: space-between;
      gap: 50px; }
      @media screen and (max-width: 897px) {
        #giftee .giftee__flow__box {
          display: block; } }
      #giftee .giftee__flow__box__item {
        width: 48%;
        background: #fff;
        border-radius: 15px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: relative;
        /* 共通（中身） */ }
        @media screen and (max-width: 897px) {
          #giftee .giftee__flow__box__item {
            width: 100%; } }
        #giftee .giftee__flow__box__item .headline {
          background: #0077B8;
          border-radius: 15px 15px 0 0;
          padding: 15px;
          text-align: center; }
          #giftee .giftee__flow__box__item .headline span {
            color: #fff;
            font-size: 2.0rem;
            font-weight: 700; }
            #giftee .giftee__flow__box__item .headline span:first-of-type {
              padding: 0 10px 0 0; }
              #giftee .giftee__flow__box__item .headline span:first-of-type::after {
                padding: 0 0 0 10px;
                content: "|"; }
            @media screen and (max-width: 897px) {
              #giftee .giftee__flow__box__item .headline span {
                font-size: 1.8rem; } }
        #giftee .giftee__flow__box__item .img {
          text-align: center;
          padding: 30px 30px 20px 30px; }
          @media screen and (max-width: 897px) {
            #giftee .giftee__flow__box__item .img {
              padding: 15px 15px 10px 15px; } }
        #giftee .giftee__flow__box__item .txt {
          background: #F5FAFF;
          margin: 0 30px 30px 30px;
          padding: 15px;
          border-radius: 10px; }
          @media screen and (max-width: 897px) {
            #giftee .giftee__flow__box__item .txt {
              margin: 0;
              border-radius: 0 0 15px 15px;
              font-size: 1.6rem; } }
        #giftee .giftee__flow__box__item:first-of-type {
          /* 右向き三角（本体） */ }
          #giftee .giftee__flow__box__item:first-of-type .headline {
            background: #19B6ED; }
          #giftee .giftee__flow__box__item:first-of-type::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -26px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
            border-left: 26px solid #fff;
            z-index: 2; }
            @media screen and (max-width: 897px) {
              #giftee .giftee__flow__box__item:first-of-type::after {
                display: none; } }
          @media screen and (max-width: 897px) {
            #giftee .giftee__flow__box__item:first-of-type {
              margin: 0 0 20px 0; } }
  #giftee .giftee__summary__headline h2 {
    color: #0077B8;
    text-align: center;
    padding: 0 0 20px 0;
    margin: 0 0 40px 0;
    font-size: 2.8rem;
    position: relative; }
    #giftee .giftee__summary__headline h2::after {
      position: absolute;
      content: "";
      width: 30px;
      height: 2px;
      background: #19B6ED;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%); }
    @media screen and (max-width: 897px) {
      #giftee .giftee__summary__headline h2 {
        padding: 0 0 10px 0;
        margin: 0 0 20px 0;
        font-size: 2rem; } }
  #giftee .giftee__summary__box {
    background: #fff;
    padding: 45px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
    @media screen and (max-width: 897px) {
      #giftee .giftee__summary__box {
        padding: 15px; } }
    #giftee .giftee__summary__box dl {
      padding: 0 0 20px 0; }
      @media screen and (max-width: 897px) {
        #giftee .giftee__summary__box dl {
          padding: 0 0 10px 0; } }
      #giftee .giftee__summary__box dl div {
        display: flex;
        justify-content: space-between;
        padding: 0 0 20px 0; }
        @media screen and (max-width: 897px) {
          #giftee .giftee__summary__box dl div {
            display: block;
            padding: 0 0 10px 0; } }
        #giftee .giftee__summary__box dl div dt {
          width: 20%;
          font-weight: 700; }
          @media screen and (max-width: 897px) {
            #giftee .giftee__summary__box dl div dt {
              width: 100%; } }
        #giftee .giftee__summary__box dl div dd {
          width: 80%; }
          @media screen and (max-width: 897px) {
            #giftee .giftee__summary__box dl div dd {
              width: 100%; } }
  #giftee .giftee__summary__caution {
    background: #F5FAFF;
    padding: 25px;
    border-radius: 10px; }
    @media screen and (max-width: 897px) {
      #giftee .giftee__summary__caution {
        padding: 20px; } }
    #giftee .giftee__summary__caution h3 {
      font-size: 1.6rem;
      padding: 0 0 5px 0; }
    #giftee .giftee__summary__caution p {
      font-size: 1.5rem;
      line-height: 1.7;
      padding: 10px 0 0 0; }