@charset "UTF-8";

/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}

/* size setting */
html {
  font-size: 4.2667vw;
}
@media screen and (min-width: 769px) {
  html {
    font-size: 1.4453vw;
  }
}

/* color setting */
body {
  --color-blue: rgb(0, 177, 244);
  --color-textblue: rgb(0, 124, 226);
  --color-bgblue: rgb(10, 174, 243);
  --color-paleblue: rgb(193, 237, 255);
  --color-handle: rgb(84, 184, 244);
  --color-pink: rgb(243, 47, 126);
  --color-palepink: rgb(247, 169, 232);
  --color-black: rgb(0, 0, 0);
  --color-white: rgb(255, 255, 255);
  --color-footerblue: rgb(18, 174, 255);
  --color-red: rgb(255, 89, 96);

  --color-lightblue: rgb(68, 199, 255);
  --color-deepblue: rgb(0, 85, 160);
  --color-borderblue: rgb(120, 200, 255);
  --color-dogblue: rgb(85, 200, 255);
  --color-catpink: rgb(255, 180, 240);
  --color-skyblue: rgb(214, 255, 255);
  --color-yellow: rgb(255, 240, 0);
  --color-close: rgb(172, 85, 255);
}

body {
  background-color: var(--color-white);
  color: var(--color-textblue);
}
._txt_red {
  color: var(--color-red);
}
.bg_white {
  background-color: var(--color-white);
}
.bg_y {
  background-color: var(--color-yellow);
}

/* font setting */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  line-height: calc(52 / 32);
  font-feature-settings: "palt";
}
._f17 {
  font-size: calc(17 / 16 * 100%);
}
._f15 {
  font-size: calc(15 / 16 * 100%);
}
._f13 {
  font-size: calc(13 / 16 * 100%);
}
._f12_5 {
  font-size: calc(25 / 32 * 100%);
  line-height: calc(39 / 25);
  font-weight: 500;
  letter-spacing: -.025rem;
}
._f12 {
  font-size: calc(12 / 16 * 100%);
  line-height: calc(36 / 24);
  font-weight: 500;
}
._lt005 {
  letter-spacing: 0.05rem;
}

/* other setting */
body {
  --radius-120: calc(120 / 32 * 1rem);
  --radius-122: calc(122 / 32 * 1rem);
  --radius-20: calc(20 / 32 * 1rem);
  --radius-40: calc(40 / 32 * 1rem);
}

/* tool */
.bgt {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* layout */
img {
  width: 100%;
  height: auto;
}
#wrapper {
  width: 100%;
  position: relative;
  background-color: var(--color-blue);
  background-repeat: repeat;
  background-position: left top;
  background-size: calc(40 / 750 * 100%);
  background-image: url(../images/bg03-1.svg);
  overflow: hidden;
  scroll-behavior: smooth;
}
#pc_wrapper {
  display: none;
}
@media screen and (min-width: 769px) {
  #wrapper {
    width: calc(542 / 1600 * 100%);
    margin-right: calc(217 / 1600 * 100%);
    margin-left: auto;
    overflow: visible;
    z-index: 200;
  }
  #pc_wrapper {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-white);
    background-repeat: no-repeat;
    background-image: url(../images/bg_pc.svg);
    background-position: center center;
    background-size: cover;
  }
  #pc_wrapper::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: calc((217 / 1600 * 100%) - 6px);
    width: calc((542 / 1600 * 100%) + 12px);
    height: 100%;
    background-color: var(--color-white);
  }

  #pc_wrapper .slider_box {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(217 / 1600 * 100%);
    height: 100dvh;
  }
  #pc_wrapper .slider_box .slider {
    position: absolute;
    top: 31%;
    left: calc(33 / 217 * 100%);
    width: 5px;
    height: 63%;
    border-radius: 3px;
    background-color: var(--color-paleblue);
  }
  #pc_wrapper .slider_box .slider .slider_handle {
    display: block;
    position: absolute;
    top: 0;
    left: -5px;
    width: 15px;
    height: calc(56.8 / 630 * 100%);
    cursor: pointer;
  }
  #pc_wrapper .slider_box .slider .slider_handle .slider_v {
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    border-radius: 3px;
    background-color: var(--color-handle);
  }
}

.bg_spotted_pattern {
  position: relative;
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: 
    url(../images/bg01-1.svg),
    url(../images/bg01-2.svg);
  background-position: 
    center top,
    center bottom;
}
.bg_spotted_pattern::before {
  content: '';
  position: absolute;
  top: 23.375rem;
  left: 0;
  width: 100%;
  padding-top: calc(1856 / 750 * 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/bg01-3.svg);
}
.bg_spotted_pattern > * {
  position: relative;
}

.bg_stripe {
  position: relative;
  padding-bottom: calc(75 / 750 * 100%);

}
.bg_stripe > * {
  position: relative;
}

.round_box {
  width: calc(668 / 750 * 100%);
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--radius-122);
  background-color: var(--color-white);
}
.round_box_bl {
  position: relative;
  width: calc(576 / 32 * 1rem);
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--radius-40);
  border: calc(var(--radius-20) * 0.2) var(--color-textblue) solid;
  background-color: var(--color-white);
}
.round_box_bl.bg_yellow {
  background-color: var(--color-yellow);
}
.round_box_bl > .title {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-30 / 66 * 100%));
  width: calc(270 / 32 * 1rem);
  aspect-ratio: 270/64;
  border-radius: 1rem;
  background-color: var(--color-textblue);
  color: var(--color-white);
  letter-spacing: 0.2rem;
  font-weight: 500;
}
._txt_center {
  text-align: center;
}
._txt_idt1 {
  padding-left: 1em;
  text-indent: -1em;
}
._txt_idt05 {
  padding-left: 0.5em;
  text-indent: -0.5em;
}
@media screen and (min-width: 769px) {
  .for_sp {
    display: none;
  }
}

.mb-32 { margin-bottom: 1rem !important; }
.mb-64 { margin-bottom: 2rem !important; }


/* title */
.ttl_type06 {
  aspect-ratio: 200/76;
  background-image: url(../images/ttl_type06.svg);
}

/* parts */
/* parts - .sns_list */
.sns_list > li {
  margin-bottom: calc(40 / 464 * 100%);
}
.sns_btn_list {
  display: flex;
  justify-content: space-between;
}
.sns_btn_list > li {
  width: calc(204 / 464 * 100%);
}
.sns_btn_list > li > a {
  aspect-ratio: 204/104;
}
.sns_btn_list.dog .sns_i {
  background-image: url(../images/btn_sns_d_i.svg);
}
.sns_btn_list.dog .sns_x {
  background-image: url(../images/btn_sns_d_x.svg);
}
.sns_btn_list.cat .sns_i {
  background-image: url(../images/btn_sns_c_i.svg);
}
.sns_btn_list.cat .sns_x {
  background-image: url(../images/btn_sns_c_x.svg);
}

