@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}[type="number"]{-moz-appearance:textfield}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}

/* font setting */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 4.2667vw;
  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;
}
@media screen and (min-width: 769px) {
  body {
    font-size: 1.6533vw;
    line-height: 2.6867vw;
  }
}

/* color setting */
body {
  --color-blue: rgb(0, 146, 225);
  --color-lightblue: rgb(68, 199, 255);
  --color-deepblue: rgb(0, 85, 160);
  --color-footerblue: rgb(18, 174, 255);
  --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-palepink: rgb(255, 230, 250);
  --color-yellow: rgb(255,240,0);
  --color-red: rgb(232,82,152);
  --color-black: rgb(0,0,0);
  --color-white: rgb(255,255,255);
  --color-stripe1: rgb(20,205,255);
  --color-stripe2: rgb(15,199,255);
  --color-close: rgb(172,85,255);
}
._txt_red {
  color: var(--color-red);
}

/* other setting */
body {
  --radius-20: 2.6667vw;
  --radius-40: 5.3333vw;
}
.bg_white {
  background-color: var(--color-white);
}
.bg_y {
  background-color: var(--color-yellow);
}
@media screen and (min-width: 769px) {
  body {
    --radius-20: 1.0333vw;
    --radius-40: 2.0667vw;
  }
}

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

/* layout */
body {
  background-color: var(--color-blue);
  color: var(--color-blue);
}
img {
  width: 100%;
  height: auto;
}
#wrapper {
  width: 100%;
  position: relative;
  background-color: var(--color-blue);
  background-repeat: repeat;
  background-size: calc(52 / 750 * 100%);
  background-image: url(../images/bg_star.svg);
  overflow: hidden;
  scroll-behavior: smooth;
}
#pc_wrapper {
  display: none;
}
@media screen and (min-width: 769px) {
  #wrapper {
    width: calc(620 / 1600 * 100%);
    margin-right: calc(206 / 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-repeat: no-repeat;
    background-image: url(../images/bg_pc.png);
    background-position: center center;
    background-size: cover;
  }
  #pc_wrapper::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: calc((206 / 1600 * 100%) - 6px);
    width: calc((620 / 1600 * 100%) + 12px);
    height: 100%;
    background-color: var(--color-white);
  }
}
.bg_stripe {
  position: relative;
  padding-bottom: calc(75 / 750 * 100%);

}
.bg_stripe > * {
  position: relative;
}
.bg_stripe::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(15,199,255);
  mask-repeat: no-repeat;
  mask-position: center top;
  mask-size: cover;
  mask-image: url(../images/mask01.svg?ud=2025052901);
  background: repeating-linear-gradient(
    -60deg,
    rgb(20, 205, 255),
    rgb(20, 205, 255) calc(var(--radius-20) * 1.05),
    rgb(15, 199, 255) calc(var(--radius-20) * 1.05),
    rgb(15, 199, 255) calc(var(--radius-20) * 2.95)
  );
}
.round_box {
  width: calc(680 / 750 * 100%);
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--radius-40);
  background-color: var(--color-white);
}
.round_box_bl {
  position: relative;
  width: calc(600 / 680 * 100%);
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--radius-40);
  border: calc(var(--radius-20) * 0.2) var(--color-blue) 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(272 / 600 * 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;
}
._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;
  }
}

