/* ヘッダーメイン */ @media screen and (min-width: 641px){ #thmain { width: 100%; margin: -115px 0px 100px 0px; position: relative; z-index: -2; } #thmain .bxslider p { margin: 0px; } #thmain .bxslider p img { width: 100%; -webkit-transition: all 0s; transition: all 0s; } #thmain .bxslider .hli { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index: 3; } #thmain .bx-viewport { overflow: visible!important; } #thmain .bx-pager { text-align: center; position: absolute; bottom: 35px; left: 0; right: 0; z-index: 1; } #thmain .bx-pager .bx-pager-item { display: inline-block; *zoom: 1; *display: inline; } #thmain .bx-default-pager a { width: 10px; height: 10px; background: #ffffff; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; margin: 0px 6px 0px 6px; display: block; text-indent: -9999px; outline: 0; box-sizing: border-box; } #thmain .bx-default-pager a:hover, #thmain .bx-default-pager a.active { background: #111111; } } @media screen and (max-width: 640px){ #thmain { width: 100%; margin: 18px 0px 30px 0px; overflow: hidden; position: relative; z-index: -2; } #thmain .bxslider p { margin: 0px; } #thmain .bxslider p img { width: 100%; /*height: calc(100vh - 78px);*/ -webkit-transition: all 0s; transition: all 0s; } #thmain .bxslider .hli { width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index: 3; } #thmain .bx-viewport { overflow: visible!important; } #thmain .bx-pager { text-align: center; position: absolute; bottom: 15px; left: 0; right: 0; z-index: 1; } #thmain .bx-pager .bx-pager-item { display: inline-block; *zoom: 1; *display: inline; } #thmain .bx-default-pager a { width: 10px; height: 10px; background: #ffffff; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; margin: 0px 6px 0px 6px; display: block; text-indent: -9999px; outline: 0; box-sizing: border-box; } #thmain .bx-default-pager a:hover, #thmain .bx-default-pager a.active { background: #111111; } } /* トップページ */ @media screen and (min-width: 641px){ #top { line-height: 200%; margin: 0px 0px -108px 0px; overflow: hidden; } #top h3 { margin: 0px 0px 40px 0px; text-align: center; } #top .cor01 { width: 320px; background: #ea7100; font-size: 14px; line-height: 50px; color: #ffffff; margin: 0px auto 100px auto; text-align: center; display: inline-block; } #top .cor01 { width: 320px; background: #ea7100; font-size: 14px; line-height: 50px; color: #ffffff; margin: 0px 50px 100px 255px; text-align: center; display: inline-block; } #top .ins01 { width: 320px; border: 1px #111111 solid; font-size: 14px; line-height: 48px; margin: 0px 0px 100px 0px; text-align: center; display: inline-block; box-sizing: border-box; } #top .hol { width: 700px; background: url(img/dia.png) left top; margin: 0px auto 100px auto; padding: 10px; box-sizing: border-box; } #top .hol ol { width: 100%; background: #ffffff; margin: 0px; padding: 20px; overflow: hidden; box-sizing: border-box; } #top .hol h4 { font-size: 14px; margin: 0px 0px 10px 0px; text-align: center; } #top .thban { width: 1200px; margin: 0px auto 100px auto; } #top .thban a:first-child { margin: 0px 50px 0px 0px; float: left; } #top .est { width: 1200px; height: 200px; background: url(img/est.jpg) no-repeat; font-size: 48px; font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 100%; color: #ffffff; margin: 0px auto 100px auto; padding: 75px 63px 0px 0px; text-align: right; display: block; box-sizing: border-box; } /* #top .est img { height: 36px; margin: 83px 65px 0px 0px; filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%); } */ #top .fea { width: 100%; height: 700px; background: url(img/feabg.jpg) no-repeat; background-size: cover; padding: 100px 0px 0px 0px; box-sizing: border-box; } #top .fea dl { width: 831px; height: 470px; background: url(img/fea.png) no-repeat right; margin: 0px auto 0px auto; padding: 150px 0px 0px 0px; box-sizing: border-box; } #top .fea dd { width: 600px; margin: 0px auto 30px auto; letter-spacing: -0.02em; } #top .fea dt { width: 700px; margin: 0px auto 0px auto; } #top .fea dt a { width: 226px; background: url(img/arr01.png) no-repeat 202px center; background-color: #111111; border-radius: 23px; -moz-border-radius: 23px; -webkit-border-radius: 23px; line-height: 46px; color: #ffffff; margin: 0px 10px 0px 0px; float: left; text-align: center; display: block; box-sizing: border-box; } #top .fea dt a:last-child { margin: 0px 0px 0px 0px; } #top .eve { width: 100%; background: url(img/bg.png) center top; padding: 100px 0px 50px 0px; overflow: hidden; box-sizing: border-box; } #top .eve ul { width: 1200px; margin: 0px auto 0px auto; display: flex; flex-wrap: wrap; } #top .eve a { width: 262px; background: #ffffff; margin: 0px 50px 50px 0px; float: left; display: block; position: relative; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); } #top .eve a:nth-child(4n) { margin: 0px 0px 50px 0px; } #top .eve a:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 0 6px 6px; border-color: transparent transparent #b6bdc3 transparent; position: absolute; right: 3px; bottom: 3px; } #top .eve a img { width: 100%; height: auto; } #top .eve h4 { font-size: 14px; line-height: 150%; margin: 20px; } #top .eve p { font-size: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 20px; color: #959595; margin: 0px 20px 20px 20px; } #top .eve p span { width: 50px; background: #51b7d9; font-weight: normal; color: #ffffff; margin: 0px 10px 0px 0px; text-align: center; display: inline-block; } #top .wor { width: 100%; padding: 100px 0px 100px 0px; } #top .wor h3 { margin: 0px 0px 40px 30px; } #top .wor .mor { width: 260px; background: url(img/arr01.png) no-repeat 236px center; background-color: #111111; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; line-height: 40px; color: #ffffff; margin: 50px auto 0px auto; text-align: center; display: block; box-sizing: border-box; } #top .lin a { width: 100%; display: table; } #top .lin dt { width: 71.42%; display: table-cell; } #top .lin a:nth-child(2) dt { background: url(img/lin01.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(3) dt { background: url(img/lin02.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(4) dt { background: url(img/lin03.jpg) no-repeat center; background-size: cover; } #top .lin dd { width: 28.58%; line-height: 180%; color: #ffffff; font-weight: bold; text-align: center; display: table-cell; position: relative; } #top .lin a:nth-child(2) dd { background: url(img/lin01bg.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(3) dd { background: url(img/lin02bg.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(4) dd { background: url(img/lin03bg.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(2) p:before { content: ''; width: 85px; height: 85px; background: url(img/linpop.png) no-repeat; position: absolute; left: 10px; top: 10px; } #top .lin h4 { margin: 70px 0px 20px 0px; } #top .lin p { width: 260px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; font-weight: normal; line-height: 30px; color: #ffffff; margin: 30px auto 70px auto; text-align: center; box-sizing: border-box; } #top .lin a:nth-child(2) p { background: url(img/lin01arr.png) no-repeat 236px center; color: #EC7890; background-color: #ffffff; } #top .lin a:nth-child(3) p { background: url(img/lin02arr.png) no-repeat 236px center; background-color: #ffffff; color: #82CAC1; } #top .lin a:nth-child(4) p { background: url(img/lin03arr.png) no-repeat 236px center; background-color: #ffffff; color: #B27A48; } #top .you { width: 100%; padding: 100px 0px 100px 0px; } #top .you ul { width: 1200px; margin: 0px auto 0px auto; display: flex; flex-wrap: wrap; } #top .you li { width: 366px; margin: 0px 50px 0px 0px; float: left; } #top .you li:last-child { margin: 0px; } #top .you p { width: 100%; margin: 0px 0px 20px 0px; padding-top: 56.25%; position: relative; } #top .you iframe { width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0; } #top .you h4 { font-size: 14px; line-height: 150%; margin: 0px; } #top .you .mor { width: 260px; background: url(img/arr01.png) no-repeat 236px center; background-color: #111111; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; line-height: 40px; color: #ffffff; margin: 50px auto 0px auto; text-align: center; display: block; box-sizing: border-box; } #top .news { width: 100%; background: url(img/bg.png) center top; padding: 100px 0px 50px 0px; overflow: hidden; box-sizing: border-box; } #top .news .inf { width: 550px; margin: 0px 100px 50px 0px; float: left; } #top .news .inf a { width: 100%; border-top: 1px #b6bdc3 solid; padding: 30px 0px 30px 0px; display: table; } #top .news .inf a:last-child { border-bottom: 1px #b6bdc3 solid; } #top .news .inf dt { width: 120px; height: 120px; display: table-cell; } #top .news .inf dt img { width: 100%; height: auto; } #top .news .inf dd { width: 430px; padding: 0px 0px 0px 20px; font-size: 15px; font-weight: bold; display: table-cell; vertical-align: middle; box-sizing: border-box; } #top .news .inf p { font-size: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; color: #959595; margin: 0px 0px 5px 0px; } #top .news .inf span { width: 170px; background: #51b7d9; font-size: 12px; font-weight: normal; line-height: 24px; color: #ffffff; margin: 10px 0px 0px 0px; text-align: center; display: block; } #top .news .rea { width: 550px; float: right; } #top .news .rea table { width: 100%; } #top .news .rea td, #top .news .rea td span { font-size: 14px !important; } #top .news .rea .tksnBox table { background: #b6bdc3; margin: 0px 0px 45px 0px !important; } #top .news .rea .tksnBox table td { background: #ffffff; } #top .news .rea table img { width: 100%; height: auto; } #top .news .rea td br { display: none; } #top .news .rea td span { margin: 0px 0px 0px 10px; } #top .voi { width: 100%; background: url(img/voibg.jpg) center top; padding: 100px 0px 100px 0px; overflow: hidden; box-sizing: border-box; } #top .voi h3 { margin: -20px 0px 40px 98px; } #top .voi ul { width: 97%; border: 1px #ffffff dashed; margin: 0px auto; display: table; } #top .voi li { width: 33.33%; border-right: 1px #ffffff dashed; font-size: 12px; color: #ffffff; text-align: center; display: table-cell; position: relative; } #top .voi li:nth-child(1) { background: url(img/voiite01.png) no-repeat 11% 250px; } #top .voi li:nth-child(2) { background-image: url(img/voiite02.png), url(img/voiite03.png); background-repeat: no-repeat, no-repeat; background-position: 10% 250px, 78% 57px; } #top .voi li:nth-child(3) { background: url(img/voiite04.png) no-repeat 82% 71px; border: none; } #top .voi p { width: 300px; height: 280px; margin: 50px auto 0px auto; position: relative; } #top .voi p:before { content: ''; width: 301px; height: 277px; background: url(img/voilin.png) no-repeat; position: absolute; left: -1px; top: 3px; z-index: 1; } #top .voi svg { position: absolute; left: 0px; top: 0px; } #top .voi p img { width: 100%; height: auto; -webkit-clip-path: url(#svgPath); clip-path: url(#svgPath); } /* #top .voi p img { width: 100%; mask-image: url('img/voimas.png'); -webkit-mask-image: url('img/voimas.png'); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } */ #top .voi h4 { font-size: 14px; margin: 20px 0px 5px 0px; } #top .voi a { width: 260px; background: url(img/arr01.png) no-repeat 236px center; background-color: #111111; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; line-height: 40px; color: #ffffff; margin: 20px auto 25px auto; text-align: center; display: block; box-sizing: border-box; } } @media screen and (max-width: 640px){ #top { line-height: 200%; margin: 0px 0px -58px 0px; overflow: hidden; } #top h3 { margin: 0px 0px 40px 0px; text-align: center; } #top .cor01 { width: 260px; background: #ea7100; font-size: 12px; line-height: 40px; color: #ffffff; margin: 0px auto 20px auto; text-align: center; display: block; } #top .ins01 { width: 260px; border: 1px #111111 solid; font-size: 12px; line-height: 38px; margin: 0px auto 30px auto; text-align: center; display: block; box-sizing: border-box; } #top .hol { width: 90%; background: url(img/dia.png) left top; margin: 0px auto 30px auto; padding: 10px; box-sizing: border-box; } #top .hol ol { width: 100%; background: #ffffff; margin: 0px; padding: 20px; overflow: hidden; box-sizing: border-box; } #top .hol h4 { font-size: 14px; margin: 0px 0px 10px 0px; text-align: center; } #top .thban { width: 90%; margin: 0px auto 20px auto; } #top .thban img { width: 100%; margin: 0px 0px 10px 0px; } #top .est { width: 90%; height: 340px; background: url(img/fbg.jpg); background-size: cover; font-size: 28px; font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 100%; color: #ffffff; margin: 0px auto 30px auto; padding: 255px 12% 0px 0px; text-align: right; display: block; position: relative; box-sizing: border-box; } #top .est:before { content: ''; width: 100%; height: 200px; background: url(img/estsp.jpg) no-repeat; background-size: cover; position: absolute; left: 0px; top: 0px; } #top .est:after { content: ''; width: 88%; height: 120px; background: url(img/esttitsp.png) no-repeat center; background-size: 100% auto; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); top: 210px; } /* #top .est img { width: 20%; margin: 255px 12% 0px 0px; filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%); } */ #top .fea { width: 100%; background: url(img/feabg.jpg) no-repeat; background-size: cover; padding: 50px 0px 50px 0px; box-sizing: border-box; } #top .fea dl { width: 80%; background: url(img/feabgsp.jpg) center top; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin: 0px auto 0px auto; padding: 17% 5% 30px 5%; position: relative; box-sizing: border-box; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); } #top .fea dl:before { content: ''; width: 70%; height: 20%; background: url(img/featitsp.png) no-repeat; background-size: 100% auto; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); top: -7%; } #top .fea dd { line-height: 150%; margin: 0px auto 20px auto; } #top .fea dt a { width: 226px; background: url(img/arr01.png) no-repeat 202px center; background-color: #111111; border-radius: 23px; -moz-border-radius: 23px; -webkit-border-radius: 23px; line-height: 46px; color: #ffffff; margin: 10px auto 0px auto; text-align: center; display: block; box-sizing: border-box; } #top .eve { width: 100%; background: url(img/bg.png) center top; padding: 50px 5% 40px 5%; overflow: hidden; box-sizing: border-box; } #top .eve ul { margin: 0px auto 0px auto; display: flex; flex-wrap: wrap; } #top .eve a { width: 48.5%; background: #ffffff; margin: 0px 3% 10px 0px; float: left; display: block; position: relative; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); } #top .eve a:nth-child(2n) { margin: 0px 0px 10px 0px; } #top .eve a:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 0 6px 6px; border-color: transparent transparent #b6bdc3 transparent; position: absolute; right: 3px; bottom: 3px; } #top .eve a img { width: 100%; height: auto; } #top .eve h4 { font-size: 12px; line-height: 150%; margin: 10px; } #top .eve p { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 16px; color: #959595; margin: 0px 10px 10px 10px; } #top .eve p span { width: 40px; background: #51b7d9; font-size: 10px; font-weight: normal; color: #ffffff; margin: 0px 5px 0px 0px; text-align: center; display: inline-block; } #top .wor { width: 100%; padding: 50px 0px 50px 0px; } #top .wor h3 { margin: 0px 0px 40px 30px; } #top .wor .mor { width: 260px; background: url(img/arr01.png) no-repeat 236px center; background-color: #111111; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; line-height: 40px; color: #ffffff; margin: 30px auto 0px auto; text-align: center; display: block; box-sizing: border-box; } #top .lin a { width: 100%; display: flex; flex-direction: column; } #top .lin dt { width: 100%; height: 240px; order: 1; } #top .lin a:nth-child(2) dt { background: url(img/lin01.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(3) dt { background: url(img/lin02.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(4) dt { background: url(img/lin03.jpg) no-repeat center; background-size: cover; } #top .lin dd { width: 100%; line-height: 180%; color: #ffffff; font-weight: bold; text-align: center; display: table-cell; position: relative; order: 2; } #top .lin a:nth-child(2) dd { background: url(img/lin01bg.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(3) dd { background: url(img/lin02bg.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(4) dd { background: url(img/lin03bg.jpg) no-repeat center; background-size: cover; } #top .lin a:nth-child(2) p { background: url(img/lin01arr.png) no-repeat 236px center; color: #EC7890; background-color: #ffffff; } #top .lin h4 { margin: 40px 0px 20px 0px; } #top .lin p { width: 260px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; font-weight: normal; line-height: 30px; color: #ffffff; margin: 30px auto 40px auto; text-align: center; box-sizing: border-box; } #top .lin a:nth-child(2) p { background: url(img/lin01arr.png) no-repeat 236px center; color: #EC7890; background-color: #ffffff; } #top .lin a:nth-child(3) p { background: url(img/lin02arr.png) no-repeat 236px center; background-color: #ffffff; color: #82CAC1; } #top .lin a:nth-child(4) p { background: url(img/lin03arr.png) no-repeat 236px center; background-color: #ffffff; color: #B27A48; } #top .you { width: 100%; padding: 50px 0px 50px 0px; } #top .you ul { width: 90%; margin: 0px auto 0px auto; } #top .you li { width: 100%; margin: 0px 0px 20px 0px; } #top .you p { width: 100%; margin: 0px 0px 10px 0px; padding-top: 56.25%; position: relative; } #top .you iframe { width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0; } #top .you h4 { font-size: 12px; line-height: 150%; margin: 0px; } #top .you .mor { width: 260px; background: url(img/arr01.png) no-repeat 236px center; background-color: #111111; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; line-height: 40px; color: #ffffff; margin: 30px auto 0px auto; text-align: center; display: block; box-sizing: border-box; } #top .news { width: 100%; background: url(img/bg.png) center top; padding: 50px 0px 35px 0px; overflow: hidden; box-sizing: border-box; } #top .news .inf a { width: 100%; border-top: 1px #b6bdc3 solid; padding: 20px 0px 20px 0px; display: table; } #top .news .inf a:last-child { border-bottom: 1px #b6bdc3 solid; } #top .news .inf dt { width: 30%; display: table-cell; vertical-align: middle; } #top .news .inf dt img { width: 100%; height: auto; } #top .news .inf dd { width: 70%; padding: 0px 0px 0px 20px; font-weight: bold; line-height: 150%; display: table-cell; vertical-align: middle; box-sizing: border-box; } #top .news .inf p { font-size: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; color: #959595; margin: 0px 0px 5px 0px; } #top .news .inf span { width: 140px; background: #51b7d9; font-size: 10px; font-weight: normal; line-height: 16px; color: #ffffff; margin: 10px 0px 0px 0px; text-align: center; display: block; } #top .news .rea { width: 100%; margin: 50px 0px 0px 0px; } #top .news .rea table { width: 100%; text-align: center; } #top .news .rea td { height: auto !important; padding: 0px !important; } #top .news .rea td, #top .news .rea td span { font-size: 12px !important; } #top .news .rea .tksnBox table { background: #b6bdc3; margin: 0px 0px 15px 0px !important; } #top .news .rea .tksnBox table td { background: #ffffff; } #top .news .rea table img { width: 100%; height: auto; } #top .news .rea td br { display: none; } #top .news .rea td span { margin: 0px 0px 0px 10px; } #top .voi { width: 100%; background: url(img/voibg.jpg) center top; padding: 50px 0px 50px 0px; overflow: hidden; box-sizing: border-box; } #top .voi h3 { margin: -20px 0px 40px 98px; } #top .voi ul { width: 90%; border: 1px #ffffff dashed; margin: 0px auto; } #top .voi li { width: 100%; border-bottom: 1px #ffffff dashed; font-size: 12px; color: #ffffff; text-align: center; position: relative; } #top .voi li:nth-child(1) { background: url(img/voiite01.png) no-repeat 5% 230px; } #top .voi li:nth-child(2) { background-image: url(img/voiite02.png), url(img/voiite03.png); background-repeat: no-repeat, no-repeat; background-position: 5% 250px, 95% 30px; } #top .voi li:nth-child(3) { background: url(img/voiite04.png) no-repeat 90% 0px; border: none; } #top .voi p { width: 300px; height: 280px; margin: 50px auto 0px auto; position: relative; } #top .voi p:before { content: ''; width: 301px; height: 277px; background: url(img/voilin.png) no-repeat; position: absolute; left: -1px; top: 3px; z-index: 1; } #top .voi svg { position: absolute; left: 0px; top: 0px; } #top .voi p img { width: 100%; height: auto; -webkit-clip-path: url(#svgPath); clip-path: url(#svgPath); } /* #top .voi p img { width: 100%; mask-image: url('img/voimas.png'); -webkit-mask-image: url('img/voimas.png'); } */ #top .voi h4 { font-size: 14px; margin: 20px 0px 5px 0px; } #top .voi a { width: 260px; background: url(img/arr01.png) no-repeat 236px center; background-color: #111111; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; line-height: 40px; color: #ffffff; margin: 20px auto 25px auto; text-align: center; display: block; box-sizing: border-box; } }