@charset "UTF-8";
/* CSS Document */
/*-----------------------------------------------------
index
------------------------------------------------------*/
/* concept, page_content
------------------------------------------------------*/
.page_title {
 font-size: 2.8rem;
 line-height: 1.6;
 margin-bottom: 40px;
 letter-spacing: 0.1em;
}
#access .page_title, #index_story .page_title  {
  margin-bottom: 48px;
}
.en .page_title {
 font-size: 3rem;
 letter-spacing: 0.16em;
}
.page_sub {
 font-size: 1.4rem;
 line-height: 1.8;
 margin-top: 10px;
 letter-spacing: 0.32em;
}
#concept .page_title {
 margin-bottom: 56px;
}
 .concept_text {
  font-size: 1.6rem;
  line-height: 2;
}
 .en .concept_text {
  font-size: 1.7rem;
  line-height: 1.8;
}
 .concept_text p{
  margin-bottom: 40px;
} 
.en .concept_text p{
  letter-spacing: 0.06em;
}
 .concept_text p:last-child {
  margin-bottom: 0;
}
.page_content {
 overflow: hidden;
}
.page_content_in {
 position: relative; 
}
.page_content  p {
 margin-bottom: 24px;
}
.en .page_content  p {
 letter-spacing: 0.06em;
}
#concept {
 margin-top: 70px;
}
.fog_content {
 padding-bottom: 105px; 
}
#index .fog_content {
 padding-bottom: 240px; 
}
.page_cont_flex {
 display: flex;
 margin-bottom: 64px;
 flex-direction: column;
}
.page_cont_flex:last-child {
 margin-bottom: 0;
}
.page_cont_flex_in {
 margin-bottom: 48px;
}
.page_cont_flex_in:last-child {
 margin-bottom: 0;
}
 
@media screen and (min-width: 768px) {
 .page_title {
 font-size: 4rem;
 }
#index_story .page_title {
  margin-bottom: 80px;
}
 .en .page_title {
  font-size: 4.2rem;
}
 .concept_text {
  float: right;
  width: 80%;
  font-size: 1.8rem;
  line-height: 2.4;
 }
 .en .concept_text {
  font-size: 2rem;
  line-height: 2.2;
}
#concept .page_title {
  margin-bottom: 32px;
}
 .concept_text p{
  margin-bottom: 60px;
}
 .page_cont_flex {
  flex-direction: row;
  margin-bottom: 100px;
  justify-content: space-between;
 }
.page_content  p {
 margin-bottom: 32px;
}
 .page_content_in .row {
  margin-right: -22px;
margin-left: -22px;
 }
.page_cont_flex_in {
  margin-bottom: 0;
  padding-right: 22px;
  padding-left: 22px;
}
#index .fog_content {
 padding-bottom: 250px; 
}
 #concept {
  margin-top: 0px;
}
}
@media screen and (min-width: 1024px) {
  .concept_text {
  width: 68%;
}
#concept .page_title {
  margin-bottom: 40px;
}
.fog_content  {
 padding-bottom: 150px;
}
#index .fog_content  {
 padding-bottom: 290px;
}
 .page_content_in .row {
  margin-right: -43px;
margin-left: -43px;
 }
