@charset "utf-8";

/* default */

* {
margin: 0;
padding: 0;
border: 0;
vertical-align: text-bottom;
box-sizing: border-box;
}
html {
overflow-y: auto;
overflow-x: hidden;
font-size: 62.5%; /* 1em = 10px */
}
body {
font: 14px/1.6 "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif;
color: #333;
/* background-color: #e6e6e6; */
transition: font-size .15s cubic-bezier(.52, .12, .94, .6);
-webkit-text-size-adjust: 100%;
}
#wrapper {
position: relative;
z-index: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
outline: none;
color: #0a50a1;
text-decoration: none;
transition: color .25s ease;
-webkit-tap-highlight-color: rgba(176, 176, 226, .25);
/*-webkit-tap-highlight-color: rgba(10, 10, 250, .25);*/
}
a:link, a:visited, a:active, a:hover {
overflow: hidden;
outline: none;
}

/* HTML5 */

article, aside, canvas, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
margin: 0;
padding: 0;
}

/* badge */

a[data-badge] {
position: relative;
z-index: 1;
}
a[data-badge] .badge {
position: absolute;
display: block;
padding: 0 5.5px;
height: 18px;
line-height: 18px;
color: #fff;
font-size: 10px;
font-size: 1.0rem;
font-weight: bold;
background-color: #f00;
border-radius: 100px;
vertical-align: middle;
z-index: 2;
}
a[data-badge] .badge.android {
padding-top: 3px;
height: 16px;
line-height: 13px;
}

/* image */

[data-image] {
display: inline-block;
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-size: contain;
background-size: contain;
}

/* tap */

.tapped {
/*transition: all .08s;*/
-webkit-tap-highlight-color: transparent;
}
.touchstart {
margin-top: 3px !important;
border-bottom-width: 1px !important;
background-color: #f7f7f7 !important;
box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 4px -4px inset;
}

.linkDisable {
-webkit-tap-highlight-color: transparent;
}

/* contentList */

.contentList, .contentHistoryList {
width: auto;
}
.contentList h2, .contentHistoryList h2 {
position: relative;
display: block;
padding: 6px 12px;
font-size: 16px;
font-size: 1.6rem;
vertical-align: middle;
z-index: 1;
}
.contentList ul li, .contentHistoryList ul li {
overflow: hidden;
background-color: #fff;
}
.contentList ul li a, .contentHistoryList ul li a {
position: relative;
display: block;
padding: 12px 40px 12px 12px;
font-size: 15px;
font-size: 1.5rem;
z-index: 1;
}
.contentList ul li a::after, .contentHistoryList ul li a::after {
content: '';
display: block;
margin: auto 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
}

/* mainHeader */

#mainHeader {
position: fixed;
top: 0;
display: table;
width: 100%;
height: 50px;
background-color: #fff;
box-sizing: content-box;
z-index: 5;
transition: all .15s;
}
#mainHeader.activeShadow {
box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
}
#mainHeader.activeBorder {
border-bottom: 1px solid rgba(0, 0, 0, .25);
}

/*SEO観点からh1をpに変更20160905*/
/*
#mainHeader h1 {
display: table-cell;
padding-left: 10px;
vertical-align: middle;
}
#mainHeader h1 a {
width: 120px;
height: 50px;
}
#mainHeader h1 img {
width: auto;
height: 30px;
}
*/


#mainHeader h1 {
padding-left: 10px;
}

#mainHeader p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#mainHeader p a {
width: 120px;
height: 50px;
}
#mainHeader p img {
width: 75px;
}

#mainHeader div {
display: table-cell;
padding: 0 1px;
width: 56px;
vertical-align: middle;
}
#mainHeader div a {
display: block;
width: 100%;
height: 50px;
color: #000;
font-size: 11px;
font-size: 1.1rem;
font-weight: bold;
text-align: center;
line-height: 50px;
}
#mainHeader div a[data-image] {
color: rgba(0, 0, 0, 0);
-webkit-background-size: 24px auto;
background-size: 24px auto;
}
#mainHeader div a .badge {
top: 5px;
right: 0;
}

#mainHeader .hide{
display: none !important;
}
#globalNavHide{
display: none !important;
}

