@charset "shift_jis";

/*ロゴ下線消し*/
h1#SITE_LOGO{
border-bottom : none!important;
}

/*-------------------------
余白の上書き
-------------------------*/
#wrapper {
	border-right:none;
	border-left:none;
}


.container
{
	margin-top:0!important;
}

.keyimgBox
{
	margin-bottom:0px;
}


/*-------------------------
見出しの上書き
-------------------------*/

h1
{
	margin-bottom: 30px;
}


h2 {
	border-bottom:none;
	font-weight:bold;
	color:#5776cd;
}

h2:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 16.67%;
	height: 2px;
	background-color: #1667a9;
}

/*------------------------?
ボタンの上書き
-------------------------*/
.btnGreen {
	background:#16afa2;
	border:none;
	box-shadow: 0px 10px 10px 0px rgba(0, 0, 255, .2);
	padding:20px 30px;
	line-height:1.4;
	width: 56%;
}

.btnGreen:hover {
	background:#11dfd4;
	padding:15px 25px;
	box-shadow:none;
	width: 53%
}

.btnRed {
	background:#e44256;
	border:none;
	box-shadow: 0px 10px 20px 0px rgba(0, 0, 255, .2);
	padding:20px 30px;
	line-height:1.4;
	width: 56%;
}
.btnRed:hover {
	background:#ff6174;
	padding:15px 25px;
	border:none;
	box-shadow:none;
	width: 53%
}

@media screen and (max-width:767px) {
	/*スマホサイズ*/
	.btnGreen,
	.btnRed {
	width: 90%;
	padding:20px;
	}
	
	.btnGreen:hover,
	.btnRed:hover{
	width: 86%;
	}
	.btnGreen span.fs08:hover
	{
		font-size: 1.2rem!important;
	}
}

/*-------------------------
方眼紙模様
-------------------------*/

article.bg_note{
	margin-bottom:0px;
	padding: 60px 0px;
}

article.bg_note .bordder-LR{
	border-right:solid 1px #dae3f3;
	border-left:solid 1px #dae3f3;
	padding:0 20px
}



article.bg_note div.row
{
	margin-bottom:0;
}


@media screen and (max-width:767px) {
/*スマホサイズ*/
	article.bg_note{
	padding: 20px;
	}
	article.bg_note .bordder-LR{
	padding: 20px 0;
	border-top: solid 1px #dae3f3;
	border-bottom: solid 1px #dae3f3;
	border-right: none;
	border-left: none;
	}
}


article.bg_note div.row
{
	margin-bottom:0;
}


p.note
{
	font-weight:800;
	color: #5776cd;
	font-size: 1.5rem;
	line-height: 1.2;
	display: flex;
	align-items: center;
	text-align: left;
	margin-bottom: 30px;
}


@media screen and (max-width:767px) {
/*スマホサイズ*/
	p.note
	{
	margin-bottom: 20px;
	}
}


p.note img
{
	width: 30%;
	height: auto;
	padding-right: 10px;
	margin-left: 0px!important;
}

@media screen and (max-width:767px) {
/*スマホサイズ*/
	p.note
	{
	font-size: 1.6rem;
	/* padding-top:20px; */
	}
	
	p.note img
	{
	width: 18%;
	height: auto;
	margin-right: 0;
	}
}

.bg_note ul li
{
	padding-bottom:10px;
	line-height:1.4;
	color:#6080b8;
}

.bg_note ul li:last-child
{
	padding-bottom:0px;	
}



/*-------------------------
pc表示、スマホ表示
-------------------------*/

.pcNone {
	display:none !important;
}
.smNone {
	display:block !important;
}


@media screen and (max-width:767px) {
	.smNone {
		display:none !important;
	}
	.pcNone {
	display:block !important;
	}
}


#wrapper .keyimg img {
	display:inline;

}

.bg_blue
{
	background:#dae3f3;
	padding: 40px;
	
}
@media screen and (max-width:767px) {
	/*スマホサイズ*/
	.bg_blue
	{
	padding: 30px 20px;
	}
}

.bg_blue h2
{
	font-weight: bold;
	text-align: center;
}
.bg_blue h2:after
{
	background-color: transparent;
}

