@charset "utf-8"; /* CSS Document */ main{ /*font-feature-settings: "palt";*/ } img{ max-width: 100%; } .position{ position: relative; } .main-img img{ width: 100%; } .main-txt{ font-size: 20px; line-height: 1.5; text-align: left; } .main-txt .notes{ max-width: 700px; margin-left: auto; margin-right: auto; text-align: left; font-weight: 500; } .main-txt span{ color: #15329B; font-weight: 600; } .blue{ 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%; } .normal p{ font-size: 16px; line-height: 1.75; } .normal2 p{ font-size: 14px; line-height: 1.75; } .left-box-1{ width: 480px; float: left; } .right-box-1{ width: 490px; float: right; } .left-box-2{ width: 245px; float: left; } .right-box-2{ width: 316px; 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: #F2F2F2; } .bg-2 .movie-box{ width: 510px; margin-left: auto; margin-right: auto; } .bg-2 .movie-ttl{ font-size: 18px; text-align: center; line-height: 1; color: #15329B; } .bg-2 .movie{ width: 510px; margin-left: auto; margin-right: auto; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } .bg-2 .movie iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .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 ; } .sub-ttl{ background: url("../img/ttl_bg_pc.png") no-repeat center top; background-size:100%; line-height: 1; text-align: center; padding-top: 14px; padding-bottom: 30px; } .sub-ttl.ptn3{ padding-bottom: 12px; } .sub-ttl.ptn3 .notes{ color:#fff; font-size: 12px; text-align: right; padding-right: 18px; font-weight: 400; } .sub-ttl h3{ color:#FFEC00; font-size: 26px; } .info-list ul{ display: flex; } .info-list ul li{ width: 320px; margin-right: 20px; font-size: 14px; font-weight: 400; } .info-list ul li .notes{ font-size: 12px; } .info-list ul li .pic{ width: 288px; margin-left: auto; margin-right: auto } .info-list ul li:last-child{ margin-right: 0; } .sub-ttl-2{ border: 1px solid #15329B; padding-top: 12px; padding-bottom: 12px; line-height: 1; font-size: 22px; text-align: center; color:#15329B; } .ttl-bg2{ background:#DDEDF4 ; } .ttl-bg2 h2{ font-size: 34px; line-height: 1; color: #15329B; font-weight: 800; } .line-ttl{ border-top:2px solid #15329B; border-bottom:2px solid #15329B; text-align: center; position: relative; } .line-ttl h3{ font-size: 20px; padding-top: 12px; padding-bottom: 12px; line-height: 1; color:#15329B; font-weight: 800; } .line-ttl .mini-img-1{ position: absolute; width: 110px; top:-50px; left:30px; } .line-ttl .mini-img-2{ position: absolute; width: 116px; top:-70px; left:30px; } .item-wrap{ display: flex; } .item-wrap .item-box{ margin-right: 18px; width: 490px; border:1px solid #29A7DE; padding:36px 40px 15px; font-feature-settings: "palt"; box-sizing: border-box; } .item-wrap .item-box.last{ margin-right: 0; } .item-wrap .item-box .img-box-2{ width: 262px; margin-left: auto; margin-right: auto; } .btn-wrap{ display: flex; } .btn-wrap .link-btn{ margin-right: 18px; width: 490px; } .btn-wrap .link-btn.last{ margin-right: 0; } .item-wrap-2{ border:1px solid #29A7DE; padding:36px 40px 36px; display: flex; /*font-feature-settings: "palt";*/ } .item-wrap-2 .tex{ width: 560px; margin-right: 30px; } .item-wrap-2 .pic{ width: 318px; } .txt-img{ width: 470px; margin-left: auto; margin-right: auto; } .sub-ttl-3 h4{ border-bottom: 1px solid #15329B; text-align: center; line-height: 1; font-size: 20px; padding-bottom: 10px; color:#15329B; } .btn-box ul{ font-size: 0; } .btn-box ul li{ width: 48%; margin-right: 4%; display: inline-block; } .btn-box ul li:last-child{ margin-right: 0; } .link-tex a{ color:#14439A; } .link-tex span{ transform:rotate(-90deg); display: inline-block; } .movie-box{ width: 520px; margin-left: auto; margin-right: auto; } .bottom-ttl{ } .bottom-ttl span{ padding:16px 40px; background:#FFEC00; line-height: 1; color:#004489; font-size: 20px; display: inline-block; } .pick-list{ font-size: 0; text-align: center; } .pick-list li{ width: 290px; margin-right: 20px; display: inline-block; } .pick-list li:last-child{ margin-right: 0; } .last-bnr{ width: 750px; margin-left: auto; margin-right: auto; } @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; } .normal2 p{ font-size: 3.8vw; line-height: 1.75; } .normal.ex p{ font-size: 3.9vw; line-height: 1.75; } .left-box-1{ width: 100%; float: none; } .right-box-1{ width: 100%; float: none; } .left-box-2{ float: left; width: 41.5%; } .right-box-2{ float: right; width: 53.8%; } .left-box-3{ width: 100%; float: none; margin-left: auto; margin-right: auto; } .right-box-3{ width: 100%; 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: 100%; /*margin-right: -4%;*/ } .notes{ font-size: 3.2vw; } .notes p{ line-height: 1.3; } .tex-box.ex{ margin-top: -3%; } .bg-2{ } .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; } .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 ; } .sub-ttl{ background: url("../img/ttl_bg_sp.png") no-repeat center top; background-size:100%; line-height: 1; padding-top: 3.5%; padding-bottom: 4.8%; } .sub-ttl h3{ font-size: 4.4vw; } .sub-ttl.ptn2{ background: url("../img/ttl_bg_sp_02.png") no-repeat center top; background-size:100%; line-height: 1.5; padding-top: 1.5%; } .sub-ttl.ptn3{ background: url("../img/ttl_bg_sp_02.png") no-repeat center top; background-size:100%; line-height: 1.6; padding-top: 2.8%; padding-bottom: 5.5%; } .sub-ttl.ptn3 .notes{ color:#fff; font-size:2.8vw; text-align: center; padding-right: 0; } .info-list ul{ display: block; } .info-list ul li{ width: 100%; margin-left: auto; margin-right: auto; font-size: 3.8vw; line-height: 1.75; margin-bottom: 12%; } .info-list ul li .notes{ font-size: 2.8vw; } .info-list ul li .pic{ width: 90%; margin-left: auto; margin-right: auto } .info-list ul li:last-child{ margin-bottom: 4%; margin-left: auto; margin-right: auto } .sub-ttl-2{ border: 1px solid #15329B; padding-top: 6%; padding-bottom: 6%; font-size: 3.4vw; } .ttl-bg2 h2{ font-size: 4.4vw; } .line-ttl{ border-top:2px solid #15329B; border-bottom:2px solid #15329B; text-align: center; position: relative; } .line-ttl h3{ font-size: 3.9vw; padding-top: 1%; padding-bottom: 1%; line-height: 1.5; color:#15329B; } .line-ttl .mini-img-1{ position: absolute; width: 16.9%; top:-26%; left:4%; } .line-ttl .mini-img-2{ position: absolute; width: 16.9%; top:-40%; left:2%; } .item-wrap{ display: block; } .item-wrap .item-box{ margin-right: auto; margin-left: auto; width: 100%; border:1px solid #29A7DE; padding:6% 9% 3%; } .item-wrap .item-box.last{ margin-right: auto; } .item-wrap .item-box .img-box-2{ width: 66%; margin-left: auto; margin-right: auto; } .btn-wrap{ display: block; } .btn-wrap .link-btn{ width: 100%; margin-left: auto; margin-right: auto; } .btn-wrap .link-btn.last{ margin-right: auto; } .item-wrap-2{ padding:6% 9% 9%; display: block; } .item-wrap-2 .tex{ width: 100%; margin-right: auto; margin-left: auto; } .item-wrap-2 .pic{ width: 100%; } .sub-ttl-3 h4{ font-size: 3.4vw; padding-bottom: 2%; } .bg-2 .movie-box{ width: 88%; margin-left: auto; margin-right: auto; } .bg-2 .movie-ttl{ font-size: 3.7vw; } .bottom-ttl span{ padding:4% 0; line-height: 1.6; width: 100%; font-size: 3.6vw; display: block; } .pick-list li{ width: 82%; margin-right: auto; margin-left: auto; display: block; margin-bottom: 5%; } .pick-list li:last-child{ margin-bottom: 0; margin-right: auto; margin-left: auto; } .last-bnr{ width: 100%; margin-left: auto; margin-right: auto; } } @media print, screen and (min-width : 769px) { .main-list li:nth-child(3n){ margin-right: 0; } .table{ width: 878px; margin-left: auto; margin-right: auto; } .ttl-bg{ background: #FFF67C; } .ttl-box{ width: 1000px; margin-left: auto; margin-right: auto; } .ttl-box h2{ margin-left: -200px; margin-right: -200px; width: 1400px; } .ttl-box h2 img{ margin-top: -50px; } .wrap2{ width: 610px; margin-left: auto; margin-right: auto; } }