/* globalNav */

#menuClose {
position: absolute;
top: 0;
left: 0;
padding-top: 16px;
width: 17.1875%;
text-align: center;
z-index: 1;
}
#menuClose img {
width: 21px;
height: 21px;
}

#globalNav {
display: none;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
right: -87.8125%;
padding-right: 5%;
padding-bottom: 20px;
width: 87.8125%;
height: 100%;
background-color: #f1f1f1;
z-index: 10;
-webkit-overflow-scrolling: touch;
}
#globalNav.logined {
padding-bottom: 0;
}
#globalNav.activeMenu {
right: 0 !important;
padding-right: 0;
width: 82.8125%;
}

#navHeader {
padding: 10px 12px;
}
#navHeader ul {
display: table;
width: 100%;
}
#navHeader li {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#navHeader li a {
display: block;
margin: 0 auto;
padding: 6px 0;
max-width: 20rem;
font-weight: bold;
font-size: 15px;
font-size: 1.5rem;
text-align: center;
border-radius: 6px;
}
#signupBtn {
padding-right: 8px;
}
#signupBtn a {
color: #fff;
background-color: #f60;
border-bottom: 4px solid #cc5200;
}
#signupBtn .touchstart {
background-color: #f36000 !important;
}
#loginBtn {
padding-left: 8px;
}
#loginBtn a {
color: #333;
background-color: #fff;
border: 1px solid #b3b3b3;
border-bottom: 4px solid #b3b3b3;
}

.logined #navHeader {
padding: 0;
background-color: #101177;
}
.logined.activeMenu.android #navHeader {
position: fixed;
top: 0;
left: 17.1875%;
width: 82.8125%;
z-index: 3;
}
.logined #navHeader a {
display: table;
width: 100%;
height: 54px;
}
.logined #navHeader a figure {
display: table-cell;
width: 54px;
text-align: center;
vertical-align: middle;
}
.logined #navHeader a figure img {
width: 34px;
height: auto;
}
.logined #navHeader a p {
position: relative;
display: table-cell;
padding-right: 30px;
color: #fff;
font-weight: bold;
font-size: 15px;
font-size: 1.5rem;
vertical-align: middle;
z-index: 1;
}
.logined #navHeader a p::after {
content: '';
display: block;
margin: auto 0;
position: absolute;
top: 0;
bottom: 0;
right: 17px;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 2;
}

.logined #scrollBlock {
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 20px;
height: -webkit-calc(100% - 54px);
height: calc(100% - 54px);
-webkit-overflow-scrolling: touch;
}
.logined.activeMenu.android #scrollBlock {
padding-top: 54px;
height: auto !important;
}

#navFooter {
padding: 10px 12px;
}
#navFooter a {
display: block;
margin: 0 0 0 auto;
padding: 6px 0;
width: 48%;
max-width: 20rem;
font-weight: bold;
font-size: 15px;
font-size: 1.5rem;
text-align: center;
border-radius: 6px;
color: #333;
background-color: #fff;
border: 1px solid #b3b3b3;
border-bottom: 4px solid #b3b3b3;
}

#globalNav .contentList {
border-top: 1px solid #d6d6d6;
}
#globalNav .contentList h2 {
padding: 5.5px 12px;
color: #808080;
font-weight: normal;
background-color: #e6e6e6;
border-bottom: 1px solid #d6d6d6;
}
#globalNav .contentList h3 {
padding: 3px 10px;
color: #fff;
font-size: 12px;
font-size: 1.2rem;
background-color: #0a50a1;
}
#globalNav .contentList ul {
background-color: #fff;
}
#globalNav .contentList ul li {
border-bottom: 1px solid #d6d6d6;
}
#globalNav .contentList ul li a {
color: #333;
}
#globalNav .contentList ul li a::after {
right: 17px;
width: 8px;
height: 8px;
border-top: 2px solid #999;
border-right: 2px solid #999;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

#navHeader li .tapped.android, #navFooter .tapped.android {
padding: 7.5px 0 4.5px !important;
}

/* noticeBox */

