@charset "UTF-8";
/* ----------------------------------------------------------
   #GLOBAL
---------------------------------------------------------- */
/* ラインナップ 一覧
----- page/_archive-lineup ----- */
.lineup_ttl_wrap {
  position: relative;
  overflow: hidden;
}
.lineup_ttl_wrap img {
  height: 290px;
  width: 100%;
  object-fit: cover;
}
.lineup_ttl_wrap h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 25px 5px;
  border-radius: 5px 5px 0 0;
}
.lineup_ttl_wrap h2::before {
  content: "";
  background: url("../img/tp-lineup_ttl_deco.svg") center/cover no-repeat;
  display: block;
  width: 100%;
  height: 18%;
  position: absolute;
  left: 0;
  bottom: -16%;
}

@media screen and (max-width: 960px) {
  .lineup_ttl_wrap h2 {
    width: 100%;
    max-width: 230px;
    top: calc(50% + 25px);
  }
  .lineup_ttl_wrap img {
    height: 280px;
  }
}
.lineup_link {
  display: block;
  position: relative;
}
.lineup_link:hover img {
  scale: 1.1;
}
.lineup_link:hover .lineup_appeal::before {
  animation: rotate 12s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lineup_appeal {
  width: 70px;
  height: 70px;
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1;
  color: #fff;
  font-weight: 500;
  line-height: 1.2;
  font-size: 1.4rem;
  z-index: 1;
}
.lineup_appeal::before {
  content: "";
  background-color: #0976A3;
  mask-image: url("../img/lineup_appeal.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s;
}
.lineup_appeal p {
  width: 100%;
  padding: 5px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.light .lineup_appeal::before {
  background-color: #0976A3;
}

.standard .lineup_appeal::before {
  background-color: #F39800;
}

.premium .lineup_appeal::before {
  background-color: #EB6EA0;
}

.photo .lineup_appeal::before {
  background-color: #007B43;
}

.lineup_grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.lineup_img {
  width: calc(50% - 10px);
}

.lineup_slide, .lineup_slide .slick-list, .lineup_slide .slick-track {
  height: 100%;
}
.lineup_slide .slick-dots {
  display: flex;
  justify-content: center;
  color: transparent;
  margin-top: 5px;
  height: 15px;
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: 5px;
  translate: -50%;
}
.lineup_slide .slick-dots li {
  width: 15px;
}
.lineup_slide .slick-dots button {
  color: transparent;
  width: 15px;
  height: 15px;
  position: absolute;
}
.lineup_slide .slick-dots button::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.lineup_slide .slick-dots .slick-active button::before {
  background-color: #DC69A5;
}

.lineup_item {
  height: 100%;
}
.lineup_item figure {
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
}
.lineup_item img {
  height: 100%;
  object-fit: cover;
}

.lineup_text {
  width: calc(50% - 10px);
  color: #333;
  padding: 25px 20px 15px 20px;
  background-color: #FBF0F6;
  border-radius: 5px;
}
.lineup_text h3 {
  color: #DC69A5;
}

.lineup_per_price {
  padding: 10px 15px;
  text-align: center;
  color: #fff;
  background-color: #DC69A5;
  border-radius: 5px;
  font-size: 1.6rem;
}
.lineup_per_price strong {
  font-size: 3.2rem;
  padding-left: 2px;
  line-height: 1.5;
  font-weight: 500;
}

.lineup_specification {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 1px;
}
.lineup_specification dt {
  color: #fff;
  background-color: #DC69A5;
  font-weight: 500;
  text-align: center;
  min-width: 75px;
  padding: 6px 10px 5px;
  max-width: 90px;
  border-radius: 5px 0px 0px 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lineup_specification dd {
  padding: 5px 10px;
  border-radius: 0px 5px 5px 0px;
  background-color: #fff;
}
.lineup_specification dd small {
  font-size: 1.2rem;
  display: inline-block;
}

@media screen and (max-width: 960px) {
  .lineup_item figure {
    width: 100%;
    position: relative;
    padding-top: 62.5%;
  }
  .lineup_item img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover;
  }
  .lineup_img, .lineup_text {
    width: 100%;
  }
  .lineup_text {
    padding: 20px 15px 15px 15px;
  }
  .lineup_appeal {
    width: 60px;
    height: 60px;
    top: -5px;
    left: -5px;
  }
  .lineup_appeal p {
    font-size: 1.3rem;
  }
}
/* 色変更 */
.photo .lineup_text {
  background-color: #E5F2EC;
}
.photo .lineup_text h3 {
  color: #007B43;
}
.photo :is(.lineup_per_price, .lineup_specification dt) {
  background: #007B43;
}

.premium .lineup_text {
  background-color: #FDF0F5;
}
.premium .lineup_text h3 {
  color: #EB6EA0;
}
.premium :is(.lineup_per_price, .lineup_specification dt) {
  background: #EB6EA0;
}

.standard .lineup_text {
  background-color: #FEF5E5;
}
.standard .lineup_text h3 {
  color: #F39800;
}
.standard :is(.lineup_per_price, .lineup_specification dt) {
  background: #F39800;
}

.light .lineup_text {
  background-color: #EBF9FF;
}
.light .lineup_text h3 {
  color: #0976A3;
}
.light :is(.lineup_per_price, .lineup_specification dt) {
  background: #0976A3;
}

/*----- 4つのタイプ比較 -----*/
.lineup_compare_wrap {
  overflow-x: auto;
  width: calc(100% + 15px);
  padding-right: 15px;
}

.lineup_compare {
  table-layout: fixed;
  width: 100%;
  min-width: 450px;
  border-collapse: separate;
}
.lineup_compare th {
  font-weight: 500;
}
.lineup_compare tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}
.lineup_compare tbody tr:not(.lineup_paid_ttl) th {
  display: flex;
  align-items: center;
  padding: 10px 0 10px 15px;
}
.lineup_compare tbody tr:not(.lineup_paid_ttl) th > span {
  max-width: calc(100% - 30px);
}
.lineup_compare td {
  text-align: center;
}
.lineup_compare td:nth-child(3) .suitable {
  background-color: #F39800;
}
.lineup_compare td:nth-child(4) .suitable {
  background-color: #EB6EA0;
}
.lineup_compare td:nth-child(5) .suitable {
  background-color: #007B43;
}
.lineup_compare .suitable {
  display: block;
  background-color: #0976a3;
  mask-image: url("../img/lineup_suitable.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  height: 20px;
  color: transparent;
}
.lineup_compare .exception {
  mask-image: url("../img/lineup_exception.svg");
}

.lineup_type_ttl th:not(:first-child) {
  padding: 0 5px;
}
.lineup_type_ttl th:not(:first-child) span {
  display: block;
  color: #fff;
  background-color: #0976A3;
  font-size: 1.7rem;
  line-height: 1.5;
  text-align: center;
  padding: 7px 5px 5px 5px;
  border-radius: 5px;
}
.lineup_type_ttl th:not(:first-child):nth-child(3) span {
  background-color: #F39800;
}
.lineup_type_ttl th:not(:first-child):nth-child(4) span {
  background-color: #EB6EA0;
}
.lineup_type_ttl th:not(:first-child):nth-child(5) span {
  background-color: #007B43;
}
.lineup_type_ttl th:not(:first-child) small {
  display: block;
  font-size: 85%;
}

.lineup_paid_ttl th {
  padding: 15px 0;
}
.lineup_paid_ttl span {
  display: block;
  color: #fff;
  background-color: #333;
  text-align: center;
  border-radius: 5px;
  padding: 3px 5px;
}

@media screen and (max-width: 960px) {
  .lineup_compare_wrap {
    width: calc(100% + 15px);
  }
  .lineup_compare tr {
    display: flex;
    flex-wrap: wrap;
  }
  .lineup_compare th {
    font-weight: 600;
  }
  .lineup_compare tbody tr:nth-child(even) {
    background-color: transparent;
  }
  .lineup_compare tbody tr:not(.lineup_paid_ttl) th {
    background-color: #f5f5f5;
    padding: 5px 15px;
  }
  .lineup_compare tbody th {
    width: 100%;
    justify-content: center;
  }
  .lineup_compare td {
    width: 25%;
    padding: 15px 5px;
  }
  .lineup_type_ttl {
    margin: 0 0 10px;
    position: sticky;
    top: 70px;
    left: 0;
  }
  .lineup_type_ttl th:first-child {
    width: 0;
  }
  .lineup_type_ttl th:not(:first-child) {
    width: 25%;
  }
  .lineup_type_ttl th:not(:first-child) span {
    font-size: 1.4rem;
  }
  .lineup_type_ttl th:not(:first-child) small {
    display: none;
  }
  .lineup_paid_ttl th {
    padding: 5px 0 10px;
  }
}
/*----- 無料プション -----*/
.lineup-option h4 {
  font-size: 1.7rem;
  padding-left: 45px;
  position: relative;
}
.lineup-option h4::before {
  content: "";
  background: url("../img/ico-option_free.svg") center/cover no-repeat;
  position: absolute;
  width: 40px;
  height: 40px;
  display: block;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.lineup-option strong {
  font-size: 2rem;
  background: linear-gradient(transparent 85%, #0976A3 25%);
  padding-bottom: 5px;
}

.lineup-option_pu {
  padding: 30px 15px;
}

.lineup-option_pu_grid {
  max-width: 700px;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 15px 55px;
  align-items: center;
  margin: 0 auto;
}

.lineup-option_pu_text h5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
}

.lineup-option_item {
  padding-left: calc(25% + 10px);
  position: relative;
}
.lineup-option_item figure {
  width: 25%;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}

@media screen and (max-width: 960px) {
  .lineup-option_pu_grid {
    grid-template-columns: 100%;
  }
  .lineup-option_pu_img {
    width: 80%;
    margin: 5px auto;
    max-width: 200px;
  }
  .lineup-option_item {
    padding: 0;
  }
  .lineup-option_ttl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .lineup-option_ttl figure {
    position: initial;
    width: 50px;
    translate: none;
  }
}
/* ラインナップ 詳細
----- page/_single-lineup ----- 
class名は「 s_lineup 」で始める */
/* 商品画像・簡易見積もり */
.s_lineup_estimate_wrap {
  width: 100%;
  max-width: 870px;
  margin: 0 auto;
  padding: 0 15px;
}

.s_lineup_estimate_grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 35px;
}

.s_lineup_slider {
  width: 50%;
  max-width: calc(100% - 300px);
}

.s_lineup_main_item img {
  aspect-ratio: 48/35;
  border-radius: 5px;
  object-fit: cover;
}

.s_lineup_thumb {
  padding: 0 25px;
}
.s_lineup_thumb .slick-arrow {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  color: transparent;
  z-index: 1;
}
.s_lineup_thumb .slick-arrow::before {
  content: "";
  background: url("../img/arrow_btn.svg") center/cover no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: 0.3s;
}
.s_lineup_thumb .slick-prev {
  left: -10px;
}
.s_lineup_thumb .slick-prev::before {
  rotate: 180deg;
}
.s_lineup_thumb .slick-prev:hover::before {
  left: calc(50% - 5px);
}
.s_lineup_thumb .slick-next {
  right: -10px;
}
.s_lineup_thumb .slick-next:hover::before {
  left: calc(50% + 5px);
}

.s_lineup_main_thumb {
  aspect-ratio: 1/1;
  padding: 5px;
}
.s_lineup_main_thumb figure {
  height: 100%;
}
.s_lineup_main_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s_lineup_main_thumb:hover img {
  scale: 1.1;
}

.s_lineup_estimate {
  width: calc(50% - 35px);
  min-width: 300px;
}
.s_lineup_estimate h5 {
  background-color: #DC69A5;
  padding: 6px 25px 5px;
}
.s_lineup_estimate form {
  margin-top: -20px;
  padding: 50px 25px 30px;
}
.s_lineup_estimate form table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.s_lineup_estimate form th {
  color: #333;
  font-size: 1.6rem;
  font-weight: 500;
  min-height: 35px;
  margin: 5px 0;
  padding-right: 5px;
}
.s_lineup_estimate form th + td {
  max-width: 140px;
}
.s_lineup_estimate form td .u-text-grey {
  margin-top: -5px;
}
.s_lineup_estimate form select, .s_lineup_estimate form input[type=number] {
  padding-left: 10px;
}

@media screen and (max-width: 960px) {
  .s_lineup_estimate_wrap {
    max-width: 100%;
    padding: 0;
  }
  .s_lineup_slider {
    width: 100%;
    max-width: none;
    padding: 0 15px;
  }
  .s_lineup_estimate {
    width: 100%;
    min-width: none;
  }
  .s_lineup_estimate h5 {
    margin-left: 20px;
  }
  .s_lineup_estimate form {
    padding: 50px 20px 30px;
  }
  .s_lineup_estimate .c-btn-wrap {
    padding: 15px;
  }
}
.s_lineup_price_wrap {
  color: #DC69A5;
  background: #fff;
  border: 2px solid #DC69A5;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.s_lineup_price_text {
  font-size: 1.4rem;
}
.s_lineup_price_text strong {
  font-size: 2rem;
}

.s_lineup_price .total {
  font-size: 1.8rem;
  font-weight: 500;
}
.s_lineup_price .total input {
  font-size: 3.4rem;
  color: #DC69A5;
}
.s_lineup_price .per {
  color: #333;
}
.s_lineup_price .per input {
  font-size: 1.6rem;
}

/* ポイント・製本品質 */
.s_lineup_point_pu {
  padding: 60px 0;
}

.s_lineup_point_ico {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.s_lineup_pu_ttl {
  align-items: center;
  gap: 5px 10px;
}
.s_lineup_pu_ttl h3 {
  line-height: 1.5;
}
.s_lineup_pu_ttl small {
  font-size: 1.5rem;
}

.s_lineup_point_pu .s_lineup_pu_ttl {
  justify-content: center;
  gap: 5px 20px;
}

.s_lineup_point_pu_catch {
  color: #DC69A5;
}

.s_lineup_point_befoaf {
  position: relative;
}
.s_lineup_point_befoaf::before {
  content: "";
  mask: url("../img/ico-triangle.svg") center/contain no-repeat;
  background: #007B43;
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.s_lineup_point_wrap {
  position: relative;
  overflow: hidden;
}

.s_lineup_point_text {
  width: 50%;
}

.s_lineup_point_bg_img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45%;
}

@media screen and (max-width: 960px) {
  .s_lineup_point_pu {
    padding: 40px 0;
  }
  .s_lineup_pu_ttl {
    flex-wrap: wrap;
    justify-content: center;
  }
  .s_lineup_point_befoaf::before {
    width: 15px;
    height: 15px;
    top: calc(50% + 15px);
    rotate: 90deg;
  }
  .s_lineup_point_text {
    width: 100%;
  }
  .s_lineup_point_bg_img {
    position: relative;
    width: 80%;
  }
}
/* 仕様 */
.s_lineup_spec {
  width: 100%;
  max-width: 870px;
  margin: 0 auto;
  padding: 0 15px;
}
.s_lineup_spec dt {
  background: #DC69A5;
  max-width: none;
  min-width: 100px;
}

.s_lineup_spec_inner {
  background: #FBF0F6;
  padding: 1px 15px 60px;
}

@media screen and (max-width: 960px) {
  .s_lineup_spec {
    max-width: 100%;
    padding: 0;
  }
  .s_lineup_spec_inner {
    padding-bottom: 40px;
  }
}
/* 仕上がりイメージ */
.s_lineup_image_slide {
  flex-wrap: wrap;
  justify-content: center;
}
.s_lineup_image_slide .slick-list {
  width: 100%;
}
.s_lineup_image_slide .slick-arrow {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 20%;
  color: transparent;
  z-index: 1;
}
.s_lineup_image_slide .slick-arrow::before {
  content: "";
  background: url("../img/arrow_btn.svg") center/cover no-repeat;
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: 0.3s;
}
.s_lineup_image_slide .slick-prev {
  left: -10px;
}
.s_lineup_image_slide .slick-prev::before {
  rotate: 180deg;
}
.s_lineup_image_slide .slick-next {
  right: -10px;
}
.s_lineup_image_slide .slick-dots {
  display: flex;
  justify-content: center;
  color: transparent;
  margin-top: 25px;
  height: 15px;
}
.s_lineup_image_slide .slick-dots li {
  width: 15px;
}
.s_lineup_image_slide .slick-dots button {
  color: transparent;
  width: 15px;
  height: 15px;
  position: absolute;
}
.s_lineup_image_slide .slick-dots button::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #ddd;
  border-radius: 50%;
  transition: 0.3s;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.s_lineup_image_slide .slick-dots .slick-active button::before {
  background-color: #DC69A5;
}

.s_lineup_image_slide_item {
  padding: 15px 10px 0;
  position: relative;
}
.s_lineup_image_slide_item .c-ico_pu {
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 1;
}

.s_lineup_image_slide_inner {
  display: block;
  position: relative;
  border-radius: 5px;
}
.s_lineup_image_slide_inner figure {
  border: solid 1px #eee;
}
.s_lineup_image_slide_inner figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
}
.s_lineup_image_slide_inner h5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 5px;
}
.s_lineup_image_slide_inner h5 small {
  font-size: 1.5rem;
  display: block;
  width: 100%;
  letter-spacing: 0;
}
.s_lineup_image_slide_inner .c-ico_pu__text {
  font-size: 1.3rem;
  min-height: 18px;
  padding: 0 10px;
}

.s_lineup_image_number {
  display: grid;
  place-content: center;
  color: #fff;
  background: #DC69A5;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  width: 35px;
  height: 35px;
  padding: 0 2px 2px 0;
  border-radius: 5px 5px 25px 5px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.s_lineup_image_btn {
  display: block;
  color: #fff;
  background: #DC69A5;
  border-radius: 20px;
  padding: 3px 30px 2px;
  text-align: center;
  position: relative;
  transition: 0.3s;
}
.s_lineup_image_btn::before {
  content: "";
  background: url("../img/arrow_white.svg") center/cover no-repeat;
  width: 5px;
  height: 10px;
  rotate: 90deg;
  position: absolute;
  top: 50%;
  right: 20px;
  translate: 0 -50%;
  transition: 0.3s;
}

a.s_lineup_image_slide_inner {
  color: #333;
}
a.s_lineup_image_slide_inner:hover {
  background: #FBF0F6;
}
a.s_lineup_image_slide_inner:hover figure img {
  scale: 1.1;
}
a.s_lineup_image_slide_inner:hover .s_lineup_image_btn {
  background: #8D3F63;
}
a.s_lineup_image_slide_inner:hover .s_lineup_image_btn::before {
  top: calc(50% + 5px);
}

.s_lineup_image_pu figure {
  border-radius: 5px 5px 0 0;
}
.s_lineup_image_pu .s_lineup_image_slide_inner {
  background: #FBF0F6;
}
.s_lineup_image_pu .s_lineup_image_slide_text {
  padding: 0 15px;
}
.s_lineup_image_pu .s_lineup_image_btn {
  border-radius: 0 0 5px 5px;
}

@media screen and (max-width: 960px) {
  .s_lineup_image_slide .slick-arrow {
    top: 25%;
  }
}
/* オプション */
.s_lineup_free_ttl, .s_lineup_paid_ttl {
  padding-left: 45px;
  position: relative;
}
.s_lineup_free_ttl::before, .s_lineup_paid_ttl::before {
  content: "";
  background: url("../img/ico-option_free.svg") center/cover no-repeat;
  position: absolute;
  width: 40px;
  height: 40px;
  display: block;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.s_lineup_free_ttl span, .s_lineup_paid_ttl span {
  font-size: 2rem;
  background: linear-gradient(transparent 85%, #0976A3 25%);
  padding-bottom: 5px;
}

h4.s_lineup_paid_ttl::before {
  background-image: url("../img/ico-option_paid.svg");
  width: 38px;
  height: 38px;
}
h4.s_lineup_paid_ttl span {
  background: linear-gradient(transparent 85%, #DC69A5 25%);
}

.s_lineup_paid_fee {
  display: flex;
  margin-top: 15px;
}
.s_lineup_paid_fee dt {
  color: #fff;
  background: #DC69A5;
  writing-mode: vertical-rl;
  font-weight: 500;
  font-size: 1.3rem;
  padding: 10px 3px 10px 0;
  display: grid;
  place-content: center;
}
.s_lineup_paid_fee dd {
  background: #FBF0F6;
  padding: 15px;
  width: 100%;
}

.s_lineup_inside_cover .col {
  max-width: 110px;
  margin-top: 20px;
}
.s_lineup_inside_cover .col a {
  display: block;
  position: relative;
}
.s_lineup_inside_cover .col a::before {
  content: "";
  background: url("../img/ico_zoom_in.svg") center/cover no-repeat;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
}
.s_lineup_inside_cover .col a:hover img {
  opacity: 1;
}
.s_lineup_inside_cover .col img {
  border-radius: 5px;
  opacity: 0.6;
}

@media screen and (max-width: 960px) {
  .s_lineup_paid_item {
    justify-content: center;
  }
  .s_lineup_paid .col {
    margin-top: 20px;
  }
  .s_lineup_paid_fee {
    flex-wrap: wrap;
  }
  .s_lineup_paid_fee dt {
    writing-mode: horizontal-tb;
    padding: 0 10px 0 15px;
    border-radius: 5px 5px 0 0;
    letter-spacing: 5px;
  }
  .s_lineup_paid_fee dd {
    border-radius: 0 5px 5px 5px;
    padding: 10px 15px;
  }
}
/* 色変更 */
.photo .p-form_select-wrap::before {
  background: #007B43;
}
.photo :is(.s_lineup_estimate h5, .s_lineup_spec dt, .c-ico_pu__text, .lineup_specification dt, .s_lineup_image_pu .s_lineup_image_btn, .s_lineup_paid_fee dt) {
  background: #007B43;
}
.photo :is(.s_lineup_estimate input[type=text], .s_lineup_estimate select, .s_lineup_price_wrap, .p-form input[type=number]) {
  border-color: #007B43;
}
.photo :is(.s_lineup_price_wrap, .s_lineup_price .total input, .s_lineup_point_pu_catch) {
  color: #007B43;
}
.photo :is(.s_lineup_spec_inner, .s_lineup_image_pu .s_lineup_image_slide_inner, .s_lineup_paid_fee dd) {
  background: #E5F2EC;
}

.premium .p-form_select-wrap::before {
  background: #EB6EA0;
}
.premium :is(.s_lineup_estimate h5, .s_lineup_spec dt, .c-ico_pu__text, .lineup_specification dt, .s_lineup_image_pu .s_lineup_image_btn, .s_lineup_paid_fee dt) {
  background: #EB6EA0;
}
.premium :is(.s_lineup_estimate input[type=text], .s_lineup_estimate select, .s_lineup_price_wrap, .p-form input[type=number]) {
  border-color: #EB6EA0;
}
.premium :is(.s_lineup_price_wrap, .s_lineup_price .total input, .s_lineup_point_pu_catch) {
  color: #EB6EA0;
}
.premium :is(.s_lineup_spec_inner, .s_lineup_image_pu .s_lineup_image_slide_inner, .s_lineup_paid_fee dd) {
  background: #FDF0F5;
}

.standard .p-form_select-wrap::before {
  background: #F39800;
}
.standard :is(.s_lineup_estimate h5, .s_lineup_spec dt, .c-ico_pu__text, .lineup_specification dt, .s_lineup_image_pu .s_lineup_image_btn, .s_lineup_paid_fee dt) {
  background: #F39800;
}
.standard :is(.s_lineup_estimate input[type=text], .s_lineup_estimate select, .s_lineup_price_wrap, .p-form input[type=number]) {
  border-color: #F39800;
}
.standard :is(.s_lineup_price_wrap, .s_lineup_price .total input, .s_lineup_point_pu_catch) {
  color: #F39800;
}
.standard :is(.s_lineup_spec_inner, .s_lineup_image_pu .s_lineup_image_slide_inner, .s_lineup_paid_fee dd) {
  background: #FEF5E5;
}

.light .p-form_select-wrap::before {
  background: #0976A3;
}
.light :is(.s_lineup_estimate h5, .s_lineup_spec dt, .c-ico_pu__text, .lineup_specification dt, .s_lineup_image_pu .s_lineup_image_btn, .s_lineup_paid_fee dt) {
  background: #0976A3;
}
.light :is(.s_lineup_estimate input[type=text], .s_lineup_estimate select, .s_lineup_price_wrap, .p-form input[type=number]) {
  border-color: #0976A3;
}
.light :is(.s_lineup_price_wrap, .s_lineup_price .total input, .s_lineup_point_pu_catch) {
  color: #0976A3;
}
.light :is(.s_lineup_spec_inner, .s_lineup_image_pu .s_lineup_image_slide_inner, .s_lineup_paid_fee dd) {
  background: #EBF9FF;
}

/* お知らせ・キャンペーン 
----- page/_news ----- */
.archive-news .news_end {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: 0.3s;
}
.archive-news .news_end span {
  display: block;
  color: #fff;
  background-color: #333;
  padding: 5px 10px;
  border-radius: 5px;
  line-height: 1.2;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: 0.3s;
}
.archive-news figure {
  width: 100%;
  position: relative;
  padding-top: 25%;
}
.archive-news figure img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
.archive-news .p-articles_item a:hover figure {
  opacity: 0.7;
}
.archive-news .important {
  color: #fff;
  background: #DC69A5;
}
.archive-news .campaign {
  color: #0976A3;
  background: #EBF9FF;
}

/* アルバム制作委員会 
----- page/_blog ----- */
.archive-blog_mv img {
  width: 100%;
}

.archive-blog section:first-child h3 {
  margin-top: 0;
}

.archive-blog_item {
  display: grid;
  place-content: start;
  grid-template-columns: 100%;
}
.archive-blog_item a::before, .archive-blog_item a::after {
  display: none;
}
.archive-blog_item > a {
  padding: 0;
}

.archive-blog_link:hover figure::before {
  right: 5px;
}
.archive-blog_link:hover img {
  scale: 1.1;
}
.archive-blog_link figure {
  width: 100%;
  padding-top: 60%;
}
.archive-blog_link figure::before {
  content: "";
  background: url("../img/arrow_btn.svg") center/cover no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  transition: 0.3s;
  z-index: 1;
}
.archive-blog_link img {
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}

/* 関連ページ */
.blog_recommend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog_recommend_item {
  width: calc(25% - 10px);
}
.blog_recommend_item a {
  display: block;
  height: 100%;
  background: #FBF0F6;
  color: #333;
  text-decoration: none;
  position: relative;
  padding: 0 0 30px;
  border-radius: 5px;
}
.blog_recommend_item a::before {
  content: "";
  background: url("../img/arrow_btn.svg") center/cover no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  transition: 0.3s;
  z-index: 1;
}
.blog_recommend_item a:hover {
  background: #8D3F63;
  color: #fff;
}
.blog_recommend_item a:hover::before {
  right: 5px;
}
.blog_recommend_item a:hover img {
  scale: 1.1;
}
.blog_recommend_item figure {
  border-radius: 5px 5px 0px 0px;
  border: 1px solid #eee;
  overflow: hidden;
}
.blog_recommend_item img {
  width: 100%;
  border-radius: 0;
  aspect-ratio: 5/3;
}

.blog_recommend_ttl {
  padding: 10px 15px 0;
}
.blog_recommend_ttl h5 {
  margin: 0;
  font-size: 1.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media screen and (max-width: 960px) {
  .archive-blog .p-post_list {
    gap: 40px;
  }
  .archive-blog_img {
    width: 85%;
    margin: 0 auto;
  }
  .blog_recommend_item {
    width: calc(50% - 5px);
  }
  .blog_recommend_item a {
    padding: 0 0 25px;
  }
  .blog_recommend_item a::before {
    width: 15px;
    height: 15px;
    bottom: 5px;
    right: 5px;
  }
  .blog_recommend_ttl {
    padding: 10px 10px 0;
  }
}
/* よくあるご質問 
----- page/_faq ----- */
.archive-blog h3 {
  line-height: 1.5;
}

.faq_item_wrap {
  border-top: solid 2px #ddd;
}

.faq_item {
  border-bottom: solid 2px #ddd;
}
.faq_item::details-content {
  transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
  height: 0;
  overflow: clip;
  opacity: 0;
}
.faq_item[open]::details-content {
  opacity: 1;
}
.faq_item[open] .faq_button::after {
  rotate: 90deg;
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}
.faq_summary {
  display: grid;
  grid-template-columns: 50px 1fr 15px;
  gap: 10px;
  align-items: center;
  padding: 15px 20px 15px 5px;
  cursor: pointer;
  transition: 0.3s;
  /* Safari表示の「▼」削除 */
}
.faq_summary:hover {
  background: #FBF0F6;
}
.faq_summary::-webkit-details-marker {
  display: none;
}
.faq_summary h5 {
  font-size: 1.6rem;
  font-weight: 500;
  padding: 3px 0 0 5px;
}

.faq_ico_q, .faq_ico_a {
  display: grid;
  place-content: center;
  font-size: 2.7rem;
  font-weight: 500;
  line-height: 1;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.faq_ico_a {
  color: #DC69A5;
  background: #FBF0F6;
}

.faq_button {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  position: relative;
}
.faq_button::before, .faq_button::after {
  content: "";
  display: block;
  background-color: #DC69A5;
  border-radius: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: 0.3s;
}
.faq_button::before {
  width: 100%;
  height: 2px;
}
.faq_button::after {
  width: 2px;
  height: 100%;
}

.faq_details {
  padding: 10px 20px 25px 5px;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 15px;
}

@media screen and (max-width: 960px) {
  .faq_summary {
    padding: 10px 10px 10px 5px;
    grid-template-columns: 40px 1fr 15px;
  }
  .faq_summary h5 {
    padding: 0;
  }
  .faq_item_wrap .faq_ico_a, .faq_item_wrap .faq_ico_q {
    width: 40px;
    height: 40px;
    font-size: 2.2rem;
  }
  .faq_details {
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding: 10px 0 15px 5px;
  }
}
/*----- よくあるご質問 詳細 -----*/
.single-faq_cate {
  color: #fff;
  background: #DC69A5;
  padding: 4px 10px;
  line-height: 1.5;
}

.single-faq_ttl_wrap, .single-faq_answer {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 10px;
}

.single-faq_ttl_wrap {
  align-items: center;
}

.faq_answer_wrap {
  position: relative;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 15px;
}

.single-faq_answer {
  padding: 30px 30px 15px;
}

.single-faq_contents {
  padding-left: 10px;
}

@media screen and (max-width: 768px) {
  .single-faq_ttl_wrap {
    align-items: normal;
  }
  .faq_answer_wrap {
    padding: 0;
  }
  .single-faq_answer {
    grid-template-columns: 100%;
    position: relative;
    padding: 40px 15px 10px;
  }
  .single-faq_answer .faq_ico_a {
    position: absolute;
    top: -25px;
    left: 15px;
  }
  .single-faq_contents {
    padding: 0;
  }
}
/* アプリの使い方 
----- page/_help ----- */
.archive-help section:first-child h3 {
  margin-top: 0;
}

.archive-help_item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.archive-help_item h5 {
  font-size: 1.6rem;
  transition: 0.3s;
}

.help_link_ttl_wrap {
  display: block;
  color: #333;
  padding: 0 0 10px;
}
.help_link_ttl_wrap:hover {
  color: #DC69A5;
}

.help_link_deco {
  flex-grow: 1;
  display: block;
  min-height: 30px;
  position: relative;
}
.help_link_deco::before {
  content: "";
  display: block;
  width: calc(100% - 30px);
  height: 2px;
  background: #ddd;
  border-radius: 1px;
  position: absolute;
  bottom: 5px;
  left: 0;
  transition: 0.3s;
}
.help_link_deco::after {
  content: "";
  background: url("../img/arrow_pink.svg") center/cover no-repeat;
  display: block;
  width: 5px;
  height: 10px;
  position: absolute;
  bottom: 0;
  right: 10px;
  transition: 0.3s;
}
.help_link_deco:hover::before {
  background-color: #DC69A5;
}
.help_link_deco:hover::after {
  right: 5px;
}

.archive-help_item:has(.help_link_deco:hover) .help_link_ttl_wrap {
  color: #DC69A5;
}

.archive-help_item:has(.help_link_ttl_wrap:hover) .help_link_deco::before {
  background-color: #DC69A5;
}
.archive-help_item:has(.help_link_ttl_wrap:hover) .help_link_deco::after {
  right: 5px;
}

.help-tag.light {
  color: #0976A3;
  background: #EBF9FF;
}
.help-tag.light:hover {
  color: #fff;
  background: #0976A3;
}
.help-tag.standard {
  color: #F39800;
  background: #FEF5E5;
}
.help-tag.standard:hover {
  color: #fff;
  background: #F39800;
}
.help-tag.premium {
  color: #EB6EA0;
  background: #FDF0F5;
}
.help-tag.premium:hover {
  color: #fff;
  background: #EB6EA0;
}
.help-tag.photo {
  color: #007B43;
  background: #E5F2EC;
}
.help-tag.photo:hover {
  color: #fff;
  background: #007B43;
}

@media screen and (max-width: 960px) {
  .p-post_list {
    gap: 30px;
  }
  .help_link_deco {
    min-height: 20px;
  }
}
/* 運営スタッフのご紹介 
----- page/_staff ----- */
.staff_position {
  display: block;
  width: fit-content;
  padding: 0 10px;
  border-radius: 5px 5px 0px 0px;
  background: #DC69A5;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
}

.staff_inner figure {
  border: 1px solid #eee;
  position: relative;
}
.staff_inner figure::before {
  content: "";
  background: url("../img/img_deco_white.svg") center/cover no-repeat;
  display: block;
  width: 80%;
  height: 6%;
  position: absolute;
  left: 50%;
  bottom: -2px;
  translate: -50%;
  z-index: 1;
}
.staff_inner img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 1/1;
}

.staff_name {
  display: block;
  text-align: center;
  margin-top: -5px;
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 961px) {
  .archive-staff .p-post_list {
    gap: 25px 10px;
  }
  .staff_item {
    transition: 0.3s;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
    display: flex;
    flex-direction: column;
  }
  .staff_item:hover {
    filter: none;
    margin: 2px 0 -2px;
  }
  .staff_item:hover .staff_detail {
    opacity: 1;
  }
  .staff_inner {
    background: #fff;
    padding: 10px;
    border-radius: 0 5px 5px 5px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .staff_overview {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .staff_detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FBF0F6;
    display: flex;
    align-items: center;
    padding: 20px;
    opacity: 0;
    z-index: 2;
    transition: 0.3s;
  }
  .staff_detail_inner {
    overflow-y: scroll;
    height: 100%;
  }
}
@media screen and (max-width: 960px) {
  .staff_inner figure::before {
    width: 90%;
    height: 10%;
  }
  .staff_inner img {
    aspect-ratio: 8/5;
    border-radius: 0 5px 5px 5px;
  }
  .staff_name {
    margin-top: -15px;
  }
}
/* お得な割引制度・価格表一覧 
----- page/_great_value ---------- */
/* お得な割引制度 */
.g_value_discount strong {
  font-weight: 500;
}

.g_value_discount_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 20px;
}

.g_value_discount_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
.g_value_discount_item .ttl {
  text-align: center;
  color: #fff;
  background: #DC69A5;
  padding: 10px;
  border-radius: 5px;
  display: grid;
  place-content: center;
}
.g_value_discount_item .target {
  display: grid;
  place-content: center;
  place-items: center;
  text-align: center;
}
.g_value_discount_item .text {
  text-align: center;
  line-height: 1.5;
}

.great_bnr_grid img {
  transition: 0.3s;
}
.great_bnr_grid a:hover img {
  scale: 1.1;
}

.g_value_discount_fixed_price {
  display: block;
  background: #FBF0F6;
  border-radius: 5px;
  border: 2px solid #FBF0F6;
  min-height: 130px;
  align-items: center;
}
.g_value_discount_fixed_price:hover {
  border-color: #DC69A5;
}
.g_value_discount_fixed_price .grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 15px 20px;
  padding: 25px 15px 20px;
}
.g_value_discount_fixed_price .ttl {
  display: grid;
  align-items: center;
  border-right: 1px solid #DC69A5;
  padding-left: 5px;
}
.g_value_discount_fixed_price ul {
  border-radius: 0 0 5px 5px;
}

@media screen and (max-width: 960px) {
  .g_value_discount_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
  }
  .g_value_discount_item {
    gap: 5px;
  }
  .g_value_discount_item:first-child {
    grid-column: 1/span 2;
  }
  .g_value_discount_item .ttl {
    padding: 5px 10px;
  }
  .g_value_discount_fixed_price .grid {
    grid-template-columns: none;
  }
  .g_value_discount_fixed_price .ttl {
    border: none;
    border-bottom: 1px solid #DC69A5;
    padding: 0 0 10px;
  }
  .g_value_discount_fixed_price .text strong span {
    display: inline-block;
  }
}
/* 価格表 */
.g_value_price_table h2 + h4 {
  margin-top: 20px;
}

.price-table {
  width: 100%;
}
.price-table :is(th, td) {
  text-wrap: nowrap;
}
.price-table th {
  min-width: 100px;
  text-align: center;
}
.price-table td {
  text-align: right;
}

/* 色変更 */
.photo.price-table th {
  background: #E5F2EC;
}

.premium.price-table th {
  background: #FDF0F5;
}

.standard.price-table th {
  background: #FEF5E5;
}

.light.price-table th {
  background: #EBF9FF;
}

/* つくり方とお届けまでの流れ 
----- page/_howto ---------- */
.howto_catch span {
  color: #DC69A5;
  position: relative;
  padding-top: 5px;
}
.howto_catch span::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #DC69A5;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50%;
}

/* お届けまでの流れ */
.howto_flow .flow_grid {
  display: grid;
  grid-template: "flow01 flow02 flow03 flow04" auto "flow_ex flow_ex flow_ex ･" auto/1fr 1fr 1fr 1fr;
  gap: 10px 30px;
}
.howto_flow .flow01 {
  grid-area: flow01;
}
.howto_flow .flow02 {
  grid-area: flow02;
}
.howto_flow .flow03 {
  grid-area: flow03;
}
.howto_flow .flow04 {
  grid-area: flow04;
}
.howto_flow .flow_ex {
  grid-area: flow_ex;
  grid-row: span 1;
  padding-right: 20px;
  position: relative;
}
.howto_flow .flow_ex::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #DC69A5;
  border-right: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.howto_flow .flow_ex > div {
  padding: 0 15px;
  height: 30px;
  display: grid;
  place-content: center;
}
.howto_flow .flow_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 5px;
  padding: 10px 15px 20px;
  background: #fff;
  position: relative;
}
.howto_flow .flow_item:not(:first-child)::before {
  content: "";
  background: url("../img/ico-triangle.svg") center/cover no-repeat;
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: -20px;
  translate: 0 -50%;
}
.howto_flow .flow_ttl {
  display: flex;
  align-items: center;
  padding-left: 40px;
  font-weight: 500;
  line-height: 1.5;
}
.howto_flow figure {
  margin: 0 auto;
  max-width: 120px;
}
.howto_flow .flow_point {
  flex-wrap: wrap;
  gap: 5px;
}

@media screen and (max-width: 960px) {
  .howto_flow .flow_grid {
    display: block;
    padding-right: 35px;
    position: relative;
  }
  .howto_flow .flow_item {
    grid-template-rows: none;
    grid-template-columns: 1fr auto;
    padding: 15px;
  }
  .howto_flow .flow_item:not(:first-child) {
    margin-top: 30px;
  }
  .howto_flow .flow_item:not(:first-child)::before {
    top: -20px;
    left: 50%;
    translate: -50%;
    rotate: 90deg;
  }
  .howto_flow .flow_ex {
    padding: 0 0 20px 0;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }
  .howto_flow .flow_ex::before {
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-top: 20px solid #DC69A5;
    top: auto;
    bottom: -15px;
  }
  .howto_flow .flow_ex > div {
    padding: 20px 2px 20px 0;
    height: 100%;
    width: 25px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 1.3rem;
    place-content: flex-start;
  }
  .howto_flow .flow_ttl {
    padding: 40px 0 0 0;
  }
}
/* つくり方 */
.howto_make .make_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 120px 80px;
}
.howto_make .make_item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.howto_make .make_item:nth-child(odd)::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #ddd;
  position: absolute;
  top: 0;
  right: -40px;
}
.howto_make .make_item:nth-child(n+3)::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #ddd;
  position: absolute;
  top: -60px;
  left: 0;
}
.howto_make .make_capture > span {
  padding: 0 10px;
  position: relative;
  line-height: 1.5;
}
.howto_make .make_capture > span::before, .howto_make .make_capture > span::after {
  content: "";
  display: block;
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background: #DC69A5;
  position: absolute;
  bottom: 5px;
}
.howto_make .make_capture > span::before {
  left: 0;
  rotate: -30deg;
}
.howto_make .make_capture > span::after {
  right: 0;
  rotate: 30deg;
}
.howto_make .make_ttl {
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.howto_make .make_outside .make_ttl img {
  height: 30px;
}
.howto_make .make_img {
  width: 90%;
  aspect-ratio: 2/1;
}
.howto_make .make_img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.howto_make .make_app .make_img img {
  aspect-ratio: 2/1;
  object-fit: contain;
}
.howto_make .make_app .make_flow_item img {
  max-width: 230px;
}
.howto_make .make_flow {
  display: grid;
  gap: 10px 30px;
  grid-template-columns: repeat(3, auto);
}
.howto_make .make_layout .make_flow {
  grid-template-columns: repeat(2, auto);
}
.howto_make .make_flow_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  justify-content: center;
  position: relative;
}
.howto_make .make_flow_item:not(:first-child)::before {
  content: "";
  background: url("../img/ico-triangle.svg") center/cover no-repeat;
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 25%;
  left: -20px;
  translate: 0 -50%;
}
.howto_make .make_flow_item figure {
  text-align: center;
}
.howto_make .make_flow_item img {
  max-height: 58px;
}
.howto_make .make_flow_text {
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.5;
}
.howto_make .option_cpt span {
  color: #0976A3;
  background-color: #EBF9FF;
  position: relative;
  border-radius: 5px;
  padding: 0 10px;
  margin-right: 5px;
  line-height: 1.5;
}
.howto_make .option_cpt span::before {
  content: "";
  background: url("../img/triangle_blue_bg.svg") center/cover no-repeat;
  display: block;
  width: 9px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: -5px;
  translate: 0 -50%;
  rotate: 90deg;
}

