@charset "utf-8";

/* h1 */
h1{
  min-height:100vh;
  padding:140px 0 90px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position:relative;
}
h1 img{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  object-fit:cover;
}
h1 .tit_wrapper{
  display:block;
  max-width:70%;
  font-weight:normal;
  text-align:left;
}
h1 .tit_wrapper .jp{
  line-height:1.7;
  margin-bottom:0.5em;
  font-size:min(5vw,50px);
  color:#fff;
  letter-spacing:0.2em;
  white-space:nowrap;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright; 
}
h1 .tit_wrapper .en{
  line-height:1;
  display:block;
  font-size:min(10vw,100px);
  color:#fff;
  text-align:left;
  letter-spacing:0.1em;
  white-space:nowrap;
}

@media screen and (max-width:1540px){
  h1{
    padding:110px 0 70px;
  }
  h1 .tit_wrapper{
     max-width:90%;

  }
  h1 .tit_wrapper .jp{
    font-size:min(4vw,40px);
  }
  h1 .tit_wrapper .en{
    font-size:min(8vw,80px);
  }
}

@media screen and (max-width:1024px){
  h1{
    min-height:auto;
  }
  h1 .tit_wrapper{
     max-width:94%;
  }
}

@media screen and (max-width:768px){
  h1{
    padding:min(50px + 15%) 0 3%;
  }
  h1 .tit_wrapper{
    width:94%;
  }
  h1 .tit_wrapper .jp{
    margin-bottom:1em;
    padding-left:7%;
    font-size:8.2vw;
    color:#fff;
  }
  h1 .tit_wrapper .en{
    font-size:10.3vw;
    color:#fff;
  }
}


/* #cont0 */
#cont0{
  padding:min(7%,70px) 0 min(16%,160px);
  display:inline-block;
  text-align:left;
}
#cont0 p{
  margin-top:5%;
  letter-spacing:0.1em;
}

@media screen and (max-width:768px){
  #cont0{
    width:84%;
    padding:7% 0 26%;
  }
  #cont0 p{
    line-height:2.1;
    margin-top:5%;
    letter-spacing:0;
  }
}


/* #cont1 */
#cont1{
  padding-bottom:min(9%,90px);
  background:url(../images/color/cont1_bg.png)repeat-y center top;
  background-size:100% auto;
}
#cont1 .cont{
  position:relative;
  z-index:2;
  text-align:left;
}
#cont1 .cont h2{
  line-height:2;
  font-size:min(4.6vw,46px);
  font-weight:normal;
  letter-spacing:0.2em;
  text-indent:-0.2em;
  white-space:nowrap;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
}
#cont1 .cont .tit1{
  white-space:nowrap;
}
#cont1 .cont p{
  margin-top:5%;
  line-height:2.2;
}
#cont1 .cont p.indent{
  margin-left:1em;
  text-indent:-1em;
}
#cont1 .cont figure{
  z-index:-1;
}

@media screen and (max-width:768px){
  #cont1{
    background:url(../images/color/cont1_bg_s.png)repeat-y center top;
    background-size:100% auto;
  }
  #cont1 .cont{
    width:100%;
  }
  #cont1 .cont h2{
    font-size:6.4vw;
  }
  #cont1 .cont .tit1{
    margin-top:5%;
    padding:0 9%;
  }
  #cont1 .cont p{
    margin-top:3%;
    padding:0 9%;
    line-height:2.1;
  }
}


/* #cont1_1 */
#cont1_1{
  padding-left:min(10vw,100px);
  padding-right:min(50%,650px);
}
#cont1_1 h2{
  position:absolute;
  left:0;
  top:0;
  transform:translateY(-19%);
}
#cont1_1 .tit1{
  transform:translateX(-0.5em);
}
#cont1_1 figure{
  width:min(60vw,800px);
  position:absolute;
  left:42%;
  bottom:0;
}

@media screen and (max-width:1300px){
  #cont1_1{
    padding-top:min(6%,120px);
    padding-bottom:min(6%,120px);
    padding-right:40%;
  }
}


@media screen and (max-width:768px){
  #cont1_1{
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
  }
  #cont1_1 h2{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    margin:-2.2em auto 3%;
  }
  #cont1_1 figure{
    width:auto;
    position:static;
    left:0;
    bottom:0;
    transform:translateX(9%);
  }
}


/* #cont1_2 */
#cont1_2{
  margin-top:min(15%,150px);
  padding-top:min(15%,150px);
  padding-left:min(50%,700px);
  padding-bottom:0;
}
#cont1_2 h2{
  position:absolute;
  right:52%;
  top:0;
}
#cont1_2 figure{
  width:min(63vw,860px);
  position:absolute;
  right:50%;
  bottom:0;
}

@media screen and (max-width:1200px){
  #cont1_2 figure{
    bottom:50%;
    transform:translateY(50%);
  }
}

