@charset "utf-8";

/*======================================================================

　ラリーのトビラ
　
	[01] 基本・レイアウト
	[02] メインビジュアル
	[03] ラリーとは？
	[04] プロフィール
	[05] 激走！ラリーTVバナー
	[06] 梅本まどかのラリー日和
	[07] ルールのトビラ
	[08] 外部リンク
	[99] メディアクエリ

======================================================================*/



/*------------------------------------------------

	[01] 基本・レイアウト

------------------------------------------------*/

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

#wrapper { font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; width: 100%; min-width: 1000px; padding: 0; /*background: #fcf9ed;*/ }
.inr { width: 100%; /*max-width: 1000px;*/ margin: 0 auto; }
.vpc { display: inherit; }
.vsp { display: none; }
.flb { display:flex; flex-wrap: wrap; /*justify-content:center;*/ width: 100%; /*max-width: 1000px;*/ margin: 0 auto; }
p.article {font-size: 0.875rem; font-weight: 300; line-height: 1.8; color: #231815; }

/* フェード
---------------------------------*/
.scrollin { opacity: 0; transition: all .4s ease; }
.scrollin.show { opacity: 1; transform: none; }
.scr_lr { transform: translate(-1rem, 0); }
.scr_rl { transform: translate(1rem, 0); }
.scr_fadein { transform: translate(0, 0px); }
.scr_up1 { transform: translate(0, 1rem); transition: 0.8s 0s ease; }
.scr_up2 { transform: translate(0, 1rem); transition: 0.8s 0.2s ease; }
.scr_up3 { transform: translate(0, 1rem); transition: 0.8s 0.4s ease; }
.scr_up4 { transform: translate(0, 1rem); transition: 0.8s 0.6s ease; }
.scr_up5 { transform: translate(0, 1rem); transition: 0.8s 0.8s ease; }
.scr_up6 { transform: translate(0, 1rem); transition: 0.8s 1.0s ease; }
.scr_down { transform: translate(0, -1rem); }
.scr_scaleUp { transform: scale(.5); }
.scr_scaleDown { transform: scale(1.5); }
.scr_rotateL { transform: rotate(1rem); }
.scr_rotateR { transform: rotate(1rem); }


/* フッタ
---------------------------------*/
footer#common_foot { margin: 0 0 0; }
#footer img { vertical-align: top !important; }
#footer { width: 100%; padding: 0 0 10px; text-align: center; }
p#copyright { padding: 30px 0; font-size: 0.875rem; line-height: 1.8; color: #fff; }


/* 動画配信
---------------------------------*/
.btn_flex-even { display: flex; width: 94%; max-width: 940px; margin: 0 auto 60px; justify-content: center; }
.btn_flex-even > li { /*flex-basis: 100%;*/flex-basis: 32%; }
.btn_flex-even li a { display: block; padding: 0.3em; margin: 0 0.3em; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.btn_flex-even li img { display: block; width: 100%; max-width: 224px; height: auto; text-align: center; margin: 0 auto; }


/* SNSボタン */
section.snsbtn_box div.fb-like, section.snsbtn_box div.btn_twitter, section.snsbtn_box div.btn_line, section.snsbtn_box div.btn_friend {float: left;}
section.snsbtn_box { position: relative; margin: 0; padding: 0 0 20px; border-top: none; }
#sns_btbox img {vertical-align: top !important;}
.sns_btn {text-align: right;}
.sns_btn div, .sns_btn p{display: inline-block; vertical-align: top;}
.sns_btn div iframe{height: inherit !important; max-height: 30px;}
.sns_btn a.ssp{margin: 0px; padding: 0 0 0 10px; vertical-align: top; line-height: 0;}




/* リンク
---------------------------------*/
/*a, a > div	{ font-weight: 500; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; }
a:link		{ color: #0952a1; }
a:visited	{ color: #0952a1; }
a:hover		{ text-decoration: none; color: #0952a1; opacity: 0.7; }
a:active	{ text-decoration: none; }*/


/* 見出し
---------------------------------*/
#rallynotobira h2 { width: 100%; max-width: 1200px; /*margin: 0 auto -97px;*/ z-index: 3; position: relative; }
#rallynotobira h2 img { width: 100%; margin: 0; }
/*#rallynotobira #wrapper h3 { width: 94%; max-width: 940px; margin: 1em auto .5em; font-size: 1.875rem; text-align: center; }
#cnt_movie h3, #cnt_info h3, .box_read_tva h3 { position: relative; width: 100%; max-width: 330px; margin: 0 0 60px; padding: 0 0 10px; font-size: 3.6rem; color: #003c6c; letter-spacing: 0.09em; border-bottom: 3px solid #003c6c; }
#cnt_movie h3:before, #cnt_info h3:before, .box_read_tva h3:before { content: ""; display: block; position: absolute; height: 3px; bottom: -3px; width: 16%; left: 0%; background: #ff7b25; }*/
/*h4 { margin: 0 0 10px; font-size: 1.125rem; letter-spacing: 0.09em; }*/




/* 脚注
---------------------------------*/








/*------------------------------------------------

	[02] メインビジュアル

------------------------------------------------*/
#rallynotobira #main { position: relative; width: 100%; margin: 0 auto 0em; }



.main_rally { height: 600px; background: url(/rallynotobira/images/bg_main.jpg) 42% 100% / cover; }
.inr_main { width: 100%; max-width: 1000px; margin: 0 auto; z-index: 3; position: sticky; }
.inr_main.flb div.logo { width: 100%; }
/*.inr_main.flb div.inc_intro { width: calc(66% - 0px); margin: 100px 0 0 0; }*/
.line { position: relative; margin: 0; padding: 0; border-bottom: 6px solid #003c6c; }
.line:before { content: ""; display: block; position: absolute; height: 6px; bottom: -6px; width: 32%; left: 0%; background: #ff7b25; }
/*.dotted { position: absolute; margin: auto; z-index: 1; opacity: 0.2; width: 100%; height: 500px; background: url(/rallynotobira/images/dotted.png) ;}*/

p.title { margin: 10px 0; font-size: 4.0rem; font-weight: 600; color: #fff; text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; }
p.intro { margin: 14px 0; font-size: 1.0rem; line-height: 1.6; color: #fff; letter-spacing: 0.09em; text-align: justify; text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; }



.inr_main { width: 100%; max-width: 1000px; margin: 0 auto 0px; z-index: 3; position: sticky;}
.inr_main.flb div.logo { width: 34%; }
.inr_main.flb div.inc_intro { width: calc(66% - 0px); margin: 100px 0 0 0; }
.line { position: relative; margin: 0; padding: 0; border-bottom: 6px solid #003c6c; }
.line:before { content: ""; display: block; position: absolute; height: 6px; bottom: -6px; width: 32%; left: 0%; background: #ff7b25; }
/*.dotted { position: absolute; margin: auto; z-index: 1; opacity: 0.2; width: 100%; height: 500px; background: url(/Taiwan/images/dotted.png) ;}*/

p.title { margin: 10px 0; font-size: 4.0rem; font-weight: 600; color: #fff; text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; }
p.intro { margin: 14px 0; font-size: 1.0rem; line-height: 1.6; color: #fff; letter-spacing: 0.09em; text-align: justify; text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; }

.loopSlide1 { border-bottom: 3px solid #cb030b; position: relative; display: flex; width: calc(100vw - 15px); /*min-width: 1200px;*/ height: 480px; overflow: hidden; }
.loopSlide1 ul { padding: 0; /*width: 100vw;*/ display: flex; flex-shrink: 0; }
.loopSlide1 ul:first-child { animation: slide1 100s -50s linear infinite; }
.loopSlide1 ul:last-child { animation: slide2 100s linear infinite; }
.loopSlide1 ul li { display: inline-block; /*width: 242px;*/ min-width: 270px; margin: 0; list-style: none; text-align: center; }
.loopSlide1 ul li img { display: block; width: 100%; height: auto; }

@keyframes slide1 { 0% { transform: translateX(100%); }
  to { transform: translateX(-100%); } }
@keyframes slide2 { 0% { transform: translateX(0); }
  to { transform: translateX(-200%); } }



/*------------------------------------------------

	[03] ラリーとは？

------------------------------------------------*/
.txt_outline { width: 100%; max-width: 720px; position: absolute; margin: auto; right: 0; left: 0; bottom: 10px; }
.txt_outline img { width: 100%; }


/*------------------------------------------------

	[04] プロフィール

------------------------------------------------*/
#cnt_profile { width: 100%; margin: 0 auto 0; padding: 0; background: #eee; border-top: 3px solid #cb030b; }
#cnt_profile .inr_cnt { width: 96%; max-width: 1920px; margin: 0 auto; padding: 0 0 6em; }
.intro { width: 90%; margin: 0 auto; background: #cb030b; border-radius: 0 0 6px 6px; }
.intro div { margin: 0 auto; text-align: center; }
.intro div p { padding: .5em; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: #fff; }

#profile { margin: 1em 0 0; border-bottom: 1px solid #cb030b; align-items: center; justify-content: center; background: url(/rallynotobira/images/img_name.png) 50% 18% / auto no-repeat; }
#profile .img_umemoto { order: 1; width: 37%; max-width: 480px; align-self: flex-end; }
#profile .txt_umemoto { order: 2; width: 60%; padding-right: 3%; }
#profile .img_umemoto img { width: 100%; }
#profile .txt_umemoto p { font-size: 0.875rem; line-height: 1.8; text-align: justify; }
#profile .txt_umemoto p.name { margin: 4em 0 .5em; font-size: 2.25rem; font-weight: 600; line-height: 1.6; color: #cb030b; }
#profile .txt_umemoto p.name span.role { display: block; font-size: 1.4rem; line-height: 1.0; }


/*------------------------------------------------

	[05] 激走！ラリーTVバナー

------------------------------------------------*/
.bnr { width: 100%; padding: 1em 0; text-align: center; background: #ccc; }
.bnr img { width: 96%; max-width: 480px; margin: 0 auto; }
.bnr p { width: 100%; max-width: 480px; margin: .75em auto 0; font-size: 0.875rem; font-weight: 600; }
.bnr p span { display: block; }




/*------------------------------------------------

	[06] 梅本まどかのラリー日和

------------------------------------------------*/
#cnt_column { width: 100%; margin: 0 auto 0; padding: 0; background: #eee; border-top: 3px solid #cb030b; }
#cnt_column .inr_cnt { width: 96%; max-width: 1920px; margin: 0 auto; padding: 0 0 6em; }
.column div.inr01 { width: 50%; text-align: center; }
.column div.inr01 img { width: 100%; max-width: 460px; }
.column div.inr02 { width: calc(50% - 2em); margin: 0 0 0 2em; }
.column div.inr02 p.cc02 { margin: 0 0 1em; padding: .5em 1em; font-size: 1.125rem; font-weight: 600; color: #fff; background: #cb030b; }
.column div.inr02 p.txt_info { font-size: 0.875rem; line-height: 1.8; letter-spacing: 0.09em; text-align: justify; }
#column01 { margin: 0 0 0em; align-items: center; }

/*　見出しアニメ */
.img_tit { position: relative; overflow: hidden; }

/* 最初は透明 → 帯の後にフェードイン */
.img_tit img { display: block; width: 100%; opacity: 0; transition: opacity 0.8s ease; /* ← フェードイン用 */ z-index: 1; }

/* 帯（疑似要素） */
.img_tit::before { content: "";
  position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background: #cb030b; transform: translateX(-100%); }

/* 帯アニメーション開始 */
.img_tit.active::before { animation: band-slide 1s cubic-bezier(.22,.95,.36,1) forwards; }

/* 帯終了後に画像フェードイン（遅延を使う） */
.img_tit.active img { opacity: 1; transition-delay: .2s; /* ← “帯(1s)”が終わってから画像が表示 */ }

/* 帯のアニメ：左→覆う→右へ抜ける */
@keyframes band-slide{
  0%   { transform: translateX(-100%); }
  40%  { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

/*　読むテレビ愛知 */
.read_tva_category, .read_tva_program { display: none; }
#read_tva ul { list-style: none; margin: 0; padding: 0; }
#read_tva ul li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid #ccc; }
#read_tva ul li:last-child { border-bottom: none; }
.img_read_tva { flex: 0 0 140px; }
.img_read_tva img { width: 140px; height: auto; margin-right: 1em; border-radius: 3px; display: block; }
.txt_read_tva { flex: 1; }
.read_tva_title { font-size: 0.975rem; font-weight: 600; margin: 0 0 8px 0; line-height: 1.5; }
.read_tva_date { font-size: 0.75rem; color: #777; margin: 0; }

#read_tva ul li a { display: flex; text-decoration: none; color: #333; }

/*------------------------------------------------

	[07] ルールのトビラ

------------------------------------------------*/
#cnt_rule { width: 100%; margin: 0 auto; padding: 0; background: #eee; border-top: 3px solid #cb030b; }
#cnt_rule .inr_cnt { width: 96%; max-width: 1920px; margin: 0 auto; padding: 0 0 6em; }

h3.img_tit { width: 100%; max-width: 480px; margin: 0 auto 2em; }
h3.img_tit img { width: 100%; }
p.txt_sub { font-size: 0.875rem; text-align: center; margin: 0 auto 2em; }
p.txt_sub span { display: block; font-weight: 600; }
div.ico_rule { width: 150px; margin: 2em auto 3em; border-radius: 50%; background: #cb030b; }
div.ico_rule span {  }
div.ico_rule span img { width: 100%; border-radius: 50%; }

.tab { width: 80px; margin: 0 auto 20px; padding: 0 0 2px; border-radius: 0 0 6px 6px; background: #cb030b; }
.rule { margin: 0 auto; }
.rule div.inr01 { width: 70%; }
.rule div.inr01 img { width: 100%; }
.rule div.inr02 { width: calc(30% - 2em); margin: 0 0 0 2em; }
.rule div.inr02 p.cc02 { margin: 0 0 1em; padding: .5em 1em; font-size: 1.125rem; font-weight: 600; color: #fff; background: #cb030b; }
.rule div.inr02 p.txt_info { font-size: 0.875rem; line-height: 1.8; letter-spacing: 0.09em; text-align: justify; }

#rule01.rule div.inr01,
#rule03.rule div.inr01 { order: 2; }
#rule01.rule div.inr02,
#rule03.rule div.inr02 { order: 1; margin: 0 2em 0 0; }

#rule01, #rule02 { margin: 0 0 3em; }



/*------------------------------------------------

	[08] 外部リンク

------------------------------------------------*/
#cnt_link { width: 100%; margin: 0 auto; padding: 6rem 0; }




/*------------------------------------------------

	[99] メディアクエリ

------------------------------------------------*/
@media screen and (min-width: 769px) {

.loopSlide1 { min-width: 1200px; }
.intro { max-width: 520px; }

}


@media screen and (max-width: 768px) {

/* [01] 基本・レイアウト
---------------------------------*/
#resNav { z-index: 9999; }
.bg-subnav { display: none; }
header { min-width: 150px; }
#wrapper { min-width:200px; }
.inr { width: 100%; max-width: none; padding-top: 0px; }
.vpc { display: none; }
.vsp { display: inherit; }

/* 見出し */
#rallynotobira h2 { width: 100%; margin: 0 auto -40px; z-index: 3; position: relative; }
#rallynotobira h2 img { width: 100%; /*max-width: 200px;*/ margin: 0; }



/* [02] メインビジュアル
---------------------------------*/
.main_rally { /*position: absolute; top: 51%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index: 2;*/ }
.main_rally { /*top: 50px;*/ }
/*.bg_main { min-width: auto; height: 550px; background: url(/rallynotobira/images/bg_main.jpg) 90% 50% / cover; }*/
.main_rally { height: 400px; background: url(/rallynotobira/images/bg_main_sp.jpg) 50% 100% / cover no-repeat; }
#rallynotobira #main { /*margin: 8px 0 0;*/ }
/*#rallynotobira #main > .flb { width: 100%; margin: 0 auto; animation: fadeIn 3s ease 0s 1 normal; -webkit-animation: fadeIn 3s ease 0s 1 normal; }
.inr_main { width: 100%; margin: 0 auto 0; justify-content: center; }
.inr_main.flb div.logo { width: auto; }
.inr_main.flb div.inc_intro { width: 100%; max-width: 636px; margin: 0 auto; }
.inr_main.flb div.inc_intro img { width: 100%; }*/


p.title { width: 100%; margin: 0 auto 10px; font-size: 1.3125rem; font-weight: 600; color: #fff; }
p.intro { width: 100%; margin: 0 auto 20px; font-size: 0.875rem; line-height: 1.4; color: #fff; letter-spacing: 0.05em; }

.loopSlide1 { width: calc(100vw - 0px); }


/* [03] ラリーとは？
---------------------------------*/


/* [04] プロフィール
---------------------------------*/
#profile { border-bottom: none; /*background: url(/rallynotobira/images/img_name.png) 50% 18% / 90% no-repeat;*/ background: none; }
#profile .img_umemoto { order: 1; width: 100%; max-width: none; border-bottom: 1px solid #cb030b; text-align: center; }
#profile .txt_umemoto { order: 2; width: 100%; padding-right: 0%; }
#profile .img_umemoto img { max-width: 360px; }
#profile .txt_umemoto p { padding: 0 4% 2em; }
#profile .txt_umemoto p.name { margin: 0; padding: 1em 4% 0; font-size: 1.25rem; font-weight: 600; line-height: 1.6; color: #cb030b; }
#profile .txt_umemoto p.name span.role { display: block; font-size: 0.875rem; line-height: 1.0; }


/* [05] 激走！ラリーTVバナー
---------------------------------*/


/* [06] 梅本まどかのラリー日和
---------------------------------*/
#cnt_column .inr_cnt { padding: 0 0 1em; }
.column div.inr01 { width: 100%; margin: 0 0 1em; }
.column div.inr02 { width: 100%; margin: 0; }
#column01 { margin: 0 0 1em; }


/* [07] ルールのトビラ
---------------------------------*/
#cnt_rule .inr_cnt { padding: 0 0 1em; }

p.txt_detail { margin: 1em auto; font-size: 0.875rem; color: #fff; font-weight: 600; line-height: 1.8; text-align: justify; }
p.txt_sub { font-size: 0.975rem; text-align: left; display: grid; justify-content: center; width: 96%; margin: 0 auto 2em; }
.rule div.inr01 { width: 100%; }
.rule div.inr02 { width: 100%; margin: 0; }
.rule div.inr02 p.cc02 { margin: 0 0 1em; padding: .5em 1em; font-size: 1.125rem; }
.rule div.inr02 p.txt_info { width: 96%; margin: 0 auto; font-size: 1rem; line-height: 1.8; }

#rule01.rule div.inr01,
#rule03.rule div.inr01 { order: 1; }
#rule01.rule div.inr02,
#rule03.rule div.inr02 { order: 2; margin: 0; }

#rule01, #rule02 { margin: 0 0 3em; }



/* [08] 外部リンク
---------------------------------*/




}



@media screen and (max-width: 480px) {






}