@media screen and (max-width: 960px) {
  .howto_make .make_grid {
    grid-template-columns: 100%;
    gap: 80px;
  }
  .howto_make .make_item:nth-child(odd)::before {
    display: none;
  }
  .howto_make .make_item:nth-child(n+2)::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #ddd;
    position: absolute;
    top: -40px;
    left: 0;
  }
  .howto_make .make_ttl img {
    max-height: 50px;
  }
  .howto_make .make_flow, .howto_make .make_layout .make_flow {
    grid-template-columns: none;
    width: 100%;
  }
  .howto_make .make_flow_item {
    grid-template-rows: none;
    grid-row: auto;
    grid-template-columns: 70px 1fr;
    gap: 15px;
    margin-top: 15px;
  }
  .howto_make .make_flow_item:not(:first-child)::before {
    display: none;
  }
  .howto_make .make_flow_item img {
    width: 100%;
    object-fit: contain;
  }
  .howto_make .make_flow_text {
    text-align: left;
    font-size: 1.5rem;
  }
  .howto_make .make_flow_text p {
    margin-top: 5px;
  }
  .howto_make .flow_step {
    font-weight: 500;
    color: #fff;
    background: #DC69A5;
    padding: 0 15px 0 10px;
    border-radius: 5px 5px 15px 5px;
    line-height: 1.4;
    font-size: 1.3rem;
  }
}
/* 制作マニュアル */
.howto_manual details::details-content {
  transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
  height: 0;
  opacity: 0;
  overflow: clip;
  background-color: #f0f2ff;
}
.howto_manual details summary {
  display: block;
  list-style-type: none;
  width: 100%;
  height: 50px;
  padding: 5px 40px;
  border-radius: 30px;
  background: #ddd;
  display: grid;
  place-content: center;
  transition: 0.3s;
  position: relative;
}
.howto_manual details summary::-webkit-details-marker {
  display: none;
}
.howto_manual details summary:hover {
  background: #eee;
}
.howto_manual details summary .manual_ico {
  position: absolute;
  top: 50%;
  right: 30px;
  translate: 0 -50%;
}
.howto_manual details summary .manual_ico::before, .howto_manual details summary .manual_ico::after {
  content: "";
  display: block;
  background: #333;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.howto_manual details summary .manual_ico::after {
  rotate: 90deg;
}
.howto_manual details[open]::details-content {
  opacity: 1;
}
.howto_manual details[open] .manual_ico::after {
  rotate: 0;
}
@supports (interpolate-size: allow-keywords) {
  .howto_manual :root {
    interpolate-size: allow-keywords;
  }
  .howto_manual details[open]::details-content {
    height: auto;
  }
}
@supports not (interpolate-size: allow-keywords) {
  .howto_manual details[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}

.howto_tmp .tmp_link {
  display: block;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  padding: 10px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.howto_tmp .tmp_link:hover {
  box-shadow: none;
}
.howto_tmp .tmp_link:hover .tmp_inner::before {
  right: 5px;
}
.howto_tmp .tmp_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}
.howto_tmp .tmp_inner {
  background-color: rgba(255, 255, 255, 0.9);
  display: grid;
  place-content: center;
  position: relative;
  z-index: 1;
  border-radius: 5px;
  padding: 15px;
  min-height: 230px;
}
.howto_tmp .tmp_inner::before {
  content: "";
  background: url("../img/arrow_btn.svg") center/cover no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;
  transition: 0.3s;
}
@media screen and (max-width: 960px) {
  .howto_tmp .tmp_inner {
    min-height: 370px;
  }
}

.order_overview {
  padding: 10px 15px 10px 55px;
  border-radius: 5px;
  position: relative;
  min-height: 55px;
  display: flex;
  align-items: center;
}

/* つくり方下層 (切り貼りでつくる/デザインソフトでつくる)
----- page/_howto-sub ------------------------------ 
親要素の接頭辞は[howto-s_]*/
.howto-s_method .u-grid {
  margin: 0 -50px;
}
.howto-s_method .u-grid .col {
  padding: 0 50px;
  margin-top: 0;
}
.howto-s_method .method_make {
  max-width: 360px;
}
.howto-s_method .c-btn_big {
  margin: 0 auto;
}
.howto-s_method .method_submit {
  position: relative;
}
.howto-s_method .method_submit::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #ddd;
  position: absolute;
  top: 0;
  left: 0;
}
.howto-s_method .submit_ttl {
  align-items: center;
  gap: 10px;
}

