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

/* ::::::::::::::::::::::::::::::::: COMMON ::::::::::::::::::::::::::::::::: */

#wrapper *{ outline:none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-appearance: none; /*font-feature-settings : "palt";*/}
/*#wrapper {}*/
#wrapper {/* letter-spacing: 0.02em;*/ line-height: 1.8; background:#111!important; color: #222; text-align: center; position: relative; padding-bottom: 0!important; overflow: hidden;}
#wrapper *.en{font-family: "Overpass", sans-serif!important; font-weight: bold; letter-spacing: -0.05em;}

body.fixed {position: fixed; width: 100%; height: 100%;}

#wrapper a{color: #222; text-decoration: none; overflow: hidden; outline: none; cursor: pointer;}
#wrapper a:hover{text-decoration: none; color: #222;}
#wrapper button, #wrapper input, #wrapper select, #wrapper textarea{border: none; border-radius: 0; -webkit-appearance: none;}
#wrapper button{ cursor: pointer;}

#wrapper img{border: none; vertical-align: top;}
#wrapper table{border-collapse: collapse;}
#wrapper ul{list-style-type: none;}

#wrapper div.mainContents{position: relative; margin: 0 auto; background: #FFF;}
#wrapper *{margin: 0; padding: 0;}
#wrapper p, 
#wrapper ul, 
#wrapper table{font-size: 16px; line-height: 1.85; letter-spacing: 0.05em;}

#wrapper section h2.en{font-size: 80px; line-height: 1; font-weight: 800;}
#wrapper section h2.en span{color: #fc0000;}

#wrapper *.hidden{transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s; opacity: 0; transform: translate(10px,20px) rotateY(-15deg);}
#wrapper *.hidden.show{opacity: 1; transform: translate(0,0) rotateY(0);}

/* seg */

#wrapper section.seg1{height: calc(100vh - 150px); min-height: 600px; max-height: 950px; background: #333 url(/corporate/history/90th_anniversary/img/kv_pc.jpg) no-repeat center center; background-size: cover; position: relative;}
#wrapper section.seg1:not(.nonFixed){background-attachment: fixed;}
#wrapper section.seg1 span.bg{background: #222; position: absolute; width: 100%; height: 100%; left: 0; top: 0; transition: opacity 1.1s ease 1.3s;}
#wrapper section.seg1 span.bg.on{opacity: 0;}
#wrapper section.seg1 span.load{ width: 35px; height: 35px; border: 4px solid rgba(255, 255, 255, 0.8); border-top-color: transparent; border-radius: 50%; animation: spinLoad 0.8s linear 0s infinite; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; box-sizing: border-box; padding: 0;}

#wrapper section.seg1 div.inner{text-align: left; height: 180px; margin: auto 0; position: absolute; left: 9vw; top: 0; bottom: 0;}
#wrapper section.seg1 h1{font-size: 121px; color: #FFF; line-height: 1.1; padding: 0 0 20px;}
#wrapper section.seg1 h1 span{position: relative; display: inline-block; margin: 0 0 5px;}
#wrapper section.seg1 h1 span::after{position: absolute; width: 0; height: 100%; left: 0; top: 0; content: ""; background: #FFF;}
#wrapper section.seg1 h1 span font{opacity: 0; transition: opacity 0.2s ease 0.5s;}
#wrapper section.seg1 h1.on span::after{animation: txtCover 1000ms ease;}
#wrapper section.seg1 h1.on span font{opacity: 1;}
#wrapper section.seg1 p.lead{font-weight: 600 !important; color: #FFF; font-size: 22px;}
#wrapper section.seg1 p.lead span{position: relative; display: inline-block;}
#wrapper section.seg1 p.lead span::after{position: absolute; width: 0; height: 100%; left: 0; top: 0; content: ""; background: #FFF;}
#wrapper section.seg1 p.lead span font{opacity: 0; transition: opacity 0.2s ease 0.5s;}
#wrapper section.seg1 p.lead.on span::after{animation: txtCover 1000ms ease;}
#wrapper section.seg1 p.lead.on span font{opacity: 1;}
#wrapper section.seg1 p.logo{position: absolute; right: 55px; top: 55px;}
#wrapper section.seg1 p.scroll{height: 80px; position: absolute; left: 9vw; bottom: 0;}
#wrapper section.seg1 p.scroll a{display: block; height: 80px; min-width: 50px; position: relative; color: #FFF; padding: 0 0 0 20px; line-height: 1; letter-spacing: 0; font-size: 13px; text-align: left;}
#wrapper section.seg1 p.scroll a::before,
#wrapper section.seg1 p.scroll a::after{content: ""; position: absolute; border-left: 3px solid #FFF; height: 100%; left: 0; top: 0;}
#wrapper section.seg1 p.scroll a::before{border-left: 1px solid #FFF; left: 1px; opacity: 0.2;}
#wrapper section.seg1 p.scroll a::after{animation: scrollBar 2000ms infinite ease;}

@keyframes scrollBar {
    0% { height: 0%; top: 0; }
    50% { height: 100%; top: 0; }
    100% { height: 0%; top: 100%; }
}

@keyframes txtCover {
    0% { width: 0%; left: 0; }
    50% { width: 100%; left: 0; }
    100% { width: 0%; left: 100%; }
}

