.slanted-bg {
  position: relative;
  z-index: 0;
  overflow: visible;
}

.slanted-bg::before{
  content: '';
  position: absolute;
  top: -88px;
  right: 0;
  width: 0;
  height: 88px;
  border-left: 100vw solid transparent;
  border-bottom: 88px solid #3d8199;
  z-index: -1;
  display: block;
  box-sizing: border-box;
}

.slanted-wrapper{
  margin-top: 88px;
}

.highlight{
  position: relative;
  z-index: 1;
  padding: 4px 10px 4px 0;
}

.highlight:before{
  content: '';
  position: absolute;
  left: 0.5em; /* 半文字分右にずらす */
  top: 0.1em;
  bottom: 0.1em;
  right: 0;
  background-color: #fff;
  z-index: -1;
}

.show_pc{
  display: block;
}

.show_sp{
  display: none;
}

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

  .show_pc{
    display: none;
  }

  .show_sp{
    display: block;
  }

  .slanted-wrapper{
    margin-top: 40px;
  }

  .slanted-bg::before{
    top: -40px;
    height: 40px;
  }

}

.fade {
  opacity: 0;
  transition: .8s;
}

.fade-in {
  opacity: 1;
  transition: 1s;
}



.fade .highlight:before{
  width: 0;
  transition: all 0.6s ease-in-out 0s;
}

.fade-in .highlight:before{
  width: 100%;
}



h1,h2,h3,h4,h5,h6,p,li,a{
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #231815;
  font-weight: 400;
  text-decoration: none;
  margin:0;
  padding: 0;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

h3.lead{
  font-size: 16px;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 32px;
}


@media screen and (max-width: 769px){
  h3.lead{
    font-size: 14px;
  }
}



/*a{
  transition: 0.5s;
}


a:hover{
  opacity: 0.6;
  transition: 0.5s;
}
*/

a img{
  transition: 0.5s;
}

a img:hover{
  filter: brightness(0.5) blur(1px);
  transition: 0.5s;
}

/*
a span.highlight{
  transition: 0.5s;
}

a span.highlight:hover{
  filter: invert(100%);
  transition: 0.5s;

}*/


.logo_h1, .logo_stories, .logo_journal, .logo_about{
  transition: opacity 0.3s;
}
.logo--white { opacity: 0; }
.logo--black { opacity: 1; }

/*
.header--light .logo--white { opacity: 0; }
.header--light .logo--black { opacity: 1; }
*/

.modal-video{
  background-color: rgba(0, 0, 0, 0.8);
}




header{
  position: fixed;
  z-index: 998;
  display: block;
  top: 36px;
  left: 0; 
  width: 100%;
}

header .wrapper h1{
  position: absolute;
  left: 60px;
  top: 0;
}

header .wrapper h1 img.logo_h1{
  width: 130px;
  position: absolute;
}

header .wrapper ul{
    display: flex;
    justify-content: space-between;
    position: absolute;
    right: 54px;
}


header .wrapper ul li{
  margin-left: 28px;
}

header .wrapper ul li a.no_link{
  display: inline-block;
  pointer-events: none;
  opacity: 0.4;
}

header .wrapper ul li a img{
  height: 11px;
  width: auto;
  display: block;
  margin: 0 auto;
  padding: 3px;
}

header .wrapper ul li a img:hover{
  filter: invert(1);
  background-color: #fff;

}


header .wrapper ul li a img.kanji{
  height: 12px;
}



/*
header .wrapper ul li img.logo_journal{
  height: 14.5px;
}
*/

.hover-img-wrap {
  position: relative;
  display: inline-block;
}

.hover-img {
  display: block;
  transition: opacity 0.4s ease;
}

.hover-img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none; /* hover画像の上でホバーが途切れないように */
}

@media screen and (max-width: 769px){
  header .inner{
    width: 100%;
    display: flex;
    justify-content: space-between;  
    position: fixed;
    top: 30px;
  }

  header .inner h1{
    margin-left: 20px;
  }

  header .inner h1 a img{
    width: 70px;
  }

  .overlay ul li a.no_link{
  pointer-events: none;
  opacity: 0.4;   
  }

  .overlay ul li a img{
    filter: invert(100%);
    height: 13px;
    margin: 0 auto;
  }

  .overlay ul li a img.kanji{
    height: 14px;
  }


}


.front_page {
  overflow-x:hidden;
}


.front_page .mv_area{
  position: relative;  
}

.front_page .mv_area h1{
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);  
  width: calc(238/1300*100%);
}


.front_page .mv_area .about_grade{
      position: absolute;
    z-index: 2;
    width: calc(660 / 1300 * 100%);
    max-width: 660px;
    right: 0;
    bottom: -50px;
    height: 100px;
}                                                                                                                                                                                                                                   


.front_page .mv_area .about_grade.fade-in{
  animation:abotu_grade_fade-in 0.5s ease;
}


@keyframes abotu_grade_fade-in {
  0% {transform:translate(calc(660 / 1300 * 100%), 0) ; opacity:0;}
  100% {transform:translate(0, 0) ; opacity:1;}
}



.front_page .mv_area .about_grade img.about_bnr_txt{
  height: 40px;
  position: absolute;
  top: 50%;
  right: calc(80/650*100%);
  transform: translateY(-50%);
}



.front_page .sec01{
  margin-top: 88px;
  position: relative;
  padding-bottom: 100px;
}

.front_page .sec01.slanted-bg{
  background-color: #3782A0;
}

.front_page .sec01.slanted-bg::before{
  border-bottom: 88px solid #3782A0;  
}

.front_page .sec01 h2{
  width: calc(226/1300*100%);
  margin: 0px auto 40px;
  padding-top: 140px;  
}

