@charset "UTF-8";
body {
    background-color: var(--color-Caramel10);
}
#wrapper {
    background-color: var(--color-Caramel10);
    margin: 0 auto;
    width: 800px;
}
#header {
    width: 100%;
    background-color: var(--color-turquoise60);
    min-width: 980px;
}
#header .header_wrap {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    display: flex;
    align-items:center;
    justify-content: space-between;
}
#header .header_wrap .header_ttl {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 1.12px;
     display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 10px;
}
#header .header_wrap .header_ttl .ttl_icon {
    font-size: 36px;
    font-variation-settings: 
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 36;
}
#header .header_wrap .header_logo {
    width: 328px;
    padding: 28px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header .header_wrap .header_logo img {
    height: 47px;
    width: auto;
}
#agreepreview {
    margin: 64px auto 44px auto;
}
#agreebutton {
    margin: 0 auto 32px auto;
    width: 256px;
}
#agreebutton .btn_contained {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.Font20 {
    font-size: 20px;
}
#point4 .notcreate {
    margin-bottom: 24px;
}
#point4 dl .note_ttl {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#point4 dl .note_cnt {
    padding-bottom: 10px;
    padding-top: 16px;
}
.link_underline {
    text-decoration: underline;
}
#point4 .wrap_content {
    border: 1px solid var(--color-black20);
    border-radius: 12px;
    padding: 24px 13px 24px 40px;
}
#point4 .wrap_content .content_scroll {
    height: 260px;
    overflow-y: scroll;
    text-align: left;
    padding-right: 10px;
}
#point4 .wrap_content .content_scroll .link_underline {
    text-decoration-thickness: 1px; 
    text-underline-offset: 3px;
}
#point4 .wrap_content .content_scroll dl .ellipse {
    font-size: 6px;
    margin-right: 8px;
    vertical-align: middle;
}
#point4 .wrap_content .content_scroll .each_browser .li_wrap{
    margin-top: 8px;
    margin-bottom: 16px; 
}

.mc_upper {
    display: flex;
    margin: 48px 0 36px 0;
    border-bottom: 2px solid var(--color-black20);
    padding-bottom: 28px;
}
.mc_upper.step6 {
    margin-bottom: 20px;
}
#step {
    display: flex;
    align-items: center;
}
#step .num_detail {
    text-align: center;
}
#step .num_detail .num {
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
}
#step .arrow_right {
    margin: 0 12px;
}
#help {
    margin: auto 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
#help span {
    font-size: 20px;
}
.mc_ttl_wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.mc_ttl_wrap .tag_wrap {
    text-align: center;
}
.mc_ttl_wrap .step_tag {
    width: 72px;
    height: 24px;
    padding: 3px 11px;
    border-radius: var(--radius-100);
    margin-top: 4px;
}
.mc_ttl_wrap h1 {
    display: block;
}
.mc_ttl_wrap .wavyline {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: calc(1em * 0.12);
}
.wrap_preview_menu {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
#preview, #preview2, #preview3, #preview4, #preview5 {
    width: 475px;
    height: 370px;
    background-color: var(--color-black10);
    box-shadow: inset 0 0 0 1px var(--color-black20);
    border-radius: 12px;
}
.preview_tag {
    width: 86px;
    height: 24px;
    border-radius: 12px 0px;
    text-align: center;
    padding: 3px 0;
}
#preview #previewcontents {
    margin: 25px auto auto 37px;
    overflow-x: auto;
    overflow-y: auto;
}
#preview2 #previewcontents, #preview3 #previewcontents, #preview4 #previewcontents, #preview5 #previewcontents {
    width: 425px;
    height: 320px;
    overflow-y: auto;
    overflow-x: auto;
    margin: 25px auto 0 37px;
}
/*合成時に写真エリアとの境界が分かり辛いので、背景色を入れて境界を出します。
  合成されたら白になるのと、さらにその背景は白でよいのでは。*/