.page_cont_flex_in {
  margin-bottom: 0;
  padding-right: 43px;
  padding-left: 43px;
}
}
@media screen and (min-width: 1366px) {
#index .fog_content  {
 padding-bottom: 332px;
}
}
/* fog section
------------------------------------------------------*/
.sec_img_wrap {
 position: relative;
}
.sec_img {
 height: 570px;
 background-size:  cover;
 position: relative;
 overflow: hidden;
}
#section01 .sec_img {
 background: url("../images/sec1_main.jpg") center no-repeat;
 background-size:  cover;
}
#section02 .sec_img {
 background: url("../images/sec2_main.jpg") center no-repeat;
 background-size:  cover;
}
#section03 .sec_img {
 background: url("../images/sec3_main.jpg") center no-repeat;
 background-size:  cover;
}
.sec_img  .container{
 position: relative;
 z-index: 4; 
}
.fog1 {
 position: absolute;
 right: 0;
 bottom: 0;
 margin-right: 75%;
 margin-bottom: 76px;
}
.fog1 img {
 width: 309px;
 display: block;
}
.fog1_right {
 position: absolute;
 left: 75%;
 bottom: 0;
 margin-bottom: 76px;
}
.fog1_right img {
 width: 309px;
 display: block;
}
 .fog2 {
 position: absolute;
 left: 80%;
 bottom: 0;
}
.fog2 img {
 height: 40px;
 display: block;
}
 .fog2_left {
 position: absolute;
 right: 80%;
 bottom: 0;
}
.fog2_left img {
 height: 40px;
 display: block;
}
.fog3 {
 position: absolute;
 right: 0;
 top: -20px;
 margin-right: 70%;
 z-index: 3;
}
#carousel .fog3 {
 position: absolute;
 right: 0;
 top: 62px;
 margin-right: 80%;
} 
.fog3 img {
 width: 309px;
 display: block;
}
.fog3_right {
  position: absolute;
  left: 70%;
  top: -20px;
  z-index: 3;
}
.page_content .fog3_right {
  top: auto;
 bottom: -24px;
}
#index .page_content .fog3_right {
 bottom: -83px;
}
.fog3_right img {
 width: 309px;
 display: block;
}
.fog4 {
 position: absolute;
 top: 0;
 right: 48%;
 z-index: 2;
}
#section03 .fog4 {
 position: absolute;
 top: 0;
 right: 52%;
}
.fog4 img {
 height: 104px;
 display: block;
}
.fog4_right {
 position: absolute;
 top: 0;
 left: 54%;
 z-index: 2;
}
.fog4_right img {
 height: 104px;
 display: block;
}
.sec_title {
 font-size: 2.6rem;
 letter-spacing: 0.08em;
 line-height: 1.5;
}
.content_even .sec_title {
 float: right;
}
.adjustment .content_even .sec_title {
  float: none;
}
.sub_title {
 font-size: 1.4rem;
 letter-spacing: 0.32em;
 line-height: 1.8;
 margin-bottom: 14px;
}
.text_vertical {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
 margin-right: 22px;
 margin-bottom: 20px;
 margin-top: 7px;
 letter-spacing: 0.42em;
 width: 26px;
 font-size: 1.4rem;
}
.text_vertical2 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
 font-size: 1.2rem;
 color: #366551;
}
.content_even .text_vertical {
 margin-right: 0;
 margin-left: 22px;
}
.content_flex {
 display: flex;
 justify-content: space-between;
}
.content_flex2 {
 display: flex;
 justify-content: space-between;
 flex-direction: column;
 flex-wrap: wrap;
}
#index .content_flex {
 margin-top: 48px;
}
 .content_in {
  display: flex;
 flex-direction: column;
  width: calc(100% - 26px);
}
.img1 {
 margin-bottom: 8px;
}
.about_content {
 margin-bottom: 140px;
 padding-top: 76px;
 overflow: hidden;
}
.content_text {
 margin-bottom: 24px;
}
 .content_text  p {
  margin-bottom: 24px;
}
 .content_text  p:last-child {
  margin-bottom: 0;
}
.en .content_text p {
 letter-spacing: 0.06em;
}
@media screen and (max-width: 1024px) {
 #section01 .fog4 {
 position: absolute;
 right: 36%;
}
 #section03 .fog4 {
  position: absolute;
  right: 36%;
}
.fog4_right {
  position: absolute;
  left: 37%;
 }
}
@media screen and (max-width: 767px) {
 .sp_title {
  position: absolute;
top: -58px;
z-index: 5;
 }
.adjustment .sp_title {
  position: absolute;
top: -100px;
z-index: 5;
 }
.fog1 {
 position: absolute;
 right: 0;
 bottom: 0;
 margin-right: 65%;
 margin-bottom: 56px;
}
 .fog1_right {
 position: absolute;
 left: 65%;
 bottom: 0;
 margin-bottom: 56px;
}
.fog1 img, .fog1_right img {
 width: auto;
 height: 28px;
}
 .fog2 {
 position: absolute;
 left: 70%;
  bottom: 0px;
}
.fog2 img {
 height: 28px;
}
 .fog2_left {
 position: absolute;
 right: 70%;
  bottom: 0px;
}
.fog2_left img {
 height: 28px;
}
.fog3 {
  position: absolute;
  right: 0;
  top: -75px;
 margin-right: 60%;
 }
 .adjustment .fog3 {
  position: absolute;
  top: -117px;
 }
 #carousel .fog3 {
  position: absolute;
  right: 0;
  top: 20px;
  margin-right: 70%;
}
 .fog3_right {
  position: absolute;
  left: 60%;
  top: -75px;
 }
 .adjustment .fog3_right {
  position: absolute;
  top: -117px;
 }
.fog3 img, .fog3_right img {
 width: 170px;
}
#section01 .fog4 {
 position: absolute;
 top: 0;
 right: 17%;
}
#section03 .fog4 {
  position: absolute;
  top: 0;
  right: 17%;
}
.en #section03 .fog4 {
  position: absolute;
  top: 0;
  right: 13%;
}
.fog4 img {
 height: 104px;
}
.fog4_right {
  position: absolute;
  top: 0;
  left: 21%;
}
 .content_even .sec_title {
  text-align: right;
}
 #section02 .sec_img {
  background-position: -130px;
 }
