@charset 'utf-8';
/* ============ RESET ============ */
html {
  color: #000;
  background: #FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset, img {
  border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}
ol, ul {
  list-style: none;
}
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before, q:after {
  content: '';
}
abbr, acronym {
  border: 0;
  font-variant: normal;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
input, textarea, select {
  *font-size: 100%;
}
legend {
  color: #000;
}
article, aside, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video {
  display: block;
  margin: 0;
  padding: 0;
}
.cf:after,
.pageMenu ul:after,
.post:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.cf {
  min-height: 1px;
}

.main_wrap p { margin: 0 0 15px; padding: 0 30px 0; font-size: 16px; line-height: 1.8; }
 
/* items */
/* ============ STYLE ============ */
* {
  box-sizing: border-box;
}
html {

}
body {
	font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 500;
  font-size: 16px;
  line-height: 1.6em;
  letter-spacing: 1px;
  color: #323232;
}
a {
  color: #004097;
  text-decoration: none;
}
a:hover {
	cursor: pointer !important;
	opacity: 0.7;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}
body.scroll-disable {
  overflow: hidden;
}

.pc {
  display: block !important;
}
.sp {
  display: none !important;
}
.sp-s {
  display: none !important;
}
@media only screen and (max-width: 640px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
@media only screen and (max-width: 380px) {
  .sp-s {
    display: block !important;
  }
}

.mt05 {margin-top: 5px;}
.mt15 {margin-top: 15px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt70 {margin-top: 70px;}
.mt80 {margin-top: 80px;}
.mt90 {margin-top: 90px;}

.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb70 {margin-bottom: 70px;}
.mb80 {margin-bottom: 80px;}
.mb90 {margin-bottom: 90px;}

.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml40 {margin-left: 40px;}
.ml50 {margin-left: 50px;}
.ml60 {margin-left: 60px;}
.ml70 {margin-left: 70px;}
.ml80 {margin-left: 80px;}
.ml90 {margin-left: 90px;}

.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.mr40 {margin-right: 40px;}
.mr50 {margin-right: 50px;}
.mr60 {margin-right: 60px;}
.mr70 {margin-right: 70px;}
.mr80 {margin-right: 80px;}
.mr90 {margin-right: 90px;}

.mass:after{content:"";clear:both;display:block;}
.mass10{float:left;width:10%;}
.mass20{float:left;width:20%;}
.mass20a{float:left;width:20%;}
.mass30{float:left;width:30%;}
.mass40{float:left;width:40%;}
.mass50{float:left;width:50%;}
.mass60{float:left;width:60%;}
.mass70{float:left;width:70%;}
.mass80{float:left;width:80%;}
.mass90{float:left;width:90%;}
.mass100{float:left;width:100%;}
.mass25{float:left;width:25%;}
.mass25f{float:left;width:25%;}
.mass33{float:left;width:33.333333%;}
.mass75{float:left;width:75%;}
@media only screen and (max-width:769px){
  .mass25{float:left;width:33.333333%;}
}
@media only screen and (max-width:640px){
  .mass10{float:left;width:50%;}
  .mass20{float:left;width:20%;}
  .mass20a{float:left;width:50%;}
  .mass30{float:none;width:100%;}
  .mass40{float:left;width:100%;}
  .mass50{float:none;width:100%;}
  .mass60{float:left;width:100%;}
  .mass70{float:none;width:100%;}
  .mass80{float:left;width:50%;}
  .mass90{float:left;width:50%;}
  .mass100{float:none;width:100%;}
  .mass25{float:left;width:50%;}
  .mass25f{float:none;width:100%;}
  .mass75{float:none;width:100%;}
}

/* -----------------------
  common
-------------------------- */
#titlewrap {
  padding: 30px 0;
  background-color: #fff;
}
#mainwrap {
  padding: 30px 0;
  background-color: #00b900;
}
#detailwrap {
  padding: 30px 0;
  background-color: #00b900;
  margin-bottom: 80px;
}
.inner {
  margin: 0 auto;
  max-width: 930px;
  text-align: center;
}
.inner img {
  width: 100%;
}
.tit-head{
	position: relative;
	background: #00b900;
	padding: 10px;
}
.tit-head img{
  width: 60%;
}
.tit-inner{
  position: relative;
  border: solid 2px #00b900;
  padding: 20px 20px 40px;
}
.br_yellow p{
  width: 638px;
  margin: 30px auto 0;
  color: #00b900;
  font-size: 16px;
  font-weight: bold;
  line-height: 38px;
  border-radius: 90px;
  background-color: #ffe600;
}
.br_yellow a :hover{
  background-color: #fff38c;
}
@media only screen and (max-width: 640px) {
	#mainwrap {
	  padding: 10px 0;
	}
  .inner,.tit-inner {
    width: 95%;
  }
	.tit-inner{
	  padding: 20px 10px;
	}
	.tit-inner img{
	 width: 100%;
	}
 .br_yellow p{
    width: 95%;
    padding: 10px 20px;
    line-height: 1.3em;
    font-size: 16px;
    line-height: 26px;
  }
}

