@charset "utf-8";

html {
  scroll-padding: 80px;
}


/*　メリット バナーエリア　--------------------------------------------------------------------------------- */

#merit_banner {
  width: 100%;
  text-align: center;
  background: linear-gradient(rgb(202,195,167), rgb(255,255,255));
}

#merit_banner a:hover{ opacity: 0.8}

.merit.pc {
  width: 1100px;
  margin:40px auto 0;
}
.merit_sub {
  width: 50%;
  margin: 20px auto 60px;
}

/*-----*/
.info_wrap {
  width: 1100px;
  margin:40px auto;
  border: 1px solid var(--Color4);
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
.info {
  border: 1px solid var(--Color4);
  margin: 4px;
}

.info_ttl span {
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: var(--Color4);
    border-bottom: 1px solid var(--Color4);
}
.info_body {
  display: flex;
  justify-content:space-between;
  align-items: flex-start;
  padding: 5%;
  gap: 2%;
}
.info_cth {
  font-size: 30px;
  margin: 15px 0 10px 0;
  line-height: 1.2;
}
.info_cth small {
  font-size: 60%;
}
.info_cth big {
  font-size: 135%;
}
.info_cap {
  font-size: 12px;
}
.info_L {
  text-align: left;
  width: 62%;
}
.info_L img {
  width: 75%;
}
.info_R {
  width: 36%;
  margin-top: 26px;
}
.info_R img {
  width: 100%;
}
.info_100 {
  text-align: right;
}
.annotation.hensai {
  margin-top: 40px;
  padding: 1em;
  border: 1px solid #000;
  width: calc(1100px - 2em);
}

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

.info_cth {
  font-size: 2.7vw;
  margin: 1.5vw 0 1vw 0;
}
.info_100 {
  text-align: left;
}

}
/*-----*/

.bnr_wrap {
  width: 1100px;
  margin:40px auto;
  text-align: center;
}
/*
.bnr2 {
  margin-top: 40px;
}
*/
.bnr1 {
  display: inline-block;
  margin-bottom: 60px;
}
.yobi {
  width: 960px;
  margin-top: 2vw;
}

/* ----------------------- */
/* 1100*/
/* ----------------------- */

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

.merit.pc,.info_wrap, .bnr_wrap, .merit_sub {
	width: calc(100% - 2vw);
}

.bnr_wrap img {width: 100%;}
.bnr_wrap img.s {width: 70%;}


.info {
  gap:4vw;
  padding: 2vw 0;
  align-items: flex-end;
}
}

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

#merit_banner {
	padding: 40px 0;
}
#merit_banner > img {
	width: 95%;
	margin: auto;
}

.info {
  padding: 6vw 0;
}
.info_wrap {
	width: calc(100% - 8vw);
}
.info_body {
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
}
.info_ttl span {
  margin-left: 4%;
}
.info_cth {
  font-size: 5vw;
  line-height:1.2;
  margin: 1vw 0 2.5vw;
}
.info_100 {
  font-size: 60%;
}
.info_cap {
 font-size: clamp(0.625rem, 0.465rem + 0.85vw, 0.875rem);
  text-align: center;
  margin-bottom: 2vw;
}
.info_L {
	width: 95%;
  margin: 0;
}
.info_R {
	width: 95%;
  margin: 0
}
.info_L img {
  width: 100%;
}
/*-----*/
.bnr_wrap {
	width: calc(100% - 8vw);
}
.bnr2 img {
  margin-top: 5vw;
}
.yobi {
  margin-top: 5vw;
}

}


/*　トップコピー　--------------------------------------------------------------------------------- */

#top_copy {
  position: relative;
  overflow: hidden;
}

#top_copy video {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0;
  z-index: -1;
}
.top_copy_contents {
  top:0;
  text-align: center;
}
.top_copy_img1 {
  width: 261px;
  margin-bottom: 40px;
}
.top_copy_img2 {
  width: 705px;
}
.top_copy_img3 {
  width: 1195px;
}

/* ----------------------- */
/* 1100*/
/* ----------------------- */