.howto-s_request {
  border: 6px solid #DC69A5;
}
.howto-s_request .request_item {
  display: grid;
  gap: 15px;
  grid-template-columns: 80px 1fr;
  align-items: center;
}
.howto-s_request .request_item .u-round {
  border: 1px solid #ddd;
}

.howto-s_excursion .col {
  margin-top: 20px;
}
.howto-s_excursion a {
  display: block;
  position: relative;
}
.howto-s_excursion a::before {
  content: "";
  background: url("../img/arrow_btn.svg") center/cover no-repeat;
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  transition: 0.3s;
}
.howto-s_excursion a:hover::before {
  right: 15px;
}
.howto-s_excursion a:hover .bg {
  background: #8D3F63;
}
.howto-s_excursion a:hover .bg img {
  scale: 1.1;
}
.howto-s_excursion a:hover .inner {
  background: rgba(255, 255, 255, 0.95);
}
.howto-s_excursion .bg {
  width: 100%;
  height: 100%;
  aspect-ratio: 3/2;
  background-color: #FBD7E5;
  transition: 0.3s;
}
.howto-s_excursion .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.howto-s_excursion .text {
  height: 100%;
  width: 100%;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.howto-s_excursion .text .pu {
  padding: 2px 5px 0;
  border-radius: 3px;
}
.howto-s_excursion .inner {
  padding: 10px;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  display: grid;
  place-content: center;
  place-items: center;
  transition: 0.3s;
}
.howto-s_excursion .inner img {
  max-height: 50px;
  max-width: 90%;
}
.howto-s_excursion .outside .inner img {
  max-width: 130px;
}
.howto-s_excursion .designer .make_ttl .pu {
  padding: 2px 5px 1px;
  border-radius: 3px;
  margin-right: 2px;
  letter-spacing: -0.02rem;
}

.app_instruction table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}
.app_instruction th {
  color: #fff;
  background-color: #DC69A5;
  font-weight: 500;
  text-align: center;
  min-width: 75px;
  padding: 6px 10px 5px;
  max-width: 100px;
  border-radius: 5px 0px 0px 5px;
  text-align: center;
  vertical-align: middle;
}
.app_instruction td {
  padding: 5px 10px;
  border-radius: 0px 5px 5px 0px;
  background-color: #fff;
}
.app_instruction .os td {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.app_instruction .ico-text {
  gap: 5px;
  justify-content: center;
  align-items: center;
}
.app_instruction .ico-text img {
  max-height: 16px;
}

@media screen and (max-width: 960px) {
  .howto-s_method .u-grid {
    margin: 0;
  }
  .howto-s_method .u-grid .col {
    padding: 0;
  }
  .howto-s_method .method_make {
    padding-bottom: 40px;
  }
  .howto-s_method .method_submit::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
  }
  .howto-s_method .method_submit.col {
    padding-top: 40px;
  }
  .howto-s_request .request_item {
    grid-template-columns: auto;
  }
  .howto-s_request img {
    max-width: 80px;
  }
}
/* 専用アプリでつくる 
----- page/_app ---------- */
.app_trial .comp {
  width: 80%;
  max-width: 400px;
  margin-bottom: -90px;
}
.app_trial .c-btn-wrap {
  gap: 10px 20px;
}
.app_trial .anchor_grey {
  color: #777;
  padding-right: 20px;
  position: relative;
}
.app_trial .anchor_grey::before {
  content: "";
  mask: url("../img/arrow_pink.svg") center/contain no-repeat;
  background: #777;
  width: 8px;
  height: 12px;
  rotate: 90deg;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  transition: 0.3s;
}
.app_trial .anchor_grey:hover::before {
  top: calc(50% + 5px);
}

