@charset "utf-8";

.concept-only{
	position:relative;
	background:url(../images/bg_sp.png) no-repeat 50% 100%;
	background-size:cover;
	height:185vh;
	padding:80px 0;
}
_::-webkit-full-page-media, _:future, :root .concept-only{
	position:relative;
	background:url(../images/bg_sp.png) no-repeat 50% 100%;
	background-size:cover;
	height:185vh;
	padding:80px 0;
}

@media screen and (min-width: 500px) and (min-width: 1080px){
_::-webkit-full-page-media, _:future, :root .concept-only{
	background:url(../images/bg_pc.png) no-repeat 50% 50% ;
	background-size:cover;
	height:210vh;
	padding:100px 0 0;
	}
}
@media screen and (min-width: 500px) and (min-width: 1080px){
.concept-only{
	background:url(../images/bg_pc.png) no-repeat 50% 50% ;
	background-size:cover;
	height:210vh;
	padding:100px 0 0;
	}
}


@media screen and (min-width: 769px) {
.concept-only{
	background:url(../images/bg_pc.png) no-repeat 50% 50% ;
	background-size:cover;
	height:230vh;
	padding:100px 0 0;
	}
}

.base-color_white{
	color:#fff!important;
	margin:10px 0 0;
}
.topline{
	width:70%;
	margin: 40px auto;
}


.top_concept_inner{
	width:90%;
	margin: 80px auto;
	position:relative;


}
@media screen and (min-width: 769px) {
.top_concept_inner{
	max-width:550px;

	}
}

.top_concept_inner figure{
	width:80%;

}
@media screen and (min-width: 769px) {
.top_concept_inner figure{
	width:60%;
	margin: 0 auto;
	}
}

.concepy_copy{
	color:#333!important;
	text-align:left;
	margin:70px 0 30px!important;
	line-height:2.5;
	font-weight:normal!important;
}
@media screen and (min-width: 769px) {
.concepy_copy{
	text-align:center;

	}
}

.concepy_copy span{
	display:block;
	margin:20px 0;
}

.line-dashed{
	border-top:3px dotted rgba(119,161,121,.3);
}

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

コンセプトメイン

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

.concept_bg {
	background:rgba(80,150,0,.8);
	padding:25px 0 10px;
	max-width:90%;
	margin: 0 auto;
	border-radius:15px ;
	box-shadow:5px 5px #4F7352;
}
@media screen and (min-width: 769px) {
.concept_bg {
	max-width:73%;
	}
}

.concept_bg_2 {
filter: drop-shadow(3px 3px .3rem rgba(13,78,157,.6));
}
.concept_bg_2 h2{
filter: drop-shadow(3px 3px .3rem rgba(13,78,157,1));
}

.concept_inner{
	width:var(--spwidth);
	margin: 0 auto;
	
}


.concept_inner h3{
	font-size:clamp(24px,2vw,35px);
	letter-spacing:10px;
	margin: 40px auto 40px;
	width:70%;
	font-weight:500;
	line-height:1.6;
	text-align:center;
	color:#333!important;
}

.figure-cmn{
	text-align:center;
	margin: 0px auto;
	position:relative;
}
.figure-cmn_center{
	text-align:center;
	margin: 0px auto;
	position:relative;

}

.figure-cmn img{
	border-radius:20px;
}

figcaption{
	position:absolute;
	left:10px;
	bottom:10px;
	color:#fff;
}
figure.icon_large{
	width:85%;
}
@media screen and (min-width: 769px) {
figure.icon_large{
	width:60%;
	}
}

figure.copy{
	width:55%;
	margin:40px auto;
		
}
@media screen and (min-width: 769px) {
figure.copy{
	width:40%;
	margin:40px auto 80px;

	}
}

figure.icon{
	width:10%;
}
@media screen and (min-width: 769px) {
figure.icon{
	width:5%;
	}
}