#preview3 #previewcontents > div,
#preview4 #previewcontents > div{background-color: #FFFFFF;}

#preview2 #previewcontents .not_selected {
    text-align: center;
    margin:76px 58px auto 34px; 
}
#preview2 #previewcontents .not_selected .symbol_wrap {
    margin-bottom: 16px;
}
#preview2 #previewcontents .not_selected .material-symbols-outlined {
    font-size: 32px;
}
#preview4 #previewcontents #ms {
    position: relative;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#preview4 #previewcontents #ms #babyinfo {
    position: absolute;
    top: 320px;
    left: 80px;
    width: 240px;
    line-height: 1.8em;
    text-align: center;
    font-size: 10px;
}
#preview4 #previewcontents #ms span {
    font-size: 18px;
    line-height: 1.2em;
}
#preview4 #previewcontents #ms #freetext {
    position: absolute;
    top: 480px;
    left: 80px;
    width: 240px;
    text-align: center;
    line-height: 1.7em;
    font-size: 9px;
}
.message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
}
.steptext {
    width: 475px;
    margin-top: 16px;
}
.steptext .link_underline, #menu7 .note_wrap .link_underline {
    text-underline-offset: 2px;
}
#menu #menucontents {
    width: 301px;
    height: 304px;
    border: 1px solid var(--color-black20);
    border-radius: 12px;
    padding: 8px 0;
}
#menu #menucontents .card_type {
    display: flex;
    height: 48px;
    align-items: center;
    gap: 12px;
    padding-left: 24px;
    cursor: pointer;
}
#menu #menucontents .card_type:hover, #menu2 #menucontents .photo_number:hover {
    background-color: var(--color-turquoise10);
}
#menu2 {
    width: 301px;
    height: 112px;
    border: 1px solid var(--color-black20);
    border-radius: 12px;
    margin-bottom: 24px;
} 
#menu2 #menucontents {
    display: flex;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-left: 8px;
}
#menu2 #menucontents .photo_number {
    width: 142px;
    height: 48px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    gap: 12px;
    cursor: pointer;
}
#menu3 {
    width: 301px;
    border: 1px solid var(--color-black20);
    border-radius: 12px;
    padding: 8px 0 0 10px;
}
#menu3 #menucontents2 {
    display: flex;
    flex-wrap: wrap;
    height: 230px;
    overflow-y : scroll;
    gap: 4px;
}
#menu3 #menucontents2 .s2preview {
    width: 132px;
    height: 132px;
    background-color: var(--color-black10);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#menu3 #menucontents2 .s2preview .choiceImg {
    object-fit: contain;
}
.s2preview.selected {
    border: 2px solid var(--color-turquoise50);
}
#menu4 {
    width: 301px;
    height: 132px;
    margin-bottom: 16px;
}
#menu4 .formwrap {
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    display: none;
}
#menu4 .formwrap .btn_wrap {
    height: 36px;
}
#menu4 .formwrap .radio_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 80px;
}
#menu4 .formwrap .fileinput-button {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
#menu4 .formwrap .fileinput-button .btn_txt {
    display: inline-block;
    margin-top: 9px;
}
#menu4 .formwrap .fileinput-button input {
  position: absolute;
  top: -100px;
  left: 0;
  margin: 0;
  height: 300px;
  opacity: 0;
  filter: alpha(opacity=0);
  direction: ltr;
  cursor: pointer;
}
#menu5 {
    margin-bottom: 16px;
}
#menu5 .menu_ttl, #menu6 .menu_ttl {
    display: flex;
    align-items: center;
    gap: 8px;
}
#menu5 .btn_dir_wrap {
    position: relative;
    margin: 8px 0 16px 0;
    height: 144px;
}
#menu5 .btn_back {
    position: absolute;
    width: 220px;
    height: 112px;
    border-radius: 8px;
    top: 16px;
    left: 41px;
}
#menu5 .rotate_txt_wrap {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 41px;
    justify-content: center;
    font-family: "Noto Sans JP",sans-serif;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.04em;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#menu5 .btn_back .back_icon {
    font-size: 56px;
    position: absolute;
    top: 28px;
    left: 82px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 写真調整ボタン start */