.bg_blue p
{
	font-size:1.4rem;
	text-align: center;
	line-height: 1.6;
}

@media screen and (max-width:767px) {
	/*スマホサイズ*/
	.bg_blue p
	{
		font-size:1.3rem;
	}
}


/*-------------------------
手順
-------------------------*/
h3.ttl_step
{
	color:#5776cd;
	font-weight:bold;
	border-left:none;
	padding-left:0px;
	text-align: center;
	margin-bottom: 10px;
}

@media screen and (max-width:767px) {
/*スマホサイズ*/
	h3.ttl_step
	{
	text-align:center;
	}
}

dl.step_box
{
	background: #5776cd;
	border-radius:10px;
	padding:20px;
	color:#fff;
}

dl.step_box dt
{
	font-weight:bold;
	font-size: 1.6rem;
	margin: 20px 0;
	line-height: 1.3;
	text-align:center;
}

dl.step_box dd
{
	text-align:left;
}

@media screen and (max-width:767px) {
/*スマホサイズ*/
	dl.step_box dd
	{
	/* font-size:1.2rem; */
	line-height:1.6;
	}
}
	
dl.step_box dd img
{
	width:60%;
	margin:auto;
}


@media screen and (max-width:767px) {
/*スマホサイズ*/
	dl.step_box dt
	{
	font-size: 1.6rem;
	}
	dl.step_box dd img
	{
		width:40%;
	}
}

/* grid使わない1個だけの場合 */
.single_container
{
	margin-bottom: 60px;
}

dl.single
{
	width:31.91489361702128%;
	margin: auto;
	margin-bottom: 30px;
}

@media screen and (max-width:767px) {
/*スマホサイズ*/
	.single_container
	{
	margin-bottom: 30px!important;
	}
	dl.single
	{
	width:100%;
	}
}

.step_container {
	position:relative;
	/* display: flex; */
	justify-content: center;
	border: solid 5px #889fd1;
	padding: 15px 40px;
	border-radius: 10px;
	background: #ecf0f9;
}

.step_container:before {
	position: absolute;
	content: '';
	top: -30px;
	left:-35px;
	content: '';/*何も入れない*/
	display: inline-block;
	width: 80px;/*画像の幅*/
	height: 80px;/*画像の高さ*/
	background-image: url(/statics/mypage/images/index/more.png);
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
}

@media screen and (max-width:767px) {
/*スマホサイズ*/

.step_container:before {
	position: absolute;
	content: '';
	top: -32px;
	left:-20px;
	content: '';/*何も入れない*/
	display: inline-block;
	width: 55px;/*画像の幅*/
	height: 55px;/*画像の高さ*/
	background-image: url(/statics/mypage/images/index/more.png);
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
	}
}


/*コンテナにつける矢印*/

.container_arrow:after
	{
	content: "";
	position: absolute;
	top: -28px;
	left: 15%;
	transform: translateX(-50%);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 25px solid #889fd1; /* 矢印の色 */
	width: 0;
	height: 0;
	}


@media screen and (max-width:767px) {
/*スマホサイズ*/
.container_arrow:after
	{
	content: "";
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 20px solid #889fd1; /* 矢印の色 */
	width: 0;
	height: 0;
	}
}
	
