@charset "utf-8";

@import url("font-awesome.min.css");
@import url("frame.css");
@import url("navi.css");
@import url("swiper.min.css");


/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row1, .row1 a{}
.row2, .row2 a{}
.row3, .row3 a{}


/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{padding: 0px 0 30px 0;}

#header #logo{}
#header #logo h1{padding:20px 0; font-size:2rem;}

#head_info{width:20%; float:left; margin:0 0 0 2%;}
#head_login{width:17%; float:left; margin:0 0 0 1%;}


/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:15px 20px 20px 20px; max-width:1400px;}
.container02{padding:15px 0 20px 0; max-width:1400px;}


/* Content */
.container .content{}

.services{transition: all .3s;}
.services img{border-radius:20px;}
.services a:hover img{border:none; padding:2px;}

.services li:nth-child(-n+3){margin-bottom:0px;}
.services article{position:relative; padding:20px 20px 50px; border-bottom:2px solid; text-align:center;}
.services article .txtwrap{padding:20px; border:1px solid;}
.services article .txtwrap i{margin-bottom:50px;}
.services article .txtwrap .heading{margin-bottom:20px; font-size:1.2rem;}

.services .txtwrap p{color: #090;}
.services .txtwrap span{ background-color:#CF0; padding:0 5px; border-radius:5px;}


#product{width:94%; margin:0 auto 80px auto;}
#product02{width:94%; margin:0 auto 80px auto;}


.pbox_out{display:flex;}
.pbox_out02{background-color:#FFF; border-radius:15px;}
.pbox{background-color:#FFF; border-radius:15px;}
.pboxin{padding:20px;}

.pbox img{border-radius:15px 15px 0 0;}
.pbox span{ font-size:1.6rem; color:#C00; font-weight:bold;}

.pbox_out02 img{border-radius:15px 0 0 15px;}
.pbox_out02 span{ font-size:1.6rem; color:#C00; font-weight:bold;}


/* よくあるご質問 */
.box_qa {position: relative; margin: 25px 0; padding: 8px; background: #FFF0E1; border-radius:15px;}
.box_qa .qa_title {position: relative; background: #fff; border-radius:15px; font-size:1.1rem; padding: 10px 5px 10px 40px; font-weight: bold;}
.box_qa .qa_title:before {
    content: "Q";
    display: inline-block;
    position: absolute;
    padding: 0em;
    color: white;/*Q文字色*/
    background: #C00;/*Q背景色*/
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
	font-size: 1.2rem;
    line-height: 35px;
    left: -6px;
    top: 20px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.box_qa .qa_title:after {
    content: "A";
    display: inline-block;
    position: absolute;
    padding: 0em;
    color: white;/*A文字色*/
    background: #F60;/*A背景色*/
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
	font-size: 1.2rem;
    line-height: 35px;
    left: -6px;
    bottom: -70px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}

.box_qa p {padding: 15px 20px 10px 40px; margin: 0;}






/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:30px; max-width:1200px;}

#footer .heading{margin-bottom:15px; font-size:1.4rem;}

#footer .linklist li{display: inline-block; margin:0 20px 5px 0; padding:0;}
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
#footer .linklist li, #footer .linklist li::after{clear:both;}
#footer .linklist02 li{display:block; float:left; line-height:2; margin:0 20px 0 0;}
#footer .linklist02 li::before{font-family:"FontAwesome"; content:"\f219";}


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:20px 0;}
#copyright *{margin:0; padding:0;}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .2s ease-in-out;}
#mainav form *{transition:none !important;}




/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width: auto; height: auto; padding:20px; line-height:30px; font-size:20px; text-align:center; opacity:.5; text-decoration:none;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.8;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* slideShow
------------------------------------------------------------------------------------------------------------ */
.main_copy{position: absolute; z-index:1; padding:20px 30px; right:50;}

.slideShow {
    margin: 0 auto 80px auto;
    text-align: left;
    display: none;
	z-index:0;
}
 
/* .mainView
------------------------- */
.slideShow .mainView {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.slideShow .mainView ul {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.slideShow .mainView ul li {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
}
.slideShow .mainView ul li img {
    width: 100%;
}
 
/* .thumbNail
------------------------- */
.slideShow .thumbNail {width: 100%; overflow: hidden;}
 
.slideShow .thumbNail ul {width: 100%;} 
.slideShow .thumbNail ul li {float: left; display: inline; overflow: hidden; cursor: pointer;}
.slideShow .thumbNail ul li img {width: 100%;}
 
.slideShow .thumbNail ul li.active {
    filter: alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
 
/* sideNavi
------------------------- */
.slideShow .mainView .btnPrev,
.slideShow .mainView .btnNext {
    top: 0;
    width: 4%;
    height: 100%;
    position: absolute;
    z-index: 100;
	margin-top: 20px;
}
.slideShow .mainView .btnPrev {
    left: 0;
    background: #F66 url(../img/btnPrev.png) no-repeat center center;
}
.slideShow .mainView .btnNext {
    right: 0;
    background: #F66 url(../img/btnNext.png) no-repeat center center;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
.slideShow ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.slideShow ul {
    display: inline-block;
    overflow: hidden;
}




/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color: #300;}
a{color: #300; text-decoration:underline;}
a:hover{color: #F60; text-decoration:none;}
hr, .borderedbox{border-color: #600;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#333;}

.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.2);}
.overlay.light{color:#474747;}
.overlay.light::after{background-color:rgba(233,233,233,.9);/* #E9E9E9 */}
.overlay.coloured::after{background-color:rgba(213,90,119,.8);/* #D55A77 */}

.btn01{color: #F60; background-color:#FFFFFF; border-color:#F60;}
.btn01:hover{color:#FFFFFF; background-color: #F60; border-color:#F60;}

.btn02, .btn02.inverse:hover{color: #333; background-color:#FFFFFF; border-color:#333;}
.btn02:hover{color:#FFFFFF; background-color: #F60; border-color:#333;}

.btn03{color: #fff; background-color: #F30; border-color:#F30;}
.btn03:hover{color:#F30; background-color: #fff; border-color:#F30;}

.btn04{color: #093; background-color: #fff; border-color:#093;}
.btn04:hover, .active .btn04{color:#fff; background-color: #093; border-color:#093;}

.btn05{color: #F06; background-color: #fff; border-color:#F06;}
.btn05:hover, .active .btn05{color:#fff; background-color: #F06; border-color:#F06;}

#btn i{color:#fff !important;}


/* Rows */
.row1{color:#300;}
.row2, .row2 a{}
.row3{color:#300;}
.row5, .row5 a{color:#300;}


/* Top Bar */
#topbar, #topbar ul li{border-color:rgba(255,255,255,.2);}
#topbar > div:last-of-type li:first-child a{color:#D55A77;}


/* Header */
#header #logo a{color:inherit;}


/* Page Intro */
#pageintro footer input, #pageintro footer button{color:#000000; background-color:#FFFFFF;}
#pageintro footer button{color:#FFFFFF; background-color:#D55A77;}



/* Content Area */
#introblocks{background-color:#E9E9E9;}
.services article{color:inherit; border-color:#C36;}
.services article .txtwrap{border-color:transparent;}
.services article:hover .txtwrap, .services .active article .txtwrap{color:#FFFFFF; border-color:#D7D7D7;}
.services article footer a{color:#FFFFFF; background-color: #C36;}



/* Footer */
#foot_back{background-color:#EFEFEF; border-top:solid 2px #300;}
#footer .heading{}
#footer hr, #footer .borderedbox, #footer .linklist li{border-color:rgba(0,0,0,.2);}

#footer a:hover{text-decoration:underline;}

#footer input, #footer button{border-color:transparent;}
#footer input{color:#474747; background-color:#E9E9E9;}
#footer input:focus{border-color:#D55A77;}
#footer button{color:#FFFFFF; background-color:#D55A77;}



/* Copyright */
#copyright{border-color:rgba(0,0,0,.1);}


#breadcrumb a{color:inherit; background-color:inherit;}
#breadcrumb li:last-child a{color:#D55A77;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#D55A77;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#D55A77;}

#backtotop{color:#FFFFFF; background-color:#D55A77;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
#comments input:focus, #comments textarea:focus, #comments *:required:focus{border-color:#D55A77;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1100px){
	.hoc{max-width:1400px;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:1100px){
	.hoc{max-width:1100px;}

	#header{padding:5px 0 30px 0; text-align:center;}
	#header #logo{margin:0 auto; width:70%; }
	#header h1{text-align:center; padding:0 !important;}

	#mainav{}
	#mainav ul{display:none;}
	#mainav form{display:block;}

	#breadcrumb{}

	.container{}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}


@media screen and (max-width:1000px){
	.flex-direction-nav .flex-prev, .flex-direction-nav .flex-next{display:none;}
	.flex-control-nav{display:block;}

	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	
	#header .fl_right{float:right; margin-right:100px;}

	.pc{display:none !important;}
	.sp{display:block !important;}


	.container{}
	.container02{width:94%;}

	.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */
	.right_contents, .one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	form .one_third, form .one_half, form .two_third{margin:0 0 15px 0;}

	.right_contents .one_quarter{float:left; width:48.5%;}
	.right_contents .one_quarter:nth-child(2n+1) {margin:0 0 1% 0; }
	.right_contents .one_quarter:nth-child(2n) {margin:0 0 1% 2.4%; }



	#header{text-align:center;}
	#header #logo{margin:0 0 15px 0;}
	#pageintro{padding:80px 0 150px;}
	
	#head_info{width:48%; float:left; margin:0; font-size:0.8rem;}
	#head_login{width:49%; float:left; margin:0 0 0 2%;}

	#head_info .font-x3{font-size:1.3rem;}

	.pbox_out{display:block;}


	#product{width:92%; margin:0 auto 80px auto;}
	#product02{width:92%; margin:0 auto 80px auto;}
	
	
	#btn .one_half:first-child{width:49%; float:left; margin:0;}
	#btn .one_half{width:49%; float:left; margin:0 0 0 2%;}
	

	#introblocks > ul > li:last-child{margin-bottom:0;}

	.services li:nth-child(-n+3){margin-bottom:20px;}

	.overview > li:nth-last-child(-n+3){margin-bottom:50px;}

	.cta > :first-child{margin-top:0;}
	
	.width_20{width:50%; margin:0;}
	
/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; padding:10px; line-height:20px; font-size:16px; text-align:center;}

@media screen and (max-width:750px){
	.container{padding:15px 12px 20px 12px;}
}

@media screen and (max-width:450px){
	#pageintro li footer form{max-width:none; width:100%;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}

	#pageintro li article{max-width:none; width:100%;}
	#pageintro li .heading{font-size:1.6rem;}
}