@charset "utf-8";
/* ---------------------------------------------------------------------------------------- common */
#about{ background: #f4f4f4; }
#about #bread{ border: none; }

#about .ttl{ position: relative; padding: 0 0 30px 0; color: #ea609e; letter-spacing: 0.2em; }
#about .ttl:after{ position: absolute; content: ""; width: 40px; height: 2px; background: #ea609e; bottom: 0; left: 0; }
#about .ttl span{ padding: 20px 0 0; display: block; font-size: 16px; letter-spacing: 0.05em; }

#about h2{ padding: 30px 0; font-size: 40px; letter-spacing: 0.1em; }
#about h2 span{ padding: 0 0 0 30px; font-size: 16px; letter-spacing: 0.15em; }


/* ---------------------------------------------------------------------------------------- fv */
#fv{ margin: 130px 0 0; background: url(../images/about/fv.png) center top no-repeat; }
#fv .h1{ width: 50%; padding: 583px 0 0 50%; }
#fv .h1 h1{padding:  0 0 35px 65px; letter-spacing: 0.1em; text-align: left; background: #f4f4f4; font-weight: 800; }
#fv .h1 h1 span{ font-size: 80px; letter-spacing: 0.1em; color: #ea609e; }

#about #fv h2{ padding: 20px 0 0; font-size: 30px; line-height: 200%; letter-spacing: 0.05em; font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif; word-break: normal; }

#fv .fv_bg{ padding: 0 0 80px 0; background: url(../images/about/pic_01.png) center no-repeat; }

/* #fv #message{ padding: 100px 0 0; } */


/* ---------------------------------------------------------------------------------------- second */
#second .bg{ position: relative; padding: 90px 0 300px; letter-spacing: 1px; }
#second .bg:before{ position: absolute; content: ""; width: 100vw; z-index: 10; }
#second .bg:first-of-type:before{ background: url(../images/about/pic_02_4.png) center top no-repeat; height: 1342px; top: 0; }
#second .bg:last-of-type:before{ background: url(../images/about/pic_05.png) center no-repeat; height: 480px; top: 200px; transform: translate(-50%,0); left: 50%; }


/* 01 */
#second .w_box01{ background: #fff; width: 60%; float: right; padding: 90px 19% 210px 140px; box-sizing: border-box; }
#second .w_box01 p{ font-size: 18px; line-height: 240%; letter-spacing: 0.01em; }
#second .item01{ position: absolute; right: 19%; bottom: 80px; }

#second .w_box01 figure{ display: flex; flex-direction: row-reverse; margin: 0 0 0 30%; align-items: flex-end; width: 390px; padding: 110px 0 0; }
#second .w_box01 figure figcaption{ padding: 0 40px 5px 0; font-size: 30px; letter-spacing: 0.05em; text-align: center; }
#second .w_box01 figure figcaption span{ display: block; padding: 0 0 20px 0; font-size: 16px; letter-spacing: 0.05em; }

@media only screen and (max-width: 1680px){

#second .w_box01{ padding: 90px 10% 210px 140px; }
	
}

@media only screen and (max-width: 1380px){

#second .w_box01{ padding: 90px 2% 210px 140px; }
	
}




/* 02 */
#second .w_box02{ position: relative; background: #fff; width: 80%; padding: 70px 24% 80px 200px; box-sizing: border-box; }
#second .w_box02 p{ padding: 30px 0 20px 0; line-height: 200%; /* letter-spacing: 0.2em; */ }

#second .w_box02 .item02{ position: absolute; right: -250px; }

#second #koyanagi { padding: 90px 0 80px; }
#second #koyanagi .w_box02 p { padding: 0; }


/* ---------------------------------------------------------------------------------------- value */
/* #value{ padding: 120px 0 150px; } */

#value .ttl{ padding: 0 170px 0 0; float: left; font-size: 40px; letter-spacing: 0.1em; font-weight: 500; }
#value .ttl:after{ top: 20px; left: 170px; width: 100px; }

#value h2{ float: left; padding: 0; font-size: 35px; letter-spacing: 0.1em; text-align: left; }

#value .w_box{ width: 1200px; margin: 0 auto; box-sizing: border-box; background: #fff; padding: 70px 100px; }


/* value */
#value .value{ padding: 40px 0 60px 0; }
#value .value ul{ padding: 40px 0 0; }
#value .value ul li{ float: left; width: 300px; background: #f8f8f8; border-radius: 10px; /* padding: 30px 50px; */ padding: 30px 30px; box-sizing: border-box;}
#value .value ul li:not(:last-of-type){ margin: 0 50px 0 0; }

#value .value h3{ padding: 0 0 10px 0; font-size: 20px; text-align: center; line-height: 150%; }
#value .value h3 span{ display: block; padding: 0 0 15px 0; font-size: 40px; color: #ea609e; font-family: aktiv-grotesk, sans-serif; font-weight: 400; font-style: normal; }


/* vision */
#vision { padding: 40px 0 150px; }

