@charset "utf-8";

/* header */
#index header{display: flex; justify-content: space-between; padding: 30px 0 0;}
#index header .toiawase{width: 100%; display: flex; flex-direction: column; align-items: center;}
#index header .toiawase img{width: 20%;  display: block;}
#index header a .logo{text-align: left; width: 100%;}
#index header a{text-decoration: none; color:#231815; transition: .3s; font-size: 1.2rem;}
#index header a:hover{opacity: .6;}

@media only screen and (max-width:640px){
    #index header img{width: 80%;}
    #index header .toiawase{font-size: .7rem;}
}

/* picup */
#index .new{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 50px; background: #231815; padding:60px 0;}
#index .new a{width: 25%;}
#index .new img{width: 100%;}
#index .new .new_text{width: 45%; margin-left: 5%;}
#index .new .new_text h2,#index .new .new_text p{text-align: left; color: #fff;}
#index .new .new_text h2{line-height: 1.2; font-size: 3rem; font-weight: bold;}
#index .new .new_text h2 small{font-size: 1.5rem;}
#index .new .new_text p{margin-top: 20px;}
#index .new .new_text h1{
  color: transparent;
  font-size: 5rem;
  text-align: left;
  -webkit-text-stroke: 1px #fff;}

#index .new .new_text a {
    text-decoration: none; 
    transition: .2s ease-in-out; 
    color: #fff;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 300px;
    padding: 30px 0;
    font-weight: 500;}
#index .new .new_text a:hover {opacity:.6;}
#index .new .new_text a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 12rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
#index .new .new_text a:hover:after {
  right: 11rem;
}

@media only screen and (max-width:640px){
    #index .new{display:block; margin: 30px auto 0; padding:30px 30px 10px;}
    #index .new .new_text{width: 100%; margin-left: 0; margin-top: 20px;}
    #index .new .new_text h2,#index .new .new_text p,#index .new .new_text h1{text-align: center;}
    #index .new .new_text h1{font-size: 3rem; margin-top: -20px;}
    #index .new .new_text h2{font-size: 1.3rem;}
    #index .new .new_text  a{justify-content: center; width: 100%;}
    #index .new .new_text  a:after {right: 3rem;}
    #index .new .new_text  a:hover:after {right: 2rem;}
}

/* oneslife */
#index h1 img{margin: 0 auto; display: block; width:20%;}

@media only screen and (max-width:640px){
 #index  h1 img{width:90%; margin-bottom: 20px;}
}
#index main{padding-top: 30px;}
@media only screen and (max-width:640px){
    #index main{
        width: 90%; 
        margin: 0 auto; 
        padding-top:0;
        overflow-wrap: anywhere;}
}

/* book */
#oneslife{margin: 100px 0 0;}
#oneslife p{margin: 30px auto 0;}
#index article .book{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 50px;}
#index article .book a{width: 24%; margin: 20px 20px 50px; text-decoration: none; line-height: 1.2; color:#231815; font-size:18px; font-weight: 700;} 
#index article .book a small{font-size:12px; font-weight: normal;} 
#index article .book img{
    width:100%; 
    box-shadow: 0 5px 7px 0 rgba(3,3,3,.12), 0 5px 7px 0 rgba(3,3,3,.22); transition: .3s;
    margin-bottom: 15px;
}
#index article .book img:hover {
	box-shadow: 0 15px 30px -5px rgba(3,3,3,.1), 0 10px 10px 0 rgba(3,3,3,.1);
	transform: translateY(-10px);
}
#index article .syoseki a{width: 24%; margin: 20px 30px 50px;}
#index article h2.lineup{margin-top: 50px; font-weight: bold;}
#index hr{margin-top: 50px;}

@media only screen and (max-width:640px){
    #index article .book a{width: 100%; margin: 0 0 50px;}
    #index article .book img{width: 100%; margin: 0 0 10px;}
    #index article h2.lineup{line-height: 1.3; width: 100%;}
}


/* sns */
#index h3.sub{font-size: 1rem; color: #909090; padding-top: 50px;}
#index article .sns{width: 100%; margin: 0 auto;}
#index article .sns a {
    text-decoration: none; 
    transition: .2s ease-in-out; 
    color: #231815;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 400px;
    padding: 10px 0;
    font-weight: 500;}
#index article .sns a:hover {opacity:.6;}
#index article .sns a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 0;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
#index article .sns a:hover:after {
  right: -1rem;
}
#index article .sns img{width: 10%; padding:0 10px 0 0;}

@media only screen and (max-width:640px){
    #index h3.sub{padding-top: 0;}
    #index article .sns{width: 100%;}
    #index article .sns a {width: 100%; line-height: 1.2; padding: 5px 0;}
    #index article .sns img{width: 10%; padding-top: 0; padding-right: 20px; margin:0 0 0 -30px;}
    #index article .sns a:after {right: 2rem;}
    #index article .sns a:hover:after {right: 1rem;}
}