@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html,body {
	height: 100%;
}

html {
	 font-size: 62.5%;
	 -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
  position: relative;
  line-height: 1.7;
  margin: 0;
  color: #333;
  overflow-x: hidden;
  letter-spacing: 0.1em;
  font-family: Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
html,body { height:100%;}
body { font-size: 1.8rem}
img {
	border: 0px;
	vertical-align: top;
	line-height: 0px;
	width: 100%;
	height: auto
}
ul,li,dl,dt,dd,p,h1,h2,h3,h4,em { margin:0; padding:0; font-style: normal}
ul,li {	list-style-type: none}
h2 { margin-bottom: 70px; font-size: 3.6rem; text-align: center; font-family: 'Noto Sans JP', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"}
th,td { padding: 15px 30px; text-align: left; vertical-align: top}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
article { padding: 70px 5%}
section { margin: 0 auto; max-width: 980px}

a { 
	color:#333; cursor:pointer;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
	text-decoration: none
}
a:visited { cursor:pointer;}
a:hover { cursor:pointer;}

.btn { max-width: 844px; margin: 0 auto; position: relative}
.btn { display: block; box-shadow: 7px 7px #cfc700}
.btn:hover { top: 2px; left: 2px; box-shadow: 5px 5px #cfc700}
.btn:active { top: 7px; left: 7px; box-shadow: 0px 0px #cfc700}

.color-1 { color: #33838e}
.color-2 { color: #c27154}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between
}
main p {
	margin-bottom: 1em;
	line-height: 1.9;
}

@media (min-width: 1001px) {
	.hidden-xs { display: none !important}
}
@media (max-width: 1000px) {
	.visible-xs { display: none !important}
	th,td { padding: 10px 15px}
	h2 { margin-bottom: 50px; font-size: 2.4rem; text-align: left}
}

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

	header

------------------------------------------------*/
header { background: url("../images/mv.jpg") no-repeat 0 0; background-size: cover}
header h1 { font-size: 4.8rem}
header h1 span { background: #f6ec00; padding: 10px 20px 10px 20px; margin-bottom: 20px; line-height: 2}
header h1 .h1-first { padding-right: 0px}
header h1,
header h1 + p { margin-bottom: 56px}
header h1 + p img { max-width: 661px}
header .inner > div { width: 50%; text-align: left}
header li { background: url("../images/arrow-01.png") no-repeat 0 50%; padding-left: 43px; line-height: 32px; font-weight: bold}
@media screen and (max-width: 1300px){
	header h1 { font-size: 4rem}
}
@media screen and (max-width: 1000px){
	header { padding: 60px 5% 90px}
	header h1 { font-size: 2.4rem}
	header h1 span { padding: 10px; line-height: 2.4}
	header li { margin: 0 0 10px 0}
	header li span { background: #fff}
}
@media screen and (min-width: 1001px){
	header { padding: 140px 5% 90px}
	header .inner { max-width: 680px; margin-left: 45%}
	header li { margin: 0 0 10px 140px}
}


#banner-area img { max-width: 800px; height: auto}
#banner-area p { text-align: center}



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

	#content-01

------------------------------------------------*/
@media screen and (max-width: 1000px){
	
}
@media screen and (min-width: 1001px){
	
}


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

	#content-02

------------------------------------------------*/
#content-02 { padding: 70px 0}
#content-02 ul { overflow: hidden; max-width: 1000px; margin: 0 auto}
#content-02 li { text-align: center; font-size: 1.7rem; font-weight: bold; letter-spacing: 0}
#content-02 li img { margin-bottom: 20px; max-width: 266px; height: auto}
#content-02 li p { display: inline-block; text-align: left}
@media screen and (max-width: 1000px){
	#content-02 h2 { font-size: 2rem}
	#content-02 h2 span { font-size: 2.2rem; letter-spacing: 0}
	#content-02 h2,
	#content-02 h2 + p { padding: 0 5%}
	#content-02 li { background: linear-gradient(#fff 60%, #33838e 40%); color: #fff; text-align: center; padding: 30px 0 10px}
	#content-02 li img { width: 60%; height: auto; display: block; margin: 0 auto 10px}
}
@media screen and (min-width: 1001px){
	#content-02 h2 { font-size: 3.4rem}
	#content-02 h2 span { font-size: 4.4rem}
	#content-02 h2 + p { text-align: center}
	#content-02 .inner { background: url("../images/band.png") no-repeat 0 100%; background-size: 100% auto}
	#content-02 li { float: left; width: 30%; padding: 30px 0}
	#content-02 li:first-child { margin-right: 100px}
	#content-02 li:first-child { color: #fff}
}


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

	#content-03

------------------------------------------------*/
#content-03 h2 { background: url("../images/ttl-l.png") no-repeat 0 50%, url("../images/ttl-r.png") no-repeat 100% 50%}
#content-03 .flex p { text-align: left; display: inline-block; padding: 10px 30px 0}
#content-03 .flex div { background: #e0f1f2}
#content-03 img { max-width: 406px; height: auto}
@media screen and (max-width: 1000px){
	#content-03 { padding-top: 0}
	#content-03 h2 { padding: 0 15% 0 18%}
	#content-03 .flex div:first-child { margin-bottom: 30px}
}
@media screen and (min-width: 1001px){
	#content-03 .flex div { width: 46%; position: relative; padding: 20px 20px 10px 20px; text-align: center}
	#content-03 h2 { width: 80%; margin: 0 auto 70px}
	#content-03 .flex h3 { margin-top: -45px; margin-bottom: 20px}
}


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

	#content-04

------------------------------------------------*/
#content-04 { background: #e0f1f2; padding: 70px 0}
#content-04 h2 img { max-width: 777px}
#content-04 h3 { font-size: 3rem}
#content-04 h3 span { border-bottom: solid 3px #33838e; padding-bottom: 5px}
#content-04 .box-1 { background: url("../images/support-bg.png") 0 0 no-repeat}
#content-04 .box-2 { background: url("../images/support-bg.png") 100% 0 no-repeat; margin-bottom: 60px}
#content-04 .support-01 { background: url("../images/support-01.png") no-repeat 35% 0}
#content-04 .support-02 { background: url("../images/support-02.png") no-repeat 65% 0}
#content-04 .comment span { font-weight: bold}
.support h3 { margin-bottom: 20px}

@media screen and (max-width: 1000px){
	#content-04 h2 { padding: 0 5%}
	#content-04 .box-1,
	#content-04 .box-2,
	#content-04 .support-01,
	#content-04 .support-02{ background: #fff}
	#content-04 .support-01 div,
	#content-04 .support-02 div { padding: 5%}
	#content-04 h3 { font-size: 2rem; line-height: 2}
	#content-04 p { text-indent: -1em; padding-left: 1em; margin-bottom: 0}
	#content-04 .comment { width: 90%; margin: 0 auto; background: #fff; padding: 20px; border-radius: 20px; font-size: 1.7rem; line-height: 2}
}
@media screen and (min-width: 1001px){
	#content-04 .box-1 { margin-bottom: 60px}
	#content-04 .support-01 p,
	#content-04 .support-02 p { font-size: 1.6rem; text-indent: -1em; padding-left: 1em}
	#content-04 .support-01 div,
	#content-04 .support-02 div { width: 700px; margin: 0 auto}
	#content-04 .support-01 { height: 294px; padding-top: 60px}
	#content-04 .support-02 { height: 294px; padding-top: 40px}
	#content-04 .support-02 p { line-height: 1.4!important; margin-bottom: 10px!important}
	#content-04 .comment { width: 962px; margin: 0 auto; background: url("../images/comment.png") no-repeat 0 0; padding: 30px 30px 0 240px; height: 226px; font-size: 1.7rem; line-height: 2}
}


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

	#content-05

------------------------------------------------*/
#content-05 h2 img { max-width: 206px}
#content-05 dl { margin-bottom: 10px}
#content-05 dl:last-child { margin-bottom: 80px}
#content-05 dt { background: #f6ec00 url("../images/point-q.png") no-repeat 0 0; padding-left: 80px; margin-bottom: 1px}
#content-05 dd { background: #eee url("../images/point-a.png") no-repeat 0 0; min-height: 60px}
@media screen and (max-width: 1000px){
	#content-05 dt,
	#content-05 dd { padding: 10px 10px 10px 60px}
}
@media screen and (min-width: 1001px){
	#content-05 dt { min-height: 60px; line-height: 60px}
	#content-05 dd { padding: 10px 10px 10px 80px}
}


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

	#content-06

------------------------------------------------*/
#content-06 { background: #f3b39c; padding-top: 100px}
#content-06 h2 img { max-width: 827px}
#content-06 dl { max-width: 860px; margin: 0 auto 30px}
#content-06 dt { background: url("../images/arrow-02.png") no-repeat 0 0; padding-left: 60px; margin-bottom: 6px; font-weight: bold}
#content-06 dd { padding-left: 60px}
@media screen and (max-width: 1000px){
	
}
@media screen and (min-width: 1001px){
	#content-06 dt { height: 32px; line-height: 32px}
}


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

	#content-07

------------------------------------------------*/
#content-07 h2 { font-weight: bold}
#content-07 h2 small { display: block; font-size: 2.4rem; margin-bottom: 20px}
#content-07 h2 span { border: solid 5px #33838e; border-width: 5px 0; padding: 10px 0}
#content-07 dl { max-width: 860px; margin: 0 auto 30px}
#content-07 dt { background: url("../images/arrow-02.png") no-repeat 0 0; height: 32px; padding-left: 60px; line-height: 32px; margin-bottom: 6px; font-weight: bold}
#content-07 .ttl-09 { margin: 0 auto 60px; max-width: 602px}
#content-07 .flex { margin-bottom: 60px}
#content-07 .flex li img { margin-bottom: 20px}
#content-07 .flex li { text-align: center}
#content-07 .flex + p { margin-bottom: 60px}
#content-07 .image-06 { text-align: center; margin-bottom: 60px}
#content-07 .image-06 img { max-width: 830px; height: auto}
@media screen and (max-width: 1000px){
	#content-07 h2 { font-size: 2rem; margin-bottom: 30px}
	#content-07 h2 small { font-size: 2rem}
	#content-07 h2 span { display: block; font-size: 2.4rem}
	#content-07 .comment { margin: 20px auto 60px; background: #fff2bb; padding: 20px; border-radius: 20px}
	#content-07 .ttl-10 { margin-top: 60px}
	#content-07 .flex li { width: 100%; margin-bottom: 50px}
	#content-07 .flex li span { border-bottom: solid 3px #33838e}
	#content-07 .flex li img { width: 60%; display: block; margin: 0 auto 20px}
}
@media screen and (min-width: 1001px){
	#content-07 h2 span { font-size: 3.6rem}
	#content-07 .comment { width: 732px; margin: 10px auto 60px; background: url("../images/image-07.png") no-repeat 0 0; text-align: center; padding-top: 75px; height: 152px}
	#content-07 .flex li { width: 25%}
}


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

	#content-08

------------------------------------------------*/
#content-08 h2 img { max-width: 138px}
#content-08 div { border: solid 5px #ccc; padding: 50px 30px 30px; text-align: center}
#content-08 h3 { color: #33838e; font-weight: bold; margin-bottom: 30px}
#content-08 div p { display: inline-block; text-align: left}
@media screen and (max-width: 1000px){
	#content-08 div { border: solid 5px #ccc; padding: 30px 20px 15px}
	#content-08 h3 { letter-spacing: 0}
}
@media screen and (min-width: 1001px){
	
}



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

	footer

------------------------------------------------*/
footer { padding: 70px 5%}
footer .inner { max-width: 1000px; margin: 0 auto 70px}
footer .logo img { width: 160px; height:a auto}
footer p { margin-bottom: 1em; font-size: 1.5rem}
footer .logo { margin-bottom: 50px}
footer .logo + p { font-weight: bold}
footer .copyright { text-align: center; font-size: 1.3rem}
@media screen and (max-width:768px){
}