.adjustment {
  padding-top: 120px;
 }
}

@media screen and (min-width: 768px) {
.content_flex,
 .content_flex2 {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}
.content_flex2 {
 margin-right: -12px;
 margin-left: -12px;
 justify-content: flex-start;
}
#index .content_flex {
 margin-top: 64px;
}
 .content_in {
  justify-content: space-between;
 flex-direction: row;
}
 .content_text {
  width: 50%;
  margin-bottom: 0;
 }
 .content_even  .content_text {
  order: 2;
 }
  .content_img {
  width: 45%;
 }
 .content_text  p {
  margin-bottom: 32px;
}
 .adjustment .sec_img {
  margin-top: -70px;
 }
 .adjustment .sec_title {
  position: relative;
  z-index: 4;
 }
  .adjustment .fog4 {
  position: absolute;
  top: 46px;
}
 .adjustment .fog4_right {
  position: absolute;
  top: 46px;
}
#brand-council .text_vertical {
  margin-right: 34px;
}
 .about_content {
 margin-bottom: 130px;
  padding-top: 20px;
}
}
@media screen and (min-width: 1025px) {
#index .content_flex {
 margin-top: 90px;
}
.text_vertical {
 margin-right: 49px;
}
 .content_even .text_vertical {
 margin-left: 49px;
}
 .content_text {
  width: 42%;
 }
  .content_img {
  width: 46%;
 }
 .about_content {
 margin-bottom: 190px;
  padding-top: 20px;
}
#brand-council .text_vertical {
  margin-right: 74px;
}
}
/*------------------------------------------------------
carousel
------------------------------------------------------*/
.fade .image {
  width: 100%;
  height: 100%;
}
.fade img {
  width: 100%;
  object-fit: cover;
}

.slick-prev, .slick-next {
 width: 14px;
 height: 28px;
}
.slick-prev:before {
  content:'';
}
.slick-next:before {
  content:'';
}
.slick-prev,
.slick-prev:hover,
.slick-prev:focus {
 left: 24px;
 z-index: 10;
 background: url("../images/prev.png") 0 0 no-repeat;
 background-size: 14px;
}
.slick-next,
.slick-next:hover,
.slick-next:focus {
 right: 24px;
 z-index: 10;
 background: url("../images/next.png") 0 0 no-repeat;
 background-size: 14px;
}
.slick-dots {
 display: none !important;
}
#carousel {
 overflow: hidden;
 margin-bottom: 110px;
 padding-top: 20px;
}
#carousel_in {
 position: relative; 
}
.slick-dotted.slick-slider {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
.fade img {
  min-height: 250px;
}
}
@media screen and (min-width: 768px) {
.slick-prev, .slick-next {
 width: 20px;
 height: 40px;
}
.slick-prev,
.slick-prev:hover,
.slick-prev:focus {
 left: 56px;
 z-index: 10;
 background: url("../images/prev.png") 0 0 no-repeat;
 background-size: 20px;
}
.slick-next,
.slick-next:hover,
.slick-next:focus {
 right: 56px;
 z-index: 10;
 background: url("../images/next.png") 0 0 no-repeat;
 background-size: 20px;
}
#carousel {
 margin-bottom: 184px;
}
}
@media screen and (min-width: 1025px) {
#carousel {
 padding-top: 70px;
 margin-bottom: 184px;
}
}

/*------------------------------------------------------
access
------------------------------------------------------*/
.page_content p.link_map {
 margin-bottom: 48px;
 padding-top: 8px;
}
.link_map a{
	display: inline-flex;
	border: 1px solid #428068;
	padding: 12px 24px;
	border-radius: 4px;
	text-decoration: none;
 justify-content: center;
}
.en .link_map a{
 letter-spacing: 0.06em;
}
.link_map img {
	margin-left: 4px;
}
.title_border_b {
	font-size: 2.2rem;
	margin-bottom: 24px;
 padding-bottom: 16px;
	border-bottom: 1px solid #919D9D;
 letter-spacing: 0.05em;
}
.en .title_border_b {
 letter-spacing: 0.06em;
}
.title_border_l {
	border-left: 1px solid #919D9D;
	padding-left: 24px;
	margin-bottom: 24px;
}
.title_border_l dt {
 margin-bottom: 4px;
}
.title_border_l dd {
 margin-bottom: 0px;
}