/* title */
.ttl_type01 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(380 / 750 * 100%);
  aspect-ratio: 38/15;
}
.section01 .ttl_type01 {
  transform: translate(calc(-33 / 380 * 100%), calc(18 / 150 * 100%));
  background-image: url(../images/ttl_type01_01.svg);
}
.section03 .ttl_type01 {
  transform: translate(calc(-49 / 380 * 100%), calc(2 / 150 * 100%));
  background-image: url(../images/ttl_type01_02.svg);
}
.ttl_type04 {
  aspect-ratio: 258/66;
  background-image: url(../images/ttl_type04.svg);
}
.ttl_type05 {
  aspect-ratio: 215/85;
  background-image: url(../images/ttl_type05.svg);
}
.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,
.image.hand::before,
.image.hand::after {
  position: absolute;
  top: 0;
  right: 0;
  aspect-ratio: 5/6;
  background-repeat: no-repeat;
  background-size: contain;
}
.image.hand::before,
.image.hand::after {
  content: '';
  width: 100%;
  aspect-ratio: 5/6;
}
.image.hand {
  background-image: url(../images/hand_02.svg);
}
.image.hand::before {
  background-image: url(../images/hand_photo02.png);
}
.main_header .image.hand::before {
  background-image: url(../images/hand_photo01.png);
}
.image.hand::after {
  background-image: url(../images/hand_01.svg);
}
/* parts frame_list */
.frame_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.frame_list li {
  position: relative;
  width: calc(166 / 560 * 100%);
  aspect-ratio: 166 / 208;
  margin-top: calc(30 / 560 * 100%);
  background-color: rgb(210, 210, 210);
  background-size: contain;
}
.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 / 166 * 100%);
  aspect-ratio: 1/1;
}
.frame_list li:nth-child(1):after {
  background-image: url(../images/num_t2_1.svg);
}
.frame_list li:nth-child(2):after {
  background-image: url(../images/num_t2_2.svg);
}
.frame_list li:nth-child(3):after {
  background-image: url(../images/num_t2_3.svg);
}
.frame_list li:nth-child(4):after {
  background-image: url(../images/num_t2_4.svg);
}
.frame_list li:nth-child(5):after {
  background-image: url(../images/num_t2_5.svg);
}
.frame_list li:nth-child(6):after {
  background-image: url(../images/num_t2_6.svg);
}


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

.logo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(200 / 750 * 100%);
  aspect-ratio: 5/2;
  background-image: url(../images/logo_doggyman.svg);
}
.logo_project {
  display: block;
  position: absolute;
  top: 0;
  right: calc(20 / 750 * 100%);
  width: calc(134 / 750 * 100%);
  aspect-ratio: 134/140;
  background-image: url(../images/logo_project.svg);
}

/* ------------------------
  Main Header
------------------------ */
.main_header .main_title {
  display: block;
  aspect-ratio: 750/360;
  background-image: url(../images/main_title.png);
}
.main_header .lead_text {
  aspect-ratio: 750/160;
  background-image: url(../images/lead_text.svg);
}
.main_header > .image.hand {
  width: calc(200 / 750 * 100%);
  transform: translate(0, calc(340 / 240 * 100%));
}
.main_header > .image.photo_sample {
  aspect-ratio: 750/310;
}
.main_header > .text01 {
  aspect-ratio: 750/140;
  margin-top: calc(-10 / 750 * 100);
  background-image: url(../images/text01.svg);
}
/* prize */
.main_header .prize_box {
  display: flex;
  margin-top: calc(36 / 750 * 100%);
}
.main_header .prize_box .prize {
  position: relative;
  width: 50%;
  padding: calc(40 / 750 * 100%) 0 calc(24 / 750 * 100%);
}
.main_header .prize_box .prize.dog {
  background-color: var(--color-dogblue);
}
.main_header .prize_box .prize.cat {
  background-color: var(--color-catpink);
}
.main_header .prize_box .prize::before {
  content: '';
  position: absolute;
  top: calc(-76 / 750 * 100vw);
  width: calc(200 / 375 * 100%);
  aspect-ratio: 20/16;
  background-repeat: no-repeat;
  background-size: contain;
}
.main_header .prize_box .prize.dog::before {
  left: 0;
  background-image: url(../images/img_dog.png);
}
.main_header .prize_box .prize.cat::before {
  right: 0;
  background-image: url(../images/img_cat.png);
}
.main_header .prize_box .prize .text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 34/6;
}
.main_header .prize_box .prize.dog .text {
  background-image: url(../images/txt_dog.svg);
  transform: translate(16%, -13%) scale(0.9);
}
.main_header .prize_box .prize.cat .text {
  background-image: url(../images/txt_cat.svg);
  transform: translate(-16%, -13%)scale(0.9);
}
.main_header .prize_box .prize .image {
  position: relative;
  width: calc(340 / 375 * 100%);
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--radius-20);
  background-color: var(--color-white);
}
@media screen and (min-width: 769px) {
  .main_header .prize_box .prize::before {
    top: calc(-76 / 750 * 100vw * (31 / 80));
  }
}

