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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');

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

    reset

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box;}
body, table, input, textarea, select, option {font-family: "Noto Sans JP", Serif;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; }

img{vertical-align:middle; width:100%; height:auto;}

html,body{height: 100%;}

body{
position: relative;
font-size:14px;
color:#fff !important;
font-weight: 300;
background-color: #000 !important;
line-height: 1.7;
}

a,
a:hover,
a img,
a:hover img,
li,
li:hover,
a::after,
a:hover::after,
a::before,
a:hover::before,
input,
input:hover{-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}

a:link {text-decoration:none; color:#fff;}
a:visited {text-decoration:none; color:#fff;}
a:hover{opacity: .8;}
a:hover img{opacity:0.8;}

p{margin:0; padding:0;}
h1,h2,h3,h4,h5{font-weight:normal; margin:0; padding:0; position: relative; width: 100%;}
td,li,dt,dd{position: relative;}

.inner{margin:0 auto; position:relative; max-width:1340px; padding-left: 20px; padding-right: 20px;}

table{border-collapse:collapse; width:100%;}
td{padding: 5px; border: #fff solid 1px;}
td.title{ width: 20%;}
td.title2{ width: 30%;}

@media only screen and (max-width:840px) {
td.title{ width: 10%;}
td.title2{ width:20%;}
.SPblock{display: block;}
}

.ul_num li{ list-style: decimal; margin-left: 20px;}

.ul01 li{padding: 5px 0 5px 15px; position: relative;}
.ul01 li::before{position: absolute; content: ''; border-radius:100%; top: 1em; left: .5em; z-index: 2; width: 3px; height: 3px; background: rgba(95, 0, 0, 1);}

.ul_memo li{margin-left: 20px; font-size: 80%; padding: 5px 0; position: relative;}
.ul_memo li::before{content: '※'; position: absolute; top: 5px; left: -15px;}

.dl01 dt{margin: 20px 0 5px 0; color:#5d6a94; text-shadow: 1px 1px #fff, 2px 2px rgba(0, 0, 0, 0.2); font-size: 120%;}
.dl01 dd{margin:0 0 5px 5px;}

.ThemeColor{color: #C1B01D}




/* == section == */

section{position:relative;}
section .inner{position:relative; padding-top: 120px; padding-bottom: 120px;}
article{margin-bottom: 50px; position: relative;}


/* == heading == */
.heading1{font-size: 3rem; letter-spacing: 0.05em; text-align: center; font-family: Montserrat; font-weight: 600; margin-bottom: 60px;}
.heading2{font-size: 2rem; letter-spacing: 0.05em; font-family: Montserrat; font-weight: 600; margin-bottom: 30px;}
@media only screen and (max-width:840px) {
.heading1{font-size: 2rem; margin-bottom: 40px;}
.heading2{font-size: 1.8rem;}
}

.header{position: fixed; top: 0; left: 0; width: 100%; min-height: 50px; background: rgba(255,255,255,.8); z-index: 10;}
.header .inner{padding-top: 0px; padding-bottom: 10px; display: flex; justify-content: space-between;}
.header h1{font-size: .7rem; background: #fff; text-align: center; letter-spacing: .2em; color:#000;}

/* == ヘッダー白背景 
.header{position: fixed; top: 0; left: 0; width: 100%; min-height: 50px; background: rgba(255,255,255,.8); z-index: 10;}
.header .inner{padding-top: 0px; padding-bottom: 10px; display: flex; justify-content: space-between;}
.header h1{font-size: .7rem; background: #fff; text-align: center; letter-spacing: .2em; color:#000;}
.header h1{font-size: .7rem; background: #000; text-align: center; letter-spacing: .2em;}
== */

/* == 黒背景 
.header{position: fixed; top: 0; left: 0; width: 100%; min-height: 50px; background: rgba(0,0,0,.8); z-index: 10;}
.header .inner{padding-top: 0px; padding-bottom: 10px; display: flex; justify-content: space-between;}
.header h1{font-size: .7rem; background: #000; text-align: center; letter-spacing: .2em;}
== */

.header .LogoArea{width: 220px; padding-top: 10px;}

.header .NavArea ul{display: flex; justify-content: flex-end;}
.header .NavArea ul li{margin-left: 30px;}
.header .NavArea ul li:first-child{margin-left: 0px;}

.header .NavArea ul.SnsArea{font-size: 1.4rem; margin-bottom: 5px;}
.header .NavArea ul.Nav{font-size: 1rem; border-top: #C1B01D solid 1px; padding-top: 5px; font-family: "Cabin"; letter-spacing: .1em;}

.header .NavArea a{color: #848484;}
.header .NavArea a:link,
.header .NavArea a:visited{color:#848484;}
.header .NavArea a:hover{opacity: 1; color: #000;}

.header .NavArea ul.SnsArea .Youtube a:hover{color: #D90003;}
.header .NavArea ul.SnsArea .Insta a:hover{
background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;}

@media only screen and (max-width:840px) {
.header .LogoArea{width: 150px; padding-top: 10px; margin: 0 auto;}
.header h1{font-size: .65rem;}
.header .NavArea{display: none;}
}

.bg-slider{position: relative; width: 100%; height: 100vh; overflow: hidden;}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2.0s ease-in-out; /* 2秒かけてフェード */
    z-index: 1;
}

/* アクティブな時だけ表示 */
.bg-layer.active {
    opacity: 1;
}

.bg-slider .ScrollArea{width: 100%; height: 100%; position: relative;}


a.Scroll{position: absolute; right: 25px; bottom: 25px; padding-bottom: 80px; text-align: center; display: inline-block; font-size: .8rem; z-index: 10;}
a.Scroll:hover{text-decoration: none;}
a.Scroll::before{content: ""; position: absolute; left: 50%; bottom: 0; border-left: #fff solid .5px; width: .5px; height: 70px;}
a.Scroll::after{content: ""; position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 100%; left: 50%; top: 0; transform: translate(-50%,0); animation:ScrollBall 3s both; animation-iteration-count: infinite;}
@keyframes ScrollBall {
0% {top:0%; opacity: 0;}
30%{opacity: .7;}
70%{opacity: .7;}
100%{top:100%; opacity: 0;}
}

section.TopCaption .inner{min-height: 700px;}
section.TopCaption .TopPhoto{position: absolute; bottom: 0; left: 5%; width: 350px;}
section.TopCaption .TopPhoto span.Copy{position: absolute; bottom: 10px;; left: 10%;}
section.TopCaption .TxtArea{padding-left: 35%; position: relative; z-index: 2;}

section.TopCaption .Heading{font-size:3rem; font-family: Montserrat; font-weight: 600; position:relative; letter-spacing: .2em; margin-bottom: 50px; line-height: 1.6;}
section.TopCaption .Heading span.Sub{font-size:1.4rem; display: block; border-top: #fff solid 1px; padding-top: 10px;}

section.TopCaption ul.CaptionPhoto{display: flex; justify-content: space-between; width: 80%; position: absolute; bottom: 40px; right: 0;}
section.TopCaption ul.CaptionPhoto li{width: 24%;}
section.TopCaption ul.CaptionPhoto li img{border-radius: 100%; border: #494949 solid 5px;}

@media only screen and (max-width:840px) {
section.TopCaption .inner{min-height: 500px;}
section.TopCaption .TopPhoto{left: 3%; width: 250px;}
section.TopCaption .TxtArea{padding-left: 30%;}

section.TopCaption .Heading{font-size:2rem; margin-bottom: 20px;}
section.TopCaption .Heading span.Sub{font-size:1.2rem;}

}

@media only screen and (min-width:601px) {
section.TopCaption .TopPhotoSp{display: none;}
}
@media only screen and (max-width:600px) {
section.TopCaption .inner{min-height: 100px;}
section.TopCaption .TopPhoto{display: none;}
section.TopCaption .TopPhotoSp{display: block; padding: 0 15% 0px; margin-bottom: 60px; position: relative;}
section.TopCaption .TopPhotoSp span.Copy{position: absolute; bottom: 0px;; right: 10%;}
section.TopCaption .TxtArea{padding-left: 0%; margin-bottom: 100px;}
section.TopCaption ul.CaptionPhoto{width: 100%; position: relative;}
}


section.News{background: rgba(255,255,255,.1)}
section.News .inner{max-width: 900px; padding-top: 100px; padding-bottom: 100px;}

ul.NewsList li{border-bottom: #B4B4B4 solid 1px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 40px 0;}
ul.NewsList li:last-child{border-bottom: #B4B4B4 solid 0px;}
ul.NewsList li .ImgArea{width: 15%}
ul.NewsList li .TxtArea{width: 75%}
ul.NewsList li .NewsHeader{margin-bottom: 20px; font-size: 12px; font-weight: 300; line-height: 19.07px;}
ul.NewsList li .NewsHeader .Day{font-size: 11px; display: block;}
ul.NewsList li .NewsHeader .Tag{font-weight: 700; margin-right: 20px; font-size: 12px; display: flex;}
ul.NewsList li .NewsHeader .Tag span{margin-right: 5px;}
ul.NewsList li .NewsTitle{font-size: 20px; font-weight: 500; line-height: 32.69px; margin-bottom: 40px;}
ul.NewsList li a{text-decoration: none;}
ul.NewsList li a:hover{color: #C1B01D;}

.Bt02{font-weight: 500; padding: 10px 80px; border: #B4B4B4 solid 1px; border-radius: 500px; text-decoration: none; display: inline-block; text-align: center;}

@media only screen and (max-width:840px) {
section.News .inner{padding-top: 70px; padding-bottom: 70px;}

ul.NewsList li{padding: 30px 0;}
ul.NewsList li .ImgArea{width: 38%}
ul.NewsList li .TxtArea{width: 59%}
ul.NewsList li .NewsHeader{margin-bottom: 20px; font-size: 12px; font-weight: 300; line-height: 19.07px;}
ul.NewsList li .NewsHeader .Tag{font-weight: 700; margin-right: 20px; font-size: 14px;}
ul.NewsList li .NewsTitle{font-size: 16px; font-weight: 500; line-height: 21.79px; margin-bottom: 30px;}
}

@media only screen and (max-width:600px) {
ul.NewsList li .ImgArea{width: 100%; padding: 0 20%; margin-bottom: 30px;}
ul.NewsList li .TxtArea{width: 100%; text-align: center;}
}

section.ProfileMv{position: relative; background: #EAEBF0; background: linear-gradient(180deg, rgba(234, 235, 240, 1) 0%, rgba(243, 242, 248, 1) 50%, rgba(233, 234, 239, 1) 100%);}
section.ProfileMv .ProfileInner{padding: 0 5%; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;}
section.ProfileMv .Mv{width: 500px;}
section.ProfileMv .MvCap{flex: 1; position: relative;}
section.ProfileMv .MvCap h2{position: absolute; top: 50%; transform: translate(0, -50%); text-align: center; color: #bdb4ad; font-size: 2rem; letter-spacing: 5px; margin-bottom: 0;}
section.ProfileMv .MvCap h2 .Title{display: block; font-size: 70%; letter-spacing: 2px;}
section.ProfileMv .MvCap h2 .Sub{display: block; font-size: 80%;}

@media only screen and (max-width:840px) {
section.ProfileMv{padding-top: 150px;}
section.ProfileMv .ProfileInner{padding: 0; display: block;}
section.ProfileMv .Mv{width: 100%; padding: 0 20%;}
section.ProfileMv .MvCap{}
section.ProfileMv .MvCap h2{position: relative; font-size: 1.4rem; letter-spacing: 5px;}
section.ProfileMv .MvCap h2 .Title{display: block; font-size: 70%; letter-spacing: 2px;}
section.ProfileMv .MvCap h2 .Sub{display: block; font-size: 80%;}
}

.ProfileMovie{max-width: 600px; margin: 0 auto;}

.ProfileWorks .inner{display: flex; flex-wrap: wrap; justify-content: space-between;}
.ProfileWorks .inner .Box{width: 45%; margin-bottom: 50px;}
.ProfileWorks ul{position: relative;}
.ProfileWorks ul::after{position: absolute; content: "etc"; left: 0; bottom: -20px; font-size: 12px;}
.ProfileWorks li{margin-bottom: 5px; padding-bottom: 10px; border-bottom: #666 solid 1px; line-height: 1;}

@media only screen and (max-width:600px) {
.ProfileWorks .inner .Box{width: 100%; margin-bottom: 40px;}
}

section.Photo{margin-top: 50px;}
section.Photo ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
section.Photo ul li{width: 47%; padding: 0 0 50px;}

section.Photo ul li h2{font-size: 1.2rem; color: #C1B01D;}

@media only screen and (max-width:840px) {
section.Photo ul li{width: 100%;}
}

section.Movie{margin-top: 50px;}
section.Movie ul{display: flex; flex-wrap: wrap;}
section.Movie ul li{width: 33.333333%; padding: 0 2% 50px;}
section.Movie ul li .Tag{display: inline-block; font-size: 11px;}
section.Movie ul li h2{font-size: 1.2rem;}

@media only screen and (max-width:840px) {
section.Movie ul li{width: 100%; padding: 0 0% 50px;}
}



.site-main{padding: 150px 0;}


input, button, textarea, select {margin:0; padding:10px; width:100%; background:#fff; border:#C1B01D solid 2px; border-radius:5px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; margin-bottom: 30px;}

.textarea_h{min-height:200px;}

.bt_submit{background:#C1B01D; color:#FFF; font-size:18px; border-radius:50px; opacity: .8;}
.bt_submit:hover{opacity: 1;}


/* == footer == */


#footer{background: #040000; position: relative;}
#footer .inner{padding-top: 10px; padding-bottom: 10px;}

#footer ul{display: flex; flex-wrap: wrap; justify-content: center; color: #fff;}
#footer li{margin: 0 20px; text-align: center;}

@media only screen and (max-width:840px) {
#footer li{margin-bottom: 10px; width: 100%;}
#footer li:last-child{margin-bottom: 0px;}
}

.copy{text-align:center; font-size:.7rem; color: #fff; background: rgba(0,0,0,.7);}





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

    other

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


@media only screen and (min-width:841px) {
	
.pc{display:block;}
.sp{display:none;}


.res10{width:10%;}
.res11{width:11%;}
.res12{width:12%;}
.res13{width:13%;}
.res14{width:14%;}
.res15{width:15%;}
.res16{width:16%;}
.res17{width:17%;}
.res18{width:18%;}
.res19{width:19%;}
.res20{width:20%;}
.res21{width:21%;}
.res22{width:22%;}
.res23{width:23%;}
.res24{width:24%;}
.res25{width:25%;}
.res26{width:26%;}
.res27{width:27%;}
.res28{width:28%;}
.res29{width:29%;}
.res30{width:30%;}
.res31{width:31%;}
.res32{width:32%;}
.res33{width:33%;}
.res34{width:34%;}
.res35{width:35%;}
.res36{width:36%;}
.res37{width:37%;}
.res38{width:38%;}
.res39{width:39%;}
.res40{width:40%;}
.res41{width:41%;}
.res42{width:42%;}
.res43{width:43%;}
.res44{width:44%;}
.res45{width:45%;}
.res46{width:46%;}
.res47{width:47%;}
.res48{width:48%;}
.res49{width:49%;}
.res50{width:50%;}
.res51{width:51%;}
.res52{width:52%;}
.res53{width:53%;}
.res54{width:54%;}
.res55{width:55%;}
.res56{width:56%;}
.res57{width:57%;}
.res58{width:58%;}
.res59{width:59%;}
.res60{width:60%;}
.res61{width:61%;}
.res62{width:62%;}
.res63{width:63%;}
.res65{width:65%;}
.res66{width:66%;}
.res67{width:67%;}
.res68{width:68%;}
.res69{width:69%;}
.res70{width:70%;}
.res71{width:71%;}
.res72{width:72%;}
.res73{width:73%;}
.res74{width:74%;}
.res75{width:75%;}
.res76{width:76%;}
.res77{width:77%;}
.res78{width:78%;}
.res79{width:79%;}
.res80{width:80%;}
.res81{width:81%;}
.res82{width:82%;}
.res83{width:83%;}
.res84{width:84%;}
.res85{width:85%;}
.res86{width:86%;}
.res87{width:87%;}
.res88{width:88%;}
.res89{width:89%;}
.res90{width:90%;}
}



@media only screen and (max-width:840px) {
	
.pc{display:none;}
.sp{display:block;}

.res10,.res11,.res12,.res13,.res14,.res15,.res16,.res17,.res18,.res19,.res20,.res21,.res22,.res23,.res24,.res25,.res26,.res27,.res28,.res29,.res30,.res31,.res32,.res33,.res34,.res35,.res36,.res37,.res38,.res39,.res40,.res41,.res42,.res43,.res44,.res45,.res46,.res47,.res48,.res49,.res50,.res51,.res52,.res53,.res54,.res55,.res56,.res57,.res58,.res59,.res60,.res61,.res62,.res63,.res64,.res65,.res66,.res67,.res68,.res69,.res70,.res71,.res72,.res73,.res74,.res75,.res76,.res77,.res78,.res79,.res80,.res81,.res82,.res83,.res84,.res85,.res86,.res87,.res88,.res89,.res90{width:100%; margin-bottom:10px;}

}



/*--------共通--------*/


.photo_l{float:left; margin:0 10px 10px 0;}
.photo_r{float:right; margin:0 0px 10px 10px;}

.box_l{float:left;}
.box_r{float:right;}
.box_c{margin:0 auto;}

.txt_r{text-align:right;}
.txt_l{text-align:left;}
.txt_c{text-align:center;}

.block{display:block;}
.overflow{overflow:hidden;}
.cl{clear:both;}

.img_b5 img{margin-bottom:5px;}
.img_b10 img{margin-bottom:10px;}

.w10{width:10%;}
.w15{width:15%;}
.w20{width:20%;}
.w25{width:25%;}
.w30{width:30%;}
.w35{width:35%;}
.w40{width:40%;}
.w45{width:45%;}
.w50{width:50%;}
.w55{width:55%;}
.w60{width:60%;}
.w65{width:65%;}
.w70{width:70%;}
.w75{width:75%;}
.w80{width:80%;}
.w85{width:85%;}
.w90{width:90%;}

.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}

.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}
.mb55{margin-bottom:55px !important;}
.mb60{margin-bottom:60px !important;}
.mb65{margin-bottom:65px !important;}
.mb70{margin-bottom:70px !important;}
.mb75{margin-bottom:75px !important;}
.mb80{margin-bottom:80px !important;}

.mtb5{margin:5px 0 !important;}
.mtb10{margin:10px 0 !important;}
.mtb15{margin:15px 0 !important;}
.mtb20{margin:20px 0 !important;}

.ptb5{padding:5px 0 !important;}
.ptb10{padding:10px 0 !important;}
.ptb15{padding:15px 0 !important;}
.ptb20{padding:20px 0 !important;}

.mr3{margin-right:3px !important;}
.mr4{margin-right:4px !important;}
.mr5{margin-right:5px !important;}
.mr6{margin-right:6px !important;}
.mr7{margin-right:7px !important;}
.mr8{margin-right:8px !important;}
.mr9{margin-right:9px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}

.f70per{font-size:70%}
.f80per{font-size:80%}
.f90per{font-size:90%}
.f110per{font-size:110%}
.f120per{font-size:120%}
.f130per{font-size:130%}
.f140per{font-size:140%}
.f150per{font-size:150%}
.f160per{font-size:160%}
.f170per{font-size:170%}
.f180per{font-size:180%}

.memo{font-size:70%;}

.movie-wrap {position: relative; padding-bottom: 50%; padding-top: 30px; height: 0; overflow: hidden;}
.movie-wrap iframe {position: absolute; top: 0; left: 0; width:100%; height:100%;}

#page-top {position: fixed; bottom: 20px; right: 20px; z-index:20; opacity: 0.7;}
#page-top a{text-decoration:none; color: #fff; padding:15px 20px; text-align:center; display: block; border-radius: 5px; background:#666; font-size:12px;}
#page-top a:hover {text-decoration: none; background:#ccc;}


@media only screen and (max-width:840px) {
#page-top {position:absolute; top: 0px; right: 20px;
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

#page-top a{padding:0px; background:transparent; font-size:1.6rem;}
#page-top a:hover {text-decoration: none; background:transparent;}

}