/* -----------------------
  mainvisual
-------------------------- */
.mainvisual {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.mainvisual img {
  max-width: 100%;
  margin: 0 auto;
}

/* -----------------------
  main contents
-------------------------- */
.att_txt {
  font-size: 13px;
  color: #fff;
}
.contents {
  margin: 30px 0;
  border-top: solid 1px #fff;
}
.contents--line{
	width: 100%;
	max-width: 232px;
	margin: 10px auto;
	padding-top: 8px;
	font-weight: bold;
	background-color: #fff;
	border-radius: 10px;
}
.contents--line img{
	width: 100%;
	max-width: 232px;
	padding: 8px 8px;
}
.ttl {
  margin: 0 0 60px;
  text-align: right;
}
.ttl img {
  width: 480px;
}
.ttl_c {
  margin: 0 0 60px;
  text-align: center;
}
.ttl_c img {
  width: 480px;
}
.spanbox_sp {
  width: 80%;
  margin: 0 auto;
}
@media only screen and (max-width:640px){
  .ttl {
    margin: 0 0 30px;
    text-align: center;
  }
  .ttl img {
    width: 90%;
  }
  .ttl_c {
    margin: 0 0 30px;
    text-align: center;
  }
  .ttl_c img {
    width: 90%;
  }
}
.cont_yellow {
  color: #ffe600;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}
.cont_yellow_c {
  color: #ffe600;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.cont_white {
  color: #fff;
  text-align: left;
  font-weight: bold;
  line-height: 1.8em;
}
.cont_white span {
  color: #ffe600;
}
.cont_img {
  width: 320px;
  margin: 0 auto 30px;
  text-align: center;
}
.arrow {
  width: 26px;
  margin: 30px auto;
}
@media only screen and (max-width:640px){

}


/* -----------------------
  attention
-------------------------- */
#attention {
  text-align: center;
  font-weight: bold;
  letter-spacing: -1px;
}
#attention h3{
  margin: 40px 0 30px;
  color: #00b900;
  font-size: 32px;
  font-weight: bold;
}
#attention h4 {
  margin: 20px 0;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  background-color: #00b900;
  padding: 10px;
}
#attention .att_green {
  color: #00b900;
  font-size: 20px;
  line-height: 32px;
}
#attention .att_yellow {
  width: 638px;
  margin: 8px auto 0;
  color: #00b900;
  font-size: 20px;
  line-height: 38px;
  background-color: #ffe600;
  border-radius: 90px;
}
#attention .att_blue {
  color: #004097;
  font-size: 14px;
  padding-left: 1.5rem;
}
#attention .att_notes{
  border: solid 2px #00b900;
  padding: 10px 30px;
}
#attention .att_blue{
  list-style-type: disc;
  text-align: left;
}
#attention .btn_box {
  width: 450px;
  margin: 40px auto;
}
#attention .btn_box img {
  width: 100%;
}
#attention .faq{
	padding-bottom: 20px;
}
#attention .faq_heading{
	font-size: 1.2em;
	color: #004097;
	border-bottom: solid 1px #004097;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
#attention .faq_heading::before {
	content: 'Q';
	font-size: 1.8em;
	margin-right: .5em;
}
#attention .faq_text{
padding-left: 2.6em;
}
#attention .notes-small{
	font-size:12px;
	line-height:18px;
	color: #363636;
	margin: 10px 0 60px 0;
	text-align: left;
	padding-left: 2rem;
}
@media only screen and (max-width:640px){
  #attention .att_green {
    font-size: 16px;
    line-height: 26px;
  }
  #attention .att_yellow {
    width: 95%;
    padding: 10px 20px;
    line-height: 1.3em;
    font-size: 16px;
    line-height: 26px;
  }
  #attention .btn_box {
    width: 85%;
    margin: 40px auto;
  }
}


/* -----------------------
  footer
-------------------------- */
.footer {
  margin: 40px 0 0;
	color: #fff;
	background-color: #1b409a;
}
.copyright {
  color: #fff;
	font-size: 11px;
	text-align: center;
}
@media only screen and (max-width:640px){
  .footer {
    text-align: center;
  }
  .footerlogo {
    width:200px;
    margin: 0 auto 10px;
  }
  .copy {
    font-size: 10px;
  }
}