@media screen and (max-width:768px){
  #cont1_2{
    margin-top:min(15%,150px);
    padding-top:32%;
    padding-left:0;
    padding-bottom:0;
  }
  #cont1_2 h2{
    position:absolute;
    right:9%;
  }
  #cont1_2 figure{
    width:134%;
    position:relative;
    right:auto;
    bottom:auto;
    transform:translateX(-32%);
  }
}


/* #cont1_3 */
#cont1_3{
  margin-top:min(15%,150px);
  padding-left:min(10vw,100px);
  padding-right:min(50%,650px);
  padding-bottom:0;
}
#cont1_3 h2{
  position:absolute;
  left:0;
  top:0;
}
#cont1_3 figure{
  width:min(50%,600px);
  position:absolute;
  right:0;
  bottom:50%;
  transform:translateY(50%);
}

@media screen and (max-width:768px){
  #cont1_3{
    padding-left:0;
    padding-top:30%;
    padding-right:0;
  }
  #cont1_3 h2{
    line-height:1 !important;
    position:absolute;
    left:9%;
    top:0;
  }
  #cont1_3 figure{
    width:auto;
    position:static;
    right:auto;
    bottom:auto;
    transform:none;
    margin-left:25%;
  }
}

/* #cont1_4 */
#cont1_4{
  margin-top:min(15%,150px);
  padding-left:min(10vw,100px);
  padding-right:min(23vw,230px);
}
#cont1_4 h2{
  position:absolute;
  right:1em;
  top:50%;
  transform:translateY(-50%);
}
#cont1_4 ul li p{
  display:inline-block;
  line-height:1.5 !important;
  margin:0.5em 0 !important;
  text-indent:-0.5em;
  font-size:min(3vw,30px);
  letter-spacing:0.05em;
}
#cont1_4 ul li p .small{
  line-height:1.5;
  display:block;
  font-size:14px;
  text-align:right;
  padding-right:4em;
}
#cont1_4 > p{
  margin-top:1.5% !important;
  font-size:min(3vw,30px);
}

@media screen and (max-width:1300px){
  #cont1_4 ul li p .text_right{
    padding-left:7em;
    display:block;
  }
}

@media screen and (max-width:768px){
  #cont1_4{
    margin-top:min(15%,150px);
    padding-left:0;
    padding-right:0;
    padding-top:0;
  }
  #cont1_4 h2{
    position:static;
    right:auto;
    top:auto;
    transform:none;
    margin:auto;
  }
  #cont1_4 ul li p{
    font-size:4.5vw;
  }
  #cont1_4 ul li p .small{
    padding-right:0;
    font-size:3.2vw;
  }
  #cont1_4 ul li p .text_right{
    padding-left:5em;
  }
  #cont1_4 > p{
    font-size:3.6vw;
  }
}



/* #cont2 */
#cont2{
}
#cont2 .sec{
  max-width:980px;
}
#cont2 .sec p{
  margin-top:min(3%,30px);
  text-align:left;
}
#cont2 .sec .fig{
  margin-top:min(3%,30px);
}
#cont2 .plan{
  max-width:1080px;
  margin-top:min(7%,70px);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#cont2 .plan div{
  width:min(30%,360px);
  text-align:left;
}
#cont2 .plan div dt{
  line-height:1.3;
  letter-spacing:0;
}
#cont2 .plan div dt .num{
  display:block;
  font-weight:normal;
  text-indent:0.1em;
}
#cont2 .plan div dd{
  margin-top:5%;
  line-height:1.5;
}
#cont2 .plan div dd .large{
  line-height:1;
  margin:0 0.2em;
  font-size:min(3vw,30px);
  font-weight:500;
  font-style:italic;
}

@media screen and (max-width:768px){
  #cont2 .sec .tit1{
    padding:0 3%;
  }
  #cont2 .sec p{
    margin-top:5%;
    padding:0 3%;
  }
  #cont2 .sec .fig{
    margin-top:9%;
  }
  #cont2 .plan{
    display: block;
  }
  #cont2 .plan div{
    width:auto;
    text-align:center;
    margin-top:9%;
  }
  #cont2 .plan div dt{
    text-align:center;
  }
  #cont2 .plan div dd{
    margin-top:3%;
  }
  #cont2 .plan div dd .large{
    font-size:4.6vw;
  }
}


/* #cont3 */
#cont3{
  padding:min(15%,150px) 0;
}
#cont3 .sec{
  max-width:980px;
  text-align:left;
}
#cont3 .sec p{
  margin-top:min(5%,50px);
  font-size:min(1.8vw,18px);
}
#cont3 .sec .more{
  margin-top:min(12%,120px);
  text-align:center;
  letter-spacing:0;
  text-indent:0;
}

@media screen and (max-width:768px){
  #cont3 .sec .tit1{
    padding:0 3%;
  }
  #cont3 .sec p{
    margin-top:7%;
    padding:0 3%;
    font-size:3.4vw;
  }
  #cont3 .sec .more{
    width:20em;
    line-height:3.4;
    margin-top:min(12%,120px);
    border:2px solid;
    text-align:center;
    letter-spacing:0;
    text-indent:0;
  }
}