/* ------------------------
  Inpage Navi
------------------------ */
.inpage_navi {
  margin-top: calc(80 / 750 * 100%);
}
.inpage_navi > ul {
  display: flex;
  flex-direction: column;
  border-top: 1px var(--color-borderblue) solid;
}
.inpage_navi > ul > li {
  border-bottom: 1px var(--color-borderblue) solid;
}
.inpage_navi > ul > li > a {
  display: flex;
  width: 100%;
  aspect-ratio: 750/120;
  justify-content: center;
  align-items: center;
}
.inpage_navi > ul > li > a > span {
  display: block;
  width: calc(600 / 750 * 100%);
  aspect-ratio: 10/1;
}
.inpage_navi > ul > li.inpage_navi01 > a > span {
  background-image: url(../images/inpage_navi01.svg);
}
.inpage_navi > ul > li.inpage_navi02 > a > span {
  background-image: url(../images/inpage_navi02.svg);
}
.inpage_navi > ul > li.inpage_navi03 > a > span {
  background-image: url(../images/inpage_navi03.svg);
}

/* ------------------------
  Section01 #howto_apply
------------------------ */
.section01 {
  position: relative;
  margin-top: calc(40 / 750 * 100%);
  padding-top: calc(100 / 750 * 100%);
}
.section01 .section_body {
  padding-bottom: calc(140 / 750 * 100%);
}
.apply_flow_box {
  padding-top: calc(88 / 680 * 100%);
  padding-left: calc(57 / 680 * 100%);
}
.apply_flow_box > li {
  position: relative;
  margin-top: calc(16 / (680 - 57) * 100%);
  padding-left: calc(90 / (680 - 57) * 100%);
}
.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 > li.apply_flow01 > .title {
  display: flex;
}
.apply_flow_box > li.apply_flow01 > .title .title_text {
  width: calc(320 / (680 - 57 - 90) * 100%);
}
.apply_flow_box > li.apply_flow01 > .title .image {
  display: flex;
  width: calc(180 / (680 - 57 - 90) * 100%);
  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 / (680 - 57 - 90) * 100%);
}
.apply_flow_box > li.apply_flow01 > .item .title {
  color: var(--color-black);
}
.apply_flow_box > li.apply_flow01 > .item {
  width: calc(464 / (680 - 57 - 90) * 100%);
  padding-bottom: calc(16 / (680 - 57 - 90) * 100%);
}
.apply_flow_box > li.apply_flow02 > .item {
  position: relative;
}
.apply_flow_box > li.apply_flow02 > .item .image {
  transform: translate(calc(35 / 200 * 100%), calc(-153 / 240 * 100%));
  width: calc(200 / (680 - 57 - 90) * 100%);
}
.apply_flow_box > li.apply_flow02 .btn_make_photo01 {
  width: calc(420 / (680 - 57 - 90) * 100%);
  aspect-ratio: 42/17;
  background-image: url(../images/btn_make_photo01.svg);
}
.apply_flow_box > li.apply_flow03 .bg_y {
  display: inline-block;
  margin: 4px 0 3px -8px;
  padding: 0px 8px 1px;
  color: var(--color-red);
}
/* .terms_box */
.section01 .terms_box {
  margin-top: calc(120 / 680 * 100%);
  padding: calc(56 / 680 * 100%) 0 calc(40 / 680 * 100%);
}
.section01 .terms_box .item {
  width: calc(480 / 600 * 100%);
}
.terms_box .item {
  position: relative;
  margin: 0 auto;
  color: var(--color-black);
}
.terms_box .item .terms_text {
  aspect-ratio: 480/206;
  overflow-y: scroll;
  scrollbar-color: var(--color-lightblue) transparent;
  scrollbar-width: thin;
}
.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);
}