.app_point .c-ico_number small {
  letter-spacing: -0.01rem;
}
.app_point .c-ico_number span {
  font-weight: 500;
}

.app_point_item {
  padding: 60px 0;
}

.app_point_ttl {
  display: grid;
  place-content: center;
  padding: 15px 50px;
  margin: 0 auto;
  min-height: 85px;
  max-width: 500px;
  width: 100%;
  position: relative;
  border-radius: 5px;
  border: 3px solid #DC69A5;
  background: #fff;
}
.app_point_ttl::before {
  content: "";
  background: url("../img/app_point_ttl_deco.svg") center/cover no-repeat;
  width: 12px;
  height: 11px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  translate: -50%;
}
.app_point_ttl .c-ico_number {
  top: -3px;
  left: -3px;
}

.app_point_img {
  border: 1px solid #ddd;
}
.app_point_img.vertical {
  max-width: 140px;
  margin: 0 auto;
}

.app_point_grid .col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.app_point_manual {
  border-top: solid 1px #ddd;
}

@media screen and (max-width: 960px) {
  .app_point_item {
    padding: 50px 0;
  }
  .app_point_ttl {
    min-height: 65px;
  }
  .app_point_img {
    width: 80%;
    margin: 0 auto;
  }
  .app_instruction tr {
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 5px;
    margin-top: 5px;
  }
  .app_instruction th {
    display: grid;
    place-content: center;
    place-items: center;
  }
  .app_instruction .os {
    display: grid;
    grid-template: "th pc" auto "th tab" auto "th sp" auto/85px 1fr;
  }
  .app_instruction .os th {
    grid-area: th;
  }
  .app_instruction .pc {
    grid-area: pc;
  }
  .app_instruction .tab {
    grid-area: tab;
  }
  .app_instruction .sp {
    grid-area: sp;
  }
}
/* レイアウトプラン 
----- page/_layout ---------- */
/* お届けまでの流れ */
.layout_flow :is(.u-grid, .col) {
  margin: 0;
}