#noticeBox {
display: none;
position: fixed;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: 500px;
height: 90%;
z-index: 10;
-webkit-tap-highlight-color: transparent;
}
#noticeBox aside {
margin: 0 auto;
width: 94%;
height: auto;
}
#noticeBox aside::after {
content: '';
display: block;
height: 6px;
background-color: #e6e6e6;
border-radius: 0 0 4px 4px;
}

#noticeHeader {
display: table;
margin: 0 auto;
width: 100%;
height: 40px;
background-color: #101177;
border-radius: 4px 4px 0 0;
}
#noticeHeader > * {
display: table-cell;
vertical-align: middle;
}
#noticeHeader figure {
width: 40px;
text-align: center;
}
#noticeHeader figure img {
width: 23px;
height: auto;
}
#noticeHeader h2 {
color: #fff;
font-size: 18px;
font-size: 1.8rem;
}
#noticeHeader a {
width: 40px;
text-align: center;
}
#noticeHeader a img {
width: 21px;
height: auto;
}

#noticeBody {
overflow-y: auto;
margin: 0 auto;
height: auto;
background-color: #e6e6e6;
-webkit-overflow-scrolling: touch;
}
#noticeBody section {
background-color: #fff;
}
#noticeBody section h2 {
padding: 6px 12px;
color: #808080;
font-size: 16px;
font-size: 1.6rem;
font-weight: normal;
background-color: #e6e6e6;
}
#noticeBody section h3 {
padding: 3px 12px;
color: #fff;
font-size: 12px;
font-size: 1.2rem;
background-color: #0a50a1;
}
#noticeBody section ul {
border-bottom: 1px solid #d6d6d6;
}
#noticeBody section li {
border-top: 1px solid #d6d6d6;
}
#noticeBody section li:first-child {
border-top: 0;
}
#noticeBody section li a {
position: relative;
display: block;
padding: 10px 32px 10px 12px;
font-size: 15px;
font-size: 1.5rem;
color: #333;
z-index: 1;
}
#noticeBody section li a .badge {
  top: 12px;
  right: 10px;
  font-size: 11px;
  font-size: 1.1rem;
}
#noticeBody section li a .badge.android {
  padding-top: 2px;
  height: 16px;
  line-height: 13px;
}

/* overlay */

#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
z-index: 9;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

/* main */

main {
margin-top: 50px;
background-color: #f1f1f1;
}
main > * {
margin: 8px 12px;
}

#userInfo {
display: table;
margin: 0 0 8px;
padding: 0 10px;
width: 100%;
height: 32px;
background-color: #0f1176;
}
#userInfo > * {
display: table-cell;
vertical-align: middle;
}
#userInfo figure {
width: 24px;
height: 24px;
}
#userInfo figure img {
width: 24px;
height: 24px;
}
#userInfo p {
padding-left: 10px;
font-size: 12px;
font-size: 1.2rem;
font-weight: bold;
color: #fff;
}

.contentBox + .contentList {
margin-top: 25px;
}
.contentBox header {
margin: 6px 0;
display: table;
width: 100%;
}
.contentBox header > * {
display: table-cell;
vertical-align: middle;
}
.contentBox header h2 {
font-size: 17px;
font-size: 1.7rem;
}
.contentBox header div {
text-align: right;
}
.contentBox header div a {
position: relative;
display: inline-block;
padding-right: 18px;
font-size: 13px;
font-size: 1.3rem;
font-weight: bold;
z-index: 1;
}
.contentBox header div a::after {
content: '';
display: block;
margin: auto 0;
position: absolute;
top: 0;
bottom: 0;
right: 5px;
width: 6px;
height: 6px;
border-top: 1.5px solid #101177;
border-right: 1.5px solid #101177;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 2;
}
.contentListBox {
position: relative;
border: 1px solid #d6d6d6;
background-color: #fff;
z-index: 1;
}
.contentListBox:not(:last-child) {
border-bottom: none;
}
.contentListBox h3 {
padding: 3px 0;
color: #fff;
font-size: 12px;
font-size: 1.2rem;
text-align: center;
background-color: #0a50a1;
}
.contentListBox .statusLabel {
position: absolute;
top: 0;
right: 0;
display: block;
padding: 3px 14px;
color: #101177;
font-size: 12px;
font-size: 1.2rem;
font-weight: bold;
background-color: #99cf16;
z-index: 1;
}
.contentListBox ul {
display: table;
table-layout: fixed;
width: 100%;
}
.contentListBox ul li {
display: table-cell;
vertical-align: middle;
}
.contentListBox ul li a {
  position: relative;
  display: block;
  padding: 4px 0;
  height: 100%;
  text-align: center;
  z-index: 1;
}
  .contentListBox ul li a div {
	padding: 2px 0;
	height: 100%;
  }
  .contentListBox ul li:first-child a div {
	border-right: 1px solid #d6d6d6;
  }
	.contentListBox ul li a .badge {
	  top: 5px;
	  left: 65%;
	}
	.contentListBox ul li a [data-image] {
	  width: 40px;
	  height: 40px;
	}
	.contentListBox ul li a p {
	  display: block;
	  height: 25px;
	  line-height: 25px;
	  font-size: 12px;
	  font-size: 1.2rem;
	  font-weight: bold;
	}
	.contentListBox ul li a .lineBreak {
	  line-height: 12.5px;
	}
