@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
	list-style: none;
	font-family: "Noto Sans JP", sans-serif;
	-webkit-appearance: none;
	box-sizing: border-box;
}
/*-------------------------------------------------
	Reset
-------------------------------------------------*/
html, body, h1, h2, h3, h4, h5, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, input, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	vertical-align:baseline;
}
article, header, footer, aside, figure, figcaption, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
	list-style-type: none;
}
/*-------------------------------------------------
	all
-------------------------------------------------*/
body {
	width: 100%;
	font-size: 19px;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	color: #000;
	line-height: 1;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
a {
	text-decoration: none;
	color: #000;
	outline: none;
	transition: all 0.3s ease;
}
a img {
	transition: all 0.3s ease;
}
a:hover ,
a:hover img {
	opacity: 0.8;
}
a:focus {
	outline: none;
}
a img {
	border: none;
}
img {
	max-width: 100%;
	height: auto;
}
/* SP
------------------ */
@media screen and (max-width: 860px) {
	body {
		min-width: 100%;
	}
}



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



/*------------------------------------------------
	contents
------------------------------------------------*/
.first_view {
	position: relative;
	background: #F4F3EF;
	padding-top: 100px;
	padding-left: 60px;
	overflow: hidden;
}

.first_view h1{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	line-height: 1.5em;
	font-size: clamp(28px, 3.75vw, 54px);
	color: #2D4829;
	margin-bottom: 10px;
}

.first_view h2{
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.5em;
	font-size: clamp(18px, 2.08vw, 30px);
	color: #333333;
}

.first_view .main_visual{
	width: 85%;
	float: right;
	margin-top: 40px;
	padding-top: clamp(20px, 4.17vw, 60px);
	background: url(../img/mv_img_1.png) no-repeat right top;
	background-size: 90% auto;
}




/* スクロールダウンの位置 */
.scroll {
  position: absolute;
  left: 60px;
  bottom: 130px;
  writing-mode: vertical-rl;
  font-size: 14px;
  color: #CC7E01;
}

.scroll span{
  font-family: "Noto Sans JP", sans-serif!important;
  font-weight: 700;
}

/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #CC7E01;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  z-index: 2;
}
/* 線の背景色 */
.scroll::after {
  background-color: #ccc;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
	transform: scale(1, 0);
	transform-origin: 0 0;
  }
  50% {
	transform: scale(1, 1);
	transform-origin: 0 0;
  }
  51% {
	transform: scale(1, 1);
	transform-origin: 0 100%;
  }
  100% {
	transform: scale(1, 0);
	transform-origin: 0 100%;
  }
}

/*------------------------------------------------
	共通
------------------------------------------------*/


.area_2 h2,
.area_3 h2,
.area_4 h2,
.area_5 h2,
.area_6 h2,
.area_7 h2
{
	padding-bottom: 34px;
}

.area_2 h2 p,
.area_3 h2 p,
.area_4 h2 p,
.area_5 h2 p,
.area_6 h2 p,
.area_7 h2 p
{
	font-family: "Josefin Sans", sans-serif;
	color:#CC7E01;
	font-size: 40px;
	line-height: 1em;
	padding-bottom: 8px;
}

.area_2 h2 div,
.area_3 h2 div,
.area_4 h2 div,
.area_5 h2 div,
.area_6 h2 div,
.area_7 h2 div
{
	font-size: 34px;
	line-height: 150%;
	font-weight: 700;
	color: #2D4829;
}


/*------------------------------------------------
	area_1
------------------------------------------------*/

.area_1{ 
	margin: 80px 0;
	background: #F4F3EF;
	border-radius: 9999px;
}

.area_1 .inner{
	padding:48px;
	text-align: center;
}

.area_1 h2{
	border-radius: 9999px;
	font-size: 22px;
	margin-bottom:24px;
	line-height: 1em;
	padding: 5px 25px 8px 25px;
	border: 1px solid #CC7E01;
	color:#CC7E01;
	background: #fff;
	display: inline-block;
}