.layout_flow_item {
  padding: 30px 15px;
  position: relative;
}
.layout_flow_item::before {
  content: "";
  background: url("../img/ico-triangle.svg") center/cover no-repeat;
  display: block;
  width: 10px;
  height: 13px;
  position: absolute;
  bottom: -25px;
  left: 50%;
  translate: -50%;
  rotate: 90deg;
}

.layout_flow_text {
  padding: 0 45px;
}
.layout_flow_text img {
  max-height: 70px;
}

.layout_flow_consultatiom {
  gap: 15px 0;
}
.layout_flow_consultatiom .customer img {
  width: 75px;
}
.layout_flow_consultatiom .employee {
  display: flex;
  align-items: flex-end;
}
.layout_flow_consultatiom .employee img {
  width: 90px;
}
.layout_flow_consultatiom .speech_bubble {
  background: #FBF0F6;
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
  position: relative;
}
.layout_flow_consultatiom .speech_bubble::before {
  content: "";
  mask: url("../img/ico-triangle.svg") center/contain no-repeat;
  background: #FBF0F6;
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: -8px;
  translate: 0 -50%;
  rotate: 180deg;
}
.layout_flow_consultatiom .employee_speech_bubble {
  background: #fff;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: inline-block;
  position: relative;
}
.layout_flow_consultatiom .employee_speech_bubble::before {
  content: "";
  background: url("../img/speech_bubble_grey_border.svg") center/cover no-repeat;
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: -7px;
  translate: 0 -50%;
}

