@charset "UTF-8";
.main{
    line-height: 1.7;
}

.main .en{
    font-family: var(--font-family);
}

.main .head_ttl{
    padding: 0 min(11vw, 90px);
    background-position: left center, right center;
    background-size: min(10vw, 80px);
    background-repeat: no-repeat;
}

.main .head_ttl_blue{
    background-image: url(../img/head_bg_l_blue.png),url(../img/head_bg_r_blue.png);
}

.main .head_ttl_flex{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3%;
}

.main .head_ttl01{
    line-height: 1;
    font-family: var(--font-family);
    font-size: min(calc(83/768*100vw),83px);
}

.main .head_ttl02{
    color: #fff;
    font-weight: bold;
    line-height: 1;
    padding: 0.25em 0.2em 0.1em;
}

.main .head_ttl03{
    color: #fff;
    font-family: var(--font-family);
    font-size: min(calc(40/768*100vw),40px);
    width: min(calc(77/768*100vw),77px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main .head_ttl04{
    font-weight: bold;
}

.main .head_txt{
    border: 2px solid;
    padding: 1em 0.8em;
}

.main .bold{
    font-weight: bold;
}

.main .center{
    text-align: center;
}

.main .kadomaru{
    border-radius: 0.8em;
}

.main .maru{
    border-radius: 50%;
}

.main .border_wrap{
    border: min(0.5vw, 2px) solid #ccc;
    padding: 1em;
}

.main .line_dash{
    border-top: 2px dashed;
}

.main .label01{
    line-height: 1;
    display: inline-flex;
    align-items: center;
    background-color: #efeddf;
    border-left: min(2vw, 13px) solid;
    height: min(6vw, 52px);
    padding: 0.2em 0.6em 0;
}

.main .label02{
    line-height: 1;
    display: flex;
    align-items: center;
    border-left: min(2vw, 13px) solid;
    border-bottom: 1px solid;
    height: min(6vw, 52px);
    padding: 0 0.6em 0;
}

.main .point{
    color: #fff;
    line-height: 0.8;
    font-family: var(--font-family);
    display: inline-block;
    padding: 2px 3px 1px;
    font-size: min(calc(40/768*100vw),40px);
}

.main .howto{
    line-height: 1;
    font-family: var(--font-family);
    font-size: min(calc(40/768*100vw),40px);
    padding: 0 0.6em 0;
}

.main .bullet{
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    margin: 0.1em 0.4em 0.3em 0;
    border: 2px solid;
    vertical-align: middle;
}

.main .indent{
    padding-left: 1em;
    text-indent: -1em;
}

.main .box01{
    border: min(0.5vw, 4px) solid #ccc;
    padding: 1.5em 1em 1em;
    position: relative;
}

.main .box01_ttl{
    position: absolute;
    left: 0.5em;
    top: -0.5em;
    line-height: 1;
    background-color: #fff;
    padding: 0 0.2em;
}

.main .link_btn{
    text-align: right;
}

.main .link_btn a{
    color: #fff;
    line-height: 1.4;
    display: inline-block;
    padding: 0.6em 2em 0.4em 1em;
    position: relative;
    font-weight: bold;
    border-radius: 10px;
    font-size: min(calc(24/768*100vw),24px);
}

.main .link_btn a:after{
    content: "＞";
    font-size: 0.7em;
    margin: 0 1em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: normal;
}
.main .white{
    color: #fff !important;
}

.main .blue{
    color: #597eff !important;
}

.main .blue02{
    color: #eef2ff !important;
}

.main .blue03{
    color: #52aaf2 !important;
}

.main .pink{
    color: #c40081 !important;
}

.main .pink02{
    color: #f07f9f !important;
}

.main .green{
    color: #259b62 !important;
}

.main .bg_blue{
    background-color: #597eff !important;
}

.main .bg_blue02{
    background-color: #eef2ff !important;
}

.main .bg_blue03{
    background-color: #52aaf2 !important;
}

.main .bg_pink{
    background-color: #c40081 !important;
}

.main .bg_pink02{
    background-color: #f07f9f !important;
}

.main .bg_green{
    background-color: #259b62 !important;
}

.main .border_blue{
    border-color:  #597eff !important;
}

.main .border_blue02{
    border-color:  #eef2ff !important;
}

.main .border_blue03{
    border-color:  #52aaf2 !important;
}

.main .border_pink{
    border-color:  #c40081 !important;
}

.main .border_pink02{
    border-color:  #f07f9f !important;
}

.main .border_green{
    border-color:  #259b62 !important;
}

.main .marker_blue{
    display: inline;
    background: linear-gradient(transparent 59%, #dee5ff 59%, #dee5ff 80%, transparent 80%);
}

/* アコーディオン */
.main .drw_btn{
  position: relative; z-index: 1; font-weight: bold; padding: 0.8em 2.75em 0.8em 1em; border-radius: 10px; cursor: pointer;
  border-style: solid; border-width: 3px;
}
.main .drw_btn_text{
    color: #fff;
}
.main .drw_btn_text span{
    background-color: #fff;
    padding: 1px 8px 0;
    line-height: 1;
    font-weight: normal;
    margin-right: 0.5em;
}
.main .drw_btn_icon{
  position: absolute; top: 0; bottom: 0; right: 1em;
  width: 1.5em; height: 1.5em; background-color: #fff;  margin: auto;
}
.main .drw_btn_icon::before,
.main .drw_btn_icon::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #333;
}
.main .drw_btn_icon::before{
  width: 1em; height: 0.2em;
}
.main .drw_btn_icon::after{
  width: 0.2em; height: 1em;
}
.main .active .drw_btn_icon::after{
  display: none;
}
.main .drw_target{
  display: none;
  position: relative; z-index: 0; top: -30px; margin: 0 0 -30px;
}
.main .drw_target.open{
  display: block;
}
.main .drw_target_in{
  padding: calc(30px + 4%) 1em 4% 1.2em;
  border-radius: 0 0 10px 10px;
  border-style: solid; border-width: 2px;
}
.main .drw_target_relative{
  position: relative;
}

.main .drw_target_menu{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em 0.2em;
    font-size: min(calc(22/768*100vw),22px);
}

.main .drw_target_menu a.rowspan2{
    grid-column: span 2;
}

.main .drw_target_menu a::before{
    content: "";
    display: inline-block;
    width: min(calc(32/768*100vw),32px);
    aspect-ratio: 1 / 1;
    margin-right: 0.5em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: text-top;
}

.main .drw_target_menu.arrow_pink a::before{
    background-image: url(../img/arrow_pink.png);
}
.main .drw_target_menu.arrow_blue a::before{
    background-image: url(../img/arrow_blue.png);
}
.main .drw_target_menu.arrow_green a::before{
    background-image: url(../img/arrow_green.png);
}

.main .drw_target_menu a.active{
    font-weight: bold;
    pointer-events: none;
}

.main .drw_target_menu a.active::before{
    background-image: none;
    content: "●";
    font-weight: bold;
    font-size: 0.7em;
    text-align: center;
    vertical-align: bottom;
}