@charset "utf-8";

/*PCSP共通設定*/
html {scroll-behavior: smooth;}/*smooth scroll*/
main article {font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;}

/*759px以下*/
@media screen and (max-width: 759.9px) {
#wrapper {line-height: 1.4;}
.spnone{display:none;}

/* CSS */
#dirPathBlock,
#anchorLinkBlock {margin: 1% 1% 0 1%;}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h2 {
    width: 300px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background: #F6D325;
    margin: 0 auto 10%;
    padding: 15px;
    border-radius: 8px
}
h2 small {
    font-size: 0.7em;
    color: #D80F0F;
}
.inner{
	width: 96%;
	margin: 0 2%;
	padding: 25px 0;
	box-sizing: border-box
}

/*title*/
#app_download_title {
    margin-bottom: 5%;
    position: relative
}
#app_download_title img {
    width: 80%;
    margin: auto;
    display: block
}
#download_box hgroup {
    padding: 25px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    color: #20208C
}
#download_box hgroup h1 {font-weight: bold}
p.download{
	display: block;
    text-align: center;
    width: 46%;
    float: left;
    margin: 0 2%;
    padding-top: 10px;
	position:relative;
}
p.download a img{width:100%;}
p.download span{font-size:10px;}
#app_only {
    position: absolute;
    top: 50%;
    right: 15%;
    background: #C20000;
    width: 120px;
    height: 120px;
    display: block;
    text-align: center;
    color: #FFF;
    align-content: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50%;
    transform: rotate(8deg);
}
#app_only p:nth-of-type(1) {line-height: 0.8}
#app_only small {
    font-size: 0.65em;
    line-height: 1.4;
    margin-bottom: 5%;
    display: inline-block;
    font-weight: normal
}
/*@media screen and (min-width: 451px) {
    #download_box hgroup {padding: 25px 25px 150px 10px;}
    #app_only {
        position: absolute;
        top: 120px;
        right: 120px;
        width: 100px;
        height: 100px;
        font-size: 15px;
    }
}*/

/*txt*/
p.txt {
    font-size: 16px;
    line-height: 1.6
}
p.txt small {
    font-size: 0.75em;
    color:#D80F0F
}
hr {
    width: 100%;
    display: block;
    border-top: 1px solid #000;
    margin: 0 0 25px;
    border-style: dashed
}

/*step*/
#step li {margin-bottom: 10%}
#step li dt {
    width: fit-content;
    background: #20208C;
    color: #FFF;
    text-align: center;
    margin: 0 auto 5%;
    padding: 5px 15px;
    font-size: 18px;
    border-radius: 10px
}
#step li dd hgroup {
    text-align: center;
    align-content: center
}
#step li dd h3 {
    font-size: 16px;
    line-height: 1.5
}
#step li dd p {
    text-align: center;
    line-height: 1.2
}
#step li dd p small {
    display: inline-block;
    margin: 15px 0
}
#step li dd img {
    width: 50%;
    height: auto;
    margin: auto;
    display: block
}

}

/*760px以上*/
@media screen and (min-width: 760px),print {
#wrapper {line-height: 1.231}
.pcnone{display:none}

/* CSS */
#dirPathBlock,
.iframe_end-content_gadget,
#anchorLinkBlock{
	width: 100%;
	max-width:1080px;
	min-width:760px;
	margin: auto
}

/*panlist&back*/
#dirPathBlock,
#anchorLinkBlock {
	width: 100%;
	margin: 0 auto;
	display: block;
	font-size: 12px
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px}
h2 {
    width: 460px;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    background: #F6D325;
    margin: 0 auto 5%;
    padding: 15px;
    border-radius: 8px
}
h2 small {
    font-size: 0.6em;
    color: #D80F0F;
}
.inner{
	width: 100%;
	max-width:1080px;
	min-width:760px;
	margin: 0 auto;
	padding:50px 0;
	display: block
}

/*title*/
#app_download_title {
	width: 100%;
    height: 358px;
	margin: auto;
    background: url(/mobile/images/bk_appdouwload_1per.jpg) center top no-repeat;
    position: relative
}
#app_only {
    position: absolute;
    bottom: 0;
    right: -70px;
    background: #C20000;
    width: 150px;
    height: 150px;
    display: block;
    text-align: center;
    color: #FFF;
    align-content: center;
    font-size: 22px;
    font-weight: bold;
    border-radius: 50%;
    transform: rotate(8deg)
}
@media screen and (max-width: 999.9px) {
#app_download_title {background: url(/mobile/images/bk_appdouwload_1per.jpg) -550px top no-repeat}
#app_only {
    position: absolute;
    bottom: 0;
    right: 20px;
}
}

#download_box {
	width: 100%;
	max-width:850px;
	min-width:760px;
    height: 100%;
	margin: auto;
    color: #20208C;
    position: relative
}
#download_box p.download {position:relative}
#download_box hgroup {
    margin: 50px 46% 50px 0;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center
}
#download_box hgroup h1 {font-weight: bold}
#download_box p.download {
    margin: 0 1%;
    width: 218px;
    float: left;
    text-align: center
}
#download_box p.download a img {margin-bottom:15px}
p.download span {
    font-size: 13px;
    margin-top: 1%;
    display: block;
    text-align: center
}
#app_only p:nth-of-type(1) {line-height: 0.8}
#app_only small {
    font-size: 0.65em;
    line-height: 1.4;
    margin-bottom: 5%;
    display: inline-block;
    font-weight: normal
}

/*txt*/
p.txt {
    font-size: 20px;
    line-height: 1.8
}
p.txt small {
    font-size: 0.75em;
    color:#D80F0F
}
hr {
    width: 50%;
    display: block;
    border-top: 1px solid #000;
    margin: 0 0 25px;
    border-style: dashed
}

/*step*/
#step {
    display: flex;
    gap: 10%
}
#step li {width: calc(80% / 3)}
#step li dt {
    width: fit-content;
    background: #20208C;
    color: #FFF;
    text-align: center;
    margin: 0 auto 5%;
    padding: 10px 25px;
    font-size: 24px;
    border-radius: 10px
}
#step li dd hgroup {
    height: 150px;
    text-align: center;
    align-content: center
}
#step li dd h3 {
    font-size: 20px;
    line-height: 1.8
}
#step li dd p {
    text-align: center;
    line-height: 1.5
}
#step li dd p small {
    display: inline-block;
    margin: 15px 0
}
#step li dd img {
    width: 100%;
    height: auto
}

}