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


/* main visual
=======================================*/
.main-visual {
	position:fixed;
	top:0; left:0;
	width:100%; height:1074px;
	text-align:center;
	margin:0; padding:0;
	overflow:hidden;
	/*background-color:#F90000;*/
}
.main-visual .main-visual-inner {
	position:relative;
	width:100%; height:100%;
}
.main-visual h2#scr1 {
	position:absolute;
	left:50%; margin-left:-288px; top:141px;
	display:block;
	background:url("../img/top/scr_mv1.png");
	background-size:auto;
	width:576px; height:0; padding-top:260px; overflow:hidden;
	z-index:10;
	/*margin:121px auto 0 auto;*/
}
.main-visual div.scr-all {
	position:absolute;
	width:100%; height:100%;
	z-index:11;
	filter: drop-shadow(0 0 4px #FFF) drop-shadow(0 0 8px #FFF);
}
.main-visual div.scr-all p {
	position:absolute;
	left:50%; margin-left:-210px;
	width:421px; height:0; padding-top:21px; overflow:hidden;
	background-image:url("../img/top/scr_mv2-1.png");
	background-repeat:no-repeat;
	background-size:contain;
}
.main-visual div.scr-all p#scr2-1 { opacity:0; top:386px;}
.main-visual div.scr-all p#scr2-2 { opacity:0; top:423px; background-image:url("../img/top/scr_mv2-2.png");}
.main-visual div.scr-all p#scr2-3 { opacity:0; top:496px; background-image:url("../img/top/scr_mv2-3.png");}
.main-visual div.scr-all p#scr2-4 { opacity:0; top:531px; background-image:url("../img/top/scr_mv2-4.png");}
.main-visual div.scr-all p#scr2-5 { opacity:0; top:566px; background-image:url("../img/top/scr_mv2-5.png");}
.main-visual div.scr-all p#scr2-6 { opacity:0; top:601px; background-image:url("../img/top/scr_mv2-6.png");}

/* brushstroke */
.main-visual .mv-brushstroke {
	position:absolute;
	top:0; left:0; width:100%; height:100%;
	z-index:2;
}
#brushstroke1 { position:absolute; width:351px; height:321px; left:calc(50% - 893px); top:123px;}
#brushstroke2 { position:absolute; width:351px; height:321px; left:calc(50% + 425px); top:560px;}
#brushstroke3 { position:absolute; width:184px; height:200px; left:calc(50% - 691px); top:645px;}
#brushstroke4 { position:absolute; width:193px; height:199px; left:calc(50% + 631px); top:125px;}
#brushstroke5 { position:absolute; width:150px; height:134px; left:calc(50% + 425px); top:984px;}
#brushstroke6 { position:absolute; width:100px; height: 90px; left:calc(50% - 313px); top:125px;}
#brushstroke7 { position:absolute; width:150px; height: 14px; left:calc(50% - 504px); top:364px;}
#brushstroke8 { position:absolute; width:100px; height: 90px; left:calc(50% + 386px); top:410px;}
/* person */
.main-visual .mv-person {
	position:absolute;
	top:0; left:0; width:100%; height:100%;
	z-index:3;
}
#person1 { opacity:0; position:absolute; width:387px; height:386px; left:calc(50% + 286px); top:95px;}
#person2 { opacity:0; position:absolute; width:360px; height:360px; left:calc(50% + 220px); top:415px;}
#person3 { opacity:0; position:absolute; width:360px; height:360px; left:calc(50% - 600px); top:378px;}
#person4 { opacity:0; position:absolute; width:287px; height:287px; left:calc(50% - 633px); top:175px;}
#person5 { opacity:0; position:absolute; width:278px; height:278px; left:calc(50% - 830px); top:607px;}
#person6 { opacity:0; position:absolute; width:238px; height:238px; left:calc(50% + 532px); top:604px;}
#person7 { opacity:0; position:absolute; width:198px; height:198px; left:calc(50% - 439px); top:69px;}
/* musicalnote */
.main-visual .mv-musicalnote {
	position:absolute;
	top:0; left:0; width:100%; height:100%;
	opacity:0;
	z-index:4;
}
#musicalnote1 { position:absolute; width:46px; height: 61px; left:calc(50% - 620px); top:-19px;}
#musicalnote2 { position:absolute; width:40px; height: 53px; left:calc(50% + 16px); top:847px;}
#musicalnote3 { position:absolute; width:88px; height: 61px; left:calc(50% - 432px); top:216px;}
#musicalnote4 { position:absolute; width:72px; height: 53px; left:calc(50% + 589px); top:-31px;}
#musicalnote5 { position:absolute; width:65px; height: 55px; left:calc(50% - 702px); top:517px;}
#musicalnote6 { position:absolute; width:40px; height: 87px; left:calc(50% - 374px); top:721px;}
#musicalnote7 { position:absolute; width:83px; height:171px; left:calc(50% + 278px); top:-8px;}
/* leef */
#mv-leef {
	position:absolute; width:636px; height:527px; left:calc(50% - 318px); top:213px;
	z-index:5;
	/*display:none;*/
}
/* scrollto */
.main-visual .scrollto {
	position:absolute;
	left:50%; margin-left:-22px; top:calc(100vh - 84px);/*top:690px;*/
	display:block;
	width:45px; height:84px;
	text-align:center;
	z-index:13;
	/*margin:71px auto 0 auto;*/
}
.main-visual .scrollto img {
	filter: drop-shadow(0 0 2px #FFF) drop-shadow(0 0 3px #FFF);
}
.main-visual .scrollto span {
	display:block;
	width:0; height:84px;
	border-left:1px solid #010101;
	border-right:1px solid rgba(255,255,255,0.5);
	margin:8px auto 0 auto;
	animation:1s ease-in-out 0s infinite normal forwards running expansion;
	/*animation-name: expansion;
	animation-duration: 1s;
	animation-iteration-count: infinite;*/
}
@keyframes expansion {
	0% { height:0px;}
	100% { height:63px;}
}

/* about
=======================================*/
.top-about {
	position:relative;
	width:100%; min-width:1000px;
	margin:0 auto 0 auto;
	padding:2994px 0 0 0;
}
.top-about-wrapper {
	position:relative;
	display:block;
	width: 1000px;
	margin: 0 auto;
	padding: 80px 0 80px 0;
	/*background-color:#FEF;*/
}
.top-about-wrapper span.subtitle {
	display:block;
	background:url("../img/top/ti_about.png") no-repeat; background-size:contain;
	width:58px; height:0; padding-top:20px; overflow:hidden;
	margin:0 auto 35px auto;
}
.top-about-wrapper h2 {
	display:block;
	background:url("../img/top/ti_about_ja.png") no-repeat; background-size:contain;
	width:182px; height:0; padding-top:38px; overflow:hidden;
	margin:0 auto 63px auto;
}
.top-about-wrapper h3 {
	display:block;
	background:url("../img/top/scr_about.png") no-repeat; background-size:contain;
	width:420px; height:0; padding-top:20px; overflow:hidden;
	margin:0 auto 36px auto;
}
.top-about-wrapper .about-movie {
	display:block;
	width:1000px; height:554px;
	margin:0 auto 0 auto;
}

/* philosophy
=======================================*/
.top-philosophy {
	width:100%; min-width:1000px;
	background-color:#FFEEE2;
	background-image:url("../img/top/bg_philosophy_top.png"), url("../img/top/bg_philosophy_bottom.png");
	background-position:left top, left bottom;
	background-repeat:repeat-x, repeat-x;
	margin:136px auto 61px auto;
}
.top-philosophy-wrapper {
	position:relative;
	display:block;
	width: 1000px;
	margin:0 auto;
	padding:59px 0 98px 0;
}
.top-philosophy-wrapper span.subtitle {
	display:block;
	background:url("../img/top/ti_philosophy.png") no-repeat; background-size:contain;
	width:104px; height:0; padding-top:20px; overflow:hidden;
	margin:0 auto 35px auto;
}
.top-philosophy-wrapper h2 {
	display:block;
	background:url("../img/top/ti_philosophy_ja.png") no-repeat; background-size:contain;
	width:159px; height:0; padding-top:38px; overflow:hidden;
	margin:0 auto 63px auto;
}
.top-philosophy-wrapper p.philosophy-script {
	font-size:1.385em;
	color:#58302D;
	line-height:2em;
	text-align:center;
	margin:0 auto 63px auto;
}
.top-philosophy-wrapper div.bt-about {
	text-align:center;
}
.top-philosophy-wrapper div.bt-about a {
	font-weight:normal;
	font-size:1.385em;
	line-height:1em;
	color:#FFF;
	text-decoration: none;
	padding:0.91em 2.52em;
	background:#5F1919;
	border-radius: 100vh;
}


/* hot topics
=======================================*/
.top-hottopics {
	width:100%; min-width:1000px;
	margin:80px auto 80px auto;
}
.top-hottopics-wrapper {
	position:relative;
	display:block;
	width: 1000px;
	margin: 0 auto;
	padding: 47px 0 33px 0;
	/*background-color:#FFEEE2;*/
}
.top-hottopics-wrapper span.subtitle {
	display:block;
	background:url("../img/top/ti_hottopics.png") no-repeat; background-size:contain;
	width:104px; height:0; padding-top:20px; overflow:hidden;
	margin:0 auto 35px auto;
}
.top-hottopics-wrapper h2 {
	display:block;
	background:url("../img/top/ti_hottopics_ja.png") no-repeat; background-size:contain;
	width:250px; height:0; padding-top:38px; overflow:hidden;
	margin:0 auto 50px auto;
}
.top-hottopics-wrapper ul.top-hottopics-list {
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
	width: 1000px;
}
.top-hottopics-wrapper ul.top-hottopics-list li {
	margin-bottom:40px;
}
.top-hottopics-wrapper ul.top-hottopics-list li a picture img {
	max-width: 1000px;
}
.top-hottopics-wrapper ul.top-hottopics-list li.post_bnr {
	margin: 0 auto 20px;
}

/* information
=======================================*/
.top-information {
	width:100%; min-width:1000px;
	margin:0 auto 80px auto;
}
.top-information-wrapper {
	position:relative;
	display:block;
	width: 1000px;
	margin: 0 auto;
	padding: 47px 0 80px 0;
	/*background-color:#F2FFFF;*/
}
.top-information-wrapper span.subtitle {
	display:block;
	background:url("../img/top/ti_information.png") no-repeat; background-size:contain;
	width:111px; height:0; padding-top:20px; overflow:hidden;
	margin:0 auto 35px auto;
}
.top-information-wrapper h2 {
	display:block;
	background:url("../img/top/ti_information_ja.png") no-repeat; background-size:contain;
	width:153px; height:0; padding-top:38px; overflow:hidden;
	margin:0 auto 70px auto;
}
/* information-list */
ul.information-list {
	margin:0 0 0 0;
	min-height:100px;
}
ul.information-list > li {
	width:1000px;
}
ul.information-list > li > dl {
	display:flex;
	/*justify-content:space-between;*/
	margin:16px 0 16px 0;
}
ul.information-list > li > dl > dt {
	display:block;
	font-size:1.308em;
	line-height:1.65em;
	color:#939393;
	font-weight:normal;
	margin:0 34px 0 0;
	min-width: 100px;
}
ul.information-list > li > dl > dd {
	display:block;
	font-size:1.286em;
	line-height:1.65em;
	color:#261516;
}
.line-dotted {
	position: relative;
	height: 3px;
}
.line-dotted::before {
	content: "";
	background-image: linear-gradient(to right, #B6B6B6, #B6B6B6 3px, transparent 3px, transparent 8px);
	background-size: 8px 3px;
	background-repeat: repeat-x;
	position: absolute;
	top:0; bottom:0; left:0; right:0;
}












/* SP
=======================================*/
@media screen and (max-width:767.98px) {



.main-visual h2#scr1 {
	left:50%; margin-left:-144px; top:87px;
	background-size:contain;
	width:288px; height:0; padding-top:130px;
}
.main-visual div.scr-all {
	filter: drop-shadow(0 0 2px #FFF) drop-shadow(0 0 4px #FFF);
}
.main-visual div.scr-all p {
	left:50%; margin-left:-158px;
	width:316px; height:0; padding-top:14px; overflow:hidden;
	background-image:url("../img/top/scr_mv2-1.png");
}
.main-visual div.scr-all p#scr2-1 { top:243px;}
.main-visual div.scr-all p#scr2-2 { top:273px;}
.main-visual div.scr-all p#scr2-3 { top:325px;}
.main-visual div.scr-all p#scr2-4 { top:351px;}
.main-visual div.scr-all p#scr2-5 { top:377px;}
.main-visual div.scr-all p#scr2-6 { top:402px;}

.main-visual .mv-brushstroke,
.main-visual .mv-person,
.main-visual .mv-musicalnote {
	/*display:none;*/
}
/* brushstroke */
#brushstroke1 { display:none;}
#brushstroke2 { position:absolute; width:131px; height:120px; left:calc(50% + 137px); top:166px;}
#brushstroke3 { display:none;}
#brushstroke4 { position:absolute; width:75px; height:67px; left:calc(50% - 237px); top:209px;}
#brushstroke5 { position:absolute; width:75px; height:67px; left:calc(50% + 159px); top:404px;}
#brushstroke6 { position:absolute; width:50px; height:45px; left:calc(50% - 205px); top:24px;}
#brushstroke7 { display:none;}
#brushstroke8 { display:none;}
/* person */
#person1 { position:absolute; width:135px; height:135px; left:calc(50% + 80px); top:57px;}
#person2 { position:absolute; width:125px; height:125px; left:calc(50% + 87px); top:288px;}
#person3 { position:absolute; width:147px; height:147px; left:calc(50% - 228px); top:242px;}
#person4 { position:absolute; width:117px; height:117px; left:calc(50% - 220px); top:127px;}
#person5 { display:none;}
#person6 { display:none;}
#person7 { position:absolute; width:99px; height:99px; left:calc(50% - 180px); top:40px;}
/* musicalnote */
#musicalnote1 { position:absolute; width:23px; height:30px; left:calc(50% - 171px); top:397px;}
#musicalnote2 { display:none;}
#musicalnote3 { position:absolute; width:44px; height:30px; left:calc(50% - 162px); top:112px;}
#musicalnote4 { display:none;}
#musicalnote5 { display:none;}
#musicalnote6 { position:absolute; width:21px; height:45px; left:calc(50% + 116px); top:193px;}
#musicalnote7 { position:absolute; width:41px; height:85px; left:calc(50% + 109px); top:7px;}
/* leef */
#mv-leef {
	width:318px; height:263px; left:calc(50% - 159px); top:194px;
	z-index:5;
	/*display:none;*/
}
/* scrollto */
.main-visual .scrollto { /*display:none;*/}

/* about
=======================================*/
.top-about {
	position:relative;
	width:calc(100% - 20px); min-width:320px;
	margin:0 auto 0 auto;
	padding:2547px 0 0 0;
}
.top-about-wrapper {
	width: 100%;
	padding: 60px 0 40px 0;
}
.top-about-wrapper span.subtitle {
	width:36px; height:0; padding-top:12px;
	margin:0 auto 15px auto;
}
.top-about-wrapper h2 {
	width:114px; height:0; padding-top:23px;
	margin:0 auto 35px auto;
}
.top-about-wrapper h3 {
	width:277px; height:0; padding-top:13px;
	margin:0 auto 12px auto;
}
.top-about-wrapper .about-movie {
	display:block;
	width:100%; height:auto;
	margin:0 auto 0 auto;
}

/* philosophy
=======================================*/
.top-philosophy {
	width:100%; min-width:320px;
	margin:20px auto 40px auto;
}
.top-philosophy-wrapper {
	width: 100%;
	padding: 60px 0 80px 0;
}
.top-philosophy-wrapper span.subtitle {
	width:64px; height:0; padding-top:12px;
	margin:0 auto 15px auto;
}
.top-philosophy-wrapper h2 {
	width:99px; height:0; padding-top:23px;
	margin:0 auto 40px auto;
}
.top-philosophy-wrapper p.philosophy-script {
	font-size:1.077em;
	margin:0 auto 50px auto;
}
.top-philosophy-wrapper div.bt-about a {
	padding:0.91em 2.52em;
}

/* hot topics
=======================================*/
.top-hottopics {
	width:100%; min-width:320px;
	margin:20px auto 38px auto;
}
.top-hottopics-wrapper {
	width: 100%;
	padding: 47px 0 40px 0;
}
.top-hottopics-wrapper span.subtitle {
	width:63px; height:0; padding-top:12px;
	margin:0 auto 15px auto;
}
.top-hottopics-wrapper h2 {
	width:156px; height:0; padding-top:23px;
	margin:0 auto 30px auto;
}
.top-hottopics-wrapper ul.top-hottopics-list {
	width:calc(100% - 20px);
	padding:0 10px;
	text-align:center;
}
.top-hottopics-wrapper ul.top-hottopics-list li {
	margin-bottom:20px;
}
.top-hottopics-wrapper ul.top-hottopics-list li.half {
	width:calc(50% - 8px);
}

/* information
=======================================*/
.top-information {
	width:calc(100% - 40px); min-width:320px;
	margin:0 auto 58x auto;
}
.top-information-wrapper {
	width: 100%;
	padding: 18px 0 80px 0;
}
.top-information-wrapper span.subtitle {
	width:68px; height:0; padding-top:12px;
	margin:0 auto 15px auto;
}
.top-information-wrapper h2 {
	width:96px; height:0; padding-top:23px;
	margin:0 auto 40px auto;
}
/* news-list */
ul.information-list {
	margin:0 0 40px 0;
	min-height:0px;
}
ul.information-list > li {
	width:100%;
}
ul.information-list > li > dl {
	display:block;
	margin:20px 0 20px 0;
}
ul.information-list > li > dl > dt {
	font-size:0.923em;
	margin:0 0 10px 0;
}
ul.information-list > li > dl > dd {
	font-size:1.154em;
}




}