@charset "utf-8";

* {
	box-sizing: border-box;
}

@media screen and (min-width:768px) {
	
	.wrapper {
		max-width: 840px;
		margin: auto;    
	}
	.fastview, 
	.breadcrumbsPc,
	.contents,
	.globalFooter { 
		padding: 0 20px; 
	}

	/**********
	header
	***********/
	.fastview {
		border-bottom: 2px solid #D36985;
		padding: 15px 20px;
		max-width: 840px;
		position: relative; 
	}
	.logoWrap {
		display: flex;
		justify-content: space-between;
	}
	.logoSp {
		display: none;
	}
	.logoPc {
		width: 130px;
	}
	.logoPc > img {
		width: 100%;
	}
	.motto {
		color: #666666;
		font-size: 11px;
		font-weight: bold;
		margin: 5px 0 0 5px;
		width: 550px;
	}
	.headerTitle {
		color: #999999;
		font-size: 10px;
		font-weight: normal;
		text-align: right;
		width: 90px;
	}

	/******************
	breadcrumbs
	********************/
	.breadcrumbsPc {
		display: block;
		margin-top: 10px;
		max-width: 840px;
	}
	.breadcrumbsPc > ol {
		display: flex;
	}
	.breadcrumbsPc > ol > li {
		color: #665555;
		font-size: 10px;
		line-height: 18px;
	}
	.breadcrumbsPc > ol > li > a {
		color: #4C4C80;
		text-decoration: none;
	}
	.breadcrumbsPc > ol > li > a:hover {
		color: #7878CC;
		text-decoration: underline;	
	}

	/***********
	main
	************/
	.cItem {  
		margin-top: 30px;
		text-align: left;
		width: 100%;
	}
	.titleMain {
		color: #D36985;
		display: flex; 
		font-size: 16px;
		font-weight: bold;
	}
	.titleMain::before {
		background-color: #D36985;
		border-radius: 8px;
		content: "";
		display: block;
		margin-right: 6px;
		width: 5px;
	}
	.useLine,
	.textPc {
		color: #665555;
		font-size: 14px;
		line-height: 20px;
		margin-top: 20px;
	}
	.useLine,
	.useLineText {
		flex: 1;
	}
	.textSp,
	.useInnerSp {
		display: none;
	}
	.useInnerPc {
		margin-top: 20px;
		width: 100%;  
	}
	.useItem { 
		border: solid 1px #CCCCCC;
		border-radius: 8px;
		padding: 15px;
		position: relative;
	}
	.useItem:not(:first-child) {
		margin: 42px 0 0;
	}
	.useItem:not(:last-child)::after {
		background: url(../images/arrow.png) no-repeat;
		background-size: contain;
		content: "";
		display: block;
		height: 22px;
		left: 50%;
		position: absolute;
		top: calc(100% + 10px);
		transform: translateX(-50%);
		width: 22px;
	}
	.useTitle {
		color: #665555;
		font-weight: bold;
		font-size: 14px;
		line-height: 20px;
	}
	.useNumber {
		color: #D36985;
		font-size: 18px;
		padding-right: 6px;
	}
	.useLineCommon {
		display: flex;
		justify-content: space-between;
	}
	.useLineImg {
		margin: 20px 0 0 10px;
		width: 320px;
	}
	.useLineImg > img {
		vertical-align: bottom;
		width: 100%;
	}
	
	/*******
	faq
	********/
	.faq > dt {
		color: #665555;
		font-weight: bold;
		font-size: 14px;
		margin-top: 20px;
		padding-left: 1.5em;
		text-indent: -1.5em;
	}
	.faq > dd {
		border-bottom: 1px dashed #CCCCCC;
		color: #665555;
		font-size: 14px;
		line-height: 15px;
		margin-top: 15px;
		padding-bottom: 20px;
		padding-left: 1.8em;
	}
	.qLetter {
		color: #665555;
		font-weight: bold;
		font-size: 14px;
		line-height: 15px;
		margin-right: 4px; 
		position: relative;
	}

	/*************
	extra
	**************/
	.extraText {
		color: #665555;
		font-size: 14px;
		margin-top: 20px;
		padding-left: 1em;
		text-indent: -1em;
	}
	.extraText > li::before {
		content: "\203B";
	}
	.beforeFooter {
		color: #999999;
		font-size: 10px;
		text-align: right;
	}
	
	/*********
	footer
	**********/
	.gnavi,
	.breadcrumbsSp {
		display: none;
	}
	.globalFooter {
		border-top: 1px solid #DDDDDD;
		margin-top: 20px;
	}
	.footerLp {
		overflow: hidden;
		padding: 10px 0;   
	}
	.footerLinksLp {
		display: flex;
		float: right;
		font-size: 10px;
		top: 20px;
	}
	.footerLinksLp > li {
		margin-left: 5px;
		padding-right: 5px;
		white-space: nowrap;
	}
	.footerLinksLp > li:not(:last-child) {
		border-right: 1px solid #DDDDDD;
	}
	.footerLinksLp > li > a {
		color: #4C4C80;
		text-decoration: none;
	}
	.footerLinksLp > li > a:hover {
		color: #7878CC;
		text-decoration: underline;
	}
	.copyrightLp {
		float: left;
	}
	.recruitHolding,
	.recruitHolding > img {
		display: block;
		width: 264px;
	}
	.recruitGroups {
		color: #435B67;
		display: inline-block;
		font-size: 10px;
		font-weight: bold; 
	}
	.recruitHolding:hover,
	.recruitGroups:hover {
		color: #435B67;
		text-decoration: underline;
	}
}