@keyframes spinLoad {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

#wrapper section.seg2{}
#wrapper section.seg2 div.inner{display: table; width: 100%; table-layout: fixed;}
#wrapper section.seg2 div.left{display: table-cell; padding: 110px 8vw 100px 9vw; background: #f8f8f8; text-align: left;}
#wrapper section.seg2 div.left p{font-size: 16px; padding: 0 0 30px;}
#wrapper section.seg2 div.right{display: table-cell; vertical-align: top; padding: 110px 0 50px; position: relative; width: 400px;}
#wrapper section.seg2 div.right::before{content: ""; position: absolute; width: 50%; height: 100%; left: 0; top: 0; background: #f8f8f8;}
#wrapper section.seg2 div.right *.hidden{transition: opacity 0.9s ease 0.3s, transform 0.9s ease 0.3s; transform: translate(-15px,20px) rotateY(0);}
#wrapper section.seg2 div.right *.hidden.show{transform: translate(0,0) rotateY(0);}
#wrapper section.seg2 h3{font-size: 35px; line-height: 1.7; font-weight: 600 !important; padding: 30px 0 40px;}
#wrapper section.seg2 h3 span{color: #fc0000;}

@media screen and (max-width: 1350px){
    #wrapper section.seg2 h3{font-size: 30px;}
}

#wrapper section.seg2 p.img{padding: 0 0 20px; position: relative; z-index: 2;}
#wrapper section.seg2 p.img img{width: 100%; height: auto;}
#wrapper section.seg2 p.name{text-align: right; padding: 0 30px 0 0; font-size: 18px; color: #888888; position: relative; z-index: 2;}

#wrapper section.seg3{}
#wrapper section.seg3 div.inner{padding: 110px 9vw 35px; text-align: left;}
#wrapper section.seg3 ul.mainList{display: flex; flex-wrap: wrap; justify-content: flex-start; width: calc(100% + 1px);}
#wrapper section.seg3 ul.mainList li{width: 25%; border-right: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; box-sizing: border-box;}

#wrapper section.seg3 ul.mainList li.hidden{transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s; transform: translate(0,20px) rotateY(15deg);}
#wrapper section.seg3 ul.mainList li.hidden.show{transform: translate(0,0) rotateY(0);}

#wrapper section.seg3 ul.mainList a{display: block; position: relative; background: #222;}
#wrapper section.seg3 ul.mainList p.flag{position: absolute; left: 0; top: 0; z-index: 10;}
#wrapper section.seg3 ul.mainList p.img img{width: 100%; height: auto; transition: all 0.5s ease;}
#wrapper section.seg3 ul.mainList div.txt{position: absolute; width: 80%; height: 80%; left: 10%; bottom: -5%; opacity: 0; display: flex; text-align: left; align-content: center; flex-wrap: wrap; transition: all 0.5s ease;}
#wrapper section.seg3 ul.mainList div.txt p.year{width: 100%; font-size: 35px; color: #fc0000; text-align: left; line-height: 1.5;}
#wrapper section.seg3 ul.mainList div.txt p.btn{text-align: left; padding: 0 0 10px;}
#wrapper section.seg3 ul.mainList div.txt h3{width: 100%; font-size: 20px; line-height: 1.6; color: #FFF; font-weight: 600 !important; text-align: left; padding: 0 0 25px;}

#wrapper section.seg3 ul.mainList a:hover p.img img{opacity: 0.2; transform: scale(1.05);}
#wrapper section.seg3 ul.mainList a:hover div.txt{opacity: 1; bottom: 10%;}

#wrapper section.seg4{}
#wrapper section.seg4 div.inner{padding: 180px 9vw 180px; text-align: left; background: #333 url(/corporate/history/90th_anniversary/img/vision_pc.jpg) no-repeat center center; background-size: cover;}
#wrapper section.seg4:not(.nonFixed) div.inner{background-attachment: fixed;}
#wrapper section.seg4 h2{color: #FFF;}
#wrapper section.seg4 p{font-size: 16px; line-height: 2.2; color: #FFF; padding: 55px 0 0;}

#wrapper section.seg5{background: #f0f0f0;}
#wrapper section.seg5 div.inner{padding: 110px 9vw 110px; text-align: left;}
#wrapper section.seg5 div.quizBase{background: #FFF;}
#wrapper section.seg5 div.quizMain{padding: 95px 100px; justify-content: space-between; flex-wrap: wrap; display: none; opacity: 0; visibility: hidden; transition: opacity 0.4s ease;}
#wrapper section.seg5 div.quizMain.show{display: flex; visibility: visible;}
#wrapper section.seg5 div.quizMain.show.on{opacity: 1;}
#wrapper section.seg5 div.quizMain.q div.left{width: 80px;}
#wrapper section.seg5 div.quizMain.q div.right{width: calc(100% - 120px);}
#wrapper section.seg5 div.quizMain.a div.left{width: 30%;}
#wrapper section.seg5 div.quizMain.a div.left img{width: 100%; height: auto;}
#wrapper section.seg5 div.quizMain.a div.right{width: 65%;}
#wrapper section.seg5 div.quizMain.a p.title{font-weight: 600 !important; font-size: 55px; line-height: 1.2; padding: 0 0 25px; display: none; color: #fc0000;}
#wrapper section.seg5 div.quizMain.a p.title.show{display: block;}
#wrapper section.seg5 div.quizMain.a p.title.correct{}
#wrapper section.seg5 div.quizMain.a p.answer{font-weight: 600 !important; font-size: 23px; padding: 0 0 20px;}
#wrapper section.seg5 div.quizMain.a p.answer span{font-size: 18px;}
#wrapper section.seg5 div.quizMain.a p.answer span font{display: none;}
#wrapper section.seg5 div.quizMain.a p.answer span font.show{display: inline;}
#wrapper section.seg5 div.quizMain.a p.description{font-size: 17px; padding: 0 0 20px;}
#wrapper section.seg5 div.quizMain.a p.link{font-size: 17px; padding: 0 0 30px;}
#wrapper section.seg5 div.quizMain.a p.link a{color: #fc0000; text-decoration: underline; padding: 0 25px 0 0; background: url(/corporate/history/90th_anniversary/img/mark_outer_link.png) no-repeat right center; background-size: 14px 13px;}
#wrapper section.seg5 div.quizMain.a dl{_zoom: 1; overflow: hidden; padding: 0 0 20px;}
#wrapper section.seg5 div.quizMain.a dt{float: left; font-size: 18px; letter-spacing: 0;}
#wrapper section.seg5 div.quizMain.a dt span{color: #FFF; display: block; background: #fc0000; line-height: 1.1; padding: 5px 11px;}
#wrapper section.seg5 div.quizMain.a dd{padding: 0 0 0 60px; font-size: 17px;}

#wrapper section.seg5 div.barBlock{width: 100%; padding: 90px 0 0; _zoom: 1; overflow: hidden;}
#wrapper section.seg5 div.barBlock div.bar{display: table; table-layout: fixed; width: 100%; margin: 0 0 30px;}
#wrapper section.seg5 div.barBlock div.bar span{background: #e4e4e4; display: table-cell; border-right: 2px solid #FFF; padding: 2px 0 3px;}
#wrapper section.seg5 div.barBlock div.bar span:last-child{border: none;}
#wrapper section.seg5 div.barBlock div.bar span.on{background: #fc0000;}
#wrapper section.seg5 div.barBlock ul.backBtnList{float: left;}
#wrapper section.seg5 div.barBlock ul.backBtnList li{display: inline-block;}
#wrapper section.seg5 div.barBlock ul.backBtnList button{color: #222; text-decoration: underline; padding: 0 15px 0 18px; border: none; width: auto; position: relative; font-size: 14px;}
#wrapper section.seg5 div.barBlock ul.backBtnList button::before{width: 0; height: 0; border-style: solid; border-width: 5px 6px 5px 0; border-color: transparent #222222 transparent transparent; content: ""; position: absolute; left: 0; top: 5px;}
#wrapper section.seg5 div.barBlock p.num{font-size: 14px; float: right; color: #777;}
#wrapper section.seg5 div.barBlock p.num span{color: #fc0000;}

#wrapper section.seg5 h2{padding: 0 0 35px;}
#wrapper section.seg5 #quiz{margin-top: -75px; padding-top: 75px; display: block;}
#wrapper section.seg5 p.markQ{font-size: 45px; font-weight: 600 !important; vertical-align: middle; text-align: center; letter-spacing: 0; color: #FFF;}
#wrapper section.seg5 p.markQ span{line-height: 1.3; line-height: 45px; background: #fc0000; display: block; vertical-align: middle;}
#wrapper section.seg5 p.txtQ{font-size: 23px; padding: 5px 0 50px;}
#wrapper section.seg5 div.btnBlock{display: flex; justify-content: space-between;}
#wrapper section.seg5 button{background: #FFF; display: block; padding: 15px 0; width: calc(50% - 23px); border-radius: 5px; border: 3px solid #222;}
#wrapper section.seg5 button.true{border-color: #fc0000;}
#wrapper section.seg5 button.next{border-color: #fc0000; font-size: 22px; color: #fc0000; width: 370px;}

#wrapper section.seg5 div.quizResult{display: none; opacity: 0; transition: opacity 0.4s ease;}
#wrapper section.seg5 div.quizResult.show{display: block; visibility: visible;}
#wrapper section.seg5 div.quizResult.show.on{opacity: 1;}
#wrapper section.seg5 div.quizResult div.block{padding: 100px 0 90px; text-align: center;}
#wrapper section.seg5 div.quizResult div.block p{font-size: 28px;}
#wrapper section.seg5 div.quizResult div.block p.num{font-size: 100px; line-height: 1; font-weight: 600 !important; padding: 20px 0 30px 10px;}
#wrapper section.seg5 div.quizResult div.block p.num span.correctN{color: #fc0000;}
#wrapper section.seg5 div.quizResult div.block p.num span.slash{font-size: 70px;}
#wrapper section.seg5 div.quizResult div.block p.num small{font-size: 30px; padding: 0 0 0 10px;}
#wrapper section.seg5 div.quizResult div.block button.backToQ1{color: #fc0000; text-decoration: underline; width: auto; border: none; font-size: 17px; margin: 40px auto 0;}

#wrapper section.seg5 div.quizResult p.shareTW{font-size: 23px; font-weight: 600 !important;}
#wrapper section.seg5 div.quizResult p.shareTW a{display: block; background: #13c0d6; padding: 20px 0; color: #FFF; text-align: center;}
#wrapper section.seg5 div.quizResult p.shareTW a span{display: inline-block; padding: 0 0 0 40px; background: url(/corporate/history/90th_anniversary/img/sns_tw.png) no-repeat left center; background-size: 27px 27px;}

#wrapper section.seg6{padding: 0 0 105px;}
#wrapper section.seg6 div.inner{padding: 110px 9vw 30px; text-align: left;}
#wrapper section.seg6 div.wpMain.pc{padding: 0 9vw; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
#wrapper section.seg6 div.wpMain.pc div.block{width: 47%; height: auto; padding: 0 0 30px;}
#wrapper section.seg6 div.wpMain.pc div.block p.num.one{letter-spacing: 0;}

#wrapper section.seg6 ul.slick-dots{position: absolute; bottom: 23px; left: 0; right: 0; vertical-align: top; margin: 0 auto; width: 120px; display: flex; height: 4px; overflow: hidden;}
#wrapper section.seg6 ul.slick-dots li{vertical-align: top; width: 40%;}
#wrapper section.seg6 ul.slick-dots li button{width: 100%; height: 4px; text-indent: -9999px; background: #eeeeee; padding: 0; vertical-align: top;}
#wrapper section.seg6 ul.slick-dots li.slick-active button{background: #fe1d25;}

#wrapper section.seg6 .slick-prev, 
#wrapper section.seg6 .slick-next{position: absolute; bottom: 0; z-index: 10; background: none; border: none; cursor: pointer; width: 50px; height: 50px; overflow: hidden; text-indent: -999px;}
#wrapper section.seg6 .slick-prev{left: 40px; background: url(/corporate/history/90th_anniversary/img/wallpaper_btn_prev.png) no-repeat center center; background-size: contain;}
#wrapper section.seg6 .slick-next{right: 40px; background: url(/corporate/history/90th_anniversary/img/wallpaper_btn_next.png) no-repeat center center; background-size: contain;}

#wrapper section.seg6 h2{}
#wrapper section.seg6 p.num{font-size: 130px; color: #f0f0f0; line-height: 1; font-weight: 600 !important; margin: 0 5px -30px 0; position: relative; z-index: 2; text-align: right;}
#wrapper section.seg6 p.img{padding: 0 0 30px;}
#wrapper section.seg6 p.img img{width: 100%; height: auto; border: 1px solid #cbcbcb;}
#wrapper section.seg6 p.link{font-size: 14px; padding: 0 0 15px;}
#wrapper section.seg6 p.link a{display: block; color: #fc0000; border: 2px solid #fc0000; padding: 10px 20px; text-align: left;}
#wrapper section.seg6 p.link a span{padding: 0 0 0 30px; background: url(/corporate/history/90th_anniversary/img/mark_dl.png) no-repeat left center; background-size: 20px 20px; display: inline-block;}

#wrapper section.seg6 div.barBlock{}

#wrapper section.seg7{height: 640px; position: relative; background: #222; overflow: hidden; cursor: pointer;}
#wrapper section.seg7::before{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #333; opacity: 0.4; z-index: 2;}
#wrapper section.seg7 iframe.video{position: absolute; border: none; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: calc(100vw / 16 * 9); min-height: 720px; min-width: 1280px; transition: opacity 0.5s ease;}
#wrapper section.seg7 div.inner{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; text-align: center; display: flex; flex-wrap: wrap; align-content: center; text-align: center;}
#wrapper section.seg7 h2{font-size: 33px; font-weight: 500; color: #FFF; width: 100%; padding: 0 0 20px;}
#wrapper section.seg7 p.btn{width: 100%;}
#wrapper section.seg7 p.btn img{transition: transform 0.5s ease;}

#wrapper section.seg7:hover p.btn img{transform: scale(0.8);}
#wrapper section.seg7:hover iframe.video{opacity: 0.5;}

#wrapper section.seg8{background: #222;}
#wrapper section.seg8 div.inner{padding: 110px 9vw 120px; text-align: left;}
#wrapper section.seg8 div.topicWrap{display: flex; width: calc(100% + 20px);}
#wrapper section.seg8 div.topicWrap div.block{background: #FFF; width: calc(25% - 20px); margin: 0 20px 0 0;}
#wrapper section.seg8 div.topicWrap div.inside{padding: 20px;}
#wrapper section.seg8 div.topicWrap p.img{overflow: hidden;}
#wrapper section.seg8 div.topicWrap p.img a img{width: 100%; height: auto; transition: opacity 0.5s ease, transform 0.5s ease;}
#wrapper section.seg8 div.topicWrap p.img a:hover img{opacity: 0.8; transform: scale(1.06);}
#wrapper section.seg8 div.topicWrap p.cat{font-size: 12px; color: #757575;}
#wrapper section.seg8 div.topicWrap p.cat a{color: #757575;}
#wrapper section.seg8 div.topicWrap p.cat a:hover{text-decoration: underline;}
#wrapper section.seg8 div.topicWrap p.cat a:first-child{border-right: 1px solid #999; margin-right: 5px; padding-right: 5px;}
#wrapper section.seg8 div.topicWrap p.cat a.bunka{color: #e84483;}
#wrapper section.seg8 div.topicWrap p.cat a.kurashi{color: #f08302;}
#wrapper section.seg8 div.topicWrap p.cat a.mirai{color: #03a2e4;}

#wrapper section.seg8 div.topicWrap p.date{font-size: 12px; color: #757575; padding: 0 0 15px;}
#wrapper section.seg8 div.topicWrap h3{font-size: 14px; padding: 0 0 10px;}
#wrapper section.seg8 div.topicWrap h3 a{color: #111;}
#wrapper section.seg8 div.topicWrap h3 a:hover{text-decoration: underline;}
#wrapper section.seg8 h2{padding: 0 0 50px; color: #8c8c8c;}
#wrapper section.seg8 p.link{font-size: 16px; padding: 60px 0 0; text-align: center;}
#wrapper section.seg8 p.link a{color: #FFF; display: inline-block; background: #555; padding: 15px 60px;}

#wrapper section.seg9{background: #111; display: flex;}
#wrapper section.seg9 div.block{width: 25%;}
#wrapper section.seg9 div.block a{display: block; position: relative; transition: opacity 0.5s ease}
#wrapper section.seg9 div.block a img{width: 100%; height: auto; transition: transform 0.5s ease;}
#wrapper section.seg9 div.block a div.inner{display: flex; flex-wrap: wrap; align-content: center; align-items: center; text-align: center; width: 100%; height: 100%; left: 0; top: 0; position: absolute;}
#wrapper section.seg9 div.block a h3{font-size: 40px; color: #FFF; font-weight: 900; width: 100%;}
#wrapper section.seg9 div.block a p{font-size: 16px; color: #FFF; width: 100%;}
#wrapper section.seg9 div.block a:hover{opacity: 0.8;}
#wrapper section.seg9 div.block a:hover img{transform: scale(1.1);}

#wrapper div#contentsFooter{}
#wrapper div#contentsFooter p.btnTop{}
#wrapper div#contentsFooter p.btnTop a{background: #555; display: block;}
#wrapper div#contentsFooter div.linkBar{background: #0a0a0a; padding: 25px 60px; display: flex; justify-content: space-between; align-items: center;}
#wrapper div#contentsFooter div.linkBar ul.breadCrumbs{color: #888; font-size: 13px;}
#wrapper div#contentsFooter div.linkBar ul.breadCrumbs li{display: inline-block;}
#wrapper div#contentsFooter div.linkBar ul.breadCrumbs li::after{content: ">"; padding: 0 5px 0 10px;}
#wrapper div#contentsFooter div.linkBar ul.breadCrumbs li:last-child::after{display: none;}
#wrapper div#contentsFooter div.linkBar ul.breadCrumbs a{color: #888; text-decoration: underline;}
#wrapper div#contentsFooter div.linkBar ul.breadCrumbs a:hover{color: #CCC;}
#wrapper div#contentsFooter div.linkBar ul.snsList{text-align: right;}
#wrapper div#contentsFooter div.linkBar ul.snsList li{display: inline-block; padding: 0 0 0 5px;}

footer#footer .pageTop{z-index: 10;}

/* MODAL */
#wrapper div.modal{position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 30000; display: flex; align-content: center; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;}
#wrapper div.modal.open{opacity: 1; visibility: visible;}
#wrapper div.modal span.bg{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(68, 68, 68, 0.9);}
#wrapper div.modal#history div.inner{width: 92%; max-width: 1600px; position: relative; z-index: 1; transform: translateY(15px); transition: transform 0.5s ease;}
#wrapper div.modal#history.open div.inner{transform: translateY(0);}
#wrapper div.modal#history div.historyMain{background: #FFF; display: table; width: 100%;}
#wrapper div.modal#history div.historyMain div.left{display: table-cell; width: 50%; vertical-align: top;}
#wrapper div.modal#history div.historyMain div.right{display: table-cell; width: 50%; vertical-align: middle; padding: 35px 50px 40px; text-align: left;}
#wrapper div.modal#history div.historyMain p.img img{width: 100%; height: auto;}
#wrapper div.modal#history div.historyMain p.historyYear.en{font-size: 38px; color: #fc0000; padding: 0 0 20px; letter-spacing: 0; line-height: 1;}
#wrapper div.modal#history div.historyMain p.historyDescription{font-size: 15.5px;}
#wrapper div.modal#history div.historyMain p.link{font-size: 15.5px; padding: 0; margin: 20px 0 0 0;}
#wrapper div.modal#history div.historyMain p.link.none{display: none;}
#wrapper div.modal#history div.historyMain p.link a{color: #fc0000; text-decoration: underline; padding: 0 25px 0 0; background: url(/corporate/history/90th_anniversary/img/mark_outer_link.png) no-repeat right center; background-size: 14px 13px;}
#wrapper div.modal#history div.historyMain h2{font-size: 23px; font-weight: 600 !important; padding: 0 0 20px;}
#wrapper div.modal#history div.btnWrap{margin: 1px 0 0 auto; width: 101px; display: flex; justify-content: flex-end;}
#wrapper div.modal#history div.btnWrap button:first-child{margin-right: 1px;}

#wrapper div.modal button{background: none; border: none; border-radius: 0; padding: 0; cursor: pointer; display: block; width: 50px; height: 50px;}
#wrapper div.modal button.btnHistoryClose{margin: 0 0 1px auto;}

#wrapper div.modal#video div.inner{width: 70%; max-width: 1600px; position: relative; z-index: 1; transform: translateY(20px); transition: transform 0.4s ease; padding: 0 0 50px;}
#wrapper div.modal#video div.inner iframe{border: none;}

#wrapper div.modal#video div.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#wrapper div.modal#video div.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/* ::::::::::::::::::::::::::::::::: LARGE PC ::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 1500px){
    #wrapper section.seg2 div.inner{width: calc(100% - 9vw);}
    #wrapper section.seg2 p.name{padding: 0;}
    
}
@media screen and (min-width: 1600px){
    #wrapper section.seg3{background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); padding: 0 9vw 9vw;}
    #wrapper section.seg3 div.inner{padding-left: 0; padding-right: 0;}
    #wrapper section.seg3 ul.mainList{margin: 0 auto;}
}