.area_1 div{
	text-align: left;
	font-size: 16px;
	line-height: 240%;
	max-width: 620px;
	margin: 0 auto;
}

.area_1 div span{ font-weight: 700;}

.area_1 div a{ text-decoration: underline;}
.area_1 div a:hover{ text-decoration: none;}

/*------------------------------------------------
	area_2
------------------------------------------------*/

.area_2{ 
	padding: 120px 0;
	background: #F4F3EF;
	border-radius: 150px 150px 0 0;
}

.area_2 .white_box{
	background: #fff;
	border-left: 5px solid #CC7E01;
	margin-bottom: 24px;
	border-radius: 15px 0 0 15px;
}

.area_2 .white_box .inner{
	padding: 36px;
	display: flex;
}

.area_2 .white_box .inner .left{
	color: #2D4829;
	width: 30%;
	position: relative;
}

.area_2 .white_box.num_1 .inner .left::before{
	content: "(1)";
	position: absolute;
	left: 0;
	top: 0;
}

.area_2 .white_box.num_2 .inner .left::before{
	content: "(2)";
	position: absolute;
	left: 0;
	top: 0;
}

.area_2 .white_box .inner .left h3{
	font-size: 22px;
	padding-bottom: 8px;
	padding-left: 30px;
}

.area_2 .white_box .inner .left p{
	font-size: 16px;
	padding-left: 30px;
}

.area_2 .white_box .inner .right{
	font-size: 15px;
	line-height: 190%;
	width: 70%;
}

.area_2 .white_box .inner .right span{
	font-weight: 700;
}

.area_2 .gray{ 
	color: #7F7F7F;
	font-size: 12px;
	line-height:180%;
}

/*------------------------------------------------
	area_3
------------------------------------------------*/

.area_3{
	padding: 100px 0;
}

.area_3 .inner{ display: flex; justify-content: space-between;}

.area_3 .inner .left{ width: 60%;}
.area_3 .inner .right{ width: 34%;}


.area_3 .inner .left div.text{
	font-size: 15px;
	line-height: 190%;
}

/*------------------------------------------------
	area_4
------------------------------------------------*/
.area_4{ 
	padding: 120px 0;
	background: #F4F3EF;
	border-radius: 150px 150px 0 0;
}

.area_4 .white_box{
	background: #fff;
	border-left: 5px solid #CC7E01;
	margin-bottom: 24px;
	border-radius: 15px 0 0 15px;
}

.area_4 .white_box .inner{
	padding: 36px;
	display: flex;
	justify-content: space-between;
}

.area_4 .white_box .inner .left{ width: 60%;}
.area_4 .white_box .inner .right{ width: 36%; }


.area_4 .white_box .inner .left h3{
	color: #2D4829;
	position: relative;
	padding-left: 35px;
	font-size: 20px;
	line-height: 170%;
	margin-bottom: 24px;
}

.area_4 .white_box.num_1 .inner .left h3::before{
	content: "(1)";
	position: absolute;
	left: 0;
	top: 0;
}

.area_4 .white_box.num_2 .inner .left h3::before{
	content: "(2)";
	position: absolute;
	left: 0;
	top: 0;
}

.area_4 .white_box .inner .left p{
	font-size: 15px;
	line-height: 190%;
	margin-bottom: 24px;
}

.area_4 .white_box .inner .left h4{
	font-size: 18px;
	line-height: 1em;
	background: #F4F3EF;
	padding: 8px;
	margin-bottom: 15px;
}

.area_4 .white_box .inner .left ul{
	font-size: 15px;
	line-height: 190%;
	counter-reset: num;  /* デフォルトの番号スタイル */
}

.area_4 .white_box .inner .left ul li{
	position: relative;
	counter-increment: num; /* カウンター加算 */

}

