@charset "utf-8";

/*===============================================
common
header
footer
parts(共通パーツ)
animation
drawer
=================================================*/

/* --------------------------------------------
common
-----------------------------------------------*/
:root {
  --base-green: #5cb5aa;
  --base-dark-green: #3eb370;
  --base-orange: #e77400;
  --base-blue: #72a1c7;
  --base-dark-blue: #215787;
  --base-white: #fff;
  --base-light-gray: #efefef;
  --base-dark-gray: #4c4948;
  --base-black: #000;
  --base-orange: #e77400;
  --base-red: #e60012;
  --base-deep-red: #c13932;
  --base-purple: #9c7399;
  --base-brown: #784d23;
  --base-warm-gray: #aaa282;
}

:root {
  --leading-trim: calc((1em - 1lh) / 2);
  --fontsize11: min(calc(11 / 1280 * 100vw), 11px);
  --fontsize12: min(calc(12 / 1280 * 100vw), 12px);
  --fontsize13: min(calc(13 / 1280 * 100vw), 13px);
  --fontsize14: min(calc(14 / 1280 * 100vw), 14px);
  --fontsize15: min(calc(15 / 1280 * 100vw), 15px);
  --fontsize16: min(calc(16 / 1280 * 100vw), 16px);
  --fontsize12_16: min(calc(16 / 1280 * 100vw), 16px);
  --fontsize13_16: min(calc(16 / 1280 * 100vw), 16px);
  --fontsize17: min(calc(17 / 1280 * 100vw), 17px);
  --fontsize18: min(calc(18 / 1280 * 100vw), 18px);
  --fontsize19: min(calc(19 / 1280 * 100vw), 19px);
  --fontsize20: min(calc(20 / 1280 * 100vw), 20px);
  --fontsize21: min(calc(21 / 1280 * 100vw), 21px);
  --fontsize22: min(calc(22 / 1280 * 100vw), 22px);
  --fontsize23: min(calc(23 / 1280 * 100vw), 23px);
  --fontsize24: min(calc(24 / 1280 * 100vw), 24px);
  --fontsize25: min(calc(25 / 1280 * 100vw), 25px);
  --fontsize26: min(calc(26 / 1280 * 100vw), 26px);
  --fontsize27: min(calc(27 / 1280 * 100vw), 27px);
  --fontsize28: min(calc(28 / 1280 * 100vw), 28px);
  --fontsize29: min(calc(29 / 1280 * 100vw), 29px);
  --fontsize30: min(calc(30 / 1280 * 100vw), 30px);
  --fontsize31: min(calc(31 / 1280 * 100vw), 31px);
  --fontsize32: min(calc(32 / 1280 * 100vw), 32px);
  --fontsize34: min(calc(34 / 1280 * 100vw), 34px);
  --fontsize35: min(calc(35 / 1280 * 100vw), 35px);
  --fontsize36: min(calc(36 / 1280 * 100vw), 36px);
  --fontsize38: min(calc(38 / 1280 * 100vw), 38px);
  --fontsize40: min(calc(40 / 1280 * 100vw), 40px);
  --fontsize41: min(calc(41 / 1280 * 100vw), 41px);
  --fontsize42: min(calc(42 / 1280 * 100vw), 42px);
  --fontsize43: min(calc(43 / 1280 * 100vw), 43px);
  --fontsize44: min(calc(44 / 1280 * 100vw), 44px);
  --fontsize45: min(calc(45 / 1280 * 100vw), 45px);
  --fontsize46: min(calc(46 / 1280 * 100vw), 46px);
  --fontsize48: min(calc(48 / 1280 * 100vw), 48px);
  --fontsize50: min(calc(50 / 1280 * 100vw), 50px);
  --fontsize52: min(calc(52 / 1280 * 100vw), 52px);
  --fontsize55: min(calc(55 / 1280 * 100vw), 55px);
  --fontsize56: min(calc(56 / 1280 * 100vw), 56px);
  --fontsize64: min(calc(64 / 1280 * 100vw), 64px);
  --fontsize65: min(calc(65 / 1280 * 100vw), 65px);
  --fontsize69: min(calc(69 / 1280 * 100vw), 69px);
  --fontsize70: min(calc(70 / 1280 * 100vw), 70px);
  --fontsize72: min(calc(72 / 1280 * 100vw), 72px);
  --fontsize80: min(calc(80 / 1280 * 100vw), 80px);
  --fontsize100: min(calc(100 / 1200 * 100vw), 100px);
  --fontsize110: min(calc(110 / 1200 * 100vw), 110px);
  --fontsize120: min(calc(120 / 1200 * 100vw), 120px);
  --fontsize150: min(calc(150 / 1200 * 100vw), 150px);
  --fontsize160: min(calc(160 / 1200 * 100vw), 160px);
}

