@charset "UTF-8";
.sp-show { display: none; }

.wrapper { max-width: 1200px; margin-left: auto; margin-right: auto; }

.clearfix::after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }

.header { margin-top: 20px; margin-bottom: 40px; }
.header .header-inner { max-width: 1200px; margin-right: auto; margin-left: auto; }
.header .header-inner .title-sub { display: flex; margin-bottom: 10px; }
.header .header-inner .title-sub p { font-size: 87%; margin-top: 5px; }
.header .header-inner .title-sub img { margin-right: 5px; }
.header .header-inner .nav .title-logo { float: left; width: 29.6%; }
.header .header-inner .nav .title-logo a { transition-duration: 0.8s; }
.header .header-inner .nav .title-logo a img { max-width: 100%; }
.header .header-inner .nav .title-logo a:hover { opacity: 0.9; }
.header .header-inner .nav .menu { list-style-type: none; margin: 0; padding: 0; color: #fff; }
.header .header-inner .nav .menu .outer-li { float: left; position: relative; margin: 0 0 0 1px; padding: 0 1.5%; background-color: white; display: block; font-size: 14px; color: black; border-right: 1px solid black; margin-top: 20px; text-decoration: underline #666666; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.header .header-inner .nav .menu .outer-li .outer-a { text-decoration: none; color: black; }
.header .header-inner .nav .menu .outer-li .sub { display: none; position: absolute; left: 0; z-index: 10; padding: 0; }
.header .header-inner .nav .menu .outer-li .sub li { border: 1px solid #D1D1D1; border-top: none; width: 230px; border-bottom: 1px solid #D1D1D1; margin: 0; background: #fff; }
.header .header-inner .nav .menu .outer-li .sub li a { font-size: 14px; padding: 15px 10px; margin-left: 5px; margin-right: -5px; margin-bottom: -5px; display: block; color: black; text-decoration: none; }
.header .header-inner .nav .menu .outer-li .sub li:hover { background: rgba(255, 11, 11, 0.5); text-decoration: none; color: white; }
.header .header-inner .nav .menu .outer-li .sub li:nth-child(1) { background: white; border-left: none; border-right: none; height: 20px; }
.header .header-inner .nav .menu .outer-li .sub:hover { background: white !important; }
.header .header-inner .nav .menu .outer-li:hover { text-decoration: none; }
.header .header-inner .nav .menu .outer-li:nth-child(1) { border-left: 1px solid black; }

.content01 { /*間隔*/ /*拡大速度*/ }
.content01 #header_content { max-width: 1200px; margin: 0 auto 80px; padding: 0; max-height: 660px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.content01 #header_content .item { float: left; width: 25%; max-height: 660px; overflow: hidden; position: relative; opacity: 0; }
.content01 #header_content .item.active { -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-animation: moveUp 0.65s ease forwards 0.5s; animation: moveUp 0.65s ease forwards 0.5s; }
@-webkit-keyframes moveUp { 100% { -webkit-transform: translateY(0); opacity: 1; } }
@keyframes moveUp { 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
.content01 #header_content img { display: block; width: 100%; height: auto; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; transition: all 0.75s ease; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.content01 #header_content .item:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
.content01 #header_content .image:before { width: 100%; height: auto; display: block; content: ''; /*background:rgba(0,0,0,0.5);*/ position: absolute; z-index: 2; opacity: 0; -webkit-transition: opacity 0.6s; transition: opacity 0.6s; }
.content01 #header_content .item:hover .image:before { opacity: 1; }
.content01 #header_content .desc { display: block; width: 100%; padding: 0 30px; color: #fff; line-height: 200%; font-size: 15px; text-decoration: none; z-index: 3; text-align: left; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; -webkit-transition: opacity 0s; transition: opacity 0.6s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.content01 #header_content .item:hover .desc { opacity: 1; }
.content01 #header_content .catch { display: block; width: 100%; padding: 0; color: #fff; line-height: 200%; font-size: 1.9vw !important; text-decoration: none; z-index: 20; text-align: center; position: absolute; bottom: 2%; font-weight: 200; opacity: 1; -webkit-transition: opacity 0.6s; transition: opacity 0.6s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; text-shadow: 2px 2px 2px #24201a; }
@media screen and (min-width: 1200px) { .content01 #header_content .catch { font-size: 20px !important; } }
.content01 .top-shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; background-image: url(../img/top_shadow.png); background-size: 100% auto; }
.content01 .red-icon1:before { content: ""; display: inline-block; background-image: url(../img/large_btn1.png); background-size: 100% auto; vertical-align: middle; margin-right: 5px; width: 2.9vw; height: 2.9vw; }
@media screen and (min-width: 1200px) { .content01 .red-icon1:before { width: 36px; height: 36px; } }
.content01 .red-icon2:before { content: ""; display: inline-block; background-image: url(../img/large_btn12.png); background-size: 100% auto; vertical-align: middle; margin-right: 5px; width: 2.9vw; height: 2.9vw; }
@media screen and (min-width: 1200px) { .content01 .red-icon2:before { width: 36px; height: 36px; } }
.content01 .red-icon3:before { content: ""; display: inline-block; background-image: url(../img/large_btn3.png); background-size: 100% auto; vertical-align: middle; margin-right: 5px; width: 2.9vw; height: 2.9vw; }
@media screen and (min-width: 1200px) { .content01 .red-icon3:before { width: 36px; height: 36px; } }
.content01 .red-icon4:before { content: ""; display: inline-block; background-image: url(../img/large_btn1.png); background-size: 100% auto; vertical-align: middle; margin-right: 5px; width: 2.9vw; height: 2.9vw; }
@media screen and (min-width: 1200px) { .content01 .red-icon4:before { width: 36px; height: 36px; } }

.content02 { text-align: center; padding-bottom: 10px; overflow: hidden; }
.content02 .content02-title { font-size: 250%; color: #26668A; margin-bottom: 35px; letter-spacing: 0.4rem; }
.content02 .content02-img { position: relative; max-width: 1200px; max-height: 300px; overflow: hidden; }
.content02 .content02-img a { display: block; }
.content02 .content02-img a img { -moz-transition: -moz-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -ms-transition: -ms-transform 0.5s linear; transition: transform 0.5s linear; }
.content02 .content02-img a:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.content02 .content02-img p { position: absolute; bottom: 2%; left: 0; right: 0; margin: auto; font-size: 140%; color: white; text-shadow: 2px 2px 2px #24201a; z-index: 20; }
.content02 p { line-height: 220%; margin-bottom: 65px; letter-spacing: 0.05rem; }
.content02 img { max-width: 100%; height: auto; }

.content03 { max-width: 1200px; }
.content03 .other-image { margin-bottom: 4px; }
.content03 .other-image div a { line-height: 100% !important; }
.content03 .other-image .img1 { float: left; width: 74.7%; max-height: 269px; margin-right: 0.35%; overflow: hidden; position: relative; }
.content03 .other-image .img1 a .img { vertical-align: top !important; width: 100%; height: auto; -moz-transition: -moz-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -ms-transition: -ms-transform 0.5s linear; transition: transform 0.5s linear; }
.content03 .other-image .img1 a:hover .img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.content03 .other-image .img1 a .img-above { background-image: url(../img/large_shadow.png); background-size: 100% auto; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; }
.content03 .other-image .img1 p { width: 7%; position: absolute; top: 87%; left: 0; right: 0; margin: auto; color: white; font-size: 1.6vw; text-shadow: 2px 2px 2px #24201a; z-index: 21; }
@media screen and (min-width: 1200px) { .content03 .other-image .img1 p { font-size: 20px; } }
.content03 .other-image .img2 { float: left; width: 24.7%; max-height: 269px; overflow: hidden; position: relative; }
.content03 .other-image .img2 a { line-height: 100% !important; display: block; }
.content03 .other-image .img2 a .img { vertical-align: top !important; width: 100%; height: auto; -moz-transition: -moz-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -ms-transition: -ms-transform 0.5s linear; transition: transform 0.5s linear; }
.content03 .other-image .img2 a:hover .img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.content03 .other-image .img2 a .img-above { background-image: url(../img/shadow.png); background-size: 100% auto; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; }
.content03 .other-image .img2 .up-left { position: absolute; top: 0; left: 0; width: 12.16%; height: auto; margin: 0; }
.content03 .other-image .img2 p { text-align: center; width: 90%; position: absolute; top: 87%; left: 0; right: 0; margin: auto; color: white; text-shadow: 2px 2px 2px #24201a; font-size: 1.5vw; z-index: 20; }
@media screen and (min-width: 1200px) { .content03 .other-image .img2 p { font-size: 20px; } }
.content03 ul li { float: left; max-width: 24.7%; max-height: 296px; overflow: hidden; margin-right: 0.35%; margin-bottom: 3px; position: relative; }
.content03 ul li .img-above { background-image: url(../img/shadow.png); background-size: 100% auto; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; }
.content03 ul li a { line-height: 100% !important; display: block; }
.content03 ul li a .img { width: 100%; height: auto; vertical-align: top !important; -moz-transition: -moz-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -ms-transition: -ms-transform 0.5s linear; transition: transform 0.5s linear; }
.content03 ul li a:hover .img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.content03 ul li a p { position: absolute; z-index: 99; }
.content03 ul li .up-left { position: absolute; top: 0; left: 0; width: 12.16%; height: auto; margin: 0 !important; }
.content03 ul li p { text-align: center; width: 90%; line-height: 110%; position: absolute; bottom: 5%; left: 0; right: 0; margin: auto; color: white; font-size: 1.5vw; text-shadow: 2px 2px 2px #24201a; }
@media screen and (min-width: 1200px) { .content03 ul li p { font-size: 20px; } }
.content03 ul li:nth-child(4n+6) { clear: both; }
.content03 ul li:nth-child(4n+5) { margin-right: 0; }

.content04 { width: 100%; padding-bottom: 70px; padding-top: 70px; margin-top: 80px; background-color: #F7F7F7; }
.content04 .content04-inner { max-width: 1200px; margin-right: auto; margin-left: auto; }

.content04 .content04-imgbox { width: 25%; margin-right: 8%; float: left; }
.content04 .content04-imgbox img { max-width: 100%; margin: 0 0 20px 0; }
.content04 .content04-imgbox p { font-size: 1vw; color: #666666; line-height: 150%; }
@media screen and (min-width: 1200px) { .content04 .content04-imgbox p { font-size: 75%; } }

.content04 .content04-index .index-li { float: left; }
.content04 .content04-index .index-li li p { line-height: 200% !important; }
.content04 .content04-index .index-li p { /*font-size:75% !important;*/ font-size: 1vw; }
@media screen and (min-width: 1200px) { .content04 .content04-index .index-li p { font-size: 75%; } }
.content04 .content04-index .index-li .list-title { color: #26668A; margin-bottom: 20px; }
.content04 .content04-index .index-li ul li { display: flex; margin-bottom: 7px; }
.content04 .content04-index .index-li ul li a { text-decoration: underline #666666; }
.content04 .content04-index .index-li ul li a:hover { text-decoration: none; }
.content04 .content04-index .index-li ul li p { color: #666666; }
.content04 .content04-index .index-li ul li img { margin-right: 4%; }
.content04 .content04-index .index-w-li ul { margin-bottom: 40px; }
.content04 .content04-index .index-li:nth-child(1) { width: 18%; margin-right: 3%; }
.content04 .content04-index .index-li:nth-child(2) { width: 15%; margin-right: 2%; }
.content04 .content04-index .index-li:nth-child(3) { width: 8%; margin-right: 2%; }
.content04 .content04-index .index-li:nth-child(4) { width: 19%; }

.footer { background-color: #000000; padding-top: 30px; padding-bottom: 30px; }
.footer .footer-inner { margin-right: auto; margin-left: auto; }
.footer .footer-inner p { text-align: center; color: white; font-size: 14px; }


/*=======================================
告知
=========================================*/
.l-notice {position: fixed;right: 20px;bottom: 0;box-shadow: 0 0 10px rgba(0,0,0,.65);z-index: 999;line-height: 100%;}
.l-notice img {vertical-align: top;}