/*
=====================================================================
*    Layout Stylesheet
===================================================================== */

/* ------------------------------------------------------------------ */
/* Font Styles Common
/* ------------------------------------------------------------------ */

*{ font-family: "FP-HiraKakuProN-W3"; }

ul#nav li a { 
	font-size:1.4rem; font-size:14px; /* 14px */
}

/* ------------------------------------------------------------------ */
/* Font Styles
/* ------------------------------------------------------------------ */

html{ font-size: 62.5%; }
body.pc{ font-size:1.6rem; font-size:16px; }

.pc .attention{ 
	font-size:1rem; font-size:10px; /* 10px */ 
}
.pc #pref,
.pc #company-info th span{ 
	font-size:1.3rem; font-size:13px; /* 13px */
}
.pc .item,
.pc .features-3box div p,
.pc #news ul li{
	font-size:1.5rem; font-size:15px; /* 15px */
}	
.pc #upage-box table{ 
	font-size:1.6rem; font-size:16px; /* 16px */
}
.pc #features p.features6-text,
.pc #business .wbox p{
	font-size:1.8rem; font-size:18px; /* 18px */
}




.pc #greeting p{ 
	font-size:1.9rem; font-size:19px; /* 19px */
}
.pc .features-3box div h3{
	font-size:2.2rem; font-size:22px; /* 22px */
}	
.pc #ymd dt,
.pc #features h1,
.pc #business h1,
.pc #news h1 span{
	font-size:2.5rem; font-size:25px; /* 25px */
}	
.pc footer .copyright #copy{
	font-size:2.6rem; font-size:26px; /* 26px */
}

.pc #upage-box h2,
.pc #features h2,
.pc #news h1{
	font-size:3.6rem; font-size:36px; /* 36px */
}
.pc #main-line h1{
	font-size:4rem; font-size:40px;/* 40px */
}


@media only screen and (min-width: 1025px) {
.pc .maincacth p > span{
	font-size:4rem; font-size:40px; /* 40px */
}
.pc .maincacth p{ 
	font-size:6rem; font-size:60px; /* 60px */
}

.pc .hero-image p > span{
	font-size:4rem; font-size:40px; /* 40px */
}
.pc .hero-image p{ 
	font-size:5.5rem; font-size:55px; /* 55px */
}
}

@media only screen and (max-width:1024px){
.pc .maincacth p > span,
.tb .maincacth p > span,
.sp .maincacth p > span{
	font-size:3.9062vw; /* 40px */
}
.pc .maincacth p,
.tb .maincacth p,
.sp .maincacth p{ 
	font-size:5.3710vw; /* 55px */
}


.pc .hero-image p > span{
	font-size:3.9062vw; /* 40px */
}
.pc .hero-image p{ 
	font-size:5.3710vw; /* 55px */
}
.pc #business .wbox p{
	font-size:1.7578vw; /* 18px */
}
}
@media only screen and (max-width:767px){
.pc #business .wbox p{
	font-size:1.4rem; font-size:14px;
}
}

/* ipad body font-size16px (16/768)*100=2.0833 */
@media only screen  and (min-device-width: 768px) and (max-device-width: 1024px) {
body.tb{ 
	font-size:2.0833vw;
}
.tb .attention{ 
	font-size:1.3020vw; /* 10px */ 
}
.tb #pref,
.tb #company-info th span{ 
	font-size:1.6927vw; /* 13px */
}
.tb .item,
.tb .features-3box div p,
.tb #news ul li{
	font-size:1.9531vw; /* 15px */
}	
.tb #upage-box table{ 
	font-size:2.0833vw; /* 16px */
}
.tb #features p.features6-text{
	font-size:2.3437vw; /* 18px */
}
.tb #business .wbox p{
	font-size:2.0833vw; /* 16px */
}
.tb #greeting p{ 
	font-size:2.4739vw; /* 19px */
}
.tb .features-3box div h3{
	font-size:2.8645vw; /* 22px */
}	
.tb #ymd dt,
.tb #features h1,
.tb #business h1,
.tb #news h1 span{
	font-size:3.2552vw; /* 25px */
}	
.tb footer .copyright #copy{
	font-size:3.3854vw; /* 26px */
}
.tb #upage-box h2,
.tb #features h2,
.tb #news h1{
	font-size:4.6875vw; /* 36px */
}
.tb .hero-image p > span,
.tb #main-line h1{
	font-size:5.2083vw; /* 40px */
}
.tb .hero-image p{ 
	font-size:7.1614vw; /* 55px */
}
}

/* body font-size16px (16/375)*100=4.2666 */
@media only screen and (max-width: 767px){


}

@media screen and (orientation: portrait) {
body.sp{
	font-size:4.2666vw;
}
.sp .attention{ 
	font-size:2.6666vw; /* 10px */
}
.sp #pref,
.sp #company-info th span{ 
	font-size:3.4666vw; /* 13px */
}