#access {
 padding-top: 50px;
}
#index_story {
 padding-top: 55px;
 margin-bottom: 113px;
}
#access .fog1{
 position: absolute;
 right: 0;
 top: -50px;
 margin-right: 55%;
 z-index: 1;
}
#index_story .fog3 {
position: absolute;
left: 24px;
top: -55px;
}
#access .container {
 position: relative;
 z-index: 2;
}
@media screen and (max-width: 767px) {
 .link_map a{
  width: 100%;
  text-align: center;
}
}
@media screen and (min-width: 768px) {
.title_border_b {
	margin-bottom: 32px;
 padding-bottom: 22px;
}
 .access_text {
  width: 44.9%;
 }
 .access_img {
  width: 51.2%;
 }
}
@media screen and (min-width: 768px) {
 #access, #index_story  {
 padding-top: 68px;
}
#access .fog1 {
 position: absolute;
 top: -68px;
 margin-right: 70%;
}
 #index_story .fog3 {
 position: absolute;
 top: -68px;
 margin-right: 70%;
  left: auto;
}
}
@media screen and (min-width: 1024px) { 
 #access, #index_story {
 padding-top: 76px;
}
#access .fog1 {
 position: absolute;
 top: -76px;
 margin-right: 70%;
}
 #index_story .fog3 {
 position: absolute;
 top: -76px;
 margin-right: 70%;
  left: auto;
} 
}
/*------------------------------------------------------
brand-council
------------------------------------------------------*/
.content_title {
 font-size: 2.6rem;
 line-height: 1.5;
 margin-bottom: 16px;
 letter-spacing: 0.08em;
}
.coucil_about {
 font-size: 1.6rem;
}
.logo_img {
 width: 100%;
}
.page_img {
 margin-bottom: 148px;
}
@media screen and (min-width: 768px) {
.content_title {
 margin-bottom: 24px;
}
.coucil_about {
 font-size: 1.8rem;
}
#brand-council .content_text {
 width: calc((100% - 24px) / 2 );
}
.page_img {
 margin-bottom: 120px;
}
}
@media screen and (min-width: 1024px) {
#brand-council .content_text {
 width: calc((100% - 56px) / 2 );
}
.page_img {
 margin-bottom: 200px;
}
 }

/*------------------------------------------------------
story
------------------------------------------------------*/
#story .page_title {
  margin-bottom: 120px;
}
.story_content {
 padding-bottom: 88px;
}
.story_list {
 margin-bottom: 32px;
 padding: 0;
}
.story_list a {
 display: flex;
 flex-direction: row;
}
.story_thumb {
 margin-bottom: 8px;
}
.story_list .story_cat {
 margin-left: 8px;
 line-height: 1;
 letter-spacing: 0.132em;
} 
.story_title {
font-size: 1.5rem;
 line-height: 1.6;
 letter-spacing: 0.03em
}
.story_date {
 font-size: 1.4rem;
 line-height: 1.8;
 letter-spacing: 0.12em;
}
#story .fog3 {
  position: absolute;
  z-index: 3;
 top: auto;
 right: 0;
 bottom: 0;
 margin-right: 60%;
}
#story_article .fog3_right {
  position: absolute;
  z-index: 3;
 top: auto;
 left: 60%;
 bottom: 425px;
}
.to_story {
 text-align: right;
 letter-spacing: 0.06em;
 margin-top: 26px;
}
.to_story img {
 margin-left: 8px;
}
@media screen and (min-width: 728px) {
#story .page_title {
  margin-bottom: 40px;
}
.story_content {
 padding-bottom: 132px;
}
.story_list {
 margin-bottom: 40px;
 padding-right: 12px;
 padding-left: 12px;
}
#story .fog3 {
 margin-right: 75%;
}
 #story_article .fog3 {
  position: absolute;
  z-index: 3;
  top: auto;
  right: 0;
  bottom: 370px;
  margin-right: 60%;
}
#index_story {
  margin-bottom: 146px;
}
.index_story_title {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
}
.to_story {
 margin-bottom: 80px;
}
}
/*story srticle
------------------------------------------------------*/
#story_article article {
 padding-top: 30px;
}
#story_article .story_content {
 padding-top: 122px;
 padding-bottom: 0;
}
.story_top {
 position: relative;
}
.story_first {
 width: 100%;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}
#story_article .story_title {
 font-size: 2.6rem;
 line-height: 1.5;
 letter-spacing: 0.08em;
 margin-bottom: 20px;
}
 .story_info {
  margin-bottom: 10px;
 }
