@charset "shift-JIS";
/* --------------------------------------------
 0.common
 	-1.colr
	-2.text
	-3.img
	-4.btn
	-5.position
	-6.margin&padding
 1.header
 2.main
 3.footer
 4.discramer
 5.swiper
----------------------------------------------- */

/* --------------------------------------------
0.common
----------------------------------------------- */
/* 1.color */
:root {
	--main-color:#ba1532;
	--accent-color:#333;
	--text-bright-color:#fff;
	--large-width:1200px;
}

.bg_1 {background-color: #fff;}
.bg_2 {background-color: #eee;}

/* 2.text */
section h2,section h3,section p { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-size: 2.4rem; /* font-weight: 600; */ }
section p {font-size: 1.8rem;}

a {color: #ba1532;}
.txtC { text-align: center;}
.txtR { text-align: right;}
.txtL { text-align: left;}
.txtB { font-weight: bold;}
.txt-S {font-size: 0.8rem; line-height: 1.2;}
.txt-M {font-size: 1.2rem; line-height: 1.5;}
.txt-L {font-size: 1.5rem; line-height: 1.3;}
.txt-XL { font-size: 2.3rem; font-weight: 900; line-height: 1.2; }

/* 3.img */
.container img { width: 100%; max-width: 100%; height: auto;}
.img-pc{display: none;}
.img-sp{display: block;}

@media (min-width:768px) {
	.img-pc{display: block;}
	.img-sp{display: none;}
}

/* 4.btn */
#page_top a {
	position: fixed;
    display: block;
    width: 50px;
    height: 50px;
	right: 20px;
	bottom: 20px;
	z-index: 10;
}

a.btn-entry {
	display: block;
    position: relative;
    padding: 1.2em;
    /* max-width: 80%; */
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: 0.5s;
    margin: 0 auto;
    border-radius: 40px;
    border: 3px solid currentColor;
    color: #ba1532;
    background-color: white;
}
a.btn-entry::after {
    position: absolute;
    top: 50%;
    right: 1em;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}
a.btn-entry:hover {
    border: 3px solid #0078FF;
    background-color: #0078FF;
    color: #fff;
}
.btn-todemo {
	max-width: 250px;
	margin: 2em auto!important;
	border: 3px solid currentColor;
	color: #ba1532;
	background-color: white;
}

@media (min-width:768px) {
	.btn-todemo {
		max-width: 400px;
	}
}


/* 5.position */
.pstn-rl { position: relative; }
.poab{position:absolute;}

/* 6.margin&padding */
.pdg-t-05 {padding-top: 0.5em;}
.pdg-l_5 { padding-left: 5px;}
.pdg-b-0 {padding-bottom: 0;}

.mgn-t-10 { margin-top: 10px;}
.mgn-t-20 { margin-top: 20px;}
.mgn-t-30 { margin-top: 30px;}
.mgn-t-40 { margin-top: 40px;}
.mgn-t-50 { margin-top: 50px;}
.mgn-t-60 { margin-top: 60px;}
.mgn-t-70 { margin-top: 70px;}
.mgn-t-80 { margin-top: 80px;}
.mgn-t-90 { margin-top: 90px;}
.mgn-t-100 { margin-top: 100px;}
.mgn-t-110 { margin-top: 110px;}

.mgn-b-10 { margin-bottom: 10px; }
.mgn-b-20 { margin-bottom: 20px; }
.mgn-b-30 { margin-bottom: 30px; }
.mgn-b-40 { margin-bottom: 40px; }
.mgn-b-50 { margin-bottom: 50px; }
.mgn-b-60 { margin-bottom: 60px; }
.mgn-b-70 { margin-bottom: 70px; }
.mgn-b-80 { margin-bottom: 80px; }
.mgn-b-90 { margin-bottom: 90px; }
.mgn-b-100 { margin-bottom: 100px; }

/* --------------------------------------------
	1.header
----------------------------------------------- */
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	background: rgba(255,255,255,0.9);
}

header h1 { max-width: 188px; margin: 0;}

.head-nav a { background-color: rgba(0,0,0,0.8); }

@media (max-width:767px) {
	.head-nav {
		display: none;
	}
}
@media (min-width:768px) {
   header .container {
	   display: flex;
	   display:-webkit-box;
	   display:-ms-flexbox;
	   align-items: center;
	   justify-content: space-between;
	   max-width: 1200px;
	   max-width: var(--large-width);
	   margin: 0 auto;
   }
   .head-nav ul {
	   display: flex;
	   display:-webkit-box;
	   display:-ms-flexbox;
   }
}

/* --------------------------------------------
	2.main - common
----------------------------------------------- */
/* section */
.con-1,.con-2,.con-3,.con-4,.con-5,.con-6,.con-btn-demo { box-shadow: 0 -8px 10px -10px #b0b0b0; }

/* section > container */
.con-hero > .container { padding: 0.7em 2em 2em; }

/* column */
.clm-main {
	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* column box */
.img-ss {
	width: 65%;
    margin: 0 auto;
	margin-top: 2em;
}
.img-ss-caption { margin-top: 1em; }

.box_1 { order: 1;}
.box_2 {
	order: 2;
	height: 100%;/*IE—p*/
	position: relative;
}
.box_3 { order: 3;}

.box_3 { margin-top: 3em; }

/* title h2 */
h2 {
    font-size: 4.6rem;
    font-weight: 900;
    color: #1c1c1c;
	text-align: center;
	line-height: 1.2em;
	letter-spacing: -1px;
}
.txt-main p {
    font-size: 2.2rem;
    line-height: 1.6em;
    color: #5d5d5d;
}

@media (min-width:768px) {
	.con-hero > .container{ padding: 0; }
	.con-1 > .container,.con-2 > .container,.con-3 > .container,
	.con-4 > .container,.con-5 > .container
	{ padding: 8em 0; }
	
	 section div.container {
		max-width: 1200px;
		max-width: var(--large-width);
		margin: 0 auto;
		padding: 0;
	 }
	 .clm-main {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.box_1 { max-width: 53%; }
	.box_2 { margin-top: 2em; }
	h2 {
		font-size: 7rem;
		text-align: left;
		margin-bottom: 0.5em;
	}
	.con-1 .box_2,.con-2 .box_2,.con-3 .box_2,.con-4 .box_2 { width: 30%; }
	.img-ss {
		margin-top: 0;
		width: 100%;
	}
 }

/* title */
.main-copy {
	width: 80%;
	margin: 1em auto;
}
@media (min-width:768px) {
	.main-copy {
		width: 100%;
		margin: 1.5em 0 0;
	}
}

/* --------------------------------------------
	con-hero
----------------------------------------------- */
.con-hero {
	padding-top: 7em;
	position: relative;
}
.con-hero::after {
	content: "";
    display: block;
    background-color: #b80a29;
    height: 2.3em;
    width: 100%;
    z-index: 0;
	box-shadow: inset 0 -9px 12px -6px #6b0214;
}
.con-hero .clm-main {
	margin-top: 1em;
	justify-content: center;
	position: relative;
	align-items: flex-start;;
}

.con-hero__badge {
	display: flex;
	justify-content: space-around;
}

.con-hero .box_R {
	z-index: 10;
	width: 100%;
}
.sp-wrapper {
	position: relative;
	z-index: 1;
	margin-top: 0.7em;
}
.sp-wrapper div.new {
	position: absolute;
    bottom: 0;
    right: -28px;
    width: 32%;
}
.ttl-new {
	width: 62%;
    margin: 0 auto 1.5em;
}

@media (min-width:768px) {
	.con-hero {
		background-size: contain;
		background-position: left top;
    	background-repeat: no-repeat;
		padding-top: 8em;
	}
	.con-hero .box_R {
		width: 40%;
    	margin-left: 5%;
	}
	.con-hero .con-hero__badge {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		bottom: 25px;
    	position: absolute;
	}
	.con-hero__badge > div {
		padding:0 1em 0;

	}
	.con-hero .qrcode {
		width: 90px;
		height: 90px;
		margin: 0 auto;
	}
	.con-hero__badge img { display: inline; }
	.con-hero .container { background-position: -440px;; }
	.sp-wrapper { margin-top: 0; }
	.sp-wrapper div.new {
		top: -33px;
    	right: -68px;
    	width: 30%;
	}
	.ttl-new { width: 80%; margin:22px 0 1.8em 0; }
}
/* --------------------------------------------
	con-x common
----------------------------------------------- */
.con-1 .container,.con-2 .container,.con-3 .container,.con-4 .container,
.con-5 .container,.con-6 .container {
	padding: 4em 2em;
}
.box_2 img { margin: 0 auto;}

@media (min-width:768px) {
	.con-1 .container,.con-3 .container,.con-4 .container {
		padding: 4em 0;
	}
	.con-btn-demo .container { padding: 2em 0;}
	.con-1 .box_2,.con-3 .box_2 {margin-right: 2em;}
}

/* --------------------------------------------
	con-btn-demo
----------------------------------------------- */
.con-btn-demo {
	background-color: rgb(238, 238, 238);
}

/* --------------------------------------------
	con-2
----------------------------------------------- */
.con2__function { padding: 0!important; }
.con2__function p { line-height: 2em; }
.con-2 .container.clm-main { padding: 4em 2em 1em; }
p.ttl_function_1 {
    display: inline-block;
    border: 2px solid #777;
    border-radius: 21px;
    padding: 0.3em 1em 0.1em;
    margin-bottom: 1em;
}
.con-2 .container .inner {
	background-color: #fff;
	padding: 2em;
}

@media (min-width:768px) {
	.container .con2__function { padding: 1em 0 8em!important; }
	.con-2 .box_1 { order: 2; margin-left: 2em;}
	.con-2 .box_2 { order: 1;}
	.con-2 .container .inner {
		padding: 4em 4em 3em;
		margin: 0 auto;
	}
	.con-2 .box_2 {margin-left: 2em;}
	.con-2 .container .inner { font-size: 14px; }
}

/* --------------------------------------------
	con-3
----------------------------------------------- */
span.method {
	font-weight: bold;
	font-size: 1.8rem;
}
.img-ss-caption { line-height: 1.7; }
@media (min-width:768px) {
	.con-3 .box_2 { margin-left: 5%; }
}

/* --------------------------------------------
	con-5
----------------------------------------------- */
.con-5 .container { padding: 7em 2em 5em; }
.con-5 h3 {
    text-align: center;
	margin-top: 3em;
}
.con-5 .box_1,.con-5 .box_2 {
	text-align: center;
	width: 100%;
}
.con-5 .box_2 { margin-top: 4em; }
.con-5 img { margin: 0 auto; }
.con-5 .clm-main {
	justify-content: space-between;
	align-items: flex-start;
}

.con-5 div.face {
	width: 230px;
    /* height: 210.688px; */
    margin: 0 auto;
    display: flex;
}
.con-5 div.color {
	width: 300px;
	margin: 0 auto;
}

@media (min-width:768px) {
	.con-5 .container { padding: 7em 0 5em; }
	.con-5 .box_2 { margin-top: 0; }
	.con-5 .box_1,.con-5 .box_2 { max-width: 45%; }
	.con-5 div.face {
		padding: 56px 0;
	}
}

/* --------------------------------------------
	con-6
----------------------------------------------- */
.con-6 .clm-main { justify-content: center; }
.con-6 h2 {margin-bottom: 1em;}
.con-6 .box_2 {
    display: flex;
    display: flex;
    justify-content: space-between;
    justify-content: space-between;
    margin-top: 2em;
}

.con-6 .icon-appli {
	width: 90px;
	margin: 0 auto;
}

.btn-demo {
	max-width: 80%;
	margin-top: 1.3em!important;
}

.con-6 .ttl-step {font-size: 2.2rem;}
.con-6 .txt-step {margin-left: 3em;}
.num2,.num3 {margin-top: 2em;}

.num1::before { content: '1'; }
.num2::before { content: '2'; }
.num3::before { content: '3'; }

.textgroup p::before {
    display: inline-block;
    color: #fff;
	background-color: #ba1532;
    font-size: 20px;
    padding: 0.5em;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 17px;
    margin-right: 0.5em;
}
.con-6 .container li.textgroup {
	width: 100%;
}

.con-6 .container li:nth-child(1),.con-6 .container li:nth-child(2) {
	border-bottom: 1px solid #ddd;
	padding-bottom: 2em;
}

.con-6 .con-hero__badge {margin-top: 2em;}

.con-6 .qrcode {
    width: 90px;
    height: 90px;
    margin: 0 auto;
}

@media (min-width:768px) {
	.con-6 .box_1 { max-width: 54%; }

	.con-6 .box_2 {
		width: 37%;
		margin-left: 6%;
		padding-left: 3%;
		border-left: 1px solid #ddd;
	}
	.con-6 ul.dwnld-inner:nth-child(2) {
		margin-top: 0;
	}
	ul.box_2.clm-main {
		flex-direction: column;
	}
	.qrcode_demo {
		flex-direction: column;
		margin-top: 1em;
	}
	.con-6 .app-badge {
		margin: 0 auto;
		width: 80%;
	}
}


 /* --------------------------------------------
	3.footer
----------------------------------------------- */
.footer {
    margin: 0!important;
}

/* --------------------------------------------
	4.disclaimer
----------------------------------------------- */
.dsclmr {
	padding: 3em 1.5em;
    font-size: 13px;
    color: #f2e2e2;
}
.dsclmr a { color: #f2e2e2 ;}

/* --------------------------------------------
	5.swiper
----------------------------------------------- */
.all-swiper-container {
	position: relative;
}
.swiper-pagination {
    position: relative!important;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #b22941!important;
}
.swiper-pagination-bullet {
    margin: 0 0.2em;
}
.button-next::after {
    background: url(/img/smapho/btn_prev.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.con-1_btn-prev,.con-2_btn-prev,.con-3_btn-prev {
	left: 0!important;
	background: url(/img/smapho/btn_prev.svg)!important;
	background-size: contain!important;
}
.con-1_btn-next,.con-2_btn-next,.con-3_btn-next {
	right: 0!important;
	background: url(/img/smapho/btn_next.svg)!important;
	background-size: contain!important;
}

.swiper-button-next,.swiper-button-prev {
	top: 42%!important;
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: none!important;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: none!important;
}


@media (min-width:768px) {
	.con-hero > .container {
		max-width: 1200px;
		max-width: var(--large-width);
	}
	.sp-wrapper {
		display: flex;
		display:-webkit-box;
		display:-ms-flexbox;
		justify-content: center;
		margin: 0;
		width: 55%;
	}
	.con-1_btn-prev,.con-2_btn-prev,.con-3_btn-prev { left: -35px!important; right: auto; }
	.con-1_btn-next,.con-2_btn-next,.con-3_btn-next { right: -35px!important; left: auto; }
	.con2__function {
		max-width: 1200px;
    	max-width: var(--large-width);
		padding: 0;
		margin: auto;
	}
	.swiper-button-next,.swiper-button-prev {
		top: 40%!important;
	}
}