/* parts - .hand */
.image.hand {
  position: absolute;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.image.hand {
  background-image: url(../images/hand_photo.png);
}

/* parts frame_list */
.frame_list {
  display: flex;
  justify-content: center;
  gap: calc(52 / 32 * 1rem) calc(30 / 32 * 1rem);
  flex-wrap: wrap;
}
.frame_list.frame_list3 {
  gap: calc(22 / 32 * 1rem);
}
.frame_list li {
  position: relative;
  width: calc(166 / 32 * 1rem);
  aspect-ratio: 166 / 208;
  background-color: rgb(210, 210, 210);
  background-size: contain;
}
.frame_list.frame_list3 li {
  width: calc(123 / 32 * 1rem);
}
.frame_list li::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(-11 / 40 * 100%), calc(-10 / 40 * 100%));
  width: calc(40 / 32 * 1rem);
  aspect-ratio: 1/1;
}
.frame_list .num1::after { background-image: url(../images/num_t2_1.svg); }
.frame_list .num2::after { background-image: url(../images/num_t2_2.svg); }
.frame_list .num3::after { background-image: url(../images/num_t2_3.svg); }
.frame_list .num4::after { background-image: url(../images/num_t2_4.svg); }
.frame_list .num5::after { background-image: url(../images/num_t2_5.svg); }
.frame_list .num6::after { background-image: url(../images/num_t2_6.svg); }
.frame_list .num7::after { background-image: url(../images/num_t2_7.svg); }
.frame_list .num8::after { background-image: url(../images/num_t2_8.svg); }
.frame_list .num9::after { background-image: url(../images/num_t2_9.svg); }
.frame_list .num10::after { background-image: url(../images/num_t2_10.svg); }
.frame_list .num11::after { background-image: url(../images/num_t2_11.svg); }
.frame_list .num12::after { background-image: url(../images/num_t2_12.svg); }
.ttl_last_year {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: calc(52 / 32 * 1rem);
}
.ttl_last_year > span {
  position: relative;
  display: block;
  color: var(--color-footerblue);
}
.ttl_last_year > span::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -.75rem;
  transform: translate(0, -50%);
  width: .5rem;
  height: .5rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/rounded-arrow01.svg?ud=20260707);
}


/* ------------------------
  Header
------------------------ */


/* ------------------------
  Main Header
------------------------ */
.main_header {
  padding-top: 3rem;
}
.main_header .main_title {
  position: relative;
  display: block;
  height: calc(420 / 32 * 1rem);
  background-image: url(../images/main_title.svg?ud=20260707);
}
.main_header .smile_project {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(192 / 32 * 1rem);
  height: calc(162 / 32 * 1rem);
  background-image: url(../images/smile.svg);
}
.main_header > .image.photo_sample {
  height: calc(526 / 32 * 1rem);
  margin-top: calc(36 / 32 * 1rem);
}

.main_header .lead_text {
  height: calc(180 / 32 * 1rem);
  margin-top: calc(54 / 32 * 1rem);
  background-image: url(../images/lead_text.svg?ud=20260707);
}
/* prize */
.main_header .prize_box {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  background-image: url(../images/bg01-4.svg?ud=20260707);
}

.main_header .text01 {
  height: calc(370 / 32 * 1rem);
  background-image: url(../images/text01.svg?ud=20260707);
}
.main_header .prize_box .prize01 {
  height: calc(300 / 32 * 1rem);
}
.main_header .prize_box .prize02 {
  position: relative;
  height: calc(550 / 32 * 1rem);
  margin-top: calc(110 / 32 * 1rem);
}
.main_header .prize_box .prize02::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/prize_image_02_text.svg?ud=20260707);
}

/* ------------------------
  Inpage Navi
------------------------ */
.inpage_navi {
  margin-top: calc(128 / 32 * 1rem);
}
.inpage_navi .navi_ttl {
  height: calc(200 / 32 * 1rem);
  background-image: url(../images/navi_ttl.svg?ud=20260707);
}
.inpage_navi > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 / 32 * 1rem);
  margin-top: 2rem;
}
.inpage_navi > ul > li {
  position: relative;
  width: calc(626 / 32 * 1rem);
}
.inpage_navi > ul > li::before {
  content: '';
  position: absolute;
  top: calc(7 / 32 * 1rem);
  left: 0;
  width: 100%;
  height: calc(104 / 32 * 1rem);
  border-radius: calc(52 / 32 * 1rem);
  background-color: var(--color-black);
  mix-blend-mode: multiply;
  opacity: .36;
}
.inpage_navi > ul > li.inpage_navi04::before {
  height: calc(184 / 32 * 1rem);
}
.inpage_navi > ul > li > a,
.inpage_navi > ul > li > div {
  position: relative;
  width: 100%;
  height: calc(104 / 32 * 1rem);
  border-radius: calc(52 / 32 * 1rem);
  background-color: var(--color-blue);
}
.inpage_navi > ul > li > div {
  cursor: pointer;
}
.inpage_navi > ul > li.inpage_navi04 > div {
  height: calc(184 / 32 * 1rem);
  background-color: var(--color-pink);
}
.inpage_navi > ul > li > a > span,
.inpage_navi > ul > li > div > span {
  display: block;
  width: 100%;
}
.inpage_navi > ul > li.inpage_navi01 > a {
  background-image: url(../images/inpage_navi01.svg?ud=20260707);
}
.inpage_navi > ul > li.inpage_navi02 > a {
  background-image: url(../images/inpage_navi02.svg?ud=20260707);
}
.inpage_navi > ul > li.inpage_navi03 > a {
  background-image: url(../images/inpage_navi03.svg?ud=20260707);
}
.inpage_navi > ul > li.inpage_navi04 > div {
  background-image: url(../images/inpage_navi04.svg?ud=20260707);
}

/* ------------------------
  Section01 #howto_apply
------------------------ */
.section01 {
  position: relative;
  margin-top: calc(140 / 32 * 1rem);
  padding-bottom: calc(296 / 32 * 1rem);
}
.section01 .ttl_howto_apply {
  position: relative;
  z-index: 20;
  width: calc(152 / 32 * 1rem);
  height: calc(186 / 32 * 1rem);
  margin-right: auto;
  margin-left: auto;
  background-image: url(../images/ttl_howto_apply.svg);
}

.section01 .section_body {
  position: relative;
  z-index: 10;
  margin-top: calc(-136 / 32 * 1rem);
  background-color: var(--color-paleblue);
  padding-top: calc(196 / 32 * 1rem);
  padding-bottom: calc(92 / 32 * 1rem);
}
.apply_flow_box {
  padding-left: calc(45 / 668 * 100%);
}
.apply_flow_box > li {
  position: relative;
  margin-top: calc(16 / 32 * 1rem);
  padding-left: calc(78 / 32 * 1rem);
}
.apply_flow_box > li::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(var(--radius-20) * 1.6);
  width: 3px;
  height: calc(100% - var(--radius-20) * 4.3);
  border-radius: 1.5px;
  background-color: rgb(164,225,255);
}
.apply_flow_box .title_num {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(70 / (680 - 57) * 100%);
  aspect-ratio: 1/1;
}
.apply_flow_box .apply_flow01 .title_num {
  background-image: url(../images/num1.svg);
}
.apply_flow_box .apply_flow02 .title_num {
  background-image: url(../images/num2.svg);
}
.apply_flow_box .apply_flow03 .title_num {
  background-image: url(../images/num3.svg);
}
.apply_flow_box .title_text {
  display: block;
  margin-left: calc(12 / 32 * 1rem);
}
.apply_flow_box > li.apply_flow01 > .title {
  display: flex;
}
.apply_flow_box > li.apply_flow01 > .title .title_text {
  width: calc(320 / 32 * 1rem);
}
.apply_flow_box > li.apply_flow01 > .title .image {
  display: flex;
  width: calc(180 / 32 * 1rem);
  justify-content: space-between;
}
.apply_flow_box > li.apply_flow01 > .title .image > li {
  width: calc(80 / 180 * 100%);
}
.apply_flow_box > li.apply_flow01 > .title .image > li img {
  width: 100%;
  aspect-ratio: 1/1;
}
.apply_flow_box > li .item {
  margin-top: calc(40 / 32 * 1rem);
}
.apply_flow_box > li.apply_flow01 > .item .title {
  margin-bottom: 0.25rem;
}
.apply_flow_box > li.apply_flow01 > .item {
  width: calc(464 / 32 * 1rem);
  padding-bottom: calc(8 / 32 * 1rem);
}
.apply_flow_box > li.apply_flow02 {
  padding-bottom: calc(32 / 32 * 1rem);
}
.apply_flow_box > li.apply_flow02 > .item {
  position: relative;
  margin-top: calc(24 / 32 * 1rem);
}
.apply_flow_box > li.apply_flow02 > .item .image {
  transform: translate(calc(41 / 32 * 1rem), calc(-136 / 32 * 1rem));
  width: calc(188 / 32 * 1rem);
  height: calc(256 / 32 * 1rem);
}
.apply_flow_box > li.apply_flow02 .btn_make_photo01 {
  width: calc(420 / 32 * 1rem);
  aspect-ratio: 42/17;
  background-image: url(../images/btn_make_photo01.svg);
}
.apply_flow_box > li.apply_flow03::before {
  display: none;
}
.apply_flow_box > li.apply_flow03 .title_text {
  padding-top: 0.125rem;
}
.apply_flow_box > li.apply_flow03 .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(576 / 32 * 1rem);
  margin-top: calc(24 / 32 * 1rem);
  margin-left: calc(-78 / 32 * 1rem);
}
.apply_flow_box .hash_tag {
  width: calc(434 / 32 * 1rem);
  height: calc(132 / 32 * 1rem);
  margin-bottom: calc(20 / 32 * 1rem);
  border-radius: 1rem;
  background-color: var(--color-pink);
  background-image: url(../images/text_hash_tag.svg);
}