.layout_flow_completed img {
  width: 120px;
}

@media screen and (max-width: 960px) {
  .layout_flow_item {
    padding: 20px 15px;
  }
  .layout_flow_text {
    padding: 0;
  }
  .layout_flow_consultatiom .col {
    width: 100%;
  }
  .layout_flow_consultatiom .employee figure {
    margin: 0 0 0 auto;
  }
}
/* スケジュール */
.layout_sched_grid {
  display: flex;
}

.layout_sched_period {
  width: 50%;
}

.layout_sched_deadline {
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.layout_sched_dl_item {
  display: flex;
  gap: 5px;
  align-items: center;
}
.layout_sched_dl_item img {
  height: 40px;
}
.layout_sched_dl_item.track {
  padding-top: 55px;
  position: relative;
}
.layout_sched_dl_item.track::before {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background: #aaa;
  position: absolute;
  top: 5px;
  left: 50%;
  translate: -50%;
}
.layout_sched_dl_item.track::after {
  content: "";
  display: block;
  mask: url("../img/arrow_pink.svg") center/contain no-repeat;
  background: #aaa;
  width: 6px;
  height: 12px;
  rotate: 90deg;
  position: absolute;
  top: 40px;
  left: 50%;
  translate: -50%;
}

.layout_sched_criterion {
  width: calc(100% - 140px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 30px;
}

.layout_sched_cr_item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
  border-bottom: 1px solid #ddd;
}
.layout_sched_cr_item figure {
  width: 40px;
}

.layout_sched_free {
  padding: 10px 15px;
  position: relative;
}
.layout_sched_free::before {
  content: "";
  background: url("../img/ico-triangle.svg") center/cover no-repeat;
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: -8px;
  translate: 0 -50%;
  rotate: 180deg;
}

.layout_sched_example {
  width: 50%;
  padding-left: 50px;
}
.layout_sched_example table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}
.layout_sched_example th {
  width: 30px;
  line-height: 1.2;
  background: #bbb;
  color: #fff;
  font-weight: 500;
  border-radius: 5px;
  vertical-align: middle;
  padding: 10px;
  text-align: center;
}
.layout_sched_example td {
  border-radius: 5px;
  padding: 10px;
}
.layout_sched_example td .u-dg {
  gap: 0 10px;
  align-items: center;
  grid-template-columns: 40px 1fr;
}
.layout_sched_example .long_period .date {
  padding-top: 40px;
  position: relative;
}
.layout_sched_example .long_period .date::before {
  content: "";
  display: block;
  background: #DC69A5;
  width: 1px;
  height: 60px;
  border-radius: 1px;
  position: absolute;
  top: -20px;
  left: 50%;
}

