@charset "utf-8";
/* スマホ　トップページ */

h2 {
	text-align:center;
	margin:0 auto 1em auto;
	padding:1em 0.5em 0.7em 0.5em;
	font-size:160%;
}

h2 span {
	text-align:center;
	font-size:80%;
}
/*
nav {
	width:100%;
	overflow:hidden;
	margin-bottom:15px;
}

nav ul {
	display:block;
	text-align:center;
	margin:0 auto;
}

nav ul li {
	float:left;
	display:block;
	text-align:center;
	font-weight:bold;
	font-size:85%;
	width:20%;
	-moz-background-size:contain;
	background-size:contain;
	padding:40px 0 15px 0;
	height:55px;
}

nav ul li.step01 { background:url(images/step01.gif) no-repeat; }
nav ul li.step02 { background:url(images/step02.gif) no-repeat; }
nav ul li.step03 { background:url(images/step03.gif) no-repeat; }
nav ul li.step04 { background:url(images/step04.gif) no-repeat; }
nav ul li.step05 { background:url(images/step05.gif) no-repeat; }

nav ul li.step01-now,
nav ul li.step02-now,
nav ul li.step03-now,
nav ul li.step04-now,
nav ul li.step05-now { color:#FFF; }

nav ul li.step01-now { background:url(images/step01_on.gif) no-repeat; }
nav ul li.step02-now { background:url(images/step02_on.gif) no-repeat; }
nav ul li.step03-now { background:url(images/step03_on.gif) no-repeat; }
nav ul li.step04-now { background:url(images/step04_on.gif) no-repeat; }
nav ul li.step05-now { background:url(images/step05_on.gif) no-repeat; }
*/
section {
	clear:both;
	margin-top:20px;
	text-align:center;
	width:90% !important ;
}

section#Mainvis {
	clear:both;
	margin-top:0;
	text-align:center;
	border-bottom:2px solid #DDD;
	width:100% !important ;
}

section#Mainvis ul {
	position:relative;
	margin:0 !important;
	padding:0 !important;
}

section#Mainvis ul li {
	display: none;
	position:absolute;
	z-index:1;
	top:0;
	margin:0 !important;
	padding:0 !important;
}

section#Mainvis ul li:first-child {
	display: block;
	position: relative;			/* 前面の画像にはposition: relativeを指定 */
	z-index: 1000;				/* 前面の画像のz-indexを1000に指定 */
}

section#Mainvis ul li a {
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	-webkit-opacity: 1.0;
	opacity: 1.0;
}

section#Mainvis ul li a:hover,
section#Mainvis a:hover {
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	-webkit-opacity: 0.6;
	opacity: 0.6;
}

section#Mainvis ul li img {
	margin-bottom:-5px !important;
	padding:0 !important;
	width:100%;
}

article.cardtype {
	display:block;
	background:#FFF;
	border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	-webkit-border-radius:10px;
	padding:35px 10px;
	margin:0 auto 25px auto;
	text-align:center;
	box-shadow: 0px 0px 4px 2px rgba(204,204,204,0.4);
	max-width: 1080px;
}

article.cardtype div,
article.cardtype p {
	text-align:center;
}

article.cardtype h3,
article.cardtype h3.select {
	text-align:center;
	font-weight:bold;
	font-size:175%;
}

