@charset "utf-8";
/* -------------------------------------
     sp CSS
 (c) Copyright 2020 Sketches of Design
     version 2020-12-26
------------------------------------- */

/* 1280
--------------------------------------*/
@media screen and (max-width: 1280px) {

  
  #thinking-home .parallax-layer-2 p{
    font-size: 1.8rem;
  }

  /* talk */
  #thinking-talk #main-pic{
    background-size: auto 590px !important;
    height: 460px;
  }
  #thinking-talk #main-pic .inner{
    padding: 90px 2% 0 30px;
    width: auto;
  }
  #thinking-talk #main-pic .maruyama{
    padding: 0 0 0 4%;
  }
  #thinking-talk #main-pic h1 em{
    font-size: 2.6rem;
  }
  #thinking-brand .diagram{
      padding: 0 4%;
  }
  #thinking-brand .diagram img{
        max-width: 100%;
    height: auto;
    width /***/:auto;
  }
  

}
/*  1024
--------------------------------------*/
@media screen and (max-width: 1024px) {

  #thinking-talk #main-pic{
    background-size: auto 600px !important;
    height: 500px;
  }
  #thinking-talk #main-pic .inner{
    padding: 80px 2% 0 30px;
  }
  section .inner{
    padding: 0 4%;
    width: auto;
  }
  #thinking-home .block .pic img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
  }
  #timeline .inner{
    margin: 0 4%;
    padding: 0;
  }
  #timeline .inner::before {
    left: 122px;
  }
  #thinking-content .linkblock .pic{
    width: calc(50% - 20px);
  }
  #thinking-brand #lead .inner{
    padding: 60px 4%;
  }
  #thinking-brand #lv02-06 ul{
    width: 100%;
  }


}
/*  1001
--------------------------------------*/
@media screen and (max-width: 1001px) {
  #sb-site{
    margin-top: 60px !important;
  }
  #thinking-home #mainpic{
    height: calc(100vh - 54px);
  }
  #thinking-outline #main-pic h1,
  #thinking-brand #main-pic h1{
    padding: 80px 0;
    width: auto;
    font-size: 3.6rem;
  }
  #thinking-talk #pagemenu{
      margin: 0 4%;
  }
  #thinking-home .parallax-layer{
    padding-top: 100px;
  }

}
/*  960
--------------------------------------*/
@media screen and (max-width: 960px) {

  /* font */
  h1{
    /*font-size: 4.0rem;*/
  }
  #thinking-home .block h2 em{
    font-size: 2.2rem;
  }
  h2{
    font-size: 2.0rem;
  }
  #timeline h2{
    font-size: 1.8rem;
  }
  h3{
    font-size: 1.6rem;
  }
  #thinking-talk #pagemenu li a,
  #thinking-home .block h2 span,
  #thinking-content p,
  #thinking-content dl,
  #thinking-content table,
  #thinking-content ul{
    font-size: 1.3rem;
  }


  /**/
  #thinking-home .block .inner{
    align-items: end;
  }
  #thinking-home .block .pic{
    width: 40%;
  }
  #thinking-home .block .text{
    padding: 40px 0;
    width: calc(60% - 20px);
  }
  #thinking-home .block h2 em::before{
    right: -33px;
    width: 25px;
    height: 25px;
  }
  #thinking-home .block h2 em::after{
    right: -22px;
  }
  #thinking-talk #main-pic {
    background-size: auto 610px !important;
    height: 510px;
  }
  #thinking-talk #main-pic .inner {