/* .period_box */
.section01 .period_box {
  margin-top: calc(100 / 680 * 100%);
  padding: calc(64 / 680 * 100%) 0 calc(36 / 680 * 100%);
}
.section01 .period_box .text_period {
  width: calc(480 / 600 * 100%);
  margin: 0 auto;
  aspect-ratio: 48/10;
  background-image: url(../images/text_period.svg);
}

/* ------------------------
  Section02 #make
------------------------ */
.section02 .section_header {
  position: relative;
  width: 100%;
  aspect-ratio: 75/68;
}
.section02 .section_header .ttl_type02 {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 750/300;
  background-image: url(../images/splash.svg);
  background-size: contain;
}
.section02 .section_header .ttl_type02 > span {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(250 / 750 * 100%);
  aspect-ratio: 5/2;
  background-image: url(../images/ttl_type02.svg);
}
.section02 .section_header .ttl_maker {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(860 / 750 * 100%);
  aspect-ratio: 86/38;
  background-image: url(../images/ttl_maker.png);
}
.section02 .section_header .lead_text {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(-40 / 120 * 100%));
  width: calc(420 / 750 * 100%);
  aspect-ratio: 42/12;
  background-image: url(../images/lead_text_section02.svg);
}
.section02 .images_list {
  display: flex;
}
.section02 .images_list > li {
  width: 50%;
}
.section02 .images_list > li .title {
  width: 100%;
  aspect-ratio: 375/60;
}
.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/240;
}
.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 {
  margin-top: calc(52 / 750 * 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(624 / 750 * 100%);
  aspect-ratio: 624/224;
  margin: calc(28 / 750 * 100%) auto 0;
  background-image: url(../images/btn_maker_disable.png);
}
.section02 .btn_maker_box._checked .btn_maker {
  background-image: url(../images/btn_maker.png);
  cursor: pointer;
}

/* ------------------------
  Section03 #howto_make
------------------------ */
.section03 {
  position: relative;
  margin-top: calc(53 / 750 * 100%);
  padding-top: calc(100 / 750 * 100%);
}
.howto_make_steps > li {
  overflow: hidden;
}
.howto_make_steps > li:nth-child(n+2) {
  margin-top: calc(80 / 750 * 100%);
}
.howto_make_steps > li > header {
  padding-top: calc(20 / 680 * 100%);
  background-color: var(--color-yellow);
}
.howto_make_steps > li > header h4 span {
  width: calc(300 / 680 * 100%);
  margin: 0 auto;
  aspect-ratio: 30/8;
}
.howto_make_steps > li > header > .text {
  width: 100%;
  aspect-ratio: 68/8;
}
.howto_make_steps > li.howto_make_step1 > header h4 span {
  background-image: url(../images/howto_make_step1.svg);
}
.howto_make_steps > li.howto_make_step2 > header h4 span {
  background-image: url(../images/howto_make_step2.svg);
}
.howto_make_steps > li.howto_make_step3 > header h4 span {
  background-image: url(../images/howto_make_step3.svg);
}
.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 {
  aspect-ratio: 68/14;
  background-image: url(../images/howto_make_step3_text.svg);
}

.howto_make_steps .howto_make_body {
  padding-top: calc(48 / 680 * 100%);
  padding-bottom: calc(72 / 680 * 100%);
}
.howto_make_steps .howto_make_body .text {
  width: calc(560 / 680 * 100%);
  margin: calc(20 / 680 * 100%) auto 0;
  letter-spacing: -.025rem;
}
.howto_make_steps .howto_make_body .ttl_type03 {
  width: calc(200 / 680 * 100%);
  margin-top: calc(72 / 680 * 100%);
}
.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 / 680 * 100%);
  margin: calc(20 / 680 * 100%) auto 0;
}
.howto_make_steps .howto_make_body .image.image1 {
  width: 100%;
  margin: 0;
}