/* .terms_box */
.section01 .terms_box {
  margin-top: calc(72 / 32 * 1rem);
  padding: calc(56 / 32 * 1rem) 0 calc(40 / 32 * 1rem);
}
.section01 .terms_box .item {
  width: calc(480 / 32 * 1rem);
}
.terms_box .item {
  position: relative;
  margin: 0 auto 0 calc(36 / 32 * 1rem);
  color: var(--color-black);
}
.terms_box .item .terms_text {
  aspect-ratio: 480/204;
  overflow-y: scroll;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}
.terms_box .item .terms_text::-webkit-scrollbar {
  display: none;
}
.terms_box .item .terms_text .terms_text_inner a {
  text-decoration: underline;
}
.terms_box .item .terms_scb {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(calc(36 / 16 * 100%), 0);
  width: max(8px, calc(16 / 480 * 100%));
  height: 100%;
  border-radius: max(4px, calc(var(--radius-20) * 0.4));
  background-color: rgb(230,230,230);
}
.terms_box .item .terms_scb ._sc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1/2;
  border-radius: max(4px, calc(var(--radius-20) * 0.4));
  background-color: var(--color-lightblue);
  cursor: pointer;
}

/* .period_box */
.section01 .period_box {
  margin-top: calc(64 / 32 * 1rem);
  padding: calc(64 / 32 * 1rem) 0 calc(36 / 32 * 1rem);
}
.section01 .period_box .text_period {
  width: calc(540 / 32 * 1rem);
  height: calc(100 / 32 * 1rem);
  margin: 0 auto;
  background-image: url(../images/text_period.svg?ud=260731);
}

/* ------------------------
  Section02 #make
------------------------ */
.section02 .section_header {
  position: relative;
  margin-top: calc(-36 / 32 * 1rem);
  padding-top: calc(60 / 32 * 1rem);
  background-color: var(--color-bgblue);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image: url(../images/bg02-1.svg);
}
.section02 .section_header::before {
  content: '';
  position: absolute;
  top: calc(-21 / 32 * 1rem);
  width: 100%;
  height: calc(42 / 32 * 1rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image: url(../images/bg02-2.svg);
}
.section02 .section_header .ttl_type09 {
  display: block;
  height: calc(200 / 32 * 1rem);
  background-image: url(../images/ttl_type09.svg);
}
.section02 .section_header .ttl_maker {
  display: block;
  height: calc(240 / 32 * 1rem);
  background-image: url(../images/ttl_maker.svg);
}
.section02 .section_header .lead_text {
  height: calc(150 / 32 * 1rem);
  background-image: url(../images/lead_text_section02.svg);
}
.section02 .images_list {
  display: flex;
  padding-bottom: calc(40 / 32 * 1rem);
}
.section02 .images_list > li {
  width: 50%;
}
.section02 .images_list > li .title {
  width: 100%;
  aspect-ratio: 375/72;
}
.section02 .images_list > li.image01 .title {
  background-image: url(../images/sec02_images_list_text01.svg);
}
.section02 .images_list > li.image02 .title {
  background-image: url(../images/sec02_images_list_text02.svg);
}
.section02 .images_list > li .image {
  position: relative;
  width: 100%;
  aspect-ratio: 375/264;
}
.section02 .images_list > li .image > div {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.section02 .images_list > .image01 .image > div {
  left: calc(10 / 375 * 100%);
}
.section02 .images_list > .image02 .image > div {
  right: calc(10 / 375 * 100%);
}
.section02 .btn_maker_box .check {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 75/7;
}
.section02 .btn_maker_box .check .agree_chk {
  position: relative;
  width: calc(34 / 750 * 100%);
  aspect-ratio: 1/1;
  border: calc(var(--radius-20) * 0.2) var(--color-black) solid;
}
.section02 .btn_maker_box .check .agree_chk::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-82 / 56 * 100%));
  width: calc(56 / 26 * 100%);
  aspect-ratio: 1/1;
  background-image: url(../images/arrow_notice.svg);

  animation-name: arrow_notice;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes arrow_notice {
  0%   { top: 0; }
  25%  { top: -66%; animation-timing-function: cubic-bezier(1, 0.05, 1, 1); }
  50%  { top: 0; }
  100% { top: 0; }
}
.section02 .btn_maker_box._checked .check .agree_chk::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(50 / 26 * 100%);
  aspect-ratio: 1/1;
  background-image: url(../images/icon_check.svg);
}
.section02 .btn_maker_box .check .text {
  margin-left: calc(20 / 750 * 100%);
  padding-bottom: calc(4 / 750 * 100%);
  color: var(--color-black);
  letter-spacing: 0.25rem;
}
.section02 .btn_maker_box .check .text .link_terms {
  text-decoration: underline;
  cursor: pointer;
}
.section02 .btn_maker_box .btn_maker {
  width: calc(590 / 32 * 1rem);
  height: calc(238 / 32 * 1rem);
  margin: calc(50 / 32 * 1rem) auto 0;
  background-image: url(../images/btn_maker_disable.svg);
}
.section02 .btn_maker_box._checked .btn_maker {
  background-image: url(../images/btn_maker.svg);
  cursor: pointer;
}

