@charset "utf-8";
/* CSS Document */

/*-------------------
製品ページ　メニュー管理用CSS
/kikaku/function/menu-kanri.asp
-------------------*/

/*-----------------
 *共通
-----------------*/
section {
	padding: 3.5em 0;
}
h2 {
	margin-bottom: 1.55em;	
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}
h3 {
	font-size: 1em;
	line-height: 1.4;
}
.contents {
	width: 90%;
	max-width: 64em;
	margin: auto;
	text-align: center;
}
.cnv_btn {
    margin: 3.25em auto 0;
}
a.text_link {
	color: #2684e2;
    text-decoration: underline;
}
a:hover {
	opacity: .85;
}
#sec-cnv p, #sec-useful .useful_box .useful_tx, #sec-useful .option p, #sec-useful .useful_area .meaning .word, #sec-automatic .contents p, #sec-purpose p.luster, #sec-packageprice .contents p {
	font-size: .9em;
}
#sec-cnv p, #sec-useful .useful_area .useful_box .useful_tx, #sec-automatic .contents p, #sec-purpose p.luster {
	line-height: 1.6;
}

#sec-case .expl-tx {
	margin: .35em 0 1.25em; 
	line-height: 1.4;
	font-size: .9em;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	section {
		padding: 2em 0;
	}
	h2 {
		font-size: 1.5em;
	}
	h3 {
		font-size: 1.25em;
	}
	#sec-cnv p, #sec-useful .useful_box .useful_tx, #sec-useful .option p, #sec-useful .useful_area .meaning .word, #sec-automatic .contents p, #sec-purpose p.luster, #sec-packageprice .contents p {
		font-size: 1em;
	}
}

/*-----------------
 *mainv
-----------------*/
.main-v { 
    padding: 7.1em 0 2.5em 0;
    text-align: center;
    background: linear-gradient(#fcf8e3, #fcf2c0);
}
.main-v h1 {
	font-size: 1.7em;
	font-weight: bold;
	line-height: 1.2;
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
    .main-v {
        padding: 9.5em 0 4em 0;
    }
	.main-v h1 {
		font-size: 2em;
	}
}


/*-----------------
 *sec-cnv
-----------------*/
#sec-cnv .menu_wrap {
	margin: 1.25em auto 2.5em;
	width: 308px
}
#sec-cnv li {
	margin: 0 2.5em 0 0;
	font-weight: bold;
	line-height: 1.4;
	float: left;
}
#sec-cnv li:last-child {
	margin: 0;
}
#sec-cnv li img {
	margin: 0 auto 1em;
	width: auto;
	height: 50px;
    display: block;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-cnv .menu_wrap {
		margin: 2.5em auto;
		width: 464px;
	}
}


/*-----------------
 *sec-useful
-----------------*/
#sec-useful {
	background: #ffdf61;
	overflow: hidden;
}
#sec-useful .useful_area {
	margin-bottom: 1em;
	padding: 2.25em 1.15em;
	text-align: left;
	background: #fff;
	border-bottom: solid 3px #d5d5d5;
	position: relative;
}
#sec-useful .useful_area h3, #sec-useful .option h3 {
	margin-bottom: 1em;	
	padding-left: 38px;
	font-weight: bold;
	color: #f1832c;
}
#sec-useful .useful_area .title01 {
	background: url(/web/jp/kikaku/function/menu-kanri/images/menu-kanri_useful01.svg) no-repeat;
	background-size: 25px auto;
}
#sec-useful .useful_area .title03 {
	background: url(/web/jp/kikaku/function/menu-kanri/images/menu-kanri_useful03.svg) no-repeat;
	background-size: 25px auto;
}
#sec-useful .useful_area .title04 {
	background: url(/web/jp/kikaku/function/menu-kanri/images/menu-kanri_useful04.svg) no-repeat;
	background-size: 25px auto;
}
#sec-useful .useful_area .useful_box .sample_btn {
	margin-top: 1em;
	float: right;
}
#sec-useful .useful_area .useful_box .sample_btn a {
    margin: 0 auto;
    padding: .55em 1.5em;
    font-size: .9em;
    font-weight: bold;
    color: #fff;
    line-height: 2em;
    background-color: #f6a200;
    border-radius: 30px;
    display: block;
}
#sec-useful .useful_area .useful_box img.icon-blank {
    margin-right: .5em;
    width: 26px;
    height: 20px;
    vertical-align: middle;
}
#sec-useful .useful_area .lavel, #sec-useful .option .lavel {
    position: absolute;
    top: 0.4em;
    left: 0.4em;
}
#sec-useful .useful_area .lavel .lavel_tx, #sec-useful .option .lavel .lavel_tx {
    padding: .25em 1em;
    font-size: .6em;
    color: #fff;
    background-color: #f6a200;
}
#sec-useful .useful_area .meaning {
	margin-top: 2em;
	padding: 1.25em 0 0;
	border-top: solid 2px #ccc;
}
#sec-useful .useful_area .meaning .word {
	padding-bottom: 14px;
	font-weight: bold; 
}
#sec-useful .useful_area .meaning small {
	font-size: .82em;
	line-height: 1.5;
	letter-spacing: .03em;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-useful .useful_area {
		padding: 2.5em;
	}
	#sec-useful .useful_box .useful_tx {
		width: 70%;
		float: left;
	}
	#sec-useful .useful_area .useful_box {
    	min-height: 42px;
		position: relative;
	}
	#sec-useful .useful_area .useful_box .sample_btn {
		margin-top: 0;
		position: absolute;
		bottom: 0;
		right: 0;
	}	
	#sec-useful .useful_area .useful_box img.icon-blank {
		width: 2.3em;
	}
	#sec-useful .useful_area .meaning small {
		font-size: .9em;
	}
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-useful .useful_box .useful_tx {
		width: 75%;
	}
	#sec-useful .useful_area .meaning small a {
		padding-left: 1.25em;
	}
	#sec-useful .useful_area .useful_box .useful_tx {
		line-height: 1.75;
	}
}
/* ノートPC以上のサイズ 1200px(16×75em)~ lgサイズ */
@media screen and (min-width:75em) {
	#sec-useful .useful_box .useful_tx {
		width: 78%;
	}
}

