@charset "utf-8";

#Contents-flex {
	float:none !important;
	width:95% !important;
}

#Contents-flex h2 {
	/*background:url(../common/images/title/h2_original_bg.gif?202508) no-repeat bottom left;*/
	background:url("/original_toshocard/common/images/h2_oriToshoTop_bg.gif") no-repeat top left;
	height: 54px;
	font-family:'Lucida Grande', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	padding-left: 80px;
	padding-top: 10px;
	font-size: 174%;
	font-weight:normal;
}

@media screen and (max-width: 640px) {
#Contents-flex h2 {font-size: 115% !important; background-position:bottom left; height: 50px; }
}

.entry {
	text-align:center;
	margin:0 4px 0 15px;
}

.entry p.lead { line-height:200%; margin-bottom:2em; margin-top:3em; }
.entry p strong { color:#C94803; }

.entry h3 {
	margin:0 0 15px 0;
}

.entry .case ul {
	margin-right:-18px;
	overflow:hidden;
	_zoom:1;
}

.entry .case li {
	float:left;
	margin:0 18px 0 0;
}

.entry .case p {
	font-size:85%;
	text-align:right;
	margin-top:5px;
}

a.cslogo {
	display: block;
	border:5px double #CCC;
	border-radius: 10px;
	padding:15px;
	position: relative;
	text-align: center;
	margin:1.5em auto;
	width:70%;
	line-height: 2.5em;
}

a.cslogo:hover { background:#DAF0F7; border:5px double #52B3E3; }

a.anno {
	display: block;
	border:1px solid #000;
	border-radius: 30px;
	padding:10px;
	position: relative;
	text-align: center;
	margin:0 auto 3.5em auto;
	width:50%;
	line-height: 2.5em;
}

a.anno:hover { background:#DAF0F7; }

.border-dot { border-top:3px dotted #DAF0F7; margin:4.5em auto 3em auto; }

.sampleimg {
	text-align:center;
	margin-top:3em;
	margin-bottom:3em;
}

.sampleimg img { width:80%; }
.selectsam { margin-bottom:2.7em !important; }
_:lang(x)::-internal-media-controls-overlay-cast-button, .selectsam {
  margin-bottom:2.9em !important;
}

a.btn-free,
a.btn-select {
	display: block;
	border-radius: 30px;
	padding:10px 20px;
	width:80%;
	font-weight:bold;
	background:#FFF;
	text-decoration: none;
	text-align:center;
	position: relative;
	margin:0 auto 2em auto;
}

a.btn-free { /*border:2px solid #0847a1;*/ color:#0847a1; box-shadow: 0px 0px 6px #0847a1; }
a.btn-select { /*border:2px solid #1C7F3C;*/ color:#1C7F3C; box-shadow: 0px 0px 6px #1C7F3C; margin:0.8em auto 2em auto !important; /*margin:7.3em auto 2em auto !important;*/ }

a.btn-free::after,
a.btn-select::after {
	display: block;
	content:" ";
	width: 8px;
	height: 8px;
	transform: rotate(-45deg);
	right:25px;
	top:39%;
	position:absolute;
}

a.btn-free::after { border-right:2px solid #0847a1; border-bottom:2px solid #0847a1; }
a.btn-select::after { border-right:2px solid #1C7F3C; border-bottom:2px solid #1C7F3C; }

a.btn-free:hover { background:#0847a1; color:#FFF !important; }
a.btn-select:hover { background:#1C7F3C; color:#FFF !important; }

a.btn-free:hover::after,
a.btn-select:hover::after {
	border-right:2px solid #FFF;
	border-bottom:2px solid #FFF;
}

.tx-navy { color:#0847a1 !important; }
.tx-green { color:#1C7F3C !important; }

.contact-box {
	line-height:160%;
	background-image: url("images/bg_tokkun.png") ;
	background-repeat: no-repeat;
	background-position: top right;
	background-color: #F5F5F5;
	border-radius: 10px;
	padding:30px 40px;
	margin-top:40px;
	margin-bottom:6em;
}

.contact-box strong { display: block;  margin-bottom:0.5em; font-size:120%; }

h5 {
	font-size:115%;
	color:#52B3E3;
	text-align: center;
	border-top:1px solid #44A090;
	border-left:1px solid #44A090;
	border-right:1px solid #44A090;
	margin-bottom:0;
	margin-top:5em;
	padding: -5px 10px 10px 10px;
	line-height: 3em;
	position: relative;
}

h5::before {
	content:"";
	display: inline-block;
	width:3.5em;
	height:3em;
	background:url(images/icon_cs.png) no-repeat 0 2px;
	background-size:contain;
	position: absolute;
	left:23%;
	
}

.red { color:#CC6600; }
.comment { font-size:100%; /*color:#D31D03;*/ margin-bottom:1em; }
.comment em { font-weight:800; font-size:110%; }


/*-----------------------------------------------------	*/
/*	for - 639px					*/
/*-----------------------------------------------------	*/



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

	.PC {
	display:none;
	}
	
	#Contents-flex h2 {
	font-size:140%;
	}
	
	.entry {
	margin:0 5px 0 5px;
	}
	
	
	.marbo { margin-bottom:80px !important; }
	.selectsam { margin-bottom:3em !important; }

	a.cslogo { width:88%;}
	a.anno { width:90%; line-height: 170%;}
	
	.border-dot { border-top:3px dotted #DAF0F7; margin:3em auto 0 auto; }

	a.btn-select {
	margin:0 auto 2em auto !important;
	
	}
	
	.contact-box { padding:15px; background-size:70%; }

}

.txlong {font-size:90%; letter-spacing: -0.0125em;}


/* 202609 オリジナル図書カード改修 */

h3.catch {color:#004097; font-family: heisei-maru-gothic-std, sans-serif; font-weight: 600; font-size:130%; margin:1.5em auto 0 auto; text-align: center; line-height: 180%;}
h3.catch span {font-size: 130%; background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #E9D5AE 0%) repeat scroll 0 0;}
.tx-green {color:#00AAA4; margin-right:0.5em; font-size:150%;}
.topPoint { line-height:180%; margin:1.5em auto 2em auto; font-size:115%; display: inline-block; font-weight: 500; font-family: heisei-maru-gothic-std, sans-serif; color:#231815;}

.toOritosho { display: block; text-align: center;}
.toOritosho:hover { opacity:0.7; }
.toOritosho img { width:40%;  margin: 0 auto;}


#selectHow {
	display: flex;
	justify-content: space-between;
}

#selectHow .selfDesign,
#selectHow .layoutOrder,
#selectHow .designData {
	width:30%;
	border-radius: 15px;
	text-align: center;
	position: relative;
	padding-bottom:20px;
}

#selectHow .selfDesign {border:#E9D5AE 3px solid;}
#selectHow .layoutOrder {border:#BEDFC2 3px solid;}
#selectHow .designData {border:#C6E7F9 3px solid;}
#selectHow .selfDesign h4 {background: #E9D5AE; text-align: center;}
#selectHow .layoutOrder h4 {background: #BEDFC2; text-align: center;}
#selectHow .designData h4 {background: #C6E7F9; text-align: center;}
#selectHow .selfDesign h4 img,
#selectHow .layoutOrder h4 img,
#selectHow .designData h4 img {margin: 25px auto; width:80%;}
#selectHow .selfDesign Howimg,
#selectHow .layoutOrder Howimg,
#selectHow .designData Howimg {margin: 0 auto;}

@media screen and (max-width: 640px) {
#selectHow {display: block;}
#selectHow .selfDesign,
#selectHow .layoutOrder,
#selectHow .designData {
	width:90%;
	border-radius: 15px;
	text-align: center;
	position: relative;
	padding-bottom:40px;
	margin: 0 auto 40px auto;
}
#selectHow .selfDesign h4 img,
#selectHow .layoutOrder h4 img,
#selectHow .designData h4 img {margin: 25px auto; width:60%;}
}

.btnSelect {text-align: center; margin-top:50px;}
a.toS01,
a.toO01,
a.toS02,
a.toO02,
a.toS03,
a.toO03 {
	display: block;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 8px;
	background:#FFF;
	border:#E9D5AE 2px solid;
	border-radius: 8px;
	text-decoration: none;
	width:70%;
	margin:0 auto 10px auto;
	font-weight:600;
	font-family: heisei-maru-gothic-std, sans-serif;
	color:#231815;
}
a.toS01 {background:#FFF; border:#E9D5AE 2px solid;}
a.toO01 {background:#E9D5AE; border:#E9D5AE 2px solid;}
a.toS01:hover,
a.toO01:hover {background:#F7F0E4;}
a.toS02 {background:#FFF; border:#BEDFC2 2px solid;}
a.toO02 {background:#BEDFC2; border:#BEDFC2 2px solid;}
a.toS02:hover,
a.toO02:hover {background:#EBFCED;}
a.toS03 {background:#FFF; border:#C6E7F9 2px solid;}
a.toO03 {background:#C6E7F9; border:#C6E7F9 2px solid;}
a.toS03:hover,
a.toO03:hover {background:#E5F3F9;}

#selectHow .selfDesign::before {
	content:"";
	display: inline-block;
	background: url("images/icon_how01.png") no-repeat;
	width:95px;
	height:95px;
	background-size:contain;
	position: absolute;
	top:210px;
	left:-10px;
	z-index: 50;
}
#selectHow .layoutOrder::before {
	content:"";
	display: inline-block;
	background: url("images/icon_how02.png") no-repeat;
	width:95px;
	height:95px;
	background-size:contain;
	position: absolute;
	top:210px;
	left:-10px;
	z-index: 50;
}
#selectHow .designData::before {
	content:"";
	display: inline-block;
	background: url("images/icon_how03.png") no-repeat;
	width:95px;
	height:95px;
	background-size:contain;
	position: absolute;
	top:210px;
	left:-10px;
	z-index: 50;
}
/*
#selectHow .selfDesign::after {
	content:"";
	display: inline-block;
	background: url("images/logo_onlStore.png") no-repeat;
	width:50%;
	height:50%;
	background-size:contain;
	position: absolute;
	top:calc(100% - 18px);
	left:50%;
	transform:translateX(-50%);
	z-index: 50;
}
#selectHow .layoutOrder::after,
#selectHow .designData::after {
	content:"";
	display: inline-block;
	background: url("/original_toshocardR/sp/common/images/logo2026.png") no-repeat;
	width:30%;
	height:30%;
	background-size:contain;
	position: absolute;
	top:calc(100% - 25px);
	left:50%;
	transform:translateX(-50%);
	z-index: 50;
}
*/
#oriSample {
	width:100%;
	margin-top:50px;
	margin-bottom:50px;
	padding:40px;
	box-sizing: border-box;
	background-image: url("images/bg_topEx_01.png"), url("images/bg_topEx_02.png"), linear-gradient(rgba(253, 246, 240, 1.0), rgba(253, 246, 240, 1.0));
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position:
    top right,
    0% 68%,
    left;
	/*background: #FDF6F0;*/
}

#oriSample .orisamInn {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-top:40px;
	margin-bottom:50px;
	padding:20px;
	background:#FFF;
}

#oriSample .orisamInn .oriSam-item {
	box-sizing: border-box;
	width:31%;
	text-align:center;
	/*background-image:url("images/top_frameEx.png");
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center;*/
	padding-bottom:10px;
	margin-bottom:20px;
	color: #6D3D0F;
	font-family: heisei-maru-gothic-std, sans-serif;
}
#oriSample .oriSam-item img { margin:20px auto 5px auto; width:95%;}

@media screen and (max-width: 768px) {
#oriSample .orisamInn .oriSam-item {width:45%;}
}

@media screen and (max-width: 640px) {
#oriSample {
	margin-top:80px;
	margin-bottom:50px;
	padding:40px;
	box-sizing: border-box;
	background-image: url("images/bg_topEx_03.png"), linear-gradient(rgba(253, 246, 240, 1.0), rgba(253, 246, 240, 1.0));
	background-repeat: repeat-y, no-repeat;
	background-position:
    0 215px,
    left;
}
#oriSample .orisamInn {display: block; text-align: center; padding:20px 10px;}
#oriSample .orisamInn .oriSam-item {width:100%; margin-left:auto; margin-right:auto;}
#oriSample .oriSam-item img { width:70%;}
#oriSample h4,
#oriSample h4.sub {font-size:140%; padding-left: 0;}
/*#oriSample h4::before {
	background:url("images/icon_snow01.png") no-repeat 0 2px;
	width:75px;
	height:77px;
	background-size:contain;
	left:100px;
	top:0;
}*/
}

#oriSample h4,
#oriSample h4.sub {
	position: relative;
	font-family: heisei-maru-gothic-std, sans-serif;
	font-size:125%;
	padding-left: 0;
	padding-bottom:10px;
	color:#6B2709;
	line-height: 160%;
}
/*
#oriSample h4::before {
	content:"";
	display: inline-block;
	background:url("images/icon_snow01.png") no-repeat 0 2px;
	width:50px;
	height:52px;
	background-size:contain;
	position: absolute;
	left:-10px;
	top:-15px;
}

#oriSample h4.sub::before {
	content:"";
	display: inline-block;
	background:url("images/icon_snow02.png") no-repeat 0 2px;
	width:50px;
	height:52px;
	background-size:contain;
	position: absolute;
	left:-10px;
	top:-2px;
}
*/
#oriSample h4::after {
	content:"";
	display: inline-block;
	background:url("images/line_topEx01.png") repeat-x;
	width:47%;
	height:52px;
	position: absolute;
	left:0;
	top:25px;
}

#oriSample h4.sub::after {
	content:"";
	display: inline-block;
	background:url("images/line_topEx02.png") repeat-x;
	width:82%;
	height:52px;
	position: absolute;
	left:0;
	top:50px;
}

#oriSample h4.sub span {color:#A48871; font-size: 80%;}

@media screen and (max-width: 640px) {
#oriSample h4,
#oriSample h4.sub {font-size:150%; padding-left: 0; padding-top:20px; text-align: center; width:100%;}
/*
#oriSample h4::before {
	background:url("images/icon_snow01.png") no-repeat 0 2px;
	width:77px;
	height:80px;
	left:50%;
	transform:translateX(-50%);
	top:0;
}
#oriSample h4.sub::before {
	background:url("images/icon_snow02.png") no-repeat 0 2px;
	width:77px;
	height:80px;
	left:50%;
	transform:translateX(-50%);
	top:0;
}
*/
#oriSample h4::after {background:none;}
#oriSample h4.sub::after {background:none;}
#oriSample h4.sub {line-height: 120%;}
#oriSample h4.sub span {font-size: 75%; background:rgba(255,255,255,0.6); padding:8px 10px 5px 10px;}
}

#oriSample .orisamInnSub {
	display: flex;
	justify-content: space-around;
}

#oriSample .orisamInnSub .oriSam-subtx {width:47%;}
#oriSample .orisamInnSub .oriSam-sub {width:53%; background:#FFF; text-align: center; padding:10px}
#oriSample .orisamInnSub .oriSam-sub img {width:calc(94%/3); padding:3px;}
.toPic {text-align: right; color: #595757; font-family: heisei-maru-gothic-std, sans-serif; font-size:90%; font-weight:500; margin-right:3%;}
.toPic a {text-decoration: none;}
.toPic a:hover {opacity: 0.7;}
.sankaku {font-size:50%;}

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

#oriSample .orisamInnSub {display: block;}
#oriSample .orisamInnSub .oriSam-subtx {width:100%; margin: 0 auto;}
#oriSample .orisamInnSub .oriSam-sub {width:92%; text-align: center; padding-top:20px;}
#oriSample .orisamInnSub .oriSam-sub img {width:65%; display: block; margin: 0 auto 10px auto;}
.toOritosho img { width:80%;}
.toPic {text-align: center; font-size:120%; background:rgba(255,255,255,0.6); margin-top:20px; width:100%; padding-top:5px;}

}

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

#oriSample { flex-wrap: wrap;}
#oriSample .oriSam-item {
	width:50%;
	margin-bottom:1.5em;
	}
#oriSample .oriSam-item img { width:80%;}	
}