/* ------------------------
  Section03 #howto_make
------------------------ */
.section03 {
  position: relative;
  padding-top: calc(116 / 32 * 1rem);
}
.howto_make_steps > li::before,
.howto_make_steps > li::after {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
}
.howto_make_steps > li.howto_make_step1::before {
  top: calc(-102 / 32 * 1rem);
  right: calc(17 / 32 * 1rem);
  width: calc(116 / 32 * 1rem);
  height: calc(142 / 32 * 1rem);
  background-image: url(../images/section03_cat01.png);
}
.howto_make_steps > li.howto_make_step2::after {
  top: calc(-124 / 32 * 1rem);
  left: calc(50 / 32 * 1rem);
  width: calc(264 / 32 * 1rem);
  height: calc(252 / 32 * 1rem);
  background-image: url(../images/section03_cat02.png);
}
.howto_make_steps > li.howto_make_step3::after {
  top: calc(-23 / 32 * 1rem);
  right: calc(-41 / 32 * 1rem);
  width: calc(244 / 32 * 1rem);
  height: calc(299 / 32 * 1rem);
  background-image: url(../images/section03_dog03.png);
}
.section03 .section_header {
  position: relative;
  z-index: 30;
}
.section03 .ttl_howto_make {
  position: absolute;
  top: calc(-96 / 32 * 1rem);
  left: calc(23 / 32 * 1rem);
  display: block;
  width: calc(168 / 32 * 1rem);
  height: calc(210 / 32 * 1rem);
  background-image: url(../images/ttl_howto_make.svg);
}
.section03 .section_body {
  position: relative;
  z-index: 20;
}
.howto_make_steps > li {
  position: relative;
}
.howto_make_steps .howto_make_step2 {
  margin-top: calc(90 / 32 * 1rem);
}
.howto_make_steps .howto_make_step3 {
  margin-top: calc(80 / 32 * 1rem);
}
.howto_make_steps > li > header {
  position: relative;
  background-color: var(--color-palepink);
  border-radius: var(--radius-120) var(--radius-120) 0 0;
}
.howto_make_steps > li .ttl_step {
  height: calc(112 / 32 * 1rem);
}
.howto_make_steps > li.howto_make_step1 .ttl_step {
  background-image: url(../images/howto_make_step1.svg);
}
.howto_make_steps > li.howto_make_step2 .ttl_step {
  background-image: url(../images/howto_make_step2.svg);
}
.howto_make_steps > li.howto_make_step3 .ttl_step {
  background-image: url(../images/howto_make_step3.svg);
}
.howto_make_steps > li > header > .text {
  height: calc(98 / 32 * 1rem);
}
.howto_make_steps > li.howto_make_step1 > header > .text {
  background-image: url(../images/howto_make_step1_text.svg);
}
.howto_make_steps > li.howto_make_step2 > header > .text {
  background-image: url(../images/howto_make_step2_text.svg);
}
.howto_make_steps > li.howto_make_step3 > header > .text {
  height: calc(130 / 32 * 1rem);
  background-image: url(../images/howto_make_step3_text.svg);
}

.howto_make_steps .howto_make_body {
  padding-top: calc(60 / 32 * 1rem);
  padding-bottom: calc(112 / 32 * 1rem);
}
.howto_make_steps .howto_make_body .text {
  width: calc(582 / 32 * 1rem);
  margin: calc(20 / 32 * 1rem) auto 0;
}
.howto_make_steps .howto_make_body .ttl_type03 {
  width: calc(200 / 32 * 1rem);
  margin-top: calc(72 / 32 * 1rem);
}
.ttl_type03 {
  margin-right: auto;
  margin-left: auto;
  aspect-ratio: 200/76;
  background-image: url(../images/ttl_type03.svg);
}
.howto_make_steps .howto_make_body .image {
  width: calc(560 / 32 * 1rem);
  margin: calc(20 / 32 * 1rem) auto 0;
}
.howto_make_steps .howto_make_body .image.image1 {
  width: calc(582 / 32 * 1rem);
  margin: 0 auto;
}

.howto_make_steps li.howto_make_step2 .howto_make_body {
  padding-top: calc(28 / 32 * 1rem);
}
.howto_make_steps > li.howto_make_step2 .frame_list1 {
  margin-top: calc(30 / 32 * 1rem);
}
.howto_make_steps > li.howto_make_step2 .frame_list2 {
  margin-top: calc(52 / 32 * 1rem);
}
.howto_make_steps > li.howto_make_step2 .frame_list3 {
  margin-top: calc(24 / 32 * 1rem);
  margin-bottom: calc(52 / 32 * 1rem);
}

.howto_make_steps .howto_make_step2 .howto_make_body .ttl_type03 {
  margin: calc(52 / 32 * 1rem) auto calc(40 / 32 * 1rem);
}

.howto_make_steps > li.howto_make_step3 {
  position: relative;
}
.howto_make_steps > li.howto_make_step3 .howto_make_body {
  padding-top: calc(28 / 32 * 1rem);
  padding-bottom: calc(80 / 32 * 1rem);
}
.howto_make_steps > li.howto_make_step3 .image {
  width: calc(582 / 32 * 1rem);
}
.howto_make_steps > li.howto_make_step3 .image.image_hmks3_01 {
  height: calc(266 / 32 * 1rem);
  margin-top: calc(40 / 32 * 1rem);
  background-image: url(../images/image_step3-01.png);
}
.howto_make_steps > li.howto_make_step3 .image.image_hmks3_02 {
  height: calc(540 / 32 * 1rem);
  margin-top: 0;
  background-image: 
    url(../images/image_step3-02-2.svg),
    url(../images/image_step3-02-1.png);
}


.howto_make_steps .btn_make_photo02 {
  position: relative;
  width: calc(420 / 750 * 100%);
  margin: calc(-80 / 750 * 100%) auto 0;
  aspect-ratio: 42/17;
  background-image: url(../images/btn_make_photo02.svg);
}
.btn_move_to_top {
  position: relative;
  width: calc(246 / 750 * 100%);
  aspect-ratio: 246/124;
  margin: calc(62 / 750 * 100%) calc(20 / 750 * 100%) 0 auto;
  background-image: url(../images/btn_move_to_top.svg);
}


/* ------------------------
  Page Footer
------------------------ */
.page_footer {
  background-color: var(--color-white);
}
.footer_contents {
  padding-bottom: calc(60 / 750 * 100%);
  background-color: rgb(170,223,255);
}
.footer_contents .title {
  aspect-ratio: 75/18;
  background-color: var(--color-deepblue);
  background-image: url(../images/footer_contents_title.svg);
}
.footer_contents .banner img {
  aspect-ratio: 75/40;
}
.footer_contents .image {
  width: calc(704 / 750 * 100%);
  margin: calc(30 / 750 * 100%) auto 0;
  padding: calc(16 / 750 * 100%);
  background-color: var(--color-white);
  border-radius: calc(var(--radius-20) * 1.05);
}
.footer_contents .movie_box {
  position: relative;
  aspect-ratio: 672/378;
}
.footer_contents .movie_box .movie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.footer_navi > ul {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: calc(72 / 750 * 100%);
}
.footer_navi > ul > li {
  width: calc(260 / 750 * 100%);
  margin: 0 calc(10 / 750 * 100%);
}
.footer_navi > ul > li > a {
  aspect-ratio: 26/8;
}
.footer_navi > ul > li > a.link_doggyman {
  background-image: url(../images/footer_logo_doggyman.svg);
}
.footer_navi > ul > li > a.link_cattyman {
  background-image: url(../images/footer_logo_cattyman.svg);
}
.copyright {
  aspect-ratio: 75/6;
  margin-top: calc(60 / 750 * 100%);
  padding-top: calc(14 / 750 * 100%);
  background-color: var(--color-footerblue);
}
.copyright > span {
  width: calc(460 / 750 * 100%);
  aspect-ratio: 460/32;
  margin: 0 auto;
  background-image: url(../images/copyright.svg);
}