@media screen and (max-width: 1100px) {
.top_copy_img3 {
	width: calc(100% - 2vw);
}
}



/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
#top_copy video {
  width: 150vw;
}
.top_copy_img1 {
  width: 75vw;
}
.top_copy_txt {
  text-align: left;
}
.top_copy_txt,
.top_copy_img3 {
	width: calc(100% - 8vw);
  margin-left: auto;
  margin-right: auto;
}
}



/*　イントロダクション１　--------------------------------------------------------------------------------- */

#Introduction1 {
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
}
#Introduction1 video {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0;
  z-index: -1;
}

#Introduction1 .prg_wrap{
  width: 1100px;
  margin:auto;
}

#Introduction1 .prg {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#Introduction1 .prg_wrap > div:last-of-type {
  align-items: flex-start;
}
#Introduction1 .prg_wrap > div:last-of-type figure img {
  margin-top: 150px;
}
/*---*/
#Introduction1 .prg_head > div:last-of-type {
  display: flex;
  flex-direction: column;
}
#Introduction1 .prg_head_emb {
  width: 47px;
}
#Introduction1 .prg_head_ttl {
  height: 57px;
  width: auto;
  margin: 55px auto 40px 0;
}
#Introduction1 .prg_head_txt {
  font-size: 1.2rem;
}
/*---*/
#Introduction1 .prg_head_btn {
  display: flex;
  align-items: center;
  margin-top: 2em;
  margin-bottom: 60px;
}
#Introduction1 .prg_head_btn span {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #534741;
  border-bottom: 1px solid #534741;
}
#Introduction1 .prg_head_btn img {
  width: 70px;
  margin-left: 1em;
}

/*---*/
#Introduction1 .prg figure {
  width: 750px;
}
/*---*/

#Introduction1 .prg.right > div    {order: 1;}
#Introduction1 .prg.right > figure {order: 0;}

#Introduction1 .prg.right .prg_head {
  display: flex;
  justify-content: space-between;
}
#Introduction1 .prg.right .prg_head_txt {
  text-align: right;
}
#Introduction1 .prg.right .prg_head_btn {
  justify-content: flex-end;
}

/* ----------------------- */
/* 1100*/
/* ----------------------- */

@media screen and (max-width: 1100px) {
#Introduction1 .prg_wrap {
	width: calc(100% - 2vw);
}
#Introduction1 .prg_head_btn {
  margin-bottom:0;
}
#Introduction1 .prg_head_txt {
  font-size: 1.8vw;
}
/*---*/
#Introduction1 .prg figure {
  width: 68%;
}
}

/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
#Introduction1 {
  padding-bottom: 20vw;
}
#Introduction1 .prg_wrap {
	width: calc(100% - 8vw);
}

#Introduction1 .prg {
  display:block;
}
#Introduction1 .prg.right .prg_head {
  display:block;
}
#Introduction1 .prg_head > div:last-of-type {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
#Introduction1 .prg_head_ttl {
  margin: 0 0 0 20px;
}

#Introduction1 .prg_head_txt {
	font-size: clamp(1.375rem, 1.004rem + 1.69vw, 1.5rem);
  text-align: left!important;
  margin-top: 1.2em;
}
#Introduction1 .prg_head_btn {
  justify-content: center!important;
  margin-top: 3vw;
  margin-bottom: 3vw;
}

/*---*/
#Introduction1 .prg figure {
  width: 100%;
}

#Introduction1 video {
  width: 160vw;
}
#Introduction1 .prg_wrap > div:last-of-type figure img {
  margin-top: 0;
}

}
/* ----------------------- */
/* パースCGの間隔を調整するため */
/* ----------------------- */
@media screen and (max-width: 1100px)  and (min-width: 768px) {
#Introduction1 .prg_wrap > div:last-of-type figure img {
  margin-top: calc( 105 / 332 * (768px - 100vw) + 215px);
}
}



/*　イントロダクション２　--------------------------------------------------------------------------------- */
#Introduction2 .prg {
  display: flex;
  justify-content: space-between;
}
#Introduction2 img {
  vertical-align:top!important;
}
/*---*/