@media screen and (max-width: 767px) {
  :root {
    --fontsize11: min(calc(11 / 390 * 100vw), 11px);
    --fontsize12: min(calc(12 / 390 * 100vw), 12px);
    --fontsize13: min(calc(13 / 390 * 100vw), 13px);
    --fontsize14: min(calc(14 / 390 * 100vw), 14px);
    --fontsize15: min(calc(15 / 390 * 100vw), 15px);
    --fontsize16: min(calc(16 / 390 * 100vw), 16px);
    --fontsize12_16: min(calc(16 / 390 * 100vw), 16px);
    --fontsize13_16: min(calc(16 / 390 * 100vw), 16px);
    --fontsize17: min(calc(17 / 390 * 100vw), 17px);
    --fontsize18: min(calc(18 / 390 * 100vw), 18px);
    --fontsize19: min(calc(19 / 390 * 100vw), 19px);
    --fontsize20: min(calc(20 / 390 * 100vw), 20px);
    --fontsize21: min(calc(21 / 390 * 100vw), 21px);
    --fontsize22: min(calc(22 / 390 * 100vw), 22px);
    --fontsize23: min(calc(23 / 390 * 100vw), 23px);
    --fontsize24: min(calc(24 / 390 * 100vw), 24px);
    --fontsize25: min(calc(25 / 390 * 100vw), 25px);
    --fontsize26: min(calc(26 / 390 * 100vw), 26px);
    --fontsize27: min(calc(27 / 390 * 100vw), 27px);
    --fontsize28: min(calc(28 / 390 * 100vw), 28px);
    --fontsize29: min(calc(29 / 390 * 100vw), 29px);
    --fontsize30: min(calc(30 / 390 * 100vw), 30px);
    --fontsize31: min(calc(31 / 390 * 100vw), 31px);
    --fontsize32: min(calc(32 / 390 * 100vw), 32px);
    --fontsize34: min(calc(34 / 390 * 100vw), 34px);
    --fontsize35: min(calc(35 / 390 * 100vw), 35px);
    --fontsize36: min(calc(36 / 390 * 100vw), 36px);
    --fontsize38: min(calc(38 / 390 * 100vw), 38px);
    --fontsize40: min(calc(40 / 390 * 100vw), 40px);
    --fontsize41: min(calc(41 / 390 * 100vw), 41px);
    --fontsize42: min(calc(42 / 390 * 100vw), 42px);
    --fontsize43: min(calc(43 / 390 * 100vw), 43px);
    --fontsize44: min(calc(44 / 390 * 100vw), 44px);
    --fontsize45: min(calc(45 / 390 * 100vw), 45px);
    --fontsize46: min(calc(46 / 390 * 100vw), 46px);
    --fontsize48: min(calc(48 / 390 * 100vw), 48px);
    --fontsize50: min(calc(50 / 390 * 100vw), 50px);
    --fontsize52: min(calc(50 / 390 * 100vw), 52px);
    --fontsize55: min(calc(55 / 390 * 100vw), 55px);
    --fontsize56: min(calc(56 / 390 * 100vw), 56px);
    --fontsize65: min(calc(65 / 390 * 100vw), 65px);
    --fontsize70: min(calc(70 / 390 * 100vw), 70px);
  }
}

