@charset "UTF-8";

/*
 * File Name: style.css
 * Description: infit moviesite
 * Last Update: 2026/02/07
 */


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* モダンリセット */
*, *::before, *::after {
box-sizing: border-box; /* サイズ計算を楽にする（超重要） */
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
margin: 0; /* ブラウザ独自の余白を消す */
}

img {
max-width: 100%;
display: block; /* 画像の下の隙間を消す */
}

ul, ol {
list-style: none; /* リストの「・」を消す（必要に応じて） */
padding: 0;
margin: 0;
}

a {
text-decoration: none; /* 下線を消す */
color: inherit; /* 文字色を親要素に合わせる */
}


.mt-120{
margin-top:120px;
}

.mt-110{
margin-top:110px;
}

.mt-100{
margin-top:100px;
}

.mt-90{
margin-top:90px;
}

.mt-80{
margin-top:80px;
}

.mt-70{
margin-top:70px;
}

.mt-60{
margin-top:60px;
}

.mt-50{
margin-top:50px;
}

.mt-40{
margin-top:40px;
}

/* 共通 */

body{
font-size:16px;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight:400;
line-height: 1.75;
color:#000;
}

section{
padding:80px 0;
position: relative;
}

section#sec01{
padding:0;
}

.section-title h2{
font-size:5rem;
font-weight:400;
color:#888888;
}

.section-title h2 span{
font-size:2rem;
font-weight:600;
color:#000;
display:block;
}

.sp-only,.sp-991-only,.sp-1199-only,.sm-br{
display:none;
}

[id] {
  scroll-margin-top: 80px;
}

/* swiper */

.mySwiper {
  position: relative;
  padding-bottom: 60px; /* 下に余白を作る */
}

.mySwiper .swiper-pagination {
  bottom: 0px !important; /* 下に固定 */
}

/* ドットの基本スタイル */
.mySwiper .swiper-pagination-bullet {
  width: 14px; 
  height: 14px;
  background: #ccc;
  opacity: 1;
  margin: 0 6px !important;
}

/* アクティブ時のドット */
.mySwiper .swiper-pagination-bullet-active {
  background: #B3201A;
}


.mySwiper .swiper-wrapper a{
display:block;
}

.mySwiper .swiper-wrapper a img{
transition: transform 0.3s ease,
border-radius 0.3s;
}

.mySwiper .swiper-wrapper a:hover img {
transform: scale(0.7);
border-radius: 30px;
}


.mySwiper .swiper-wrapper a h2{
font-size:1.2rem;
margin:10px 0;
}

.mySwiper .swiper-wrapper a img{
border-radius:10px;
}

/* color */

.bg-gray::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #F1F1F3;
z-index: -2;
}


/* ================================
 menu
 ================================ */

.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0 20px;
z-index: 1000;
}
/* 全体 */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 40px;
border-radius: 100px;
margin:0 auto;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.8);
width:95%;
}

/* PC メニュー横並び */
.menu {
display: flex;
gap: 40px;
list-style: none;
margin-right:45px;
}

.nav-contact{
display: flex;
gap: 15px;
list-style: none;
}

.menu-wrapper{
display: flex;
gap: 20px;
align-items: center;
}

/* ホバー時の演出（少し明るくする） */
.btn-contact:hover {
opacity: 0.85;
}

.menu li a {
text-decoration: none;
color: #000;
font-weight:600;
font-size:0.9rem;
}

/* ハンバーガー初期状態（2本線） */
.hamburger {
width: 50px;
height: 15px;
display: none; /* PCでは非表示 */
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}

.hamburger span {
display: block;
height: 2px;
background: #000;
border-radius: 3px;
transition: 0.4s;
}

/* タブレット以下でハンバーガー表示 */
@media (max-width: 1199.98px) {
 /* 黒のオーバーレイ */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.9);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease;
z-index: 9;
}

.overlay.active {
opacity: 0.8;
visibility: visible;
}

/* ハンバーガー表示 */
.hamburger {
display: flex;
z-index: 10; /* オーバーレイより上 */
position:absolute;
right:10%;
}

/* メニュー本体 */
.menu {
position: fixed;
top: 80px;
left: 20px;
flex-direction: column;
gap: 20px;
padding: 25px;
opacity: 0;
transform: translateY(-10px);
visibility: hidden;
transition: opacity 0.4s ease, transform 0.4s ease;
z-index: 10;
}

/* 表示時 */
.menu.active {
opacity: 1;
transform: translateY(0);
visibility: visible;
}

/* リンク文字を白に */
.menu li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}

}

/* ✕ アニメーション */
.hamburger.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
background:#FFF;
}

.hamburger.active span:nth-child(2) {
transform: translateY(-8px) rotate(-45deg);
background:#FFF;
}

