@charset "utf-8";

/*----------------------------- common ---*/

body { padding-top: 130px;}

#bread { position: absolute; top: 25px; left: 25px;}
#bread ol li a,
#bread ol li { color: #fff;}
#bread ol li + li::before { background: #fff;}

.h3_property { margin-bottom: 30px;}
.h3_property:after { content: ''; display: block; width: 93px; height: 8px; background: #B9D4F0; margin: 30px auto 0;}
.h3_property .big { font-weight: 300; font-size: 190px; color: rgb(28 53 92 / 0.04); left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}

.link { padding: 100px 0;}
.link .flex { display: flex; justify-content: space-between;}
.link .flex a { position: relative; display: block; width: 535px; padding: 89px 40px 105px; font-size: 36px; font-family: 'Noto-Sans-JP-Medium'; color: #FFF;}
.link .flex a:nth-of-type(1) { background: url(../images/about/link_01.jpg) no-repeat center center /cover;}  
.link .flex a:nth-of-type(2) { background: url(../images/about/link_02.jpg) no-repeat center center /cover;}  
.link .flex a:after { position: absolute; right: 34px; top: 50%; content: ''; width: 15px; height: 15px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(-45deg); -webkit-transform: translateY(-50%) rotate(-45deg);}
.link .flex a span { display: block; font-size: 20px; font-family: "goldenbook", serif; font-weight: 300; font-style: normal; margin-bottom: 15px;}




/*----------------------------- top ---*/

#top {}
#top .box { position: relative; background: url(../images/about/bg_top.jpg) no-repeat center center /cover; padding: 155px 0 140px; color: #fff;}
#top .half { width: 50%;}
#top .box .half h2 { font-size: 46px; margin-bottom: 50px;}
#top .box .half h2:after { content: ''; display: block; width: 93px; height: 8px; background: #fff; margin: 40px 0 0;}
#top .box .half h2 .big { bottom: 20px; left: -20px; transform: none; -webkit-transform: none; font-size: 238px; color: rgb(255 255 255 / 0.04);}
#top .box .half h2 span { color: #fff;}
#top .box .half p { line-height: 220%;}
#top .box .half p span { font-size: 15px; line-height: 200%;}

#top .about { position: relative; width: 1320px; display: flex; justify-content: space-between; align-items: flex-end; padding: 120px 0 260px; margin: 0 auto;}
#top .about .bg_img { position: absolute; top: 200px; right: 0; width: 1240px; max-width: none; z-index: -1;}
#top .about .half { padding: 0 110px 50px 80px;}
#top .about .half h3 { font-size: 30px; font-family: 'Noto-Sans-JP-Medium'; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 2px dotted #000;}
#top .about .half p { line-height: 220%;}



/*----------------------------- future ---*/

#future { background: #F5F8FC; text-align: center; padding: 45px 0 50px;}
#future p { margin-bottom: 60px;}
#future .flex { display: flex; justify-content: center; align-items: flex-start;}
#future .flex .item { margin: 0 40px 45px;}
#future .flex .item img { margin-bottom: 20px;}
#future .flex .item p { font-size: 20px; line-height: 150%; margin-bottom: 0;}


/*----------------------------- oralcare ---*/

#oralcare { padding: 270px 0 220px; text-align: center;}
#oralcare p { margin-bottom: 60px;}
#oralcare .flex { display: flex; justify-content: space-between;}
#oralcare .flex .item { width: 346px;}
#oralcare .flex .item img { margin-bottom: 20px;}
#oralcare .flex .item p { font-size: 20px; font-family: 'Noto-Sans-JP-Medium'; line-height: 180%; margin-bottom: 0;}




/*----------------------------- brand ---*/

#brand { padding: 45px 0 120px; background: url(../images/about/bg_brand.png) no-repeat center center /cover; text-align: center;}
#brand .h3_property { margin-bottom: 60px;}
#brand .flex { margin-bottom: 50px;}
#brand .flex img { margin: 0 84px;}
#brand p { line-height: 200%;}






/*----------------------------- media ---*/

#media { padding: 184px 0 0; background: linear-gradient( 90deg, transparent 10% , rgb(230 232 242 / 0.4) 10%);}
#media .box { margin-bottom: 40px;}
#media .box .half .h3_property { margin-bottom: 0;}
#media .box .half .h3_property:after { display: none;}
#media .box .half .h3_property .big { font-size: 120px; font-weight: 400; left: auto; transform: none; -webkit-transform: none;}
#media .box .half .h3_property .small { font-size: 40px;}
#media .media_wrapper { padding-left: max( 50% - 550px , 50px);}
#media .media_slide { padding-bottom: 70px;}
#media .media_slide .slick-slide { width: 304px; margin-left: 72px;}
#media .media_slide .slick-slide a { display: block; width: 100%;}
#media .media_slide .slick-slide a figure { position: relative; margin-bottom: 20px;}
#media .media_slide .slick-slide a figure figcaption { position: absolute; top: 0; right: -27px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; color: #898989; font-family: "din-2014", sans-serif; font-weight: 400; font-style: normal; height: 100%;}
#media .media_slide .slick-slide a figure figcaption:before { content: ''; display: inline-block; width: 1px; height: 50px; margin-bottom: 11px; background: #898989;}
#media .media_slide .slick-slide a .cat { width: 150px; font-size: 15px; color: #00a785; padding: 4px 0; border: 1px solid #00a785; border-radius: 20px; text-align: center; margin-bottom: 15px;}
#media .media_slide .slick-slide a h4 { font-size: 22px; margin-bottom: 10px; line-height: 145%;}
#media .media_slide .slick-slide a .detail { line-height: 175%;}

#media .media_slide .slide-arrow { position: absolute; top: -110px;}
#media .media_slide .prev-arrow { right: calc(50% - 410px);}
#media .media_slide .next-arrow { right: calc(50% - 490px);}
#media .max_inner { text-align: right;}





/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	/*----------------------------- common ---*/
	
	body { padding-top: 60px;}
	#bread { position: absolute; top: 20px; left: 5%;}
	#bread ol li a,
	#bread ol li { color: #fff;}
	#bread ol li + li::before { background: #fff;}
	

	.h3_property { line-height: 130%; margin-bottom: 30px;}
	.h3_property:after { width: 50px; height: 4px; margin: 20px auto 0;}
	.h3_property .big { font-size: 70px; bottom: auto; top: -70px;}
	.h3_property .small { font-size: 20px; margin-bottom: 5px;}
	
	.link { padding: 50px 0;}
	.link .flex { display: block; justify-content: space-between;}
	.link .flex a { position: relative; display: block; width: 300px; padding: 51px 20px 52px; font-size: 24px; font-family: 'Noto-Sans-JP-Medium'; color: #FFF; margin: 0 auto;}
	.link .flex a:nth-of-type(1) { margin-bottom: 20px;}  
	.link .flex a:nth-of-type(2) { }  
	.link .flex a:after { right: 34px; width: 10px; height: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff;}
	.link .flex a span { font-size: 14px; margin-bottom: 8px;}
	
	
	/*----------------------------- top ---*/
	
	#top {}
	#top .box { background: url(../images/about/bg_top.jpg) no-repeat center center /cover; padding: 80px 0 100px;}
	#top .half { width: 100%;}
	#top .box .half h2 { font-size: 30px; margin-bottom: 20px;}
	#top .box .half h2:after { width: 50px; height: 4px; margin: 25px 0 0;}
	#top .box .half h2 .big { bottom: 40px; left: -10px; font-size: 95px; }
	#top .box .half p { font-size: 12px;}
	#top .box .half p span { font-size: 11px;}
	
	#top .about { display: block; width: 90%; padding: 60px 0;}
	#top .about .img { margin-bottom: 20px;}
	#top .about .img img { width: 90%;}
	#top .about .bg_img { position: absolute; top: 90vw; right: -3%; width: 95%; z-index: -1;}
	#top .about .half { padding: 0;}
	#top .about .half h3 { font-size: 22px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 2px dotted #000;}
	#top .about .half p { font-size: 12px; line-height: 220%;}
	
	
	
	/*----------------------------- future ---*/
	
	#future { padding: 45px 0 40px;}
	#future .h3_property { margin-bottom: 30px;}
	#future p { font-size: 14px; margin-bottom: 40px;}
	#future .flex { display: flex; justify-content: center; align-items: flex-start; flex-flow: wrap row; margin-bottom: 20px;}
	#future .flex .item { width: 30%; margin: 0 5px;}
	#future .flex .item img { margin-bottom: 20px;}
	#future .flex .item p { font-size: 14px; line-height: 150%; margin-bottom: 0;}

	
	/*----------------------------- oralcare ---*/
	
	#oralcare { padding: 45px 0 50px; text-align: center;}
	#oralcare p { font-size: 14px; line-height: 130%; margin-bottom: 30px;}
	#oralcare .flex { display: flex; justify-content: space-between;}
	#oralcare .flex .item { width: 100%; margin-bottom: 30px;}
	#oralcare .flex .item img { margin-bottom: 10px;}
	#oralcare .flex .item p { font-size: 16px; line-height: 180%; margin-bottom: 0;}
	
	
	/*----------------------------- brand ---*/
	
	#brand { padding: 45px 0 50px;}
	#brand .h3_property { margin-bottom: 30px;}
	#brand .flex { width: 90%; flex-flow: row; margin: 0 auto 40px;}
	#brand .flex img { width: 40%; margin: 0 5px;}
	#brand p { font-size: 14px; line-height: 200%;}
	
	
	
	/*----------------------------- media ---*/
	
	#media { padding: 120px 0 0; overflow-x: hidden;}
	#media .box { margin-bottom: 20px;}
	#media .box .half .h3_property { margin-bottom: 0;}
	#media .box .half .h3_property .big { font-size: 60px; top: -50px;}
	#media .box .half .h3_property .small { font-size: 16px; margin-bottom: 22px;}
	#media .media_wrapper { padding-left: 5%;}
	#media .media_slide { padding-bottom: 60px;}
	#media .media_slide .slick-slide { width: 280px; margin-left: 50px;}
	#media .media_slide .slick-slide a { }
	#media .media_slide .slick-slide a figure { margin-bottom: 15px;}
	#media .media_slide .slick-slide a figure figcaption { top: 0; right: -20px; font-size: 14px;}
	#media .media_slide .slick-slide a figure figcaption:before { width: 1px; height: 40px; margin-bottom: 11px;}
	#media .media_slide .slick-slide a .cat { width: 120px; font-size: 13px; padding: 4px 0; margin-bottom: 15px;}
	#media .media_slide .slick-slide a h4 { font-size: 18px; margin-bottom: 10px; line-height: 145%;}
	#media .media_slide .slick-slide a .detail { font-size: 12px; line-height: 175%;}
	
	#media .media_slide .slide-arrow { position: absolute; top: -70px; width: 45px;}
	#media .media_slide .prev-arrow { right: calc(50% - 100px);}
	#media .media_slide .next-arrow { right: calc(50% - 155px);}
	#media .max_inner { text-align: right;}
		
	
	
}