/**
.area_4 .white_box .inner .left ul li::before {
	content: "";
	height: 6px;
	width: 6px;
	background: #CC7E01;
	display: block;
	position: absolute;
	left: 3px;
	top: 11px;
}
**/

.area_4 .white_box .inner .left ul li a{
	text-decoration: underline;
}

.area_4 .white_box .inner .left ul li a:hover{
	text-decoration: none;
}

/*------------------------------------------------
	area_5
------------------------------------------------*/

.area_5{
	background: #F4F3EF;
	text-align: center;
}

.area_5 .white{
	max-width: 1300px;
	margin: 0 auto;
	background: #fff;
	border-radius: 30px;
}

.area_5 .white .inner{
	padding: 100px 0;
}

.area_5 .white .inner p.text{
	font-size: 15px;
	line-height: 190%;
	margin-bottom: 24px;
}

/*------------------------------------------------
	area_6
------------------------------------------------*/
.area_6{
	background: #F4F3EF;
	text-align: center;
}

.area_6 .inner{
	padding: 100px 0;
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.area_6 .inner .left{
	text-align: left;
	width: 60%:
}

.area_6 .inner .left p.text{
	font-size: 15px;
	line-height: 190%;
	margin-bottom: 24px;
}

.area_6 .inner .right{ width: 35%;}


/*------------------------------------------------
	area_7
------------------------------------------------*/

.area_7{
	text-align: center;
	padding: 100px 0 0px 0;
}

.area_7 .inner{
	background: #F4F3EF;
	padding: 50px 0;
	max-width: 800px;
	margin: 0 auto;
	border-radius: 30px;
}

.area_7.v2 .inner{
	background: #F4F3EF;
	padding: 50px 0;
	max-width: 100%;
	border-radius: 0;
}

.area_7 .inner .pa_wrap{
	padding: 30px;
}

.area_7 .inner h2{
	border-radius: 9999px;
	font-size: 22px;
	margin-bottom:24px;
	line-height: 1em;
	padding: 5px 25px 8px 25px;
	border: 1px solid #CC7E01;
	color:#CC7E01;
	background: #fff;
	display: inline-block;
}

.area_7.v2 .inner ul {
	list-style: none;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}


.area_7.v2  .inner ul li {
	display: inline-block;
	font-size: 14px;
	line-height: 3em;
	padding-right: 17px;
	margin:0 5px;
	position: relative;
}


.area_7.v2 .inner ul{
	list-style: none;
	text-align: center;
}

.area_7 .inner ul li{
	display: inline-block;
	font-size: 14px;
	line-height: 3em;
	padding-right: 17px;
	margin-right: 10px;
	position: relative;
}


.area_7 .inner ul li::after{
	content: "";
	width: 1em;
	height: 1em;
	position: absolute;
	right: 0;
	top:50%;
	margin-top: -0.5em;
	background: url(../img/icon.png) no-repeat center center;
	background-size: contain;
}

.area_7 .inner ul li a{
	text-decoration: underline;
	color: #1D54A7;
}

.area_7 .inner ul li a:hover{
	text-decoration: none;
}

.area_7 h3{
	line-height: 1.5em;
	font-size: 100%;
	margin-bottom: 20px;
	text-align: left;
}

.area_7 h3 span{ font-size: 80%;}

.area_7 div ul{
	margin-bottom: 30px;
	text-align:left;
}


/*------------------------------------------------
	スマホ対応
------------------------------------------------*/
@media screen and (max-width: 860px) {
  html, body { font-size: 16px; }
  .w1000{ max-width: 100%; padding: 0 16px; }
  .first_view{ padding: 56px 0 0 0; }
  .first_view h1{ font-size: clamp(18px, 3vw, 32px); padding-left: 16px; }
  .first_view h2{ font-size: clamp(14px, 4.2vw, 18px); padding-left: 16px; }
  .first_view .main_visual{ width:calc(100% - 32px); float: right; margin-top: 16px; padding-top: 28px; background-size: 85% auto; }
  .scroll {
	  left: 7px;
	  right: auto;
	  bottom: 70px;
	  font-size: 12px;
  }
  .scroll::before,.scroll::after{ bottom: -60px; height: 48px; }
  .area_2 h2 p, .area_3 h2 p, .area_4 h2 p, .area_5 h2 p, .area_6 h2 p, .area_7 h2 p { font-size: 28px; }
  .area_2 h2 div, .area_3 h2 div, .area_4 h2 div, .area_5 h2 div, .area_6 h2 div, .area_7 h2 div { font-size: 22px; }
  .area_1{ margin: 40px 0; border-radius: 24px; }
  .area_1 .inner{ padding: 24px 16px; }
  .area_1 h2{ font-size: 16px; margin-bottom: 16px; }
  .area_1 div{ font-size: 14px; line-height: 200%; max-width: 100%; }
  .area_2{ padding: 60px 0; border-radius: 40px 40px 0 0; }
  .area_2 .white_box .inner{ padding: 20px 16px; flex-direction: column; gap: 12px; }
  .area_2 .white_box .inner .left, .area_2 .white_box .inner .right{ width: 100%; }
  .area_2 .white_box .inner .left h3{ font-size: 18px; padding-left: 28px; }
  .area_2 .white_box .inner .left p{ font-size: 14px; padding-left: 28px; }
  .area_2 .white_box .inner .right{ font-size: 14px; line-height: 180%; }
  .area_2 .gray{ font-size: 11px; }
  .area_3{ padding: 60px 0; }
  .area_3 .inner{ flex-direction: column; gap: 20px; }
  .area_3 .inner .left, .area_3 .inner .right{ width: 100%; }
  .area_3 .inner .left{ margin-bottom: 50px;}
  .area_3 .inner .right { text-align: center; }
  .area_3 .inner .right img{ width: 80%; }
  .area_3 .inner .left div.text{ font-size: 14px; line-height: 180%; }
  .area_4{ padding: 60px 0; border-radius: 40px 40px 0 0; }
  .area_4 .white_box .inner{ padding: 20px 16px; flex-direction: column; gap: 16px; }
  .area_4 .white_box .inner .left, .area_4 .white_box .inner .right{ width: 100%; }
  .area_4 .white_box .inner .left h3{ font-size: 18px; margin-bottom: 12px; padding-left: 28px; }
  .area_4 .white_box .inner .left p, .area_4 .white_box .inner .left ul{ font-size: 14px; line-height: 180%; }
  .area_5 .white{ margin: 0 16px;}
  .area_5 .white .inner{ padding: 60px 16px; }
  .area_5 .white .inner p.text{ font-size: 14px; }
  .area_6 .inner{ padding: 60px 16px; flex-direction: column; gap: 20px; }
  .area_6 .inner .left, .area_6 .inner .right{ width: 100%; }
  .area_6 .inner .right { text-align: center; }
  .area_6 .inner .right img{ width: 70%; }
  .area_6 .inner .left p.text{ font-size: 14px; line-height: 180%; }
  .area_7{ padding: 60px 0 0px 0; margin: 0 16px; }
  .area_7.v2{ padding: 60px 0 100px 0; margin: 0; }
  .area_7 .inner{ padding: 32px 16px; border-radius: 20px; }
  .area_7 .inner h2{ font-size: 18px; }
  .area_7 .inner ul br{ display: none;}
  .area_7 .inner ul li{ display: block;  line-height: 1.8em; margin-bottom: 15px;}
  .area_7 .inner ul li::after {
	  content: "";
	  width: 1em;
	  height: 1em;
	  position: relative; 
	  right: 0;
	  top: 50%;
	  margin-top: -0.5em;
	  background: url(../img/icon.png) no-repeat center center;
	  background-size: contain;
	  display: inline-block;
	  margin-left: 4px;
  }
  
  .area_7 .inner .pa_wrap{
	  padding: 15px;
  }
  

}


  .mb_1{ margin-bottom: 100px;}