/************
RESPONSIVE
************/

@media screen and (max-width:767px) {
	
	.wrapper {
		margin: auto;
	}
	.fastview,
	.contents {
		margin: auto;
		padding: 0 15px;
	}
	
	/************
	header
	************/
	.fastview {
		border-bottom: 1px solid #D36985;
		padding: 20px 15px;
		position: relative;
		width: 100%;
		box-shadow: none;
	}
	.logoWrap {
		display: flex;
		justify-content: space-between;
	}
	.logoPc {
		display: none;
	}
	.logoSp {
		width: 88px;
	}
	.logoSp > img {
		width: 88px;
		vertical-align: middle;
	}
	.motto {
		display: none;
	}
	.headerTitle {
		color: #999999;
		font-size: 10px;
		font-weight: normal;
	}

	/************
	main
	************/
	.breadcrumbsPc {
		display: none;
	}
	.cItem {
		margin-top: 30px;
		text-align: left;
	}
	.titleMain {
		color: #D36985;
		font-weight: bold;
		font-size: 13px;
		display: flex;
		line-height: 20px;
	}
	.titleMain::before {
		background-color: #D36985;
		border-radius: 8px;
		content: "";
		display: block;
		margin-right: 6px;
		width: 5px;
	}
	.useLine,
	.textSp,
	.browserText,
	.appText {
		color: #665555;
		font-size: 12px;
		line-height: 20px;
		margin-top: 15px;
	}
	.textPc {
		display: none;
	}
	
	/***************
	gift card use
	****************/
	.useInnerPc {
		display: none;
	}
	.useInnerSp {
		margin-top: 20px;
		width: 100%;
	}
	.useItem {
		border: solid 1px #CCCCCC;
		border-radius: 8px;
		padding: 15px;
		position: relative;
		width: 100%;
	}
	.useItem:not(:first-child) {
		margin: 42px 0 0;
	}
	.useItem:not(:last-child)::after {
		background: url(../images/arrow.png) no-repeat;
		background-size: contain;
		content: "";
		display: block;
		height: 22px;
		left: 50%;
		position: absolute;
		top: calc(100% + 10px);
		transform: translateX(-50%);
		width: 22px;
	}
	.browserApp {
		align-items: baseline;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.browser {
		text-align: center;
		width: 45%;
	}
	.app {
		text-align: center;
		width: 45%;
	}
	.browser > img,
	.app > img {
		display: block;
		margin: auto;
		padding-top: 10px;
		width: 100%;
	}
	.useTitle {
		color: #665555;
		font-weight: bold;
		font-size: 13px;
		line-height: 20px;
		margin-top: 0;
	}
	.useNumber {
		color: #D36985;
		font-size: 18px;
		font-weight: bold;
		line-height: 20px;
		padding-right: 6px; 
	}
	
	/**********
	faq
	**********/
	.faq > dt {
		color: #665555;
		font-size: 13px;
		font-weight: bold;
		line-height: 20px;
		margin-top: 20px;
		padding-left: 1.5em;
		text-indent: -1.5em;
	}
	.faq > dd {
		border-bottom: 1px dashed #CCCCCC;
		color: #665555;
		font-size: 12px;
		line-height: 15px;
		margin-top: 15px;
		padding-bottom: 20px;
		padding-left: 1.8em;
	}
	.qLetter {
		color: #665555;
		font-weight: bold;
		font-size: 14px;
		line-height: 15px;
		margin-right: 4px; 
		position: relative;
	}
	
	/*********
	extra
	*********/
	.extraText {
		color: #665555;
		font-size: 12px;
		line-height: 20px;
		margin-top: 20px;
		padding-left: 1em;
		text-indent: -1em;  
	}
	.extraText > li::before {
		content: "\203B";
	}
	
	.beforeFooter {
		color: #999999;
		font-size: 10px;
		font-weight: normal;
		margin-top: 30px;
		text-align: right;
	}
	
	/*********
	footer
	**********/

	/*********
	gnavi
	**********/
	.gnavi {
		border-bottom: solid 1px #BFB9B0;
		font-size: 13px;
		font-weight: bold;
		margin-top: 10px;
	}
	.gnavi > li {
		border-top: 1px solid #BFB9B0;
		box-sizing: border-box;
	}
	.navLink {
		color: #666666;
		font-family: Helvetica;
	}
	.navLink {
		padding: 15px 30px 15px 10px;
		position: relative;
		text-decoration: none;
	}
	.navLink:after {
		border-color: #AB9C84;
		border-style: solid;
		border-width: 0 3px 3px 0;
		content: "";
		height: 7px;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%) rotate(-45deg);
		width: 7px;
	}
	.navLink, 
	.navLink:after {
		display: block;
	}
	.appDownload {
		color: #AD2F5B;
	}
	.footerLinksLp {
		font-size: 10px;
		margin-left: 5px;
		width: 90%;
	}
	.footerLinksLp > li {
		color: #4C4C80;
		display: inline;
		margin-left: 5px;
		padding-right: 5px;
		white-space: nowrap;
	}
	.footerLinksLp > li:not(:last-child) {
		border-right: 1px solid #DDDDDD;
	}
	.footerLinksLp > li > a {
		color: #4C4C80;
		text-decoration: underline;
	}
	.breadcrumbsSp {
		border-bottom: 1px solid #DDDDDD;
		font-size: 0;
		margin: 0;
		padding: 10px;
		text-align: left; 
	}
	.breadcrumbsSp > ol > li {
		color: #665555;
		display: inline;
		font-size: 10px;
		line-height: 18px;
	}
	.breadcrumbsSp {
		border-bottom: 1px solid #DDDDDD;
		font-size: 10px;
		padding: 10px;
		text-align: left;
	}
	.breadcrumbsSp li > a {
		color: #4C4C80;
		text-decoration: underline;
	}
	.footerLp {
		padding: 10px 0;
	}
	.copyrightLp {
		margin-top: 20px;
		padding: 0 10px 5px;
		width: 100%;
	}
	.recruitHolding,
	.recruitHolding > img {
		display: block;
		width: 264px;
	}
	.recruitGroups {
		color: #435B67;
		display: inline-block;
		font-size: 10px;
		font-weight: bold;
		text-decoration: underline;  
	}
}