body{
  letter-spacing: 0.04em;
  line-height: 2;
  overflow-x: hidden;
  font-size: var(--fontsize18);
  letter-spacing: 0.04em;
}

main{
  overflow-x: hidden;
}

@media screen and (max-width: 767px) {
  body {
    font-size: var(--fontsize16);
  }
}

/*インナー幅
====================================*/
.inner{
  position: relative;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  z-index: 5;
}

/* --------------------------------------------
header
-----------------------------------------------*/
header{
  width: 100%;
  position: fixed;
  background: var(--base-white);
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 0px 3px 0px rgb(0, 0, 0, 0.1);
}

.header-pc__wrap{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1vw;
  /* max-width: 1560px; */
  width: 95%;
  margin: 0 auto;
  padding: 25px 0;
  height: 120px;
  background: var(--base-white);
  z-index: 100;
}

/*ヘッダーロゴ
====================================*/
.header-pc__logo {
  width: min(35.3vw, 429px);
  flex: 0 0 auto;
}

/*ヘッダーナビゲーション
====================================*/
.header-pc__nav{
  flex: 1 1 auto;
  height: 100%;
}

.header-pc__nav-list{
  display: flex;
  align-items: center;
  justify-content: right;
  gap: min(2.2vw, 40px);
  height: 100%;
  padding-right: 2.4vw;
}

.header-pc__nav-list li{
  height: 100%;
}

.header-pc__nav-list a{
  height: 100%;
  display: flex;
  align-items: center;
  font-size: var(--fontsize16);
  font-weight: 400;
}

.header-pc__nav-list a:hover {
  opacity: 1;
  color: var(--base-orange);
}

/* ヘッダー新卒採用＆キャリア採用
====================================*/
.header-pc__btn-wrap{
  display: flex;
  gap: 2px;
  height: 100%;
}

.header-pc__btn{
  padding: 25px min(25/1700 * 100vw, 25px);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: skewX(-30deg);
  background: var(--base-red);
  background: linear-gradient(90deg, #e60012 -20%, #e77400 100%);
  color: var(--base-white);
  font-size: var(--fontsize17);
  font-weight: 600;
}

.header-pc__btn span {
  transform: skewX(30deg);
}

/* ハンバーガーメニュー
====================================*/
.header-hmb{
  position: relative;
  display: none;
  width: 60px;
  height: 45px;
  cursor: pointer;
}

.header-hmb::after{
  content: "MENU";
  font-size: 19px;
  font-weight: 600;
  font-family: Arial, Helvetica, "Liberation Sans", "Nimbus Sans L", sans-serif;
  color: #000;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
  white-space: nowrap;
}

.header-hmb span{
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--base-red);
}

.header-hmb span:nth-child(1){
  bottom: 0;
  left: 0;
}

.header-hmb.active span:nth-child(1){
  bottom: 7px;
  rotate: 15deg;
}

.header-hmb span:nth-child(2){
  bottom: 15px;
  left: 0;
}

.header-hmb.active span:nth-child(2){
  bottom: 7px;
  rotate: -15deg;
}

/* SPナビゲーション
====================================*/
.header-sp__wrap{
  position: absolute;
  display: none;
}

.header-sp__nav{
  position: fixed;
  right: 0;
  top: 100px;
  width: 100vw;
  max-width: 350px;
  height: 100%;
  min-height: 100vh;
  background: var(--base-orange);
  overflow: auto;
  padding: min(20 / 390 * 100vw, 20px) min(30 / 390 * 100vw, 30px);
  display: none;
}

.header-sp__nav-list {
  display: flex;
  flex-direction: column;
  gap: min(15 / 384 * 100vw, 15px);
}

.header-sp__nav-list a{
  font-size: var(--fontsize24);
  font-weight: 600;
  color: var(--base-white);
}

/* GMドロワー
====================================*/
.header-drawer{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
}

.header-drawer.is-active{
  display: block;
}

.drawer-list{
  display: flex;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
}

.drawer-list:nth-child(1){
  left: initial;
  right: 18%;
}