@media screen and (max-width: 960px) {
  .layout_sched_grid {
    flex-wrap: wrap;
  }
  .layout_sched_period {
    width: 100%;
  }
  .layout_sched_period .u-df {
    flex-wrap: wrap;
  }
  .layout_sched_deadline {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .layout_sched_deadline > p {
    line-height: 1.3;
    width: 35px;
  }
  .layout_sched_deadline > figure {
    width: calc(100% - 115px);
  }
  .layout_sched_dl_item.flag {
    width: 70px;
    flex-direction: column;
    text-align: center;
  }
  .layout_sched_dl_item.track {
    padding-top: 20px;
    width: 100%;
    justify-content: center;
  }
  .layout_sched_dl_item.track::before {
    display: none;
  }
  .layout_sched_dl_item.track::after {
    mask: none;
    background: url("../img/ico-triangle.svg") center/cover no-repeat;
    width: 10px;
    height: 13px;
    top: 0;
    rotate: 90deg;
  }
  .layout_sched_criterion {
    width: 100%;
    padding: 0;
  }
  .layout_sched_criterion_inner {
    order: 1;
  }
  .layout_sched_criterion_inner > .u-bg3 {
    padding: 5px;
  }
  .layout_sched_cr_item {
    gap: 15px;
    padding: 15px 0;
  }
  .layout_sched_free {
    text-align: center;
    min-width: 90%;
    margin: 0 auto;
    display: block;
    padding: 5px 15px;
  }
  .layout_sched_free::before {
    display: none;
  }
  .layout_sched_example {
    width: 100%;
    padding: 0;
  }
}
/* データのご入稿方法 */
.layout_submit .u-dg {
  padding: 0 5px;
  grid-template-columns: 40px 1fr;
  gap: 15px;
  align-items: center;
}
.layout_submit figure {
  height: 40px;
}
.layout_submit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 価格について */
.layout_price_figure {
  position: relative;
  gap: 20px 0;
}
.layout_price_figure .deco {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
  color: transparent;
  font-size: 1px;
}
.layout_price_figure .deco::before, .layout_price_figure .deco::after {
  content: "";
  display: block;
  width: 50%;
  max-width: 20px;
  height: 3px;
  border-radius: 1px;
  background: #DC69A5;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.layout_price_figure .deco::after {
  rotate: 90deg;
}
.layout_price_figure .col {
  width: 50%;
  max-width: 280px;
  margin: 0;
}
.layout_price_figure .inner {
  display: grid;
  place-items: center;
  min-height: 95px;
  padding: 10px 15px;
  text-align: center;
}
.layout_price_figure .inner p {
  line-height: 1.5;
}

.layout_price_table {
  min-width: 550px;
}
.layout_price_table td, .layout_price_table th {
  text-align: center;
}

/* 写真館・カメラマンの方へ 
----- page/_photographer ----------

photog */
/* 色変更 */
.photographer .c-ttl-1_deco {
  background: #EBF9FF;
}
.photographer :is(.c-speech_bubble_ttl, .c-ico_number, .p-anchor_list .btn) {
  background: #0976A3;
}
.photographer .c-speech_bubble_ttl::before {
  mask: url("../img/ico-triangle.svg") center/contain no-repeat;
  background: #0976A3;
}

/* こんな事で困っていませんか？ */
.photog_worrie ul {
  flex-wrap: wrap;
  gap: 30px 20px;
  justify-content: center;
  max-width: 1020px;
  margin: 0 auto;
}
.photog_worrie li {
  max-width: 440px;
}
.photog_worrie li span {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photog_worrie .col img {
  max-width: 100px;
}

/* 石田製本が選ばれる3つの理由 */
.photog_choice .p-anchor_list {
  gap: 10px 30px;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(185px, 220px));
}
.photog_choice h3 {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 10px;
  align-items: center;
}

.photog_achievements .col-l-5 {
  text-align: right;
}
.photog_achievements .col-l-5 img {
  width: 100%;
  max-width: 380px;
}

.photog_low_price .gallery_wrap {
  padding: 30px 40px;
}
.photog_low_price .gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.photog_low_price .gallery img {
  aspect-ratio: 11/9;
  object-fit: cover;
}

/* お問い合わせ */
.photog_contact_grid .inner {
  gap: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.photog_contact_grid .tel {
  padding: 10px 0;
  border-right: 1px solid #DC69A5;
}
.photog_contact_grid .tel img {
  max-width: 70px;
}
.photog_contact_grid .mail {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.photog_contact_grid .mail .inner {
  gap: 30px;
}
.photog_contact_grid .mail img {
  max-width: 75px;
}

/* お客様事例 */
.photog_voice_wrap {
  padding-bottom: 80px;
  position: relative;
}
.photog_voice_wrap::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - 100px);
  background: #EBF9FF;
  position: absolute;
  bottom: 0;
  left: 0;
}
.photog_voice_wrap .slick-track {
  display: flex;
}
.photog_voice_wrap .slick-slide {
  height: auto !important;
}

.photog_voice_item {
  padding: 0 20px;
  height: 100%;
}
.photog_voice_item .inner {
  border-radius: 5px;
  border: 2px solid #0976A3;
  background: #fff;
  padding: 35px 40px 45px;
  height: 100%;
}

.photog_voice_ttl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px 20px;
  align-items: center;
}
.photog_voice_ttl figure {
  background: #EBF9FF;
  border-radius: 50%;
  overflow: hidden;
}
.photog_voice_ttl img {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 960px) {
  .photog_worrie ul {
    gap: 20px 10px;
  }
  .photog_worrie li {
    width: 100%;
    width: calc(50% - 5px);
  }
  .photog_worrie .o-1 {
    order: -1;
  }
  .photog_worrie .w100 {
    width: 100%;
  }
  .photog_choice .p-anchor_list {
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
  .photog_low_price .gallery_wrap {
    padding: 20px 15px;
  }
  .photog_low_price .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .photog_contact_grid {
    text-align: center;
  }
  .photog_contact_grid .inner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .photog_contact_grid .tel {
    border-right: none;
    border-bottom: 1px solid #DC69A5;
    padding-bottom: 30px;
  }
  .photog_contact_grid .tel img {
    width: 40px;
  }
  .photog_contact_grid .p-drawer_tel a {
    font-size: 3.7rem;
    display: inline-block;
  }
  .photog_contact_grid .mail .inner {
    gap: 10px;
  }
  .photog_contact_grid .mail img {
    width: 55px;
  }
  .photog_voice_wrap {
    padding-bottom: 50px;
  }
  .photog_voice_item {
    padding: 40px 5px 0;
  }
  .photog_voice_item .inner {
    padding: 0 15px 20px;
  }
  .photog_voice_ttl {
    grid-template-columns: none;
    place-items: center;
    margin-top: -40px;
  }
  .photog_voice_ttl figure {
    width: 80px;
  }
  .photog_consultation figure {
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
  }
}
/* 表紙テンプレート 
----- page/_cover_template ---------- */
.cotmp_intro_user {
  align-items: flex-end;
  gap: 0 30px;
}
.cotmp_intro_user img {
  width: 80px;
}

.cover_intro .c-speech_bubble_ttl {
  margin-top: -2px;
}

@media screen and (max-width: 960px) {
  .cover_intro .u-g_gap20 {
    margin: 0 -5px;
  }
  .cover_intro .u-g_gap20 .col {
    padding: 0 5px;
  }
  .cover_intro .c-speech_bubble {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .cotmp_intro_user {
    gap: 0 40px;
  }
  .cotmp_intro_user .col {
    margin-top: 10px;
  }
  .cotmp_intro_user img {
    width: 60px;
  }
}
.cover_gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 30px;
}
.cover_gallery .c-ico_cate {
  background: #DC69A5;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.5;
  min-width: auto;
}
.cover_gallery .c-ico_cate.renew {
  background: #F39800;
}

.cover_gallery_item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.cover_gallery_item figcaption {
  grid-column: span 2;
  font-size: 1.2rem;
}
.cover_gallery_item .item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 5px;
}
.cover_gallery_item .item > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 5px;
  font-size: 1.4rem;
}
.cover_gallery_item .item > p strong {
  font-weight: 500;
}
.cover_gallery_item .item > p small {
  display: inline-block;
  margin: 0 -5px;
}
.cover_gallery_item .item a {
  display: block;
}

.cover_illust_intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cover_illust_intro > a {
  background: #DC69A5;
}
.cover_illust_intro > a:hover {
  background: #8D3F63;
}

.cover_illust_intro_inner {
  height: 100%;
  display: grid;
  place-content: center;
}

.cover_illust_ico {
  border-radius: 50%;
}
.cover_illust_ico img {
  width: 55px;
  height: 55px;
}

.cover_illust_sns {
  display: flex;
  flex-wrap: wrap;
}
.cover_illust_sns a {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
}
.cover_illust_sns a:hover {
  opacity: 0.5;
}
.cover_illust_sns img {
  object-fit: contain;
}
.cover_illust_sns .ig {
  width: 25px;
  height: 25px;
}
.cover_illust_sns .x {
  width: 21px;
  height: 22px;
}

@media screen and (max-width: 960px) {
  .cover_gallery {
    grid-template-columns: auto;
    gap: 35px;
  }
}
/* 検索結果一覧 
----- page/_search ---------- */
.search .p-post_list {
  grid-template-columns: none;
  gap: 20px;
}
.search .p-post_item a {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
}
.search .p-post_item img {
  aspect-ratio: 1/1;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .search .p-post_item a {
    grid-template-columns: 80px 1fr;
  }
}

/* 想いを叶える柔軟な対応 
----- page/_flexible ---------- */
.flexible_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 10px;
}
.flexible_grid .item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 5px;
}
.flexible_grid figure {
  max-width: 125px;
  max-height: 125px;
  margin: 0 auto;
}
.flexible_grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.flexible_grid .text {
  display: grid;
  place-content: center;
}

.flexible_paid_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.flexible_paid_grid .item {
  display: grid;
}

