@charset "utf-8";

/* ==================
 * データ作成ガイド　商品別
 * ==================
 */
#dataguide-header {
	background: #eee url(./img/header_title.png) no-repeat scroll 0 0 / contain;
	width: 890px; aspect-ratio: 790 / 148;
	font-weight: bold;
	position: relative;
	overflow: hidden;
}
#dataguide-header .title {
	left: 40px;
	font-size: 30px;
	margin: 0;
	position: relative;
	top: 25px;
}
#dataguide-header p {
	left: 40px;
	font-size: 13px;
	margin: 0;
	position: relative;
	top: 25px;
}
/*
 * 見出しを上書き
 */
h2{background: none;}

/*
 *
 */
.group{margin: 10px 0 20px 0;}
.group_in{margin: 10px;padding: 5px !important;border: 1px solid #e3e3e3;}
.group dl{padding: 10px 0 10px 25px;}

.group h3{font-size: 18px !important;}
#mainContent h4{
font-size: 16px;color: #4c4c4c;
margin-top: 0;
border: 1px solid silver;
border-left: 8px solid #8DC21F;
background-color: #EAEAEA;
}
#mainContent div.section h4.sub{
font-size: 18px;color: #4c4c4c !important;font-weight: 600;line-height: 1;text-indent: 10px;
width: auto;height: auto;
padding: 10px 0;
margin: 10px 0;
border: none;border-left: 8px solid silver;
background-color: #eee;
}
#mainContent h5{
font-size: 18px;font-weight: normal;line-height: 1.5;
height: auto;
margin-top: 40px;
background-color: #fff;
border-left: 7px solid silver;
border-bottom: 1px solid silver;
}

.grayout{
padding: 5px !important;
background-color: #e6e6e6 !important;
}

#mainContent h6{
border: none;
}

.guide p{padding: 0 20px 5px 20px;}

/*
 * 表紙ページメニュー
 */
#menu{margin-left: 20px;}
#menu ul{list-style-type: none;}
#menu ul li{
padding-left: 10px;
margin-bottom: 6px;
background: transparent url(../img/arrow.png) no-repeat scroll 0 5px;
display: flex;
}
#menu ul li a{font-weight: bold;display: inline-block;width: 200px;}

/*
 * 操作手順
.flow dl{margin-left: 10px;padding-bottom: 0;}
.flow dl dt{font-size: 12px;}
.flow dl dt span{
font-family: arial/bold;
font-size: 16px;font-weight: bold;line-height: 1.1;
margin-right: 5px;
}
.flow dl dd{
padding-left: 0px;
margin: 5px 0;margin-left: 3px;
border-left: 5px solid silver;
}
.flow dl dd img{padding: 10px 0;}
 */

/*
 * ポイント
 */
dl.point dt{
display: inline;
color: #fff;
padding: 1px 10px;
background-color: #ee0000;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
dl.point dd{margin-top: 5px;}

/*
 * テンプレート
 */
dl.template a{
text-decoration: none;
padding: 5px;
padding-left: 25px;
padding-right: 10px;
border: 1px solid silver;
background: #e8f3d1 url(./img/icon_zip.png) no-repeat scroll 5px center;
}

/* ポストカード
===================================================== */

/*
 * 天地の決め方
 */
#tenti_decide dt,#tenti_decide dd{float: left;}
#tenti_decide dt{
font-family: Arial/Black;font-size: 16px;font-weight: bold;color: #fff;text-align: center;
width: 15px;height: 20px;
padding: 3px 6px;
margin-right: 5px;
background-color: #000;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#tenti_decide dd{width: 230px;}
#tenti_decide dd span{display: block;height: 60px;}
/*
 * 天地のOK　NG
 */
#tenti_okng{border: 1px solid silver;}
#tenti_okng dt,#tenti_okng dd{float: left;}
#tenti_okng dt{
margin-right: 10px;
}
#tenti_okng dd{width: 180px;margin-top: 30px;}