/* ------------------------
  Navi Pc
------------------------ */
.nav_pc {
  display: block;
  position: absolute;
  top: 50%;
  left: calc(390 / 1600 * 100%);
  transform: translate(-50%, -50%);
  width: calc(498 / 1600 * 100%);
  max-width: 498px;
  min-width: 240px;
}
.nav_pc .title {
  width: calc(280 / 498 * 100%);
  aspect-ratio: 28/25;
  margin: 0 auto;
  background-image: url(../images/main_title_pc.svg);
}
.nav_pc_list > ul {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(0.5vw, 8px);
  margin-top: min(calc(87 / 498 * 100%), 8.7vh, 87px);
  border: min(0.625vw, 10px) var(--color-blue) solid;
  border-radius: min(5.625vw, 90px);
  padding: calc(32 / 498 * 100%) 0 calc(72 / 498 * 100%);
  background-color: var(--color-white);
}
.nav_pc_list li > * {
  width: min(21.75vw, 348px);
  aspect-ratio: 348/58;
}
.nav_pc_list li > a {
  mask-repeat: no-repeat;
  mask-mode: alpha;
  background-color: var(--color-blue);
}
.nav_pc_list li.nav_pc01 > a {
  mask-image: url(../images/nav_pc01.svg);
}
.nav_pc_list li.nav_pc02 > a {
  mask-image: url(../images/nav_pc02.svg);
}
.nav_pc_list li.nav_pc03 > a {
  mask-image: url(../images/nav_pc03.svg);
}
.nav_pc_list li.nav_pc04 > a {
  mask-image: url(../images/nav_pc04.svg);
}
.nav_pc_list .menu_title_pc {
  position: absolute;
  top: max(-0.625vw, -10px);
  left: max(-0.625vw, -10px);
  transform: translate(0, calc(-22 / 136 * 100%));
  width: calc(120 / 498 * 100%);
  aspect-ratio: 120/136;
  background-image: url(../images/menu_title_pc.svg);
}

.nav_pc_list .nav_pc_btn_to_top {
  position: absolute;
  bottom: max(-1.375vw, -22px);
  left: 50%;
  transform: translate(-50%, 0);
  width: min(10vw, 160px);
  aspect-ratio: 2/1;
  background-image: url(../images/btn_move_to_top.svg);
  cursor: pointer;
}
.nav_pc_list li.nav_pc06 > a {
  background-image: url(../images/nav_pc06.svg);
}
#wrapper._maker ~ #pc_wrapper .nav_pc_list li > a,
#wrapper._result ~ #pc_wrapper .nav_pc_list li > a {
  pointer-events: none;
  background-color: rgb(202,202,202);
}
#wrapper._maker ~ #pc_wrapper .slider_box,
#wrapper._result ~ #pc_wrapper .slider_box {
  display: none;
} 

.nav_pc .footer_navi > ul {
  justify-content: space-between;
  width: calc(360 / 498 * 100%);
  margin-top: min(calc(72 / 498 * 100%), 7.2vh, 72px);
  margin-left: calc(87 / 498 * 100%);
}
.nav_pc .footer_navi > ul > li {
  width: calc(150 / 360 * 100%);
  margin: 0;
}
.nav_pc .footer_navi > ul > li > a {
  aspect-ratio: 150 / 44;
}

.pc_image_01 {
  position: absolute;
  right: 0;
  bottom: 1.5vh;
  width: min(8.5vw, 136px);
  aspect-ratio: 1/1;
  background-image: url(../images/pc_image_01.svg);
}


/* ------------------------
  Photo Maker
------------------------ */
#photo_maker {
  min-height: 100dvh;
  padding: calc(25 / 750 * 100%);
  background-color: var(--color-bgblue);
}
.photo_maker_box {
  border-radius: var(--radius-122);
  background-color: var(--color-paleblue);
  background-repeat: repeat;
  background-position: left top;
  background-size: calc(40 / 32 * 1rem);
  background-image: url(../images/bg_maker.svg);
}
.photo_maker_box .ttl_type03 {
  width: calc(200 / 32 * 1rem);
  height: calc(76 / 32 * 1rem);
  margin: calc(-12 / 32 * 1rem) auto 0;
}
.photo_maker_box .text {
  color: var(--color-deepblue);
  letter-spacing: -.025rem;
}
.photo_maker_box .photo_maker_back_btn {
  width: calc(216 / 32 * 1rem);
  aspect-ratio: 2/1;
  margin: calc(40 / 32 * 1rem) auto 0;
  background-image: url(../images/photo_maker_footer_btn_1.svg);
  cursor: pointer;
}
.photo_maker_box .photo_maker_back_btn.back_to_top {
  position: absolute;
  bottom: calc(-40 / 32 * 1rem);
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(250 / 32 * 1rem);
  aspect-ratio: 250/126;
  background-image: url(../images/photo_maker_footer_btn.svg);
}
/* photo_maker_header */
.photo_maker_header ul {
  display: flex;
  justify-content: center;
  gap: calc(23 / 32 * 1rem);
  padding: calc(60 / 32 * 1rem) 0 calc(40 / 32 * 1rem);
}
.photo_maker_header ul > li {
  position: relative;
  width: calc(198 / 32 * 1rem);
}
.photo_maker_header ul > li > span {
  height: calc(170 / 32 * 1rem);
}
/* photo_maker01 */
.photo_maker01 {
  position: relative;
  padding-bottom: calc(116 / 32 * 1rem);
  margin-bottom: calc(40 / 32 * 1rem);
}
.photo_maker01 .text01 {
  position: relative;
  height: calc(430 / 32 * 1rem);
  background-position: center top;
  background-image: url(../images/photo_maker01_text01.svg?ud=260715);
}
.photo_maker01 .text01::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(274 / 32 * 1rem);
  aspect-ratio: 28/30;
  background-image: url(../images/photo_maker01_text01_bg.png);
  background-size: contain;
}
.photo_maker01 .btn_select_image {
  position: relative;
  width: calc(602 / 32 * 1rem);
  height: calc(242 / 32 * 1rem);
  margin: calc(-229 / 32 * 1rem) auto 0;
  background-image: url(../images/btn_select_image.svg?ud=260715);
  overflow: hidden;
  cursor: pointer;
}
.btn_select_image_input {
  color: transparent;
}
.btn_select_image_input::file-selector-button {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-color: transparent;
  background-color: transparent;
  color: transparent;
}
.photo_maker01 .image {
  margin: calc(20 / 32 * 1rem) calc(64 / 32 * 1rem) 0 calc(140 / 32 * 1rem);
}
.photo_maker01 .text.note {
  display: flex;
  justify-content: center;
  margin: .5rem auto 1rem;
}