.drawer-list:nth-child(3){
  left: initial;
  right: 18%;
}

.drawer-list:nth-child(4){
  left: initial;
  right: 5%;
}

.drawer-list a{
  position: relative;
  padding-left: 20px;
  font-size: var(--fontsize16R);
}

.drawer-list a:hover {
  color: var(--base-orange);
}

.drawer-list a::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 4px;
  height: 3px;
  background: var(--base-orange);
  transform: skewX(-30deg);
}

@media screen and (max-width: 1500px) {
  .header-pc__nav-list{
    gap: 1.5vw;
    padding-right: 0;
  }

  .header-pc__btn {
    padding: 25px min(15/1700 * 100vw, 15px);
  }
}

@media screen and (max-width: 1199px) {
  .header-pc__wrap{
    height: 100px;
    padding: 10px 0;
  }

  .header-pc__logo {
    width: min(70.3vw, 429px);
  }

  .header-pc__nav{
    display: none;
  }

  .header-pc__btn-wrap{
    display: none;
  }

  .header-hmb{
    display: block;
  }

  .header-sp__wrap{
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .header-pc__wrap{
    height: 80px;
  }

  .header-hmb{
    width: 45px;
    height: 35px;
  }

  .header-hmb::after{
    font-size: 14px;
  }

  .header-sp__nav{
    top: 80px;
    max-width: initial;
    padding: min(20 / 390 * 100vw, 20px) min(10 / 390 * 100vw, 10px);
  }

  .header-hmb span:nth-child(2){
    bottom: 10px;
    left: 0;
  }

  .header-sp__nav-list a {
    font-size: var(--fontsize18);
  }
}

/* --------------------------------------------
footer
-----------------------------------------------*/
.footer{
  position: relative;
}

/* 採用フッター
====================================*/
.footer-recruit {
  background: var(--base-orange);
}

.footer-recruit__wrap {
  padding: min(110/1200 * 100vw, 110px) 0 min(120/1200 * 100vw, 120px);
  display: flex;
  gap: min(80/1200 * 100vw, 80px);
}

.footer-recruit__box{
  width: 100%;
}

.footer-recruit__heading {
  display: flex;
  flex-direction: column;
  margin-bottom: min(45/1200 * 100vw, 45px);
}

.footer-recruit__heading-en{
  font-size: var(--fontsize40);
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--base-white);
  line-height: 1.3;
}

.footer-recruit__heading-jp{
  font-size: var(--fontsize20);
  font-weight: 600;
  color: var(--base-white);
}

.footer-recruit__list-item {
  border-bottom: 1px solid var(--base-white);
}

.footer-recruit__list-item a{
  position: relative;
  display: block;
  padding: min(20/1200 * 100vw, 20px) min(70/1200 * 100vw, 70px)
    min(20/1200 * 100vw, 20px) min(45/1200 * 100vw, 45px);
  font-size: var(--fontsize20);
  font-weight: 600;
  color: var(--base-white);
}

.footer-recruit__list-item a::before{
  content: "";
  position: absolute;
  top: 50%;
  left: min(19/1200 * 100vw, 19px);
  translate: 0 -50%;
  width: 7px;
  height: 6px;
  background: var(--base-white);
  transform: skewX(-30deg);
}

.footer-recruit__list-item a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: min(23/1200 * 100vw, 23px);
  translate: 0 -50%;
  background : url(img/common/white-right-arw.png) 0% 0% / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(15/1200 * 100vw, 15px) min(15/1200 * 100vw, 15px);
  background-position: center center;
  width: min(45/1200 * 100vw, 45px);
  height: min(45/1200 * 100vw, 45px);
  border-radius: 50%;
  border: 1px solid var(--base-white);
}

/* フッター
====================================*/
.footer__wrap{
  padding-top: min(120/1200 * 100vw, 120px);
  position: relative;
  background: var(--base-white);
  overflow: hidden;
}

.footer__wrap::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -220px;
  translate: -50% 0;
  background : url(img/common/footer-bg.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(689/1200 * 100vw, 689px) min(689/1200 * 100vw, 689px);
  width: min(689/1200 * 100vw, 689px);
  height: min(689/1200 * 100vw, 689px);
}

