@charset "UTF-8";

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

/*breadcrumbs*/
#breadcrumbs { margin: 5px 0 !important; }

/*arcPage*/
.arcPage * { box-sizing: border-box; }
.arcPage img { width: 100%; }
.arcPage li { list-style: none; }
.arcPage p { line-height: 1.8; font-size: 124%; }
.arcPage ul { padding: 0; }

/*sideBtn*/
#sideBtn { position: fixed; right: 0; top: 20%; z-index: 101; }
#sideBtn ul { margin: 0; padding: 0; }
#sideBtn ul li { width: 72px; margin: 10px 0; list-style: none; }
#sideBtn ul li a { transition: opacity .4s; }
#sideBtn ul li img { width: 100%; }

/*atComment*/
.arcPage .atComment { margin-top: 10px; }
.arcPage .atComment li { margin-top: 4px; line-height: 1.6; }
.arcPage .atComment li a { padding-left: 25px; margin-top: 4px; position: relative; display: inline-block; text-decoration: none; }
.arcPage .atComment li a::before { position: absolute; content: ""; display: block; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 10px; background-color: #297091; clip-path: polygon(0 0, 0% 100%, 100% 50%); }


/*h*/
.pName { font-size: 130%; font-weight: normal; margin-top: 60px; }
.pName span { font-size: 130%; color: #297091; font-weight: bold; }
.pName img { width: 750px; margin-bottom: 30px; }

.topIcon { margin-top: 100px; padding-top: 45px; background: url("../images/title_bg.png") no-repeat center top; font-size: 260%; line-height: 1.5; text-align: center; }
.topIcon .atComment { font-size: 50%; margin-top: 10px; display: inline-block; }

p.bTxt strong { font-size: 120%; margin-top: 50px; display: inline-block; }
p.bTxt + p { margin-top: 20px; }

.hTen { position: relative; font-size: 140%; padding-left: 15px; }
.hTen::before { position: absolute; content: "●"; color: #297091; font-size: 50%; left: 0; top: 0.7em; }
.hTen + p { margin-top: 15px; }

/*bg*/
.blueBg { background: url("../images/bg_top.png") no-repeat left top / 100%, url("../images/bg_bottom.png") no-repeat left bottom / 100%, #d6e4eb; margin-top: 8vw; padding: 10vw 0 20vw; }

/*mv*/
#mvSection { position: relative; }
#mvSection h2 { width: 100%; }
#mvSection .linksInner { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); }

/*link*/
.linksInner { display: flex; justify-content: center; align-items: center; }
.linksInner li a { display: block; min-width: 240px; text-align: center; font-size: 120%; color: #fff; margin: 10px; padding: 15px; border-radius: 10px; background: rgba(15,120,170,0.8); position: relative; text-decoration: none; transition: opacity .4s; }
.linksInner li a::after { position: absolute; content: ""; display: block; right: 12px; top: 50%; transform: translateY(-50%); width: 6px; height: 12px; background-color: #fff; clip-path: polygon(0 0, 0% 100%, 100% 50%); }

.linksInner li span { display: block; min-width: 240px; text-align: center; font-size: 120%; color: #fff; margin: 10px; padding: 15px; border-radius: 10px; background: #333; opacity: 0.3; position: relative; text-decoration: none; }


/*list*/
.featuresList1 { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 50px; }
.featuresList1 li { width: 48.5%; border: 1px solid #a0b1ba; margin: 15px 0; border-radius: 10px; padding: 25px; text-align: left; }
.featuresList1 li h5 { font-size: 140%; }
.featuresList1 li p { margin-top: 10px; }

.featuresList2 { text-align: left; }
.featuresList2 .infoBpx { padding-left: 25px; }
.featuresList2 li > h5 { margin-top: 60px; }

/*area*/
.contentsArea { width: 90%; max-width: 980px; margin: 0 auto; }
.contentsArea h4 + div { margin-top: 60px; }

.sepInner { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 60px; }
.sepInner.imgBox2 { margin-top: 30px;}
.sepInner .imgBox { width: 48.5%; border-radius: 10px; overflow: hidden; }
.sepInner .infoBox { width: 48.5%; }
.sepInner .featuresList1 { margin-top: 0; }
.sepInner .featuresList1 li { width: 100%; padding: 24px 25px; }
.sepInner .featuresList1 li:nth-child(1) { margin-top: 0; }
.sepInner .featuresList1 li p { margin-top: 5px; }

/*img*/
.rImg { border-radius: 10px; overflow: hidden; }

/*inlinkSection*/
#inlinkSection { margin-top: 60px; text-align: center; }
#inlinkSection .bLink a { font-size: 120%; color: #000; width: 80%; max-width: 360px; display: flex; justify-content: center; align-items: center; margin: 40px auto 100px; text-decoration: none; border: 1px solid #297091; padding: 15px; position: relative; border-radius: 10px; transition: all .4s; }
#inlinkSection .bLink a img { width: 80px; margin-right: 10px; }
#inlinkSection .bLink a:hover { color: #000; }
#inlinkSection .bLink a::after { position: absolute; content: ""; display: block; right: 12px; top: 50%; transform: translateY(-50%); width: 6px; height: 12px; background-color: #297091; clip-path: polygon(0 0, 0% 100%, 100% 50%); }

/* catalogOuter */
#catalogOuter { margin-bottom: 40px; }
#catalogOuter .catalogBnArea { width:980px; margin:0 auto; }

#catalogOuter { background: #d6e4eb; }
#catalogOuter #catalogWrap { position: static; padding: 40px 0; }
#catalogOuter #productsCatalog h3 { background: none; padding: 0; }
#catalogOuter #catalogWrap #productsCatalog { margin: 0; }
#catalogOuter #catalogWrap #productsCatalog ul { margin-top: 15px; margin-right: 25px; }
#catalogOuter #productsCatalog2 h3 { background: none; padding:0; }
#catalogOuter #catalogWrap #productsCatalog2 ul { margin-top:5px; }

@media screen and (min-width:640px){
    
    /*sideBtn*/
    #sideBtn ul li a:hover { opacity: 0.7 }
    
    /*mv*/
    .linksInner li a:hover { opacity: 0.7 }
    
    /*inlinkSection*/
    #inlinkSection .bLink a:hover { opacity: 0.7 }
}

@media screen and (max-width:979px){
	#catalogOuter .catalogBnArea { width:96%; margin:0 auto; }
	#catalogOuter #productsCatalog { padding-bottom:15px; }
	#catalogOuter #productsCatalog2 { padding-bottom:15px; }
}

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

    /*display*/
    .tbDisplayNone { display: none; }
}

@media screen and (max-width:640px){
    
    /*breadcrumbs*/
    #breadcrumbs { margin: 0 !important; }
    
    /*arcPage*/
    .arcPage p { font-size: 110%; }
    
    /*sideBtn*/
    #sideBtn { top: 26%; }
    #sideBtn ul li { width: 46px; }
        
    /*h*/
    .pName { font-size: 100%; margin-top: 40px; }
    .pName span { font-size: 110%; line-height: 1.6; }
    .pName img { width: 750px; margin: 8px 0 14px; }
    
    .topIcon { margin-top: 40px; padding-top: 30px; font-size: 160%; }
    .topIcon .atComment { font-size: 60%; }
    
    p.bTxt strong { font-size: 120%; margin-top: 30px; text-align: left; width: 100%; }
    p.bTxt + p { margin-top: 8px; text-align: left; font-size: 110%; }
    
    .hTen { font-size: 130%; margin-top: 15px; }
    .hTen::before { font-size: 45%; }
    .hTen + p { margin-top: 7px; font-size: 110%; }
    
    /*bg*/
    .blueBg { margin-top: 12vw; }
    
    /*mv*/
    #mvSection .linksInner { bottom: 3%; }
    
    /*link*/
    .linksInner li a { display: flex; justify-content: center; align-items: center; min-width: 160px; font-size: 110%; margin: 10px 5px; padding: 8px; min-height: 56px; }

    /*list*/
    .featuresList1 { display: block; margin-top: 10px; }
    .featuresList1 li { width: 100%; margin: 15px auto; padding: 20px; }
    .featuresList1 li h5 { font-size: 120%; line-height: 1.4; }
    .featuresList1 li p { margin-top: 7px; font-size: 110%; }
    .featuresList2 li > h5 { margin-top: 30px; }
    
    /*area*/
    .contentsArea h4 + div { margin-top: 30px; }
     
    .sepInner { display: block; margin-top: 30px; }
    .sepInner.imgBox2 { margin-top: 10px;}
    .sepInner .imgBox { width: 100%; }
    .sepInner .infoBox { width: 100%; }
    
    .sepInner .featuresList1 { margin-top: 15px; }
    .sepInner .featuresList1 li { padding: 20px; }
    .sepInner .featuresList1 li p { margin-top: 7px; }
    
    /*inlinkSection*/
    #inlinkSection { margin-top: 60px; }
    #inlinkSection .bLink a { font-size: 110%; margin: 20px auto 60px; }
    #inlinkSection .bLink a img { width: 60px; }
    
    /* catalogOuter */
	#catalogOuter .catalogBnArea { width:100%; margin:0 auto; }
	
	#catalogOuter #catalogWrap { margin-top: 20px; padding: 20px 0; }
	#catalogOuter #catalogWrap #productsCatalog { width: 90%; margin: 0 auto; }
	#catalogOuter #catalogWrap #productsCatalog h3 { width: 33%; }
	#catalogOuter #catalogWrap #productsCatalog p { display: block; margin-left: 2%; width: 65%; }
	#catalogOuter #catalogWrap #productsCatalog ul { float: none; clear: both; margin: 0; margin-right: 0px; padding-top: 10px; width: 100%; }

	#catalogOuter #catalogWrap #productsCatalog2 { width:90%; }
	#catalogOuter #productsCatalog2 h3 { margin-left:4px; }
	#catalogOuter #catalogWrap #productsCatalog2 ul { margin-top:10px; }

}