.flexible_paid_btn {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 10px;
  width: 100%;
  height: auto;
  background-color: #FBF0F6;
  border-radius: 5px;
  padding: 25px 10px 10px;
  position: relative;
  transition: 0.3s;
}
.flexible_paid_btn:hover {
  background: #DC69A5;
  color: #fff;
}
.flexible_paid_btn > span {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.flexible_paid_btn img {
  max-width: 130px;
}
.flexible_paid_btn .text {
  display: grid;
  place-content: center;
}

@media screen and (max-width: 960px) {
  .flexible_grid, .flexible_paid_grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flexible_grid figure {
    max-width: 105px;
    max-height: 105px;
  }
  .flexible_paid_grid img {
    max-width: 120px;
  }
}
/* はじめての方へ 
----- page/_first ---------- */
.first_tp {
  gap: 20px 0;
}
.first_tp p {
  line-height: 2;
}
.first_tp .img {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}
.first_tp .img01 {
  width: 70%;
  padding-bottom: 40px;
}
.first_tp .img02 {
  width: 50%;
  margin-right: -20%;
}

.first_staff .c-speech_bubble_ttl {
  border: 2px solid #DC69A5;
  background: #FBF0F6;
  color: #DC69A5;
}
.first_staff .c-speech_bubble_ttl::before {
  background: url("../img/first_staff_deco.svg") center/cover no-repeat;
  width: 12px;
  height: 11px;
  position: absolute;
  bottom: -11px;
  left: 50%;
  translate: -50%;
  rotate: 0deg;
}

.first_staff_item {
  padding: 0 5px;
}
.first_staff_item img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.first_features .p-anchor_list {
  grid-template-columns: repeat(3, 1fr);
}
.first_features .p-anchor_list li {
  grid-row: span 1;
}
.first_features .p-anchor_list a {
  background: #FBF0F6;
  position: relative;
}
.first_features .p-anchor_list a::before {
  content: "";
  background: url("../img/arrow_pink.svg") center/cover no-repeat;
  width: 5px;
  height: 10px;
  rotate: 90deg;
  position: absolute;
  bottom: 15px;
  right: 15px;
  transition: 0.3s;
}
.first_features .p-anchor_list a:hover {
  background: #8D3F63;
  color: #fff;
}
.first_features .p-anchor_list a:hover::before {
  bottom: 10px;
}
.first_features .p-anchor_list .inner {
  padding: 15px 35px 15px 55px;
}
.first_features .p-anchor_list .ttl {
  padding: 0;
}
.first_features .app_point_ttl {
  padding: 15px 40px 15px 60px;
}
.first_features .app_point_ttl .c-ico_number {
  width: auto;
  grid-auto-flow: column;
  padding: 0 10px;
}

.first_features_deco {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.first_features_grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
}
.first_features_grid img {
  aspect-ratio: 1/1;
  object-fit: cover;
}
.first_features_grid .text {
  font-size: 1.4rem;
  width: 50%;
}
.first_features_grid .img {
  width: 30%;
}
.first_features_grid .img_sub {
  width: calc(20% - 60px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
}

@media screen and (max-width: 960px) {
  .first_tp .col {
    width: 100% !important;
  }
  .first_tp .img {
    gap: 10px;
  }
  .first_tp .img01 {
    width: 60%;
    padding-bottom: 20px;
  }
  .first_tp .img02 {
    width: 40%;
    margin: 0;
  }
  .first_features .p-anchor_list {
    grid-template-columns: repeat(2, 1fr);
  }
  .first_features .p-anchor_list .inner {
    padding: 45px 10px 20px;
  }
  .first_features .c-ico_number {
    width: 40px;
    height: 40px;
  }
  .first_features_grid .img {
    width: 100%;
    order: 2;
  }
  .first_features_grid .img figure {
    width: 90%;
    margin: 0 0 0 auto;
  }
  .first_features_grid .img img {
    aspect-ratio: 3/2;
  }
  .first_features_grid .text {
    width: 100%;
    order: 1;
  }
  .first_features_grid .img_sub {
    width: 60%;
    flex-direction: row;
  }
}
/* 印刷から製本まで製造全て自社工場 
----- page/_integrated ---------- */
.integrated_top {
  align-items: flex-end;
}
.integrated_top figure {
  text-align: center;
}
.integrated_top img {
  max-height: 155px;
  object-fit: contain;
}
.integrated_top img.u-round {
  max-height: 160px;
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.integrated_top .text {
  margin-top: 10px;
  align-items: center;
}

.integrated_bg_wrap {
  padding-bottom: 50px;
  overflow: hidden;
}

.integrated_bg {
  width: calc(100% - 150px);
  min-width: 1000px;
  position: absolute;
  bottom: 0;
  right: 150px;
  z-index: -1;
}

@media screen and (max-width: 960px) {
  .integrated_bg {
    right: 15px;
  }
}
@media screen and (max-width: 768px) {
  .integrated_top .col {
    display: grid;
    grid-template-columns: minmax(auto, 110px) 1fr;
    gap: 15px;
    align-items: center;
  }
  .integrated_top .text {
    margin: 0;
    align-items: left;
  }
  .integrated_top img {
    max-height: 95px;
  }
  .integrated_top img.u-round {
    max-height: auto;
    aspect-ratio: 1/1;
  }
  .integrated_bg_wrap {
    padding-bottom: 0;
  }
  .integrated_bg {
    width: 100%;
    min-width: auto;
    position: static;
    aspect-ratio: 3/2;
    object-fit: cover;
  }
}
/* 写真を1枚送るだけのオリジナル表紙
----- page/_cover ---------- */
.cover_mv {
  display: grid;
  grid-template-columns: 75% 1fr;
  padding-right: 60px;
}
.cover_mv .ttl {
  display: grid;
  place-content: center;
}
.cover_mv h1 {
  writing-mode: vertical-rl;
  font-size: 3.2rem;
}
.cover_mv .img_wrap {
  position: relative;
  overflow: hidden;
}
.cover_mv .img {
  position: relative;
  top: 0;
  left: -20px;
}
.cover_mv .img .deco {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.cover_mv .img figure {
  position: absolute;
  top: 0;
  left: 0;
}
.cover_mv .img figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.cover_howto_grid {
  display: grid;
  grid-auto-flow: column;
  gap: 15px 30px;
}

.cover_howto_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 20px;
  border-radius: 5px;
  border: 2px solid #DC69A5;
  position: relative;
  padding: 10px 15px 15px;
}
.cover_howto_item .c-ico_number {
  width: 65px;
  top: -1px;
  left: -1px;
  grid-auto-flow: column;
  padding: 0 10px;
  gap: 2px;
  font-weight: 500;
}
.cover_howto_item > p {
  display: flex;
  align-items: center;
}
.cover_howto_item .ttl {
  padding-left: 65px;
}
.cover_howto_item figure {
  max-height: 120px;
}
.cover_howto_item figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cover_merit .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px 20px;
}
.cover_merit figure {
  max-width: 260px;
  flex-grow: 1;
}
.cover_merit img {
  height: 100%;
  object-fit: contain;
}

.cover_voice .c-speech_bubble {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cover_voice .info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: auto 0 0;
}
.cover_voice .info img {
  width: 40px;
  height: 40px;
}

@media screen and (max-width: 768px) {
  .cover_mv {
    grid-template-columns: none;
    padding: 0;
    margin-top: 90px;
  }
  .cover_mv h1 {
    font-size: 2.3rem;
  }
  .cover_mv .img {
    left: 50%;
    translate: -50%;
    width: calc(100% - 30px);
  }
  .cover_howto_grid {
    grid-auto-flow: row;
  }
  .cover_howto_item figure {
    max-height: 110px;
  }
  .cover_merit .col {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cover_merit figure {
    width: 40%;
    max-width: 110px;
  }
  .cover_merit .ttl {
    width: calc(60% - 20px);
  }
  .cover_merit .text {
    width: 100%;
  }
}
/* 各種お問い合わせ 
----- page/_contact ---------- */
.contact_wrap {
  padding: 30px;
}
.contact_wrap.email {
  padding: 40px 30px 50px;
}

.contact_grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
}
.contact_grid .ttl {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding-right: 70px;
}
.contact_grid .ttl figure {
  width: 75px;
}
.contact_grid .text {
  margin-top: 10px;
  padding-left: 50px;
  border-left: solid 1px #DC69A5;
}
.contact_grid .p-drawer_tel {
  width: 100%;
  min-width: auto;
}

.phone figure {
  padding-left: 5px;
}

.contact_email_list {
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.contact_email_list li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.contact_email_list img {
  max-height: 35px;
}

.contact_lp_item a {
  display: grid;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  color: #333;
  border: solid 1px #fff;
  height: 100%;
}
.contact_lp_item a:hover {
  box-shadow: none;
  border-color: #eee;
}
.contact_lp_item a:hover img {
  scale: 1.1;
}
.contact_lp_item figure {
  position: relative;
}
.contact_lp_item .img {
  aspect-ratio: 26/11;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
.contact_lp_item .decco {
  width: 85%;
  position: absolute;
  bottom: -1px;
  left: 50%;
  translate: -50%;
}
.contact_lp_item p {
  padding: 0 5px;
}
.contact_lp_item .btn_wrap {
  margin-top: auto;
}

/* お申し込み */
.contact_h1_supplement {
  position: absolute;
  bottom: 60px;
  left: 50%;
  translate: -50%;
}

.contact_h1_btn {
  padding: 6px 35px 4px 25px;
  width: fit-content;
  min-height: 40px;
}
.contact_h1_btn::before {
  right: 20px;
}
.contact_h1_btn:hover::before {
  right: 15px;
}

@media screen and (max-width: 960px) {
  .contact_wrap {
    padding: 20px 15px 30px;
  }
  .contact_wrap.email {
    padding: 25px 15px 30px;
  }
  .contact_grid {
    grid-template-columns: none;
  }
  .contact_grid .ttl {
    padding: 0;
  }
  .contact_grid .ttl figure {
    width: 60px;
  }
  .contact_grid .text {
    padding: 25px 5px 0;
    margin-top: 25px;
    border-left: none;
    border-top: solid 1px #DC69A5;
  }
  .contact_grid .p-drawer_tel a {
    font-size: 3.2rem;
  }
  .contact_email_list {
    justify-content: flex-start;
    padding: 0 10px;
  }
}
/* 目的で探す 
----- page/_purpose ----- */
.purpose .lineup_per_price {
  padding: 10px 15px 15px;
  position: relative;
}

.purpose_conditions {
  color: #fff;
  font-size: 1rem;
  position: absolute;
  bottom: 0;
  right: 5px;
}

.purpose_rec_grid {
  display: grid;
  gap: 10px;
}

.purpose_pu_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.purpose_pu_item figure {
  height: 100%;
}
.purpose_pu_item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.purpose_pu_item.text {
  padding: 40px;
  display: grid;
  place-content: center;
}
.purpose_pu_item.text .inner {
  max-width: 500px;
}

.purpose_type_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.purpose_type_item a {
  display: block;
  background: #FBF0F6;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.purpose_type_item h4 {
  margin-top: 15px;
}

.purpose_type_img {
  background-color: #fff;
  text-align: center;
  aspect-ratio: 3/2;
  text-align: center;
}
.purpose_type_img img {
  height: 100%;
  width: auto;
}

.purpose_type_text {
  text-align: center;
}

.purpose .faq_item_wrap, .purpose .faq_item:last-child {
  border: none;
}
.purpose .faq_item:last-child {
  border: none;
}
.purpose .faq_item.events_none {
  pointer-events: none;
}
.purpose .faq_item.events_none .faq_button {
  display: none;
}

@media screen and (min-width: 961px) {
  .purpose_rec_grid .c-speech_bubble::before {
    left: -9px;
    top: 50%;
    translate: 0 -50%;
    rotate: 90deg;
  }
}
@media screen and (max-width: 960px) {
  .purpose_rec_grid {
    gap: 15px;
  }
  .purpose_pu_grid {
    grid-template-columns: none;
  }
  .purpose_pu_item.text {
    padding: 25px 20px 30px;
  }
  .purpose_type_grid {
    grid-template-columns: none;
    gap: 20px;
  }
  .purpose_type_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .purpose_type_inner h4 {
    margin-top: 0;
  }
  .purpose_type_img {
    width: 120px;
    aspect-ratio: 1/1;
  }
  .purpose_type_text {
    text-align: left;
    width: calc(100% - 120px);
    padding-left: 15px;
  }
  .purpose .flow_grid {
    padding: 0;
  }
  .purpose .flow_item {
    max-width: 320px;
    margin: 0 auto;
  }
}
/* 団体一括発注をご検討の方へ 
----- page/_sotsudan ----- */
.sotsudan .c-ttl-1_deco, .sotsudan_test .c-ttl-1_deco {
  background: #EBF9FF;
}
.sotsudan .purpose_rec .lineup_per_price, .sotsudan_test .purpose_rec .lineup_per_price {
  background: #0976A3;
}
.sotsudan .c-btn, .sotsudan_test .c-btn {
  background: #0976A3;
  border-color: #0976A3;
}
.sotsudan .c-btn:hover, .sotsudan_test .c-btn:hover {
  background: #075E82;
  border-color: #075E82;
}
.sotsudan .photog_contact .c-btn, .sotsudan_test .photog_contact .c-btn {
  background: #DC69A5;
  border-color: #DC69A5;
}
.sotsudan .photog_contact .c-btn:hover, .sotsudan_test .photog_contact .c-btn:hover {
  background: #8D3F63;
  border-color: #8D3F63;
}/*# sourceMappingURL=user.css.map */