/* オプションエリア */
#sec-useful .option {
	margin: 0 auto;
	padding: 1.25em 1.5em;
	border: 1px solid #ccc;
	position: relative;
	display: block;
}
#sec-useful .option.left {
	background: url(/web/jp/kikaku/function/menu-kanri/images/menu-kanri_option01.svg) no-repeat;
	background-color: #fff;
	background-position: bottom right;
	background-size: 36%;
}
#sec-useful .option.right {
	margin-top: 1.5em;
	background: url(/web/jp/kikaku/function/menu-kanri/images/menu-kanri_option02.svg) no-repeat;
	background-color: #fff;
	background-position: bottom right;
	background-size: 36%;
}
#sec-useful .option h3 {
	padding-left: 0;
}
#sec-useful .option p {
	line-height: 1.75;
	text-align: left;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-useful .option {
		padding: 1.5em 2em;
		width: 40%;
		min-height: 245px;
		border: 1px solid #ccc;
	}
	#sec-useful .option.left {
		float: left;
	}
	#sec-useful .option.right {
		margin: 0;
		float: right;
	}
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-useful .option {
		width: 42%;
		min-height: 160px;
	}
}

/*-----------------
 *sec-case
-----------------*/
#sec-case {
	background: #fcf7ed;
}

/*-----------------
 *sec-automatic
-----------------*/
#sec-automatic .contents p {
    margin-bottom: 1em;
    text-align: left;
}
#sec-automatic .automatic_img {
    margin: 2.5em 0 3em;
}
#sec-automatic .automatic_img img {
    width: 100%;
    max-width: 500px;
}
#sec-automatic .automatic_btn {
	margin: 0 auto;
	width: 90%;
}
#sec-automatic .automatic_btn a {
    padding: 1.25em 1.25em 1em;
    font-weight: bold;
    color: #f6a200;
    line-height: 1.5;
    text-align: center;
    background: #fff;
    border: 2px solid #f6a200;
    border-radius: 6px;
    display: block;
    position: relative;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-automatic .automatic_btn {
		width: 72%;
	}
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
    #sec-automatic .contents {
        max-width: 750px;
    }
    #sec-automatic .automatic_img img {
        width: 60%
    }
	#sec-automatic .automatic_btn {
		width: 60%;
	}
	#sec-automatic .contents p {
		line-height: 1.75;
	}
}


/*-----------------
 *sec-purpose
-----------------*/
#sec-purpose {
    background: url(/web/jp/asp/buyer/images/menu-kanri_purpose-bg.jpg) center no-repeat;
    background-size: cover;
    text-align: center;
}
#sec-purpose .luster {
	text-shadow: 2px 2px 8px #ffffff;
}
#sec-purpose p.luster {
	margin-bottom: 2.5em;
}


