@charset "UTF-8";
/* Color Palette */
/* Padding */
/* Heder Space */
/* Wrap */
/* Padding */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

h1 {
  font-size: min(5vw, 3rem); }

h2 {
  color: #ffffff;
  padding-bottom: 2rem;
  margin: 0 auto;
  font-size: clamp(21px, 8vw, 48px);
  text-align: center; }
  @media (max-width: 480px) {
    h2 {
      padding-bottom: 1rem; } }

h2 + p {
  margin: .5rem 0 0;
  font-weight: 600; }
  @media (max-width: 480px) {
    h2 + p {
      margin: 0 0 1rem; } }

h3 {
  font-size: 3rem;
  display: inline;
  padding: .4rem .8rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #000; }
  @media (max-width: 480px) {
    h3 {
      padding: .2rem .4rem;
      font-size: 2.5rem; } }

body {
  background: #ffffff; }

.wrap {
  width: 100%;
  padding: 8rem 0; }
  @media (max-width: 480px) {
    .wrap {
      padding: 4rem 0; } }

.note {
  font-size: 90%; }

/* ------------------
MAIN VISUAL 
------------------*/
.blue-bar {
  background-color: #a5ebff;
  height: 100px;
  margin-top: 90px;
  justify-content: center;
  display: flex;
  align-items: center; }
  .blue-bar p {
    text-align: center;
    font-weight: 500;
    font-size: clamp(14px, 2vw, 21px);
    line-height: 1.5; }
    .blue-bar p span {
      font-size: clamp(24px, 3vw, 36px); }
  @media only screen and (max-width: 1024px) and (min-width: 881px) {
    .blue-bar {
      height: 88px; } }
  @media (max-width: 880px) {
    .blue-bar {
      height: 88px; } }
  @media (max-width: 480px) {
    .blue-bar {
      margin-top: 66px;
      height: 72px; } }

.mv {
  height: 33vw;
  min-height: 580px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  background-image: url("../img/mv.jpg?20251120");
  background-size: cover;
  background-position: right 25% bottom 50%;
  /*@include sp {
  	height: 109vw;
  	min-height: auto;
  	background-image: url("../img/mv_sp.jpg");
  	background-position: top;
  	margin-top: 0;
  	margin-top: $header-height-sp;
  }*/
  /*@media only screen and (max-width: 1024px) and (min-width: 500px) {
  	height: 45vh;
  	margin-top:2vh;
  	background-position: 68% 85%;
  }*/ }
  @media (max-width: 1024px) {
    .mv {
      height: 86vw;
      min-height: auto;
      background-image: url("../img/mv_sp.jpg?20251120");
      background-position: right bottom;
      margin-top: 0; } }
  @media (max-width: 880px) {
    .mv {
      height: 100vw; } }

.mv_ttl {
  /*max-width:$inside-wrap;*/
  display: flex;
  align-items: center;
  text-align: left;
  color: #FFF;
  margin-left: 10vw; }
  @media (max-width: 1412px) {
    .mv_ttl {
      margin-left: 8vw; } }
  @media (max-width: 1024px) {
    .mv_ttl {
      width: 90%;
      margin: auto;
      margin-top: 6vw;
      text-align: center;
      flex-direction: column;
      justify-content: left;
      align-items: unset; } }
  .mv_ttl__text {
    /*font-feature-settings: 'palt';*/ }
    .mv_ttl__text h2 {
      margin: 0;
      padding: 0;
      font-size: clamp(38px, 6vw, 66px);
      font-weight: 600;
      line-height: 1;
      text-align: left; }
      @media (max-width: 1024px) {
        .mv_ttl__text h2 {
          line-height: 1.2;
          display: inline;
          font-size: clamp(38px, 8vw, 80px); } }
    .mv_ttl__text h1 {
      margin-bottom: 2rem;
      padding: 0;
      font-size: clamp(66px, 8vw, 120px);
      font-weight: 700;
      line-height: 0.8;
      text-align: left;
      font-feature-settings: 'palt'; }
      .mv_ttl__text h1 span {
        font-size: clamp(76px, 8vw, 130px); }
      @media (max-width: 1024px) {
        .mv_ttl__text h1 {
          line-height: 1.2;
          display: inline;
          font-size: clamp(38px, 8vw, 80px); }
          .mv_ttl__text h1 span {
            font-size: clamp(38px, 8vw, 80px); } }
    .mv_ttl__text p {
      font-size: clamp(26px, 3vw, 40px);
      font-weight: 600; }
      @media (max-width: 1024px) {
        .mv_ttl__text p {
          font-size: clamp(26px, 5vw, 40px); } }
    @media only screen and (min-width: 1920px) {
      .mv_ttl__text p {
        font-size: clamp(36px, 8vw, 56px); }
      .mv_ttl__text h2 {
        font-size: clamp(60px, 6vw, 90px); }
      .mv_ttl__text h1 {
        font-size: clamp(100px, 9vw, 160px); }
        .mv_ttl__text h1 span {
          font-size: clamp(120px, 9vw, 180px); } }

.mv_logo {
  width: 26vw;
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%); }
  .mv_logo img {
    width: 100%; }
  @media (max-width: 1024px) {
    .mv_logo {
      margin-top: 8vw;
      left: 25%;
      width: 40vw; } }
  @media (max-width: 480px) {
    .mv_logo {
      top: 55%; } }

/*
	@include pc {margin-top: 13vw;}
	@include tab {margin-top: 8vw;}
	
	@media only screen and (max-width: 1024px) and (min-width: 500px) {
		width: 68%;
		margin-top: 9vh;
	}*/
/* ------------------
キャンペーン名
------------------*/
.cp-name {
  background: #1414d2;
  padding: 3rem 0 4rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media (max-width: 480px) {
    .cp-name {
      padding: 3rem 0; } }
  .cp-name .cp-name_box {
    width: 95%;
    max-width: 840px; }
    .cp-name .cp-name_box h2 {
      font-weight: 600;
      font-feature-settings: 'palt'; }
    .cp-name .cp-name_box p {
      color: #ffffff;
      text-align: center;
      font-size: 120%; }
      @media (max-width: 480px) {
        .cp-name .cp-name_box p {
          font-size: 100%;
          font-weight: 500; } }

/* ------------------
応募期間
------------------*/
.period {
  padding: 4rem 0;
  text-align: center;
  background: #ffffff;
  color: #000000;
  /*font-size: clamp(36px, 4vw, 48px);
  span{font-size: clamp(30px, 3vw, 42px);}
  p{line-height:1.2;font-feature-settings: 'palt';}
  
  
  p.highlight{
  	font-size: clamp(12px, 2vw, 24px);
  	margin: 3rem 0;
  	span.bor{border:1px solid $white;padding: 1rem;}
  	}
  p.memo{
  	font-size: 40%;
  }*/ }
  @media (max-width: 480px) {
    .period {
      padding: 2rem 0; } }

.date {
  font-size: clamp(34px, 4vw, 48px);
  margin: 0 auto 4rem;
  width: 95%; }
  @media (max-width: 880px) {
    .date {
      margin: 0 auto 3rem; } }
  .date p {
    line-height: 1.2;
    font-feature-settings: 'palt'; }
    .date p span {
      font-size: clamp(28px, 3vw, 42px); }
  .date__ttl {
    font-size: clamp(14px, 2vw, 21px);
    padding-bottom: 1rem; }

.highlight {
  font-size: clamp(14px, 3vw, 21px);
  margin: 0 auto;
  width: 95%; }
  .highlight p.bor {
    border: 2px solid #000000;
    padding: 1rem 2rem;
    display: inline-block; }
  .highlight p {
    font-feature-settings: 'palt'; }
  .highlight p.memo {
    font-size: 80%;
    line-height: 1.5;
    margin-top: 5rem; }
    @media (max-width: 880px) {
      .highlight p.memo {
        margin-top: 3rem; } }

.pic {
  width: 80%;
  max-width: 1200px;
  margin: 3rem auto 0; }
  @media (max-width: 480px) {
    .pic {
      width: 100%;
      margin: 2rem auto 0; } }

.about-guampay {
  display: flex;
  flex-wrap: wrap; }
  @media (max-width: 880px) {
    .about-guampay {
      flex-direction: column-reverse; } }
  .about-guampay .block {
    width: 50%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #a5ebff; }
    @media (max-width: 880px) {
      .about-guampay .block {
        flex-basis: 100%;
        width: 100%; } }
    .about-guampay .block.text-box {
      padding: 5rem 6rem; }
      @media (max-width: 1412px) {
        .about-guampay .block.text-box {
          padding: 2rem 3rem; } }
      @media (max-width: 480px) {
        .about-guampay .block.text-box {
          padding: 0; } }
    .about-guampay .block__image {
      position: relative;
      width: 100%;
      height: 100%; }
      @media (max-width: 880px) {
        .about-guampay .block__image {
          width: 90%;
          padding: 0 0 4rem; } }
      @media (max-width: 480px) {
        .about-guampay .block__image {
          width: 100%;
          padding: 0; } }
      .about-guampay .block__image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center; }
    .about-guampay .block__content {
      display: flex;
      flex-direction: column;
      padding: 0 0 2rem; }
      @media (max-width: 880px) {
        .about-guampay .block__content {
          align-items: center; }
          .about-guampay .block__content p {
            text-align: center; } }
      .about-guampay .block__content h2 {
        text-align: left;
        margin: 0;
        color: #000000; }
      .about-guampay .block__content p {
        font-size: 120%; }
        @media (max-width: 480px) {
          .about-guampay .block__content p {
            font-size: 100%; } }
      .about-guampay .block__content .btn {
        display: inline-block;
        width: auto;
        margin: 2rem 0; }
      @media (max-width: 480px) {
        .about-guampay .block__content {
          width: 90%;
          margin: 0 auto;
          padding: 4rem 0; }
          .about-guampay .block__content.meal-kit {
            flex-direction: column-reverse; } }

/* ------------------
グアムペイ について
------------------*/
.guampay {
  background-image: url("../img/bg_about-guam-pay-pc.jpg");
  background-position: center;
  background-size: cover; }
  @media only screen and (min-width: 1920px) {
    .guampay {
      min-height: 600px; } }
  @media only screen and (max-width: 1024px) and (min-width: 881px) {
    .guampay {
      background-position: right 40% top; } }
  @media only screen and (max-width: 880px) and (min-width: 481px) {
    .guampay {
      background-image: url("../img/bg_about-guam-pay-sp.jpg");
      background-position: bottom 20% center;
      /*margin-top: $header-height-sp;*/
      min-height: 740px; } }
  @media (max-width: 480px) {
    .guampay {
      background-image: url("../img/bg_about-guam-pay-sp.jpg");
      background-position: bottom 20% center;
      /*margin-top: $header-height-sp;*/
      min-height: 620px; } }

.guampay-wrap {
  display: flex;
  justify-content: flex-end; }
  @media only screen and (min-width: 1920px) {
    .guampay-wrap {
      align-items: center; } }
  @media only screen and (max-width: 1024px) and (min-width: 881px) {
    .guampay-wrap {
      width: 90%; } }

.guampay-box {
  width: 40%; }
  .guampay-box h2 {
    text-align: left; }
  .guampay-box .btn {
    margin: 3rem 0;
    border: none; }
  .guampay-box .push {
    font-weight: 600;
    font-size: 120%; }
  @media only screen and (max-width: 1024px) and (min-width: 881px) {
    .guampay-box {
      width: 58%; } }
  @media (max-width: 880px) {
    .guampay-box {
      width: 100%;
      margin: auto; }
      .guampay-box h2 {
        text-align: center; } }

.guampay-content {
  width: 100%;
  padding: 3rem 0;
  color: #ffffff;
  text-align: left; }
  .guampay-content h4 {
    font-weight: 600;
    padding: 0;
    font-size: clamp(21px, 4vw, 24px);
    line-height: 1.5; }
    .guampay-content h4 span.big {
      font-size: clamp(32px, 11vw, 48px);
      color: #1414d2;
      font-weight: 700; }
  @media (max-width: 880px) {
    .guampay-content {
      text-align: center;
      padding: 2rem 0;
      /*display: flex;
      flex-direction: column;
      justify-content: center;*/ }
      .guampay-content .btn {
        padding: 1.5rem 4rem 1.5rem 4rem; } }

/* ------------------
賞品
------------------*/
.prize {
  background-color: #051464;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  /*align-items: stretch;*/
  align-items: center; }

.prize-wrap {
  width: 55%; }
  @media only screen and (max-width: 1023px) and (min-width: 481px) {
    .prize-wrap {
      width: 100%; } }
  @media (max-width: 480px) {
    .prize-wrap {
      width: 100%; } }

.prize-box {
  width: 70%;
  margin: 3rem auto 4rem; }
  @media only screen and (max-width: 1350px) and (min-width: 481px) {
    .prize-box {
      width: 90%; } }
  @media (max-width: 480px) {
    .prize-box {
      width: 95%;
      margin: 2rem auto 4rem; } }
  .prize-box ul {
    padding-top: 1rem; }
    .prize-box ul li {
      font-size: 90%;
      line-height: 1.5;
      color: #ffffff;
      text-indent: -1.2em;
      margin-top: .5rem;
      padding-left: 1.2em; }
      @media (max-width: 480px) {
        .prize-box ul li {
          font-size: 80%; } }

.widey {
  display: none; }
  @media only screen and (min-width: 1320px) {
    .widey {
      display: block; } }

.prize-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  background-color: #ffffff;
  border-radius: 10px; }
  @media only screen and (max-width: 620px) and (min-width: 481px) {
    .prize-content {
      width: 100%; } }
  @media (max-width: 480px) {
    .prize-content {
      width: 100%; } }

.box-ttl {
  width: 96%;
  padding: 2rem 0 1rem;
  box-sizing: border-box;
  margin: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  text-align: center;
  color: #000000; }
  @media (max-width: 880px) {
    .box-ttl {
      padding: 1rem; } }
  @media (max-width: 480px) {
    .box-ttl {
      padding: 2rem; } }
  .box-ttl p {
    font-size: 120%; }
    @media (max-width: 480px) {
      .box-ttl p {
        font-size: 100%; } }
  .box-ttl h3 {
    color: #1414d2;
    font-size: clamp(21px, 8vw, 40px);
    font-feature-settings: 'palt';
    margin: 0 auto; }

.box-content {
  width: 100%;
  padding: 3rem;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center; }
  .box-content__logo {
    width: 25%; }
    .box-content__logo img {
      width: 100%;
      min-width: 110px; }
    @media (max-width: 480px) {
      .box-content__logo {
        width: 30%; } }
  .box-content__text {
    margin-left: 2rem; }
    @media (max-width: 480px) {
      .box-content__text {
        margin-left: 1rem; } }
    .box-content__text h4 {
      font-weight: 600;
      padding: 0;
      font-size: clamp(21px, 4vw, 24px);
      line-height: 1.2;
      text-align: left; }
      @media (max-width: 480px) {
        .box-content__text h4 {
          font-size: clamp(21px, 5vw, 28px); } }
      .box-content__text h4 span.big {
        font-size: clamp(36px, 12vw, 56px);
        color: #1414d2;
        font-weight: 700; }
      .box-content__text h4 span.big-jap {
        font-size: clamp(32px, 11vw, 48px);
        color: #1414d2;
        font-weight: 700; }
  @media (max-width: 880px) {
    .box-content {
      width: 95%;
      padding: 2rem 0;
      /*align-items: center;*/
      gap: 1rem;
      margin: auto; } }

.swiper-loop-wrapper {
  width: 45%;
  position: relative;
  flex: 1;
  /*padding: 20px 0;*/ }
  @media (max-width: 480px) {
    .swiper-loop-wrapper {
      width: 100%; } }

.swiper-loop, .swiper-loop-reverse {
  overflow: hidden; }
  .swiper-loop .swiper-wrapper, .swiper-loop-reverse .swiper-wrapper {
    transition-timing-function: linear; }
    .swiper-loop .swiper-wrapper .swiper-slide, .swiper-loop-reverse .swiper-wrapper .swiper-slide {
      width: auto;
      height: 100%;
      /*max-height: 600px;*/ }
      @media (max-width: 880px) {
        .swiper-loop .swiper-wrapper .swiper-slide, .swiper-loop-reverse .swiper-wrapper .swiper-slide {
          max-height: 200px; } }
      .swiper-loop .swiper-wrapper .swiper-slide img, .swiper-loop-reverse .swiper-wrapper .swiper-slide img {
        width: auto;
        height: 100%;
        /*600px*/
        object-fit: cover; }
        @media (max-width: 880px) {
          .swiper-loop .swiper-wrapper .swiper-slide img, .swiper-loop-reverse .swiper-wrapper .swiper-slide img {
            max-height: 200px; } }

.f-600 {
  font-weight: 600; }

/* ------------------
応募方法
------------------*/
@media only screen and (max-width: 1350px) and (min-width: 1025px) {
  .apply {
    width: 96%; } }

.apply-flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media only screen and (max-width: 1024px) {
    .apply-flexbox {
      gap: 2rem; } }

.child-card {
  width: 32%;
  padding: 4rem;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center; }
  .child-card .btn {
    margin-top: 3rem;
    width: 100%; }
  @media only screen and (max-width: 1024px) and (min-width: 481px) {
    .child-card {
      width: 100%;
      padding: 3rem; } }
  @media (max-width: 480px) {
    .child-card {
      width: 100%;
      padding: 3rem; } }
  @media only screen and (max-width: 385px) {
    .child-card {
      padding: 2rem; } }
  .child-card__ttl {
    text-align: center; }
    .child-card__ttl h3 {
      font-size: clamp(18px, 6.5vw, 24px);
      color: #1414d2;
      font-weight: 700;
      line-height: 1;
      margin: 0;
      padding: 0;
      border-bottom: solid 3px #1414d2; }
  .child-card__content {
    margin-top: 4rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    text-align: left; }
    @media (max-width: 880px) {
      .child-card__content {
        align-items: flex-start; } }
    @media (max-width: 480px) {
      .child-card__content {
        align-items: center; } }
    .child-card__content svg {
      width: 50px;
      height: auto;
      margin: 0 20px 0 0; }
    .child-card__content svg.form {
      margin: 0 25px 0 0; }
  .child-card p {
    font-size: clamp(16px, 3vw, 18px);
    font-weight: 500; }
  .child-card p.note {
    font-weight: normal; }

.space2rem {
  margin-top: 3rem; }
  @media (max-width: 480px) {
    .space2rem {
      margin-top: 2rem; } }

.btn-addfriend {
  margin-top: 2rem;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  border-radius: 4px;
  box-sizing: border-box;
  border: solid 1px #5ad28c;
  background-color: #5ad28c; }
  .btn-addfriend__icon {
    padding: 15px;
    width: auto;
    background-color: #ffffff;
    border-radius: 4px 0 0 4px; }
    .btn-addfriend__icon img {
      width: 50px; }
  .btn-addfriend__txt {
    margin: auto;
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: clamp(13px, 3.8vw, 18px);
    line-height: 1.5;
    color: #000000; }

.remove {
  text-decoration: none; }

/* ------------------
公式規約
------------------*/
.ruleregu {
  background-image: url("../img/bg_ruleregu.jpg?20251120");
  background-position: center;
  background-size: cover; }
  .ruleregu h2 {
    color: #000000; }

.ruleregu-box {
  padding: 4rem;
  border-radius: 10px;
  text-align: justify; }
  @media (max-width: 480px) {
    .ruleregu-box {
      padding: 2rem; } }

/*--------------------
Rules(scrollable)
--------------------*/
.rules {
  line-height: 1.8;
  margin: 1rem 0 0;
  padding: 1rem;
  height: 400px;
  overflow: scroll;
  border: solid 1px black;
  text-align: left;
  font-size: 1.2rem; }
  .rules dl {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/ }
    .rules dl li {
      list-style: unset;
      margin: 0 0 0 1.8rem; }
    .rules dl dt, .rules dl dd {
      padding: .5rem 0;
      border-top: solid #D7D7D4 1px; }
      .rules dl dt:first-of-type, .rules dl dd:first-of-type {
        border-top: none; }
      @media (max-width: 480px) {
        .rules dl dt, .rules dl dd {
          border: none; } }
    .rules dl dt {
      width: 140px;
      font-weight: 600; }
      @media (max-width: 480px) {
        .rules dl dt {
          width: 100%;
          border-bottom: solid #D7D7D4 1px; } }
    .rules dl dd {
      width: 75%;
      width: calc(100% - 151px);
      padding: .5rem 0 .5rem 1rem;
      border-left: solid 1px #D7D7D4; }
      @media (max-width: 480px) {
        .rules dl dd {
          width: 100%;
          border: none; } }

.abutton {
  width: 100%;
  margin-top: 2rem;
  text-align: center; }

/* ------------------
大きい背景セクション
------------------*/
.bg-cover {
  height: 50vw;
  max-height: 600px;
  background: url("https://unitedair.jp/guam/img/common/bg_ua_01.jpg");
  background-size: cover;
  position: relative;
  background-position: center;
  padding: 3rem;
  box-sizing: border-box; }
  @media (max-width: 480px) {
    .bg-cover {
      padding: 3rem 0; } }
  .bg-cover .wrap {
    width: 90%;
    max-width: 1380px;
    margin: auto; }
  .bg-cover .txt {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    width: 70%; }
    .bg-cover .txt .uabr {
      display: none; }
      @media screen and (max-width: 1350px) {
        .bg-cover .txt .uabr {
          display: block; } }
  .bg-cover h2 {
    text-align: left;
    font-weight: 500; }
    .bg-cover h2 p.en-heading {
      font-size: clamp(22px, 7vw, 68px);
      letter-spacing: -.03em;
      line-height: 1.2;
      margin: 0 0 2rem; }
      @media (max-width: 880px) {
        .bg-cover h2 p.en-heading {
          margin: 0 0 1rem; } }
    .bg-cover h2 p.ja-heading {
      font-size: clamp(14px, 2.1vw, 24px);
      letter-spacing: .2em; }

/* ------------------
BANNER
------------------*/
.banner {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto; }
  @media (max-width: 480px) {
    .banner {
      width: 90%; } }

.bnr-block {
  width: 100%;
  margin: 5rem 0; }
  @media (max-width: 480px) {
    .bnr-block {
      margin: 3rem 0; } }
  .bnr-block img {
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition-duration: .2s; }
  .bnr-block img:hover {
    transform: scale(1.025); }

.blink {
  animation: star 1s ease-in-out 0s infinite;
  -webkit-animation: star 1s ease-in-out infinite alternate;
  -moz-animation: star 1s ease-in-out infinite alternate; }

@keyframes star {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes star {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes star {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.super {
  font-size: 0.5vw;
  vertical-align: super; }
  @media (max-width: 480px) {
    .super {
      font-size: 0.1vw; } }