/* #########################
 * FVスライダー
 * ######################### */

/* ===== FV専用リセット ===== */

.fv {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #000;
}

.fv-inner {
  position: relative;
  height: 100%;
}

.fv-slide {
  position: absolute;
  inset: 0;
}

.fv-visual {
  position: absolute;
  inset: 0;
  transform-origin: center center;
	overflow: hidden;
}

.fv-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* 下部固定 */
.fv-content {
  position: absolute;
  bottom: 8%;
  left: 8%;
	right:8%;
  z-index: 10;
  overflow: hidden;
}

.fv-title {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
}

/* カード全体 */
.card-box {
background: #fff;
border-radius: 12px;
padding: 20px;
transition: background 0.3s ease;
cursor: pointer;
}

/* hover時：背景色変更 */
.card-box:hover {
background: #333; /* ← 文字を白にするなら濃い背景が合う */
}

/* 画像 */
.card-box img {
width: 100%;
border-radius: 12px;
transition: border-radius 0.3s ease;
}

/* hover時：画像の角だけさらに丸くする（拡大なし） */
.card-box:hover img {
border-radius: 200px;
}

/* テキスト（タイトル・説明文） */
.card-box h3,
.card-box p {
color: #333;
transition: color 0.3s ease;
}

/* hover時：文字色を白に */
.card-box:hover h3,
.card-box:hover p {
color: #fff;
}

/* btn */

.btn-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}

.btn1 {
display: block;
width: 200px;
height: 78px;
line-height: 78px;
font-size: 24px;
text-decoration: none;
background-color: #f15a4a;
color: #fff;
text-align: center;
cursor: pointer;
-webkit-transition: 0.5s all;
transition: 0.5s all;
}

.btn1:hover {
background-color: #fff;
border: 2px solid #f15a4a;
color: #f15a4a;
}

.btn2{
transition: color 0.3s ease;

}

.btn2:hover {
color: #E6001A;
}


.btn3.slide1 {
color: #000;
overflow: hidden;
position: relative;
z-index: 1;
}

.btn3 {
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
width:100%;
padding: 15px 40px;
text-align: center;
border: 3px solid;
background: 
linear-gradient(#fff, #fff) padding-box, 
linear-gradient(to right, #6d1d33 0%, #be3c2e 50%, #f19666 100%) border-box;
/* 3. 透明な枠線を作って、そこにグラデーションを表示させる */
border: 3px solid transparent;
background-color: #fff;
}
.btn3.slide1.skew::after {
transform: skewY(-20deg) scale(1, 0);
height: 140px;
}
.btn3.slide1::after {
background: #711E32;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
transform: scale(0, 1);
transform-origin: left top;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
z-index: -1;
}
.btn3.slide1.skew:hover::after {
transform: skewY(-10deg) scale(1, 1);
}
.btn3:hover{
color:#FFF;
}

.btn3.slide1 img{
display: inline;
width: 81px;
vertical-align: -4px;
padding-right: 15px;
}

.btn4 {
/* インライン要素をブロック化して幅や高さを有効にする */
display: inline-block;

/* 1. 背景：左から右への3色グラデーション */
background: linear-gradient(90deg, rgba(113,31,54,1) 0%, rgba(199,68,51,1) 50%, rgba(244,165,118,1) 100%);
color: #ffffff;
text-decoration: none;
font-weight: bold;
padding: 17px 45px;
border-radius: 50px;
text-align: center;
background-size: 200% 100%;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.btn4:hover{
background-position: 100% 0;
}

/* ================================
 header
 ================================ */

.logo img{
width:97px;
}

.nav-contact .btn3,.nav-contact .btn4{
font-size:0.9rem;
padding:10px 40px;
}

.nav-contact .btn4{
padding:12px 40px;
}

/* ================================
 sec02
 ================================ */

#sec02{
overflow: hidden;
}

#sec02::before {
content: "";
position: absolute;
top: 0;
right: -10%;
width: 27%;
height: 100%;
background-color: #b3201a;
transform: skewX(56deg);
z-index: -1;
}

/* ================================
 sec03
 ================================ */
 
#sec03.section{
padding-top:30px;
}

#sec03 table{
font-size:1.2rem;
}

#sec03 table th{
width:30%;
padding:10px;
font-weight:normal;
}

#sec03 table td{
width:70%;
padding:10px;
}

#sec03 table span{
width:100px;
font-size:0.8rem;
color:#FFF;
text-align:center;
padding:2px 0;
display:inline-block;
margin-left:20px;
border-radius:50px;
}

#sec03 table span.cat{
background:#858586;
}

#sec03 table span.important{
background:#E6001A;
}


/* ================================
 sec04
 ================================ */

