@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: 'LINE';
	src: url('../fonts/LINESeedSans_W_XBd.woff2') format('woff');
}

 @font-face {
font-family: digital;
src: url(../fonts/digital_mono.woff) format('woff');
}





/* ルートレベルで変数を定義 */ :root {
  /* フォントサイズ */
  --base-font-size: 16px;
  --small-font-size: 12px;
  --little-font-size: 14px;	
  --tablet-font-size: 1.2rem;
  --retina-font-size: 16px;
--hundred-font-size: 100px;	
  --4k-font-size: 18px;
  /* カラー */
  --text-color: #333;
  --link-color: #333;
  --contents-link-color: red;
  --base-color: #690009;
  --red: red;
	--orange:#ee7800;
	--gold: #ad7c1e;
  --gray: #abb8c3;
--violet: #a40b5d;	
  --brown: #663300;
  --white: white;
--yellow:#ffff00;	
  --black: #333;
 
  /* SNSカラー */
  --fb-color: #1877f2;
  --x-color: #0f1419;
  --insta-color: #CF2E92;
  --yt-color: #DA1725;
  --line-color: #00B900;
	

  /* 間隔 */
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;	
  --space-40: 40px;
  --space-60: 60px;
	
	/* %幅サイズ*/
  --space-10p: 10%;
  --space-20p: 20%;
  --space-30p: 30%;	
  --space-40p: 40%;
  --space-46p: 46%;
 --space-50p: 50%;	
  --space-60p: 60%;
	
	
  /* コンテンツ幅とパディング */
  --max-content-width: 1200px;
  --content-padding-small: 20px;
  --content-padding-medium: clamp(1.25rem, -0.179rem + 7.14vw, 2.5rem);
  --content-padding-large: 40px;
  --content-padding-xlarge: 60px;
  /* カラム間隔 */
  --gap-2: 2%;
  --gap-5: 5%;
  /* トランジション */
  --transition-fast: 0.25s;
  --transition-slow: 0.5s;
}
/* リセットと基本設定 */
* {
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  color: var(--text-color);
  font-size: var(--base-font-size);
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
	
}

body{
 font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
	font-feature-settings:“palt”;
		 scroll-behavior: smooth;
	
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}




blockquote {
	quotes: none;
}

blockquote:before, blockquote:after {
	content: '';
	content: none;
}

del {
	text-decoration: line-through;
}


table {
	border-collapse: collapse;
	border-spacing: 0;
}

address{
	font-style: normal;
}


address p{
	text-decoration: none;
}




article{
	overflow-x: hidden;
}


/* a設定 */
a img {
  border: none;
}
a img:hover {
  opacity: 0.7;
  transition: var(--transition-slow);
}
a {
  color: var(--link-color);
  text-decoration: none;
  transition: var(--transition-fast);
}
.contents a {
  color: var(--contents-link-color);
}

/* 数字フォント*/

.num-Bebas{
	font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
	line-height: 1em;
}

/* 文字詰め設定 */
.txt-c {
  text-align: center;
}
.txt-r {
  text-align: right;
}

.pc--c-tbsp--l{
	text-align: center!important;
}

@media only screen and (max-width: 980px)  {
	.pc--c-tbsp--l{
	text-align: left!important;
}
}


/* 文字カラー設定 */
.txt-color{
  color: var(--txt-color)!important;
}
.base-color {
  color: var(--base-color);
}
.red {
  color: var(--red);
}
.violet {
  color: var(--violet);
}

.yellow{
	color: var(--yellow);
}
.gray {
  color: var(--gray);
}

.gold {
  color: var(--gold);
}

.brown {
  color: var(--brown);
}
.white {
  color: var(--white);
}
/* 背景カラー設定 */
.base-bg {
  background-color: var(--base-bg);
}
.brown-bg {
  background-color: var(--brown-bg);
}
.line-bg {
  background-color: var(--line-bg);
}
.gold-bg {
  background: var(--gold-bg);
}
.black-bg {
  background: var(--black-bg);
}
.gray-bg {
  background: var(--gray)!important;
}


.pale-gray-bg {
	background: var(--pale-gray);
}

.violet-bg{
	background: var(--violet);
}


.lemon-bg{
	background: var(--lemon-bg);
}