.footer__top-wrap{
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin-bottom: min(73/1200 * 100vw, 73px);
  z-index: 5;
}

.footer__left-content {
  display: flex;
  flex-direction: column;
  gap: min(40/1200 * 100vw, 40px);
  flex-shrink: 0;
}

.footer__logo{
  width: 100%;
}

.footer__logo a{
  font-size: var(--fontsize24);
  font-weight: 600;
}

.footer__address {
  padding-top: min(20/1200 * 100vw, 20px);
  font-size: var(--fontsize14);
}

.footer__catch{
  position: relative;
  /* display: inline-block;
  font-size: var(--fontsize110);
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic";
  font-weight: 900;
  color: var(--base-black);
  line-height: 1.36;
  letter-spacing: 0.04em;
  overflow: hidden;
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url("./img/common/footer-catch.png");
  background-size: cover;
  background-clip: text;
  color: transparent; */
  width: min(45vw, 517px);
}

.footer__right-content{
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.footer__nav{
  display: flex;
  justify-content: flex-end;
  gap: min(5vw, 120px);
  width: 100%;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: min(25/1200 * 100vw, 25px);
}

.footer__nav-item a{
  position: relative;
  font-size: var(--fontsize18);
  padding-left: min(25/1200 * 100vw, 25px);
}

.footer__nav-item a::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  font-size: var(--fontsize12);
  background : url(img/common/orange-right-arw.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(7/1200 * 100vw, 7px) min(12/1200 * 100vw, 12px);
  width: min(7/1200 * 100vw, 7px);
  height: min(12/1200 * 100vw, 12px);
}

/* 関連リンク
====================================*/
.footer__bottom-wrap{
  position: relative;
  border-top: 1px solid var(--base-dark-gray);
  padding-top: min(50/1200 * 100vw, 50px);
  margin-bottom: min(40/1200 * 100vw, 40px);
  z-index: 5;
}

.footer__link{
  position: relative;
  margin-bottom: min(120/1200 * 100vw, 120px);
  z-index: 5;
}

.footer__link > p{
  font-size: var(--fontsize22);
  margin-bottom: min(30/1200 * 100vw, 30px);
  text-align: center;
}

.footer__link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 2.6%;
}

.footer__link-item{
  width: 23%;
  height: min(95/1200 * 100vw, 95px);
  border: 1px solid #b5b7b6;
  background: var(--base-white);
}

.footer__link-item a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.footer__link-item img{
  width: 80%;
}

.footer__copy {
  font-size: var(--fontsize14);
}

