@charset "utf-8";

/*
=======================================
  about
=======================================
*/
#about{
}

#about .concept{
	margin-top:1rem;
	padding: 5rem 0 8rem;
	background:url(../concept/img/bg_img_01.jpg) no-repeat top right;
}
@media screen and (max-width: 600px) {
#about .concept{
	padding: 3rem 0 5rem;
	background-size:80%;
}
}

#about .concept h4{
	font-family: 'Noto Serif JP', serif;
	text-align:center;
	font-size: 150%;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.1em;
}
#about .concept p{
	padding-top:3rem;
}
@media screen and (max-width: 600px) {
#about .concept p{
	padding-top:2rem;
}
}
#about .concept .images{
	padding-top:3rem;
}	
#about .concept .images img{
	margin-right:2%;
	width: 32%;
}
#about .concept .images .last{
	margin-right:0;
}
#about .concept dl{
	padding-top:4rem;
}
#about .concept dt{
	text-align:center;
	font-size:130%;
	position: relative;
}
#about .concept dt:after {
  content:"";
  width: 160px;
  height: 3px;
  display: inline-block;
  background-color: #9fa0a0;
  position: absolute;
  bottom: -1.5rem;
  left: calc(50% - 80px);
}
#about .concept dd{
	padding-top:3rem;
}
@media screen and (max-width: 600px) {
#about .concept dl{
	padding-top:2rem;
}
#about .concept dt:after {
  bottom: -1rem;
}
#about .concept dd{
	padding-top:2rem;
}
}


#about .think{
	background:#f1f3f6;
	padding: 3rem 0;
}
#about .think .decoration_txt{
	margin-top: -8rem;
}
@media screen and (max-width: 600px) {
#about .think .decoration_txt{
	width:140px;
}
}

#about .think p{
	text-align:center;
	padding-bottom:3rem;
}

#about .think_bl{
	width: 46%;
	padding: 0 2% 2rem;
	float:left;
	text-align: center;
	overflow:hidden;
}
@media screen and (max-width: 1200px) {
#about .think_bl{
	width: 100%;
	padding: 0 0 2rem;
	float:none;
}
}
#about .think_bl .maru{
	background-image:url(../concept/img/bg_maru.png);
	background-size: 100%;
	background-repeat: no-repeat;
	padding: 45px 0 80px;
	width: 170px;
	float: left;
}
@media screen and (max-width: 500px) {
#about .think_bl .maru{
	float: none;
	margin:0 auto;
}
}

#about .think_bl .maru dt{
	font-family: 'Noto Serif JP', serif;
	font-size:180%;
	letter-spacing:0.2em;
}
#about .think_bl .maru dd{
    font-size: 0.8em;
    font-weight: normal;
    letter-spacing: 0.2em;
}
#about .think_bl img{
	margin:-30px 0 1rem 0;
}

#about .think_bl .txt{
	text-align:left;
	margin-left: 190px;
}
@media screen and (max-width: 500px) {
#about .think_bl .txt{
	margin-left: 0;
}
}
#about .think_bl .txt dt{
	font-size:130%;
	padding-bottom:1rem;
}
#about .think_bl .txt dd{
	padding-bottom:1rem;
}
#about .think_bl .txt .keyword{
	line-height:2;
}





#about .flowchart{
	padding-top:7rem;
}

#about .flowchart p{
	text-align:center;
	padding-bottom:1rem;
}

#about .flowchart dl{
	border-top:2px solid #9fa0a0;
	margin-top:2.5rem;
}
#about .flowchart dt{
	padding:1rem 0;
	font-size:130%;
	border-bottom:1px solid #9fa0a0;
}
#about .flowchart dt span{
  position: relative;
  display: inline-block;
	padding-right:30px;
	margin-right:15px;
	font-size:80%;
	font-family: 'Roboto', sans-serif;
}
#about .flowchart dt span:before{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 13px;
  border-color: transparent transparent transparent #36abb5;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
}
#about .flowchart dt span strong{
	font-size:130%;
}
#about .flowchart dd{
	padding:1rem 0;
}

@media screen and (max-width: 600px) {
#about .flowchart{
	padding-top: 4rem 0;
}
#about .flowchart p{
	text-align:left;
	padding-bottom:0.5rem;
}
#about .flowchart dl{
	margin-top:1.5rem;
}
#about .flowchart dt{
	font-size:120%;
}
}


