@charset "utf-8";

/* ============================================================
default
============================================================ */

.disnone {
	display:none;
}
article{
	background: #000;
}
#wester,#note{
	background: #FFF;	
}
section#sec_0,section#sec_2 {
    line-height: 0;
}

@media screen and (max-width: 759.9px) {
	#wrapper {
		line-height: 1.4;
	}
	.spnone {
		display: none;
	}
	#dirPathBlock,
	#anchorLinkBlock {
		font-size: 10px;
		margin: 1% 1% 0 1%;
	}
	#dirPathBlock p,
	#anchorLinkBlock a {
		font-size: 12px;
	}
	h1 {
		font-size: 12px;
		margin: 0 1%;
	}
	.inner {
		width: 96%;
		margin: 0 2%;
		padding: 24px 0;
		box-sizing: border-box;
	}
}/* end @media */

@media screen and (min-width: 760px),print {
	#wrapper {
		line-height: 1.231;
	}
	#dirPathBlock,
	h1,
	.iframe_end-content_gadget,
	#anchorLinkBlock {
		width: 100%;
		max-width:970px;
		min-width:760px;
		margin: auto;
	}
	#dirPathBlock,
	#anchorLinkBlock {
		width: 100%;
		margin: 0 auto;
		display: block;
		font-size: 12px;
	}
	#dirPathBlock p,
	#anchorLinkBlock a {
		font-size: 12px;
	}
	h1 {
		font-size: 14px;
		width: auto;
		max-width: 970px;
		margin: 0 auto 5px;
	}
	.inner {
		width: 96%;
		max-width:970px;
		margin: 0 auto;
		padding:50px 0;
		display: block;
	}
	u {
		text-decoration-color: red;
	}
}/* end @media */

/* ============================================================
common
============================================================ */

article section {
	margin: 0;
	padding: 0;
	font-weight: bold;
}
article section * {
	box-sizing: border-box;
}
article section div.inner {
	margin: 0 auto;
	padding: 0;
}
article section div.inner * {
	font-feature-settings: 'palt';
	letter-spacing: 0;
}

article section {
	color: #232d23;
}
article section strong {
	color: #be1432;
}

article section img {
	max-width: 100%;
}

/* ============================================================
PC
============================================================ */

@media screen and (min-width: 760px),print {

/* common
-------------------------------------------------------------*/

article section {
	line-height: 1.7;
	font-size: 25px;
}
article section .sp {
	display: none !important;
}

article section a {
	transition: opacity .2s ease-in;
}
article section a:hover {
	opacity: 0.6;
}

.pcnone {
		display: none !important;
}



/* sec_0
-----------------------------------------------------------*/

#sec_0  {
    position: relative;
    width: 100%;
    height:auto;
    overflow: hidden;
}

.title_bgimage  {
    width: 2500px;
    height: 525px;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin: auto;
}

.title_image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 970px;
    height: 525px;
	min-width: 970px;
}

/* sec_1
-------------------------------------------------------------*/

#sec_1{
    background-color: #000;
    padding: 50px 0 60px;
}

#sec_1 .p1 {
    font-size: 25px;
	color: #c4c194;
	letter-spacing: 0.5em;
	padding: 0 0 10px;
    text-align: center;
}

#sec_1 img{
	width: 100%;
	margin: 0 auto;
}


/* sec_2
-------------------------------------------------------------*/

#sec_2 {
	background: url(../images/bg.png) no-repeat;
    background-size: cover;
	padding: 80px 0;
}

#sec_2 h3 {
    width: 95%;
    max-width: 1200px;
    margin: auto;
}

/* sec_3
-------------------------------------------------------------*/

#sec_3 {
	background-color: #173625;
    position: relative;
	width: 100%;
	overflow: hidden;
}	

.rlarea {
    width: 100%;
	text-align: center;
	max-width: 850px;
    margin: auto;
}

h4 {
    text-align: center;
    font-size: 40px;
    color: #c3c093;
    font-weight: bold;
    margin: 20px auto 10px;
}
#sec_3 .inner {
    padding: 30px 0;
}



