@charset "utf-8"; /* CSS Document */ img{ max-width: 100%; } .position{ position: relative; } .main-img img{ width: 100%; } .main-txt{ font-size: 22px; line-height: 1.5; text-align: center; font-weight: 600; } .main-txt .notes{ max-width: 700px; margin-left: auto; margin-right: auto; text-align: left; font-weight: 500; } .main-txt span{ color: #15329B; } .wrap{ width: 1000px; margin-left: auto; margin-right: auto; } .main-list ul{ font-size: 0; } .main-list li{ width: 316px; margin-right: 24px; display: inline-block; margin-bottom: 22px; } .link-btn{ width: 850px; margin-left: auto; margin-right: auto; } .bg-1{ background: #E6F2F7; position: relative; z-index: 2; } .bg-1 .ttl{ background: #fff; line-height: 1; color: #00B3D6; font-size: 28px; padding-top: 24px; padding-bottom: 24px; text-align: center; border-radius: 50px; } .bg-1 .left{ width: 660px; float: left; } .bg-1 .right{ margin-right: -110px; width: 420px; float: right; } .fukidashi{ position: relative; border-radius: 10px; color:#fff; font-size: 18px; line-height: 1.5; background: #00B3D6; padding:28px 20px; } .fukidashi span{ color:#FFF100; font-weight: 600; } .fukidashi .yajirushi{ position: absolute; width: 24px; right:-20px; top:35%; } .yajirushi-img{ width: 224px; margin-left: auto; margin-right: auto; margin-top: -20px; position: relative; z-index: 1; } .txt-img{ width: 840px; margin-left: auto; margin-right: auto; } .normal p{ font-size: 20px; line-height: 1.75; } .left-box-1{ width: 480px; float: left; } .right-box-1{ width: 500px; float: right; } .left-box-2{ width: 224px; float: left; } .right-box-2{ width: 742px; float: right; } .left-box-3{ width: 490px; float: left; } .right-box-3{ width: 490px; float: right; } .left-box-4{ width: 470px; float: left; } .right-box-4{ width: 470px; float: right; } .left-box-3.ex{ width: 496px; float: left; } .right-box-3.ex{ width: 496px; float: right; } .left-box-5{ width: 515px; float: left; padding-right: 44px; background: url("../img/border.png") no-repeat right top; background-size:3px; margin-left: -15px; } .right-box-5{ width: 460px; float: right; margin-top: 5px; } .notes{ font-size: 12px; } .notes p{ line-height: 1.3; } .tex-box.ex{ margin-top: -50px; } .bg-2{ background: url("../img/bg.jpg") repeat left top; background-size:1400px; } .bg-2 .movie-ttl{ width: 800px; margin-left: auto; margin-right: auto; } .bg-2 .movie{ width: 730px; margin-left: auto; margin-right: auto; height: 0; padding-bottom: 27.25%; overflow: hidden; position: relative; } .bg-2 .movie iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .bottom-ttl span{ padding:20px 44px; background:#00B3D6 ; line-height: 1; color:#fff; font-size: 24px; border-radius: 50px; display: inline-block; } .txt-img-2{ width: 940px; margin-left: auto; margin-right: auto; } .bottom-ttl-2{ font-size: 21px; color:#fff; line-height: 1.2; padding:12px 0; background:#15329B ; } @media only screen and (max-width : 768px) { .wrap{ width: 88%; margin-left: auto; margin-right: auto; } .main-txt{ font-size:4vw; } .main-list ul{ font-size: 0; } .main-list li{ width: 48%; margin-right: 4%; display: inline-block; margin-bottom: 4%; } .main-list li:nth-child(2n){ margin-right: 0; } .link-btn{ width: 106%; margin-left: -3%; margin-right: -3%; } .bg-1 .ttl{ background: #fff; line-height: 1.5; color: #00B3D6; font-size: 4.3vw; padding-top: 5%; padding-bottom: 5%; text-align: center; border-radius: 50px; } .bg-1 .left{ width: 100%; float: none; } .bg-1 .right{ margin-right: auto; margin-left: auto; width: 64%; float: none; margin-top: 12%; } .fukidashi{ position: relative; border-radius: 10px; color:#fff; font-size: 3.4vw; line-height: 1.5; background: #00B3D6; padding:4% 4%; } .fukidashi .yajirushi{ position: absolute; width: 4%; right:8%; top:auto; bottom:-10px; } .yajirushi-img{ width: 33%; margin-left: auto; margin-right: auto; margin-top: -4%; position: relative; z-index: 1; } .txt-img{ width: 100%; margin-left: auto; margin-right: auto; } .ttl-box{ width: 100%; margin-left: auto; margin-right: auto; } .normal p{ font-size: 3.4vw; line-height: 1.75; } .left-box-1{ width: 100%; float: none; } .right-box-1{ width: 100%; float: none; } .left-box-2{ width: 100%; float: none; } .right-box-2{ width: 100%; float: none; } .left-box-3{ width: 82%; float: none; margin-left: auto; margin-right: auto; } .right-box-3{ width: 82%; float: none; margin-left: auto; margin-right: auto; } .left-box-3.ex{ width: 100%; float: none; margin-left: auto; margin-right: auto; } .right-box-3.ex{ width: 100%; float: none; margin-left: auto; margin-right: auto; } .left-box-4{ width: 100%; float: none; } .right-box-4{ width: 100%; float: none; } .left-box-5{ width: 102%; float: none; padding-right: 0; background: none; margin-left: -2%; margin-right: auto; } .right-box-5{ width: 100%; float: none; margin-top: 2%; } .table{ width: 104%; margin-right: -4%; } .notes{ font-size: 3.2vw; } .notes p{ line-height: 1.3; } .tex-box.ex{ margin-top: -3%; } .bg-2{ background: url("../img/bg.jpg") repeat left top; background-size:200%; } .bg-2 .movie-ttl{ width: 93%; margin-left: auto; margin-right: auto; } .bg-2 .movie{ width: 88%; margin-left: auto; margin-right: auto; height: 0; padding-bottom: 50.25%; overflow: hidden; position: relative; } .bg-2 .movie iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .bottom-ttl span{ padding:4% 0; background:#00B3D6 ; line-height: 1; color:#fff; width: 100%; font-size: 4.0vw; border-radius: 50px; display: block; } .txt-img-2{ width: 100%; margin-left: auto; margin-right: auto; } .bottom-ttl-2{ font-size: 4.0vw; color:#fff; line-height: 1.2; padding:3.8% 0 3.5%; background:#15329B ; } } @media print, screen and (min-width : 769px) { .main-list li:nth-child(3n){ margin-right: 0; } .table{ width: 1024px; margin-right: -24px; } .ttl-box{ width: 1000px; margin-left: auto; margin-right: auto; } .ttl-box h2{ margin-left: -150px; margin-right: -150px; width: 1300px; } }