.moss-green-bg{
	background: var(--moss-green);
}

/* デバイス表示設定 */
.pc-only, .pc-tb-only {
  display: block;
}
.tb-sp-only, .sp-only {
  display: none;
}
/* マージン */
.mt10 {
  margin-top: var(--space-10);
}
.mt20 {
  margin-top: var(--space-20);
}
.mt40 {
  margin-top: var(--space-40);
}
.mt60 {
  margin-top: var(--space-60);
}
.mb10 {
  margin-bottom: var(--space-10)!important;
}
.mb20 {
  margin-bottom: var(--space-20)!important;
}

.mb30 {
  margin-bottom: var(--space-30)!important;
}

.mb40 {
  margin-bottom: var(--space-40)!important;
}
.mb60 {
  margin-bottom: var(--space-60)!important;
}
/* パディング */
.p60 {
  padding: var(--space-60) 0;
}
.p40 {
  padding: var(--space-40) 0;
}

.p20 {
  padding: var(--space-20) 0;
}
.p10 {
  padding: var(--space-10) 0;
}



.pt10 {
  padding-top: var(--space-10);
}
.pt20 {
  padding-top: var(--space-20);
}
.pt40 {
  padding-top: var(--space-40);
}
.pt60 {
  padding-top: var(--space-60);
}
.pb10 {
  padding-bottom: var(--space-10);
}
.pb20 {
  padding-bottom: var(--space-20);
}
.pb40 {
  padding-bottom: var(--space-40);
}
.pb60 {
  padding-bottom: var(--space-60);
}



/* メインビュー */
    .main-view-wrapper {
      position: relative;
      width: 100vw;
      height: 100vh;
      background: #ff8b55;
      overflow: hidden;
    }

    .main-view {
      position: relative;
      max-width: 1920px;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
    }

    .person {
      position: absolute;
      right: -3%;
      width: 48%;
      top: 12vh;
    }

    .person img {
      width: 100%;
      height: auto;
      display: block;
    }

    .main-view-catch-wrapper {
      color: white;
      width: 50%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .main-view-catch {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .main-view-catch h1 {
      font-size: clamp(6.875rem, 2.708rem + 5.56vw, 9.375rem);
      font-family: "arya-double", sans-serif;
      font-weight: 400;
      font-style: normal;
      white-space: nowrap;
      transform-origin: 60% 50%; /* "R"の位置を基準に拡大 */
    }

    .main-view-catch h2 {
      font-size: clamp(1.875rem, 0.833rem + 1.39vw, 2.5rem);
    }

    /* 次のセクション */
    .next-section {
      width: 100vw;
      height: 100vh;
      background: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      opacity: 0; /* 初期状態で非表示 */
      position: relative;
      z-index: 2;
		background: rgba(0,36,255,1.00);
    }

    .next-content {
      text-align: center;
    }

    /* メディアクエリ */
    @media screen and (max-width: 1199px) {
      .main-view {
        max-width: 100%;
        width: 100%;
      }

      .person {
        right: -20%;
        width: 100%;
        top: 10vh;
      }

      .main-view-catch h2 {
        font-size: clamp(2.25rem, 3.67vw, 2.75rem);
      }
    }

    @media screen and (max-width: 1023px) {
      .main-view-catch h1 {
        font-size: clamp(4rem, -0.068rem + 10.85vw, 6.875rem);
      }

      .main-view-catch h2 {
        font-size: clamp(1.875rem, 0.833rem + 1.39vw, 2.5rem);
      }
    }

    @media screen and (max-width: 980px) {
      .main-view-catch-wrapper {
        width: 90%;
      }

      .main-view-catch h2 {
        font-size: clamp(1.313rem, 0.424rem + 2.37vw, 1.875rem);
      }
    }

    @media screen and (max-width: 599px) {
      .main-view-catch h1 {
        white-space: wrap;
        line-height: 1.0em;
        font-size: clamp(2.875rem, 1.589rem + 6.43vw, 4rem);
        transform-origin: 50% 50%; /* モバイルでは中央を基準 */
      }

      .main-view-catch h2 {
        font-size: clamp(1.125rem, 0.911rem + 1.07vw, 1.313rem);
      }

      .person {
        right: -30%;
        width: 130%;
        top: 10vh;
      }
    }