.front_page .sec01 ul{
  width: calc(1000 / 1300 * 100%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 90px;
    max-width: 1000px;
}

.front_page .sec01 ul li{
  width: calc(450/1000*100%);
  margin-bottom: 70px;
  position: relative;
}

.front_page .sec01 ul li.newicon:after{
  position: absolute;
  content:"";
   background-image: url(/assets/img/stories/thumb/stories_thumb_newicon.png);
   background-size: cover;
   width: 78px;
   height: 78px;
   right: -22px;
   top: -22px;
}


.front_page .sec01 ul li img{
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.front_page .sec01 ul li h4{
  display: block;
  font-size: 15px;
  line-height: 32px;
}

.front_page .sec01 ul li h4 span.en{
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 600;
}

.front_page .sec01 ul li:hover span.highlight{
  filter: invert(100%);
  transition: 0.5s;
}

.front_page .sec01 ul li:hover img{
  transition: 0.5s;
  filter: brightness(0.5);
}


.front_page .to_stories_list{
  width: 240px;
  height: 40px;
  display: block;
  position: relative;
  margin: 0 auto;
  background: linear-gradient(0deg, #5A526E 0%, #6A5176 80%, #857393 100%);
  transition: 0.5s;
}

.front_page .to_stories_list:hover{
  transition: 0.5s;
  filter: grayscale(100%);
}





.front_page .stories_list_btn img.btn_txt{
  height: 13px;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}



.front_page .sec02{
  margin: 88px auto;
  position: relative;
  padding-bottom: 100px;
}

.front_page .sec02.slanted-bg{
  background-color: rgba(55,130,160,0.63);
}

.front_page .sec02.slanted-bg::before{
  border-bottom: 88px solid rgba(55,130,160,0.63);  
}

.front_page .sec02 .slanted-wrapper{
  width: calc(1000/1300*100%);
  max-width: 1000px;
  margin: 0 auto;
}

.front_page .sec02 h2{
  width: calc(436/1000*100%);
  margin: 0px auto 40px 0;
  padding-top: 100px;
}

.front_page .sec02 h3.lead{
  text-align: left;
}

.front_page .sec02 ul{
  width: calc(1000/1300*100%);
  max-width: 1000px;
  margin: 70px auto 80px;
  display: flex;
  justify-content: space-between;
}

.front_page .sec02 ul li{
  width: calc(318/1000*100%);
}

.front_page .sec02 ul li:nth-child(2),
.front_page .sec02 ul li:nth-child(3){
  pointer-events: none;
}


.front_page .sec02 ul li h4{
  display: block;
  font-size: 15px;
  line-height: 32px;
}

.front_page .sec02 ul li img{
  width: 100%;
  margin-bottom: 15px;
}

.front_page .sec02 ul li:hover span.highlight{
  filter: invert(100%);
  transition: 0.5s;
}

.front_page .sec02 ul li:hover img{
  transition: 0.5s;
  filter: brightness(0.5);
}

.front_page .sec03.slanted-bg{
  background-color: rgba(48,25,52,0.63);
  padding-bottom: 45px;
}

.front_page .sec03.slanted-bg::before{
  border-bottom: 88px solid rgba(48,25,52,0.63);  
}

.front_page .sec03 .slanted-wrapper{
  width: calc(1000/1300*100%);
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 175px;
}

.front_page .sec03 .slanted-wrapper .main_area{
  background-image: url(/assets/img/top/sec03_mainimg_bg.jpg);
  background-size: cover;
  position: relative;
} 


.front_page .sec03 .slanted-wrapper .main_area:after{
  content: "";
  position: absolute;
  border: 0.5px solid #9B9B9C;
  width: calc(1046/996*100%);
  height: 92%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.front_page .sec03 .slanted-wrapper .main_area .inner{
  width: calc(890/1000*100%);
  margin: 0 auto ;
  padding-bottom: 65px;
}


.front_page .sec03 .slanted-wrapper .main_area h2{
  width: calc(303/890*100%);
}

.front_page .sec03 .slanted-wrapper .main_area h2 img{
  margin-top: calc(-100/1300*100vw);
  margin-bottom: 65px;
  position: relative;
  z-index: 2;
}

.front_page .sec03 .slanted-wrapper .main_area .txt_area{
  width: calc(484/890*100%);
}


.front_page .sec03 .slanted-wrapper .main_area .txt_area p{
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.015em;
  line-height: 26px;
  margin-bottom: 25px;
}

.front_page .sec03 .slanted-wrapper .main_area .txt_area_ref{
  width: calc(435/890*100%);
  margin-top: 45px;
}

.front_page .sec03 .slanted-wrapper .main_area .txt_area_ref li{
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.015em;
  line-height: 26px;
  line-height: 34px;

}


.front_page .sec03 .slanted-wrapper .sub_area{
  margin-top: 45px;
  background-image:  url(/assets/img/top/sec03_sub_area_bg_sp.jpg);
  background-size: cover;
}

.front_page .sec03 .slanted-wrapper .sub_area .inner{
  width: calc(926/996*100%);
  margin: 0 auto;
  padding: 40px 0;
}

.front_page .sec03 .slanted-wrapper .sub_area .inner .txt_area h3{
  color: #fff;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.015em;
  padding-bottom: 8px;

}

.front_page .sec03 .slanted-wrapper .sub_area .inner .txt_area .grid-table{
  width: calc(588/926*100%);
  border-top: 0.5px solid #C8C9CA;
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.front_page .sec03 .slanted-wrapper .sub_area .inner .txt_area .grid-table .grid-row {
  display: grid;
  grid-template-columns: 60px auto;
}

.front_page .sec03 .slanted-wrapper .sub_area .inner .txt_area .grid-table .grid-row.header {
}

.front_page .sec03 .slanted-wrapper .sub_area .inner .txt_area .grid-table .cell {
  padding: 0.5rem;
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
}

.front_page .sec03 .slanted-wrapper .sub_area .inner a img.btn{
  width: 250px;
  margin: 45px auto 0;
  display: block; 
}

.front_page .sec04.slanted-bg{
  background-color: rgb(182,212,90);
}

.front_page .sec04.slanted-bg::before{
  border-bottom: 88px solid rgb(182,212,90);  
}

.front_page .sec04 .slanted-wrapper .inner{
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding-top: 65px;
  padding-bottom: 100px;
}


.front_page .sec04 .slanted-wrapper .inner .mainimg_area{
  width: 100%;
  position: relative;
}

.front_page .sec04 .slanted-wrapper .inner .mainimg_area img.mainimg{
  width: 100%;
}

.front_page .sec04 .slanted-wrapper .inner .mainimg_area img.logo{
  width: calc(457/1300*100%);
  max-width: 457px;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}


.front_page .sec04 .slanted-wrapper .inner .txt_box{
  width: calc(1100 / 1300 * 100%);
    margin: -35px auto 0px;
    background-color: #fff;
    position: relative;
    padding: 55px 0;
}

.front_page .sec04 .slanted-wrapper .inner .txt_box .txt_area{
  width: calc(975/1100*100%);
  margin: 0 auto;
display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.front_page .sec04 .slanted-wrapper .inner .txt_box .txt_area h3{
  font-size: 20px;
  line-height: 36px;
}

.front_page .sec04 .slanted-wrapper .inner .txt_box .txt_area .txt_detail{
  width: calc(583/975*100%);
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0.015em;
}

.front_page .sec04 .slanted-wrapper .inner .txt_box .txt_area .txt_detail a img.btn{
  width: 250px;
  margin: 45px 0 0 auto;
  display: block; 
}



.front_page .entry_btn{
  width: 240px;
  height: 40px;
  display: block;
  position: relative;
  margin: 48px auto 0;
  background: linear-gradient(0deg, #A3462D 0%, #A7523A 65%, #B0644D 100%);
  transition: 0.5s;
}

.front_page .entry_btn:hover{
  filter: grayscale(1);
  transition: 0.5s;
}


.front_page .sec04 .slanted-wrapper .txt_box  a{
  pointer-events: none;  
}


.front_page .sec04 .slanted-wrapper .txt_box .entry_btn{
  filter: grayscale(100%);

}


.front_page .entry_btn img.btn_txt{
  height: 13px;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.front_page .entry_btn.internship{
  margin: 38px 0 0 auto;
  /*background: linear-gradient(0deg, #211716 0%, #241C19 65%, #48413F 100%);*/
}



.lower_page .mv_area{
  margin: 0 0 0 auto;
  width: calc(1067 / 1300 * 100%);
}

.lower_page .mv_area .wrapper{
  width: 100%;
  position: relative;
  line-height: 0;
}

.lower_page .mv_area .wrapper img.mv_pc{
 width: 100%; 
}


@media screen and (max-width: 769px){
  .front_page .mv_area h1{
    width: calc(380/750*100%);
    letter-spacing: calc(45/750*100%);
  }

  .front_page .sec01, .front_page .sec02{
    margin: 40px auto;
  }

  .front_page .sec01.slanted-bg::before{
    border-bottom: 40px solid #3782A0;
  }

  .front_page .sec02.slanted-bg::before{
    border-bottom: 40px solid rgba(55,130,160,0.63);
  }

  .front_page .sec03.slanted-bg::before{
    border-bottom: 40px solid rgba(48,25,52,0.63);
  }

  .front_page .sec04.slanted-bg::before{
    border-bottom: 40px solid rgb(182,212,90);
  }

  .front_page .sec01 h2{
       width: calc(260 / 750 * 100%);
    padding-top: 65px; 
  }

  .front_page .mv_area img.about_bar{
    width: calc(600/750*100%);
      left: 50%;
    transform: translateX(-50%);
  }

  .front_page .mv_area .about_grade{
    width: calc(600/750*100%);
      left: 50%;
    transform: translateX(-50%);
    height: 80px;
}                                                                                                                                                                                                                                   

.front_page .mv_area .about_grade.fade-in{
  animation:abotu_grade_fade-in_sp 0.5s ease;
}


@keyframes abotu_grade_fade-in_sp {
  0% {transform:translate(calc(660 / 750 * 100%), 0) ; opacity:0;}
  100% {transform:translate(-50%, 0) ; opacity:1;}
}





.front_page .mv_area .about_grade img.about_bnr_txt{
  height: 36px;
  position: absolute;
  top: 50%;
  right: calc(45/600*100%);
  transform: translateY(-50%);
}



  .front_page .sec01 ul{
        margin-top: 75px;
    width: calc(575 / 750 * 100%);
    max-width: unset;
    display: block;
    padding-bottom: 50px;
  }

  .front_page .sec01 ul li{
    width: 100%;
  }

  .front_page .sec01 ul li{
    width: 100%;
  }

  .front_page .sec01 ul li.newicon:before{
    width: 65px;
    height: 65px;
  }

  .front_page .sec01 ul li h4{
    font-size: 14px;
  }

  .front_page .sec02 .slanted-wrapper{
    width: calc(675/750*100%);
  }



  .front_page .sec02 h2{
        width: calc(490 / 675 * 100%);
    margin: 0px auto 40px 0;
    padding-top: 70px;
  }

  .front_page .sec02 ul{
        width: calc(575 / 750 * 100%);
    display: block;
    margin: 50px auto;
  }

  .front_page .sec02 ul li{
    width: 100%;
    margin-bottom: 50px;
  }

  .front_page .sec02 ul li h4{
    font-size: 14px;
  }

  .front_page .sec03 .slanted-wrapper{
    padding-top: 75px;
    width: calc(675 / 750 * 100%);
  }

  .front_page .sec03 .slanted-wrapper .main_area{
  background-image: url(/assets/img/top/sec03_mainimg_bg_sp.jpg);
  background-size: cover;

} 

  .front_page .sec03 .slanted-wrapper .main_area h2 img{
        margin-top: calc(-140 / 750 * 100vw);
    margin-bottom: 40px;
  }

  .front_page .sec03 .slanted-wrapper .main_area .inner{
    width: calc(600/675*100%);
  }

  .front_page .sec03 .slanted-wrapper .main_area h2{
    width: calc(380/600*100%);
  }

  .front_page .sec03 .slanted-wrapper .main_area .txt_area{
    width: calc(478/600*100%); 
  }

  .front_page .sec03 .slanted-wrapper .main_area .txt_area p{
        font-size: 13px;
    line-height: 20px;
  }

  .front_page .sec03 .slanted-wrapper .main_area .txt_area_ref{
    width:100%
  }

  .front_page .sec03 .slanted-wrapper .main_area .txt_area_ref li{
            font-size: 13px;
        line-height: 18px;
        margin-top: 13px;
  }

  .front_page .sec03 .slanted-wrapper .sub_area .inner .txt_area h3{
    font-size: 14px;
    line-height: 22px;
  }

  .front_page .sec03 .slanted-wrapper .sub_area .inner .txt_area .grid-table{
    width: 100%;
  }

  .front_page .sec03 .slanted-wrapper .sub_area .inner .txt_area .grid-table .grid-row{
    display: block;
    margin-bottom: 8px;
  }

  .front_page .sec03 .slanted-wrapper .sub_area .inner .txt_area .grid-table .cell{
        font-size: 13px;
    line-height: 16px;
    padding: 4px;
  }

  .front_page .sec04 .slanted-wrapper .inner .mainimg_area img.logo{
    width: calc(456 / 750 * 100%);
    right: 20px;
    top: -5px;    
  }

  .front_page .sec04 .slanted-wrapper .inner .txt_box .txt_area{
    width: calc(675/750*100%);
    display: block;
  }

  .front_page .sec04 .slanted-wrapper .inner .txt_box .txt_area h3{
        font-size: 20px;
    line-height: 28PX;
    letter-spacing: 0.05em;    
  }

  .front_page .sec04 .slanted-wrapper .inner .txt_box .txt_area .txt_detail{
    width: 100%;
    font-size: 13px;
    line-height: 20px;
    margin-top: 16px;
  }

  .front_page .sec04 .slanted-wrapper .inner .txt_box{
        width: calc(675 / 750 * 100%);
        padding: 40px 0;
  }

  .front_page .entry_btn.internship{
    margin: 48px auto 0;

  }


  .lower_page .mv_area{
    width: 100%;
  }

  .lower_page .mv_area .wrapper{
    margin-top: 100px;
  }

  .lower_page.stories_detail .mv_area .wrapper{
    margin-top: 0;
  }

}








/*ABOUT*/
.lower_page.about .mv_area .wrapper .ttl_area img.h2_ttl{
  width: calc(202/1067*100%);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(-50/1067*100%);

}


.lower_page.about .sec01.slanted-bg::before{

  border-bottom: 93px solid;
 clip-path:  polygon(100% 0, 100% 100%, 0% 100%);
 border-image: var(--bg-gradient);
  transition: background 1s linear;
}

.lower_page.about .sec01 .slanted-wrapper{
  margin-top: 92px;
}


.lower_page.about .sec01 .slanted-wrapper .lead_area{
  width: calc(914 / 1300 * 100%);
  max-width: 914px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;  
  padding-top: 150px;
  padding-bottom: 120px;
}

.lower_page.about .sec01 .slanted-wrapper .lead_area .upper{
  width: calc(250/914*100%);

}

.lower_page.about .sec01 .slanted-wrapper .lead_area .upper img{
  width: 100%;
}

.lower_page.about .sec01 .slanted-wrapper .lead_area .lower{
  width: calc(512/914*100%);
  margin-top: -5px;
}

.lower_page.about .sec01 .slanted-wrapper .lead_area .lower p{
    color: #fff;
    font-size: 15px;
    line-height: 27px; 

}

.lower_page.about .sec02{
  background-color: #231815;
  padding-top: 150px;
  padding-bottom: 130px;
}

.lower_page.about .sec02 .wrapper{
  width: calc(996/1300*100%);
  margin: 0 auto;
  max-width: 1005px;
}

.lower_page.about .sec02 .wrapper .txt_area{
  width: calc(793/996*100%);
  margin: 0 auto;
}

.lower_page.about .sec02 .wrapper .txt_area h3 img{
  height: 22px;
  width: fit-content;
  display: block;
  margin: 0 auto 20px 0;
}

.lower_page.about .sec02 .wrapper .txt_area p{
  padding-top: 35px;
  font-size: 14px;
  line-height: 31px;
  letter-spacing: 0;
  color: #fff;
}

.lower_page.about .sec02 .wrapper ul{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 90px;  
}

.lower_page.about .sec02 .wrapper ul li{
  width: calc(315/996*100%);
}

.lower_page.about .sec02 .wrapper ul li img{
  width: calc(296/315*100%);
  display: block;
  margin: 0 auto 45px;
}

.lower_page.about .sec02 .wrapper ul li p{
  font-size: 15px;
  line-height: 31px;
  letter-spacing: -0.025em;
  color: #fff;
  text-align: center;
}

.lower_page.about .sec03{
  background-color: #595757;
    padding: 150px 0;
}

.lower_page.about .sec03 .wrapper{
      width: calc(988 / 1300 * 100%);
    max-width: 988px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
  }

    .lower_page.about .sec03 .wrapper img.deco{
    width: 210px;
    position: absolute;
    position: absolute;
    right: -75px;
    top: -70px;
  }


.lower_page.about .sec03 .wrapper .inner{
  width: calc(882/988*100%);
  margin: 0 auto;
  padding: 60px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.lower_page.about .sec03 .wrapper .inner img{
  width: calc(450/882*100%);

}

.lower_page.about .sec03 .wrapper .inner .txt_area{
  width: calc(392/882*100%);
}

.lower_page.about .sec03 .wrapper .inner .txt_area img{
  width: calc(200/392*100%);
  margin-bottom: 30px;
}

.lower_page.about .sec03 .wrapper .inner .txt_area p{
  font-size: 14px;
  line-height: 31px;
  letter-spacing: 0;
}

.lower_page.about .sec04{
  background-color: #595757;
    padding: 0 0 150px;
}



.lower_page.about .sec04 ul li{
  margin-right: 30px;
}

.lower_page.about .sec04 ul li img{
  width: 100%;
}

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

  .lower_page.about .sec01 .slanted-wrapper{
  margin-top: 42px;
}


  .lower_page.about .mv_area .wrapper .ttl_area img.h2_ttl{
    left: calc(30 / 750 * 100%);
    width: calc(200 / 750 * 100%);
  }

  .lower_page.about .sec01.slanted-bg::before{
    border-bottom: 42px solid;
  }





  .lower_page.about .sec01 .slanted-wrapper .lead_area{
    width: calc(650 / 750 * 100%);
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 75px;
    display: block;
  }


  .lower_page.about .sec01 .slanted-wrapper .lead_area .upper{
        width: calc(400 / 650 * 100%);
    margin-bottom: 40px;
  }


  .lower_page.about .sec01 .slanted-wrapper .lead_area .lower{
    width: 100%;
    margin-top: 0;    
  }


  .lower_page.about .sec01 .slanted-wrapper .lead_area .lower p{
    font-size: 13px;
    line-height: 23px;
  }


  .lower_page.about .sec02{
    padding: 75px 0 50px;
  }

  .lower_page.about .sec02 .wrapper{
    width: calc(650/750*100%);
  }

  .lower_page.about .sec02 .wrapper .txt_area{
    width: 100%;
  }

  .lower_page.about .sec02 .wrapper .txt_area h3 img{
    width: calc(475/675*100%);
  }

  .lower_page.about .sec02 .wrapper .txt_area p{
        font-size: 13px;
    line-height: 23px;
    padding-top: 20px;
  }


  .lower_page.about .sec02 .wrapper ul{
    margin-top: 40px;
    display: block;
  }

  .lower_page.about .sec02 .wrapper ul li{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }

  .lower_page.about .sec02 .wrapper ul li img{
       width: calc(275 / 675 * 100%);
    margin-right: 20px; 
    margin-bottom: 0;
  }

  .lower_page.about .sec02 .wrapper ul li p{
    font-size: 15px;
    text-align: left;
    line-height: 23px;
  }

  .lower_page.about .sec03{
    padding: 50px 0;
  }

  .lower_page.about .sec03 .wrapper{
    width: calc(675/750*100%); 
  }

  .lower_page.about .sec03 .wrapper img.deco{
    width: 100px;
    right: -10px;
    top: -30px;
  }


  .lower_page.about .sec03 .wrapper .inner{
    display: block;
    width: calc(600 / 675 * 100%);
    padding: 50px 0;
  }

  .lower_page.about .sec03 .wrapper .inner img{
    width: 100%;
  }

  .lower_page.about .sec03 .wrapper .inner .txt_area{
    width: 100%;
    margin-top: 40px;
  }

  .lower_page.about .sec03 .wrapper .inner .txt_area p{
        font-size: 13px;
    line-height: 23px;
  }

  .lower_page.about .sec04{
    padding-bottom: 75px;
  }

}



/*STORIES LIST*/
.lower_page.stories_list .mv_area .wrapper .ttl_area{
    width: calc(361/1067*100%);
    position: absolute;
    top: 50%;
    left: calc(20/1067*100%);
    transform: translateY(-50%);
}

.lower_page.stories_list .mv_area .wrapper .ttl_area img.logo{
  width: calc(226/361*100%);
  display: block;
  margin: 0 auto 33px;

}

.lower_page.stories_list .mv_area .wrapper .ttl_area img.mv_lead{
  width: 100%;
}


.lower_page.stories_list .slanted-wrapper .lead_area{
      width: calc(1000 / 1300 * 100%);
          max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.lower_page.stories_list .sec01{
  margin-top: 88px;
  position: relative;
}

.lower_page.stories_list .sec01.slanted-bg{
  background-color: #3782A0;
}

.lower_page.stories_list .sec01.slanted-bg::before{
  border-bottom: 88px solid #3782A0;  
}

.lower_page.stories_list .sec01 h2{
  width: calc(226/1300*100%);
  margin: 0px auto 40px;
  padding-top: 140px;  
}

.lower_page.stories_list .sec01 h3.upper{
  padding-top: 120px;
}

.lower_page.stories_list .slanted-wrapper .lead_area img.deco{
  position: absolute;
  width: calc(98/1100*100%);
  top: 78px;
  right: 0;
  animation:headset_shake 4s infinite ease-in-out alternate;
}

@keyframes headset_shake {
  0% {transform:translate(0, 0) rotate(0deg);}
  46% {transform:translate(0, 0) rotate(0deg);}
 
  47% {transform:translate(0, 0) rotate(-3deg);}
  48% {transform:translate(0, -1px) rotate(0deg);}
  49% {transform:translate(0, -1px) rotate(3deg);}
 
  50% {transform:translate(1px, 0) rotate(-2deg);}
  51% {transform:translate(0, 1px) rotate(0deg);}
  52% {transform:translate(0, 0) rotate(3deg);}
 
  53% {transform:translate(0, 0) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}



.lower_page.stories_list .sec01 ul{
  width: calc(1000 / 1300 * 100%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 90px;
    max-width: 1000px;
}

.lower_page.stories_list .sec01 ul li{
  width: calc(450/1000*100%);
  margin-bottom: 70px;
  position: relative;
}

.lower_page.stories_list .sec01 ul li.newicon:after{
  position: absolute;
  content:"";
   background-image: url(/assets/img/stories/thumb/stories_thumb_newicon.png);
   background-size: cover;
   width: 78px;
   height: 78px;
   right: -22px;
   top: -22px;
}


.lower_page.stories_list .sec01 ul li img{
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.lower_page.stories_list .sec01 ul li h4{
  display: block;
  font-size: 15px;
  line-height: 32px;
}

.lower_page.stories_list .sec01 ul li h4 span.en{
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 600;
}

.lower_page.stories_list .sec01 ul li:hover span.highlight{
  filter: invert(100%);
  transition: 0.5s;
}

.lower_page.stories_list .sec01 ul li:hover img{
  transition: 0.5s;
  filter: brightness(0.5);
}



.lower_page.stories_list .bnr_area{
  background-color: rgba(55,130,160,0.63);
  padding:120px 0;
}

.lower_page.stories_list .bnr_area a{
  width: 548px;
  margin: 0 auto;
  display: block;
}

.lower_page.stories_list .bnr_area a img{
  width: 100%;
}


@media screen and (max-width: 769px){
  .lower_page.stories_list .mv_area .wrapper .ttl_area{
    width: calc(375 / 750 * 100%);
    top: 50%;
    left: 14px;
    transform: translate(0, -50%);
  }

  .lower_page.stories_list .mv_area .wrapper .ttl_area img.logo{
    margin-bottom: 4px;
  }



  .lower_page.stories_list .sec01{
    margin-top: 40px;
  }

  .lower_page.stories_list .sec01.slanted-bg::before{
    border-bottom: 40px solid #3782A0;
  }

  .lower_page.stories_list .slanted-wrapper .lead_area{
    width: calc(675 / 750 * 100%);
    max-width: unset;
  }

  .lower_page.stories_list .sec01 h3.upper{
    padding-top: 40px;
  }

  .lower_page.stories_list .slanted-wrapper .lead_area img.deco{
        width: calc(120 / 675 * 100%);
        top: 0;
  }

  .lower_page.stories_list .sec01 ul{
        margin-top: 75px;
    width: calc(575 / 750 * 100%);
    max-width: unset;
    display: block;
    padding-bottom: 50px;
  }

  .lower_page.stories_list .sec01 ul li{
    width: 100%;
  }

  .lower_page.stories_list .sec01 ul li.newicon:before{
    width: 65px;
    height: 65px;
  }

  .lower_page.stories_list .sec01 ul li:last-child{
    margin-bottom: 0;
  }

  .lower_page.stories_list .sec01 ul li h4{
    font-size: 14px;
  }

  .lower_page.stories_list .bnr_area{
    padding: 75px 0;
  }

  .lower_page.stories_list .bnr_area a{
        width: calc(575 / 675 * 100%);
    max-width: 575px;
  }
}




/*STORIES DETAIL*/
.lower_page.stories_detail .ttl_area{
  position: absolute;
  width: calc(170 / 1078 * 100%);
  top: calc(217/583*100%);
  left: calc(43/1078*100%);
}

.lower_page.stories_detail .ttl_area img.logo{
  width: 100%;
}

.lower_page.stories_detail .ttl_area img.mv_lead{
  width: calc(98/170*100%);
  margin: 40px auto 0;
  display: block;
}

.lower_page.stories_detail .ttl_area img.mv_btn{
  width: calc(154/170*100%);
  margin: 20px auto 0;
  display: block;
    cursor: pointer;
    transition: 0.3s;
  }

  .lower_page.stories_detail .ttl_area img.mv_btn:hover{
    transition: 0.3s;
    filter: invert(100%);
  }


.lower_page.stories_detail.ito .intro.slanted-bg{
  background-color: rgba(90, 127, 87, .96);
}

.lower_page.stories_detail.wada .intro.slanted-bg{
  background-color: #3782A0;
}

.lower_page.stories_detail.hayashi .intro.slanted-bg{
  background-color: rgba(72, 52, 84, .82);
}

.lower_page.stories_detail.shinjo .intro.slanted-bg{
  background-color: rgba(120, 122, 31, .82);
}




.lower_page.stories_detail.ito .intro.slanted-bg::before{
  border-bottom: 88px solid rgba(90, 127, 87, .96);  
}

.lower_page.stories_detail.wada .intro.slanted-bg::before{
  border-bottom: 88px solid #3782A0;  
}

.lower_page.stories_detail.hayashi .intro.slanted-bg::before{
  border-bottom: 88px solid rgba(72, 52, 84, .82);  
}

.lower_page.stories_detail.shinjo .intro.slanted-bg::before{
  border-bottom: 88px solid rgba(120, 122, 31, .82);  
}



.lower_page.stories_detail .intro .slanted-wrapper{
  padding-bottom: 100px;
}

.lower_page.stories_detail .intro .slanted-wrapper .lead_area{
  padding-top: 120px;
  width: calc(680 / 1300 * 100%);
  max-width: 680px;
  margin: 0 auto;
}

.lower_page.stories_detail .intro .slanted-wrapper .lead_area h3{
  color: #fff;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 38px;
}

.lower_page.stories_detail .intro .slanted-wrapper .lead_area p{
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area{
  width: calc(1178/1300*100%);
  max-width: 1178px;
  margin: 120px auto 0;
  background-color: #fff;
  padding: 40px 0;
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner{
  width: calc(1042/1178*100%);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner img.prof_img{
  width: calc(450/1042*100%);
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt{
  width: calc(524/1042*100%);
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt img{
  display: block;
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt img.num{
  width: calc(133/524*100%); 
  margin-bottom: 33px;
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt img.prof_icon{
  width: calc(128/524*100%); 
  margin-bottom: 20px;
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt p.years{
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt p.years{
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 14px;
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt p.name{
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 35px;
}

.lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt p.detail_txt{
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
  width: calc(390/524*100%);
  margin: 0 auto 0 0;
  display: block;
}


.lower_page.stories_detail .main .wrapper{
  width: calc(900/1300*100%);
  max-width: 900px;
  margin: 100px auto;
}


.lower_page.stories_detail.ito .main.bg_color{
  background-color: rgba(90, 127, 87, .96); 
}

.lower_page.stories_detail.wada .main.bg_color{
  background-color: #3782A0; 
}

.lower_page.stories_detail.hayashi .main.bg_color{
  background-color: rgba(72, 52, 84, .82); 
}

.lower_page.stories_detail.shinjo .main.bg_color{
  background-color: rgba(120, 122, 31, .82);
}


.lower_page.stories_detail .main.bg_color .wrapper{
  margin: 0 auto;
  padding: 100px 0;
}

.lower_page.stories_detail .main.bg_color .wrapper h4,
.lower_page.stories_detail .main.bg_color .wrapper p{
  color: #fff;
}


.lower_page.stories_detail .main .wrapper .txt_area{
  margin-bottom: 45px;
}

.lower_page.stories_detail .main .wrapper .txt_area h4{
  font-size: 25px;
  line-height: 40px;
  letter-spacing: 0;
  margin-bottom: 40px;
}

.lower_page.stories_detail .main .wrapper .txt_area p{
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}

.lower_page.stories_detail .main .wrapper .img_area img{
  width: 100%;
  margin-bottom: 14px;
}

.lower_page.stories_detail .main .wrapper .img_area img.last{
  margin-bottom: 0;
}

.lower_page.stories_detail .main .wrapper ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lower_page.stories_detail .main .wrapper ul li{
  width: calc(443/900*100%);
}


.lower_page.stories_detail .fav_area{
    background-color: #eeeeef;
    padding: 100px 0;
}

.lower_page.stories_detail .fav_area .wrapper{
    width: calc(680/1300*100%);
    background-color: #fff;
    padding: 25px 0 ;
    margin: 0 auto;
}

.lower_page.stories_detail .fav_area .wrapper .inner{
  width: calc(618/680*100%);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.lower_page.stories_detail .fav_area .wrapper .inner img{
  width: calc(292/618*100%);
}

.lower_page.stories_detail .fav_area .wrapper .inner .fav_txt{
  width: calc(295/618*100%); 
}

.lower_page.stories_detail .fav_area .wrapper .inner .fav_txt p.sub_ttl{
  color: #2F4D34; 
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 20px;
}

.lower_page.stories_detail .fav_area .wrapper .inner .fav_txt p.main_ttl{
   font-size: 18px;
   line-height: 1;
   letter-spacing: 0;
  margin-bottom: 20px;
}

.lower_page.stories_detail .fav_area .wrapper .inner .fav_txt p.detail_txt{
   font-size: 13px;
   line-height: 20px;
   letter-spacing: 0;
}

.lower_page.stories_detail .archive ul{
  margin: 100px auto;
  width: calc(943/1300*100%);
  max-width: 943px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.lower_page.stories_detail .archive ul li{
  width: calc(300/943*100%);
  transition: 0.5s;
}

.lower_page.stories_detail .archive ul li img{
  width: 100%;
  margin-bottom: 16px;
}

.lower_page.stories_detail .archive ul li p{
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0.015em;
}

/*
.lower_page.stories_detail .archive ul li:hover p{
  color: #fff;
  transition: 0.5s;
}*/

.lower_page.stories_detail .archive ul li:hover img{
   transition: 0.5s;
  filter: brightness(0.4); 
}


@media screen and (max-width: 769px){
  .slanted-wrapper{
    margin-top: 40px;
  }

  .slanted-bg::before{
    top: -40px;
  }

  .lower_page.stories_detail.ito .intro.slanted-bg::before{
    border-bottom: 40px solid rgba(90, 127, 87, .96);
  }

  .lower_page.stories_detail.wada .intro.slanted-bg::before{
    border-bottom: 40px solid #3782A0;
  }

  .lower_page.stories_detail.hayashi .intro.slanted-bg::before{
    border-bottom: 40px solid rgba(72, 52, 84, .82);
  }

    .lower_page.stories_detail.shinjo .intro.slanted-bg::before{
    border-bottom: 40px solid rgba(120, 122, 31, .82);
  }



  .lower_page.stories_detail .intro .slanted-wrapper{
    padding-bottom: 40px;
  }

  .lower_page.stories_detail .ttl_area{
    width: calc(675/750*100%);
    top: unset;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
  }

  .lower_page.stories_detail .ttl_area img.logo{
    width: calc(200/675*100%);
  }

  .lower_page.stories_detail .ttl_area img.mv_lead{
      width: calc(200/675*100%);
      margin: 10px auto 0 0;  
  }

  .lower_page.stories_detail .ttl_area img.mv_btn{
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    width: calc(300/675*100%);
}

  .lower_page.stories_detail .intro .slanted-wrapper .lead_area{
    width: calc(675/750*100%);

  }

  .lower_page.stories_detail .intro .slanted-wrapper .lead_area h3{
    font-size: 20px;
    line-height: 34px;    
  }

  .lower_page.stories_detail .intro .slanted-wrapper .lead_area p{
    line-height: 20px;
  }

  .lower_page.stories_detail .intro .slanted-wrapper .prof_area{
    width: calc(675/750*100%);
  }

  .lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner{
    width: calc(600/675*100%);
    display: block;
  }

  .lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner img.prof_img{
      width: calc(450 / 600 * 100%);
    margin: 0 auto;
    display: block;  
  }

  .lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt{
    width: 100%;
  }

  .lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt img.num{
    margin: -20px 0 0 auto;
  }

  .lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt img.prof_icon{
    width: 120px;
  }

  .lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt p.years{
    font-size: 13px;
    margin-bottom: 10px;
  }

  .lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt p.name{
    font-size: 20px;
    margin-bottom: 20px;
  }

  .lower_page.stories_detail .intro .slanted-wrapper .prof_area .inner .prof_txt p.detail_txt{
    width: 100%;
  }







  .lower_page.stories_detail .main .wrapper{
        width: calc(675 / 750 * 100%);
    max-width: unset;
    margin: 75px auto;
  }

  .lower_page.stories_detail .main .wrapper .txt_area h4{
      font-size: 20px;
    margin-bottom: 20px;  
    line-height: 32px;
  }

  .lower_page.stories_detail .main.bg_color .wrapper{
    padding: 75px 0;
  }

  .lower_page.stories_detail .main .wrapper .img_area img{
    margin-bottom: 2px;
  }

  .lower_page.stories_detail .fav_area{
    padding: 75px 0;
  }

  .lower_page.stories_detail .fav_area .wrapper{
    width: calc(675/750*100%);
  }

  .lower_page.stories_detail .fav_area .wrapper .inner{
    width: calc(600/675*100%);
    display: block;
  }

  .lower_page.stories_detail .fav_area .wrapper .inner img{
    width: calc(500 / 675 * 100%);
    margin: 0 auto 30px;
    display: block;
  }

  .lower_page.stories_detail .fav_area .wrapper .inner .fav_txt{
    width: 100%;
  }

  .lower_page.stories_detail .fav_area .wrapper .inner .fav_txt p.main_ttl{
    margin-bottom: 10px;
  }

  .lower_page.stories_detail .archive ul{
        width: calc(675 / 750 * 100%);
    display: block;
    margin: 75px auto;

  }

  .lower_page.stories_detail .archive ul li{
    width: 100%;
  }

  .lower_page.stories_detail .archive ul li a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }

  .lower_page.stories_detail .archive ul li img{
    width: 48%;
    margin-bottom: 0;
  }

  .lower_page.stories_detail .archive ul li p{
        width: 48%;
    font-size: 13px;
    line-height: 20px;
  }


}







/*words*/
.lower_page.journal_words .mv_area .wrapper .ttl_area{
    width: calc(243 / 1067 * 100%);
    position: absolute;
    top: 50%;
    left: calc(-33 / 1067 * 100%);
    transform: translateY(-50%);
}

.lower_page.journal_words .mv_area .wrapper .ttl_area img.logo{
  width: calc(226/361*100%);
  display: block;
  margin: 0 auto 33px;

}

.lower_page.journal_words .mv_area .wrapper .ttl_area img.mv_lead{
  width: 100%;
}


.lower_page.journal_words .slanted-wrapper .lead_area{
  width: calc(1000 / 1300 * 100%);
  max-width: 1000px;
  margin: 0 auto 78px;
  position: relative;
}

.lower_page.journal_words .sec01{
  margin-top: 88px;
  position: relative;
}

.lower_page.journal_words .sec01.slanted-bg{
  background-color: rgba(55, 130, 160, .63);
  padding-bottom: 78px;
}

.lower_page.journal_words .sec01.slanted-bg::before{
  border-bottom: 88px solid rgba(55, 130, 160, .63);
}

.lower_page.journal_words .sec01 h2{
  width: calc(226/1300*100%);
  margin: 0px auto 40px;
  padding-top: 140px;  
}

.lower_page.journal_words .sec01 h3.upper{
  padding-top: 78px;
}


.lower_page.journal_words .sec01 .index_area{
width: calc(808 / 1300 * 100%);
    margin: 0 auto;
    background-color: #fff;
    max-width: 808px;
    padding: 34px 56px;

}

.lower_page.journal_words .sec01 .index_area h3 img{
    display: block;
    height: 16px;
    margin: 0 auto;  
}


.lower_page.journal_words .sec01 .index_area ul{
  margin-top: 34px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lower_page.journal_words .sec01 .index_area ul:after{
  content:"";
  display: block;
   width: calc(180/808*100%);;
}

.lower_page.journal_words .sec01 .index_area ul:before{
  content:"";
  display: block;
   width: calc(180/808*100%);;
   order: 1;
}



.lower_page.journal_words .sec01 .index_area ul li{
  width: calc(180/808*100%);
  margin-bottom: 14px;
}

.lower_page.journal_words .sec01 .index_area ul li:before{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: cover;
    background-image: url(../img/journal/words/index_list_icon.png);
    margin-right: 6px;
    margin-bottom: -2px;
}

.lower_page.journal_words .sec01 .index_area ul li a{
  transition: 0.5s;
  position: relative;
}

.lower_page.journal_words .sec01 .index_area ul li a:hover{
  color: #3782A0;
  transition: 0.5s;
}

.lower_page.journal_words .sec01 .index_area ul li a:after{
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #3782A0;
bottom: -1px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s;
}

.lower_page.journal_words .sec01 .index_area ul li a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}











.lower_page.journal_words .slanted-wrapper .lead_area img.deco{
  position: absolute;
  width: calc(98/1100*100%);
  top: 78px;
  right: 0
}




.lower_page.journal_words .sec02{
  width: calc(900 / 1300 * 100%);
  margin: 0 auto 147px;
  max-width: 900px;
}

.lower_page.journal_words .sec02 .words_detail{
  padding-top: 85px;
}

.lower_page.journal_words .sec02 .words_detail h3{
  background-color:#3782A0 ;
  color: #fff;
  padding: 12px 20px;
  font-size: 18px;

}

.lower_page.journal_words .sec02 .words_detail p{
  padding: 20px 20px 0 20px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.025em;

}


@media screen and (max-width: 769px){
  .lower_page.journal_words .mv_area .wrapper .ttl_area{
    left: calc(30 / 750 * 100%);
    width: calc(250 / 750 * 100%);
  }

  .lower_page.journal_words .sec01{
    margin-top: 40px;
  }

  .lower_page.journal_words .sec01.slanted-bg{
    padding-bottom: 50px
  }

  .lower_page.journal_words .sec01.slanted-bg::before{
    border-bottom: 40px solid rgba(55, 130, 160, .63);
  }

  .lower_page.journal_words .slanted-wrapper .lead_area{
    width: calc(675/750*100%);
    margin-bottom: 50px;
  }

  .lower_page.journal_words .sec01 h3.upper{
    padding-top: 50px;
  }

  .lower_page.journal_words .sec01 .index_area{
    width: calc(675 / 750 * 100%);
    max-width: unset;
    padding: 25px 0;
  }

  .lower_page.journal_words .sec01 .index_area .wrapper{
    width: calc(600 / 675 * 100%);
    margin: 0 auto;
  }

  .lower_page.journal_words .sec01 .index_area ul li{
    width: 48%;
    margin-bottom: 20px;
  }

  .lower_page.journal_words .sec01 .index_area ul li:before{
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }

  .lower_page.journal_words .sec01 .index_area ul li a{
    font-size: 14px;
    letter-spacing: 0;
  }

  .lower_page.journal_words .sec02{
        width: calc(675 / 750 * 100%);
    margin: 0 auto 150px;
    max-width: unset;
  }

  .lower_page.journal_words .sec02 .words_detail{
    padding-top: 50px;
  }

  .lower_page.journal_words .sec02 .words_detail h3{
    font-size: 16px;
    padding: 12px 12px;
    line-height: 20px;
  }

  .lower_page.journal_words .sec02 .words_detail p{
    padding: 12px 12px 0 12px;
  }
}

.gotop_area{
  position: relative;
}


img#gotop{
width: 38px;
    position: absolute;
    right: 30px;
    bottom: 28px;
    cursor: pointer;
    transition: .6s;
    z-index: 1;
    transition: 0.5s;

}

img#gotop:hover{
  opacity: 0;
  transition: 0.5s;
}




footer{
  background-color: #000;
}

footer .wrapper{
/*  width: calc(1100/1300*100%);
  max-width: 1100px;*/
  margin: 0 auto 0 60px;
  padding: 50px 0 120px;
  position: relative;
}

footer .wrapper .upper{
  /*width: calc(196/1100*100%);
  width: 196px;*/
  margin: 0 auto 0 0;
}

footer .wrapper .upper img.logo{
  /*width: calc(104/196*100%);*/
  width: 104px;
  margin-bottom: 40px;
}

footer .wrapper .upper ul{
  display: flex;
}

footer .wrapper .upper ul li a img{
  height: 11px;
  width: auto;
  display: block;
  margin-right: 28px;
  filter: invert(100%);

}

footer .wrapper .upper  ul li a img.kanji{
  height: 12px;
}


footer .wrapper .upper  ul li a.no_link{
    display: inline-block;
    pointer-events: none;
    opacity: 0.4;  
}


footer img.copyright{
  height: 12px;
  width: fit-content;
  display: block;
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
}


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

  img#gotop{
    width: 28px;
    right: 20px;
  }


  footer .wrapper{
    width: calc(675 / 750 * 100%);
    padding: 75px 0 120px; 
    margin: 0 auto;
  }

  footer .wrapper .upper{
    width: calc(275/675*100%);
  }

  footer .wrapper .upper img.logo{
    width: 100%;
    margin-bottom: 50px;
  }

  footer .wrapper .upper ul{
    display: block;
  }

  footer .wrapper .upper ul li a img{
    height: 13px;
    margin-bottom: 25px;
  }

  footer .wrapper .upper ul li a img.kanji{
    height: 14px;
  }

  footer img.copyright{
    bottom: 20px;
  }
}