ul.step {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.step li{
	font-size:1.2rem;
	margin-bottom:10px;
	color:#04339c;
	display:flex;
	align-items: center;
	text-align: left;
	padding-left: 20px;
}
@media screen and (max-width:767px) {
/*スマホサイズ*/
	ul.step li{
	padding-left: 0px;
	}
}

ul.step li:last-child {
	margin-bottom:0;
}

ul.step li img
{
	width: 8%;
	height: auto;
	margin-left: 0px!important;
}



@media screen and (max-width:767px) {
/*スマホサイズ*/
	.step_container {
	padding: 20px 10px;
	font-size:1.0rem;
	margin-bottom:40px!important;
	}
	ul.step li{
	font-size:1.0rem;
	}
	
	ul.step li img
	{
		width: 20%;
		height: auto;
		padding-right: 10px;
		margin-left: 0px!important;
	}
}


.tLink-b {
	display:block;
	padding-left:20px;
	word-wrap: break-word;
	background:url("/statics/mypage/images/index/arrow_b.png") no-repeat left 0.35em;
	color:#fff;
	text-decoration:underline;
}

.tLink-b:hover {
	text-decoration:none;
}


/*-------------------------
下向き矢印
-------------------------*/
.arrow_container {
	display: flex;
	justify-content: center; /* 要素を中央に配置 */
	align-items: center; /* 要素を中央に配置 */
}


.down_arrow {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 40px solid #889fd1;
	}


@media screen and (max-width:767px) {
/*スマホサイズ*/
	.arrow_container
	{
	margin-bottom: 30px!important;
	}
	.down-arrow {
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 30px solid black;
	}
}

/*-------------------------
ボタン上書き
-------------------------*/

.btnLink a
{
	color:#fff;
}



.btnLink a:hover
{
	text-decoration:none;
}

/*-------------------------
余談
-------------------------*/
.Aside
{
	padding:30px;
	background:#f2f2f2;
	border-radius:10px;
}
.Aside h3
{
	font-size:1.2rem;
	font-weight:600;
	border-left: 8px solid #5675cc;
	color:#5675cc;
}

.Aside a
{
	color:#5675cc;
}



/*-------------------------
会員登録の流れ
-------------------------*/
.flow_content
{
	padding-top:60px;
}
.flow_content p.fs12
{
	line-height:1.6;
}

.flow_content h2.flow_ttl
{
	position:relative;
	border:none;
	text-align:center;
	background: #5776cd;
	padding:20px;
	color:#fff;
	border-radius:100px;
	margin: 0px auto 60px auto;
	width: 80%;
}
.flow_content h2.flow_ttl:after {
	position:absolute;
	bottom:-30px;
	left:45%;
	background:transparent;
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 35px solid #5776cd;
}



.flow_content a.underLine {
	color: #3c9ae8;
	text-decoration: underline !important;
}

.flow_content h3.flow_ttl
{
	font-weight:800;
	text-align:center;
	color:#5776cd;
	border-left:transparent;
	margin-bottom:30px;
}

@media screen and (max-width:767px) {
/*スマホサイズ*/
	.flow_content h3.flow_ttl
	{
	font-size:1.4rem;
	margin-bottom:10px;
	}
}

.flow_content .tLink-a {
	background:url("/statics/mypage/images/index/arrow_a.png") no-repeat left 0.35em;
}


.step_container .tLink-a
{
	margin-left: 13px;
	font-size: 1.0rem;
	text-align:left;
	margin:10px 0 0 35px;
	vertical-align:middle;
	color: #5675cc;
	background:url("/statics/mypage/images/index/arrow_a.png") no-repeat left 0.35em;
}

@media screen and (max-width:767px) {
/*スマホサイズ*/
	.step_container .tLink-a
	{
	margin-left: 13px;
	font-size: 1.0rem;
	text-align:left;
	}
}
/*--------------------------------
その他、マイページの便利な機能
--------------------------------*/
ul.check {
    margin-top: 20px;
}
ul.check li {
    position: relative;
    padding-left: 30px; /* アイコンのためのスペースを確保 */
    padding-bottom: 10px;
}

ul.check li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 24px; /* アイコンの幅 */
    height: 36px; /* アイコンの高さ */
    background-image: url(/statics/mypage/images/index/ic_check_mini.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/* スマホ用のスタイル */
@media (max-width: 768px) {
    ul.check li {
        padding-left: 30px; /* アイコンのためのスペースを確保 */
    }

    ul.check li:before {
        position: absolute;
        top: 0;
        left: 0;
        margin-right: 10px; /* アイコンとテキストの間の余白 */
        width: 24px; /* アイコンの幅 */
        height: 24px; /* アイコンの高さ */
    }

    ul.check li a {
        display: inline; /* リンクをインライン要素に設定 */
        white-space: nowrap; /* リンク内で改行をしない */
    }
}

.gif-image {
    pointer-events: none; /* マウスイベントを無視 */
}
.gif-link {
    display: inline-block;
}