/* sec_4
-------------------------------------------------------------*/
#sec_4 {
    background: url(../images/bg2.png) no-repeat, linear-gradient(to bottom, #0b2f1c, #062214);
    position: relative;
	width: 100%;
	padding:100px 0;
	overflow: hidden;
	background-size: cover;
}	
#sec_4 h3{
    margin: auto;
    text-align: center;
    padding: 0 0 30px 0;
    max-width: 850px;
}

/* hp_btn
-------------------------------------------------------------*/
        #hp_btn {
            background: url(../images/bg_hp.jpg) no-repeat;
            background-size: cover;
            width: 100%;
            padding:100px 0;			
        }

        #hp_btn a {
            text-decoration: none;
			margin: auto;
        }

        #hp_btn a img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: text-shadow 0.3s ease;
			margin: auto;
        }

        #hp_btn a:hover img {
            text-shadow: none;
        }
	

/* sec_5
-------------------------------------------------------------*/

#sec_5 {
	background-color: #173625;
    position: relative;
	width: 100%;
	overflow: hidden;
}	

#sec_5 .inner {
    padding: 30px 0;
}

#sec_5 p{
    margin: 80px auto;
    width: 400px;
}

	
/* wester
-------------------------------------------------------------*/
#wester{
	margin: auto;
	text-align: center;
	padding: 60px 0;
	align-items: center;
}

#wester .ltxt{
    font-size: 30px;
    font-weight: 900;
    padding: 30px 0;
}


#wester .mtxt{
    font-size: 25px;
    font-weight: 900;
	line-height: 1.3;
    padding: 37px 0;
}

#wester strong{
	color: #BE1432;
}

.wc_link img {
    width: 100%;
    height: 67px;
	padding: 0 20px;
}

.westerappli{
	display: flex;
	justify-content: space-evenly;
}

#wester .logo_wester{
	width: 215px;
	height: 215px;
	flex-shrink: 0;
}

.wc_link{
	display: flex;
}

.westersmall{
    font-size: 18px;
    font-weight: 400;
    padding: 25px;
    line-height: 1.5;	
}



/* sec_6
-------------------------------------------------------------*/
#sec_6 h3 {
    padding: 80px 0 30px;
}

#sec_6 {
    background: url(../images/bg.png) no-repeat, linear-gradient(to bottom, #000f08, #0c321e);
    background-position: top;
    text-align: center;
    background-size: contain;
    width: 100%;
    position: relative;
	overflow: hidden;	
}

.step{
	background: #1A3B29;
	font-size: 25px;
	color: #FFF;
	padding: 30px 0 20px;
    margin: 0 auto 50px;
}

.step_title{
    display: flex;
    text-align: left;
    padding: 0 30px 30px 0;
    line-height: 1.5;
	align-items: center;
}


.step_title img{
	padding: 0 30px 0 0;
}

.step_title strong{color: #CDCA9D;
}


.rlarea {
    width: 100%;
	text-align: center;
    margin: auto;
}

	
	
		
/* step1*/
.step_link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
	margin: 0 0 20px 0;
}

#sec_6 .logo_wester{
    width: 175px;
    height: 175px;
    flex-shrink: 0;
    margin: 0 15px 0 0;
}

#sec_6 a img{
    width: auto;
    height: 55px;
}


/* step2*/
.step_list_3 {
    width: 90%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: auto;
}

.step_list_child3 {
    position: relative;
    width: calc(33.33% - 10px);
    box-sizing: border-box;
    margin-right: 10px;
    padding: 0 0 20px 0;
}

.triangle {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #c3c093;
}

.step_list_3 img {
    width: 215px;
    height: 380px;
    display: block;
    margin: 0 auto;
}

.step_li_txt {
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-top: 10px;
    font-weight: normal;
    line-height: 1.5;	
}

.step_list_child:last-child .triangle {
    display: none;
}