#about .concept dd.link{
  position:relative;
  margin-top:1rem;
}
#about .concept a{
  color:#158028;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  white-space: nowrap;
}
#about .concept a::before{
  content: "";
  display: inline-block;
  width: 1em;
  border-top: 2px solid;
  vertical-align: middle;
  margin-right: 1em;
  padding-bottom:4px;
  transition: all 0.5s 0s ease;
}
#about .concept a:hover::before{
  margin-right: 0.5em;
  width: 1.5em;
}





/*
=======================================
  obsession
=======================================
*/


#obsession .philosophy{
	margin-top:1rem;
	padding: 5rem 0 10rem;
}
@media screen and (max-width: 600px) {
#obsession .philosophy{
	padding: 3rem 0 5rem;
	background-size:80%;
}
}

.point01,.point012.point03,.point04,.point05{
	overflow:hidden;
}
.point01{
	margin-top:7rem;
}
@media screen and (max-width: 900px) {
.point01{
	margin-top:3rem;
}
}

.philosophy .point_bg{
	height:450px;
	width:50%;
	overflow:hidden;
	background-size:cover;
	background-repeat:no-repeat;
}
.point01 .point_bg,.point03 .point_bg,.point05 .point_bg{
	background-position:top right;
	float:left;
}
.point02 .point_bg,.point04 .point_bg{
	background-position:top right;
	float:right;
}
.point01 .point_bg{
	background-image:url(../concept/img/obsession_p01_img.jpg) ;
}
.point02 .point_bg{
	background-image:url(../concept/img/obsession_p02_img.jpg) ;
}
.point03 .point_bg{
	background-image:url(../concept/img/obsession_p03_img.jpg) ;
}
.point04 .point_bg{
	background-image:url(../concept/img/obsession_p04_img.jpg) ;
}
.point05 .point_bg{
	background-image:url(../concept/img/obsession_p05_img.jpg) ;
}
.philosophy .point01 .point_txt,
.philosophy .point03 .point_txt,
.philosophy .point05 .point_txt{
	padding:4rem 0 2rem 4%;
}
.philosophy .point02 .point_txt,
.philosophy .point04 .point_txt{
	padding:4rem 4% 2rem 0;
}
.philosophy .point_txt{
	width:46%;
	float:right;
	background:#fff;
}
.philosophy .point_txt dt{
	font-size:130%;
	padding:2rem 0 1rem;
	font-weight:bold;
	letter-spacing:0.2em;
}
@media screen and (max-width: 1450px) {
.philosophy .point_bg{
	height:400px;
}
.philosophy .point01 .point_txt,
.philosophy .point03 .point_txt,
.philosophy .point05 .point_txt{
	padding:2rem 0 2rem 4%;
}
.philosophy .point02 .point_txt,
.philosophy .point04 .point_txt{
	padding:2rem 4% 2rem 0;
}
.philosophy .point_txt img{
	width:130px;
}
}
@media screen and (max-width: 1100px) {
.philosophy .point_bg{
	height:450px;
}
}
@media screen and (max-width: 900px) {
.philosophy .point_bg{
	width:100%;
	background-size:cover;
	height: 300px;
}
.philosophy .point01 .point_txt,
.philosophy .point02 .point_txt,
.philosophy .point03 .point_txt,
.philosophy .point04 .point_txt,
.philosophy .point05 .point_txt{
	width:96%;
	padding:3rem 2% 4rem;
}
.philosophy .point_txt dt{
	padding:1rem 0;
}
.philosophy .point_txt img{
	width:110px;
}
}
@media screen and (max-width: 600px) {
.philosophy .point_bg{
	height: 200px;
}
}
#obsession .support{
	background:#f1f3f6;
	padding: 3rem 0 5rem;
}
#obsession .support .decoration_txt{
	margin-top: -8rem;
}
@media screen and (max-width: 600px) {
#obsession .support .decoration_txt{
	width:140px;
}
.philosophy .point01 .point_txt,
.philosophy .point02 .point_txt,
.philosophy .point03 .point_txt,
.philosophy .point04 .point_txt,
.philosophy .point05 .point_txt{
	padding:2rem 2%;
}
}
#obsession .support p{
	text-align:center;
}
#obsession .support .inner_s{
	overflow:hidden;
	margin-top: 3rem;
}
#obsession .support .inner_s .support_box{
	background:#fff;
	overflow:hidden;
	padding:20px;
	margin-bottom:2.5rem;
}
#obsession .support .inner_s .support_box .right{
	width:47%;
	float:right;
}
#obsession .support .inner_s .support_box dl{
	padding:10px;
	width:47%;
	float:left;
}
#obsession .support .inner_s .support_box dt img{
	width:135px;
	display:block;
	margin-bottom:1.3rem;
}
#obsession .support .inner_s .support_box dt{
	font-size: 130%;
	font-weight:500;
	margin-bottom:1rem;
	line-height:1.5;
}
#obsession .support .inner_s .support_box dd{
	line-height:1.6;
}
@media screen and (max-width: 900px) {
#obsession .support .inner_s .support_box .right{
	width:100%;
	float:none;
}
#obsession .support .inner_s .support_box dl{
	padding:1rem 3% 2rem;
	width:94%;
	float:none;
}

}
@media screen and (max-width: 600px) {
#obsession .support{
	padding: 3rem 0 0.1rem;
}
#obsession .support .inner_s{
	margin: 2rem 0;
	max-width: 100%;
}
#obsession .support .inner_s .support_box{
	margin-bottom:1.5rem;
}
}