.contentListBox .applyBtn {
padding: 19px 0;
text-align: center;
}
.contentListBox .applyBtn a {
position: relative;
display: inline-block;
padding: 8px 30px 8px 12px;
width: 280px;
color: #101177;
font-size: 15px;
font-size: 1.5rem;
font-weight: bold;
border: 1px solid #101177;
background-color: #ebebf8;
}
.contentListBox .applyBtn a::after {
content: '';
display: block;
margin: auto 0;
position: absolute;
top: 0;
bottom: 0;
right: 14px;
width: 7px;
height: 7px;
border-top: 2px solid #101177;
border-right: 2px solid #101177;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 2;
}

main .contentList, main .contentHistoryList {
margin: 0;
}
main .contentList h2, main .contentHistoryList h2 {
color: #fff;
background-color: #101177;
}
/* main .contentList ul */
main .contentHistoryList ul {
border-bottom: 1px solid #d9d9d9;
}
main .contentList ul li {
border-bottom: 1px solid #d9d9d9;
}
main .contentHistoryList ul li {
border-top: 3px solid #101177;
}
main .contentHistoryList ul li:first-child {
border-top: none;
}
main .contentList ul li a {
padding-left: 15px;
color: #333;
}
.iconPC li a::after {
right: 18px;
width: 15px;
height: 14px;
background: url(/cmn_web/sp_template/common/images/list_icon_pc.svg) 50% 50% no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.iconPC li a.android::after {
background-image: url(/cmn_web/sp_template/common/images/list_icon_pc.png) !important;
}
.iconArrow li a::after, main .contentHistoryList ul li a::after {
right: 22px;
width: 8px;
height: 8px;
border-top: 2px solid #999;
border-right: 2px solid #999;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
main .contentHistoryList ul li a {
padding-bottom: 0;
background-color: #fafafa;
border-bottom: 1px solid #e1e1e1;
}
main .contentHistoryList ul li h3 {
  color: #0a50a1;
  font-size: 15px;
  font-size: 1.5rem;
}
  main .contentHistoryList ul li h3 span {
	display: inline-block;
	padding: 0 4px;
	height: 16px;
	line-height: 14px;
	font-size: 11px;
	font-size: 1.1rem;
	vertical-align: 10%;
  }
  main .contentHistoryList ul li h3 .android {
	padding-top: 2px;
	height: 17px;
	line-height: 13px;
  }
  main .contentHistoryList ul li h3 .noticeNew {
	color: #fff;
	background-color: #ff0101;
	border: 1px solid #ff0101;
  }
  main .contentHistoryList ul li h3 .noticeDeadline {
	color: #1759a6;
	border: 1px solid #1759a6;
	background-color: #fff;
  }
main .contentHistoryList ul li p {
  margin: 8px 0 10px;
  color: #0a50a1;
  font-size: 12px;
  font-size: 1.2rem;
}
main .contentHistoryList ul li div {
padding: 10px 12px 12px 12px;
}
main .contentHistoryList ul li div::after {
content: '';
display: block;
height: 0;
clear: both;
}
main .contentHistoryList ul li figure {
  float: left;
}
  main .contentHistoryList ul li figure img {
	margin: 2px 10px 0 0;
	width: 110px;
	height: auto;
  }
main .contentHistoryList ul li dl {
  color: #333;
  font-size: 12px;
  font-size: 1.2rem;
}
  main .contentHistoryList ul li dl dd {
	margin-bottom: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  main .contentHistoryList ul li dl dd:last-child {
	margin-bottom: 0;
  }

/* footer */

#toPcSite {
padding: 16px 12px;
background-color: #f1f1f1;
}
#toPcSite a {
display: block;

padding: 12px 0 10px;
color: #333;
font-weight: bold;
font-size: 16px;
font-size: 1.6rem;
text-align: center;
border: 1px solid #b3b3b3;
border-bottom: 4px solid #b3b3b3;
border-radius: 6px;
background-color: #fff;
}
#toPcSite a img {
width: auto;
height: 14px;
vertical-align: -10%;
}