/* step3*/
img.st03_main {
    padding: 0 80px;
}
	
/* step4*/	
.step4{
	background: #1A3B29;
	font-size: 25px;
	color: #FFF;
    padding: 30px 0 20px;
    margin: 100px auto 0;
}	
	
.step_list_4 {
    width: 91%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: auto;
}

.step_list_child4 {
    position: relative;
    width: calc(20% - 0px);
    box-sizing: border-box;
    margin: 0 20px;
    padding: 0 0 20px 0;
}
.step4_titleimg {
    position: relative;
    bottom: 80px;
    margin: 0 auto -80px;
    width: 80%;	
}	
	
.step4_title{
	margin: auto;
    text-align: center;
	padding: 0 0 15px;
}
	
.step4_title strong {
    color: #CDCA9D;
}
	
.triangle4 {
    position: absolute;
    top: 35%;
    right: -28px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #c3c093;
}
	
.step_li4_txt{
	font-size: 16px;
    color: #fff;
    text-align: center;
    font-weight: normal;
    line-height: 1.5;
	height: 90px;
}
	
	.step_li4_txt span{
		color: #cdca9d;
	}	

	.coution{
		text-align: center;
		color: #fff;
		font-size: 20px;
		margin: 50px auto;
	}
	
	
/*sec_lst 
-------------------------------------------------------------*/

article section.sec_lst {
	background: #fff;
	background-size: 100% auto;
}

article section.sec_lst div.inner {
	padding: 100px 0 90px;
	font-size: 16px;
}
article section.sec_lst div.inner p.t1 {
	line-height: 1.2;
	text-align: center;
	font-size: 17px;
}
article section.sec_lst div.inner h5 {
	margin: 0 0 30px;
	padding: 0;
	font-size: 24px;
	background: none;
    text-align: center;
}
article section.sec_lst div.inner h6 {
	font-size: 19px;
	font-weight: bold;
}

article section.sec_lst div.inner ul {
	margin: 0 0 40px;
}
article section.sec_lst div.inner li {
	position: relative;
    margin-bottom: 5px;
	padding-left: 1.2em;
	line-height: 1.4;
	font-size: 16px;
	font-weight: normal;
}
article section.sec_lst div.inner li::before {
	content: '';
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	background: #1a3b29;
}
} /* end @media */

@media screen and (min-width: 1300px) {
#sec_3 .rlarea {
    position: relative;
}


#sec_3 .rlarea::before,#sec_3 .rlarea::after {
    content: "";
    position: absolute;
    top: 45px;
    width: 345px;
    height: 540px;
    background-size: cover;
    bottom: 0px;
    }

#sec_3 .rlarea::before {
    left: -400px;
    background-image: url(../images/sec03_pl.png); 
        }	
	
#sec_3 .rlarea::after {
    right: -400px;
    background-image: url(../images/sec03_pr.png); 
        }

#sec_4 .rlarea {
    position: relative;
}

#sec_4 .rlarea::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 585px;
    background-size: cover;
	bottom: -100px;
}
	
#sec_4 .rlarea::after {
    right: -400px;
    background-image: url(../images/sec04_pr.png); 
}
	
#sec_5 .rlarea {
    position: relative;
}


#sec_5 .rlarea::before{
    content: "";
    position: absolute;
    top: -120px;
    width: 380px;
    height: 574px;
    background-size: cover;
	bottom: 0;
}

#sec_5 .rlarea::before {
    left: -400px;
    background-image: url(../images/sec05_pl.png); 	
}	

#sec_6 .rlarea {
    position: relative;
}


#sec_6 .rlarea::before,#sec_6 .rlarea::after {
    content: "";
    position: absolute;
    bottom: -50px;
    width: 600px;
    height: 625px;
    background-size: cover;
    }

#sec_6 .rlarea::before {
    left: -575px;
    background-image: url(../images/sec06_pl.png); 
        }	
	
#sec_6 .rlarea::after {
    right: -600px;
    background-image: url(../images/sec06_pr.png); 
        }
}/* end @media */