/* 斜線 */
.footer-illust{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.footer-illust__item{
  position: absolute;
  right: calc(-1 * min(145/1200 * 100vw, 145px));
  bottom: calc(-1 * min(115/1200 * 100vw, 115px));
  max-width: 320px;
  width: 29%;
}

.footer__top-scroll{
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5;
}

.footer__top-scroll a{
  font-size: var(--fontsize16);
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .footer-recruit {
    background: var(--base-orange);
  }

  .footer-recruit__wrap {
    padding: min(60/390 * 100vw, 60px) 0 min(60/390 * 100vw, 60px);
    gap: min(30/390 * 100vw, 30px);
    flex-wrap: wrap;
  }

  .footer-recruit__heading-en {
    font-size: var(--fontsize30);
  }

  .footer-recruit__heading-jp {
    font-size: var(--fontsize16);
  }

  .footer-recruit__list-item a {
    padding: min(15/390 * 100vw, 15px) min(40/390 * 100vw, 40px)
      min(15/390 * 100vw, 15px) min(20/390 * 100vw, 20px);
    font-size: var(--fontsize16);
  }

  .footer-recruit__list-item a::before{
    left: min(10/1200 * 100vw, 10px);
    width: 6px;
    height: 6px;
  }

  .footer-recruit__list-item a::after {
    right: min(15/390 * 100vw, 15px);
    translate: 0 -50%;
    width: min(23/390 * 100vw, 23px);
    height: min(23/390 * 100vw, 23px);
    background-size: min(10/390 * 100vw, 10px) min(10/390 * 100vw, 10px);
  }

  .footer__top-wrap {
    gap: min(30/390 * 100vw, 30px);
    margin-bottom: min(30/390 * 100vw, 30px);
    flex-direction: column;
  }

  .footer__left-content {
    gap: min(20/390 * 100vw, 20px);
  }

  .footer__logo{
    /* width: min(70vw, 562px); */
    width: 100%;
  }

  .footer__logo a {
    font-size: var(--fontsize20);
  }

  .footer__catch {
    width: min(60vw, 517px);
  }

  .footer__nav {
    justify-content: initial;
  }

  .footer__nav-item a {
    font-size: var(--fontsize16);
    padding-left: min(10/390 * 100vw, 10px);
  }

  .footer__nav-item a::before {
    font-size: var(--fontsize12);
    background-size: min(4/390 * 100vw, 4px) min(6/390 * 100vw, 6px);
    width: min(4/390 * 100vw, 4px);
    height: min(6/390 * 100vw, 6px);
  }

  .footer__link > p{
    font-size: var(--fontsize20);
    margin-bottom: min(15/390 * 100vw, 15px);
    text-align: center;
  }

  .footer__link-list {
    gap: 10px 2%;
  }

  .footer__link-item{
    width: 48%;
    height: min(95/767 * 100vw, 95px);
  }

  .footer__link {
    margin-bottom: min(60/390 * 100vw, 60px);
  }

  .footer__top-scroll a {
    font-size: var(--fontsize14);
  }

  .footer-illust__item{
    right: -5%;
    width: 39%;
  }
}

/* --------------------------------------------
parts(共通パーツ)
-----------------------------------------------*/

/*見出し h2
====================================*/
.heading{
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: min(45/1200 * 100vw, 45px);
  z-index: 5;
}

.heading .title-en{
  font-size: var(--fontsize64);
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--base-orange);
  letter-spacing: 0.04em;
  line-height: 1;
}

.heading .title-jp{
  font-size: var(--fontsize20);
  font-weight: 600;
  font-family: "メイリオ";
}

@media screen and (max-width: 767px) {
  .heading .title-en {
    font-size: var(--fontsize30);
  }

  .heading .title-jp {
    font-size: var(--fontsize18);
  }
}

/*サブ見出し
====================================*/
.sub-heading{
  font-size: var(--fontsize32);
  font-weight: 600;
  line-height: 1.5;
  color: var(--base-orange);
  margin-bottom: min(20/1200 * 100vw, 20px);
  letter-spacing: 0.04em;
}

@media screen and (max-width: 767px) {
  .sub-heading {
    font-size: var(--fontsize24);
    margin-bottom: min(20/390 * 100vw, 20px);
  }
}

/*黒ボタン
====================================*/
.black-btn a{
  display: inline-block;
  position: relative;
  /* max-width: 320px;
  width: 30%; */
  padding: 9px min(70/1200 * 100vw, 70px) 9px min(35/1200 * 100vw, 35px);
  text-align: left;
  background: var(--base-black);
  border-radius: 50px;
  font-size: var(--fontsize20);
  font-weight: 600;
  color: var(--base-white);
  border: 1px solid var(--base-black);
  transition: all 0.3s;
  z-index: 5;
}

.black-btn a:hover {
  background: var(--base-white);
  color: var(--base-black);
  transition: all 0.3s;
}

.black-btn a span{
  position: absolute;
  top: 50%;
  right: min(20/1200 * 100vw, 20px);
  translate: 0 -50%;
  width: min(35/1200 * 100vw, 35px);
  height: min(35/1200 * 100vw, 35px);
  background: var(--base-white);
  border-radius: 50%;
  transition: all 0.3s;
}

.black-btn a:hover span {
  background: var(--base-black);
}