/*    padding: 270px 2% 0 30px;*/
  }
  #thinking-talk #main-pic .inner {
    padding: 20px 2% 0 30px;
  }
  #timeline .balloon{
      padding: 20px;
  }
  /*  #thinking-talk #pagemenu .num{
      width: 25px;
      height: 25px;
      line-height: 25px;
    }
  */
  #thinking-talk #pagemenu .num{
    padding: 5px 0;
    width: 80px;
  }
  #thinking-talk #pagemenu .num text{
    width: calc(100% - 90px);
  }



}
/*  768
--------------------------------------*/
@media screen and (max-width: 768px) {

  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
  }
  .diagram .sp{
    display: block !important;
  }
  .diagram .image{
    display: none;
  }
  .diagram{
    position: relative;
  }
  .diagram span{
    display: block;
    position: absolute;
    width: 30px !important;
    height: 30px !important;
    right: 10px;
    margin: -40px 0 0 0;
  }
  .diagram img{
    max-width: 100%;
    height: auto;
    width /***/:100%;
  }
  br.sp{
    display: block;
  }
  h2{
    margin: 40px 0 20px 0;
  }
  #bodycopy .bodycopy-s p,
  #thinking-home .parallax-layer-1 p{
    font-size: 2.0rem;
  }
  #bodycopy .bodycopy-l p,
  #thinking-home .parallax-layer-2 p{
    font-size: 1.6rem;
    line-height: 1.6;
  }

  /**/
  #thinking-talk .question {
    margin: 0 0 20px 0;
  }
  #thinking-talk #main-pic{
    background-size: auto 400px !important;
    height: 370px;
  }
  #thinking-talk #main-pic .inner {
    /*padding: 140px 2% 0 30px;*/
  }
  #thinking-talk #main-pic h1{
    /*top: 20px;
    bottom: auto;*/
      bottom: 7%;
  }
  #thinking-talk .people .baloon::before{
    top: 40px !important;
  }
  #thinking-talk .people.maruyama .baloon::before{
    left: -15px;
    border-right: 15px solid #dbe7f6;
  }
  #thinking-talk .people.onoda .baloon::before{
    right: -15px;
    border-left: 15px solid #cfeff5;
  }
  #thinking-talk .people.onoda,
  #thinking-talk .people {
    padding: 0 !important;
  }
  #thinking-talk section:not(.linkblock) .pic img {
    width: 80px !important;
    height: 80px !important;
  }
  #thinking-talk section:not(.linkblock) .pic {
    width: 110px !important;
  }
  #thinking-talk .baloon{
    width: calc(100% - 60px) !important;
  }
  #thinking-home .block {
    margin: 60px 4% 0 4%;
  }
  #thinking-content #brand-area .pic{
    display: flex;
    align-items: center;
    margin: 0;
  }
  #thinking-brand #lv02-02 .image{
    margin-top: 50px;
  }
  #thinking-brand #lv02-04 .image{
    width: 70%;
    right: 0;
  }
  #thinking-outline #main-pic h1,
  #thinking-brand #main-pic h1{
    padding: 50px 0;
  }
  #thinking-talk section:not(.linkblock) h2 .num{
    padding: 10px 0;
    width: 100px;
  }
  #thinking-talk section:not(.linkblock) .text{
    width: calc(100% - 120px);
  }
  #thinking-home .layer {
    height: 100%;
  }
  #thinking-home .layer-2,
  #thinking-home .layer-1{
    padding: 120px 20px;
  }
  #thinking-home .layer-2 p{
    margin-bottom: 0.5em;
    font-size: 1.7rem;
  }
  #thinking-brand #lv02-06 ul li {
    margin-bottom: 10px;
    width: calc(50% - 5px);
  }
}
/*  667
--------------------------------------*/
@media screen and (max-width: 667px) {
  #thinking-brand #lead .text,
  #timeline .year202409 .pic:nth-child(1),
  #timeline .year202409 .pic:nth-child(2),
  #timeline .year202501 .picarea,
  #timeline .year202501 .text,
  #timeline .year202407 .picarea,
  #timeline .year202407 .text,
  #timeline .pic{
    width: 100%;
  }
  #thinking-outline #main-pic span,
  #timeline .col3,
  #timeline .col2{
    display: block;
    margin-bottom: 0;
  }
  #timeline .pic{
    margin-bottom: 15px;
  }
  #thinking-talk #main-pic {
    height: 400px;
  }
  #thinking-talk #main-pic .inner {
    padding: 30px 2% 0 30px;
  }
  #thinking-talk #main-pic p{
    line-height: 1.5;
    font-size: 1.3rem;
  }
  #thinking-talk #main-pic p em {
    font-size: 1.6rem;
  }
  #thinking-home .parallax-layer-3 .logo{
    margin: auto;
    width: 80%
  }
  #thinking-talk section:not(.linkblock) .pic img {
    width: 60px;
    height: 60px;
  }
  #thinking-talk section:not(.linkblock) .pic {
    width: 80px;
  }
  #thinking-talk .people .baloon::before {
    top: 30px;
  }
  #thinking-talk #lead{
    margin: 40px 4% 60px 4%;
  }
  #thinking-talk #lead p{
    text-align: left;
  }
  #thinking-brand #lead .logo{
    margin: 0 auto 40px auto;
  }
  #thinking-content .linkblock {
    margin: 40px 4% 0 4%;
  }
  #thinking-brand .link a{
    padding: 15px 40px 15px 30px;
    font-size: 1.4rem;
  }
  #thinking-brand .link span::after{
      right: -15px;
  }

}
/*  480
--------------------------------------*/
@media screen and (max-width: 480px) {
  #bodycopy .bodycopy-l p,
  #timeline .year{
    font-size: 1.2rem;
  }
  #thinking-home .parallax-layer-2 p {
    font-size: 1.4rem;
  }
  #thinking-home .block .text{
    width: 100%;
  }
  #thinking-home .block .pic{
    margin: 0 auto;
    width: 60%;
  }
  #thinking-talk #main-pic .maruyama {
    padding: 0;
  }
  #thinking-talk #main-pic {
    background-size: auto 350px !important;
    height: 330px;
  }