.sp .item,
.sp .features-3box div p,
.sp #news ul li{
	font-size:4vw; /* 15px */
}	
.sp #upage-box table{ 
	font-size:4.2666vw; /* 16px */
}
.sp #features p.features6-text,
.sp #business .wbox p{
	font-size:4.8vw; /* 18px */
}
.sp #greeting p{ 
	font-size:5.0666vw; /* 19px */
}
.sp .features-3box div h3{
	font-size:5.8666vw; /* 22px */
}	
.sp #ymd dt,
.sp #features h1,
.sp #business h1,
.sp #news h1 span{
	font-size:6.6666vw; /* 25px */
}	
.sp footer .copyright #copy{
	font-size:6.9333vw; /* 26px */
}
.sp #upage-box h2,
.sp #features h2,
.sp #news h1{
	font-size:9.6vw; /* 36px */
}
.sp .hero-image p > span,
.sp #main-line h1{
	font-size:10.6666vw; /* 40px */
}
.sp .hero-image p{ 
	font-size:14.6666vw; /* 55px */
}
.sp .hero-image p{
	font-size:8.2666vw; /* 31px */
}
.sp .hero-image p > span{
	font-size:6.1333vw; /* 23px */
}
}
@media screen and (orientation: landscape) {
body.sp{
	font-size:3vw;
}
.sp .hero-image p{
	font-size:11.2vw; /* 42px */
}
.sp .hero-image p > span{
	font-size:8.2666vw; /* 31px */
}
}


/* ------------------------------------------------------------------ */
/* Common Styles
/* ------------------------------------------------------------------ */

/* display style */
body.pc .dsp-pc-n,
body.sp .dsp-sp-n{ display:none !important; }
/*#panks{ display:none; }*/

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
   opacity: 0;
}
/**/
.tp15{ padding-top:15px; }

/* fix-right-btn */
#fix-right-btn{
	position:fixed;
	top:150px;
	right:0;
	z-index:999
	;
}
#fix-right-btn div{
	width:50px;
	margin-bottom:5px;
}
#fix-right-btn div a{
	display:block;
	color:#FFF;
}
#box1{ background:#F18E1C; }
#box2{ background:#4087BB; }
#box3{ background:#AAAAAA; }

.img-l{ float:left; }
.img-r{ float:right; }
.text-l{ float:left; }
.no-rec{ background:#DEEBF3; color:#3F85B9; padding:15px 20px 15px 20px; box-sizing:border-box; margin-bottom:60px; }
.no-rec span { border-left:5px solid #4087BB; padding-left:15px;}

@media screen and (orientation: landscape) {
#cont-l{ display:flex; }
.pc #cont-l div,
.tb #cont-l div{ margin-right:25px; }

}
#cont-l #text-p{ margin-bottom:40px; }
.pc #cont-l img,
.tb #cont-l img{ margin-left:auto; margin-right:auto; text-align:center; display:block; }

.rm30{ margin-right:30px; }
.bm20{ margin-bottom:20px; }
.bm30{ margin-bottom:30px; }
.bm40{ margin-bottom:40px; }
.bm50{ margin-bottom:50px; }
.bm60{ margin-bottom:60px; }
.bm70{ margin-bottom:70px; }
.bm80{ margin-bottom:80px; }
#sp-logo{
	position:absolute;
	z-index:999;
}



/* ------------------------------------------------------------------ */
/* b. Page Styles
/* ------------------------------------------------------------------ */

#greeting p{
	color:#333333;
	line-height:1.8;
	margin-bottom:50px;
}
#greeting p img{
	width:90%;
}

#partner p{
	line-height:1.6;
	margin-bottom:80px;
}

.pc #u-newsrelease{
	margin-bottom:50px;
}
#u-newsrelease span{
	color:#F18D1B;
	margin-right:20px;
}

.sp #u-newsrelease span{
	display:block;
}
#u-newsrelease li.bm{
	font-weight:bold;
	margin-bottom:10px;
}

#u-newsrelease li a{
	color:#4087BB;
	text-decoration:underline;
}
#u-newsrelease .text-line{
	padding-bottom:30px;
	border-bottom:1px dotted #CCC;
	margin-bottom:30px;
}

/* ------------------------------------------------------------------ */
/* C. Header Styles
/* ------------------------------------------------------------------ */

header {
	padding:0;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background:#FFFFFF;
	border-bottom:1px solid #E6E6E6;
}
.pc header{
	height:71px;
}


@media screen and (orientation: portrait) {
.sp #sp-logo img{
	width:auto;
	height:40px;
}
.sp #sp-logo img{
	position:relative;
	left:5px;
	top:5px;
}
.sp header {
	height:50px;
}
.sp #nav-wrap > a{
      width: 49px;
      height: 49px;
}

.tb #sp-logo img{
	width:auto;
	height:60px;
}
.tb #sp-logo img{
	position:relative;
	left:5px;
	top:5px;
}
.tb header {
	height:71px;
}