#value .vision ul{ padding: 10px 0 0; }
#value .vision ul li{ padding: 40px 0; border-bottom: 1px solid #eeeeee; font-size: 24px; line-height: 160%; font-weight: 800; letter-spacing: 0.08em; }
#value .vision ul li span{ display: block; padding: 15px 0 0; color: #606161; font-size: 14px; font-family: aktiv-grotesk, sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.15em; }
#value .value ul li p{ line-height: 200%; letter-spacing: 0.01em; }



/* ---------------------------------------------------------------------------------------- chart */
#chart{ padding: 120px 0 150px; background: #fff; }

#chart h2{ font-size: 40px; letter-spacing: 0.1em; text-align: center; }
#chart h2 span{ display: block; padding: 0 0 20px 0; font-size: 16px; color: #ea609e; letter-spacing: 0.15em; }

#chart img{ padding: 20px 0 150px; }




/* --------------------------------------------------------------------------------------------------------------------------- 
	mobile 
--------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
/* ---------------------------------------------------------------------------------------- common */
#about .ttl{ padding: 0 0 20px 0; font-size: 13px; }
#about .ttl:after{ height: 1px; }


/* ---------------------------------------------------------------------------------------- fv */
#fv{ margin: 65px 0 0; background: url(../images/about/fv-sp.png) center top/100% no-repeat; }
#fv .h1{ width: 75%; padding: 44% 0 0 25%; }
#fv .h1 h1{ padding: 5px 0 13px 20px;font-size: 13px; }
#fv .h1 h1 span{ font-size: 40px; line-height: 160%; margin-top: 0px;}

#fv .fv_bg{ padding: 0; background: none; }
#fv .fv_bg img{ padding: 25px 0 0; width: 100%; height: auto; }

#about #fv h2{ font-size: 20px; line-height: 190%; }



/* ---------------------------------------------------------------------------------------- second */
#second #koyanagi { padding: 90px 0 0; }

#second .bg:before{ content: none; }
#second .bg:first-of-type{ padding: 0; }
#second .bg:last-of-type{ padding: 40% 0 0; }

#about h2{ padding: 20px 0; font-size: 25px; }
#about h2 span{ padding: 0 0 0 15px; font-size: 13px; }


/* 01 */
#second .w_box01{ width: 100%; height: auto; margin: 0; padding: 30px 5% 100px; }
#second .w_box01 p{ line-height: 180%; font-size: 14px; }

#second .w_box01 figure{ margin: 0; width: 100%; padding: 40px 0 0; }
#second .w_box01 figure img{ width: 30%; height: auto; }
#second .w_box01 figure figcaption{ padding: 0 20px 5px 0; font-size: 20px; text-align: right; }
#second .w_box01 figure figcaption span{ padding: 0 0 10px 0; font-size: 13px; }

#second .item01{ position: inherit; width: 90%; height: auto; margin: -50px auto 0; top: -65px; left: 0; }


/* 02 */
#second .w_box02{ width: 100%; height: auto; padding: 100px 5% 60px 5%; }

#second .w_box02 p{ font-size: 13px; }

#second .w_box02 .item02{ position: static; margin: -50% 0 30px 10%; width: 95%; height: auto; }



/* ---------------------------------------------------------------------------------------- value */
#value{ padding: 60px 0; }

#value .w_box{ width: 90%; padding: 50px 5%; }

#value .ttl{ float: none; padding: 0 0 30px 0; font-size: 30px; text-align: center; font-weight: 500; line-height: 60%; }
#value .ttl:after{ bottom: 0; left: 0; top: initial; width: 100%; }
#value .ttl span{ font-size: 13px; }

#value h2{ float: none; padding: 30px 0 0; text-align: center; line-height: 140%; }

#value  h3{ font-size: 15px; }
#value  h3 span{ padding: 0 0 10px 0; font-size: 25px; }

#value  p{ font-size: 13px }

/* value */
#value .value{ padding: 0 0 20px 0; }

#value .value ul{ padding: 25px 0 0; }
#value .value ul li{ float: none; width: 100%; padding: 15px 5%; }
#value .value ul li:not(:last-of-type){ margin: 0 0 25px 0; }
#value .value ul li p;{ line-height: 160%; }

#value .value h3{ padding: 0 0 5px 0; font-size: 16px; }
#value .value h3 span{ font-size: 25px; }

/* vision */
#value .vision{ padding: 40px 0 0; }

#value .vision h2{ font-size: 23px; }

#value .vision ul li{ padding: 20px 0; font-size: 16px; }
#value .vision ul li span{ padding: 10px 0 0; font-size: 12px; line-height: 160%; }


#vision { padding: 0 0 20px; }


/* ---------------------------------------------------------------------------------------- chart */
#chart{ padding: 50px 0; }
#chart h2 span{ padding: 0 0 15px 0; }

#chart .scroll{ overflow-x: scroll; margin: 0 0 60px; }
#chart img{ width: 450px; height: auto; padding: 0; }




	
}