/* 台割表
===================================================== */
dl.daiwari_sample dt{font-weight: bold;text-indent: 30px;}
dl.daiwari_sample div{width: 200px;}

.attention{
padding-left: 50px !important;padding-top: 8px !important;
background: #fff url(../../images/attention.png) no-repeat scroll 10px center;}

.valign{vertical-align: middle;}

/* 封筒
===================================================== */
.zu{width: 370px;}
.zu p{padding: 0 !important;}
.zu span{
font-size: 18px;text-align: center;
display: block;
margin-bottom: 10px;
background-color: #eaeaea;
}
.zu img:hover{
box-shadow: 1px 1px 4px rgba(33,133,197, 1);
}

/*
 * 画像拡大
 */
.img_ibox_area{
display: flex;justify-content: space-between;
flex-wrap: wrap;
}
.img_ibox_area a{
position: relative;
}
.img_ibox_area a:before{
position: absolute;
padding: 10px;
right: 0;
content: url(../../images/ico_loupe_16px.png);
}

/*
 * アイコンつきボタン
 */
.icon_btn{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
}
.icon_btn::before,
.icon_btn::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
/* リンクマーク */
.link_mark::before{
left: 4px;
box-sizing: border-box;
width: 7px;
height: 7px;
border: 7px solid transparent;
border-left: 7px solid blue;
}
.link_mark{
color: blue;text-decoration: underline;
margin-left: 5px;
}

/*
 * のぼり
 */
.template_download{
display: flex;justify-content: space-between;
flex-wrap: wrap;
}

.orange{
background: rgb(255,158,61);
background: -moz-linear-gradient(top, rgba(255,158,61,1) 0%, rgba(255,155,40,1) 50%, rgba(255,155,40,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,158,61,1) 0%,rgba(255,155,40,1) 50%,rgba(255,155,40,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%);
background: linear-gradient(to bottom, rgba(255,158,61,1) 0%,rgba(255,155,40,1) 50%,rgba(255,155,40,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9e3d', endColorstr='#ff7f04',GradientType=0 );
}
.blue{
background: rgb(47,102,181);
background: -moz-linear-gradient(top, rgba(47,102,181,1) 0%, rgba(47,102,181,1) 48%, rgba(3,78,183,1) 51%, rgba(3,78,183,1) 51%, rgba(3,78,183,1) 100%);
background: -webkit-linear-gradient(top, rgba(47,102,181,1) 0%,rgba(47,102,181,1) 48%,rgba(3,78,183,1) 51%,rgba(3,78,183,1) 51%,rgba(3,78,183,1) 100%);
background: linear-gradient(to bottom, rgba(47,102,181,1) 0%,rgba(47,102,181,1) 48%,rgba(3,78,183,1) 51%,rgba(3,78,183,1) 51%,rgba(3,78,183,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f66b5', endColorstr='#034eb7',GradientType=0 );
}
.green{
background: rgb(151,209,35);
background: -moz-linear-gradient(top, rgba(151,209,35,1) 0%, rgba(148,209,43,1) 49%, rgba(148,209,43,1) 49%, rgba(148,209,43,1) 49%, rgba(148,209,43,1) 49%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%);
background: -webkit-linear-gradient(top, rgba(151,209,35,1) 0%,rgba(148,209,43,1) 49%,rgba(148,209,43,1) 49%,rgba(148,209,43,1) 49%,rgba(148,209,43,1) 49%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
background: linear-gradient(to bottom, rgba(151,209,35,1) 0%,rgba(148,209,43,1) 49%,rgba(148,209,43,1) 49%,rgba(148,209,43,1) 49%,rgba(148,209,43,1) 49%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97d123', endColorstr='#7cbc0a',GradientType=0 );
}

.sail_setting{
list-style-type: none;
}
.sail_setting li{
float: left;
}

/*
* テンプレート
*/
.template_download{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
list-style-type: none;
}
.template_download li{
margin: 10px 10px;
}
.template_download li a{
font-size: 16px;color: black;text-align: center; text-decoration: none;
display: block;
width: auto;
padding: 10px;
background-position: 0 0;
background-size: 200% auto;
transition: .15s;
border: 2px solid black;
}
.template_download li a:before{
content: '';
display: inline-block;
width: 25px;
height: 25px;
margin-right: 5px;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
}
.template_ai a:before{background-image: url(../../omitumori/images/ai_ico.png);}
.template_ps a:before{background-image: url(../../omitumori/images/ps_ico.png);}
.template_pp a:before{background-image: url(../../omitumori/images/pp_ico.png);}
.template_ai a {
background-image: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(255,142,0,1) 50%);
background-color: rgba(255,255,255,1);
}
.template_ps a {
background-image: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(46,162,204,1) 50%);
background-color: rgba(255,255,255,1);
}
.template_pp a {
background-image: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(219,119,84,1) 50%);
background-color: rgba(255,255,255,1);
}
.template_download li a:hover{
background-color: #fff;
background-position: -100% 0;
color: #fff;
}

.round{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid silver;
}

/* 将来的には統合 */
a[rel="ibox"] {
	display: inline-block;
	position: relative;
}
a[rel="ibox"]:not(.notloupe):before {
	background: url(../../images/ico_loupe_16px.png) no-repeat center center;
	content: "";
	display: inline-block;
	height: 18px;
	position: absolute;
	right: 5px;
	top: 5px;
	transition: .3s;
	width: 18px;
	z-index: 1;
}
a[rel="ibox"]:hover > img {
	opacity: .7;
}
a[rel="ibox"]:hover {
	cursor: zoom-in;
}
.attention.point {
	padding-left: 170px !important;
	height: 33px;
	background: #fff url(../img/sp_back.png) no-repeat scroll 0 0;
}

.img-detail-list dt {
	font-size: 14px;
	line-height:1.5;
}

.download-link {
	border: 1px solid gray;
	display: inline-block;
	margin: 0 auto;
	padding: 5px 15px 5px 5px;
	position: relative;
	text-align: center;
	width: 90%;
}
.download-link:before {
	content: "";
	background: url(../../images/button_template_mini.png) no-repeat;
	background-size: 25px 25px;
	border-radius: 50%;
	display: inline-block;
	height: 25px;
	position: absolute;
	right: 5px;
	top: 2px;
	width: 25px;
}

.hover-scroll-link {
	height: calc(100% - 7px) !important;
	margin: 0 7px;
	position: relative;
	width: calc(100% - 14px) !important;
}
.hover-scroll-link i,
.hover-scroll-link span {
	display: none;
}

.hover-scroll-link:hover {
	background: rgba(250,250,250,.9);
}
.hover-scroll-link:hover span {
	box-sizing: border-box;
	color: #000;
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 3px;
	padding: 0 5px;
	position:absolute;
	text-align: center;
	top: 15%;
	transition: .5s;
	width: 100%;
}
.hover-scroll-link:hover i {
	background: #000;
	display: inline-block;
	height: 25%;
	left: 50%;
	position: relative;
	top: 1em;
	transition: .5s;
	transform: translateX(-50%);
	width: 1px;
}
.hover-scroll-link:hover i:after {
	background: #000;
	content: "";
	display: inline-block;
	height: 40%;
	width: 1px;
	position: absolute;
	bottom: -1px;
	transform: rotateZ(30deg);
	left: 6px;
}
.hover-scroll-link.anima:hover i {
	-webkit-animation: hoverscrolllink 2.5s infinite .5s;
	animation: hoverscrolllink 2.5s infinite .5s;
	top: 45%;
}

@-webkit-keyframes hoverscrolllink {
	0% {
		top: 45%;
	}
	100% {
		top: 55%;
	}
}
@keyframes hoverscrolllink {
	0% {
		top: 45%;
	}
	100% {
		top: 55%;
	}
}