@charset "utf-8";

/* common
--------------------------------------- */
html{
	font-size:62.5%;
}

body{
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1.4rem;
	line-height:1.765;
	color:#222;
}

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

body{
	font-size:1.3rem;
	line-height:1.6;
}

}

img{
	max-width:100%;
	height:auto;
}

@media screen and (min-width: 768px) {

.pc_hidden{
	display:none;
}

}

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

.sp_hidden{
	display:none;
}

}

/* head
--------------------------------------- */
.head {
	text-align: center;
}

.head img {
	width: 100%;
	height: auto;
}


/* main
--------------------------------------- */
.main {
	/*max-width: 1000px;*/
	/*height: 3000px;*/
	background-color: #e3f1f2;
	margin: 0 auto;
}

/* section01
--------------------------------------- */
.section01 {
	margin: 0 auto;
	margin-bottom: 50px;
	background-color: #e3f1f2;
}

.section01 h2 {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	background-color: #0095a9;
	color: #fff;
	font-size: 3rem;
	font-weight: bold;
}

.section01-inner{
	position:relative;
}


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

.section01 h2 {
	padding: 16px;
	text-align: left;
	font-size: 1.4rem;
	line-height:1.4;
	font-weight:normal;
}

}

.section01 .wrap {
	max-width: 1000px;
	margin: 0 auto;
}

.section01 h3 {
	margin: 0 70px;
	margin-top: 38px;
	margin-bottom: 65px;
	text-align: center;
	font-size: 3.6rem;
	letter-spacing: 3pt;
	border-bottom: 1px solid #e83828 ;
	color: #e83828;
	font-weight:bold;
}

.section01 h3 .up {
	font-size: 4.5rem;
}

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

.section01 h3 {
	margin: 0 10px;
	margin-top: 20px;
	margin-bottom: 22px;
	font-size: 2.6rem;
	letter-spacing: 1pt;
	border:none;
	line-height:1.4;
}

.section01 h3 .up {
	font-size: 3.2rem;
}

}

.section01 .box_left {
	width: 46%;
	float: left;
	padding: 16px;
	background-color: #0095a9;
	border-radius: 10px;
}

.section01 .inner {
	padding: 12px;
	background-color: #fff;
}

.section01 h4 {
	margin-bottom: 16px;
	text-align: center;
	font-size: 2.6rem;
	line-height: 2.2;
}

.section01 .box_left .title {
	color: #0095a9;
	line-height: 1.25;
	font-size: 3.2rem;
}

.section01 .image {
	float: left;
	width: 43%;
}

.section01 .caption {
	float: right;
	width: 53%;
	font-size: 1.6rem;
}

.section01 .box_right {
	float: right;
	width: 46%;
	padding: 16px;
	background-color: #1e2c5d;
	border-radius: 10px;
}

.section01 .box_right .title {
	color: #1e2c5d;
	line-height: 1.25;
	font-size: 3.2rem;
}

.my-parts {
  display:block;
  width: 60px;
  height: 60px;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  /*border: 1px solid rgba(0,0,0,.1);*/
  /*cursor: pointer;*/
}
.my-parts span::before,
.my-parts span::after {
  content: "";
  display: block;
  position:absolute;
  top:0;
  left:0;
  width: 60px;
  height: 10px;
  background: #da2757;
}
.my-parts span::before {
  transform: rotate(-45deg);
}
.my-parts span::after {
  transform: rotate(45deg);
}


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

.section01 .wrap {
	padding:0 15px;
}

}

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

.section01 .wrap {
	max-width:100%;
}

.section01 .box_left,
.section01 .box_right {
	width:100%;
	float:none;
}

.section01 .box_left .title {
	font-size: 2.6rem;
}

.section01 .image {
	width:100%;
	float:none;
	margin-bottom: 16px;
	text-align:center;
}

.section01 .caption {
	width:100%;
	float:none;
	font-size:1.3rem;
}

.section01 .box_right {
	width:100%;
	float:none;
}

.box_right .title {
	font-size: 2.6rem;
}

.my-parts {
  position: relative;
  top:0;
  left:0;
  margin:0 auto;
}