#Introduction2 .prg_head_wrap {
  background: url("../images/top/prg_head_bg.jpg") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  width: 45vw;
}

#Introduction2 .prg_head_wrap > div:last-of-type {
  width: 450px;
}

#Introduction2 .prg_head > div:last-of-type {
  display: flex;
  flex-direction: column;
}
#Introduction2 .prg_head_emb {
  width: 47px;
}
#Introduction2 .prg_head_ttl {
  height: 57px;
  width: auto;
  margin: 55px auto 40px 0;
}
#Introduction2 .prg_head_txt {
  font-size: 1.2rem;
  color: var(--Color2);
}
/*---*/
#Introduction2 .prg_head_btn {
  display: flex;
  align-items: center;
  margin-top: 2em;
  margin-bottom: 60px;
}
#Introduction2 .prg_head_btn span {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: var(--Color2);
  border-bottom: 1px solid var(--Color2);
}
#Introduction2 .prg_head_btn img {
  width: 70px;
  margin-left: 1em;
}

/*---*/
#Introduction2 .prg.right figure {
  width: 56.77vw;
  overflow: hidden;
  display: inline-block;
  background: url("../images/top/p2_img1.jpg") no-repeat;
  background-size: cover;
}
#Introduction2 .prg.left figure {
  width: 55vw;
  overflow: hidden;
  display: inline-block;
  background: url("../images/top/p2_img2.jpg") no-repeat;
  background-size: cover;
}
/*---*/

#Introduction2 .prg.right > div    {order: 1;}
#Introduction2 .prg.right > figure {order: 0;}
#Introduction2 .prg.right .prg_head_wrap > div:first-of-type {order: 1;}
#Introduction2 .prg.right .prg_head_wrap > div:last-of-type  {order: 0;}

#Introduction2 .prg.right .prg_head {
  display: flex;
  justify-content: space-between;
}
#Introduction2 .prg.right .prg_head_txt {
  text-align: right;
}
#Introduction2 .prg.right .prg_head_btn {
  justify-content: flex-end;
}


#Introduction2 .prg.right .prg_head_wrap > div:last-of-type {
  width: 420px;
  padding-right: 18px;
}

/* ----------------------- */
/* 1100*/
/* ----------------------- */

@media screen and (max-width: 1100px) {
#Introduction2 .prg_head_wrap > div:last-of-type {
  margin-left: 2vw;
}

#Introduction2 .prg_head_txt {
  font-size: 1.8vw;
}
}


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


#Introduction2 .prg.right {
  margin-bottom: -2vw;
}
/*---*/

#Introduction2 .prg_head_wrap {
  background: url("../images/top/prg_head_bg.jpg") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  width: 45vw;
}

#Introduction2 .prg_head_wrap > div:last-of-type {
  width: 450px;
}

#Introduction2 figure,
#Introduction2 figure img {
  width: 100%!important;
}



#Introduction2 .prg_wrap {
	width: 100%;
  /*overflow: hidden;*/
}
#Introduction2 .prg_head_wrap {
	width: 100%;
}
#Introduction2 .prg_head_wrap > div:last-of-type {
	width: 100%!important;
}

#Introduction2 .prg {
  display:block;
}
#Introduction2 .prg.right .prg_head {
  display:block;
}
#Introduction2 .prg_head > div:last-of-type {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
#Introduction2 .prg_head_ttl {
  margin: 0 0 0 20px;
}

#Introduction2 .prg_head_txt {
	font-size: clamp(1.375rem, 1.004rem + 1.69vw, 1.5rem);
  text-align: left!important;
  margin-top: 2em;
}
#Introduction2 .prg_head_btn {
  justify-content: center!important;
  margin-bottom: 6vw;
}

/*---*/
#Introduction2 .prg figure {
  width: 100%;
}


}


/*---　キャンペーン　---*/

.campaign {
  width: 1100px;
  margin: auto;
}
@media screen and (max-width: 999px) {
.campaign {
  width: calc(100% - 2vw);
}
}
@media screen and (max-width: 767px) {
.campaign {
  width: 90%;
}
}