@charset "UTF-8";

/* 共通 ベース base
----------------------------------------------- */

/* site-header分(position:fixedの時) */
/* .wrapper {
  margin-top: 68px;
} */

.container {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}

h2 {
  font-size: 2.5rem;
  letter-spacing: 3px;
  line-height: 50px;
  margin-bottom: 50px;
}
h3 {
  font-size: 2.2em;
  margin-bottom: 15px;
}

/* WP */
.wp_category {
  font-size: 0.7em;
  font-weight: 600;
  color: #00a3e5;
  border: 1px solid #00a3e5;
  padding: 1px 3px 0;
  margin-bottom: 15px;
  line-height: 1.2;
}
.wp_date {
  font-size: 0.9em;
  font-weight: bold;
  color: #424242;
  line-height: 1.3;
}
.wp_title {
  font-size: 1rem;
  margin-bottom: 10px;
  min-height: 42px;
  position: relative;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.btn {
  margin: 20px auto;
  display: inline-flex;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  border: solid 1px #221e1f;
}
.btn a {
  width: 100%;
  padding: 15px 45px;
  text-align: center;
  transition: 0.5s;
}
.btn{
  transition: 0.5s;
}
.btn:hover {
  opacity: 0.7;
  transition: 0.5s;
}
.btn2 a {
  color: #fff;
}
.btn i{
  margin-left: 10px;
}
.btnin01{
  margin-right: 45px;
}

  /* スマホ */
  @media only screen and (max-width: 768px) {
    .btn a{
      font-size: 14px;
    }
  }
  /* スマホ */
  @media only screen and (max-width: 479px) {
    .btn a{
      padding: 15px 30px;
      font-size: 12.5px;
    }
    .btnin01{
      margin-right: 20px;
    }
    }

/* -----------------------------------------------

	 as

----------------------------------------------- */
.as01{
  color: #ee183a;
}

/* -----------------------------------------------

	 base

----------------------------------------------- */
.ttlset01{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  margin-bottom: 45px;
  line-height: 1;
}
.ttlset01 .ttlwhile{
  width: 3px;
  height: 30px;
  margin: 0 20px;
  background: #ee183a;
}
.ttlset01 .en{
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.15rem;
  color: #221e1f;
}
.ttlset01 .ja{
  color: #221e1f;
  font-weight: 700;
  font-size: 16px;
}


  @media only screen and (max-width: 479px) {
    .ttlset01{
      margin-bottom: 30px;
    }
    .ttlset01 .en{
      font-size: 24px;
    }
    .ttlset01 .ja{
      font-size: 10px;
    }
    .ttlset01 .ttlwhile{
      width: 2px;
    }
  }

/* -----------------------------------------------

	 top_section

----------------------------------------------- */
#toppage .top_section {
  margin-bottom: 80px;
  text-align: right;
  position: relative;
}
#toppage .top_section  img {
  width: 100%;
  max-width: 1200px;
}
#toppage .top_section  .link-area{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
  padding-right: 90px;
}
#toppage .top_section  .link-area .head {
  padding-top: 45px;
  margin-bottom: 45px;
}
#toppage .top_section  .link-area .head p{
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.15rem;
  margin-right: 30px;
}
#toppage .top_section  .link-area .head .archive{
  margin-right: 45px;
}
#toppage .top_section  .link-area .head a img{
  width: 60px;
  margin-left: 15px;
}
#toppage .top_section  .link-area .device-set .image-set {
  margin: 0 20px;
  text-align: center;
}
#toppage .top_section  .link-area .device-set .image-set P{
  font-size: 11px;
}
#toppage .top_section  .link-area .device-set .image-set img{
  max-width: 90px;
  width: 100%;
  margin-bottom: 30px;
}
#toppage .top_section .merchandise-wrap{
  max-width: 770px;
  width: 100%;
}
.top_section .main_text-wrap{
  position: absolute;
  max-width: 1600px;
  width: 100%;
  height: 300px;
  top: 0;
  left: calc( 50% - 30px );
  -webkit-transform : translateX(-50%);
  transform : translateX(-50%);
  margin-left: 70px;
  text-align: left;
  padding-top: 90px;
}
.top_section .main_text-wrap h2{
  color: #373939;
  font-size: 72px;
  line-height: 60px;
  letter-spacing: 3px;
  margin-bottom: 30px;
}
.top_section .main_text-wrap h2 .span2{
  margin-left: 15px;
}
.top_section .main_text-wrap p{
  line-height: 2;
  font-size: 23px;
}