.concept_inner .main_text{
	font-size:clamp(17px,2vw,19px);
	letter-spacing:var(--spacing);
	margin: 40px auto 40px;
	line-height:3;
	text-align:center;
}
.k-word-box {
	margin: 20px 0 0;
	font-size:clamp(28px,2vw,38px);
	letter-spacing:var(--spacing);
	font-weight: bold;
	text-align:center;
}
.sub-copy{
	font-size:clamp(16px,2vw,18px);
	letter-spacing:var(--spacing);
	text-align:center;
}

/* 最初は透明にしておく */
.k-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), 
	transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* このクラスがついたらアニメーション開始や！ */
.k-char.is-visible {
	opacity: 1;
	transform: translateY(0);
}
/*------------------------------------------------------

各ページへの遷移

-------------------------------------------------------*/
.page_detail_inner{
	width:var(--spwidth);
	margin: 40px auto 0;
	border-bottom:1px solid #ddd;
	padding:20px 0px 40px;
}
@media screen and (min-width: 769px) {
.page_detail_inner{
	max-width:800px;
	padding:20px 0px 60px;
	}
}

.page_detail_inner:last-child{
	border-bottom:none;
}


.page_detail_inner dl{
	margin:30px 0 0;
	letter-spacing:var(--spacing);
	text-align:center;
}
.page_detail_inner dl dt{
	margin:0px 0 8px;
	font-size:clamp(20px,2vw,24px);
	letter-spacing:var(--spacing);
	color:var(--green-color);
}
.page_detail_inner dl dd{
	font-size:clamp(15px,2vw,17px);
}
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin:25px 0 0;

}

.styled-button {
  padding: 8px 0px 8px 0px;
	font-size:clamp(15px,2vw,17px);
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
  border-radius: 100px; 
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  outline: none;
  width:45%;
  text-align:center;
  font-weight:500;
}
@media screen and (min-width: 769px) {
.styled-button {
	width:30%;
	}
}

.styled-button:hover {
  background-color: #C6D9C7; 
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.styled-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.arrow_s_b {
  position: relative;
  display: inline-block;
  padding-left: 0px;
}

.arrow_s_b:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #333;
  position: absolute;
  top: 0;
  left: 13px;
  bottom: 0;
  margin: auto;
}
.indentnone{
	text-decoration:none;
}
.top-btn_inner{
	width:93%;
  margin:25px auto 0;
}
@media screen and (min-width: 769px) {
.top-btn_inner{
	width:500px;
	}
}
.top-btn_inner p{
	width:50%;
	margin:0 auto;
}
.top-btn_inner .soon{
	border:1px solid #ccc;
	background:#ccc;
  padding: 8px 0px 8px 0px;
	font-size:clamp(15px,2vw,17px);
	border-radius:100px;
	text-align:center;
	color:#fff;
  width:45%;
}
@media screen and (min-width: 769px) {
.top-btn_inner .soon{
  width:50%;
	}
}


.concept-notice_inner{
	margin:100px 0 0;
}
.concept-notice_inner ul li{
	font-size:clamp(12px,2vw,13px);
	margin:0 0 4px;
	text-align:left;
	text-indent:-1em;
	padding-left:1em
}
.concept-notice_inner .border-in_start{
	border-top:1px solid #ccc;
	padding:20px 0 0;
}



.icon_img{
	position:relative;
}

.ill_icon{
	position:absolute;
}
.ill01{
	right:0%;
	bottom:-20%;
	max-width:100px;
}
@media screen and (min-width: 769px) {
.ill01{
	right:0%;
	max-width:25%;
	}
}
.ill02{
	right:0%;
	bottom:-20%;
	max-width:100px;
}
@media screen and (min-width: 769px) {
.ill02{
	right:0%;
	max-width:30%;
	}
}
.ill03{
	right:0%;
	bottom:-30%;
	max-width:90px;
}
@media screen and (min-width: 769px) {
.ill03{
	right:0%;
	max-width:20%;
	}
}