/* ::::::::::::::::::::::::::::::::: SMALL PC ::::::::::::::::::::::::::::::::: */
@media screen and (max-width: 1250px){
    
    #wrapper section.seg3 ul.mainList div.txt p.btn{display: none;}
    
    #wrapper section.seg5 div.quizMain.a p.answer span{font-size: 17px; display: block;}
    
    /* MODAL */
    #wrapper div.modal{display: block; overflow: hidden;}
    #wrapper div.modal.open{}
    #wrapper div.modal span.bg{}
    #wrapper div.modal#history div.inner{width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(0);}
    #wrapper div.modal#history.open div.inner{transform: translateY(0);}
    #wrapper div.modal#history div.historyMain{display: block; width: calc(100% - 40px); margin: 70px 20px 0;}
    #wrapper div.modal#history div.historyMain div.left{display: block; width: 100%; }
    #wrapper div.modal#history div.historyMain div.right{display: block; width: auto; padding: 40px 20px;}
    #wrapper div.modal#history div.historyMain p.img img{}
    #wrapper div.modal#history div.historyMain p.historyYear.en{font-size: 30px;}
    #wrapper div.modal#history div.historyMain p.historyDescription{font-size: 15px;}
    #wrapper div.modal#history div.historyMain p.link{font-size: 15px;}
    #wrapper div.modal#history div.historyMain h2{font-size: 20px;}
    #wrapper div.modal#history div.btnWrap{margin: 1px 20px 20px auto;}
    #wrapper div.modal#history div.btnWrap button{position: relative;}

    #wrapper div.modal button{}
    #wrapper div.modal button.btnHistoryClose{margin: 0; position: fixed; top: 0; right: 0;}

    #wrapper div.modal#video div.inner{width: 100%; height: 100%; padding: 0; position: absolute; left: 0; top: 0; transform: translateY(0);}
    #wrapper div.modal#video div.inner iframe{}

    #wrapper div.modal#video div.video {top: 50%; transform: translateY(-50%);}
    #wrapper div.modal#video div.video iframe {}
    #wrapper div.modal#video div.video div.inner{}
}
    