/* photo_maker02 */
.photo_maker02 {
  padding-bottom: calc(102 / 32 * 1rem);
  margin-bottom: calc(23 / 32 * 1rem);
}
.photo_maker02 .title {
  height: calc(86 / 32 * 1rem);
}
.photo_maker02 .title.title01 {
  background-image: url(../images/photo_maker02_title01.svg?ud=260707);
}
.photo_maker02 .title.title02 {
  background-image: url(../images/photo_maker02_title02.svg?ud=260707);
}
.photo_maker02 .bg_white {
  position: relative;
  padding-top: calc(54 / 32 * 1rem);
  padding-bottom: calc(54 / 32 * 1rem);
}
.photo_maker02 .ttl_type06 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(-116 / 94 * 100%), 0);
  width: calc(94 / 32 * 1rem);
  height: calc(124 / 32 * 1rem);
  z-index: 30;
}
.photo_maker02 .preview_image {
  position: relative;
  width: calc(360 / 32 * 1rem);
  aspect-ratio: 4/5;
  margin: 0 auto;

  background-color: silver;
  z-index: 20;
}
.photo_maker02 .preview_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.photo_maker02 .help_box {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0, calc(53 / 450 * 100%));
  width: calc(174 / 32 * 1rem);
  aspect-ratio: 174/450;
}
.photo_maker02 .help_box .help_text01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/help_text01.svg);
}
@media screen and (min-width: 769px) {
  .photo_maker02 .help_box .help_text01 {
    background-image: url(../images/help_text02.svg);
  }
}
.photo_maker02 .ctrl_box {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, calc(53 / 450 * 100%));
  width: calc(174 / 32 * 1rem);
  aspect-ratio: 174/450;
}
.photo_maker02 .ctrl_box .btn_pc_zoom {
  display: none;
}
@media screen and (min-width: 769px) {
  .photo_maker02 .ctrl_box .btn_pc_zoom {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 174/138;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/btn_pc_zoom.svg?ud=260707);
  }
  .photo_maker02 .ctrl_box .btn_pc_zoom > div {
    position: absolute;
    right: 21%;
    width: 30%;
    aspect-ratio: 1/1;
  }
  .photo_maker02 .ctrl_box .btn_pc_zoom > #zoom_up {
    bottom: 61%;
    cursor: pointer;
  }
  .photo_maker02 .ctrl_box .btn_pc_zoom > #zoom_down {
    bottom: 0;
    cursor: pointer;
  }
}
.photo_maker02 .frame_name {
  height: calc(134 / 32 * 1rem);
}

.photo_maker02 .frame01 .frame_name {
  background-image: url(../images/frame_name01.svg);
}
.photo_maker02 .frame02 .frame_name {
  background-image: url(../images/frame_name02.svg);
}
.photo_maker02 .frame03 .frame_name {
  background-image: url(../images/frame_name03.svg);
}
.photo_maker02 .frame04 .frame_name {
  background-image: url(../images/frame_name04.svg);
}
.photo_maker02 .frame05 .frame_name {
  background-image: url(../images/frame_name05.svg);
}
.photo_maker02 .frame06 .frame_name {
  background-image: url(../images/frame_name06.svg);
}
.photo_maker02 .frame13 .frame_name {
  background-image: url(../images/frame_name13.svg);
}
.photo_maker02 .frame14 .frame_name {
  background-image: url(../images/frame_name14.svg);
}
.photo_maker02 .frame15 .frame_name {
  background-image: url(../images/frame_name15.svg);
}
.photo_maker02 .frame16 .frame_name {
  background-image: url(../images/frame_name16.svg);
}
.photo_maker02 .frame17 .frame_name {
  background-image: url(../images/frame_name17.svg);
}
.photo_maker02 .frame18 .frame_name {
  background-image: url(../images/frame_name18.svg);
}

.photo_maker02 .input_box {
  position: relative;
  width: calc(570 / 32 * 1rem);
  margin: 0 auto calc(40 / 32 * 1rem);
}
.photo_maker02 .input_box .placeholder_text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 570/112;
  background-image: url(../images/placeholder_text.svg);
}
.photo_maker02 .input_box._use .placeholder_text {
  background-image: none;
}
.photo_maker02 .input_box input {
  position: relative;
  width: 100%;
  aspect-ratio: 570/112;
  border: 3px var(--color-blue) solid;
  color: var(--color-deepblue);
  font-size: 150%;
  text-align: center;
}
.photo_maker02 .input_box .text {
  margin-top: calc(12 / 570 * 100%);
}
._maker02_2 .btn_box {
  margin-top: calc(20 / 32 * 1rem);
}
.photo_maker02 .btn_submit {
  width: calc(204 / 32 * 1rem);
  height: calc(104 / 32 * 1rem);
  margin: 0 auto;
  background-image: url(../images/btn_submit_na.svg);
}
.photo_maker02 .btn_submit._active {
  background-image: url(../images/btn_submit.svg);
  cursor: pointer;
}
.photo_maker02 .frame_list_box {
  width: calc(560 / 32 * 1rem);
  margin: calc(80 / 32 * 1rem) auto 0;
}
.photo_maker02 .frame_list_box .frame_list.frame_list2 {
  margin-top: calc(32 / 32 * 1rem);
}
.photo_maker02 .frame_list_box .frame_list.frame_list3 {
  margin-top: calc(30 / 32 * 1rem);
}
.photo_maker02 .frame_list_box .frame_list li {
  margin-top: 0;
}
.photo_maker02 .frame_list li::after {
  transform: translate(calc(-11 / 40 * 100%), calc(-20 / 40 * 100%));
}
.photo_maker02 .frame_list li::before {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  color: var(--color-deepblue);
  font-size: calc(var(--radius-20) * 1.1);
  letter-spacing: -.025rem;
  text-align: center;
  margin-bottom: .375rem;
}
.photo_maker02 .frame_list li.f01::before {
  content: 'わんちゃん用';
}
.photo_maker02 .frame_list li.f02::before {
  content: 'ねこちゃん用';
}
.photo_maker02 .ttl_last_year {
  margin-top: calc(40 / 32 * 1rem);
}
.photo_maker02 .ttl_last_year > span {
  color: var(--color-deepblue);
}
.photo_maker02 .note {
  margin-top: calc(40 / 32 * 1rem);
  font-size: calc(22 / 32 * 1rem);
  line-height: 1.091;
  color: var(--color-deepblue);
  text-align: center;
}
.photo_maker_box .photo_maker02 .photo_maker_back_btn {
  position: absolute;
  bottom: calc(23 / 32 * 1rem);
  left: 50%;
  transform: translate(-50%, 0);
  margin: 0;
}


/* photo_maker03 */
.photo_maker03 {
  padding-bottom: calc(106 / 32 * 1rem);
  margin-bottom: calc(52 / 32 * 1rem);
}
.photo_maker03 > .title {
  aspect-ratio: 71/10;
  background-image: url(../images/photo_maker03_title.svg?ud=260715);
}
.photo_maker03 > .bg_white{
  padding-top: calc(54 / 32 * 1rem);
  padding-bottom: calc(54 / 32 * 1rem);
}
.photo_maker03 .finished_image {
  width: calc(520 / 32 * 1rem);
  aspect-ratio: 4/5;
  margin: 0 auto;
  background-color: silver;
}
.photo_maker03 .finished_image img {
  width: 100%;
  height: auto;
}
.photo_maker03 > .bg_white .text {
  width: calc(520 / 32 * 1rem);
  aspect-ratio: 520/152;
  margin: 0 auto;
  background-image: url(../images/finished_text.svg);
}
.photo_maker03._spad > .bg_white .text {
  display: none;
}

.photo_maker03 .btn_box:has(.btn_download) {
  display: none;
  height: calc(300 / 32 * 1rem);
  margin-top: -2rem;
  padding-top: calc(58 / 32 * 1rem);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/bg_btn_box_download.svg?ud=260715);
}
.photo_maker03 .btn_download {
  display: none;
  width: calc(602 / 32 * 1rem);
  height: calc(240 / 32 * 1rem);
  margin: 0 auto;
  background-image: url(../images/btn_download.svg?ud=260715);
}
.photo_maker03._spad .btn_box:has(.btn_download),
.photo_maker03._spad .btn_download {
  display: block;
}