.my-parts span::before,
.my-parts span::after {
  top:25px;
}

}



/* section02
--------------------------------------- */
.section02 {
	max-width: 1000px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #138ea1;
	padding: 25px;
	margin-bottom: 80px;
	border-radius: 10px;
}

.section02 .inner {
	margin-bottom: 30px;
}

.section02 .box_left {
	width: 57%;
	float: left;
	padding: 10px;
	font-size: 1.6rem;
}

.section02 h4 {
	margin-bottom: 13px;
	text-align: center;
	background-color: #efc059;
	font-size: 2.2rem;
	font-weight: bold;
	letter-spacing: 2pt;
}

.section02 .inner h4 {
	background-color: #ccc;
}

.section02 img {
	vertical-align: middle;
}

.section02 .box_right {
	width: 40.3%;
	float: right;
}

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

.section02 {
	margin: 0 15px 50px;
}

}

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

.section02 {
	padding: 15px;
}

.section02 .box_left {
	width:100%;
	float:none;
	padding: 10px;
	font-size: 1.3rem;
}

.section02 .box_right {
	width:100%;
	float:none;
}

.section02 h4 {
	margin-bottom: 0;
	font-size: 2.2rem;
}

}

/* result
--------------------------------------- */
.result {
	background-color: coral;
	padding-bottom: 40px;
	background-color: #fff;
}

.result .ttl {
	background: url(../img/result_bg.jpg);
	background-size: cover;
	padding-top: 70px;
	padding-bottom: 70px;
	margin-bottom: 30px;
}

.result h2 {
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	background-color: rgba(0,149,169,0.8);
	color: #fff;
	font-size: 2.7rem;
	font-weight: bold;
}

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

.result {
	padding-bottom: 10px;
}

.result .ttl {
	background: url(../img/result_bg.jpg);
	background-size: cover;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-bottom: 30px;
}

.result h2 {
	width: 100%;
	padding: 10px;
	font-size: 2.1rem;
}

.result .wrap {
	max-width: 1000px;
	padding: 0 10px;
	}

.result .wrap .inner {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 40px;
}

.result .wrap .inner h3 {
    font-size: 3rem;
	text-align:center;
	line-height:1.3;
}

.result .wrap .inner h3 .up {
	font-size: 6.6rem;
	color: #da2757;
	line-height:1.2;
}

.result .wrap .inner p {
	text-align:center;
	font-size:1.3rem;
}

}

.result .wrap {
	max-width: 1000px;
	margin: 0 auto;
}

.result .inner {
	width: 81%;
	margin: 0 auto;
	margin-bottom: 40px;
}

.result .inner h3 {
    font-size: 3.1rem;
}

.result .inner h3 .up {
	font-size: 6.4rem;
	color: #da2757;
}

.result .inner h3 .down {
	font-size: 3rem;
	color: #da2757;
}

.result .inner p {
	font-size: 1.6rem;
	line-height: 1;
}

.result .box_left {
	width: 48%;
	float: left;
	margin-bottom: 60px;
}

.result .inner_left {
	width: 34%;
	float: left;
}

.result .inner_right {
	width: 66%;
	float: left;
}

.result .inner_right img {
	width: 290px;
}

.result .inner_right .time {
	color: #f47e5c;
	font-size: 2.8rem;
	line-height: 2.4;
}

.result .inner_right p {
	font-size: 2.2rem;
}

.result .box_right {
	width: 48%;
	float: right;
	margin-bottom: 60px;
}

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

.result .box_left {
	margin-bottom: 40px;
}

.result .inner_left img {
	padding-right: 8px;
}


.result .inner_right .time {
	font-size: 1.6rem;
	line-height: 1.2;
}

.result .inner_right p {
	font-size: 1.4rem;
}

.result .box_right {
	margin-bottom: 40px;
}

}

/* voice
--------------------------------------- */
.voice {	
	background-color: #fff;
	padding-bottom: 100px;
}

.voice .wrap {
	max-width: 1000px;
	margin: 0 auto;
}

.voice h3 {
	text-align: center;
	font-size: 3rem;
	letter-spacing: 5px;
	color: #0095a9;
}