/* ============================================================
SP
============================================================ */

@media screen and (max-width: 759.9px) {

/* common
-------------------------------------------------------------*/

article section {
	line-height: 1.5;
	font-size: 18px;
}
article section .pc {
	display: none !important;
}
	


/* sec_0
-------------------------------------------------------------*/

/* sec_1
-------------------------------------------------------------*/

#sec_1{
    background-color: #000;
    padding: 50px 0 60px;
}

#sec_1 .p1 {
    font-size: 25px;
	color: #c4c194;
	letter-spacing: 0.5em;
	padding: 0 0 10px;
    text-align: center;
}

#sec_1 img{
	width: 100%;
	margin: 0 auto;
}


/* sec_2
-------------------------------------------------------------*/

#sec_2 {
	background: url(../images/bg.png) no-repeat;
    background-size: cover;
	padding: 30px 0;	
}

#sec_2 h3 {
    width: 95%;
    max-width: 1200px;
    margin: auto;
}	
/* sec_3
-------------------------------------------------------------*/
#sec_3 {
	background-color: #173625;
    position: relative;
	width: 100%;
	overflow: hidden;
}	

.rlarea {
    width: 100%;
	text-align: center;
	max-width: 850px;
    margin: auto;
}

h4 {
    text-align: center;
    font-size: 2rem;
    color: #c3c093;
    font-weight: bold;
    margin: 50px auto 25px;
}
#sec_3 .inner {
    padding: 30px 0;
}		
#sec_3{	
	padding: 10px 0 50px;	
}
#sec_3 .rlarea {
    width: 93%;
}
	
/* sec_4
-------------------------------------------------------------*/	
#sec_4 h3{
    margin: 0 auto 30px;
    text-align: center;
    padding: 0 0 30px 0;
    max-width: 850px;
}
	
section#sec_4 {
	background: url(../images/bg.png) no-repeat;
    background-size: cover;
    padding: 70px 0;
    margin: auto;
}		
	
#sec_4 .rlarea {
    width: 93%;
}
	
	
/* hp_btn
-------------------------------------------------------------*/
        #hp_btn {
            background: url(../images/bg_hp.jpg) no-repeat;
            background-size: cover;
            width: 100%;
            padding:50px 0;			
        }

        #hp_btn a {
            text-decoration: none;
			margin: auto;
        }

        #hp_btn a img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: text-shadow 0.3s ease;
			margin: auto;
			padding: 20px;
        }

        #hp_btn a:hover img {
            text-shadow: none;
        }
		
	
/* sec_5
-------------------------------------------------------------*/
#sec_5 {
	background-color: #173625;
	width: 100%;
    padding: 10px 0 50px;
}	
	
#sec_5 .inner {
    padding: 0;
}
	
#sec_5 .rlarea {
    width: 93%;
}
#sec_5 p {
    margin: 50px auto 10px;
    width: 93%;
}	

/* wester
-------------------------------------------------------------*/
p.ltxt {
    font-size: 1.5rem;
    text-align: center;
    padding: 80px 0 20px;
    width: 93%;	
	margin: auto;
}

.westerappli {
    text-align: center;
    font-size: 1.25rem;
    width: 93%;
	margin: auto;
}
	
p.mtxt {
    padding: 15px;
}

.wc_link img {
    width: 100%;
    height: auto;
	padding: 0 10px;
}


#wester .logo_wester{
	width: 215px;
	height: 215px;
	flex-shrink: 0;
}

.wc_link{
	display: flex;
}

.westersmall{
    font-size: 0.8rem;
    font-weight: 400;
    padding: 10px 20px 60px;
}
	
/* sec_6
-------------------------------------------------------------*/	
#sec_6 h3 {
    padding: 30px 0 20px;
}

#sec_6 {
    background: url(../images/bg.png) no-repeat, linear-gradient(to bottom, #000f08, #0c321e);
    background-position: top;
    text-align: center;
    background-size: contain;
    width: 100%;
    position: relative;
	overflow: hidden;	
}
	
