@charset "UTF-8";

.swiper-container {
margin:0 auto;
width:100%;
max-width:1800px;}

.index-title {
padding:20px 0;
background:#e2f1f2;}
.index-title .logo {}
.index-title .img01 {
position:absolute;
z-index:2;
left:0;
top:50%;
transform:translate(0,-60%);}
.index-title .img02 {
position:absolute;
z-index:2;
right:0;
top:50%;
transform:translate(0,-70%);}
.index-title .img02 img {
transition:0.15s;}
.index-title .img02 img:hover {
transform:translate(0,-3px);}

@media only screen and (max-width:1023px) {

.index-title .logo {
display:none;}
.index-title .img01 {
width:48%;
left:50%;
top:50%;
transform:translate(-50%,-60%);}
.index-title .img02 {
display:none;}

}

@media only screen and (max-width:480px) {

.index-title .img01 {
width:50%;
transform:translate(-50%,-50%);}

}

.index-message {
position:relative;
z-index:1;
padding:160px 0;
background:url("../../images/bg01.png") repeat-x left top / 800px;}
.index-message::after {
content:"";
z-index:-1;
position:absolute;
width:100%;
height:100%;
left:0;
bottom:-1px;
background:url("../../images/bg02.png") repeat-x left bottom / 800px;}
.index-message h1 {
font-size:140%;
line-height:1.4;
margin:22px 0 15px 0;
font-weight:bold;}
.index-message .img01 {
position:absolute;
width:29%;
left:-2%;
top:50%;
transform:translate(0,-35%);}
.index-message .img02 {
position:absolute;
width:29%;
right:-2%;
top:50%;
transform:translate(0,-45%);}

@media only screen and (max-width:1023px) {

.index-message {
padding:16% 0 8%;
background:url("../../images/bg01.png") repeat-x left top / 66.7%;}
.index-message::after {
background:url("../../images/bg02.png") repeat-x left bottom / 66.7%;}
.index-message .img01 {
position:static;
float:left;
padding:40px 0 0 0;
width:48%;
transform:translate(0,0);}
.index-message .img02 {
position:static;
float:right;
padding:40px 0 0 0;
width:48%;
transform:translate(0,0);}

}

@media only screen and (max-width:767px) {

.index-message {
padding:100px 0 50px;}
.index-message br {
display:none;}
.index-message .txt {
text-align:left;}

}

.index-topics {
padding:60px 0 90px 0;
background:#e2f1f2;}
.index-topics .ttl {
padding:20px 0;
background:url("../../images/index0400.png") no-repeat center center / 850px;}
.index-topics .left {
margin:35px 0 0 0;
float:left;
width:46%;}
.index-topics .right {
margin:35px 0 0 0;
float:right;
width:46%;}
.index-topics ul {
margin:20px auto;
width:100%;
max-width:640px;}
.index-topics li {
text-align:left;
border-bottom:1px dotted #5ab7ba;}
.index-topics li a {
display:block;
padding:13px 0 13px 21px;
line-height:22px;
color:#222;
background:url("../../images/index0403_01.png") no-repeat left top 15px / 18px;}
.index-topics .right li a {
background:url("../../images/index0403_02.png") no-repeat left top 15px / 18px;}
.index-topics li a:hover {
color:#e80;}
.index-topics li a .date {
float:left;
width:105px;
white-space:nowrap;}
.index-topics li a .txt {
margin:0 0 0 110px;}
.index-topics .btn a {
display:block;
transition:0.15s;}
.index-topics .btn a:hover {
transform:translate(0,-3px);}

.index-topics .btn-instagram {
margin-top:90px;}
.index-topics .btn-instagram a img {
transition:transform 0.25s;
box-shadow:0 0 0 1px rgba(0,0,0,0.2);}
.index-topics .btn-instagram a:hover img {
transform:translate(0,-3px);}

@media only screen and (max-width:1023px) {

.index-topics {
padding:6% 0 9% 0;}
.index-topics .ttl {
padding:0;
background:none;}
.index-topics .left {
float:none;
width:100%;}
.index-topics .right {
margin:60px 0 0 0;
float:none;
width:100%;}
.index-topics .btn-instagram {
margin-top:9%;}

}

@media only screen and (max-width:767px) {

.index-topics {
padding:50px 0 75px 0;}
.index-topics li a .date {
float:none;
width:100%;
white-space:nowrap;}
.index-topics li a .txt {
margin:3px 0 0 0;
font-weight:bold;}

}

@media only screen and (max-width:480px) {

.index-topics .btn-instagram {
margin-top:45px;}

}

.index01 {
background:#e2f1f2;}
.index01 ul {
width:100%;
max-width:1600px;
margin:0 auto;}
.index01 li {
position:relative;
width:50%;
padding:30px 15px 0 15px;
color:#fff;
background:url("../../images/index0500_01.jpg") no-repeat center top / cover;}
.index01 li:last-child {
background:url("../../images/index0500_02a.jpg") no-repeat center top / cover;}
.index01 li .ttl {
margin:0 0 10px 0;}
.index01 li .txt {
padding:0 0 70% 0;
white-space:nowrap;}
.index01 li .btn {
position:absolute;
width:100%;
left:0;
bottom:25px;}
.index01 li .btn a {
display:block;
transition:0.15s;}
.index01 li .btn a:hover {
transform: translate(0,-3px);}

@media only screen and (max-width:767px) {

.index01 li {
width:100%;}
.index01 li .txt {
padding:0 0 85% 0;}

}

@media only screen and (max-width:480px) {

.index01 li .txt {
padding:0 0 100% 0;
font-size:90%;}

}

.index02 {
padding:180px 0 60px 0;
margin-top:-25px;
background:url("../../images/bg01.png") repeat-x left top / 800px;}

@media only screen and (max-width:1023px) {

.index02 {
margin-top:0;
background:url("../../images/bg01.png") repeat-x left top / 66.7%;}

}

.index03 {
padding:150px 0 50px;
background:#e2f1f2 url("../../images/bg01_w.png") repeat-x left top / 800px;}
.index03 ul {
width:100%;
justify-content:center;}
.index03 li {
padding:15px 0;
width:33.3333333%;
line-height:1.6;}
.index03 li img {
margin:0 0 15px 0;}
.index03 a {
display:block;
transition:0.15s;}
.index03 a:hover {
transform:translate(0,-3px);}

@media only screen and (max-width:1023px) {

.index03 {
padding:15% 0 5%;
background:#e2f1f2 url("../../images/bg01_w.png") repeat-x left top / 66.7%;}
.index03 li {
width:50%;}

}

@media only screen and (max-width:767px) {

.index03 li {
width:100%;}

}

.index04 {
padding:180px 0;
background:url("../../images/bg01.png") repeat-x left top / 800px;}

@media only screen and (max-width:1023px) {

.index04 {
background:url("../../images/bg01.png") repeat-x left top / 66.7%;}

}

/* index-contents01 =============== */

.index-contents01 {
align-items:center;
justify-content:space-between;}
.index-contents01.reverse {
flex-direction:row-reverse;}
.index-contents01 img {
width:100%;}
.index-contents01 a {
display:block;
transition:transform 0.25s;}
.index-contents01 a:hover {
transform:translate(0,-5px);}
.index-contents01 .img {
position:relative;
width:54%;}
.index-contents01 .img img {
border-radius:20px;}
.index-contents01 .img .fukidashi {
position:absolute;
pointer-events:none;
width:30%;
left:0;
top:0;
transform:translate(-50%,-25%);}
.index-contents01.reverse .img .fukidashi {
left:100%;}
.index-contents01 .img .fukidashi img {
border-radius:0px;}
.index-contents01 .txt {
position:relative;
width:40%;}
.index-contents01 .txt .chara {
pointer-events:none;
position:absolute;
width:28%;
right:0;
bottom:0;}
.index-contents01 .txt .chara01 {
transform:translate(45%,30%);}
.index-contents01 .txt .chara02 {
transform:translate(45%,0%);}

@media only screen and (max-width:1023px) {

.index-contents01 .img {
margin:35px auto 0;
width:100%;
max-width:640px;}
.index-contents01 .img .fukidashi {
left:12.5%;}
.index-contents01.reverse .img .fukidashi {
left:87.5%;}
.index-contents01 .txt {
margin:0 auto;
width:90%;
max-width:400px;}
.index-contents01 .txt .chara {
width:20%;
right:50%;
bottom:90%;}
.index-contents01 .txt .chara01 {
transform:translate(50%,0);}
.index-contents01 .txt .chara02 {
transform:translate(50%,0);}

}