.howto_make_steps > li.howto_make_step2 .frame_list {
  width: calc(560 / 680 * 100%);
  margin: calc(10 / 680 * 100%) auto calc(40 / 680 * 100%);
}
.howto_make_steps > li.howto_make_step3 {
  position: relative;
}
.howto_make_steps > li.howto_make_step3 .howto_make_body {
  padding-bottom: calc(160 / 680 * 100%);
}
.howto_make_steps > li.howto_make_step3 .images {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(96 / 750 * 100%);
}
.howto_make_steps > li.howto_make_step3 .images li {
  position: relative;
  width: calc(600 / 750 * 100%);
}
.howto_make_steps > li.howto_make_step3 .images li:nth-child(n+2) {
  margin-top: calc(70 / 750 * 100%);
}
.howto_make_steps > li.howto_make_step3 .images .title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-32 / 60 * 100%));
  width: calc(340 / 600 * 100%);
  aspect-ratio: 34/6;
}
.howto_make_steps > li.howto_make_step3 .images .dog .title {
  background-image: url(../images/txt_dog.svg);
}
.howto_make_steps > li.howto_make_step3 .images .cat .title {
  background-image: url(../images/txt_cat.svg);
}
.howto_make_steps > li.howto_make_step3 .images .image {
  width: 100%;
  margin-top: 0;
  border-radius: var(--radius-20);
  padding: var(--radius-20);
}
.howto_make_steps > li.howto_make_step3 .images .dog .image {
  background-color: var(--color-skyblue);
}
.howto_make_steps > li.howto_make_step3 .images .cat .image {
  background-color: var(--color-palepink);
}
.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 {
  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(460 / 1600 * 100%);
  transform: translate(-50%, -50%);
  width: calc(360 / 1600 * 100%);
  min-width: 240px;
}
.nav_pc .title {
  aspect-ratio: 75/36;
  background-image: url(../images/main_title.png);
}
.nav_pc_list > ul {
  display: flex;
  flex-direction: column;
  margin-top: calc(44 / 360 * 100%);
}
.nav_pc_list li:nth-child(n+2) {
  margin-top: calc(8 / 360 * 100%);
}
.nav_pc_list li > * {
  aspect-ratio: 20/3;
}
.nav_pc_list li.nav_pc01 > a {
  background-image: url(../images/nav_pc01.svg);
}
.nav_pc_list li.nav_pc02 > a {
  background-image: url(../images/nav_pc02.svg);
}
.nav_pc_list li.nav_pc03 > a {
  background-image: url(../images/nav_pc03.svg);
}
.nav_pc_list li.nav_pc04 > a {
  background-image: url(../images/nav_pc04.svg);
}
.nav_pc_list li.nav_pc05 > div {
  background-image: url(../images/nav_pc05.svg);
}
#wrapper._maker ~ #pc_wrapper .nav_pc_list li > a {
  pointer-events: none;
}
#wrapper._maker ~ #pc_wrapper .nav_pc_list li.nav_pc01 > a {
  background-image: url(../images/nav_pc01_na.svg);
}
#wrapper._maker ~ #pc_wrapper .nav_pc_list li.nav_pc02 > a {
  background-image: url(../images/nav_pc02_na.svg);
}
#wrapper._maker ~ #pc_wrapper .nav_pc_list li.nav_pc03 > a {
  background-image: url(../images/nav_pc03_na.svg);
}
#wrapper._maker ~ #pc_wrapper .nav_pc_list li.nav_pc04 > a {
  background-image: url(../images/nav_pc04_na.svg);
}
.nav_pc .footer_navi {
  margin-top: calc(62 / 360 * 100%);
}
.nav_pc .footer_navi > ul {
  justify-content: space-between;
}
.nav_pc .footer_navi > ul > li {
  width: calc(154 / 360 * 100%);
  margin: 0;
}