.main_bottom-area {
  position: relative;
  max-width: 1700px;
  margin: auto;
}
.main_bottom-area > .image{
  max-width: 830px;
  width: 46vw;
  position: absolute;
  top: -150px;
  left: -60px;
  z-index: 2;
}



/* cm link  */
.top_section .cmbox{
  position: absolute;
  bottom: calc( 100% + 13px);
  left: 0;
  width: 300px;
  padding: 10px 20px;
  background: #fff;
  text-align: center;
}
.top_section .cmbox a:hover{
  opacity: 1;
  color: #ee183a;
}
.top_section .cmbox p{
  line-height: 1.3;
}
.top_section .cmbox .cmtxt01{
  font-weight: 700;
  font-size: 20px;
}
.top_section .cmbox .image{
  width: 250px;
  margin: 5px auto 8px;
}
.top_section .cmbox .cm-ylink:hover{
  box-shadow: 0px 0px 5px #ee183a;
}

/* dx link  */
.top_section .dx-link{
  position: absolute;
  top: 50%;
  left: 80%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 300px;
}
.top_section .dx-link a{
  transition: 0.5s;
  display: block;
}
.top_section a.dxbox:hover{
  opacity: 1 !important;
  box-shadow: 0px 0px 15px #73c468;
}



.kiran-img {
  position :relative;
  overflow :hidden;
  }
  .kiran {
  height:100%;
  width:30px;
  position:absolute;
  top:-180px;
  left:0;
  background-color: #fff;
  opacity:0;
  transform: rotate(45deg);
  animation: reflection 2s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 2s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -moz-animation: reflection 2s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -ms-animation: reflection 2s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -o-animation: reflection 2s ease-in-out infinite;
  }
  @keyframes reflection {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  30% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  31% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
  }
  @-webkit-keyframes reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  30% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  31% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
  }
  @-moz-keyframes reflection {
  0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
  30% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
  31% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
  }