.black-btn a span::after{
  content: "";
  background : url(img/common/black-right-arw.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: 12px 12px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.black-btn a:hover span::after{
  background-image : url(img/common/white-right-arw.png);
}

@media screen and (max-width: 767px) {
  .black-btn a{
    width: 65%;
    min-width: 300px;
    padding: min(9/390 * 100vw, 9px) min(58/1200 * 100vw, 58px)
      min(9/390 * 100vw, 9px) min(35/1200 * 100vw, 35px);
    font-size: var(--fontsize16);
  }

  .black-btn a span {
    width: min(25/390 * 100vw, 25px);
    height: min(25/390 * 100vw, 25px);
  }

  .black-btn a span::after{
    background-size: 10px 10px;
    width: 10px;
    height: 10px;
  }
}

/*２カラムの画像とテキスト
====================================*/
.column2__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 0;
}

.column2__wrap--mb80 {
  margin-bottom: min(80/1200 * 100vw, 80px);
}

.column2__box{
  display: flex;
  flex-direction: column;
  width: 46.7%;
}

.column2__box-img{
  margin-bottom: min(35/1200 * 100vw, 35px);
  aspect-ratio: 112/69;
  background: #4d4d4d;
}

.column2__box-txt {
  display: flex;
  flex-direction: column;
}

.column2__box-txt a{
  position: relative;
  padding: min(20/1200 * 100vw, 20px) min(75/1200 * 100vw, 75px)
    min(20/1200 * 100vw, 20px) min(35/1200 * 100vw, 35px);
  border-bottom: 1px solid var(--base-orange);
  font-size: var(--fontsize20);
  font-weight: 600;
}

.column2__box-txt a::before{
  content: "";
  position: absolute;
  top: 50%;
  left: min(10/1200 * 100vw, 10px);
  translate: 0 -50%;
  width: 6px;
  height: 6px;
  background: var(--base-orange);
  transform: skewX(-30deg);
}

.column2__box-txt a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: min(30/1200 * 100vw, 30px);
  translate: 0 -50%;
  width: min(46/1200 * 100vw, 46px);
  height: min(46/1200 * 100vw, 46px);
  background : url(img/top/white-right-arw.png) 0% 0% / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(15/1200 * 100vw, 15px) min(15/1200 * 100vw, 15px);
  background-position: center center;
  background-color: var(--base-black);
  border-radius: 50px;
}

@media screen and (max-width: 767px) {
  .column2__wrap {
    flex-wrap: wrap;
    gap: min(20/390 * 100vw, 20px);
  }

  .column2__wrap--mb80 {
    margin-bottom: min(60/390 * 100vw, 60px);
  }

  .column2__box{
    width: 100%;
  }

  .column2__box-img {
    margin-bottom: min(20/390 * 100vw, 20px);
  }

  .column2__box-txt a {
    padding: min(15/390 * 100vw, 15px) min(40/390 * 100vw, 40px)
      min(15/390 * 100vw, 15px) min(20/390 * 100vw, 20px);
    font-size: var(--fontsize14);
  }

  .column2__box-txt a::after {
    right: min(15/390 * 100vw, 15px);
    translate: 0 -50%;
    width: min(23/390 * 100vw, 23px);
    height: min(23/390 * 100vw, 23px);
    background-size: min(10/390 * 100vw, 10px) min(10/390 * 100vw, 10px);
  }
}

/* --------------------------------------------
animation
-----------------------------------------------*/

/*画像左から右に出るアニメーション
====================================*/
.bgLRextend{
  position: relative;
  animation: bgLRextendAnime 0.8s forwards cubic-bezier(0.86, 0, 0.07, 1);
}

@keyframes bgLRextendAnime {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  }
}

/*--------- オレンジ背景 --------*/
/* .bgLRextend::before {
  animation: bgLRextendAnime 1.3s forwards cubic-bezier(0.86, 0, 0.07, 1);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--base-orange);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 10;
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  60% {
    transform-origin: left;
    transform: scaleX(1);
  }
  60.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
} */