#sec_6 	.inner {
   width: 100%;
}

.step{
	background: #1A3B29;
	font-size: 25px;
	color: #FFF;
    margin: 0 auto 50px;
	padding: 50px 0;
}

.step_title{
    text-align: left;
    padding: 0 0 30px 0;
    line-height: 1.5;
}


.step_title img{
	padding: 0 20px 0 0;
	width: 120px;
}

.step_title strong{
	color: #CDCA9D;
}


.rlarea {
	text-align: center;
    margin: auto;
}

	
/* step1*/
#sec_6 p.title {
    margin: auto;
    font-size: 1.25rem;
}
	
.step_title{
    display: flex;
    text-align: left;
    line-height: 1.3;
    align-items: flex-start;
    padding: 0 20px 50px 0;
}	
.step_link {
    width: 93%;
    margin: auto;
}

#sec_6 .logo_wester{
    width: 200px;
    height: 200px;
    margin: 20px 50px 20px;
}
	
.AppStore{
    width: 353px;
    height: 124px;
}	
.GooglePlay	{
    width: 430px;
    height: 124px;
}


/* step2*/
.step_list_3 {
    margin: auto;
}

.step_list_child3 {
    margin: 0 auto 35px;
    width: 93%;
}
.triangle {
    width: 0;
    height: 0;
    border-top: 24px solid #c3c093;
    border-bottom: 24px solid transparent;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    margin: auto;	
}

.step_list_3 img {
    width: 65%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.step_li_txt {
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    margin: 15px;
    font-weight: normal;
    line-height: 1.5;
}



.step_list_child:last-child .triangle {
    display: none;
}

/* step3*/
img.st03_main {
    width: 93%;
}
	
/* step4*/	
.step4{
	background: #1A3B29;
	font-size: 1.5rem;
	color: #FFF;
    padding: 30px 0 20px;
    margin: 0 auto;
}	
	
.step_list_4 {
    width: 93%;
    margin: auto;
}

.step_list_child4 {
    margin: 0 20px;
}
.step4_titleimg {
    margin: 0 auto;
    width: 100%;
}	
	
.step4_title{
	margin: auto;
    text-align: center;
	padding: 20px 0;
}
	
.step4_title strong {
    color: #CDCA9D;
}
	
.triangle4 {
    width: 0;
    height: 0;
    border-top: 24px solid #c3c093;
    border-bottom: 24px solid transparent;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    margin: auto;	
}
	
.step_li4_txt{
	font-size: 1.2rem;
    color: #fff;
    text-align: center;
    font-weight: normal;
    line-height: 1.5;
	height: 90px;
}
	
.step_li4_txt span{
		color: #cdca9d;
}	

.coution{
		text-align: center;
		color: #fff;
		font-size: 1.4rem;
		margin: 50px auto;
		padding: 0 20px;
}
	
	
/* sec_lst
-------------------------------------------------------------*/

article section.sec_lst {
	background: #fff;
	background-size: 100% auto;
}

article section.sec_lst div.inner {
	padding: 100px 6vw 90px;
	font-size: 14px;
}
article section.sec_lst div.inner p.t1 {
	line-height: 1.2;
	text-align: center;
	font-size: 15px;
}
article section.sec_lst div.inner h5 {
	margin: 0 0 30px;
	padding: 0;
	font-size: 20px;
	background: none;
    text-align: center;
}
article section.sec_lst div.inner h6 {
	font-size: 16px;
	font-weight: bold;
}

article section.sec_lst div.inner ul {
	margin: 0 0 20px;
}
article section.sec_lst div.inner li {
	position: relative;
    margin-bottom: 5px;
	padding-left: 1.2em;
	line-height: 1.4;
	font-size: 14px;
	font-weight: normal;
	word-break: break-word;
}
article section.sec_lst div.inner li::before {
	content: '';
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	background: #1a3b29;
}
} /* end @media */