#sec04 img.bg-img{
position: absolute;
right: 0;
top: 0;
width: 45%;
z-index:-1;
height: 839px;
width:auto;
}

#sec04 .section-title h2{
font-size:3rem;
color:#000;
font-weight:800;
line-height:1.4;
}

#sec04 .section-title h2 rt{
margin-bottom:-0.9rem;
}

#sec04 p{
font-size:1.2rem;
}

#sec04 a.btn4{
font-size:1.4rem;
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}


/* ================================
 sec05
 ================================ */

#sec05::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
background: #F1F1F3;
z-index: -2;
}

#sec05 img.bg-img{
position: absolute;
right: 0;
top: 80px;
width: 100%!important;
z-index:-1;
height: auto;
}

#sec05 .container{
margin-top:390px;
color:#FFF;
}

.contens-title{
display:flex;
align-items: center;
}

.contens-title p{
font-size:5rem;
padding-right:20px;
border-right:solid 10px #FFF;
}

.contens-title-text{
padding-left:20px;
}

.contens-title-text p{
font-size:1.2rem;
padding-right:0;
border:none;
padding-top:15px;
}

.sec05-01-contents-wrapper ul li{
padding:30px;
color:#000;
background:#FFF;
border-radius:20px;
text-align:center;
}

.sec05-01-contents-wrapper ul li p:first-of-type{
font-size:1.4rem;
font-weight:600;
}

.sec05-01-contents-wrapper ul li p:first-of-type span{
font-size:1.8rem;
}

.sec05-01-icon-bottom img{
width:40px;
display:inline-block;
margin-right:20px;
}

.sec05-01-icon-bottom p{
margin-bottom:10px;
}


/* ================================
 sec06
 ================================ */

#sec06{
overflow: hidden;
--skew-angle: 17deg;
}

#sec06::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 300px;
background-color: #B8251E;
transform: translateY(-50%) skewY(var(--skew-angle));
z-index: -1;
}

#sec06 h3{
font-size:1.4rem;
}

#sec06 h3 span{
font-size:0.8rem;
display:block;
color:red;
padding-top:3px;
}

#sec06 .team-text{
padding:20px;
background:#FFF;
height:100%;
}

#sec06 .team-text p{
padding-top:20px;
font-size: 0.95rem;
}

#sec06 .row > div{
min-height:610px;
}

#sec06 .team-wrapper{
height:100%;
}

.team-wrapper{
overflow:hidden;
border-radius:20px;
}

/* ================================
 sec07
 ================================ */
 
#sec07{
overflow: hidden;
}

#sec07 .row{
margin-left:0;
margin-right:0;
}

#sec07 .row > *{
padding-left:0;
padding-right:0;
}

#sec07 img.bg-img{
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index:-1;
}

.fea-wrapper{
background: rgba(255, 255, 255, 0.8);
padding:40px 120px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;

}

#sec07 .container-fluid{
margin-top:400px;
padding:0;
}

#sec07 .contens-title p{
font-size:5rem;
padding-right:20px;
border-right:solid 10px #B2221B;
}

#sec07 .contens-title-text p{
font-size:1.2rem;
padding-right:0;
border:none;
padding-top:15px;
}

.justify-content-end .fea-wrapper{
border-radius:0;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}

#sec07 .contens-title-text h3{
line-height:1.5;
}

p.sub-title{
font-size:1.2rem;
}

/* ================================
 sec08
 ================================ */

#sec08 p{
font-size:1.8rem;
font-weight:600;
}

#sec08 p span{
font-size:1.4rem;
display:block;
}

#sec08 ul li a{
font-size:1.4rem;
}


/* ================================
 footer
 ================================ */

footer{
padding:80px 0 40px;
position: relative;
}

footer h3{
font-size:1rem;
margin-bottom:10px;
}

footer ul {
list-style: none;
padding-left: 0;
}

footer ul li {
position: relative;
padding-left: 20px; /* 画像の分だけ余白 */
}

footer ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em; /* 縦位置調整 */
width: 12px;/* ← 好きなサイズに変更 */
height: 12px; /* ← 好きなサイズに変更 */
background-image: url('../img/arrow-right.svg');
background-size: contain;
background-repeat: no-repeat;
}

footer .top-com img{
display:inline-block;
width:4.3%;
padding-right: 3px;
}

footer .copyright p{
text-align:center;
font-size:0.8rem;
}

/* ================================
 - Responsive design
 ================================ */
 
@media (max-width: 1599px) {
#sec04 img.bg-img{
opacity: 0.2;
}
#sec05 .container{
margin-top:17vw;
}
#sec07 .container-fluid{
margin-top:20vw;
}
}
 
