@charset "UTF-8";
/*----------------------------------------------------------------------------
******************************************************************************
** function
******************************************************************************
----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------
******************************************************************************
** base color
******************************************************************************
----------------------------------------------------------------------------*/
:root {
  --grad-blue-start: #3df2fa;
  --grad-blue-end: #0984ff;
}

/*--ふくおかBizのページで使用されているメディアクエリのまとめです。scssで利用してください。cssでは使えません！！
@mixin pc_screen_under {
  @media screen and (max-width: 1230px){
    @content;
  }
}
@mixin pc_middle_under {
  @media screen and (max-width: 1200px){
    @content;
  }
}
@mixin pc_to_tablet {
  @media screen and (min-width: 768px) and (max-width: 1199px){
    @content;
  }
}
@mixin tablet_over {
  @media screen and (min-width: 768px){
    @content;
  }
}
@mixin tablet_under {
  @media screen and (max-width: 768px){
    @content;
  }
}
@mixin tablet_to_sp {
  @media screen and (min-width: 599px) and (max-width: 767px) {
    @content;
  }
}
@mixin sp_under {
  @media screen and (max-width: 599px){
    @content;
  }
}


呼び出し方（tablet_underのメディアクエリを呼び出す場合）
@include tablet_under(){
これだけ！この中にcssかいてください
}
-----------------------------------------------------*/
/*----------------------------------------------------------------------------
******************************************************************************
** fadein
******************************************************************************
----------------------------------------------------------------------------*/
.fadein-right, .fadein-left, .fadein-up, .fadein-down, .fadein-zoom {
  opacity: 0;
  transition: all 0.95s ease-out;
}
.fadein-right {
  transform: translateX(50px);
}
.fadein-left {
  transform: translateX(-50px);
}
.fadein-up {
  transform: translateY(50px);
}
.fadein-down {
  transform: translateY(-50px);
}
.fadein-zoom {
  transform: scale(0.9);
}
.fadein-right.is-visible, .fadein-left.is-visible, .fadein-up.is-visible, .fadein-down.is-visible, .fadein-zoom.is-visible {
  opacity: 1;
  transform: none;
}

.fast {
  transition-duration: 0.75s;
}

.sharp {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/*----------------------------------------------------------------------------
******************************************************************************
** style
******************************************************************************
----------------------------------------------------------------------------*/
.pc_only {
  display: block;
}

.sp_only {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .pc_only {
    display: none !important;
  }
  .sp_only {
    display: block !important;
  }
}
.header {
  z-index: 100 !important;
}

figure img {
  display: block;
  margin: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}
ul li {
  list-style-type: none;
}

.pc {
  display: inline;
}

.sp {
  display: none;
}

hr {
  margin: 30px auto !important;
}

@media screen and (max-width: 768px) {
  hr {
    width: 350px;
  }
}
section {
  padding: 0;
}

/* ---------------------------------------------------
お問い合わせ
--------------------------------------------------- */
.magazine_gift_form {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(15px, -8.7804878049px + 6.3414634146vw, 80px) clamp(15px, -32.5609756098px + 12.6829268293vw, 145px);
  background: #E8E8E8;
}
.magazine_gift_form .ttl {
  margin-top: 0 !important;
  margin-bottom: 1em;
  font-size: 28px;
  font-weight: 600;
  color: #232323;
  text-align: center;
}
.magazine_gift_form .ttl.thanks {
  color: #DD001B;
}
.magazine_gift_form .ttl::before {
  display: none;
}
.magazine_gift_form .form {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.magazine_gift_form .form .form_item label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #434343;
  font-size: 1.4rem;
  font-weight: 700;
}
.magazine_gift_form .form .form_item label span {
  padding: 2px 10px;
  color: #DD001B;
  font-size: 1.2rem;
  border: 1px solid #DD001B;
  border-radius: 3px;
}
.magazine_gift_form .form .form_item input:not([type=radio]):not([type=submit]):not([type=checkbox]), .magazine_gift_form .form .form_item textarea, .magazine_gift_form .form .form_item select {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px;
  background: #fff;
  font-size: 1.4rem;
  border: none !important;
  border-radius: 4px;
}
.magazine_gift_form .form .form_item select {
  width: -moz-max-content;
  width: max-content;
}
.magazine_gift_form .form .form_item .wpcf7-not-valid-tip {
  margin-top: 10px;
  font-weight: 700;
  animation: blink 1.5s ease-in-out infinite alternate;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.magazine_gift_form .form .form_item span[class^=confirm-] {
  display: block;
  width: 100%;
  padding: 10px;
  background: #fff;
  font-size: 1.4rem;
  border-radius: 4px;
}
.magazine_gift_form input[type=submit],
.magazine_gift_form input[type=button] {
  display: block;
  width: 190px;
  margin: 0 auto;
  padding: 15px;
  background: #DD001B;
  color: #fff;
  border: 1px solid #DD001B;
  border-radius: 50vh;
  transition: all 0.3s ease;
  cursor: pointer;
}
.magazine_gift_form input[type=submit]:hover,
.magazine_gift_form input[type=button]:hover {
  background: #fff !important;
  color: #DD001B;
}
.magazine_gift_form input[type=submit].confirm_button, .magazine_gift_form input[type=submit].back_button,
.magazine_gift_form input[type=button].confirm_button,
.magazine_gift_form input[type=button].back_button {
  display: block;
  width: 190px !important;
  margin: 0 auto;
  padding: 15px !important;
  background: #B2B2B2 !important;
  color: #000;
  border: 1px solid #B2B2B2 !important;
  border-radius: 50vh !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
}
.magazine_gift_form input[type=submit].confirm_button:hover, .magazine_gift_form input[type=submit].back_button:hover,
.magazine_gift_form input[type=button].confirm_button:hover,
.magazine_gift_form input[type=button].back_button:hover {
  background: #fff !important;
}

.wpcf7 input:not([type=radio]):not([type=submit]):not([type=checkbox]):focus,
.wpcf7 textarea:focus,
.wpcf7-select:focus {
  background: #fff;
}

.wpcf7 textarea {
  width: 100%;
}

.wpcf7 input:checked + span {
  font-weight: 700;
  position: relative;
}

.wpcf7 input:checked + span:after {
  content: "";
  border-radius: 50%;
  border: 3px solid #455a64;
  position: absolute;
  left: 4.5px;
  top: calc(50% - 3px);
}

.wpcf7 input[type=submit]:hover,
.wpcf7 input[type=button]:hover {
  box-shadow: 0 8px 4px -4px rgba(0, 0, 0, 0.3);
}

.wpcf7 div[role=alert],
.wpcf7 span[role=alert] {
  color: #f44336;
  display: block;
}/*# sourceMappingURL=magazine_gift.css.map */