#mainFooter {
background-color: #fff;
border-top: 4px solid #101177;
}
/* #footerNav */
#footerNav ul::after {
content: '';
display: block;
height: 0;
clear: both;
}
#footerNav ul li {
float: left;
width: 50%;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #d6d6d6;
}
#footerNav ul li:nth-child(even) {
border-width: 0 0 1px 0;
}
#footerNav ul li a {
display: block;
padding: 8px 12px;
color: #0a50a1;
font-size: 14px;
font-size: 1.4rem;
min-height: 35px;
}

#footerTable {
display: table;
margin: 16px 0 10px;
width: 100%;
}
#footerTable > div {
display: table-cell;
vertical-align: middle;
}
#footerTable > div:first-child {
padding-left: 12px;
}
#footerTable > div:first-child img {
display: block;
margin-right: 10px;
float: left;
width: auto;
height: 56px;
}
#footerTable > div:first-child p {
padding: 8px;
height: 56px;
color: #0a50a1;
font-size: 12px;
font-size: 1.2rem;
}
#footerTable > div:last-child {
padding-right: 12px;
text-align: right;
width: 40%;
}
#footerTable > div:last-child img {
width: 111px;
height: auto;
}

#copyright {
padding: 5px 12px 20px;
font-size: 14px;
font-size: 1.4rem;
text-align: center;
}

#toTop {
display: none;
position: fixed;
bottom: 24px;
right: 12px;
width: 44px;
height: 44px;
cursor: pointer;
z-index: 3;
}
#noticeBtn a[data-badge="0"] {
background-image: url("/cmn_web/sp_template/common/images/btn_notice_disable.svg") !important;
}
#header{
display: none;
}
#globalNavLogin.hide{
display: none;
}


/* mainFooter */

#mainFooter {
border-top: 2px #0a50a1 solid;
background: #fff;
}
body.active #mainFooter {
display: none !important;
}

.footerMenu {
display: flex;
flex-wrap: wrap;
padding: 8px 0;
border-bottom: 1px #e5e5e5 solid;
}
.footerMenu li {
width: 50%;
}
.footerMenu li a {
display: block;
padding: 4px 15px 3px;
font-size: 12px;
}
.footerMenu li a[target="_blank"]::after {
display: inline-block;
width: 12px;
height: 10px;
margin-left: 8px;
background: url(/cmn_web/img/sp/icon_targetblank.png) no-repeat 50% 50%;
background-size: 100%;
content: "";
}

.footerPrivacy {
display: flex;
padding: 15px 15px 5px;
}
.footerPrivacy a {
display: block;
}
.footerPrivacy .privacyMark img {
width: 56px;
}
.footerPrivacy .privacyText {
margin-left: 15px;
padding-top: 9px;
font-size: 12px;
}

#mainFooter .copyright {
padding: 4px 0 12px;
font-size: 12px;
text-align: center;
}