/* ------------------------
  Photo Maker
------------------------ */
#photo_maker {
  min-height: 100dvh;
  padding: calc(20 / 750 * 100%);
  background-color: var(--color-deepblue);
}
.photo_maker_box {
  border-radius: var(--radius-40);
  background: repeating-linear-gradient(
    -60deg,
    rgb(20, 205, 255),
    rgb(20, 205, 255) calc(var(--radius-20) * 1.05),
    rgb(15, 199, 255) calc(var(--radius-20) * 1.05),
    rgb(15, 199, 255) calc(var(--radius-20) * 2.95)
  );
}
.photo_maker_box .ttl_type05 {
  width: calc(215 / 710 * 100%);
  margin: 0 auto;
}
.photo_maker_box .text {
  color: var(--color-deepblue);
  letter-spacing: -.025rem;
}
.photo_maker_box .bg_white .text._f12 {
  color: var(--color-blue);
}
.photo_maker_box .photo_maker_back_btn {
  width: calc(216 / 710 * 100%);
  aspect-ratio: 2/1;
  margin: calc(40 / 710 * 100%) auto 0;
  background-image: url(../images/photo_maker_footer_btn_1.svg);
  cursor: pointer;
}
.photo_maker_box .photo_maker_back_btn.back_to_top {
  width: calc(250 / 710 * 100%);
  aspect-ratio: 250/126;
  background-image: url(../images/photo_maker_footer_btn.svg);
}
/* photo_maker_header */
.photo_maker_header {
  aspect-ratio: 71/18;
}
.photo_maker_header ul {
  display: flex;
  justify-content: space-between;
  padding: calc(18 / 710 * 100%) calc(40 / 710 * 100%);
}
.photo_maker_header ul > li {
  width: calc(190 / 630 * 100%);
}
.photo_maker_header ul > li > span {
  aspect-ratio: 19/13;
  background-color: rgb(204,204,204);
  border-radius: var(--radius-20);
  box-shadow: calc(var(--radius-20) * 0.4) calc(var(--radius-20) * 0.4) rgba(0,0,0,0.15);
}
/* photo_maker01 */
.photo_maker01 {
  padding-bottom: calc(36 / 710 * 100%);
}
.photo_maker01 .text01 {
  position: relative;
  aspect-ratio: 71/30;
  background-position: center top;
  background-image: url(../images/photo_maker01_text01.svg);
}
.photo_maker01 .text01::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(280 / 710 * 100%);
  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(630 / 710 * 100%);
  aspect-ratio: 63/17;
  margin: calc(-94 / 710 * 100%) auto calc(66 / 710 * 100%);
  background-image: url(../images/btn_select_image.svg);
  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 / 710 * 100%) calc(64 / 710 * 100%) 0 calc(140 / 710 * 100%);
}
/* photo_maker02 */
.photo_maker02 {
  padding-bottom: calc(36 / 710 * 100%);
}
.photo_maker02 .title {
  aspect-ratio: 71/10;
}
.photo_maker02 .title.title01 {
  background-image: url(../images/photo_maker02_title01.svg);
}
.photo_maker02 .title.title02 {
  background-image: url(../images/photo_maker02_title02.svg);
}
.photo_maker02 .bg_white {
  position: relative;
  padding-top: calc(53 / 710 * 100%);
  padding-bottom: calc(24 / 710 * 100%);
}
.photo_maker02 .ttl_type06 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(-105 / 140 * 100%), calc(-26 / 53 * 100%));
  width: calc(140 / 360 * 100%);
  z-index: 30;
}
.photo_maker02 .preview_image {
  position: relative;
  width: calc(360 / 710 * 100%);
  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 / 710 * 100%);
  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 / 710 * 100%);
  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);
  }
  .photo_maker02 .ctrl_box .btn_pc_zoom > div {
    position: absolute;
    right: 13%;
    width: 30%;
    aspect-ratio: 1/1;
  }
  .photo_maker02 .ctrl_box .btn_pc_zoom > #zoom_up {
    bottom: 54%;
    cursor: pointer;
  }
  .photo_maker02 .ctrl_box .btn_pc_zoom > #zoom_down {
    bottom: 0;
    cursor: pointer;
  }
}
.photo_maker02 .frame_name {
  aspect-ratio: 710/134;
}
.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 .input_box {
  position: relative;
  width: calc(570 / 710 * 100%);
  margin: 0 auto calc(40 / 710 * 100%);
}
.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 / 710 * 100%);
}
.photo_maker02 .btn_submit {
  width: calc(216 / 710 * 100%);
  aspect-ratio: 2/1;
  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 / 710 * 100%);
  margin: calc(80 / 710 * 100%) auto;
}
.photo_maker02 .frame_list_box .frame_list li {
  margin-top: 0;
  margin-bottom: calc(44 / 560 * 100%);
}
.photo_maker02 .frame_list li::after {
  transform: translate(calc(-11 / 40 * 100%), calc(-20 / 40 * 100%));
}
.photo_maker02 .frame_list li::before {
  position: absolute;
  right: 3%;
  bottom: 100%;
  color: var(--color-deepblue);
  font-size: calc(var(--radius-20) * 1.1);
  letter-spacing: -.025rem;
}
.photo_maker02 .frame_list li:nth-child(1)::before {
  content: 'わんちゃん用';
}
.photo_maker02 .frame_list li:nth-child(2)::before {
  content: 'ねこちゃん用';
}
/* photo_maker03 */
.photo_maker03 {
  padding-bottom: calc(36 / 710 * 100%);
}
.photo_maker03 > .title {
  aspect-ratio: 71/10;
  background-image: url(../images/photo_maker03_title.svg);
}
.photo_maker03 > .bg_white{
  padding-top: calc(54 / 710 * 100%);
  padding-bottom: calc(44 / 710 * 100%);
}
.photo_maker03 .finished_image {
  width: calc(520 / 710 * 100%);
  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 / 710 * 100%);
  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_download {
  display: none;
  width: calc(520 / 710 * 100%);
  aspect-ratio: 52/11;
  margin: calc(44 / 710 * 100%) auto 0;
  background-image: url(../images/btn_download.svg);
}
.photo_maker03._spad .btn_download {
  display: block;
}