.tb #nav-wrap > a{
      width: 70px;
      height: 70px;
}
}
@media screen and (orientation: landscape) {
.sp #sp-logo img{
	width:auto;
	height:50px;
}
.sp #sp-logo img{
	position:relative;
	left:5px;
	top:5px;
}

.sp header {
	height:60px;
}
.sp #nav-wrap > a{
      width: 59px;
      height: 59px;
}


.tb #sp-logo img{
	width:auto;
	height:70px;
}
.tb #sp-logo img{
	position:relative;
	left:6px;
	top:8px;
}
.tb header {
	height:85px;
}
.tb #nav-wrap > a{
      width: 84px;
      height: 84px;
}

}

dl#header-menu-toggle{
	margin:0;
}
dl#header-menu-toggle dt{
	width:100%;
	border-bottom:1px solid #E6E6E6 !important;
}
dl#header-menu-toggle dt span{
	float:left;
	box-sizing:border-box;
	text-align:center;
	background:#4087BB;
	margin-right:1px;
}
dl#header-menu-toggle dt a{
	color:#FFF;
	display:inline-block;
	width:270px;
	height:49px;
	padding:10px;
}
dl#header-menu-toggle dd{
	clear:both;
}
dl#header-menu-toggle dd,
dl#header-menu-toggle dd ul{
	float:left;
}
#switch ul{
	padding-left:180px;
}
#switch ul,
#switch ul li{
	margin:0 !important;
}
#switch ul li a{
	padding:25px 0;
	display:inline-block;
}

#u-page-menu{
	background-color:#FFFFFF;
}
/* logo */
#u-page-menu > a{
	display:inline-block;
	margin-top:10px;
	padding-left:20px;
}
#u-page-menu ul{
	float:right;
	display: flex;
	align-items: center;
	justify-content:space-around;
	width:728px;
	height:70px;
	margin-right:12px;
}
#u-page-menu ul li{
	font-size:14px;
	box-sizing:border-box;
}
#u-page-menu ul li a{
	padding-right:20px;
	height:20px;
	border-right:1px solid #E6E6E6;
}
#u-page-menu ul li:nth-child(1) a{
	padding-left:20px;
	border-left:1px solid #E6E6E6;
}

#upage-box .bg-w,
#upage-box .bg-b{
	padding-top:60px;
	padding-bottom:60px;
}
#upage-box .bg-w{
	background:url(../images/common/bg-under-arrow.png) no-repeat top;
}
#upage-box .bg-b{
	background:#D8E7F1;
}
#upage-box h3{
	padding:10px 20px;
	background:#EEF9E8;
	margin-bottom:60px;
}
#upage-box h3 a{
	color:#5A9F30;
	text-decoration:underline;
}
#ymd dt{
	width:100%;
	color:#333333;
	padding-left:15px;
	padding-bottom:10px;
	border-bottom:1px solid #CCCCCC;
	margin-bottom:40px;
}



/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;
}

/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
	border-top:1px solid #E6E6E6;
   width: auto;
   text-align: left;
}

ul#nav li {
   width:100vw !important;	
   position: relative;
   list-style: none;
   display: block;

}
/* Links */
ul#nav li a {
   box-sizing:border-box;
   padding:15px 10px 15px 35px;
   text-decoration: none;
   color: #000000;
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}
ul#nav li a:hover { color: #4087BB; }
ul#nav li a:active { background-color: transparent !important; }


/* 多段階展開メニュー
.trigger{
	background:#4087BB !important;
}
.trigger span{
	color:#FFFFFF;
	padding:5px 10px 5px 30px;
	display:block;
    cursor:pointer;
}
.trigger ul{
    display:none;
}
.trigger ul li{
	width:100% !important;
	padding:5px 30px 5px 50px !important;
	box-sizing:border-box;
} */


/* ------------------------------------------------------------------ */
/* c. Hero Section
/* ------------------------------------------------------------------ */


#top .row { max-width: 1040px; }


/* ------------------------------------------------------------------ */
/* section common
/* ------------------------------------------------------------------ */

 .left { float: left; }
 .right { float: right; }

.design{
	height:347px;
	display: flex;
	justify-content: center;
	align-items: center;  
	border-bottom:3px solid #F2F2F2;
}
#news{
   border-bottom:1px solid #E6E6E6;
   padding-top: 50px;
   padding-bottom: 50px;
}



/* ------------------------------------------------------------------ */
/* j. Footer
/* ------------------------------------------------------------------ */

/* Go To Top Button */
#go-top {
	background:#FAFAFA;
	border-top:1px solid #E6E6E6;
	border-bottom:1px solid #E6E6E6;   
}
#go-top a {
	text-align:center;
	padding:15px 0;
	box-sizing:border-box;
	display:block;
	outline:none;
}
#go-top a span{
	display:inline-block;
	margin-right:15px;
}
/* pankslink */
#panks{
	border-top:1px solid #E6E6E6;
	background:#FAFAFA;
	border-bottom:1px solid #E6E6E6;   
}