@media only screen and (max-width: 1600px) {
  .main_bottom-area > .image{
    top: -100px;
    width: 40vw;
  }
}
@media only screen and (max-width: 1400px) {
  .top_section .main_text-wrap{
    margin-left: 65px;
  }
  #toppage .top_section  .link-area .head .head-a{
    margin-right: 30px;
    font-size: 14px;
  }
  #toppage .top_section  .link-area .head a img{
    width: 45px;
    margin-left: 10px;
  }
  #toppage .top_section .merchandise-wrap{
    max-width: 700px;
  }
  #toppage .top_section  .link-area{
    padding-right: 45px;
  }
  .main_bottom-area > .image{
    top: -50px;
  }
}
@media only screen and (max-width: 1250px) {
  .top_section .main_text-wrap{
    margin-left: 55px;
    padding-top: 0;
    left: 50%;
    top: 45%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .top_section .main_text-wrap h2{
    text-shadow: 1px 1px 5px #fff;
  }
  .top_section .main_text-wrap h2 .sp{
    display: block;
  }
  .top_section .main_text-wrap p{
    color: #fff;
    text-shadow: 1px 1px 5px #000;
  }
  #toppage .top_section  .link-area .head .head-a{
    font-size: 12px;
  }
  #toppage .top_section  .link-area .head a img{
    width: 30px;
  }
  .main_bottom-area > .image{
    width: 35vw;
    top: 0;
  }
  #toppage .top_section .link-area .head{
    padding-top: 30px;
    margin-bottom: 35px;
  }
  #toppage .top_section  .link-area .head p{
    font-size: 28px;
  }
  #toppage .top_section .merchandise-wrap{
    max-width: 660px;
  }
}
@media only screen and (max-width: 1024px) {
  .top_section .dx-link{
    top: 50%;
    left: 83%;
    width: 250px;
  }
  .top_section .cmbox{
    width: 250px;
  }
  .top_section .cmbox .image{
    width: 100%;
  }
  .top_section .cmbox .cmtxt01{
    font-size: 16px;
  }
}
@media only screen and (max-width: 1000px) {
  .top_section .main_text-wrap h2{
    font-size: 60px;
  }
  .top_section .main_text-wrap p{
    font-size: 20px;
  }
  .main_bottom-area > .image{
    display: none;
  }
  #toppage .top_section .link-area {
    padding: 0 30px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    
  }
  #toppage .top_section .merchandise-wrap{
    max-width: 100%;
  }
}

  /* スマホ */
  @media only screen and (max-width: 768px) {
    .top_section .cmbox{
      width: 200px;
    }
    .top_section .dx-link{
      top: 50%;
      width: 200px;
    }
    .top_section .cmbox{
      padding: 10px 15px;
    }
    .top_section .cmbox .cmtxt01 .sp{
      display: block;
    }
    .top_section .cmbox .cmtxt01 ,
    .top_section .cmbox .cmtxt02{
      font-size: 14px;
    }
    .topmainimg{
      height: 420px;
      object-fit: cover;
    }
  }
  @media only screen and (max-width: 700px) {
    .top_section .main_text-wrap{
      margin-left: 30px;
    }
    .top_section .main_text-wrap h2{
      font-size: 45px;
      margin-bottom: 10px;
    }
    .top_section .main_text-wrap p{
      font-size: 16px;
    }
    #toppage .top_section  .link-area .head{
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }
    #toppage .top_section  .link-area .head p{
      text-align: left;
      width: 100%;
      padding-bottom: 10px;
      margin: 0;
    }
  }
  @media only screen and (max-width: 500px) {
    .top_section .main_text-wrap h2{
      font-size: 35px;
      margin-bottom: 15px;
      line-height: 1;
    }
    .top_section .main_text-wrap h2 .sp{
      display: block;
    }
    .top_section .main_text-wrap p{
      font-size: 12px;
    }
    .top_section .main_text-wrap{
      top: 48%;
    }
  }
  /* スマホ */
  @media only screen and (max-width: 479px) {
    .top_section .main_text-wrap p{
      font-weight: 700;
    }
    #toppage .top_section  .link-area .head {
      margin-bottom: 30px;
    }
    #toppage .top_section  .link-area .head p{
      font-size: 20px;
    }
    #toppage .top_section  .link-area .head .head-a{
      font-size: 10px;
    }
    #toppage .top_section  .link-area .head a img{
      width: 20px;
    }
    .top_section .dx-link{
      top: 55%;
      left: 85%;
      max-width: 100px;
      width: 26vw;
    }
    .top_section .main_text-wrap{
      top: 38%;
    }
    .top_section .dx-link{
      left: unset;
      right: -40px;
      width: 100px !important;
      top: 57%;
    }
    .top_section .cmbox{
      bottom: 0;
      left: unset;
      right: calc(100% + 10px);
      width: 180%;
      padding: 5px 10px;
    }
    .top_section .cmbox .cmtxt01 .sp{
      display: none;
    }
    .top_section .cmbox .cmtxt01,
    .top_section .cmbox .cmtxt02{
      font-size: 11px;
    }
    .top_section .cmbox .image{
      width: 130px;
    }
    #toppage .top_section > img{
      height: 350px;
      object-fit: cover;
    }
    .top_section .dx-link a:hover{
      box-shadow: 0px 0px 15px transparent;
    }
  }