@media screen and (min-width: 769px) {
  .photo_maker03 > .bg_white .text {
    display: none;
  }
  .photo_maker03 .btn_box:has(.btn_download),
  .photo_maker03 .btn_download {
    display: block;
  }
}
.photo_maker03 > .text {
  height: calc(150 / 32 * 1rem);
  margin-top: calc(-7 / 32 * 1rem);
  background-image: url(../images/photo_maker03_text01.svg);
}
.photo_maker03 > .round_box {
  position: relative;
  width: calc(600 / 32 * 1rem);
  border-radius: var(--radius-40);
  padding-bottom: calc(54 / 32 * 1rem);
}
.photo_maker03 > .round_box .ttl_type04 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-12 / 66 * 100%));
  width: calc(258 / 600 * 100%);
  aspect-ratio: 258/66;
}
.howto_make_body .apply_flow_box {
  padding: calc(20 / 32 * 1rem) calc(90 / 32 * 1rem) 0;
}
.photo_maker03 .apply_flow_box {
  padding: calc(54 / 32 * 1rem) calc(64 / 32 * 1rem) 0;
}
.howto_make_body .apply_flow_box > li,
.photo_maker03 .apply_flow_box > li {
  padding-left: 0;
}
.howto_make_body .apply_flow_box > li::before,
.photo_maker03 .apply_flow_box > li::before {
  display: none;
}
.howto_make_body .apply_flow_box > li.apply_flow01 > .title {
  padding-left: calc(24 / 500 * 100%);
  color: var(--color-black);
}
.howto_make_body .apply_flow_box > li.apply_flow01 > .item,
.photo_maker03 .apply_flow_box > li.apply_flow01 > .item {
  width: calc(464 / 500 * 100%);
  padding-bottom: calc(16 / 500 * 100%);
}
.howto_make_body .apply_flow_box > li.apply_flow01 > .item {
  width: calc(484 / 500 * 100%);
  padding-left: calc(24 / 500 * 100%);
}
.howto_make_body .apply_flow_box > li.apply_flow01 > .title .title_text,
.photo_maker03 .apply_flow_box > li.apply_flow01 > .title .title_text {
  width: calc(320 / 500 * 100%);
  letter-spacing: -.025rem;
}
.howto_make_body .apply_flow_box > li.apply_flow01 > .title .image,
.photo_maker03 .apply_flow_box > li.apply_flow01 > .title .image {
  width: calc(180 / 500 * 100%);
}
.photo_maker03 .sns_btn_list {
  margin-top: 4px;
}
.howto_make_body .apply_flow_box > li.apply_flow03 > .title {
  padding: 0 calc(8 / 500 * 100%) calc(44 / 500 * 100%) calc(24 / 500 * 100%);
}
.photo_maker03 .apply_flow_box > li.apply_flow03 > .title {
  padding: 0 calc(8 / 500 * 100%) calc(44 / 500 * 100%);
}
.howto_make_body .apply_flow_box > li.apply_flow03 .bg_y,
.photo_maker03 .apply_flow_box > li.apply_flow03 .bg_y {
  letter-spacing: -.05rem;
  padding: 0 8px 1px 8px;
}
.btn_apply > span {
  aspect-ratio: 50/11;
  margin-top: calc(16 / 500 * 100%);
}
.btn_apply.sns_i > span {
  background-image: url(../images/btn_apply_sns_i.svg);
}
.btn_apply.sns_x > span {
  background-image: url(../images/btn_apply_sns_x.svg);
}
.photo_maker03 > .round_box > .text {
  width: calc(500 / 600 * 100%);
  margin: calc(64 / 500 * 100%) auto 0;
  color: var(--color-blue);
}
.photo_maker03 .txt_hash_tag {
  display: flex;
  justify-content: center;
  margin: .25rem -2rem;
}
.photo_maker03 .txt_hash_tag > span {
  display: inline-block;
}
.photo_maker03 .prize_box {
  position: relative;
  margin-top: calc(80 / 600 * 100%);
}
.photo_maker03 .prize_box .title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-34 / 60 *100%));
  width: calc(340 / 600 * 100%);
  aspect-ratio: 34/6;
}
.photo_maker03 .prize_box.dog .title {
  background-image: url(../images/txt_dog.svg);
}
.photo_maker03 .prize_box.cat .title {
  background-image: url(../images/txt_cat.svg);
}
.photo_maker03 .prize_box.dog .image {
  background-color: var(--color-skyblue);
}
.photo_maker03 .prize_box.cat .image {
  background-color: var(--color-palepink);
}

.photo_maker03 .round_box_bl {
  width: calc(600 / 32 * 1rem);
}
.photo_maker03 .terms_box {
    margin-top: calc(96 / 32 * 1rem);
    padding: calc(56 / 32 * 1rem) 0 calc(40 / 32 * 1rem);
}
.photo_maker03 .terms_box .item {
  width: calc(480 / 600 * 100%);
}
.photo_maker03 .period_box {
    margin-top: calc(96 / 32 * 1rem);
    padding: calc(64 / 32 * 1rem) 0 calc(36 / 32 * 1rem);
}
.photo_maker03 .period_box .text_period {
    width: calc(540 / 32 * 1rem);
    height: calc(100 / 32 * 1rem);
    margin: 0 auto;
    background-image: url(../images/text_period.svg?ud=260731);
}
.photo_maker03 .btn_make_more {
  width: calc(450 / 32 * 1rem);
  aspect-ratio: 5/2;
  margin: calc(54 / 32 * 1rem) auto 0;
  background-image: url(../images/btn_make_more.svg);
  cursor: pointer;
}
.photo_maker03 .photo_maker_back_btn {
  margin: calc(36 / 32 * 1rem) auto 0;
}
.photo_maker03 .photo_maker_back_btn.back_to_top {
  bottom: calc(26 / 32 * 1rem);
}

/* hide / show */
#result2025 {
  display: none;
}
#photo_maker {
  display: none;
}
#wrapper._result._result2025 #result2025 {
  display: block;
}
#wrapper._maker .page_header,
#wrapper._result .page_header {
  display: none;
}
#wrapper._maker #main,
#wrapper._result #main {
  display: none;
}
#wrapper._maker #photo_maker {
  display: block;
}
#wrapper._maker .page_footer,
#wrapper._result .page_footer {
  display: none;
}
#photo_maker02 {
  display: none;
}
#photo_maker02 > .title02 {
  display: none;
}
#photo_maker02 .input_box {
  display: none;
}
#photo_maker03 {
  display: none;
}
/* maker02 */
#photo_maker._maker02 #photo_maker01 {
  display: none;
}
#photo_maker._maker02 #photo_maker02 {
  display: block;
}
/* maker02_2 */
#photo_maker._maker02_2 #photo_maker02 {
  display: block;
  border-radius: 0 0 var(--radius-122) var(--radius-122);
  overflow: hidden;
}
#photo_maker._maker02_2 #photo_maker02 > .title01 {
  display: none;
}
#photo_maker._maker02_2 #photo_maker02 .help_box {
  display: none;
}
#photo_maker._maker02_2 #photo_maker02 .ctrl_box {
  display: none;
}
#photo_maker._maker02_2 #photo_maker02 #frame_name {
  display: none;
}
#photo_maker._maker02_2 #photo_maker02 .frame_list_box {
  display: none;
}
#photo_maker._maker02_2 #photo_maker02 > .title02 {
  display: block;
}
#photo_maker._maker02_2 #photo_maker02 .input_box {
  display: block;
}
/* maker03 */
#photo_maker._maker03 #photo_maker01 {
  display: none;
}
#photo_maker._maker03 #photo_maker03 {
  display: block;
}
.photo_maker_header ul > li.photo_maker_nav01 > span {
  background-image: url(../images/nav_maker01.svg?ud=260707);
}
.photo_maker_header ul > li.photo_maker_nav02 > span {
  background-image: url(../images/nav_maker02_ns.svg?ud=260707);
}
.photo_maker_header ul > li.photo_maker_nav03 > span {
  background-image: url(../images/nav_maker03_ns.svg?ud=260707);
}
._maker02 .photo_maker_header ul > li.photo_maker_nav01 > span,
._maker03 .photo_maker_header ul > li.photo_maker_nav01 > span {
  background-image: url(../images/nav_maker01_dn.svg?ud=260707);
}
._maker02 .photo_maker_header ul > li.photo_maker_nav02 > span {
  background-image: url(../images/nav_maker02.svg?ud=260707);
}
._maker03 .photo_maker_header ul > li.photo_maker_nav02 > span {
  background-image: url(../images/nav_maker02_dn.svg?ud=260707);
}
._maker03 .photo_maker_header ul > li.photo_maker_nav03 > span {
  background-image: url(../images/nav_maker03.svg?ud=260707);
}

