@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
/* ==============================================

	body

================================================= */
body {
	font-family: 'Noto Sans JP', sans-serif;
}

.wrapper {
	width: 100%;
	margin: 0 auto;
}
@media screen and (min-width:768px){
	.sp {
		display: none;
	}
}
@media screen and (max-width:767px){
	.pc {
		display: none;
	}
}

@media screen and (max-width:767px){
	.wrapper {
		min-width: inherit;
	}
}
img {
	max-width: 100%;
	height: auto;
}
figure {
	margin: 0 auto;
}
/* ==============================================

	header

================================================= */
header {
	width: 100%;
	text-align: center;
}
header .logo {
	padding: 1rem 0 0.5rem;
}
header .logo img {
	max-height: 26px;
	width: auto;
}
header h1{
	width: 100%;
	background:-webkit-gradient(linear, left top, right top, from(#009a5b), to(#36c200));
	background:-webkit-linear-gradient(left, #009a5b, #36c200);
	background:-moz-linear-gradient(left, #009a5b, #36c200);
	background:-o-linear-gradient(left, #009a5b, #36c200);
	background:linear-gradient(to right, #009a5b, #36c200);
	padding: 1.2rem 0;
	color: #fff;
	font-size: 34px;
	text-align: center;
}
@media screen and (max-width:767px){
	header .logo {
		padding: 0.7rem 1rem 0.3rem;
	}
	header h1 {
		font-size: 20px;
		padding: 0.8rem 0;
	}
}

/* ==============================================

	mv

================================================= */
#mv {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto;

}
#mv img {
	width: 100%;
	height: auto;
}


/* ==============================================

	共通

================================================= */

/* ==============================================

	contents

================================================= */
.contents {
	width: 100%;
}
.contents_inner {
	max-width: 1000px;
	margin: 0 auto;
}
@media screen and (max-width:767px){
	.contents .contents_inner {
		max-width: 100%;
		padding: 0 15px;
	}
	.contents .inner {
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}
}
/* ==============================================

	sec01

================================================= */
.sec01 {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 3.5rem 0 3rem;
}
.sec01 h2 {
	width: 100%;
	position: relative;
  display: inline-block;
	text-align: center;
	margin: 0 auto;
	font-size: 3rem;
	color: #009a5b;
	margin-bottom: 2rem
}
.sec01 h2:before, .sec01 h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 14%;
  height: 3px;
  border-top: solid 2px #36c200;
  border-bottom: solid 2px #36c200;
}
.sec01 h2:before {
  left:0;
}
.sec01 h2:after {
  right: 0;
}
.sec01 .read {
	font-size: 1.2rem;
	text-align: left;
	margin-bottom: 4rem;
	line-height: 2.2;
}
.sec01 .read span {
	font-weight: 600;
}
.sec01 .btn-comment {
	text-align: center;
	color: #009a5b;
	font-size: 1.6rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
}
.sec01 .btn a {
	display:block;
	max-width: 500px;
	margin: 0 auto 2rem;
	text-align: center;
	background: url("../img/arrow_sw.svg") no-repeat 96% center #009a5b;
	background-size: 22px;
	padding: 1.4rem 1rem;
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.4;
}

.sec01 .btn a:hover {
	opacity: 0.7;
}

/* ==============================================

	sec02

================================================= */
.sec02 {
	margin: 0 auto;
}
.sec02 h2 {
	max-width: 96.2%;
	margin:1.4em 0;
  padding: 0.4em 0.5em;
  border: 2px solid #009a5b;
	background: #fff;
	position: relative;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 400;
}
.sec02 h2:after {/*グラデーションのシャドウ*/
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -7px;
  left: 7px;
  height: 100%;
  width: 100%;
  opacity: 1;
  background: linear-gradient(90deg, #009a5b, #00a056, #00a64f, #00ac47, #0ab23e, #1ab732, #29bd22, #36c200);
  transition: all 0.2s;
}
.sec02 h2 span {
	color: #009a5b;
	font-size: 2.8rem;
	font-weight: 700!important;
}
.sec02 .interview-box {
	max-width: 100%;
	margin: 3rem auto;
}
.sec02 .interview-box:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}
.sec02 .interview-box li {
	border: 2px solid #cccccc;
	max-width: 466px;
	margin-bottom: 2rem;
}
.sec02 .interview-box li:nth-child(odd){
	float: left;
}
.sec02 .interview-box li:nth-child(even){
	float: right;
}
.sec02 .interview-box li .inner {
	padding: 1rem;
}
.sec02 .interview-box li figure {
	overflow: hidden;
	max-width: 466px;
	width: 100%;
}
.sec02 .interview-box li figure img {
	height: auto;
  transition: transform .6s ease;
}
.sec02 .interview-box li figure:hover img {
	transform: scale(1.1);
}

.sec02 .interview-box li p.caption {
	font-size: 1.6rem;
	margin-bottom: 1rem;
	font-feature-settings: "palt" 1;
	font-weight: 600;
	color: #009a5b;
}
.sec02 h3 {
	font-size: 1.2rem;
	font-weight: 400;
	margin: 0.5rem auto;
	line-height: 1.4;
	text-align: center;
}
.sec02 .interview-box li .btn a {
	display:block;
	max-width: 70%;
	margin: 1rem auto 0.5rem;
	text-align: center;
	border-radius: 10px;
	padding: 1rem;
	color: #fff;
	background: url("../img/arrow_sw.svg") no-repeat 96% center,-moz-linear-gradient(left, #009a5b 0%, #36c200 100%);
  background:url("../img/arrow_sw.svg") no-repeat 96% center , -webkit-linear-gradient(left, #009a5b 0%, #36c200 100%);
	background-size: 22px 22px, 100% 100%;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
}
.sec02 .interview-box li .btn a:hover {
	opacity: 0.7;
}
/* ==============================================

	sec03

================================================= */
.sec03 {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 3.5rem 0 5rem;
	background: url("../img/sec03_bg.jpg") no-repeat;
	background-size: cover;
}
.sec03 h2 {
	width: 100%;
	position: relative;
  display: inline-block;
	text-align: center;
	margin: 0 auto 0.5rem;
	font-size: 3rem;
	color: #009a5b;
}
.sec03 h2:before, .sec03 h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 11%;
  height: 3px;
  border-top: solid 2px #36c200;
  border-bottom: solid 2px #36c200;
}
.sec03 h2:before {
  left:0;
}
.sec03 h2:after {
  right: 0;
}
.sec03 .message {
	text-align: center;
	margin: 5rem auto 7rem;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.4;
}
.sec03 .bnr-box {
	max-width: 100%;
	margin: 2rem auto 0;
}
.sec03 .bnr-box:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}
.sec03 .bnr-box li {
	max-width: 47.6%;
	margin-bottom: 1.5rem;
}
.sec03 .bnr-box li:nth-child(odd){
	float: left;
}
.sec03 .bnr-box li:nth-child(even){
	float: right;
}
.sec03 .bnr-box li a:hover {
	opacity: 0.7;
}

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

		sec01

	================================================= */
	.sec01 {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding: 2rem 0 1rem;
	}
	.sec01 h2 {
		width: 100%;
		position:static;
		display:block;
		margin: 0 auto 1rem;
		font-size: 1.6rem;
		line-height: 1.4;
		border-top: solid 2px #36c200;
		border-bottom: solid 2px #36c200;
		padding: 0.5rem 0;
	}
	.sec01 h2:before, .sec01 h2:after {
		display: none;
	}
	.sec01 .read {
		font-size: 1rem;
		margin-bottom: 2.5rem;
		line-height: 1.8;
	}
	.sec01 .btn-comment {
		font-size: 1rem;
	}
	.sec01 .btn a {
		display:block;
		max-width: 100%;
		margin: 0 auto 0.5rem;
		text-align: center;
		background-size: 22px;
		padding: 1rem 0.6rem;
		font-size: 1.1rem;
		line-height: 1.4;
		font-feature-settings: "palt" 1;
	}

	/* ==============================================

		sec02

	================================================= */
	.sec02 {
		margin: 0 auto;
		padding-bottom: 1rem;
	}
	.sec02 h2 {
		max-width: 97.6%;
		margin:1.4em 0 1em;
		padding: 0.4em 0.5em;
		font-size: 1.2rem;
	}
	.sec02 h2 span {
		font-size: 1.6rem;
		font-weight: 700!important;
	}
	.sec02 .interview-box {
		max-width: 100%;
		margin: 1.5rem auto;
	}
	.sec02 .interview-box li {
		border: 2px solid #cccccc;
		max-width: 100%;
		margin-bottom: 1.5rem;
	}
	.sec02 .interview-box li:nth-child(odd){
		float: none;
	}
	.sec02 .interview-box li:nth-child(even){
		float: none;
	}
	.sec02 .interview-box li .inner {
		padding: 0.7rem;
	}
	.sec02 .interview-box li figure {
		max-width: 100%;
		width: 100%;
	}
	.sec02 .interview-box li p.caption {
		font-size: 1.3rem;
		margin-bottom: 0.5rem;
	}
	.sec02 h3 {
		font-size: 1rem;
		margin: 0.5rem auto;
	}
	.sec02 .interview-box li .btn a {
		display:block;
		max-width: 100%;
		margin: 1rem auto 0.3rem;
		padding: 1rem;
		font-size: 1rem;
	}
	/* ==============================================

		sec03

	================================================= */
	.sec03 {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding: 2.5rem 0 2rem;
	}
	.sec03 h2 {
		width: 100%;
		position:static;
		display:block;
		margin: 0 auto 1rem;
		font-size: 1.6rem;
		line-height: 1.4;
		border-top: solid 2px #36c200;
		border-bottom: solid 2px #36c200;
		padding: 0.5rem 0;
	}
	.sec03 h2:before, .sec03 h2:after {
		display: none;
	}
	.sec03 .message {
		margin: 2rem auto 3rem;
		font-size: 1.3rem;
		font-feature-settings: "palt" 1;
	}
	.sec03 .bnr-box {
		max-width: 100%;
		margin: 2rem auto 0;
	}
	.sec03 .bnr-box li {
		max-width: 100%;
		margin-bottom: 1rem;
	}
	.sec03 .bnr-box li:nth-child(odd){
		float: none;
	}
	.sec03 .bnr-box li:nth-child(even){
		float: none;
	}
}

/* ==============================================

	footer

================================================= */
.m_foot {
  border-top: 1px solid #000;
  text-align: center;
  background-color: #efefe4;
  padding: 50px 0;
}

.m_foot_link {
  margin-top: 40px;
  font-size: 14px;
  text-decoration: underline
}

.m_foot_logo {
  width: 140px;
  margin: 20px auto auto
}

.m_foot_copy {
  font-size: 10px;
  margin-top: 10px
}

@media screen and (max-width:979px) {
  .m_foot {
    padding: 30px 0 40px
  }
  .m_foot_logo {
    width: 100px
  }
}

.m_share {
  text-align: center
}

.m_share_ttl {
  font-size: 12px
}

.m_share_list_outer {
  margin-top: 10px
}

.m_share_list li {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  margin: 0 10px;
  height: 20px;
  text-align: center;
  width: 70px;
  border-radius: 3px
}

.m_share_list li.fb {
  background-color: #4267b2
}

.m_share_list li.fb a {
  background-image: url(../img/cmn/icon_fb_w.svg)
}

.m_share_list li.fb a:hover {
  background-color: #365899
}

.m_share_list li.tw {
  background-color: #1b95e0
}

.m_share_list li.tw a {
  background-image: url(../img/cmn/icon_tw_w.svg)
}

.m_share_list li.tw a:hover {
  background-color: #0c7abf
}

.m_share_list li.line {
  background-color: #00b833;
  width: 90px
}

.m_share_list li.line a {
  background-image: url(../img/cmn/icon_ln.svg)
}

.m_share_list li.line a:hover {
  background-color: #02a52f
}

.m_share_list li a {
  display: block;
  color: #fff;
  line-height: 1;
  font-weight: 700;
  font-size: 10px;
  padding: 5px 0 5px 15px;
  background-size: 10px 10px;
  background-position: left 8px center;
  background-repeat: no-repeat
}

@media screen and (max-width:979px) {
  .m_share_ttl {
    font-size: 13px
  }
}

.p_index_inner {
  padding: 80px 0 100px;
}

.p_index_head {
  text-align: center
}

.p_index_head_ttl {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5
}

.p_index_banner {
  margin: 80px auto auto
}
.p_index_banner a{
  display: block;
}
.p_index_banner a:hover {
  opacity: .5
}

.p_index_text {
  margin-top: 80px;
  line-height: 2
}

.p_index_text_para {
  font-size: 18px;
}
.p_index_text_para figure{
  margin-top: 30px;
}
.p_index_text_para figure img{
  width: auto;
}
.p_index_text_para p{
  margin-top: 30px;
}
.p_index_text_para p:first-of-type{
  margin-top: 0;
}

.p_index_text_link {
  margin-top: 70px;
  font-weight: 700;
  font-size: 16px;
  text-align: center
}

.p_index_text_link a {
  display: inline-block;
  padding: 10px 50px;
  background-color: #0069b7;
  color: #fff;
  position: relative
}

.p_index_text_link a:hover {
  background-color: #555
}

.p_index_text_link a .text {
  position: relative;
  display: inline-block;
  padding-left: 20px
}

.p_index_text_link a .text:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px
}

.p_index_video {
  position: relative;
  margin-top: 100px
}
.p_index_video_movie{
  position: relative;
  margin-bottom: 30px;
}
.p_index_video_movie:last-of-type{
  margin-bottom: 0;
}
.p_index_video_movie:before {
  content: "";
  display: block;
  padding-top: 56.25%
}

.p_index_video_movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%!important;
  height: 100%!important
}