.story_info li {
 display: inline;
 font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.12em;
 padding-right: 4px;
}
.profile_company {
 font-size: 1.4rem;
 line-height: 1.6;
 letter-spacing: 0.05em;
}
.profile_name {
 font-size: 1.8rem;
 line-height: 1.6;
 letter-spacing: 0.05em;
 margin-bottom: 10px;
}
.profile_desc {
 letter-spacing: 0.02em;
}
.story_kv {
 padding-left: 24px;
}
.profile_sp {
 padding: 78px 24px 0;
}
.story_content h2 {
  font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
#story_article .story_content h2 {
 font-size: 2.4rem;
 line-height: 1.5;
 letter-spacing:  0.08em;
 margin-bottom: 30px;
 padding-top: 27px;
}
#story_article .story_content h2:first-child {
 padding-top: 0;
}
#story_article .story_content p {
 margin-bottom: 30px;
}
#story_article .story_content_in img {
 margin: 12px 0 12px;
  max-width: 100%;
  height: auto;
}
.credit  {
 padding-top: 60px;
}
.credit dt {
 font-size: 1.1rem;
 line-height: 1.8;
 letter-spacing: 0.2rem;
 border-bottom: 1px solid #243A2E;
 padding-bottom: 10px;
 margin-bottom: 10px;
 font-weight: normal;
}
.credit dd {
 margin-bottom: 5px;
 font-size: 1.2rem;
 line-height: 1.8;
 letter-spacing: 0.12rem;
}
.credit dl {
 margin-bottom: 32px;
}
.share {
 text-align: center;
 margin-bottom: 140px;
 margin-top: 215px;
}
.share dt {
 margin-bottom: 40px;
 font-weight: normal;
}
.share dd {
 display: inline;
 padding: 0 8px;
}
.back_to_list {
border: 1px solid #428068;
 border-radius: 4px;
 padding: 16px 24px;
 text-align: center;
 color: #154734;
 font-size: 1.6rem;
 letter-spacing: 0.06em;
 display: block;
}
.back_to_list  img {
 margin-right: 8px;
}
@media screen and (max-width: 767px) {
 .story_top {
 padding-bottom: 58px;
}
 .credit .col-md-4 {
  adding-right: 0px;
  padding-left: 0px;
 }
 #story_article .fog1_right {
    position: absolute;
    left: 55%;
    bottom: 0;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
#story_article article {
  padding-top: 142px;
 padding-bottom: 240px;
}
 .story_top {
  display: flex;
  padding-bottom: 200px;
  padding-left: 24px;
 }
 .story_top .fog1_right {
  position: absolute;
  left: 75%;
  bottom: 0;
  margin-bottom: 0;
}
.story_first {
  padding-right: 24px;
  padding-left: 0px;
 display:flex;
  flex-flow: column;
  justify-content:space-between;
 width: 40%;
 }
 .story_info {
  margin-bottom: 15px;
 }
.profile_desc {
 font-size: 1.4rem;
 letter-spacing: 0.04em;
}
 #story_article .story_title {
  font-size: 3.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
 }
.story_kv {
  padding-left: 0;
 width: 60%;
}
 #story_article .story_content {
  padding-top: 70px;
}
 .story_content_in {
  width: 690px;
  margin: 0 auto;
  padding: 0;
 }
 #story_article .story_content h2 {
  margin-bottom: 40px;
  padding-top: 70px;
  font-size: 2.6rem;
}
 #story_article .story_content p {
  margin-bottom: 35px;
}
 #story_article .story_content_in img {
  margin: 15px 0;
 }
 #story_article .fog3 {
    margin-right: 75%;
  }
 .back_to_list { 
  width: 332px;
  margin: 0 auto;
 }
  .back_to_list img {
   margin-right: 8px;
 }
 .credit {
  display: flex;
  justify-content: flex-start;
  margin-right: -17px;
  margin-left: -17px;
  padding-top: 90px;
 }
.credit dl {
padding-right: 17px;
 padding-left: 17px;
}
/*.share {
  margin-bottom: 136px;
 }*/
}
@media screen and (min-width: 1025px) {
  .story_top {
    padding-left: 80px;
  }
 .story_first {
  padding-right: 80px;
 width: 50%;
 }
 .story_kv {
 width: 50%;  
 }
}
@media screen and (min-width: 1441px) {
    .story_top {
    width: 1300px;
     margin: 0 auto;
    padding-left: 0px;
 }
}
/*@media screen and (min-width: 1440px) and (max-width: 1920px) {
   .story_top {
    width: 1300px;
    float: right;
    padding-left: 0px;
 }
}
@media screen and (min-width: 1920px) {
    .story_top {
    width: 1300px;
     margin: 0 auto;
    padding-left: 0px;
 }
}*/