/*-----------------
 *sec-packageprice
-----------------*/
#sec-packageprice {
    background-color: #f7f3f3;
	background-image: url(/web/jp/asp/seller/images/top_price_bg.png), url(/web/jp/asp/seller/images/top_price_bg02.png);
    background-position: top left, bottom right;
    background-repeat: no-repeat, no-repeat;
    text-align: center;
	padding: 4em 0;
}
#sec-packageprice h3 {
	margin-bottom: 2.1em;
	padding-bottom: 10px;
    font-weight: bold;
	position: relative;
}
#sec-packageprice h3::after {
	margin: 0 auto;
    width: 25px;
    height: 1px;
    background: #c5c5c5;
	content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
	right: 0;
}
#sec-packageprice .contents p {
    text-align: left;
    line-height: 1.75em;
}
#sec-packageprice .double {
    padding-bottom: 1em;
}
#sec-packageprice .double .cnv_btn2.left {
    width: 49%;
    float: left;
}
#sec-packageprice .double .cnv_btn2.right {
    width: 49%;
    float: right;
}
#sec-packageprice .cnv_btn2 {
    width: 100%;
    max-width: 50em;
    margin: 1em auto;
    text-align: center;
}
#sec-packageprice .cnv_btn2 a {
    padding: 1em 1.5em;
    background-color: #ffffff;
    border-radius: 6px;
    border: #CCCCCC 2px solid;
    color: #666666;
    font-size: 0.9em;
    line-height: 1.3em;
    display: block;
    position: relative;
    text-align: left;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
    #sec-packageprice .contents p {
        padding-bottom: 1em;
    }
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
    #sec-packageprice .contents {
        max-width: 650px;
    }
    #sec-packageprice .contents h3 {
        font-size: 1.3em;
    }
    #sec-packageprice .cnv_btn2 a {
        padding: 1em 1em;
        text-align: center;
        font-size: 1em;
    }
    #sec-packageprice .cnv_btn2 a::after { 
		top: auto;
    }
}


/*-----------------
colorbox
-----------------*/
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(images/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(images/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(images/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(images/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible;  position:absolute; bottom:-29px; background:url(images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious:hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext:hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose:hover{background-position:-100px 0px;}

        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;}

/*-----------------
 *Marketoフォーム
-----------------*/
    .form {
    padding: 3em 0;
	background: #fcf7ed;
	overflow: hidden;
    }
    .form #mktoForm_4152 {
	margin: 0 auto;
    }
    .form .mktoButtonRow { 
	margin: 2.25em auto 0;
	display: block;
	text-align: center;
    }
    .form .mktoButtonWrap {
	margin: 0 !important;
    }
    .form .mktoButton {
	width: 300px !important;
    padding: .75em !important;
    font-size: 18px !important;
    background: #e78b00 !important;
	border: 1px solid #e78b00 !important;    
	border-radius: 6px !important;
	position: relative;
    }
    .form .mktoButton::after {
	content: '>';
	font-weight: normal;
	display: inline-block;	
	position: absolute;
	top: 1em;
	right: .625em;
	-webkit-transform: scale(0.8, 1.4);
		-moz-transform: scale(0.8, 1.4);
		-ms-transform: scale(0.8, 1.4);
		transform: scale(0.8, 1.4);
    }
    .form .mktoButton:hover {
	opacity: 0.8 !important;
    }

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
    .form .mktoFormRow { 
		padding: .5em 0;
	}
}


/*-----------------
 *メインビジュアルバナー　20201215追加
-----------------*/
.top_banner{
	display: none;
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em){
	.top_banner{
		display: block;
		height: 130px;
		position: absolute;
		top: 11em;
		right: 2%;
		box-shadow: 4px 6px 10px rgba(0,0,0,0.6);
		background-color: #fff;
		transition : all 300ms;
		animation:move 600ms both;
		animation-delay:2s;
	}
	.top_banner a{
		display: block;
	}
	.top_banner:hover{
		box-shadow: 4px 6px 20px rgba(0,0,0,0.6);
		transition : all 300ms;
	}
	.top_banner:hover img{
		opacity: 0.85;
	}
}



/* ノートPC以上のサイズ 1200px(16×75em)~ lgサイズ */
@media screen and (min-width:75em) {
	.top_banner{
		right: 6%;
	}
	#sec-news li {
		margin-bottom: .75em;
	}
}

@keyframes move {
	0% {
		top: 11em;
	}
	50% {
		top: 11em;
	}
	100% {
		top: 11em;
	}
}

/*-----------------
 *マンガLPバナー(2020/12追加)
-----------------*/
.bnr-area {
	margin: 15px auto;
	width: 100%;
	max-width: 480px;
	padding: 0px;
}

.bnr-area img {
	width: 100%;
　　max-width: 100%;
　　height: auto;
}