/*--------- 白背景 --------*/
/* .bgLRextend::after {
  animation: bgLRextendAnime2 1.3s forwards cubic-bezier(0.5, 0, 0.02, 1);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform-origin: left;
  transform: scaleX(1);
  z-index: 9;
}

@keyframes bgLRextendAnime2 {
  0% {
    transform-origin: left;
    transform: scaleX(1);
  }
  60% {
    transform-origin: left;
    transform: scaleX(1);
  }
  60.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
} */

/*フェードアニメーション
====================================*/
.fade-up {
  opacity: 0;
  animation: Up_Fade 0.8s ease-in-out forwards;
}

@keyframes Up_Fade {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-left {
  opacity: 0;
  animation: Right_Fade 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}

@keyframes Right_Fade {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------
drawer
-----------------------------------------------*/

/* エントリー
====================================*/
.main-visual__entry{
  position: fixed;
  bottom: 12%;
  right: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #e60012, #e77400);
  background-color: var(--base-orange);
  padding: min(35/1200 * 100vw, 35px) min(60/1200 * 100vw, 60px)
    min(35/1200 * 100vw, 35px);
  z-index: 105;
  overflow: hidden;
  box-shadow: 28px 28px 0 -10px #225686;
  transform: skewX(-30deg);
  transition: all 0.3s;
}

.main-visual__entry:hover{
  translate: 0 20px;
  box-shadow: 0 0 0 0 #225686;
  transition: all 0.3s;
  opacity: 1;
}

.main-visual__entry-txt{
  transform: skewX(30deg);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.main-visual__entry-en{
  font-size: var(--fontsize36);
  color: var(--base-white);
  font-weight: 600;
  font-family: Arial, Helvetica, "Liberation Sans", "Nimbus Sans L", sans-serif;
  line-height: 1.5;
}

.main-visual__entry-jp {
  font-size: var(--fontsize16);
  color: var(--base-white);
}

.main-visual__entry::after{
  content: "";
  position: absolute;
  bottom: -26px;
  left: -10px;
  background : url(img/top/entry-place.png) 0% 0% / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: min(133/1200 * 100vw, 133px) min(62/1200 * 100vw, 62px);
  width: min(133/1200 * 100vw, 133px);
  height: min(62/1200 * 100vw, 62px);
  transform: skewX(30deg);
}

@media screen and (max-width: 767px) {
  .main-visual__entry{
    /* display: none; */
    bottom: 100px;
    right: 0;
    transform-origin: right bottom;
    padding: min(10/390 * 100vw, 10px) min(30/390 * 100vw, 30px)
      min(10/390 * 100vw, 10px) min(20/390 * 100vw, 20px);
    box-shadow: 9px 12px 0 calc(-1 * min(5/390 * 100vw, 5px)) #225686;
  }

  .main-visual__entry-en {
    /* font-size: 3vw; */
    font-size: var(--fontsize18);
  }

  .main-visual__entry-jp {
    /* font-size: 1.6vw; */
    font-size: var(--fontsize12);
  }
}

/* トップスクロール
====================================*/
.top-scroll{
  position: relative;
  position: fixed;
  right: 1%;
  bottom: 34px;
  box-shadow: 5px 5px 15px 0px rgb(0, 0, 0, 0.3);
  z-index: 100;
  cursor: pointer;
  opacity: 0;
  transform: translateY(100px);
}

.top-scroll a{
  display: block;
  width: 60px;
  height: 60px;
  background-color: var(--base-white);
}

.top-scroll a::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background : url(img/common/orange-top-arw.png) 0% 0% / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: 22px 22px;
  width: 22px;
  height: 22px;
}

/*　上に上がる動き　*/

.top-scroll.UpMove {
  animation: UpAnime 0.8s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/

.top-scroll.DownMove {
  animation: DownAnime 0.8s;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}

@media screen and (max-width: 767px) {
  .top-scroll{
    right: 15px;
    bottom: 40px;
  }

  .top-scroll a{
    width: 40px;
    height: 40px;
    border-radius: 5px;
  }

  .top-scroll a::after{
    background-size: 17px 17px;
    width: 17px;
    height: 17px;
  }
}