/* 〜1399px（xl 未満） */
@media (max-width: 1399.98px) {
.sec05-01-contents-wrapper img{
max-width:35vw;
}
.contens-title.mt-120{
margin-top:4vw;
}
}

/* 〜1199px（lg 未満） */
@media (max-width: 1199.98px) {
.pc-1199-only{
display:none;
}
.sp-1199-only{
display:block;
}
#sec03 table span{
margin-left:0;
}
#sec03 table th{
width:15%;
}
#sec05{
height:auto!important;
background-image: url("../img/sp-bg-sec05.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: 120px;
}
#sec05 .container{
margin-top:0;
}
#sec07{
height:auto!important;
background-image: url("../img/sp-bg-sec07.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#sec07 .container-fluid{
margin-top:0;
}
.fea-wrapper{
padding:40px 80px;
}
}

/* 〜991px（md 未満） */
@media (max-width: 991.98px) {
.pc-991-only{
display:none;
}
.sp-991-only{
display:block;
}
#sec05 .sec05-01-contents-wrapper{
display:block!important;
}
#sec05 .sec05-01-contents-wrapper p{
margin-top:20px;
}
#sec05 .sec05-01-contents-wrapper ul li p{
margin-top:0px;
}
#sec05 .sec05-01-contents-wrapper img{
max-width:100%;
}

#sec05 .sec05-01-contents-bottom{
display: flex !important;
flex-direction: column-reverse; /* ← これで画像が上になる */
}
#sec08 ul li a{
font-size:1rem;
}
footer .row > div{
margin-top:20px;
}
footer .top-com img{
width:3%;
}
}

/* 〜767px（sm 未満） */
@media (max-width: 767.98px) {
.pc-only{
display:none;
}
.sp-only{
display:block;
}
.fv{
height: 100svh;
}
.nav{
width:100%;
padding: 10px 25px;
}
.logo img {
width:65px;
}
.hamburger {
width: 43px;
height: 13px;
}
.hamburger.active span:nth-child(1) {
transform: translateY(3px) rotate(45deg);
}
#sec04 .section-title h2{
font-size: 7vw;
}
#sec04 .section-title h2 rt {
margin-bottom: -0.5rem;
}
#sec03 table th,#sec03 table td{
display:block;
width:100%;
}
#sec03 table th{
padding-bottom:0;
}
#sec03 table span {
margin-left: 15px;
}
#sec02{
padding-bottom:20px;
}
.section-title h2{
font-size:11vw;
}
#sec04 img.bg-img{
height:auto;
}
a.btn4,a.btn3{
font-size:0.9rem!important;
}
.contens-title.mt-120{
margin-top:90px;
}
#sec06 h3{
font-size:1.2rem;
}
#sec06 h3 span,#sec06 .team-text p{
font-size:0.8rem;
}
#sec06 .row > div{
min-height:auto;
}
#sec07 .contens-title-text h3{
font-size:1.2rem;
}
#sec02::before{
right: -40%;
width: 50%;
}
#sec05{
margin-top:0;
}
.fv-title {
font-size:4.5vw;
}
footer .copyright{
margin-bottom:40px;
}
.sp-fix{
position: fixed;
bottom:0;
left: 50%;
transform: translateX(-50%);
width:100%;
z-index:100;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.sp-fix.show{
opacity: 1;
pointer-events: auto;		
}
.sp-fix ul li{
width:50%;
}
.sp-fix ul li a{
font-size:3.6vw!important;
}
.sp-fix ul li:first-child a{
padding: 10px 40px;
line-height:1.5;
width: 100%;
}
.sp-fix ul li:last-child a{
line-height:1.5;
padding: 12px 40px;
width: 100%;
}
}

/* 〜575px（xs） */
@media (max-width: 575.98px) {
.hamburger{
right:13vw;
}
.slide-text{
left:3%;
font-size:5vw;
}
#sec03 table,#sec04 p,.contens-title-text p{
font-size:1rem;
}
#sec05 .contens-title p{
border:none;
}
#sec05 .contens-title-text{
border-left:solid 5px #FFF;
}
#sec07 .contens-title p{
border-right: solid 5px #B2221B;
}
#sec04 .btn-warpper{
text-align:center;
}
.sec05-01-contents-wrapper .px-5{
padding:0!important;
}
.fea-wrapper {
padding: 20px 20px;
}
#sec08 ul.d-flex{
display:block!important;
}
#sec08 ul li a{
margin: 0 auto;
width:300px;
}
#sec08 ul li:first-child{
margin-bottom:20px;
}
.sec05-01-icon-bottom img {
width: 27px;
margin-right: 10px;
}
#sec08 p{
font-size:1.2rem;
}
#sec08 p span{
font-size:1rem;
}
.sm-br{
display:block;
}
p{
font-size:0.9rem;
}
}