/*  #thinking-talk #main-pic p{
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
  }*/
  #thinking-talk #main-pic .inner {
    padding: 15px 2% 0 30px;
  }
  #thinking-talk .baloon{
    padding: 15px;
  }
  #thinking-talk #lead p br{
    display: none;
  }
  #timeline .year {
    width: 80px;
  }
  #thinking-outline #lead {
    padding: 60px 0;
  }
  #timeline .inner::before {
    left: 72px;
  }
  #timeline .balloon {
    width: calc(100% - 100px);
  }
  #timeline .balloon::before {
    left: -20px;
    border-width: 10px 20px 10px 0;
  }
  #thinking-content .linkblock {
    margin: 20px 4% 0 4%;
  }
  #thinking-content .linkblock .text {
    padding: 20px 0;
    width: 100% !important;
  }
  #thinking-content #brand-area .pic{
    width: 80%;
  }
  #thinking-content .linkblock h2 {
    margin: 0 0 10px 0;
  }
  #thinking-content #brand-area .pic{
    margin: 0 auto 15px auto;
  }
  #thinking-content .linkblock .pic {
    margin: 0 auto;
    width: 60%;
  }
  #thinking-content .linkblock h2 em::before{
    width: 20px;
    height: 20px;
  }
  #thinking-content .linkblock h2 em::after{
    right: -32px;
  }
  #timeline{
    margin-bottom: 60px;
  }
  #thinking-content .brandtop{
    margin: 60px 0;
  }
  #thinking-content .brandtop span{
    padding-right: 30px;
  }
  #thinking-content .brandtop span::before{
    right: 0;
    width: 24px;
    height: 24px;
  }
  #thinking-content .brandtop span::after{
    right: 9px;
  }
  #timeline h2{
    letter-spacing: 0.05em;
  }
  #thinking-outline #lead br{
    display: none;
  }
  #thinking-home .layer-1 p{
    font-size: 2.0rem;
  }
  #thinking-home .layer-2 p{
    font-size: 1.5rem;
  }


}
/*  375
--------------------------------------*/
@media screen and (max-width: 375px) {

  #thinking-home .block .text {
    padding: 20px 0;
  }
  #thinking-home .block h2{
    margin: 0 0 10px 0;
  }

}