/* sub nav */
nav {  background: rgba(0, 151, 214, 1); }

nav.newNav {  background: rgba(255, 255, 255, 1); }
nav.topNav {  background: rgba(255, 255, 255, 1); }

/* sub cmn */
#mv {
    width: 100%;
    height: 350px;
    margin: 0 auto;
    position: relative;
}

#mv .mvInr {
    margin: 0 auto;
    max-width: 1280px;
    width: 100%;
    height: 100%;
    position: relative;
}
.subtitlebox {
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 90px;
}

.subtitlebox p.text03 {
    font-size: 17px;
    font-weight: bold;
}

.text02 {font-size:5rem;}


.squarebox {
    position: relative;
    z-index: 0;
    width: 1024px;
    margin: 0 auto;
}
.square {
    background: #f2fcff;
    width: 100%;
    height: 130px;
    position: absolute;
    left:0%;
    right: 0%;
    margin: auto;
    transform: translate3d(0%, -45%, 0);
}

#contents {
    z-index: 2;
    position: relative;
}

#sec01 {
    background: #f2fcff;
    padding: 40px 0px;
}

.box{
    margin-bottom: 10%;
    text-align: center;
}
.box h2.subtitle{
    color: #0097d6;
    font-size: 34px;
    border-bottom: 2px solid #0097d6;
    display: inline-block;
    margin-bottom: 50px;
}
.box h2.subtitlewh{
    color: #fff;
    font-size: 34px;
    border-bottom: 2px solid #fff;
    display: inline-block;
    margin-bottom: 50px;
}

.headTop01 {
	font-size: 2.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1.2;
	margin: 0 auto 1.0em;
	text-align: center;
	position: relative;
	
}
	
.headTop01::after {
	background-color: #000;
	content: ' ';
	height: 3px;
	width: 30px;
	position: absolute;
	top: 1.0em;
	left: 50%;
	margin-left: -15px;
}
	

.headTop01 span {
	font-size:1.6rem;
	font-weight:bold;
	display:block;
	margin: 0 0 1.3em 0;
	letter-spacing: 0;
	font-family: 'Roboto', sans-serif;
}

.middleTl {
	font-size: 2.0rem;
	font-weight: 600;
	margin: 3.2em 0 1em;
	letter-spacing: 0;
}

.smallSize {
	font-size: 1.3rem;
	letter-spacing: 0;
}

.bgGrayArea {
	background: #F9F9F9;
	padding: 1.3em 1.5em;
	margin: 1.6em 0 0;
}

.noneList li {
	line-height: 1.4;
	margin: 0.1em 0;
	padding: 0.2em 0;
	list-style-type: none;
	font-size: 1.3rem;
	letter-spacing: 0;
	font-weight: 500;
}

.noneList li:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}


.box p {
    font-size: 15px;
    margin-bottom: 30px;
}


.btnOneTwo {
		margin: 40px 0 0;
}

a.hvr-icon-forward {
	background-color: #111;
	display: inline-block;
	font-size: 1.6rem;
	vertical-align: middle;
	color: #fff !important;
	border-radius: 5px;
	margin: 0 ;
	text-align: center;
	width: 100%;
	max-width: 270px;
	min-width: 270px;
	height: 48px;
	cursor: pointer;
	font-weight: bold;
	line-height: 52px;
	position: relative;
	transition: 0.3s;
}

.hvr-icon-forward:hover {
		background-color: #444;
		opacity: 1;
	text-decoration: none;
}

#firstView {
	width: 100vw;
	height: 100vh;
	
}

/* --------------- chapter1 ---------------- */

/* box1 */
.fltLbox {
    float: left;
    width: 47%;
    margin-right: 5%;
}
.fltLbox_s {
    position: absolute;
    color: #0097d6;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 17%;
    font-size: 20px;
}

.fltRbox {
    float: left;
    width: 47%;
}
.fltLbox img,.fltRbox img {
    width: 100%;
}

#ex { position: relative;}
#ex .infotext {
    font-size: 15px; 
    font-weight: bold;
    margin-bottom: 0px!important;
}

.tag001 {
    padding: 3px 20px;
    border-radius: 30px;
    background: #d04949;
    color: #fff;
    font-weight: bold;
    font-size: 13px!important;
    display: inline-block;
    margin-bottom: 0px!important;
}

.tag001.cblue {
    background: #21a4dc;
}


/* box2 */
.fltLbox02{ 
    float: left;
    width: 45%;
    margin-right: 3%;
}
.fltLbox02 img {
    width: 100%;
}
.fltRbox02 {
    float: left;
    width: 50%;
    text-align: left;
}
.fltRbox02 dl dd {
    margin-bottom: 30px;
    line-height: 2em;
}
.fltRbox02 dl dd p {
    margin-bottom: 3px;
}
.fltRbox02 dl dt {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.7em;
}


/* #sec02 */ 
/* box3 */
.onlyimg img {
    width: 70%;
    border: 7px solid #fff;
}

.textbox {
    margin-top: 30px;
    text-align: left;
}

.ftxt  {
    float: left;
    width: 48%;
    margin-right: 2%;
}
.ftxt2  {float: left; width: 47%;}

.bgtag {
    background: #0f3961;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 2px 10px;
    line-height: 2em;
}

.textbox02{
    margin-top: 30px;
    text-align: center;
}


@media screen and (max-width: 1100px) { 
.square {display: none; width: 100%;}
}


@media screen and (max-width: 1080px) and (min-width: 801px) { 
.squarebox {  width: 100%;}      
.scInrS { width: 768px;}
}

@media screen and (max-width: 800px) {  
 .squarebox {  width: 100%;}   
#mv { height: 270px;}
.subtitlebox { padding-top: 60px; }
.box h2.subtitle, .box h2.subtitlewh{font-size: 25px;}
.fltLbox, .fltRbox,.fltLbox02, .fltRbox02 {
    width: 100%;
    margin-bottom: 2%;
}
.fltLbox_s {display: none;}

.ftxt, .ftxt2 {
    float: none;
    width: 100%;
}

.onlyimg img {
    width: 100%;
    border: 4px solid #fff;
}

	

#contents p.smallSize {
	font-size: 1.2rem;
}
	
	
.headTop01 {
	font-size: 2.3rem;
	letter-spacing: 0.07em;
}
	
.headTop01::after {
	background-color: #000;

}
	

.headTop01 span {
	font-size:1.5rem;

}	
	
.btnOneTwo {
		margin: 20px 0 0;
}
	
.middleTl {
	font-size: 1.8rem;
	margin: 1.5em 0 0.8em;
}
	
	
	
	
}


@media screen and (max-width: 320px) {  
.box h2.subtitle, .box h2.subtitlewh {font-size: 22px;}
#contents p { font-size: 14px;}
}


/* --------------- chapter2 ---------------- */