@charset "UTF-8";
/* @import "reset5.css"; */
@import "animate.css";

/* !Links */
a { cursor: pointer }
a:link { color: #171717; text-decoration: none; }
a:visited { color: #171717; text-decoration: none }
a:hover { color: #a7a7a7; text-decoration: none; }
a:active { color: #000; text-decoration: none }
a.nb:link { border-bottom: none }

.contents { color:#171717; line-height:1; padding: 0; position: relative; text-align: center; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, noto-sans-cjk-jp, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif !important; font-size: 15px; letter-spacing: 0.08em; line-height: 1; font-weight: 400; -webkit-font-smoothing: antialiased;
; margin-top: 72px; padding: 0 0 11.6vw; z-index: 0 }

#brand { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, noto-sans-cjk-jp, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif !important; }
#brand .sec { position: relative; padding: 9.8vw 11.6vw 0 }
#brand .sec .cont { text-align: left }
#brand .sec .cont h3 { font-size: 24px; letter-spacing: 0.12em; margin-bottom: 1em }
#brand .sec p { font-size: 16px; line-height: 2em }
#brand .fd { position: relative; top: 100px; opacity: 0 }
#brand #sec01 {  }
#brand #sec01 .gra { position: absolute; left: 0; top: 9.8vw; z-index: 0 }
#brand #sec01 .gra-tit { float: left; width: 50%; min-height: 40vw; text-align: left }
#brand #sec01 .gra-tit h3 { position: relative; padding: 16.5vw 0 0; font-size: 42px; letter-spacing: 0.1em; color: #fff }
#brand #sec01 .gra-tit p { position: relative; margin: 1em 0 0; color: #fff }
#brand #sec01 .cont { float: right; width: 38%; }
#brand #sec01 .cont .mark { margin: 20px 0 60px }
#brand #sec02 {  }
#brand #sec02 .gra { position: absolute; right: 0; top: 9.8vw; z-index: 0 }
#brand #sec02 .gra-tit { float: right; width: 40%; margin-right: 5%; min-height: 34vw; text-align: right }
#brand #sec02 .gra-tit h3 { position: relative; padding: 15vw 0 0; font-size: 42px; letter-spacing: 0.1em; color: #fff }
#brand #sec02 .cont { float: left; width: 50%; }
#brand #sec02 .cont .cont-inner { padding: 9.8vw 40px 0 8.7vw }
#brand #sec03 {  }
#brand #sec03 .gra { position: absolute; left: 11.6vw; top: 9.8vw; z-index: 0 }
#brand #sec03 .gra-tit { float: left; width: 50%; min-height: 40vw; text-align: left }
#brand #sec03 .gra-tit h3 { position: relative; padding: 11.5vw 0 0 4.4vw; font-size: 42px; letter-spacing: 0.1em; color: #fff }
#brand #sec03 .gra-tit p { position: relative; margin: 1em 0 0 4.4vw; color: #fff }
#brand #sec03 .cont { float: left; width: 50%; }
#brand #sec03 .cont li { margin-bottom: 10px; display: block; border-radius: 12px; }
#brand #sec03 .cont li a { display: block; position: relative; }
#brand #sec03 .cont li a .int-tit { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(255,255,255,0.8)  }
#brand #sec03 .cont li a .int-tit h4 { position: relative; padding: 20px 30px 20px 50px; display: block }
#brand #sec03 .cont li a .int-tit h4 .arw { position: absolute; left: 30px; top: 50%; margin-top: -3px }
#brand #playmovie { padding: 9.8vw 0 0; cursor: pointer }
#brand #sec04 {  }
#brand #sec04 .gra { position: absolute; right: 5.8vw; top: 9.8vw; z-index: 0 }
#brand #sec04 .gra-tit { float: right; width: 30%; margin-right: 5%; min-height: 34vw; text-align: right }
#brand #sec04 .gra-tit h3 { position: relative; padding: 15vw 0 0; font-size: 42px; letter-spacing: 0.1em; color: #fff }
#brand #sec04 .cont { float: left; width: 62%; }
#brand #sec04 .cont .des { position: relative; padding-bottom: 50px; margin-bottom: 50px; border-bottom: solid 1px #dedede }
#brand #sec04 .cont .des .pic { position: absolute; left: 0; top: 0; height: 13.2vw }
#brand #sec04 .cont .des .des-inner { width: 56%; margin-left: 40%; min-height: 13.2vw  }
#brand #sec04 .cont .des .des-inner h4 { font-size: 16px; color: #f9452d; margin-bottom: 1.6em; line-height: 1.6 }
#brand #sec04 .cont .des .des-inner p { font-size: 14px; margin-bottom: 1em }
#brand #sec04 .cont .des:last-child { border: none }
#brand #sec04 .ex img { float: left }

#modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10002; display: none }
#modal .mov { width: 960px; height: 560px; position: absolute; left: 50%; top: 50%; margin: -280px 0 0 -480px }


#brand .interview-main { position: relative; padding: 0 5.8vw; z-index: 10 }
#brand .interview-main .im-inner { position: relative; padding: 0 280px 0 0 }
#brand .interview-main .im-inner h2 { position: absolute; right: 0; top: 50%; width: 350px; margin-top: -175px }
#brand #int01 .gra { position: absolute; left: 0; top: -11.6vw; z-index: 0 }
#brand #int01 .cont { position: relative; width: 50%; margin-left: 50%; }
#brand #int02 .gra { position: absolute; right: 0; top: 9.8vw; z-index: 0 }
#brand #int02 .cont { position: relative; width: 50%; }
#brand #int03 .gra { position: absolute; left: 11.6vw; top: 0; z-index: 0 }
#brand #int03 .cont { position: relative; width: 50%; margin-left: 50% }
.back-btn { width: 33.33%; margin: 0 auto; padding-top: 80px }
.back-btn a { position: relative; display: block; padding: 1em; background: #f7f7f7; border-radius: 20px; box-shadow: 1px 1px 1px 1px #efefef; }
.back-btn a .arw { position: absolute; left: 20px; top: 50%; margin-top: -3px }


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

	.contents { font-size: 13px; letter-spacing: 0.08em; margin: 50px auto 0; }
	
	#brand .sec { padding: 30vw 5.3vw 0 }
	#brand .sec .cont h3 { font-size: 24px; letter-spacing: 0.12em; margin-bottom: 1em }
	#brand .sec p { font-size: 15px; line-height: 2em }
	#brand .fd { position: relative; top: 50px; opacity: 0 }
	#brand #sec01 .gra { position: absolute; left: 0; top: 30vw; ; width:72%; z-index: 0 }
	#brand #sec01 .gra-tit { float: none; width: auto; min-height: 72vw; padding: 0 13.3vw; margin-bottom: 40px; text-align: left; }
	#brand #sec01 .gra-tit h3 { position: relative; padding: 30vw 0 0; font-size: 30px; letter-spacing: 0.1em; color: #fff }
	#brand #sec01 .gra-tit p { position: relative; font-size: 14px; margin: 1em 0 0; color: #fff }
	#brand #sec01 .cont { float: none; width: 100%; }
	#brand #sec01 .cont .mark { width: 50%; margin: 0 25% 40px }
	#brand #sec02 .gra { position: absolute; right: 0; top: 30vw; width: 80%; z-index: 0 }
	#brand #sec02 .gra-tit { float: none; width: 50%; margin-right: 0; margin-left: 50%; margin-bottom: 40px; min-height: 62vw; text-align: left }
	#brand #sec02 .gra-tit h3 { position: relative; padding: 26.6vw 0 0; font-size: 30px; letter-spacing: 0.1em; color: #fff }
	#brand #sec02 .cont { float: none; width: 100%; }
	#brand #sec02 .cont .cont-inner { padding: 0 }
	#brand #sec03 .gra { position: absolute; left: 0; top: 30vw; width: 70%; z-index: 0 }
	#brand #sec03 .gra-tit { float: left; width: auto; min-height: 70vw; padding: 0 13.3vw; margin-bottom: 40px; text-align: left }
	#brand #sec03 .gra-tit h3 { position: relative; padding: 30vw 0 0; font-size: 30px; letter-spacing: 0.1em; color: #fff }
	#brand #sec03 .gra-tit p { position: relative; font-size: 14px; margin: 1em 0 0; color: #fff }
	#brand #sec03 .cont { float: none; width: 100%; }
	#brand #sec03 .cont li { margin-bottom: 30px; display: block; border-radius: 12px; }
	#brand #sec03 .cont li a { display: block; position: relative; }
	#brand #sec03 .cont li a .int-tit { position: relative; left: inherit; bottom: inherit; width: 100%; background: none }
	#brand #sec03 .cont li a .int-tit h4 { position: relative; padding: 10px 0 10px 20px; display: block }
	#brand #sec03 .cont li a .int-tit h4 .arw { position: absolute; left: 0; top: 50%; margin-top: -3px }
	#brand #playmovie { padding: 20vw 0 0 }
	#brand #sec04 .gra { position: absolute; right: 0; top: 30vw; width: 55%; z-index: 0 }
	#brand #sec04 .gra-tit { float: none; width: auto; margin-right: 0; padding: 0 10vw; min-height: 60vw; margin-bottom: 40px; text-align: right }
	#brand #sec04 .gra-tit h3 { position: relative; padding: 26vw 0 0; font-size: 30px; letter-spacing: 0.1em; color: #fff }
	#brand #sec04 .cont { float: none; width: 100%; }
	#brand #sec04 .cont .des { position: relative; padding-bottom: 40px; margin-bottom: 40px; border-bottom: solid 1px #dedede; text-align: center }
	#brand #sec04 .cont .des .pic { position: relative; left: inherit; top: inherit; height: 50vw; margin: 0 auto; }
	#brand #sec04 .cont .des .des-inner { width: 100%; margin-left: 0; min-height: inherit; text-align: left }
	#brand #sec04 .cont .des .des-inner h4 { font-size: 16px; color: #f9452d; margin: 1.6em 0; line-height: 1.6 }
	#brand #sec04 .cont .des .des-inner p { font-size: 14px; margin-bottom: 1em }
	#brand #sec04 .cont .des .des-inner p:last-child { margin-bottom: 0 } 
	#brand #sec04 .cont .des:last-child { border: none }
	#brand #sec04 .ex img { float: none; width: 100% }
	
	#modal .mov { width: 100%; height: 56.25vw; position: absolute; left: 0; top: 50%; margin: -28.125vw 0 0 }
	#modal .mov iframe { width: 100%; height: 56.25vw; }
	
	#brand .interview-main { padding: 0; }
	#brand .interview-main .im-inner { padding: 0 }
	#brand .interview-main .im-inner h2 { position: absolute; right: 50%; top: auto; bottom: -110px; width: 220px; margin-top: 0; margin-right: -110px }
	#brand #int01 .cont h3, #brand #int02 .cont h3, #brand #int03 .cont h3 { font-size: 20px; letter-spacing: 0; margin-bottom: 1em }
	#brand #int01 { padding-bottom: 40vw; padding-top: 40vw }
	#brand #int01 .gra { position: absolute; left: 0; top: auto; bottom: 0; }
	#brand #int01 .cont { position: relative; width: 100%; margin-left: 0; margin-bottom: 30px }
	#brand #int02 { padding-bottom: 32vw; padding-top: 11.6vw }
	#brand #int02 .gra { position: absolute; right: 0; top: auto; bottom: 0; width: 40vw }
	#brand #int02 .cont { position: relative; width: 100%; margin-bottom: 30px }
	#brand #int03 { padding-top: 11.6vw; text-align: left }
	#brand #int03 .gra { position: relative; left: inherit; top: inherit; width: 30% }
	#brand #int03 .cont { position: relative; width: 100%; margin-left: 0; margin-bottom: 30px  }
	.back-btn { width: 80%; margin: 0 auto; padding-top: 2em}
	.back-btn a { position: relative; display: block; padding: 1em; background: #f7f7f7; border-radius: 20px; box-shadow: 1px 1px 1px 1px #efefef; text-align: center }
	.back-btn a .arw { position: absolute; left: 20px; top: 50%; margin-top: -3px }
	
}