@charset "UTF-8";
*{
	box-sizing: border-box;
	text-decoration: none;
}
html{
	font-size: 62.5%;
}
body {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;
	height: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adzjust: 100%;
}
#wrapper {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
body > #wrapper {height: auto;	}
img {max-width: 100%;height: auto;vertical-align: bottom;}
@media print {
	html,html body{overflow: visible !important;}
}	
		
/* リンク */
a{
	color:#333;
	text-decoration:none;
	transition: all 0.3s ease;
}
a:hover{
	filter:alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
	transition: all 0.3s ease;
}
a:after{
	transition: all 0.3s ease;
}
a img {
	transition: all 0.3s ease;
}
a:hover img {
	filter:alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
	transition: all 0.3s ease;
}
a:visited {color:#333;}
a:hover   {color:#333;}
a:active  {color:#333;}

.container {width: 100%;max-width: 980px;margin: 0 auto;}
	
.pc {display: inline;}
.sp {display: none;}
.tablet{display: none;}

.txt_center{text-align:center;}
.justify{text-align: justify;}
.txt_right{text-align:right;}
/*-----------------------------------

ヘッダー

-------------------------------------*/
header {
	width: 100%;
	overflow: hidden;
	border-bottom: 1px solid #ccc;
	background: #fff;
	position: relative;
	z-index: 999;
	padding: 10px 0;
}
#siteTitle{
	margin-bottom: 0;
	font-size: 20px;
	font-size: 2rem;
}
#siteTitle img{width: 20%;}
/*-----------------------------------

ナビゲーション

-------------------------------------*/
#gnav li{
	position: absolute;
	z-index: 999;
}
#gnav li a{
	display: block;
	background: #0950a0;
	color: #fff;
	padding: 15px 25px;
	text-align: center;
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: bold;
	border-radius: 50px;
}
#gnav i{padding-left: 10px;}
#gnav #gnav01{
	top: 76%;
	left: 4.5%;
}
#gnav #gnav02{
	top: 88%;
	left: 15%;
}
/*-----------------------------------

メインビジュアル

-------------------------------------*/
#main {
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}
#mainVisual{
	background: #fff url(../img/rotec_back.jpg)no-repeat top center;
	background-size: cover;
	width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 999;
	overflow: hidden;
}
#mainVisual:before {
  content: "";
  position: absolute;
  height: 300px;
  width: 300%;
  background: #fff;
  bottom: -200px;
  left: -100%;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}
.main_container{
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}
/*-----------------------------------

背景

-------------------------------------*/
.bg_white{
	background: #fff;
	width: 100%;
	position: relative;
	padding-bottom: 300px;
	overflow: hidden;
}
.bg_white:before {
  content: "";
  position: absolute;
  height: 400px;
  width: 300%;
  background: #eee;
  bottom: -250px;
  left: -100%;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.bg_gray{
	background: #eee;
	width: 100%;
	position: relative;
	padding-bottom: 300px;
	overflow: hidden;
}
.bg_gray:before {
  content: "";
  position: absolute;
  height: 400px;
  width: 300%;
  background: #fff;
  bottom: -250px;
  left: -100%;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}
/*-----------------------------------

全体的な文字指定

-------------------------------------*/
h1{
	font-size: 50px;
	font-size: 5rem;
	line-height: 1.25;
	margin-bottom: 10px;
}  
h2{
	font-size: 32px;
	font-size: 3.2rem;
	text-align: center;
}
.sub{
	font-size: 28px;
	font-size: 2.8rem;
	line-height: 1.25;
}
.sub02{
	font-size: 40px;
	font-size: 4rem;
	line-height: 1.3;
}
.sub_small{
	font-size: 20px;
	font-size: 2rem;
}
.description{
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 1.7;
	padding: 50px 0 60px;
}
.description02{
	font-size: 20px;
	font-size: 2rem;
}
/*-----------------------------------

吟水トップの利用シーン

-------------------------------------*/
.flexbox{
	-js-display: flex;
	display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
	width: 100%;
}
.flexbox dl{
	width: 50%;
}
.flexbox ul{
	font-size: 18px;
	font-size: 1.8rem;
	list-style: disc outside;
	margin-left: 20px;
}
.flexbox .box01{padding-right: 3%;}
.flexbox .box02{padding-left: 3%;}
.flexbox dt{margin-top: 40px;}
.flexbox dd{margin-top: 20px;}
.circle {
	border-radius:50%;
	width: 80%;

}
.ctext {
	margin-top:2.5rem;
	font-size: 2.4rem;
}
dt.cposition{
	text-align: center;
}
/*-----------------------------------

#secondSection

-------------------------------------*/
.sugoi_list{
	list-style: disc outside;
	margin-left: 25px;
}
.sugoi_list li{
	font-size: 28px;
	font-size: 2.8rem;
	padding: 10px 0;
}
/*-----------------------------------

#thirdSection

-------------------------------------*/
#thirdSection{margin: 80px 0 120px;}
#thirdSection img{margin-top: 30px;}
/*-----------------------------------

#fisrtSection & #forthSection

-------------------------------------*/
.fs_box01{padding-top: 40px;}
.fs_box02{padding-top: 80px;}
.fs_box01 img, .fs_box02 img{
	margin-top: 10px; 
	margin-bottom: 30px;}
/*-----------------------------------

footer

-------------------------------------*/
footer {
	width: 100%;
	padding-bottom: 40px;
	overflow: hidden;
	background: #fff;
	position: relative;
	z-index: 999;
}
#footer_add{
	font-size: 18px;
	font-size: 1.8rem;
}
#footer_add h1{
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 5px;
}
#footer_add .bold{font-weight: bold;}
#footer_company{
	font-size: 18px;
	font-size: 1.8rem;
	margin-top: 40px;
}
#footer_company i{padding-left: 5px;}
#footer_company li{
	display: inline;
	margin-right: 10px;
}
#footer_company a{dispaly: block;}
#footer_company a:hover{text-decoration: underline;}
#footer_link{
	-js-display: flex;
	display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
    -ms-flex-pack: space-around;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
	margin: 50px 0;
	width: 100%;
}
#footer_link li a{
	display: block;
	background: #eee;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	padding: 15px 25px;
	border-radius: 10px;
	margin-bottom: 10px;
}
#copyright {
	font-size: 10px;
	font-size: 1rem;
}
/*-----------------------------------

ページトップ

-------------------------------------*/
.pagetop {
	position: fixed;
	bottom: 0;
	right: 20px;
	z-index: 2000;
	cursor: pointer;
	font-size: 80px;
	font-size: 8rem;
	color: #0950a0;
}

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