#up, #left, #tleft, #tright, #right, #down {
    position: absolute;
    width: 48px;
    padding: 8px 14px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#up {
    top: 0;
    left: 127px;
}
#up {
    background: url(/Images/photocard/to_up.svg) center / 20px 20px no-repeat, #fff;
}
#up:hover {
    background: linear-gradient(var(--color-black10), var(--color-black10)), url(/Images/photocard/to_up.svg) center / 20px 20px no-repeat, #fff;
}

#left {
    top: 54px;
    left: 16px;
}
#left {
    background: url(/Images/photocard/to_left.svg) center / 20px 20px no-repeat, #fff;
}
#left:hover {
    background: linear-gradient(var(--color-black10), var(--color-black10)), url(/Images/photocard/to_left.svg) center / 20px 20px no-repeat, #fff;
}

#tleft {
    top: 54px;
    left: 91px;
}
#tleft {
    background: url(/Images/photocard/rotate_left.svg) center / 20px 20px no-repeat, #fff;
}
#tleft:hover {
    background: linear-gradient(var(--color-black10), var(--color-black10)), url(/Images/photocard/rotate_left.svg) center / 20px 20px no-repeat, #fff;
}

#tright {
    top: 54px;
    left: 163px;
}
#tright {
    background: url(/Images/photocard/rotate_right.svg) center / 20px 20px no-repeat, #fff;
}
#tright:hover {
    background: linear-gradient(var(--color-black10), var(--color-black10)), url(/Images/photocard/rotate_right.svg) center / 20px 20px no-repeat, #fff;
}

#right {
    top: 54px;
    left: 237px;
}
#right {
    background: url(/Images/photocard/to_right.svg) center / 20px 20px no-repeat, #fff;
}
#right:hover {
    background: linear-gradient(var(--color-black10), var(--color-black10)), url(/Images/photocard/to_right.svg) center / 20px 20px no-repeat, #fff;
}

#down {
    top: 108px;
    left: 127px;
}
#down {
    background: url(/Images/photocard/to_down.svg) center / 20px 20px no-repeat, #fff;
}
#down:hover {
    background: linear-gradient(var(--color-black10), var(--color-black10)), url(/Images/photocard/to_down.svg) center / 20px 20px no-repeat, #fff;
}

#zoomout {
    background: url(/Images/photocard/to_zoomout.svg) center / 53px 20px no-repeat, #fff;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#zoomout:hover {
    background: linear-gradient(var(--color-black10), var(--color-black10)), url(/Images/photocard/to_zoomout.svg) center / 53px 20px no-repeat, #fff;
}

#zoomin {
    background: url(/Images/photocard/to_zoomin.svg) center / 53px 20px no-repeat, #fff;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#zoomin:hover {
     background: linear-gradient(var(--color-black10), var(--color-black10)), url(/Images/photocard/to_zoomin.svg) center / 53px 20px no-repeat, #fff;
}


#reset, #reset.focus {
    font-family: "Noto Sans JP",sans-serif;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: 8px;
    background: linear-gradient(var(--color-black40)), #FFFFFF;
    border: solid 1px var(--color-black30);
    color: var(--color-white80);
    padding: 4px 8px;
    text-align: center;
    width: 60px;
    position: absolute;
    top: 114px;
    left: 231px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#reset:hover {
    background: linear-gradient(var(--color-black30)), #FFFFFF;
}


#menu6 .btn_size_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}
#menu6 .btn_size_wrap .btn_size {
    width: 131px;
}
/* 写真調整ボタン end */