@media screen and (min-width: 769px) {
  .photo_maker03 > .bg_white .text {
    display: none;
  }  
  .photo_maker03 .btn_download {
    display: block;
  }
}
.photo_maker03 > .text {
  aspect-ratio: 710/228;
  background-image: url(../images/photo_maker03_text01.svg);
}
.photo_maker03 > .round_box {
  position: relative;
  width: calc(600 / 710 * 100%);
  padding-bottom: calc(75 / 710 * 100%);
}
.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;
}
.photo_maker03 .apply_flow_box {
  padding: calc(100 / 600 * 100%) calc(50 / 600 * 100%) 0;
}
.photo_maker03 .apply_flow_box > li {
  padding-left: 0;
}

.photo_maker03 .apply_flow_box > li::before {
  display: none;
}
.photo_maker03 .apply_flow_box > li.apply_flow01 > .item {
    width: calc(464 / 500 * 100%);
    padding-bottom: calc(16 / 500 * 100%);
}
.photo_maker03 .apply_flow_box > li.apply_flow01 > .title .title_text {
  width: calc(320 / 500 * 100%);
  letter-spacing: -.025rem;
}
.photo_maker03 .apply_flow_box > li.apply_flow01 > .title .image {
  width: calc(180 / 500 * 100%);
}
.photo_maker03 .sns_btn_list {
  margin-top: 4px;
}
.photo_maker03 .apply_flow_box > li.apply_flow03 > .title {
  padding: 0 calc(8 / 500 * 100%) calc(44 / 500 * 100%);
}
.photo_maker03 .apply_flow_box > li.apply_flow03 .bg_y {
  letter-spacing: -.05rem;
  padding: 0 8px 1px 8px;
  margin-right: -8px;
}
.photo_maker03 .btn_apply > span {
  aspect-ratio: 50/11;
  margin-top: calc(16 / 500 * 100%);
}
.photo_maker03 .btn_apply.sns_i > span {
  background-image: url(../images/btn_apply_sns_i.svg);
}
.photo_maker03 .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 .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 / 710 * 100%);
}
.photo_maker03 .terms_box {
    margin-top: calc(96 / 710 * 100%);
    padding: calc(56 / 710 * 100%) 0 calc(40 / 710 * 100%);
}
.photo_maker03 .terms_box .item {
  width: calc(480 / 600 * 100%);
}
.photo_maker03 .period_box {
    margin-top: calc(96 / 710 * 100%);
    padding: calc(64 / 710 * 100%) 0 calc(36 / 710 * 100%);
}
.photo_maker03 .period_box .text_period {
    width: calc(480 / 600 * 100%);
    margin: 0 auto;
    aspect-ratio: 48 / 10;
    background-image: url(../images/text_period.svg);
}
.photo_maker03 .btn_make_more {
  width: calc(450 / 710 * 100%);
  aspect-ratio: 5/2;
  margin: calc(150 / 710 * 100%) auto 0;
  background-image: url(../images/btn_make_more.svg);
  cursor: pointer;
}
.photo_maker03 .photo_maker_back_btn {
  margin: calc(60 / 710 * 100%) auto calc(20 / 710 * 100%);
}
.photo_maker03 .photo_maker_back_btn.back_to_top {
  margin: calc(60 / 710 * 100%) auto calc(40 / 710 * 100%);
}