.toTop {
display: block;
position: fixed;
bottom: 15px;
right: 15px;
z-index: 1000;
width: 48px;
height: 48px;
background: url(/cmn_web/img/sp/ico_top.svg) no-repeat 0 0;
background-size: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.toTop.visible {
opacity: 1;
pointer-events: auto;
}

#toTop {
display: none;
position: fixed;
bottom: 24px;
right: 12px;
width: 44px;
height: 44px;
cursor: pointer;
z-index: 3;
}
/*===20180517追記===*/
.mainFooter__wrap{
    padding: 10px 10px 10px 35px;
width:300px;
margin: 0 auto;
}

.linkText__footer
{position: relative;

    font-size: 14px;
    font-size: 1.4rem;
	}
	
.linkText__footer--arrow:before{
border-right: 1px solid #0a50a1;
    border-bottom: 1px solid #0a50a1;
    content: '';
    display: block;
    height: 5px;
    left: -1em;
    position: absolute;
    top: .5em;
    transform: rotate(-45deg);
    width: 5px;
    -webkit-transform: rotate(-45deg);
}

/*201903_persol logo*/
.logo_persol{
text-align:center;
padding:10px;
}
.snsBox {
  clear: both;
  padding: 16px 16px 12px 16px;
}

.snsBox .txt {
  float: left;
  margin-right: 24px;
  color: #222222;
  font-family: Verdana,Helvetica,Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,メイリオ,Meiryo,sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

.snsBox .btns {
  float: left;
}

.snsBox .btns li {
  float: left;
  margin-right: 10px;
  width: 18px;
  height: 18px;
}

.snsBox .btns li a {
  display: block;
  width: 18px;
  height: 18px;
  position: relative;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  border: none;
}

.snsBox .btns li button {
  display: block;
  width: 18px;
  height: 18px;
  position: relative;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  border: none;
  background-color: #fff;
}

.snsBox .btns li button img {
  vertical-align: baseline;
}

.snsBox .btns li a img {
  vertical-align: baseline;
}

.snsBox .btns li a img.tw {
  position: absolute;
  left: -300px;
  top: -250px;
}

.snsBox .btns li a img.fb {
  position: absolute;
  left: -350px;
  top: -250px;
}

.snsBox .btns li a img.hb {
  position: absolute;
  left: -400px;
  top: -250px;
}

.border{
  height: 1px;
  background-color:  #E5E5E5;
  margin: 0 16px;
}
/******************************
シェアコンテント
******************************/
.shareContentModalSP {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 32px);
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 99999;
  height: 238px;
  width: 342px;
  display: none;
}

.shareContentModalSP--show {
  display: block;
}

.shareContentModalSP--fitToScreenWidth {
  width: calc(100% - 32px);
}

.shareContentModalSP__closeButton {
  position: fixed;
  right: 16px;
  width: 24px;
  height: 24px;
  background-image: url(https://doda.jp/cmn_web/img/cm/icon/close_black.svg);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  border: none;
}

.shareContentModalSP__closeButton--withTitle {
  top: 15px;
}

.shareContentModalSP__title {
  height: 56px;
  width: inherit;
  font-weight: bold;
  font-size: 16px;
  color: var(--text-222222, #222);
  padding: 16px 48px 16px 32px;
  background: #f5f5f5;
  box-sizing: border-box;
  font-family:Verdana,Helvetica,Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,メイリオ,Meiryo,sans-serif;
}

.shareContentModalSP__content {
  box-sizing: border-box;
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.shareCodeAreaSP {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  align-self: stretch;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-222222, #222);
  font-family: Verdana,Helvetica,Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,メイリオ,Meiryo,sans-serif;
}

.copyButtonSP {
  border: 1px solid #e5e5e5;
  background: #ffffff;
  height: 48px; 
  width: 294px;
  border-radius: 8px;
  color: var(--text-222222, #222);
  font-family: "Hiragino Kaku Gothic Pro",“Hiragino Kaku Gothic ProN”,“Hiragino Sans”,ヒラギノ角ゴ ProN W3,“メイリオ”,Meiryo,sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.copyButtonSP:active {
  background-color: #f5f5f5;
}

.modalOverLaySP {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50000;
  display: none;
  width: 100%;
  height: 100%;
  background: rgb(0 16 26 / 80%);
}

.modalOverLay--show {
  display: block;
}

.modal--show {
  display: block;
}