#menu7 {
    width: 301px;
    height: 422px;
    border: 1px solid var(--color-black20);
    border-radius: 12px;
}
#menu7 #menucontents {
    height: 414px;
    overflow-y: scroll;
    margin: 8px auto 0 8px;
}
#menu7 #menucontents .menucontent_wrap {
    width: 266px;
    margin: 0 auto 0 8px;
}
#menu7 #check2 {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}
#menu7 #setwrap {
    display: flex;
    gap: 16px;
}
#menu7 .set {
    flex-basis: 100%;
}
#menu7 .label_input_wrap {
    padding-bottom: 8px;
}
#menu7 .label_txt {
    margin: 8px 0;
}
#menu7 .txtbox_name {
    display: block;
    width: 100%;
}
#menu7 .ddl_base {
    height: 40px;
}
#menu7 .ddl_base_wrp::after {
    right: 5px;
}
#menu7 #mcSex1 option, #menu7 #mcSex2 option, #menu7 #cardNameId option {
    color: var(--color-black100);
}
#menu7 .unit_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
#menu7 .txtbox_hw {
    display: block;
    width: 84%;
}
#menu7 .birth_wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
#menu7 .birth_wrap .ddl_year {
    width: 82px;
    padding: 7px 32px 9px 12px;
}
#menu7 .birth_wrap .ddl_md {
    width: 58px;
    padding: 7px 0 9px 12px;
}
#menu7 #mcYear option, #menu7 #mcMonth option, #menu7 #mcDay option {
    color: var(--color-black100);
}
#menu7 .birth_wrap .birth_unit {
    margin-left: 4px;
}
#menu7 .label_input_wrap .btn_sample {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}
#menu7 #txaMessage {
    width: 100%;
    background-color: var(--color-black10);
    border-radius: var(--radius-m);
    resize: none;
    padding: 8px 16px;
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: 11px;
    line-height: 1.7;
    font-weight: 400;
    letter-spacing: -0.02em;
}
#menu7 #txaMessage:hover {
    background-color: var(--color-black20);
}
#menu7 #txaMessage:focus {
    background-color: var(--color-white100);
    border: 1px solid var(--color-black60);
    caret-color: var(--color-turquoise50);
}
#menu7 .wrap_radio_color {
    display: flex;
    align-items: center;
    gap: 16px;
}
#menu7 .radio_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
#menu7 .select_color1 {
    color: #464646;
}
#menu7 .select_color2 {
    color: #DE517A;
}
#menu7 .select_color3 {
    color: #225BB1;
}
#menu7 #cardNameInput {
    width: 100%;
    margin-top: 8px;
}
#menu7 .note_wrap {
    text-align: center;
    padding: 12px 0 20px 0;
}
.msg_smp_bk.hidden, .msg_smp_wrp.hidden, .big_pic_bk.hidden, .big_pic_wrap.hidden {
    display: none;
}
.msg_smp_bk, .big_pic_bk {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background-color: var(--color-black50);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.msg_smp_wrp ,.big_pic_wrap {
    position: absolute;
    left: 50%;
    z-index: 10;
    top: 50%;
    transform: translate(-50%, -50%);
}
.big_pic_wrap {
    display: inline-block;
}
.msg_smp_cnt {
    width: 886px;
    border-radius: 16px;
    border: 3px solid var(--color-black20);
    padding: 24px 0 24px 24px;
}
.msg_smp_cnt_head {
    display : flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-right: 24px;
}
.msg_smp_cnt_head .material-symbols-outlined {
    cursor: pointer;
}
.msg_smp_cnt_wrp {
    height: 405px;
    overflow-y: auto;
}
.msg_smp_cnt_wrp .msg_smp_cnt_innr {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.dl_smp {
    width: 270px;
    border-radius: 16px;
    border: 1px solid var(--color-black20);
    padding: 16px 16px 12px 16px;
}
.dl_smp.active {
    background-color: var(--color-turquoise10);
    border-color: var(--color-turquoise40);
}
.dt_smp {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.msg_smp_cnt_foot {
    margin: 32px 0 8px 0;
}
.msg_smp_cnt_foot #btn_smp_dsd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 279px;
}
#big_pic_close {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #D9D9D9;
}
.bigpic {
    width: auto;
    height: 903px;
    object-fit: contain;
}
.menu_wrap {
    width: 301px;
}
#menu10 .points_txt, #menu8 .points_txt {
    margin: 16px auto 24px auto;
    color: var(--color-error90);
    text-align: center;
}
#menu10 .btn_bigpic, #menu8 .btn_bigpic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
#menu12 {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--color-black20);
    background-color: var(--color-white100);
    margin-bottom: 24px;
}
#menu11 {
    border-radius: 12px;
    border: 1px solid var(--color-black20);
    background-color: var(--color-white100);
    padding: 8px 16px;
}
#menu11 .points_txt {
    margin-top: 8px;
}
#menu11 .label_input_wrap {
    margin-top: 8px;
}
#menu11 .label_input_wrap .label_txt {
    padding: 10px 0;
}
#menu11 .txtbox_cinfo {
    width: 100%;
}
.important_txt {
    padding: 16px 0 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    border-radius: 8px;
    background-color: var(--color-error10);
}
.important_txt .material-symbols-outlined {
    color: var(--color-error90);
    font-variation-settings: 
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}
#menu8 .caption {
    margin: 16px 0;
    text-align: center;
}
#menu9 {
    border-radius: 16px;
    padding: 24px 40px;
}
#menu9 .id_date_wrap, #menu9 .buttons_wrap {
    display: flex;
    justify-content: space-between;
}
#menu9 .id_date_wrap .txt_notes {
    margin-left: 4px;
}
#menu9 #id {
    margin: 4px 0 12px 0;
    border-radius: 16px;
    border: 2px solid var(--color-black80);
    text-align: center;
    padding: 16px 0;
    width: 479px;
}
#menu9 #date {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}
#menu9 #date .date_txt {
    margin-right: 4px;
}
#menu9 .txt_term {
    text-align: right;
}
#menu9 .areatext {
    margin-bottom: 12px;
}
#menu9 .areatext .txt_notes {
    display: block;
    margin-bottom: 12px;
}
#menu9 .buttons_wrap .buttons {
    padding: 16px 0;
}
#menu9 .buttons .btn_record {
    display: flex;
    width: 348px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#menu9 .buttons .caption {
    margin-top: 12px;
}
#thankyou {
    margin: 36px 0 24px 0;
    text-align: center;
}
.btn_back_purchase {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0  auto 80px 272px;
    padding: 12px 39px;
}
#close {
    padding-left: 272px;
    margin-bottom: 80px;
}
#close .btn_close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 256px;
}
#button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
    gap: 12px;
}
#button .btn_base {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#button .btn_next {
    width: 256px;
}
#button .btn_next_line {
    width: 232px;
}
#button .material-symbols-outlined {
    font-size: 20px;
}

/* Step3 でNaNを取得してしまった人用 エラー表示 */
.fdialog_outer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;right: 0;bottom: 0;background-color: var(--color-black50);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);z-index: 8;}
.fdialog_inner {position: fixed;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9;width: 36%;text-align: center;}
.fdialog_inner .btn_contained {width: 256px; margin-top: 20px;}
.fdialog_msgwrap {background-color: var(--color-white100);width: 80%;color: var(--color-black60);padding: 20px 25px;margin: 0 auto;border-radius: 24px;max-height: 592px;}
.fdialog_msgwrap .txt_head {margin-bottom: 10px}
.fdialog_msgwrap p a {display: flex;align-items: center;}
.fdialog_msgwrap p a .material-symbols-outlined {margin-top: 2px;}