.photo_maker_header ul > li::after {
  content: '';
  display: none;
  position: absolute;
  top: calc(-19 / 32 * 1rem);
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(86 / 32 * 1rem);
  height: calc(50 / 32 * 1rem);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/icon_clear.svg);
}
._maker02 .photo_maker_header ul > li.photo_maker_nav01::after,
._maker03 .photo_maker_header ul > li.photo_maker_nav01::after,
._maker03 .photo_maker_header ul > li.photo_maker_nav02::after {
  display: block;
}

/* ------------------------
  Modal
------------------------ */
.modal {
  display: none;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 1000;
  overflow-y: scroll;
  scrollbar-color: transparent transparent;
}
.modal._active {
  display: block;
}
.modal .modal_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}
.modal .modal_box {
  position: relative;
  width: calc(680 / 750 * 100%);
  margin: calc(35 / 750 * 100%) auto;
  border-radius: var(--radius-40);
  border: calc(var(--radius-20) * 0.5) var(--color-blue) solid;
  background-color: var(--color-white);
}
@media screen and (min-width: 769px) {
  .modal .modal_box {
    width: calc(620 / 1600 * 100%);
    margin: calc(35 / 1600 * 100%) auto;
  }
}
.modal .modal_inner {
  position: relative;
  width: calc(540 / 32 * 1rem);
  margin-right: auto;
  margin-left: auto;
  padding-top: calc(160 / 32 * 1rem);
  padding-bottom: calc(80 / 32 * 1rem);
}
.modal .modal_inner .btn_close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(calc(64 / 134 * 100%), 0);
  width: calc(134 / 32 * 1rem);
  aspect-ratio: 134/170;
  background-image: url(../images/btn_close.svg);
  cursor: pointer;
}
.modal .modal_inner .title {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(160 / 66 * 100%));
    width: calc(272 / 540 * 100%);
    aspect-ratio: 272 / 66;
    border-radius: calc(var(--radius-20) * 1.65);
    background-color: var(--color-blue);
    color: var(--color-white);
    letter-spacing: 0.2rem;
    font-weight: 500;
}
.modal .modal_inner .text {
  margin-top: calc(140 / 540 * 100%);
  color: var(--color-black);
}



.frame_list .f01 { background-image: url(../images/frame01_t.png); }
.frame_list .f02 { background-image: url(../images/frame02_t.png); }
.frame_list .f03 { background-image: url(../images/frame03_t.png); }
.frame_list .f04 { background-image: url(../images/frame04_t.png); }
.frame_list .f05 { background-image: url(../images/frame05_t.png); }
.frame_list .f06 { background-image: url(../images/frame06_t.png); }
.frame_list .f13 { background-image: url(../images/frame13_t.png); }
.frame_list .f14 { background-image: url(../images/frame14_t.png); }
.frame_list .f15 { background-image: url(../images/frame15_t.png); }
.frame_list .f16 { background-image: url(../images/frame16_t.png); }
.frame_list .f17 { background-image: url(../images/frame17_t.png); }
.frame_list .f18 { background-image: url(../images/frame18_t.png); }

/* ------------------------
  Close Info
------------------------ */
.main_header .info_box {
  position: relative;
  width: calc(536 / 750 * 100%);
  margin-top: calc(-370 / 750 * 100%);
  margin-right: auto;
  margin-left: auto;
  font-weight: 500;
  background-color: var(--color-close);
  border: 3px var(--color-white) solid;
  border-radius: var(--radius-20);
}
.info_box .info_inner {
  padding: 0 calc(var(--radius-20) * 0.2) calc(var(--radius-20) * 0.2);  
}
.info_box .info_inner .ttl {
  padding-top: calc(78 / 516 * 100%);
  height: 0;
  background-image: url(../images/txt_close.svg);
}
.info_box .info_inner .text {
  border-radius: 0 0 calc(var(--radius-20) * 0.5) calc(var(--radius-20) * 0.5);
  padding: calc(20 / 516 * 100%) calc(30 / 516 * 100%);
  background-color: var(--color-white);
  line-height: 1.5;
  letter-spacing: .025em;
}
.info_box .info_inner .text ._txt_red {
  text-decoration: underline;
}

/* ------------------------
  Result
------------------------ */
.result_outer {
  padding: calc(25 / 750 * 100%);
  background-color: var(--color-bgblue);
}
.section04 {
  border-radius: var(--radius-122);
  background-color: var(--color-paleblue);
  background-repeat: repeat;
  background-position: left top;
  background-size: calc(40 / 32 * 1rem);
  background-image: url(../images/bg_maker.svg);
}


.section04 .section_header {
  position: relative;
  aspect-ratio: 15/13;
}
.section04 .section_header .ttl_result {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(780 / 700 * 100%);
  aspect-ratio: 9/4;
  background-image: url(../images/ttl_result.svg?ud=20260707);
}
.section04 .section_header .result_text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 25/12;
  background-image: url(../images/result_text.svg?ud=260707);
}
.section04 .result_box h4 {
  width: 100%;
  aspect-ratio: 25/4;
}
.ttl_result01 { background-image: url(../images/ttl_result01.svg);}
.ttl_result02 { background-image: url(../images/ttl_result02.svg);}
.ttl_result03 { background-image: url(../images/ttl_result03.svg);}
.ttl_result04 { background-image: url(../images/ttl_result04.svg);}
.ttl_result05 { background-image: url(../images/ttl_result05.svg);}
.photos01 { aspect-ratio: 700/622;}
.photos02 { aspect-ratio: 700/710;}
.photos03 { aspect-ratio: 700/754;}
.photos04 { aspect-ratio: 700/754;}
.photos05 { aspect-ratio: 700/754;}
.photos06 { aspect-ratio: 700/360;}

.section04 .section_body {
  position: relative;
  padding-bottom: calc(140 / 32 * 1rem);
  margin-bottom: calc(54 / 32 * 1rem);
}
.section04 .section_body .back_to_top {
  position: absolute;
  bottom: calc(-54 / 32 * 1rem);
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(250 / 32 * 1rem);
  margin: 0 auto;
  aspect-ratio: 250 / 126;
  background-image: url(../images/photo_maker_footer_btn.svg);
  cursor: pointer;
}
.section04 .section_body > .text {
  padding: calc(140 / 750 * 100%) calc(45 / 750 * 100%);
  color: var(--color-white);
}
._txt_yellow {
  color: var(--color-yellow);
}

.page_header {
  position: relative;
  z-index: 1;
}