/*
=======================================
  standard
=======================================
*/


#standard{
	display: flex;
}

#standard .contents{
	width:100%;
}
@media screen and (max-width: 900px) {
#standard{
	display:block;
}
}
@media screen and (max-width: 1300px) {
#standard .inner_s{
	margin: 0 0 0 20px;
	width: 90%;
}
}
@media screen and (max-width: 900px) {
#standard .inner_s{
	margin: 0 5%;
}
}



#standard .standard_bl{
	overflow:hidden;
	margin-top:5rem;
}
@media screen and (max-width: 1200px) {
#standard .standard_bl{
	margin-top:3rem;
}
}
#standard .standard_bl h3{
	text-align: center;
	position: relative;
	margin-bottom:2.8rem;
	font-family: 'Noto Serif JP', serif;
	font-size: 160%;
	font-weight: normal;
	letter-spacing: 0.2em;
}
#standard .standard_bl h3::after {
  content: '';
  width: 150px;
  height: 3px;
  display: inline-block;
  background-color: #9fa0a0;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 75px)
}
#standard .standard_bl img{
	float:left;
	width:48%;
}
#standard .standard_bl .txt{
	float:right;
	width:48%;
}
#standard .standard_bl h4{
	border-left:2px solid #9fa0a0;
	padding-left:10px;
	margin-bottom:1rem;
	font-size: 120%;
	font-weight: 500;
	letter-spacing: 0.1em;
}

@media screen and (max-width: 900px) {
#standard .standard_bl {
    margin-top: -5rem;
    padding-top: 8rem;
}
}
@media screen and (max-width: 600px) {
#standard .standard_bl h3{
	margin-bottom:2rem;
	font-size: 150%;
}
#standard .standard_bl img{
	float:none;
	width:100%;
	margin:0 0 1.5rem;
}
#standard .standard_bl .txt{
	float:none;
	width:100%;
}
}



.standard_bl a{
	color:#158028;
  top: 0;
  left: 0;
  display: block;
  white-space: nowrap;
}
.standard_bl a::before{
  content: "";
  display: inline-block;
  width: 1em;
  border-top: 2px solid;
  vertical-align: middle;
  margin-right: 1em;
  padding-bottom:4px;
	transition: all 0.5s 0s ease;
}
.standard_bl a:hover::before{
  margin-right: 0.5em;
  width: 1.5em;
}


#standard .accordion-area .accordion-title.close::before {
    transform: rotate(135deg);
}





/*
=======================================
  2024.12.09追記 
======================================
*/

#payment_cost{
	padding-top: 50px;
	margin-top: -50px;
}


.payment_cost_contents{
	position:relative;
	margin-top:50px;
}

.payment_cost_contents .check_point{
	position:absolute;
	top:-20px;
	left:-10px;
}