768px以下

-------------------------------------*/
@media screen and (min-width: 481px) and (max-width:768px) {	
	#gnav li a{
		display: block;
		background: #0950a0;
		color: #fff;
		padding: 13px 20px;
		text-align: center;
		font-size: 22px;
		font-size: 2.2rem;
		font-weight: bold;
		border-radius: 50px;
	}
	#gnav #gnav01{
		top: 52%;
		left: 4.5%;
	}
	#gnav #gnav02{
		top: 70%;
		left: 8%;
	}
	.pc{display:none;}
	.tablet{display:inline;}
}

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

768px以下

-------------------------------------*/
@media screen and (max-width: 480px) {	

	#wrapper {width: 100%;}
	
	.pc {display: none;}
	.sp {display: inline;}
	.tablet{display: none;}
	
	.container{padding: 0 10px;}
	
	.txt_right{text-align: center;}
	.sp_center{text-align: center;}
	
	.bg_white{padding-bottom: 200px;}
	.bg_white:before {bottom: -300px;}
	.bg_gray{padding-bottom: 200px;}
	.bg_gray:before {bottom: -300px;}
	
	h1{
		font-size: 25px;
		font-size: 2.5rem;
		font-weight: bold;
		margin-bottom: 5px;
	}
	h2{
		font-size: 22px;
		font-size: 2.2rem;
		font-weight: bold;
		line-height: 1.3;
	}
	.sub{
		
		font-size: 1.8rem;
		line-height: 1.5;
	}
	.sub02{
		font-size: 20px;
		font-size: 2rem;
		line-height: 1.5;
	}
	.sub_small{
		font-size: 16px;
		font-size: 1.6rem;
	}
	.description{
		line-height: 1.6;
		padding: 30px 0 50px;
		font-size: 18px;
		font-size: 1.8rem;
	}
	.description02{
		line-height: 1.6;
		padding: 0 0 20px;
		font-size: 18px;
		font-size: 1.8rem;
	}

	#siteTitle{
		font-size: 13px;
		font-size: 1.3rem;
	}
	#siteTitle img{width: 30%;}
	
	nav{padding: 0 10px 40px;}
	#gnav li{position: static;}
	#gnav li a{
		display: block;
		font-size: 4.5vw;
		margin: 10px 0;
		padding: 15px 0;
	}
	#gnav i{padding-left: 5px;}

	
	.flexbox dl{width: 100%;}
	.flexbox ul{font-size: 18px;font-size: 1.8rem;;}
	.flexbox dt{margin-top: 30px;}
	.flexbox dd{margin-top: 10px;}
	.flexbox .box01{padding-right: 0;}
	.flexbox .box02{padding-left: 0;}
	
	.fs_box01{padding-top: 20px;}
	.fs_box02{padding-top: 30px;}
	#firstSection img, #forthSection img{margin-top: 10px; margin-bottom: 20px;}
	
	.sugoi_list li{
		padding: 5px 0;
		font-size: 20px;
		font-size: 2rem;
	}
	
	#firstSection .sub{text-align: left;}

	#thirdSection{margin: 50px 0 80px;}
	#thirdSection .sub{text-align: left;!important	}
	#thirdSection img{margin-top: 30px;}

	footer {padding-bottom: 20px;}
	#footer_add{
		font-size: 18px;
		font-size: 1.8rem;
	}
	#footer_add h1{
		font-size: 18px;
		font-size: 1.8rem;
	}
	#footer_company{
		font-size: 18px;
		font-size: 1.8rem;
	}
	#footer_company li{
		display: block;
		margin-right: 0;
	}
	#footer_link{margin: 20px 0;}
	#footer_link li{
		width: 100%;
	}
	#footer_link li a{
		font-size: 18px;
		font-size: 1.8rem;
	}
	.pagetop {
		font-size: 60px;
		font-size: 6rem;
		bottom: 20px;
	}