/* -----------------------------------------------

	 s0

----------------------------------------------- */
.s0 {
  padding: 0 30px;
  margin-top: 10%;
}
.s0 .top-newsarea .news-txt .top_news-set{
  line-height: 2;
  margin-bottom: 15px;
  font-size: 14px;
}
.s0 .top-newsarea .news-txt .top_news-set .ttl{
  line-height: 1.2;
}
.s0 .top-newsarea .news-txt > li:last-child{
  margin-bottom: 0;
}
.s0 .top-newsarea .news-txt .date{
  margin-right: 35px;
}
.s0 .top-newsarea .news-txt .cate{
  padding: 3px 5px;
  line-height: 1;
  letter-spacing: -0.01rem;
  margin-right: 15px;
  color: #fff;
  font-size: 11px;
}
.s0 .top-newsarea .news-txt .cnews{
  background: #9e9e9e;
}
.s0 .top-newsarea .news-txt .cevent{
  background: #221e1f;
}
.s0 .top-newsarea .news-txt {
  width: 75%;
}
.s0 .top-newsarea .news-archive {
  width: 25%;
  font-size: 12px;
}
.s0 .top-newsarea .news-archive img {
  max-width: 60px;
  margin-left: 15px;
}


@media only screen and (max-width: 1000px) {
  .s0 {
    padding: 0 30px 30px;
  }
  .s0 .s0news-set{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .s0 .top-newsarea .news-txt{
    margin-bottom: 45px;
    width: 100%;
  }
  .s0 .top-newsarea .news-txt .top_news-set .ttl{
    width: 65%;
  }
  .s0 .top-newsarea .news-txt .cate{
    width: 60px;
    padding: 5px;
    text-align: center;
  }
  .s0 .top-newsarea .news-archive {
    width: auto;
  }
}

@media only screen and (max-width: 479px) {
  .s0 .top-newsarea .news-txt .top_news-set > a{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .s0 .top-newsarea .news-txt .top_news-set .ttl{
    width: 100%;
  }
  .s0 .top-newsarea .news-txt .date {
    margin-right: 15px;
  }
  .s0 .top-newsarea .news-txt .cate {
    padding: 3px 5px;
  }
  .s0 .top-newsarea .news-txt .date,
  .s0 .top-newsarea .news-txt .cate{
    margin-bottom: 5px;
  }
  .s0 .top-newsarea .news-txt .top_news-set {
    margin-bottom: 20px;
  }
  .s0 .top-newsarea .news-archive img {
    max-width: 40px;
  }
}


/* -----------------------------------------------

	 s1

----------------------------------------------- */
.s1 {
  position: relative;
  z-index: 2;
}

.s1 .container{
  margin-top: 60px;
}
.s1 .s1-01{
  width: 50%;
}
.s1 .s1-01 .btn{
  background: #000;
}
.s1 .s1-01 .btn a{
  color: #fff;
}
.s1 .s1-02{
  width: 50%;
  position: relative;
  top: 60px;
  width: 45vw;
  margin-right: calc(((100vw - 100%) / 2) * -1);
  margin-left: auto;
}
.s1 .s1-02 .img2{
  position: absolute;
  width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.s1 .txt01{
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 30px;
  color: #000;
}
.s1 .txt02 {
  font-size: 14px;
  margin-bottom: 60px;
  line-height: 2;
  padding-right: 60px;
}
.s1 .txt02 .space{
  display: block;
  padding: 15px;
}
.s1 .s1-03{
  display: none;
}

    /* タブレット */
    @media only screen and (max-width: 1450px) {
      .s1 .container{
        padding-left: 30px;
      }
    }
  @media only screen and (max-width: 1100px) {
    .s1 .s1-01{
      width: 60%;
    }
  }
  @media only screen and (max-width: 1000px) {
    .s1 .s1-01{
      width: 70%;
      padding-right: 60px;
    }
  }
  /* タブレット */
  @media only screen and (max-width: 768px) {
    .s1{
      padding: 60px 30px 60px;
    }
    .s1::before{
      display: none;
    }
    .s1 .container{
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding-left: 0;
    }
    .s1 .txt01 {
      line-height: 1.5;
    }
    .s1 .txt01 br{
      display: none;
    }
    .s1 .s1-01{
      width: 100%;
      padding-right: 0;
      margin-bottom: 90px;
    }
    .s1 .txt02{
      margin-bottom: 30px;
    }
    .s1 .s1-02{
      width: 100%;
      margin: 0;
      top: 0;
      margin-bottom: 30px;
    }
    .s1 .s1-03{
      display: block;
    }
    .s1 .txt02{
      padding-right: 0;
    }
  }
  /* スマホ */
  @media only screen and (max-width: 479px) {
    .s1{
      padding: 60px 30px;
    }
    .s1 .container{
      margin-top: 0;
    }
    .s1 .s1-01{
      padding-right: 0;
    }
    .s1 .txt02 .space{
      padding: 0;
    }
    .s1 .s1-02 .img2{
      width: 200px;
    }
  }
  @media only screen and (max-width: 350px) {
      .ttlset01 .en {
        font-size: 22px;
    }
  }


/* -----------------------------------------------

	 s2

----------------------------------------------- */
.s2 {
  position: relative;
  z-index: 1;
  padding: 220px 30px 160px;
}
.s2 .ttlset01{
  margin-bottom: 0;
}
.s2 .s2-top {
  margin-bottom: 60px;
}
.s2 .s2-top .txt{
  margin-left: 45px;
  font-size: 14px;
}
.s2 .box-set .box-wrap{
  width: 100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.s2 .box-set .box{
  width: 33.333%;
  margin: 0 10px;
}
.s2 .box-set .box .image{
  margin-bottom: 20px;
}
.s2 .box-set .bottom{
  flex: 1 0 auto;
  padding: 30px 15px 30px;
  background: #fff;
}
.s2 .box-set .bottom .num{
  font-size: 1.5rem;
  font-weight: 700;
}
.s2 .box-set .bottom .group{
  font-size: 1.5rem;
  line-height: 2;
  font-weight: 700;
}
.s2 .box-set .bottom .txt{
  margin-bottom: 45px;
}
.s2 .box-set .box-wrap .box p{
  margin-bottom: auto;
}
.s2 .box-set .box-wrap .box .btn:hover{
  background: #000;
  opacity: 1;
}
.s2 .box-set .box-wrap .box .btn:hover a{
  color: #fff;
  opacity: 1;
}
.s2 .box-set .box-wrap .box{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.s2 .box-set .box-wrap .box h3{
  margin-bottom: 5px;
}
.s2 .box-set .box-wrap .box .btn{
  margin: 30px auto 0;
}

  @media only screen and (max-width: 1250px) {
    .s2 .box-set .bottom .group{
      font-size: 1.3rem;
    }
    .s2 .box-set .bottom .txt {
      font-size: 0.9rem;
    }
    .s2 .box-set .bottom .txt .sp{
      display: block;
    }
    .s2 .box-set .bottom .txt span{
      display: none;
    }
  }
  @media only screen and (max-width: 1200px) {
    .s2 .s2-top{
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: baseline;
      -ms-flex-align: baseline;
      align-items: baseline;
    }
    .s2 .s2-top .txt{
      margin: 20px 0 0 0;
      width: 85%;
    }
  }

  @media only screen and (max-width: 1000px) {
    .s2 .box-set .bottom .group{
      font-size: 1.1rem;
    }
  }
  /* タブレット */
  @media only screen and (max-width: 768px) {
    .s2 {
      padding: 0 30px 120px;
    }
    .s2::before{
      display: none;
    }
    .s2 .container{
      top: 120px;
    }
    .s2 .s2-top .txt br{
      display: none;
    }
    .s2 .box-set .bottom .group{
      font-size: 1rem;
    }
    .s2 .box-set .bottom .txt{
      font-size: 0.8rem;
    }
    .s2 .box-set .box-wrap .box h3{
      font-size: 14px;
    }
  }
  /* スマホ */
  @media only screen and (max-width: 479px) {
    .s2 {
      padding: 20px 30px 90px;
    }
    .s2 .container{
      top: 0;
    }
    .s2 .box-set{
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .s2 .box-set .boxs{
      margin-bottom: 30px;
      box-shadow: 0 3px 6px;
    }
    .s2 .box-set .bottom .num{
      font-size: 2rem;
    }
    .s2 .box-set .bottom .group{
      font-size: 1.3rem;
    }
    .s2 .box-set .bottom{
      padding: 30px 15px 20px;
    }
    .s2 .s2-top .txt{
      width: 100%;
    }
    .s2 .box-set .box-wrap{
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .s2 .box-set .box-wrap .box{
      width: 100%;
      margin: 0 0 20px;
      box-shadow: 0 3px 6px;
    }
    .s2 .box-set .box-wrap li:last-child{
      margin-bottom: 0;
    }
    .s2 .box-set .box-wrap .box .btn{
      width: 80%;
      margin: 30px 10% 20px;
    }
    .s2 .box-set .box-wrap .box h3{
      font-size: 14px;
    }
    .s2 .box-set .box-wrap .box p{
      font-size: 12.5px;
    }
    .s2 .box-set .box-wrap .box h3,
    .s2 .box-set .box-wrap .box p{
      padding: 0 15px;
    }
  }





/* -----------------------------------------------

	 s3

----------------------------------------------- */
.s3 {
  z-index: 0;
  position: relative;
  padding: 0 30px;
  margin-bottom: 150px;
}
.s3 .container{
  position: relative;
}
.s3 .container > .btn{
  display: none;
}
.s3 .s3-01{
  width: 50%;
  margin-right: auto;
  margin-left: calc(((100vw - 100%) / 2) * -1);
}
.s3 .s3-02{
  width: 50%;
  max-width: 600px;
  line-height: 2;
  padding-left: 60px;
}
.s3 .s3-02 .ttl{
  margin-bottom: 20px;
  font-weight: 700;
}
.s3 .s3-02 .txt{
  margin-bottom: 60px;
  font-size: 14px;
}
.s3-00{
  display: none;
}
.s3 .btn2{
  background: #2879B7;
  border: none;
}

  @media only screen and (min-width: 1500px) {
    .s3::before{
      top: calc( 100% - 18vw) !important;
    }
  }
  /* 大画面対策 */
  @media only screen and (min-width: 1300px) {
    .s3::before{
      top: calc( 100% - 20vw);
    }
    .s3 .s3-01{
      width: 47vw;
    }
  }
  @media only screen and (max-width: 1250px) {
    .s3 .s3-01{
      width: 60%;
    }
    .s3 .s3-02{
      padding-right: 30px;
    }
  }
  @media only screen and (max-width: 1000px) {
    .s3 {
      margin-bottom: 120px;
    }
    .s3 .s3-01{
      width: 55%;
    }
  }
  @media only screen and (max-width: 950px) {
    .s3 .s3-02{
      padding: 0 ;
      max-width: 100%;
    }
  }
  /* タブレット */
  @media only screen and (max-width: 768px) {
    .s3 .container > .btn{
      display: block;
    }
    .s3 .container > .btn a{
      display: block;
    }
    .s3::after{
      height: 100%;
      opacity: 0.5;
    }
    .s3 .s3-02{
      width: 100%;
    }
    .s3 .s3-01{
      padding: 0;
      width: 100%;
      margin: 0 auto 30px;
    }
    .s3 .container{
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
    }
    .s3-00{
      display: block;
    }
    .s3-02 .pc{
      display: none;
    }
    .s3 .s3-02 .txt{
      font-size: 14px;
    }
  }
  /* スマホ */
  @media only screen and (max-width: 479px) {
    .s3{
      margin-bottom: 60px;
    }
    .s3 .container{
      padding:  0;
    }
    .s3 .s3-02{
      padding: 0;
    }
    .s3 .s3-01{
      padding: 0;
    }
  }


/* all */
  @media only screen and (max-width: 479px) {
    .s1 p,
    .s2 p,
    .s3 p{
      text-align: justify;
    }
  }





/* -----------------------------------------------

	 s4

----------------------------------------------- */
.s4 {
  padding: 100px 0 0;
}

  /* タブレット */
  @media only screen and (max-width: 768px) {
  }
  /* スマホ */
  @media only screen and (max-width: 479px) {
  }