@charset "UTF-8";

/* -----------------------------------------
	my__wrapper
----------------------------------------- */
.my__wrapper { background-color: #f7f7f5; font-feature-settings: "palt"; font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 500; overflow: hidden; }
#new_pageTop .btn-pagetop { z-index: 9; }
@media only screen and (min-width:813px){
.sp { display: none; }
}
@media only screen and (max-width:812px){
.pc { display: none; }
}

/* -----------------------------------------
	my__title
----------------------------------------- */
.my__title { background-color: #cc0000; color: #ffffff; position: relative; padding: 90px 0 70px 0; min-width: 1040px; }
.my__title::before { background-color: #0e357f; content: ""; position: absolute; top: -440px; left: 0px; width: 100%; height: 880px; transform-origin: center bottom; transform: skewY(-3deg); }
.my__title .l-inner { position: relative; z-index: +1; }
.my__title__copy { fonts-size: 0; line-height: 0; text-align: center; overflow: hidden; position: relative; z-index: +1; }
.my__title__copy span { display: inline-block; position: relative; padding: 0 20px; }
.my__title__copy span::before { background-color: #ffffff; content: ""; position: absolute; top: 45px; left: 100%; width: 50vw; height: 1px; }
.my__title__copy span::after { background-color: #ffffff; content: ""; position: absolute; top: 45px; right: 100%; width: 50vw; height: 1px; }
.my__title__column { display: flex; justify-content: space-between; margin-top: 40px; }
.my__title__heading { fonts-size: 0; line-height: 0; }
.my__title__img { fonts-size: 0; line-height: 0; margin-right: -30px; padding-top: 25px; }
.my__title__lead { font-size: 22px; font-weight: bold; line-height: 1.5; margin-top: 25px; }
.my__title__caption { margin-top: 15px; font-size:1.2rem; }
.my__title__caption li { position: relative; padding-left: 1em; }
.my__title__caption li span { position: absolute; top: 0px; left: 0px; }
.my__title__link { display: flex; margin-top: 35px; }
.my__title__link li + li { margin-left: 15px; }
.my__title__link li a { background-color: #ffffff; box-sizing: border-box; border: 5px solid #ffffff; border-radius: 5px; display: block; text-align: center; min-width: 340px; }
.my__title__link li a:hover { text-decoration: none !important; }
.my__title__link li a span { background-color: #0e357f; border: 3px solid #0e357f; border-radius: 5px; display: block; color: #ffffff; font-size: 18px; font-weight: bold; position: relative; padding: 10px 30px 8px 30px; }
.my__title__link li a span::after { border-right: 3px solid #ffffff; border-bottom: 3px solid #ffffff; content: ""; position: absolute; top: calc(50% - 6px); right: 15px; width: 13px; height: 13px; transform: rotate(-45deg); }
.my__title__link li a.type-merit  span { background-color: #ffffff; color: #0e357f; }
.my__title__link li a.type-merit  span::after { border-right: 3px solid #0e357f; border-bottom: 3px solid #0e357f; }
@media only screen and (min-width:813px){
.my__title__link li a { transition: background-color 0.3s ease, border 0.3s ease; }
.my__title__link li a.type-merit:hover { background-color: #0e357f; border: 5px solid #0e357f; }
.my__title__link li a span { transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; }
.my__title__link li a:hover span { background-color: #ffffff; border-color: #ffffff; color: #0e357f; }
.my__title__link li a.type-merit:hover span { background-color: #0e357f; border-color: #0e357f; color: #ffffff; }
.my__title__link li a span::after { transition: border 0.3s ease; }
.my__title__link li a:hover span::after { border-color: #0e357f; }
.my__title__link li a.type-merit:hover span::after { border-color: #ffffff; }
}
@media only screen and (max-width:812px){
.my__title { padding: 30px 0 35px 0; min-width: 0%; }
.my__title::before { top: calc(-100% + 240px); height: 100%; }
.my__title__copy img { width: 181px; height: auto; }
.my__title__copy span { padding: 0 10px; }
.my__title__copy span::before { top: 16px; }
.my__title__copy span::after { top: 16px; }
.my__title__column { display: block; margin-top: 25px; }
.my__title__heading { text-align: center; }
.my__title__heading img { width: 268px; height: auto; }
.my__title__img { text-align: center; margin-right: 0; padding-top: 20px; }
.my__title__img img { width:189px; height: auto; }
.my__title__lead { font-size: 107.6923%; line-height: 1.4285; margin-top: 15px; }
.my__title__caption { font-size: 92.3076%; margin-top: 10px; }
.my__title__link { display: block; margin-top: 15px; }
.my__title__link li + li { margin: 7px 0 0 0; }
.my__title__link li a { border: 3px solid #ffffff; border-radius: 3px; min-width: 0%; }
.my__title__link li a span { border: 2px solid #0e357f; border-radius: 3px; font-size: 107.6923%; padding: 7px 0 5px 0; }
.my__title__link li a span::after { border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; top: calc(50% - 4px); right: 10px; width: 8px; height: 8px; }
.my__title__link li a.type-merit  span::after { border-right: 1px solid #0e357f; border-bottom: 1px solid #0e357f; }
}

/* -----------------------------------------
	my__mask
----------------------------------------- */
.my__mask { position: relative; padding: 305px 0 0 0; min-width: 1040px; }
.my__mask::before { background: #deedff url("/mypageinfo/img/bg_01.jpg") center top no-repeat; content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 396px; }
.my__mask .l-inner { position: relative; z-index: +1; }
.my__mask__block { box-shadow: 0 0 30px 0 rgba(0,0,0,0.2); background-color: #ffffff; border-radius: 10px; position: relative; padding: 48px 30px 30px 30px; }
.my__mask__badge { box-sizing: border-box; background-color: #cc0000; border: 5px solid #ffffff; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15); border-radius: 50%; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 137.5%; font-weight: bold; line-height: 1.36; text-align: center; position: absolute; top: -75px; right: -46px; width: 168px; height: 168px; }
.my__mask__column { display: flex; align-items: flex-end; }
.my__mask__text { font-size: 0; line-height: 0; margin-right: -9px; padding-left: 25px; }
.my__mask__text span { display: block; }
.my__mask__text span:nth-of-type(2) { margin-top: 25px; }
.my__mask__img { font-size: 0; line-height: 0; }
.my__mask__img img { width: 295px; height: auto; max-width: 295px !important; }
.my__mask__note { background-color: #efece5; border-radius: 5px; font-size: 112.5%; font-weight: bold; margin-top: 25px; padding: 20px 25px; }
.my__mask__note li { position: relative; padding-left: 1em; }
.my__mask__note li span { position: absolute; top: 0px; left: 0px; }
@media only screen and (max-width:812px){
.my__mask { padding: 140px 0 0 0; min-width: 0%; }
.my__mask::before { background-size: auto 100%;; height: 178px; }
.my__mask__block { box-shadow: 0 0 15px 0 rgba(0,0,0,0.15); border-radius: 5px; padding: 25px 15px 15px 15px; }
.my__mask__badge { border: 3px solid #ffffff; box-shadow: 0 3px 5px 0 rgba(0,0,0,0.15); font-size: 3.5437vw;  top: -4.6875vw; right: -3.125vw; width: 25.625vw; height: 25.625vw; }
.my__mask__column { display: block; position: relative; }
.my__mask__text { margin-right: 0; padding-left: 3px; }
.my__mask__text span:nth-of-type(1) img { width: 158px; height: auto; }
.my__mask__text span:nth-of-type(2) { margin-top: 15px; }
.my__mask__text span:nth-of-type(2) img { width: 155px; height: auto; }
.my__mask__img { position: absolute; bottom: 10px; left: 148px; z-index: +1; }
.my__mask__img img { width: 118px; height: auto; max-width: 118px !important; }
.my__mask__note { border-radius: 3px; font-size: 92.3076%; margin-top: 15px; padding: 15px; }
}

/* -----------------------------------------
	my__cando
----------------------------------------- */
.my__cando { position: relative; padding: 90px 0 135px 0; min-width: 1040px; }
.my__cando__heading { font-size: 44px; font-weight: bold; line-height: 1.3333; text-align: center; }
.my__cando__heading span { display: inline-block; position: relative; padding: 0 20px; }
.my__cando__heading span::before { background-color: #cccccb; content: ""; position: absolute; top: calc(50% - 1px); left: 100%; width: 50vw; height: 2px; }
.my__cando__heading span::after { background-color: #cccccb; content: ""; position: absolute; top: calc(50% - 1px); right: 100%; width: 50vw; height: 2px; }
.my__cando__heading small { color: #cc0000; display: block; font-size: 100%; }
.my__cando__column { display: flex; align-items: center; justify-content: space-between; margin-top: 85px; }
.my__cando__column + .my__cando__column { margin-top: 100px; }
.my__cando__text { width: 450px; }
.my__cando__text dt small { font-size: 0; line-height: 0; }
.my__cando__text dt span { display: block; font-size: 44.65px; font-weight: bold; line-height: 1.3333; margin-top: 20px; }
.my__cando__text dt span b { color: #d90b19; }
.my__cando__text dd { margin-top: 10px; }
.my__cando__text dd p { font-size: 16.74px; line-height: 1.6666; }
.my__cando__note { font-size: 100%; margin-top: 10px; }
.my__cando__note li { position: relative; padding-left: 1em; }
.my__cando__note li span { position: absolute; top: 0px; left: 0px; }
.my__cando__img { position: relative; width: 500px; z-index: +1; }
.my__cando__img span { border-radius: 10px; box-shadow: 0 0 30px 0 rgba(0,0,0,0.2); display: inline-block; vertical-align: bottom; overflow: hidden; position: relative; }
.my__cando__img img { width: 100%; height: auto; }
.my__cando__small:nth-of-type(2) { margin: -60px 0 0 150px; z-index: -1; }
.my__cando__update { color: #0e357f; font-size: 262.5%; font-weight: bold; text-align: center; margin-top: 80px; }
.my__cando__update span { border-bottom: 4px solid #0e357f; display: inline-block; vertical-align: bottom; padding: 0 1em; }
.my__cando__icon { position: absolute; top: calc(50% - 35px); left: calc(50% - 35px); width: 70px !important; }
.my__cando__column--reverse .my__cando__text { order: 2; }
.my__cando__column--reverse .my__cando__img { order: 1; }
@media only screen and (max-width:812px){
.my__cando { padding: 40px 0 50px 0; min-width: 0%; }
.my__cando .l-inner { padding: 0 25px !important; }
.my__cando__heading { font-size: 27px; }
.my__cando__heading span { padding: 0 10px; }
.my__cando__heading span::before { top: 50%; height: 1px; }
.my__cando__heading span::after { top: 50%; height: 1px; }
.my__cando__column { display: block; margin-top: 25px; }
.my__cando__column + .my__cando__column { margin-top: 40px; }
.my__cando__text { width: auto; }
.my__cando__text dt small { display: block; text-align: center; }
.my__cando__text dt small img { width: auto; height: 32px !important; }
.my__cando__text dt span { font-size: 184.6153%; text-align: center; margin-top: 10px; }
.my__cando__text dd { margin-top: 8px; }
.my__cando__text dd p { font-size: 92.3076%; line-height: 1.5; }
.my__cando__note { font-size: 84.6153%; margin-top: 5px; }
.my__cando__img { margin-top: 15px; width: auto; }
.my__cando__img span { border-radius: 5px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.2); display: block; }
.my__cando__small { width: 70%; }
.my__cando__small:nth-of-type(2) { margin: -32px 0 0 30%; }
.my__cando__update { font-size: 161.5384%; margin-top: 40px; }
.my__cando__update span { border-bottom: 3px solid #0e357f; padding-bottom: 7px; }
.my__cando__icon { top: 50%; left: 50%; margin: -10.0529% 0 0 -10.0529%; width: 20.1058% !important; height: auto; }
}

/* -----------------------------------------
	my__info
----------------------------------------- */
.my__info { color: #ffffff; position: relative; padding: 80px 0 90px 0; min-width: 1040px; }
.my__info::before { background-color: #0e357f; content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 200%; transform-origin: center bottom; transform: skewY(-3deg); }
.my__info .l-inner { position: relative; z-index: +1; }
.my__info__lead { font-size: 19px; font-weight: bold; line-height: 1.9642; text-align: center; }
.my__info__heading { font-size: 300%; font-weight: bold; line-height: 1.3333; text-align: center; margin-top: 55px; }
.my__info__heading span { display: inline-block; position: relative; padding: 0 20px; }
.my__info__heading span::before { background-color: #cccccb; content: ""; position: absolute; top: calc(50% - 1px); left: 100%; width: 50vw; height: 2px; }
.my__info__heading span::after { background-color: #cccccb; content: ""; position: absolute; top: calc(50% - 1px); right: 100%; width: 50vw; height: 2px; }
.my__info__call { text-align: center; margin-top: 40px; }
.my__info__call dt { font-size: 22px; font-weight: bold; line-height: 1.5; }
.my__info__call dd { margin-top: 25px; }
.my__info__call dd a { display: inline-block; font-size: 0; line-height: 0; vertical-align: bottom; }
.my__info__call dd span { display: block; font-size: 18px; margin-top: 20px; }
.my__info__mail { margin-top: 35px; }
.my__info__mail a { background-color: #cc0000; border-radius: 5px; display: flex!important; align-items: center; justify-content: center; font-size: 24.18px; font-weight: bold; line-height: 1.8; height: 85px; }
.my__info__mail a:hover { text-decoration: none !important; }
.my__info__mail a span { background: url("/mypageinfo/img/icon_mail.png") left center no-repeat; color: #ffffff; display: inline-block; vertical-align: bottom; padding-left: 70px; }
.my__info__link { display: flex; justify-content: center; margin-top: 30px; }
.my__info__link li + li { margin-left: 15px; }
.my__info__link li a { background-color: #ffffff; box-sizing: border-box; border: 5px solid #ffffff; border-radius: 5px; display: block; text-align: center; min-width: 340px; }
.my__info__link li a:hover { text-decoration: none !important; }
.my__info__link li a span { background-color: #cc0000; border: 3px solid #cc0000; border-radius: 5px; display: block; color: #ffffff; font-size: 19px; font-weight: bold; position: relative; padding: 10px 30px 8px 30px; }
.my__info__link li a span::after { border-right: 3px solid #ffffff; border-bottom: 3px solid #ffffff; content: ""; position: absolute; top: calc(50% - 6px); right: 15px; width: 13px; height: 13px; transform: rotate(-45deg); }
.my__info__link li a.type-merit  span { background-color: #ffffff; color: #cc0000; }
.my__info__link li a.type-merit  span::after { border-right: 3px solid #cc0000; border-bottom: 3px solid #cc0000; }
@media only screen and (min-width:813px){
.my__info__call dd a { pointer-events: none; }
.my__info__mail a { transition: background-color 0.3s ease; }
.my__info__mail a:hover { background-color: #ffffff; }
.my__info__mail a span { transition: color 0.3s ease; }
.my__info__mail a:hover span { color: #cc0000; }
.my__info__link li a { transition: background-color 0.3s ease, border 0.3s ease; }
.my__info__link li a.type-merit:hover { background-color: #cc0000; border: 5px solid #cc0000; }
.my__info__link li a span { transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; }
.my__info__link li a:hover span { background-color: #ffffff; border-color: #ffffff; color: #cc0000; }
.my__info__link li a.type-merit:hover span { background-color: #cc0000; border-color: #cc0000; color: #ffffff; }
.my__info__link li a span::after { transition: border 0.3s ease; }
.my__info__link li a:hover span::after { border-color: #cc0000; }
.my__info__link li a.type-merit:hover span::after { border-color: #ffffff; }
}
@media only screen and (max-width:812px){
.my__info { padding: 40px 0 45px 0; min-width: 0%; }
.my__info__lead { font-size: 107.6923%; line-height: 1.8571; }
.my__info__heading { font-size: 184.6153%; margin-top: 25px; }
.my__info__heading span { padding: 0 10px; }
.my__info__heading span::before { top: 50%; height: 1px; }
.my__info__heading span::after { top: 50%; height: 1px; }
.my__info__call { margin-top: 15px; }
.my__info__call dt { font-size: 107.6923%; }
.my__info__call dd { margin-top: 15px; }
.my__info__call dd a { display: block; margin: 0 auto; max-width: 290px; }
.my__info__call dd a img { width: 100%; height: auto; }
.my__info__call dd span { font-size: 92.3076%; margin-top: 12px; }
.my__info__mail { margin-top: 20px; }
.my__info__mail a { border-radius: 3px; font-size: 107.6923%; height: 60px; }
.my__info__mail a span { background-size: 33px 22px; padding-left: 35px; }
.my__info__link { display: block; margin-top: 15px; }
.my__info__link li + li { margin: 7px 0 0 0; }
.my__info__link li a { border: 3px solid #ffffff; border-radius: 3px; min-width: 0%; }
.my__info__link li a span { border: 2px solid #cc0000; border-radius: 3px; font-size: 107.6923%; padding: 7px 0 5px 0; }
.my__info__link li a span::after { border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; top: calc(50% - 4px); right: 10px; width: 8px; height: 8px; }
.my__info__link li a.type-merit  span::after { border-right: 1px solid #cc0000; border-bottom: 1px solid #cc0000; }
}