.p_index_foot {
  padding: 30px 0;
  text-align: center
}

.p_index_foot_logo {
  max-width: 100px;
  margin: auto
}

.p_index_foot_ttl {
  margin-top: 20px;
  font-weight: 700;
	font-size: 1.2rem;
}

.p_index_foot_list {
  margin-top: 20px;
  font-size: 14px;
	line-height: 2;
}
.p_index_foot_list a.mail{
  text-decoration: underline;
}

.p_index_foot_link {
  display: flex;
  flex-wrap: wrap;
  max-width: 660px;
	margin: 6rem auto 3rem;
}
.p_index_foot_link.center{
  justify-content: center;
}

.p_index_foot_link li {
  width: 48%;
  margin-right: 1%;
  margin-bottom: 1%;
}

.p_index_foot_link li a {
  display: block
}

@media screen and (max-width:767px) {
  .p_index_inner {
    padding: 50px 0 80px
  }
  .p_index_head_ttl {
    font-size: 26px
  }
  .p_index_banner, .p_index_text {
    margin-top: 50px
  }
  .p_index_text_para {
    font-size: 16px;
    margin-top: 20px
  }
  .p_index_text_link {
    margin-top: 50px;
    font-size: 14px
  }
  .p_index_text_link a {
    padding: 10px 50px
  }
  .p_index_text_link a .text {
    padding-left: 20px
  }
  .p_index_text_link a .text:before {
    border-width: 8px 0 8px 12px;
    margin-top: -8px
  }
  .p_index_foot, .p_index_video {
    margin-top: 0;
  }
  .p_index_foot_logo {
    max-width: 100px
  }
  .p_index_foot_ttl {
    margin-top: 18px
  }
  .p_index_foot_list {
    margin-top: 20px;
    font-size: 14px
  }
  .p_index_foot_link {
    margin: 3rem auto 1.5rem;
    display: block;
		max-width: 70%;
  }
  .p_index_foot_link li {
    width: auto;
    max-width: 320px;
    margin: auto auto 10px
  }
  .p_index_foot_link li a {
    display: block
  }
}