/* hide / show */

#photo_maker {
  display: none;
}
#wrapper._maker .page_header {
  display: none;
}
#wrapper._maker #main {
  display: none;
}
#wrapper._maker #photo_maker {
  display: block;
}
#wrapper._maker .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;
}
#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-color: var(--color-white);
  background-image: url(../images/nav_maker01.svg);
}
.photo_maker_header ul > li.photo_maker_nav02 > span {
  background-image: url(../images/nav_maker02_ns.svg);
}
.photo_maker_header ul > li.photo_maker_nav03 > span {
  background-image: url(../images/nav_maker03_ns.svg);
}
._maker02 .photo_maker_header ul > li.photo_maker_nav01 > span,
._maker03 .photo_maker_header ul > li.photo_maker_nav01 > span {
  background-color: rgb(204,204,204);
  background-image: url(../images/nav_maker01_dn.svg);
}
._maker02 .photo_maker_header ul > li.photo_maker_nav02 > span {
  background-color: var(--color-white);
  background-image: url(../images/nav_maker02.svg);
}
._maker03 .photo_maker_header ul > li.photo_maker_nav02 > span {
  background-image: url(../images/nav_maker02_dn.svg);
}
._maker03 .photo_maker_header ul > li.photo_maker_nav03 > span {
  background-color: var(--color-white);
  background-image: url(../images/nav_maker03.svg);
}

/* ------------------------
  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 / 680 * 100%);
  margin-right: auto;
  margin-left: auto;
  padding-top: calc(160 / 680 * 100%);
  padding-bottom: calc(80 / 680 * 100%);
}
.modal .modal_inner .btn_close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(calc(64 / 134 * 100%), 0);
  width: calc(134 / 680 * 100%);
  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 li:nth-child(1) {
  background-image: url(../images/frame01_t.png?ud=250612);
}
.frame_list li:nth-child(2) {
  background-image: url(../images/frame02_t.png?ud=250612);
}
.frame_list li:nth-child(3) {
  background-image: url(../images/frame03_t.png?ud=250612);
}
.frame_list li:nth-child(4) {
  background-image: url(../images/frame04_t.png?ud=250612);
}
.frame_list li:nth-child(5) {
  background-image: url(../images/frame05_t.png?ud=250612);
}
.frame_list li:nth-child(6) {
  background-image: url(../images/frame06_t.png?ud=250612);
}

/* ------------------------
  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;
}