@charset "UTF-8";
/*! Writen  by SCSS */
main {
  padding-top: 0;
  overflow: hidden; }
  @media screen and (max-width: 1200px) {
    main {
      padding-top: 0; } }
  @media screen and (max-width: 768px) {
    main {
      padding-top: 0; } }

.header {
  background: rgba(255, 255, 255, 0);
  transition: all 0.3s ease-in-out 0s; }
  body.scrolled .header {
    background: white; }

.headerWrap .head_logo a .bk {
  opacity: 0; }
  body.scrolled .headerWrap .head_logo a .bk {
    opacity: 1; }
.headerWrap .head_logo a .wh {
  opacity: 1; }
  body.scrolled .headerWrap .head_logo a .wh {
    opacity: 0; }

.headerWrap .btnBlock .head_btnOther li a {
  color: #fff; }
  body.scrolled .headerWrap .btnBlock .head_btnOther li a {
    color: #575757; }

.headerWrap .btnBlock .head_btnOther li a .icon .bk {
  opacity: 0; }
  body.scrolled .headerWrap .btnBlock .head_btnOther li a .icon .bk {
    opacity: 1; }
.headerWrap .btnBlock .head_btnOther li a .icon .wh {
  opacity: 1; }
  body.scrolled .headerWrap .btnBlock .head_btnOther li a .icon .wh {
    opacity: 0; }

/*.sec01,
.sec02 {
	position: relative;
	.anq {
		position: absolute;
		top: -100px;
		@include mq($br_tb){
			top: -50px;
		}
	}
}*/
/*.sec_main {
    position: relative;
	background: #000;
    .mbg0 {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
		 opacity: 0.3;
			@include mq($br_tb){
				height: 100vh;
				height: 100svh;
				aspect-ratio: auto;
			}
        video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            z-index: 1;
        }
    }
    .main_copy{
        position: absolute;
        inset: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 5;
        img {
            width: calc(358%/16);
				@include mq($br_tb){
					width: calc(358% / 7);
				}
        }
		 opacity: 0;
		 transform: translateX(-60px);
		 transition: all 1s ease-in-out 0s;
		 body.loaded & {
			 opacity: 1;
			 transform: translateX(0);
		 }
    }
}

.read {
    font-size:clamp_gm(14,1316,25);
	letter-spacing: 0.1em;
	font-weight: 600;
	color: #444;
	@include mq($br_tb){
		font-size: calc(17vw / 3.9);
	}
}
.read1 {
    font-size:clamp_gm(14,1316,22);
	letter-spacing: 0.1em;
	font-weight: 400;
	color: #444;
	@include mq($br_tb){
		font-size: calc(15vw / 3.9);
	}
}

.en_ttl {
    font-size:clamp_gm(15,1316,36);
	color: #b3b3b4;
	margin-bottom: 1em;
	letter-spacing: 0.05em;
	@include mq($br_tb){
		font-size: calc(20vw / 3.9);
	}
}
*/
.inner {
  max-width: 1316px; }

.sec01 {
  padding-top: clamp(40px, 5.84%, 70px);
  padding-bottom: clamp(40px, 5.84%, 70px); }

.sec01 {
  position: relative; }
  .sec01 .sec_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(1000%/16); }
    @media screen and (max-width: 480px) {
      .sec01 .sec_bg {
        width: 100%; } }
  .sec01 .inner {
    position: relative;
    z-index: 2; }
  .sec01 .box11 {
    max-width: 1220px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 480px) {
      .sec01 .box11 {
        display: block; } }
    .sec01 .box11 .fig {
      width: calc(742% / 12.2); }
      @media screen and (max-width: 480px) {
        .sec01 .box11 .fig {
          width: calc(100% + 40px);
          margin-inline: -20px;
          text-align: center;
          margin-bottom: 30px; } }
    .sec01 .box11 .img {
      width: calc(415% / 12.2);
      display: flex;
      flex-direction: column;
      gap: 20px; }
      @media screen and (max-width: 480px) {
        .sec01 .box11 .img {
          width: 100%;
          text-align: center;
          margin-inline: auto; } }
  .sec01 .fun_wrap .fun_ttl {
    font-feature-settings: "palt";
    letter-spacing: 0.08em;
    color: #333333;
    font-size: clamp(12px, calc(18vw / 13.5), 18px);
    font-size: clamp(12px, calc(17vw / 13.5), 17px);
    display: flex;
    align-items: center;
    transition: all 2s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
    opacity: 0;
    transform: translateX(40px);
    will-change: opacity,transform; }
    .sec01 .fun_wrap .fun_ttl .l {
      font-size: 130%; }
    .sec01 .fun_wrap .fun_ttl::after {
      content: "";
      flex: 1;
      margin-left: 15px;
      height: 1px;
      background: #333333; }
    .sec01 .fun_wrap .fun_ttl::after {
      transition: all 1s ease-in-out 0.5s;
      flex: 0; }
    .sec01 .fun_wrap .fun_ttl.p-view {
      opacity: 1;
      transform: translateX(0px); }
      .sec01 .fun_wrap .fun_ttl.p-view::after {
        flex: 1; }
  .sec01 .fun_wrap .fun {
    display: flex;
    flex-wrap: wrap;
    column-gap: calc(40% / 13.16);
    row-gap: 45px; }
    @media screen and (max-width: 768px) {
      .sec01 .fun_wrap .fun {
        row-gap: 25px; } }
    .sec01 .fun_wrap .fun li {
      width: calc(412% / 13.16); }
      @media screen and (max-width: 768px) {
        .sec01 .fun_wrap .fun li {
          width: 48%; } }
      .sec01 .fun_wrap .fun li .txt {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 1px #bababa;
        padding-bottom: 10px; }
        @media screen and (max-width: 480px) {
          .sec01 .fun_wrap .fun li .txt {
            display: block; } }
        .sec01 .fun_wrap .fun li .txt .t1 {
          font-size: clamp(12px, calc(21vw / 13.56), 21px);
          font-size: clamp(12px, calc(17vw / 13.56), 17px);
          font-weight: 500;
          line-height: 1.1;
          font-feature-settings: "palt";
          letter-spacing: 0.08em;
          color: #333333; }
          @media screen and (max-width: 480px) {
            .sec01 .fun_wrap .fun li .txt .t1 {
              margin-bottom: 0.2em;
              font-size: calc(12vw / 3.9);
              letter-spacing: 0.03em; } }
          .sec01 .fun_wrap .fun li .txt .t1.ls {
            font-weight: 500; }
          .sec01 .fun_wrap .fun li .txt .t1 .l {
            font-size: 130%;
            font-weight: 500; }
        .sec01 .fun_wrap .fun li .txt .t2 {
          text-align: right;
          font-size: clamp(12px, calc(24vw / 13.56), 24px);
          font-size: clamp(12px, calc(20vw / 13.56), 20px);
          font-weight: 500;
          line-height: 1.1;
          font-feature-settings: "palt";
          letter-spacing: 0.08em;
          color: #333333; }
          @media screen and (max-width: 480px) {
            .sec01 .fun_wrap .fun li .txt .t2 {
              font-size: calc(14vw / 3.9); } }
          .sec01 .fun_wrap .fun li .txt .t2.ls {
            font-weight: 500; }
          .sec01 .fun_wrap .fun li .txt .t2 .c {
            color: #920d22;
            font-weight: 600; }
          .sec01 .fun_wrap .fun li .txt .t2 .l {
            font-size: 140%;
            font-weight: 600; }
          .sec01 .fun_wrap .fun li .txt .t2 .s {
            font-size: 65%;
            font-weight: 500; }
            @media screen and (max-width: 480px) {
              .sec01 .fun_wrap .fun li .txt .t2 .s {
                display: inline-block; } }
      .sec01 .fun_wrap .fun li .t3 {
        margin-top: 10px;
        font-size: clamp(10px, calc(12vw / 13.56), 12px);
        line-height: 1.4;
        font-feature-settings: "palt";
        letter-spacing: -0.03em;
        color: #333333; }
  .sec01 .sym_wrap {
    margin-top: calc(70% / 13.16);
    padding-top: calc(70% / 13.16);
    border-top: solid 1px #bababa; }
    .sec01 .sym_wrap .en_ttl {
      padding-left: 0.3em; }

.sec02 {
  padding: calc(60% / 16) 0;
  background-color: #cfbfab;
  position: relative; }
  @media screen and (max-width: 480px) {
    .sec02 {
      padding-top: 50px;
      padding-bottom: 30px; } }
  .sec02::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url("../image/access/sec02_bg.png") top center/100% auto no-repeat; }
    @media screen and (max-width: 480px) {
      .sec02::after {
        width: 180%; } }
  .sec02 .inner {
    max-width: 1340px;
    position: relative;
    z-index: 5; }
    .sec02 .inner .en_ttl {
      color: #444; }
  .sec02 .box21 {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center; }
    @media screen and (max-width: 480px) {
      .sec02 .box21 {
        display: block; } }
    .sec02 .box21 .fig {
      width: calc(875% / 13.4); }
      @media screen and (max-width: 480px) {
        .sec02 .box21 .fig {
          width: calc(100% + 40px);
          margin-inline: -20px;
          text-align: center;
          margin-bottom: 30px; } }
    .sec02 .box21 .img {
      width: calc(410% / 13.4);
      display: flex;
      flex-direction: column;
      gap: 20px; }
      @media screen and (max-width: 480px) {
        .sec02 .box21 .img {
          width: 100%;
          text-align: center;
          margin-inline: auto; } }

#rosenSearch {
  /* iOSでのデフォルトスタイルをリセット */
  text-align: center;
  /* form */ }
  #rosenSearch input[type="submit"],
  #rosenSearch input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer; }
  #rosenSearch input[type="submit"]::-webkit-search-decoration,
  #rosenSearch input[type="button"]::-webkit-search-decoration {
    display: none; }
  #rosenSearch input[type="submit"]::focus,
  #rosenSearch input[type="button"]::focus {
    outline-offset: -2px; }
  #rosenSearch .bigTypo {
    font-size: clamp(32px, 7vw, 140px);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 80px; }
    @media screen and (max-width: 768px) {
      #rosenSearch .bigTypo {
        margin-bottom: 40px; } }
    @media screen and (max-width: 480px) {
      #rosenSearch .bigTypo {
        display: inline-block;
        text-align: left; } }
    #rosenSearch .bigTypo span {
      display: block;
      font-size: 24px; }
      @media screen and (max-width: 480px) {
        #rosenSearch .bigTypo span {
          font-size: 10px; } }
  #rosenSearch .cap_c {
    margin-top: 40px;
    width: 100%; }
    @media screen and (max-width: 480px) {
      #rosenSearch .cap_c {
        margin-top: 20px;
        text-align: left !important; }
        #rosenSearch .cap_c br {
          display: none; } }
  #rosenSearch #form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; }
    @media screen and (max-width: 480px) {
      #rosenSearch #form {
        flex-direction: column; } }
  #rosenSearch .formWrap {
    width: 63%;
    width: 58%;
    display: flex;
    justify-content: center; }
    @media screen and (max-width: 1400px) {
      #rosenSearch .formWrap {
        width: 63%; } }
    @media screen and (max-width: 768px) {
      #rosenSearch .formWrap {
        width: 100%;
        margin-bottom: 40px;
        margin-bottom: 20px; } }
    #rosenSearch .formWrap #start,
    #rosenSearch .formWrap #goal {
      padding: 0 0 0 40px;
      font-size: clamp(11px, calc(15vw / 13.5), 15px); }
      #rosenSearch .formWrap #start input,
      #rosenSearch .formWrap #goal input {
        margin: 0 1em;
        padding: 10px 15px;
        font-size: clamp(12px, calc(17vw / 13.5), 17px);
        font-family: "游明朝", "Yu Mincho", YuMincho, "游明朝体", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif !important;
        font-weight: 400;
        text-align: center;
        border: none;
        background: #fff;
        border: 1px solid rgba(37, 46, 49, 0.4); }
        #rosenSearch .formWrap #start input:focus,
        #rosenSearch .formWrap #goal input:focus {
          outline: 1px #000 solid; }
        #rosenSearch .formWrap #start input:placeholder-shown,
        #rosenSearch .formWrap #goal input:placeholder-shown {
          color: #ddd; }
    #rosenSearch .formWrap #start {
      padding: 0 40px 0 0;
      position: relative; }
      #rosenSearch .formWrap #start:after {
        content: "→";
        font-size: clamp(11px, calc(15vw / 13.5), 15px);
        font-weight: 100;
        position: absolute;
        top: .5em;
        right: 0;
        transform: translate(50%, -50%);
        top: 50%; }
      #rosenSearch .formWrap #start select {
        margin: 0 10px; }
    @media screen and (max-width: 768px) {
      #rosenSearch .formWrap {
        display: block; }
        #rosenSearch .formWrap #start {
          margin-bottom: 30px; }
          #rosenSearch .formWrap #start:after {
            content: "↓";
            top: auto;
            top: 110%;
            right: 0;
            left: 0;
            margin: auto;
            transform: translate(0); } }
    @media screen and (max-width: 480px) {
      #rosenSearch .formWrap #start,
      #rosenSearch .formWrap #goal {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center; }
        #rosenSearch .formWrap #start input,
        #rosenSearch .formWrap #goal input {
          max-width: 240px;
          margin: 0 1em;
          padding: 10px 15px; }
          #rosenSearch .formWrap #start input:focus,
          #rosenSearch .formWrap #goal input:focus {
            outline: 1px #000 solid; }
          #rosenSearch .formWrap #start input:placeholder-shown,
          #rosenSearch .formWrap #goal input:placeholder-shown {
            color: #ddd; } }
  #rosenSearch .inputWrap {
    position: relative;
    width: 25%;
    transition: all 0.3s; }
    @media screen and (max-width: 768px) {
      #rosenSearch .inputWrap {
        width: 75%;
        margin: 0 auto; } }
    #rosenSearch .inputWrap input[type="button"] {
      display: block;
      width: 100%;
      padding: 15px;
      font-family: "游明朝", "Yu Mincho", YuMincho, "游明朝体", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif !important;
      font-size: clamp(11px, calc(15vw / 13.5), 15px);
      color: #fff;
      background: #4e4541;
      transition: all 0.3s;
      cursor: pointer; }
    #rosenSearch .inputWrap:hover:after {
      color: #000; }
    #rosenSearch .inputWrap:hover input[type="button"] {
      color: #fff;
      background: #4e4541; }

/*# sourceMappingURL=access.css.map */