.voice .wrap > p {
	text-align: center;
	font-size: 1.8rem;
	line-height: 1;
	margin-bottom: 30px;
	color: #0095a9;
}

.voice ul {
	display: flex;
}

.voice ul li {
	width: 23%;
	margin-right: 2.666%;
	float: left;
	padding: 20px;
	background-color: #0095a9;
	color: #fff;
	border-radius: 10px;
}

.voice ul li:last-child {
	margin-right: 0;
}

.voice ul li .name {
	text-align: right;
	font-size: 1.7rem;
}

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

.voice {	
	padding-bottom: 40px;
}

.voice h3 {
	font-size: 2.8rem;
}

.voice ul {
	display: block;
	padding:0 15px;
}

.voice ul li {
	width: 100%;
	float: none;
	padding: 15px;
	margin-bottom: 10px;
}

.voice ul li .name {
	font-size: 1.3rem;
}

}

/* foot
--------------------------------------- */
.foot {
	background-color: #f4f4f5;
	padding-bottom: 100px;
}

.foot .ttl {
	background: url(../img/foot_bg.jpg);
	background-size: cover;
	padding-top: 70px;
	padding-bottom: 70px;
	margin-bottom: 35px;
}

.foot h2 {
	max-width: 940px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	background-color: rgba(11,14,53,0.85);
	color: #fff;
	font-size: 2.7rem;
	font-weight: bold;
}

.contact {
	max-width: 1100px;
	margin: 0 auto;
}

.contact h3 {
	text-align: center;
	font-size: 3rem;
	letter-spacing: 5px;
	color: #0095a9;
	margin-bottom: 30px;
}

.contact p {
	font-size: 2rem;
	text-align:center;
}

.contact .tel {
	font-size: 3.0rem;
	font-weight:bold;
	margin-right:20px;
}

.contact .down {
	font-size: 1.6rem;
}

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

.foot {
	background-color: #f4f4f5;
	padding-bottom: 100px;
}

.foot .ttl {
	background: url(../img/foot_bg.jpg);
	background-size: cover;
	padding-top: 50px;
	padding-bottom: 50px;
}

.foot h2 {
	width: 100%;
	padding: 10px;
	font-size: 2.1rem;
}

.contact h3 {
	font-size: 2rem;
	letter-spacing: 4px;
	border:1px solid #0095a9;
	margin:0 60px 20px 60px;
}

.contact .down {
	font-size: 1.4rem;
}

}


/* scrooll top
---------------------------------------- */

#scroolltop{
	position:fixed;
	right:10px;
	bottom:10px;
	width:50px;
	height:50px;
	background:#5896D5;
	color:#fff;
	font-size:110%;
	text-align:center;
	text-decoration:none;
	z-index:1000;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	transform:scale(0);
}

#scroolltop:hover{
	opacity:0.8;
	text-decoration:none;
}

#scroolltop.show{
	transform:scale(1);
	-webkit-transform:translateZ(1);
}

a#scroolltop{
	display:block;
}

#scroolltop:before,
#scroolltop:after{
	position:absolute;
	left:50%;
	content:"";
	width:0;
	height:0;
}

#scroolltop:before{
	top:50%;
}

#scroolltop:after{
	top:50%;
	z-index:-1;
}

@media screen and (min-width: 768px) {

#scroolltop{
	width:50px;
	height:50px;
}

#scroolltop:before,
#scroolltop:after{
	margin-left:-10px;
	border:10px solid transparent;
}

#scroolltop:before{
	margin-top:-14px;
	border-bottom:10px solid #5896D5;
}

#scroolltop:after{
	margin-top:-15px;
	border-bottom:10px solid #fff;
}

}

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

#scroolltop{
	width:30px;
	height:30px;
}

#scroolltop:before,
#scroolltop:after{
	margin-left:-5px;
	border:5px solid transparent;
}

#scroolltop:before{
	margin-top:-6px;
	border-bottom:5px solid #5896D5;
}

#scroolltop:after{
	margin-top:-8px;
	border-bottom:5px solid #fff;
}

}