/* ::::::::::::::::::::::::::::::::: PC ::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 980px){
    .sp{display:none!important;}
    
    .hoverAlpha{transition: opacity 0.3s ease;}
    .hoverAlpha:hover{opacity: 0.7;}
}

/* ::::::::::::::::::::::::::::::::: TA-SP ::::::::::::::::::::::::::::::::: */
@media screen and (max-width: 979px){
    .pc{display:none!important;}
	
    #wrapper *{}
    #wrapper {overflow-x: hidden;}
    #wrapper *.en{}

    body.fixed {}

    #wrapper a{}
    #wrapper a:hover{}
    #wrapper button, #wrapper input, #wrapper select, #wrapper textarea{}
    #wrapper button{}

    #wrapper img{}
    #wrapper table{}
    #wrapper ul{}

    #wrapper div.mainContents{}
    #wrapper *{}
    #wrapper p, 
    #wrapper ul, 
    #wrapper table{}

    #wrapper section h2.en{font-size: 65px;}
    #wrapper section h2.en span{}

    /* seg */

    #wrapper section.seg1{height: calc(100vh - 64px); min-height: 500px; background-image: url(/corporate/history/90th_anniversary/img/kv_sp.jpg);}
    #wrapper section.seg1 div.inner{height: auto; width: calc(100% - 50px); left: 25px; top: 50%; bottom: inherit; transform: translateY(-50%);}
    #wrapper section.seg1 h1{font-size: 90px; line-height: 1.1; padding: 0 0 15px;}
    #wrapper section.seg1 p.lead{font-size: 18px;}
    #wrapper section.seg1 p.logo{right: 15px; top: 25px;}
    #wrapper section.seg1 p.logo img{width: 110px; height: auto;}
    #wrapper section.seg1 p.scroll{height: 60px; left: 25px;}
    #wrapper section.seg1 p.scroll a{height: 60px; font-size: 11px; padding: 0 0 0 16px;}
    #wrapper section.seg1 p.scroll a::before,
    #wrapper section.seg1 p.scroll a::after{}
    #wrapper section.seg1 p.scroll a::before{}
    #wrapper section.seg1 p.scroll a::after{}
    
    @media screen and (max-width: 767px){
        #wrapper section.seg1{height: calc(100vh - 40px);}
    }

    #wrapper section.seg2{}
    #wrapper section.seg2 div.inner{display: block;}
    #wrapper section.seg2 div.left{display: block; padding: 70px 20px 20px 20px;}
    #wrapper section.seg2 div.left p{}
    #wrapper section.seg2 div.right{display: block; padding: 0 0 20px; position: relative; width: 100%; max-width: inherit;}
    #wrapper section.seg2 div.right::before{width: 100%; height: 50%; left: 0; top: 0;}
    #wrapper section.seg2 h3{font-size: 23px; padding: 30px 0 30px;}
    #wrapper section.seg2 h3 span{}

    #wrapper section.seg2 p.img{padding: 0 0 15px 32%;}
    #wrapper section.seg2 p.img img{}
    #wrapper section.seg2 p.name{padding: 0 20px 0 0; font-size: 17px;}

    #wrapper section.seg3{}
    #wrapper section.seg3 div.inner{padding: 40px 20px 30px;}
    #wrapper section.seg3 ul.mainList{}
    #wrapper section.seg3 ul.mainList li{width: 50%;}
    #wrapper section.seg3 ul.mainList a{}
    #wrapper section.seg3 ul.mainList p.flag{}
    #wrapper section.seg3 ul.mainList p.flag img{width: 80px; height: 40px;}
    #wrapper section.seg3 ul.mainList p.img img{display: inline;}
    #wrapper section.seg3 ul.mainList div.txt{width: 100%; padding: 10px 0; background: rgba(30, 30, 30, 0.8); height: auto; left: 0; bottom: 0; opacity: 1; display: block; transition: none;}
    #wrapper section.seg3 ul.mainList div.txt h3{color: #FFF; font-size: 13px; line-height: 20px; height: 40px; overflow: hidden; padding: 0 10px; width: auto;}

    #wrapper section.seg3 ul.mainList a:hover p.img img{opacity: 1; transform: scale(1);}
    #wrapper section.seg3 ul.mainList a:hover div.txt{opacity: 1; bottom: 0;}

    #wrapper section.seg4{}
    #wrapper section.seg4 div.inner{padding: 70px 20px 70px; background-size: url(/corporate/history/90th_anniversary/img/vision_sp.jpg);}
    #wrapper section.seg4 h2{}
    #wrapper section.seg4 p{line-height: 2.0; padding: 35px 0 0;}

    #wrapper section.seg5{}
    #wrapper section.seg5 div.inner{padding: 70px 20px 70px;}
    #wrapper section.seg5 div.quizBase{}
    #wrapper section.seg5 div.quizMain{padding: 40px 20px 50px; margin: 0;}
    #wrapper section.seg5 div.quizMain.show{display: block;}
    #wrapper section.seg5 div.quizMain.show.on{}
    #wrapper section.seg5 div.quizMain.q div.left{width: 70px;}
    #wrapper section.seg5 div.quizMain.q div.right{width: 100%;}
    #wrapper section.seg5 div.quizMain.a div.left{width: 100%;}
    #wrapper section.seg5 div.quizMain.a div.left img{}
    #wrapper section.seg5 div.quizMain.a div.right{width: 100%;}
    #wrapper section.seg5 div.quizMain.a div.right p.img{padding: 0 0 30px;}
    #wrapper section.seg5 div.quizMain.a div.right img{width: 100%; height: auto;}
    #wrapper section.seg5 div.quizMain.a p.title{font-size: 30px; padding: 5px 0 25px; text-align: center;}
    #wrapper section.seg5 div.quizMain.a p.title.show{}
    #wrapper section.seg5 div.quizMain.a p.title.correct{}
    #wrapper section.seg5 div.quizMain.a p.answer{}
    #wrapper section.seg5 div.quizMain.a p.answer span{font-size: 16px;}
    #wrapper section.seg5 div.quizMain.a p.description{font-size: 15px; padding: 0 0 25px;}
    #wrapper section.seg5 div.quizMain.a p.link{font-size: 15px; padding: 0 0 30px;}
    #wrapper section.seg5 div.quizMain.a p.link a{}
    #wrapper section.seg5 div.quizMain.a dl{padding: 0 0 10px;}
    #wrapper section.seg5 div.quizMain.a dt{float: none; font-size: 18px;}
    #wrapper section.seg5 div.quizMain.a dt span{display: inline-block;}
    #wrapper section.seg5 div.quizMain.a dd{padding: 10px 0 0; font-size: 16px;}
    
    #wrapper section.seg5 div.barBlock{padding: 45px 0 0;}
    #wrapper section.seg5 div.barBlock div.bar{margin: 0 0 25px;}
    #wrapper section.seg5 div.barBlock div.bar span{}
    #wrapper section.seg5 div.barBlock div.bar span:last-child{}
    #wrapper section.seg5 div.barBlock div.bar span.on{}
    #wrapper section.seg5 div.barBlock ul.backBtnList{width: calc(100% - 60px);}
    #wrapper section.seg5 div.barBlock ul.backBtnList li{padding: 0 0 7px;}
    #wrapper section.seg5 div.barBlock ul.backBtnList button{}
    #wrapper section.seg5 div.barBlock ul.backBtnList button::before{}
    #wrapper section.seg5 div.barBlock p.num{}
    #wrapper section.seg5 div.barBlock p.num span{}
    
    #wrapper section.seg5 h2{}
    #wrapper section.seg5 #quiz{margin-top: -65px; padding-top: 65px;}
    #wrapper section.seg5 p.markQ{font-size: 35px;}
    #wrapper section.seg5 p.txtQ{font-size: 18px; padding: 20px 0 30px;}
    #wrapper section.seg5 div.btnBlock{}
    #wrapper section.seg5 button{padding: 10px 0; width: calc(50% - 10px);}
    #wrapper section.seg5 button img{width: 35px; height: 35px;}
    #wrapper section.seg5 button.true{}
    #wrapper section.seg5 button.next{font-size: 17px; width: calc(100% - 6px);}

    #wrapper section.seg5 div.quizResult{margin: 0;}
    #wrapper section.seg5 div.quizResult.show{}
    #wrapper section.seg5 div.quizResult div.block{padding: 60px 0 60px;}
    #wrapper section.seg5 div.quizResult div.block p{font-size: 22px;}
    #wrapper section.seg5 div.quizResult div.block p.num{font-size: 70px; padding: 10px 0 20px 10px;}
    #wrapper section.seg5 div.quizResult div.block p.num span.correctN{}
    #wrapper section.seg5 div.quizResult div.block p.num span.slash{font-size: 60px;}
    #wrapper section.seg5 div.quizResult div.block p.num small{font-size: 25px;}
    #wrapper section.seg5 div.quizResult div.block button.backToQ1{margin: 20px auto 0;}

    #wrapper section.seg5 div.quizResult p.shareTW{font-size: 19px;}
    #wrapper section.seg5 div.quizResult p.shareTW a{}
    #wrapper section.seg5 div.quizResult p.shareTW a span{}
    
    #wrapper section.seg6{padding: 0 0 60px;}
    #wrapper section.seg6 div.inner{padding: 70px 20px 30px;}
    #wrapper section.seg6 div.wpMain.sp{padding: 0 0 75px; margin: 0; _zoom: 1; overflow: hidden; position: relative;}
    #wrapper section.seg6 div.wpMain.sp div.block{width: 250px; height: auto; padding: 0 10px; float: left;}
    #wrapper section.seg6 div.wpMain.sp div.block p.num.one{letter-spacing: 0;}
    #wrapper section.seg6 div.wpMain.sp div.slick-list{padding: 0!important; _zoom: 1; overflow: hidden;}

    #wrapper section.seg6 ul.slick-dots{bottom: 13px;}
    #wrapper section.seg6 ul.slick-dots li{}
    #wrapper section.seg6 ul.slick-dots li button{}
    #wrapper section.seg6 ul.slick-dots li.slick-active button{}

    #wrapper section.seg6 .slick-prev, 
    #wrapper section.seg6 .slick-next{width: 30px; height: 30px;}
    #wrapper section.seg6 .slick-prev{left: 20px;}
    #wrapper section.seg6 .slick-next{right: 20px;}

    #wrapper section.seg6 h2{}
    #wrapper section.seg6 p.num{font-size: 70px; margin: 0 0 -25px -15px; text-align: left;}
    #wrapper section.seg6 p.img{}
    #wrapper section.seg6 p.img img{}
    #wrapper section.seg6 p.link{padding: 0;}
    #wrapper section.seg6 p.link a{}
    #wrapper section.seg6 p.link a span{}    

    #wrapper section.seg7{height: 400px;}
    #wrapper section.seg7::before{}
    #wrapper section.seg7 iframe.video{width: 992px; min-width: 992px; height: 558px; min-height: 558px; left: calc(50% - 496px); top: -40px; transform: none;}
    #wrapper section.seg7 div.inner{}
    #wrapper section.seg7 h2{font-size: 22px;}
    #wrapper section.seg7 p.btn{}
    #wrapper section.seg7 p.btn img{width: 60px; height: 60px;}

    #wrapper section.seg7:hover p.btn img{transform: scale(1);}
    #wrapper section.seg7:hover iframe.video{opacity: 1;}

    #wrapper section.seg8{}
    #wrapper section.seg8 div.inner{padding: 70px 15px 70px;}
    #wrapper section.seg8 div.topicWrap{}
    #wrapper section.seg8 div.topicWrap a{}
    #wrapper section.seg8 div.topicWrap{width: calc(100% + 15px); flex-wrap: wrap;}
    #wrapper section.seg8 div.topicWrap div.block{width: calc(50% - 15px); margin: 0 15px 15px 0; padding: 0; display: block;}
    #wrapper section.seg8 div.topicWrap div.inside{padding: 15px 12px;}
    #wrapper section.seg8 div.topicWrap p.img{}
    #wrapper section.seg8 div.topicWrap p.img a img{}
    #wrapper section.seg8 div.topicWrap p.img a:hover img{opacity: 1; transform: scale(1);}
    #wrapper section.seg8 div.topicWrap p.cat{line-height: 1;}
    #wrapper section.seg8 div.topicWrap p.cat a{}
    #wrapper section.seg8 div.topicWrap p.cat a:hover{text-decoration: none;}
    #wrapper section.seg8 div.topicWrap p.cat a:first-child{}
    #wrapper section.seg8 div.topicWrap p.cat a.bunka{}
    #wrapper section.seg8 div.topicWrap p.cat a.kurashi{}
    #wrapper section.seg8 div.topicWrap p.cat a.mirai{}
    #wrapper section.seg8 div.topicWrap p.date{padding: 10px 0 10px; line-height: 1;}
    #wrapper section.seg8 div.topicWrap h3{line-height: 1.64; padding: 0;}
    #wrapper section.seg8 div.topicWrap h3 a{}
    #wrapper section.seg8 div.topicWrap h3 a:hover{text-decoration: none;}
    #wrapper section.seg8 h2{padding: 0 0 25px;}
    #wrapper section.seg8 p.link{padding: 30px 0 0;}
    #wrapper section.seg8 p.link a{display: block; padding: 12px 0;}

    #wrapper section.seg9{flex-wrap: wrap;}
    #wrapper section.seg9 div.block{width: 50%;}
    #wrapper section.seg9 div.block a{}
    #wrapper section.seg9 div.block a img{}
    #wrapper section.seg9 div.block a div.inner{}
    #wrapper section.seg9 div.block a h3{font-size: 35px; line-height: 1.4;}
    #wrapper section.seg9 div.block a p{font-size: 14px;}
    #wrapper section.seg9 div.block a:hover{opacity: 1;}
    #wrapper section.seg9 div.block a:hover img{transform: scale(1);}

    #wrapper div#contentsFooter{}
    #wrapper div#contentsFooter p.btnTop{}
    #wrapper div#contentsFooter p.btnTop a{}
    #wrapper div#contentsFooter div.linkBar{padding: 0; display: block;}
    #wrapper div#contentsFooter div.linkBar ul.breadCrumbs{background: #1e1e1e; text-align: left; padding: 10px 20px;}
    #wrapper div#contentsFooter div.linkBar ul.breadCrumbs li{}
    #wrapper div#contentsFooter div.linkBar ul.breadCrumbs li::after{}
    #wrapper div#contentsFooter div.linkBar ul.breadCrumbs li:last-child::after{}
    #wrapper div#contentsFooter div.linkBar ul.breadCrumbs a{}
    #wrapper div#contentsFooter div.linkBar ul.breadCrumbs a:hover{}
    #wrapper div#contentsFooter div.linkBar ul.snsList{text-align: center;}
    #wrapper div#contentsFooter div.linkBar ul.snsList li{padding: 15px 5px;}

    footer#footer .pageTop{}

	
}

/* ::::::::::::::::::::::::::::::::: SP ::::::::::::::::::::::::::::::::: */
@media screen and (max-width: 599px){
    #wrapper section h2.en{font-size: 50px;}
    
    #wrapper section.seg1 h1{font-size: 62px; line-height: 1.1; padding: 0 0 15px;}
    
    #wrapper section.seg9{display: block;}
    #wrapper section.seg9 div.block{width: 100%;}
}