.tab-box{
	background: #ededed;
}

.alterbox {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 2rem;
	width:100%; 
}
.alterbox_tab {
	position: relative;
	display: block;
	font-size:1.7rem; 
	font-weight: bold;
	line-height:2.5rem;
	color:#00859b; 
}
.alterbox_tab span{
	font-size:2.9rem; 
}
.alterbox_body {
	width:100%;
	display: none;
}
.alterbox_title{
	color:#00859b; 
	text-align: center;
	font-size: 64px;
	font-weight: bolder;
	line-height:1em;
	margin: 0.5em auto;
}

.alterbox_hide:checked+.alterbox_tab+.alterbox_body {
	display: block;
}
.alterbox_hide {
	display: none;
}
@media all and (min-width: 960px) {
	.alterbox {
		width:930px; 
	}
	.alterbox_tab {
		font-size:2.6rem; 
		line-height:3.5rem;
	}
	.alterbox_tab span{
		font-size:4.5rem; 
	}
}
@media all and (min-width: 601px) {
	.alterbox {
		margin:0 auto;
	}
	.alterbox_tab {
		width:49.5%;
	}
	.alterbox_tab:nth-of-type(1) { order: 1; }
	.alterbox_tab:nth-of-type(2) { order: 2; }
	.alterbox_body {
		order: 999;
	}
}
@media all and (max-width: 600px) {
	.alterbox_tab {
		width: 100%;
	}
	.arrow_title {
		position: absolute;
		left: 5%;
		top:45%;
		width: 1rem;
		height: 1rem;
		border-top: 2px solid #00859b;
		border-right: 2px solid #00859b;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}
/* 見た目調整 */
.alterbox_tab {
	border: #00859b 3px solid;
	padding: 10px;
	text-align: center;
	margin-bottom: 5px;
	background: #ededed;
}
.alterbox_body {
	padding: 0 10px;
	margin-bottom: 30px;
}
.alterbox_hide:checked+.alterbox_tab {
	background-color: #fff;
}
.tab_text{
	font-size: 30px;
	font-weight: bold;
	line-height:40px;
	color: #00859b;
	padding-left:1.2em;
	text-indent:-1.2em;
}
.tab_text li{
	margin-bottom: .3em;
}
.tab_text span{
	margin-bottom: .3em;
}
.tab_note{
	font-size: 20px;
	text-align: left;
	color: #00859b;
	font-weight: bold;
	margin-bottom: 2rem;
}
.br_green{
	position: relative;
	background-color: #00b900;
	display: block;
	color: #fff;
	padding: 15px 1rem;
	margin: 2rem auto;
	width: 900px;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	border-radius:30px;
}
.arrow_br {
	position: absolute;
	right: 5%;
	top:36%;
	width: 1rem;
	height: 1rem;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.bk_green{
	background-color: #00859b;
	color: #fff;
	padding: 20px 1rem;
	margin: 1rem auto;
	width: 100%;
	font-size: 46px;
	font-weight: bold;
	line-height:1em;
}
.bk_green span{
	color: #ffff00;
}
.prebox ol{
	text-align: left;
}
.center{
text-align: center;
}
.pl10{
	padding-left: 1.04%;
}
.pr10{
	padding-right: 1.04%;
}
.plr00{
	padding-left: 2.8em;
	padding-right: 1.3em;
}

@media only screen and (max-width:900px){
	.alterbox_title{
		font-size: 50px;
	}
	.text_box{
		width: 96%;
		margin: 0 auto;
	}
	.tab_note{
		font-size: 16px;
	}
	.br_green,.bk_green{
		width: 96%;
	}
	.bk_green{
		font-size: 30px;
		line-height:1.2em;
	}
	.tab_text{
		font-size: 27px;
		line-height:1.5em;
	}
	.plr00{
		padding-left: 1.5em;
		padding-right: 1em;
	}
}
@media only screen and (max-width:640px){
	.alterbox_title{
		font-size: 40px;
	}
	.pl10{
		padding-left: 0;
	}
	.pr10{
		padding-right: 0;
	}
	.tab_text{
		font-size: 20px;
		line-height:1.5em;
	}
	.plr00{
		padding-left: 4.3em;
		padding-right: 2em;
	}
}
@media only screen and (max-width:460px){
	.alterbox_title{
		font-size: 35px;
	}
	.br_green{
		font-size: 1.1rem;
	}
	.plr00{
		padding-left: 1em;
		padding-right: .5em;
	}
}