article.cardtype h3 { color:#45B8D8; }
article.cardtype h3.select { color:#2FB735 }

span.subttl {
	text-align:left;
	font-weight:bold;
	font-size:105%;
}

article.cardtype img.ct {
	margin:1em 0 0 0;
	border:#DDD 1px solid;
}

a.menu {
	text-align:center !important;
}

.btn_cnttop,
.btn_cnttops {
	clear:both;
	margin:10px auto 0 auto;
	padding:15px 10px 15px 0;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	border-radius:50px;
	-moz-border-radius:50px;
	-o-border-radius:50px;
	-webkit-border-radius:50px;
	width:90%;
	font-size:145%;
}

.btn_cnttop { background:#45B9DA; }
.btn_cnttops { background:#2FB735; }

.btn_cnttop a,
.btn_cnttops a {
	text-decoration:none;
	color:#FFF;
}

.btn_cnttop a:before {
	content:url(/sp/common/images/icon_btn02.png);
	margin: 15px;
    position: relative;
	top:3px;
}

.btn_cnttops a:before {
	content:url(/sp/common/images/icon_btn04.png);
	margin: 15px;
    position: relative;
	top:3px;
}


.btn_cnttop02 {
	clear:both;
	margin:10px auto 0 auto;
	padding:15px 10px 15px 0;
	background:#BBE6F0;
	color:#45B8D8;
	font-weight:bold;
	text-align:center;
	border-radius:50px;
	-moz-border-radius:50px;
	-o-border-radius:50px;
	-webkit-border-radius:50px;
	width:90%;
}

.btn_cnttop02 a {
	text-decoration:none;
	color:#45B8D8;
}

.btn_cnttop02 a:before {
	content:url(/sp/common/images/icon_btn02.png);
	margin: 15px;
    position: relative;
	top:3px;
}

.bnr-online {
	width:100%;
	text-align:center;
	margin-top:45px;
/*	border-top:#FFF 4px solid;
	border-bottom:#FFF 4px solid;
	background:url(images/bg_online.gif) no-repeat;
	background-size:contain;
	-moz-background-size:contain;
	-o-background-size:contain;
	-webkit-background-size:contain;
	padding:25px auto 15px auto;*/
}

.bnr-online a:hover {
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

/*
.bnr-online h3 {
	font-weight:200%;
	color:#FFF;
	font-weight:bold;
	text-align:center;
}*/

.orange { color:#FF5C26; }
.red { color:#D80000; }
.blue { color:#45B8D8; }
.pink { color:#FD4CA5; }
.yellow { color:#FFFFBF; }
.green {color: #63C939;}
.text10 { font-size:90%; }
.text-s { font-size:60%; }
.btn_help { float:right; width:25%; }
.text-left { text-align:left; }


.btn {
	float:left;
	width:100%;
}

.btn02 {
	width:100%;
	text-align:center;
}


/*----- 目的別カード製作事例 -----*/

article.exam {
	display:block;
}

article.exam ul li {
	display:block;
	width:49%;
	float:left;
	text-align:center;
	margin-bottom:1.8em;
}

article.exam ul li:nth-child(odd) {
	margin-right:1%;
}

article.exam ul li span.exname {
	display:block;
	color:#FD4CA5;
	font-weight:bold;
	font-size:110%;
	padding:0.2em 0;
	text-align:center;
}

article.exam ul li p {
	line-height:120%;
	text-align:center;
}

article.exam ul li a,
article.exam ul li a:hover,
section#cntLink ul li a,
section#cntLink ul li a:hover {
	text-decoration:none;
	color:#444;
}

.btn_cnttop03 {
	clear:both;
	margin:10px auto 0 auto;
	padding:10px 10px 13px 0;
	background:#F99BCC;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	border-radius:50px;
	-moz-border-radius:50px;
	-o-border-radius:50px;
	-webkit-border-radius:50px;
	width:65%;
	font-size:145%;
}

.btn_cnttop03 a {
	text-decoration:none;
	color:#FFF;
}

.btn_cnttop03 a:before {
	content:url(/sp/common/images/icon_btn03.png);
	margin: 15px;
    position: relative;
	top:3px;
}

.btn_cnttop04 {
	clear:both;
	margin:10px auto 0 auto;
	padding:10px 10px 13px 0;
	background:#63C939;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	border-radius:50px;
	-moz-border-radius:50px;
	-o-border-radius:50px;
	-webkit-border-radius:50px;
	width:65%;
	font-size:145%;
}

.btn_cnttop04 a {
	text-decoration:none;
	color:#FFF;
}

.btn_cnttop04 a:before {
	content:url(/sp/common/images/icon_btn04.png);
	margin: 15px;
    position: relative;
	top:3px;
}

.marbo { margin-bottom: 4em !important; }
.clear { clear: both; }

/*----- お知らせ -----*/

section#News {
	clear:both;
	margin-top:20px;
	padding:7%;
	background:#FFF;
	width:86% !important ;
}

section#News dl.sent {
	padding-bottom:5px;
	margin-bottom:1.5em;
}
section#News dl.sent dt {color:#0099CC;}
section#News dl.sent dd {line-height:160%;}
section#News dl.sent dd em {font-style:normal;color:#E458A9;}

/*
section#News ul li {
	text-align:left;
	line-height:160%;
}

section#News ul li span {
	color:#45B8D9;
	font-size:85%;
	display:block;
}*/

/*----- コンテンツリンク -----*/

section#cntLink {
	margin-top:0;
/*	clear:both;
	border-top:#DDD 1px solid;
	background:#F7F7F7;
	width:100% !important ;
	overflow:hidden;*/
}
/*
section#cntLink ul li {
	display:block;
	width:45%;
	float:left;
	text-align:center;
	font-size:105%;
	padding:5% 2%;
	border-bottom:#DDD 1px solid;
}

section#cntLink ul li:nth-child(odd) {
	border-right:#DDD 1px solid;
}
*/
/*----- フッターリンク -----*/

footer {
	clear:both;
	width:100% !important ;
	text-align:center;
}
	
footer .flink {
	padding:10% 7% 7% 7%;
	background:#FFF;
	width:86% !important ;
	font-size:85%;
	line-height:200%;
	text-align:center;
}

footer .copyright {
	color:#999;
	font-size:85%;
	padding:2%;
}

/* コロナ対応アナウンス */

.special-infobl {
    border: #CC0000 2px solid;
    color: #CC0000;
    padding: 1.5em;
    margin: 0.5em 0 1.5em 0;
    line-height: 160%;
    text-align: center;
	font-weight: bold;
}

.special-infobl a {color: #CC0000;}

/* Pマーク取得アナウンス */

.special-infobl02 {
	clear:both;
    border: #0099CC 1px solid;
    color: #0099CC;
    padding: 0.8em;
    margin: 0.5em 0 1.5em 0;
    line-height: 160%;
    text-align: center;
	font-weight:bold;
}

.special-infobl02 a {color: #0099CC;}

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

article.exam ul li p {
	line-height:120%;
	text-align:center;
	font-size:95%;
}

}

/* 202507追記 */

h2.oriCard {background:url("images/bg_h2_01.png") no-repeat center top; margin-top:20px; padding-top:80px;}
h2.Ex {background:url("images/bg_h2_02.png") no-repeat center top; margin-top:50px; padding-top:80px;}
h2.Ccase {background:url("images/bg_h2_03.png") no-repeat center top; margin-top:50px; padding-top:80px;}

article.case {
	display: flex;
	flex-direction: column;
	margin: 50px auto 0 auto;
}
article.case .caseItem {text-align: center;}
article.case .caseItem img {margin: 0 auto;}

.spcl {clear: both;}	

@media screen and (min-width:769px) {

section.indexTop {
	clear:both;
	margin-top:0;
	text-align:center;
	width:90% !important ;
}
section#Mainvis {
	margin-top:30px;
	margin-bottom:1em;
	text-align:center;
	border-bottom:none;
}

section#Mainvis ul li {text-align: center; width:100%;}
section#Mainvis ul li img {
	margin:0 auto !important;
	padding:0 !important;
	object-fit: cover;
	width: 100%;
	max-width: 1080px;
	border-radius: 10px;
}

.martop {margin-top:-10em !important;}
.btn_cnttop {width:500px;}
.btn_cnttop03,.btn_cnttop04 {width:500px;}
span.subttl {text-align:center;}

.mainCnt {display: flex; justify-content: space-between; flex-wrap: wrap;}
.mainCnt .subMenu {position: relative !important; top:20px !important;}
.mainCnt .subMenu a {display: block; margin-bottom: 0.5em;}
.mainCnt .subMenu img {width:100%;}
.mainCnt .subMenu ul.price {width:100%; position: relative !important; margin-bottom: 1.2em; background:url(/common/images/side/bg_price.jpg) ; background-repeat: no-repeat; background-size: 100%; box-shadow: none !important; border-radius: 0; padding:30% 0 15px 7.5%; box-sizing: border-box;}
.mainCnt .subMenu ul.price li {margin-bottom: 0.5em;}
.mainCnt .subMenu h4 {box-sizing: border-box;}
.mainCnt .subMenu h4 img {margin: 0 !important; padding: 0 !important;}
.mainCnt .subMenu .info {
	background:#FFF;
	padding:10px 15px 19px 15px;
	margin-top:-6px !important;
	margin-bottom:8px;
	border-radius: 0 0 8px 8px;
	border-left:#E4E4E4 solid 0.35rem; 
	border-right:#E4E4E4 solid 0.35rem; 
	border-bottom:#E4E4E4 solid 0.35rem; 
}

@media screen and (max-width:880px) {
	.mainCnt .subMenu .info {border-left:#E4E4E4 solid 0.2rem; border-right:#E4E4E4 solid 0.2rem; border-bottom:#E4E4E4 solid 0.2rem;}
}
	
.mainCnt .subMenu .info dl.sent {
	font-size:85%;
	border-bottom:#DDD dotted 1px;
	padding-bottom:5px;
	margin-bottom:1em;
}
.mainCnt .subMenu .info dl.sent a {display: inline; margin-bottom: 0;}
.newsLast {border-bottom:none !important; margin-bottom:0 !important; padding-bottom:0 !important; }

.mainCnt .subMenu .info dl.sent dt {
	color:#0099CC;
}

.mainCnt .subMenu .info dl.sent dd {
	line-height:180%;
}

.mainCnt .subMenu .info dl.sent dd em {
	font-style:normal;
	color:#E458A9;
}
	
article.exam {
	width:100%;
	max-width:960px;
	margin:0 auto;
}

article.exam ul {
	display: flex;
	justify-content: space-between;
	margin:0 auto;
	flex-wrap: wrap;
}
article.exam ul li {
	display:block;
	width:30%;
	text-align:center;
	margin-bottom:1.8em;
	margin-right:1%;
}

article.exam ul li:nth-child(3),
article.exam ul li:nth-child(6)	{
	margin-right:0;
}

article.exam ul li span.exname {
	display:block;
	color:#FD4CA5;
	font-weight:bold;
	font-size:110%;
	padding:0.2em 0;
	text-align:center;
}

article.exam ul li img {width:75%;}
article.exam ul li p {
	line-height:120%;
	text-align:center;
}

article.exam ul li a:hover {
	text-decoration:none;
	opacity:0.7;
}

article.case {
	flex-direction: row;
	justify-content: space-around;
	width:100%;
	max-width:1080px;
}
	
article.case .caseItem {
	width:50% !important;	
}
	
section#News {
	/*padding:3% 7%;
	border-bottom:#CCC 1px solid;*/
	display:none;
}
/*	
section#News ul { max-width: 1080px; margin: 0 auto;}
*/
.flink {position: relative;}
.flink a.ppol {position: absolute; right:30px;}
	
}

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

.btn_cnttop03,.btn_cnttop04 {width:90%;}
}