@charset "UTF-8"; /* CSS Document */ /*main{ font-feature-settings: "palt"; }*/ .mainslide-wrap { background: #0d2e98; position: relative; margin-bottom: 60px; } .mainslide-wrap .slider-wrap { width: 76%; position: relative; z-index: 1; height: 100%; } .mainslide-wrap .slider-wrap .slide-box { padding-top: 50%; vertical-align: bottom; } .mainslide-wrap .main-text { width: 38%; position: absolute; z-index: 2; right: 11%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .contents { overflow: hidden; text-align: justify; } img { max-width: 100%; } .fade__Up { opacity: 0; -webkit-transform: translate(0%, 50px); transform: translate(0%, 50px); -webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .fade__left { opacity: 0; -webkit-transform: translate(-70px, 0px); transform: translate(-70px, 0px); -webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .fade__right { opacity: 0; -webkit-transform: translate(70px, 0px); transform: translate(70px, 0px); -webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .fade__in { opacity: 0; -webkit-transform: translate(0%, 0px); transform: translate(0%, 0px); -webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .fadeUp__on { opacity: 1; -webkit-transform: translate(0%, 0px); transform: translate(0%, 0px); } .contents p { font-size: 15px; line-height: 1.86; word-break: break-all; } .contents p.notes { font-size: 11px; line-height: 1.72; } img { max-width: 100%; } .wrap { max-width: 1050px; width: 86%; margin-left: auto; margin-right: auto; display: block; } .wrap2 { max-width: 788px; width: 100%; margin-left: auto; margin-right: auto; display: block; } .wrap3 { max-width: 590px; width: 86%; margin-left: auto; margin-right: auto; display: block; } .position { position: relative; } .main-img { margin-bottom: 0px; } .main-img img { width: 100%; } .fl-box { position: fixed; top: 230px; right: 0px; width: 100%; max-width: 65px; z-index: 999; } .fl-box .fl-bnr a { display: block; width: 100%; height: 100%; } .fl-box .fl-bnr img { display: block; } footer { padding-bottom: 120px; } .copy-box { padding-top: 120px; padding-bottom: 145px; } .copy-box .copy-head { color: #0d2e98; text-align: center; line-height: 1.63; font-size: 44px; margin-bottom: 10px; font-weight: 800; } .copy-box .copy-tex { font-size: 17px; line-height: 2; text-align: center; } .sec { margin-bottom: 135px; } .sec .sec-bg { background: #0d2e98; margin-bottom: 166px; } .sec .sec-bg.ex{ background: #0d2e98; margin-bottom: 70px; min-height: 80px; } .sec .sec-bg .sec-ttl { max-width: 530px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 54px; } .sec .sec-bg .sec-ttl img { margin-top: -27px; } .sec .sec-bg .sec-name { margin-bottom: 60px; font-size: 41px; color: #fff; line-height: 1; text-align: center; letter-spacing: 0.1em; } .sec .sec-bg .youtube { position: relative; width: 100%; padding-top: 56.25%; margin-top: -64px; /* 今回のメインテーマ */ top: 64px; /* 今回のメインテーマ */ } .sec .sec-bg .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .sec .illust { margin-bottom: 90px; max-width: 538px; margin-left: auto; margin-right: auto; } .sec .info-flex { display: flex; justify-content: space-between; margin-bottom: 60px; } .sec .info-flex.ptn1 { margin-bottom: 20px; } .sec .info-flex.ptn4 { max-width: 688px; margin-left: auto; margin-right: auto; } .sec .info-flex.ptn4 .text { width: 60%; } .sec .info-flex.ptn4 .img { width: 35%; } .sec .info-flex.ptn5 { max-width: 936px; margin-left: auto; margin-right: auto; margin-bottom: 50px; align-items: center; } .sec .info-flex.ptn5 .text { width: 67.8%; } .sec .info-flex.ptn5 .img { width: 35%; text-align: right; } .sec .info-flex.ptn5 .img img { width: 95%; } .sec .info-flex.ptn5 .img .notes { margin-top: 0; } .sec .info-flex .text { padding-left: 1%; width: 40%; } .sec .info-flex .text p { color: #0d2e98; font-size: 24px; line-height: 1.9; font-weight: 700; } .sec .info-flex .img { width: 56%; } .sec .info-flex .img .notes { text-align: right; line-height: 1; margin-top: 27px; } .sec .note-box { margin-bottom: 24px; } .sec .item-flex { padding: 40px 40px; background: #ecead2; display: flex; justify-content: space-between; border-radius: 20px; } .sec .item-flex .pic { width: 18.5%; padding-top: 30px; } .sec .item-flex .text { width: 35%; } .sec .item-flex .text .item-ttl { line-height: 1; margin-bottom: 15px; } .sec .item-flex .text .item-ttl span { display: inline-block; padding-bottom: 5px; border-bottom: 2px solid #0d2e98; color: #0d2e98; font-weight: 700; font-size: 24px; } .sec .item-flex .text .item-name { line-height: 1; margin-bottom: 20px; font-size: 30px; font-weight: 700; } .sec .item-flex .text .item-text { font-size: 15px; line-height: 1.66; margin-bottom: 20px; } .sec .item-flex .text .item-btn { min-width: unset; max-width: 230px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; padding: 10px 20px; text-align: left; white-space: nowrap; font-size: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #5e5e5e; } .sec .item-flex .text .item-btn ::before { content: ""; display: inline-block; width: 15px; height: 15px; background: url(../img/arrow_btn.png) no-repeat; margin: 0 10px 0 0; -ms-flex-negative: 0; flex-shrink: 0; } .sec .item-flex .text .item-btn a { color: #fff; } .sec .item-flex .info { width: 41.3%; } .sec .item-flex .info .info-list { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; } .sec .item-flex .info .info-list li p { font-size: 15px; font-weight: 700; line-height: 1; margin-top: 13px; text-align: center; } .sec .item-flex .info .info-list.ptn1 li:nth-child(1) { width: 44%; } .sec .item-flex .info .info-list.ptn1 li:nth-child(2) { width: 49.5%; } .sec .item-flex .info .info-list.ptn2 li:nth-child(1) { width: 45%; } .sec .item-flex .info .info-list.ptn2 li:nth-child(2) { width: 49.7%; } .sec .item-flex .info .info-list.ptn3 li:nth-child(1) { width: 50%; } .sec .item-flex .info .info-list.ptn3 li:nth-child(2) { width: 46.5%; } .sec .item-flex .info .info-list.ptn4 li:nth-child(1) { width: 44%; } .sec .item-flex .info .info-list.ptn4 li:nth-child(2) { width: 51.6%; } .sec .item-flex .info .info-list.ptn5 li:nth-child(1) { width: 60%; } .sec .item-flex .info .info-list.ptn5 li:nth-child(1) img { display: block; width: 88%; margin-left: auto; margin-right: auto; } .sec .item-flex .info .info-list.ptn5 li:nth-child(2) { width: 34%; } .sec .item-flex .info .info-list.ptn5 li:nth-child(2) img { display: block; width: 77%; margin-left: auto; margin-right: auto; } .sec .item-flex .info .info-text { font-size: 15px; line-height: 1.66; } .sec .bnr-list li { margin-top: 25px; } .sec .bnr-list li:first-child { margin-top: 77px; } @media only screen and (max-width: 768px) { .mainslide-wrap { background: #0d2e98; position: relative; margin-bottom: 10vw; } .mainslide-wrap .slider-wrap { width: 100%; position: relative; } .mainslide-wrap .slider-wrap .slide-box { padding-top: 110vw; } .mainslide-wrap .main-text { width: 72%; position: absolute; z-index: 2; right: 0; left: 0; margin-left: auto; margin-right: auto; top: 62%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .copy-box { padding-top: 9vw; padding-bottom: 20vw; } .copy-box .copy-head { line-height: 1.56; font-size: 6vw; margin-bottom: 2vw; } .copy-box .copy-tex { font-size: 4.1vw; line-height: 1.88; text-align: justify; } .sec { margin-bottom: 18vw; } .sec .sec-bg { margin-bottom: 0vw; min-height: 9.1vw; } .sec .sec-bg.ex{ margin-bottom: 10vw; min-height: 9vw; } .sec .sec-bg .sec-ttl { max-width: none; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 4vw; position: relative; } .sec .sec-bg .sec-ttl img { margin-top: -5vw; vertical-align: top; } .sec .sec-bg .sec-name { margin-bottom: 7vw; font-size: 6vw; line-height: 1.56; text-align: center; letter-spacing: 0.1em; } .sec .sec-bg .youtube { position: relative; width: 100%; padding-top: 56.25%; margin-top: -16vw; /* 今回のメインテーマ */ top: 16vw; /* 今回のメインテーマ */ } .sec .sec-bg .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .sec .illust { margin-bottom: 8vw; max-width: none; margin-left: auto; margin-right: auto; } .sec .info-flex { display: block; margin-bottom: 8vw; } .sec .info-flex.ptn1 { margin-bottom: 4vw; } .sec .info-flex.ptn4 { margin-bottom: 4vw; } .sec .info-flex.ptn4 .text { width: 100%; } .sec .info-flex.ptn4 .img { width: 70.6%; margin-left: auto; margin-right: auto; } .sec .info-flex.ptn5 { margin-bottom: 4.8vw; } .sec .info-flex.ptn5 .text { width: 100%; margin-bottom: 6vw; } .sec .info-flex.ptn5 .img { width: 100%; } .sec .info-flex.ptn5 .img img { width: 75%; display: block; margin-left: auto; margin-right: 13.5vw; } .sec .info-flex .text { padding-left: 0%; width: 100%; margin-bottom: 4vw; } .sec .info-flex .text p { font-size: 4.3vw; line-height: 1.9; } .sec .info-flex .img { width: 100%; } .sec .info-flex .img .notes { text-align: right; line-height: 1; margin-top: 7vw; } .sec .note-box { margin-bottom: 7vw; } .sec .item-flex { padding: 8vw 6vw; display: block; justify-content: space-between; border-radius: 20px; } .sec .item-flex .pic { width: 70%; margin-left: auto; margin-right: auto; padding-top: 3vw; margin-bottom: 5vw; } .sec .item-flex .text { width: 100%; margin-bottom: 9.6vw; } .sec .item-flex .text .item-ttl { line-height: 1; margin-bottom: 3vw; } .sec .item-flex .text .item-ttl span { padding-bottom: 1vw; border-bottom: 2px solid #0d2e98; color: #0d2e98; font-weight: 700; font-size: 5.8vw; } .sec .item-flex .text .item-name { line-height: 1; margin-bottom: 4vw; font-size: 5.8vw; } .sec .item-flex .text .item-text { font-size: 3.6vw; line-height: 1.66; margin-bottom: 4vw; } .sec .item-flex .text .item-btn { padding: 3vw 3vw; font-size: 4.5vw; max-width: none; text-align: center; } .sec .item-flex .text .item-btn a { text-align: center; display: block; width: 68%; margin-left: auto; margin-right: auto; } .sec .item-flex .text .item-btn ::before { content: ""; display: inline-block; width: 4.5vw; height: 3.5vw; background: url(../img/arrow_btn.png) no-repeat center center; margin: 0 2vw 0 0; padding-top: 1vw; -ms-flex-negative: 0; flex-shrink: 0; } .sec .item-flex .info { width: 100%; } .sec .item-flex .info .info-list { display: block; justify-content: space-between; margin-bottom: 7vw; } .sec .item-flex .info .info-list li { margin-left: auto; margin-right: auto; } .sec .item-flex .info .info-list li p { font-size: 3.1vw; margin-top: 3vw; } .sec .item-flex .info .info-list.ptn1 li:nth-child(1) { width: 60%; margin-bottom: 4.5vw; } .sec .item-flex .info .info-list.ptn1 li:nth-child(2) { width: 66%; } .sec .item-flex .info .info-list.ptn2 li:nth-child(1) { width: 59%; margin-bottom: 4.5vw; } .sec .item-flex .info .info-list.ptn2 li:nth-child(2) { width: 66%; } .sec .item-flex .info .info-list.ptn3 li:nth-child(1) { width: 59%; margin-bottom: 4.5vw; } .sec .item-flex .info .info-list.ptn3 li:nth-child(2) { width: 69%; } .sec .item-flex .info .info-list.ptn4 li:nth-child(1) { width: 59%; margin-bottom: 4.5vw; } .sec .item-flex .info .info-list.ptn4 li:nth-child(2) { width: 70%; } .sec .item-flex .info .info-list.ptn5 li:nth-child(1) { width: 73%; margin-bottom: 4.5vw; } .sec .item-flex .info .info-list.ptn5 li:nth-child(1) img { display: block; width: 100%; margin-left: auto; margin-right: auto; } .sec .item-flex .info .info-list.ptn5 li:nth-child(2) { width: 44%; } .sec .item-flex .info .info-list.ptn5 li:nth-child(2) img { display: block; width: 74%; margin-left: auto; margin-right: auto; } .sec .item-flex .info .info-text { font-size: 3.62vw; line-height: 1.66; } .sec .bnr-list li { margin-top: 3vw; } .sec .bnr-list li:first-child { margin-top: 7vw; } footer { padding-bottom: 15vw; } .fl-box { top: auto; bottom: 0; right: 0; max-width: none; } .fl-box .fl-bnr { max-width: none; } .st-backToTopFixed { bottom: 20vw !important; } } /*20231020追記*/ .komari-bg{ width: 96%; margin-left: auto; margin-right: auto; max-width: 1050px; padding: 38px 0px; box-sizing: border-box; border-radius: 25px; margin-bottom: 56px; background: #cde4f1; font-weight: 600; } .komari-bg .ttl-box{ border-radius: 30px; background: #fff; margin-bottom: 28px; width: 86%; max-width: 936px; margin-left: auto; margin-right: auto; position: relative; } .komari-bg .ttl-box .ttl-text{ line-height: 1; color: #0d2e98; text-align: center; padding-top: 20px; padding-bottom: 20px; font-size: 24px; } .komari-bg .ttl-box .ttl-img{ width: 140px; right:40px; bottom: 0; position: absolute; } .komari-bg .komari-list{ width: 86%; max-width: 936px; margin-left: auto; margin-right: auto; display: flex; justify-content: space-between; } .komari-bg .komari-list li{ color: #fff; font-size: 25px; line-height: 1.56; border-radius: 10px; text-align: center; background: #02b3d6; padding-top: 30px; padding-bottom: 30px; width: 31.4%; display: flex; align-items: center; justify-content: center; } .h-copy{ text-align: center; margin-bottom: 50px; line-height: 1.9; color: #0d2e98; font-size: 24px; } .flex-box1{ display: flex; max-width: 864px; margin-left: auto; margin-right: auto; align-items: center; justify-content: space-between; } .flex-box1 .left{ width: 45.3%; } .flex-box1 .right{ width: 50.4%; } .flex-box2{ display: flex; max-width: 864px; margin-left: auto; margin-right: auto; align-items: center; justify-content: space-between; } .flex-box2 .left{ width: 54.3%; } .flex-box2 .right{ width: 36.7%; color: #000000; } .flex-box2 .right .name{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #000; font-size: 24px; line-height: 1; font-weight: 600; text-align: left; letter-spacing: 0.05em; } .flex-box2 .right .price{ font-size: 28px; line-height: 1; margin-bottom: 10px; letter-spacing: 0; font-weight: 600; text-align: left; } .flex-box2 .right .price .mini1{ font-size: 12px; } .flex-box2 .right .price .mini2{ font-size: 22px; } .flex-box2 .right .notes{ font-size: 12px; line-height: 1.5; text-align: left; padding-left: 1em; text-indent: -1em; } .flex-list{ display: flex; max-width: 954px; margin-left: auto; margin-right: auto; align-items: center; justify-content: space-between; } .flex-list li{ width: 35.2%; } .flex-list li:first-child{ width: 22.4%; } .flex-list li .ex-caption{ margin-top: 30px; text-align: center; font-size: 15px; line-height: 1.66; } @media only screen and (max-width: 768px) { .komari-bg{ width: 100%; max-width: none; padding: 30vw 0px 8vw; box-sizing: border-box; border-radius: 0px; margin-bottom: 8vw; font-weight: 600; } .komari-bg .ttl-box{ border-radius: 12vw; margin-bottom: 4vw; width: 86%; max-width: none; margin-left: auto; margin-right: auto; position: relative; } .komari-bg .ttl-box .ttl-text{ line-height: 1.47; padding-top: 2.4vw; padding-bottom: 2.4vw; font-size: 4.5vw; } .komari-bg .ttl-box .ttl-img{ width: 20%; right:0px; bottom: 0; position: absolute; } .komari-bg .komari-list{ width: 86%; max-width: none; display: block; } .komari-bg .komari-list li{ font-size: 5vw; border-radius: 2vw; padding-top: 4.2vw; padding-bottom: 4.2vw; margin-bottom: 2.4vw; width: 100%; } .komari-bg .komari-list li:last-child{ margin-bottom: 0; } .h-copy{ text-align: left; margin-bottom: 8vw; line-height: 1.9; font-size: 4.35vw; } .flex-box1{ display: block; max-width:none; margin-left: auto; margin-right: auto; } .flex-box1 .left{ width: 87.5%; margin-bottom: 7.2vw; } .flex-box1 .right{ width: 100%; } .flex-box2{ display: block; max-width:none; margin-left: auto; margin-right: auto; } .flex-box2 .left{ width: 100%; margin-bottom: 4.8vw; } .flex-box2 .right{ width: 78.5%; } .flex-box2 .right .name{ padding-bottom: 3.3vw; margin-bottom: 3.3vw; font-size: 4.8vw; line-height: 1; } .flex-box2 .right .price{ font-size: 5.8vw; line-height: 1; margin-bottom: 2.9vw; } .flex-box2 .right .price .mini1{ font-size: 3.1vw; } .flex-box2 .right .price .mini2{ font-size: 4.6vw; } .flex-box2 .right .notes{ font-size: 2.9vw; line-height: 1.5; } .flex-list{ display: block; max-width: none; } .flex-list li{ width: 88%; margin-left: auto; margin-right: auto; margin-top: 8.4vw; } .flex-list li:first-child{ width: 56%; } .flex-list li .ex-caption{ margin-top: 4.8vw; text-align: center; font-size: 3.3vw; line-height: 1.66; } } .mod-productLineUp2 { margin-bottom: 0; border-bottom: solid 1px #d9d9d9; margin-top: 30px; padding-bottom: 30px; } .mod-productLineUp2 + .mod-iconHeading { margin-top: 50px; } .mod-productLineUp2_heading { font-weight: bold; margin: 0 0 8px; } .mod-productLineUp2_item{ position: relative; padding-bottom: 60px; } .mod-productLineUp2_item:first-child { position: relative; } .mod-productLineUp2_item:first-child:after { content: ""; display: inline-block; width: 1px; height: 100%; background-color: #d9d9d9; position: absolute; top: 0; right: -22px; } .mod-productLineUp2_desc { margin-top: 15px; font-size: 14px!important; font-weight: 500!important; } .u-green { color: #0d2e98; } .mod-productLineUp2_btn { width: 240px; margin: 0 auto 0; background-color: #1a1a1a; display: block; text-align: center; padding: 8px 0; position: absolute; right: 0; left: 0; bottom: 0; margin: auto; } .mod-productLineUp2_btn span { font-size: 14px; color: #ffffff; } .mod-productLineUp2_btn span:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.25em; margin-left: 8px; } @media only screen and (max-width: 768px) { .mod-productLineUp2 { padding-bottom: 0px; border-bottom: none; margin-top: 25px; } .mod-productLineUp2 + .mod-productLineUp2 { margin-top: 30px; } .mod-productLineUp2 + .mod-iconHeading { margin-top: 30px; } .mod-productLineUp2_item{ border-bottom: solid 1px #d9d9d9; padding-bottom: 30px; margin-bottom: 15px; } .mod-productLineUp2_item:first-child:after { content: none; } .mod-productLineUp2_desc { margin-top: 10px; font-size: 3.3vw!important; line-height: 1.4!important; } .mod-productLineUp2_btn { width: 225px; margin: 10px auto 0; background-color: #1a1a1a; display: block; text-align: center; padding: 8px; position: static; } .mod-productLineUp2_btn span { font-size: 14px; color: #ffffff; } .mod-productLineUp2_btn span:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.25em; margin-left: 8px; } .mod-productLineUp2_text{ width: calc(50% - 10px); margin-left: 10px; } .mod-productLineUp2_list_feature2 ul li{ line-height: 1.4; text-align: left; font-size: 3.1vw; } } .mod-sectionHeading { color: #ffffff; font-size: 24px; line-height: 1.3; font-weight: bold; padding: 14px 20px; background-color: #0d2e98; } .mod-bgGray-heading{ background-color: #f2f2f2; font-size: 18px; font-weight: bold; border-left: 5px solid #0d2e98; padding: 15px 15px 10px 25px; } .mod-green-heading{ padding-bottom: 7px; border-bottom: 1px solid #0d2e98; } .mod-green-heading span{ font-size: 16px; font-weight: bold; display: block; border-left: solid 5px #0d2e98; padding-left: 18px; } .mod-green-heading span em{ font-size: 12px; border-radius: 3px; color: #ffffff; background-color: #0d2e98; padding: 4px 8px; margin-right: 10px; letter-spacing: 0; } .mod-iconHeading { background-color: #f2f2f2; font-size: 16px; line-height: 1.3; font-weight: bold; border-left: 5px solid #0d2e98; padding: 15px 15px 15px 20px; } .mod-iconHeading span { position: relative; padding-left: 46px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mod-iconHeading span:before{ content: ''; display: inline-block; background-size: 100% 100%; background-repeat: no-repeat; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: flex; align-items: center; } @media only screen and (max-width: 768px) { .mod-sectionHeading { font-size: 20px; font-weight: bold; padding: 10px 18px; } .mod-bgGray-heading{ font-size: 16px; padding: 8px 10px 8px 12px; } .mod-green-heading{ padding-bottom: 4px; } .mod-iconHeading { font-size: 16px; padding: 10px 12px 8px 17px; } .mod-iconHeading span { padding-left: 46px; } } .mod-grayHeading{ background-color: #666666; color: #fff; font-size: 18px; font-weight: 700; text-align: center; padding: 3px; } .mod-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .mod-table + .mod-table { margin-top: 30px; } .mod-table__th, .mod-table__td { padding: 10px 10px; vertical-align: top; border: solid 1px #d9d9d9; text-align: center; vertical-align: middle; } .mod-table__th { color: #456295; background-color: #d7ede8; text-align: center; } .mod-table__head .mod-table__th { font-size: 18px; background-color: #999999; color: #FFF; font-weight: 700; padding: 4px 10px; } .mod-table__td { background-color: #FFF; text-align: left; padding-left: 50px; } .mod-table__td.mod-table__td--links{ box-sizing: border-box; padding-left: 10.5%; } .mod-table__td a{ color: #0d2e98; font-size: 16px; font-weight: 700; line-height: 1.5; } .mod-table__td a + a{ margin-left: 25px; } .mod-table__td a span{ position: relative; padding-left: 20px; display: block; } .mod-table__td a span:before{ content: ''; width: 6px; height: 6px; border: 0px; border-top: solid 2px #0d2e98; border-right: solid 2px #0d2e98; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 50%; left: 0; margin-top: -6px; } .mod-table__td a { display: inline-block; } .mod-table__td a span{ } @media only screen and (max-width: 768px) { .mod-table__th, .mod-table__td { padding: 16px 8px; line-height: 1.16666; } .mod-table__head .mod-table__th { font-size: 16px; text-align: center; padding: 8px 10px; } .mod-table__th img{ width: 64%; height: auto; margin: 0 auto; } .mod-table__td{ text-align: left; } .mod-table__td.mod-table__td--links{ padding-left: 14%; } .mod-table__td.mod-table__td--links a+ a{ margin-top: 10px; } .mod-table__td a{ font-size: 12px; display: block; } .mod-table__td a span{ display: block; padding-left: 15px; } .mod-table__td a + a{ margin-left: 0px; } .mod-table__td { background-color: #FFF; font-size: 12px; } .mod-table colgroup col:first-child{ width: 20%!important; } .mod-table colgroup col:nth-child(2){ width: 30%!important; } .mod-table colgroup col:nth-child(3){ width: 50%!important; } } /*--linkList------------------------------------------------*/ .mod-linkLst{ display: flex; margin-left: -20px; padding-bottom: 30px; position: relative; } .mod-linkLst:after{ content:''; background-color: #d9d9d9; width: calc( 100% - 20px); height: 1px; position: absolute; left: 20px; bottom: 0; } .mod-linkList_btn{ width: calc(50% - 20px); margin-left: 20px; padding: 21px 0 16px; font-size: 18px; font-weight: 700; text-align: center; } .mod-linkList_btn--green{ background-color: #d7ede8; color: #0d2e98; border-top: 3px solid #0d2e98; } .mod-linkList_btn--green{ border-top: none; border-bottom: 3px solid #0d2e98; } .mod-linkList_btn--gray{ color: #333333; background-color: #d9d9d9; } .mod-linkList_btn a{ display: block; } .mod-linkList_btn--gray a span{ padding-right: 30px; position: relative; } .mod-linkList_btn--gray a span:before{ content: ''; width: 6px; height: 6px; border: 0px; border-top: solid 2px #333333; border-right: solid 2px #333333; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; right: 0; margin-top: -4px; transition: all .3s; } .mod-linkList_btn--gray a:hover span:before{ right: -5px; } @media only screen and (max-width: 768px) { .mod-linkLst{ margin-left: -10px; padding-bottom: 25px; } .mod-linkList_btn{ width: calc(50% - 10px); margin-left: 10px; padding: 16px 0 18px; font-size: 12px; } .mod-linkList_btn.mod-linkList_btn--gray{ padding: 0; } .mod-linkList_btn.mod-linkList_btn--gray a{ padding: 18px 0 18px; display: flex; align-items: center; justify-content: center; } .mod-linkList_btn.mod-linkList_btn--gray a span{ padding-right: 0; } .mod-linkList_btn.mod-linkList_btn--gray a span:before{ right: -15px; } } /*--------------------------------------------*/ .mod-productLineUp2 .mod-productLineUp2_list .u-emphasis{ border: solid 1px #d2d4d9; background-color: #fff; padding: 6px 10px; font-size: 12px; text-align: left; } .mod-productLineUp2_list_feature2 li{ line-height: 1.5; } .mod-productLineUp2_heading a{ color: #0d2e98; text-decoration: underline; } .mod-productLineUp2_heading a:before{ border-top: 2px solid #0d2e98; border-right: 2px solid #0d2e98; } @media only screen and (max-width: 768px) { .mod-productLineUp2 .mod-productLineUp2_list .u-emphasis{ border: solid 1px #d2d4d9; background: #f2f2f2; padding: 1px 8px; font-size: 3.1vw; } .mod-productLineUp2_heading a{ letter-spacing: 0.05em; } } @media only screen and (min-width:760px) { .sp-obj { display: none; } .mod-categoryTopHeroImg_img-sp{ display: none; } } @media only screen and (max-width: 768px) { .pc-obj { display: none; } .mod-categoryTopHeroImg_img-pc{ display: none; } } /*slick*/ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ""; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /*common*/ main { font-family: "Noto Sans JP", "Noto Sans CJK JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; font-weight: 500; } @media print, screen and (min-width: 769px) { /* CSS Document */ /*html {font-size: 62.5%;}*/ body { /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/ /*font-family: AXIS Std,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','Helvetica Neue', 'Helvetica', 'Arial',sans-serif; font-family: 'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','Helvetica Neue', 'Helvetica', 'Arial',sans-serif;*/ color: #333333; font-size: 14px; line-height: 24px; } * { margin: 0; padding: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3, h4, h5 { margin: 0; padding: 0; } div { margin: 0; padding: 0; } p { margin: 0; padding: 0; } a { /*color:#131341; */ text-decoration: none; } a:visited { /* color:#131341;*/ } a:hover { /*color:#131341; text-decoration:underline;*/ } a:focus { /*color:#131341; outline: thin dotted; */ } a:hover, a:active { /*color:#131341; outline: 0;*/ } table, th, td { margin: 0; padding: 0; font-size: inherit; font-size: 1em; border-collapse: collapse; } table { width: 100%; } ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; list-style-position: outside; } img { margin: 0; padding: 0; border: none; line-height: 0; vertical-align: bottom; } article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } /*------------------------ option.css ------------------------*/ /*=========display=========*/ .DisPlayNone { display: none; } .DisPlayBlock { display: block; } .DisPlayInline { display: inline; } /*=========float=========*/ .FRight { float: right; } .FLeft { float: left; } /*=========clear=========*/ .ClearBoth { clear: both; } .ClearRight { clear: right; } .ClearLeft { clear: left; } .ClearBox { clear: both; height: 0; overflow: hidden; } .ClearFix { zoom: 1; } .ClearFix:after { display: block; clear: both; height: 0; visibility: hidden; line-height: 0; content: "."; } .clearfix:after { content: ""; display: block; clear: both; height: 0; } /* no ie mac \*/ * html .ClearFix { height: 1%; } .ClearFix { display: block; } /*=========visibility=========*/ .VisVis { visibility: visible; } .VisHid { visibility: hidden; } .VisCol { visibility: collapse; } /*=========マージン設定=========*/ .MA0 { margin: 0; } .MRLAuto { margin-left: auto; margin-right: auto; } .MT0 { margin-top: 0; } .MT5 { margin-top: 5px; } .MT10 { margin-top: 10px; } .MT15 { margin-top: 15px; } .MT20 { margin-top: 20px; } .MT25 { margin-top: 25px; } .MT30 { margin-top: 30px; } .MT40 { margin-top: 40px; } .MT45 { margin-top: 45px; } .MT47 { margin-top: 47px; } .MT50 { margin-top: 50px; } .MT51 { margin-top: 51px; } .MT54 { margin-top: 54px; } .MT55 { margin-top: 55px; } .MT60 { margin-top: 60px; } .MT61 { margin-top: 61px; } .MT66 { margin-top: 66px; } .MT70 { margin-top: 70px; } .MT80 { margin-top: 80px; } .MT90 { margin-top: 90px; } .MT95 { margin-top: 95px; } .MT100 { margin-top: 100px; } .MT120 { margin-top: 120px; } .MT160 { margin-top: 160px; } .MR0 { margin-right: 0; } .MR5 { margin-right: 5px; } .MR10 { margin-right: 10px; } .MR15 { margin-right: 15px; } .MR20 { margin-right: 20px; } .MR25 { margin-right: 25px; } .MR30 { margin-right: 30px; } .MR35 { margin-right: 35px; } .MR40 { margin-right: 40px; } .MR45 { margin-right: 45px; } .MR50 { margin-right: 50px; } .MR60 { margin-right: 60px; } .MB0 { margin-bottom: 0; } .MB5 { margin-bottom: 5px; } .MB6 { margin-bottom: 6px; } .MB8 { margin-bottom: 8px; } .MB10 { margin-bottom: 10px; } .MB15 { margin-bottom: 15px; } .MB20 { margin-bottom: 20px; } .MB25 { margin-bottom: 25px; } .MB27 { margin-bottom: 27px; } .MB30 { margin-bottom: 30px; } .MB35 { margin-bottom: 35px; } .MB39 { margin-bottom: 39px; } .MB40 { margin-bottom: 40px; } .MB43 { margin-bottom: 43px; } .MB45 { margin-bottom: 45px; } .MB47 { margin-bottom: 47px; } .MB50 { margin-bottom: 50px; } .MB54 { margin-bottom: 54px; } .MB55 { margin-bottom: 55px; } .MB56 { margin-bottom: 56px; } .MB60 { margin-bottom: 60px; } .MB65 { margin-bottom: 65px; } .MB67 { margin-bottom: 67px; } .MB70 { margin-bottom: 70px; } .MB75 { margin-bottom: 75px; } .MB80 { margin-bottom: 80px; } .MB85 { margin-bottom: 85px; } .MB90 { margin-bottom: 90px; } .MB93 { margin-bottom: 93px; } .MB95 { margin-bottom: 95px; } .MB100 { margin-bottom: 100px; } .MB104 { margin-bottom: 104px; } .MB109 { margin-bottom: 109px; } .MB110 { margin-bottom: 110px; } .MB115 { margin-bottom: 115px; } .MB120 { margin-bottom: 120px; } .MB125 { margin-bottom: 125px; } .MB130 { margin-bottom: 130px; } .MB134 { margin-bottom: 134px; } .MB138 { margin-bottom: 138px; } .MB142 { margin-bottom: 142px; } .MB150 { margin-bottom: 150px; } .MB153 { margin-bottom: 153px; } .MB160 { margin-bottom: 160px; } .MB167 { margin-bottom: 167px; } .MB180 { margin-bottom: 180px; } .MB200 { margin-bottom: 200px; } .ML0 { margin-left: 0; } .ML5 { margin-left: 5px; } .ML10 { margin-left: 10px; } .ML15 { margin-left: 15px; } .ML20 { margin-left: 20px; } .ML25 { margin-left: 25px; } .ML30 { margin-left: 30px; } .ML35 { margin-left: 35px; } .ML40 { margin-left: 40px; } .ML45 { margin-left: 45px; } .ML50 { margin-left: 50px; } .ML60 { margin-left: 60px; } .ML70 { margin-left: 70px; } .ML100 { margin-left: 100px; } /*=========パディング設定=========*/ .PA0 { padding: 0; } .PA10 { padding: 10px; } .PA20 { padding: 20px; } .PA30 { padding: 30px; } .PT0 { padding-top: 0; } .PT5 { padding-top: 5px; } .PT10 { padding-top: 10px; } .PT15 { padding-top: 15px; } .PT20 { padding-top: 20px; } .PT25 { padding-top: 25px; } .PT30 { padding-top: 30px; } .PT35 { padding-top: 35px; } .PT40 { padding-top: 40px; } .PT50 { padding-top: 50px; } .PT55 { padding-top: 55px; } .PT60 { padding-top: 60px; } .PT70 { padding-top: 70px; } .PT80 { padding-top: 80px; } .PT90 { padding-top: 90px; } .PT100 { padding-top: 100px; } .PT104 { padding-top: 104px; } .PT110 { padding-top: 110px; } .PT120 { padding-top: 120px; } .PT130 { padding-top: 130px; } .PR0 { padding-right: 0; } .PR5 { padding-right: 5px; } .PR10 { padding-right: 10px; } .PR15 { padding-right: 15px; } .PR20 { padding-right: 20px; } .PR30 { padding-right: 30px; } .PR35 { padding-right: 35px; } .PR40 { padding-right: 40px; } .PR50 { padding-right: 50px; } .PR60 { padding-right: 60px; } .PR70 { padding-right: 70px; } .PB0 { padding-bottom: 0; } .PB5 { padding-bottom: 5px; } .PB10 { padding-bottom: 10px; } .PB15 { padding-bottom: 15px; } .PB20 { padding-bottom: 20px; } .PB25 { padding-bottom: 25px; } .PB30 { padding-bottom: 30px; } .PB32 { padding-bottom: 32px; } .PB40 { padding-bottom: 40px; } .PB50 { padding-bottom: 50px; } .PB60 { padding-bottom: 60px; } .PB70 { padding-bottom: 70px; } .PB90 { padding-bottom: 90px; } .PB93 { padding-bottom: 93px; } .PB97 { padding-bottom: 97px; } .PB100 { padding-bottom: 100px; } .PB110 { padding-bottom: 110px; } .PB116 { padding-bottom: 116px; } .PB143 { padding-bottom: 143px; } .PL0 { padding-left: 0; } .PL5 { padding-left: 5px; } .PL10 { padding-left: 10px; } .PL15 { padding-left: 15px; } .PL20 { padding-left: 20px; } .PL30 { padding-left: 30px; } .PL40 { padding-left: 40px; } .PL50 { padding-left: 50px; } .PL100 { padding-left: 100px; } /*=========Border=========*/ .BorderNone { border: none; } /*=========Font=========*/ .FontBold { font-weight: bold; } .FC_blue { color: #0088fb; } .FC_white { color: #ffffff; } .FC_Red { color: #FF3333; } a.FC_blue2 { color: #007FFF; } a.FC_blue2:visited { color: #551a8b; } a.FC_blue2:active { color: #551a8b; } .FontS { font-size: 80%; line-height: 1.2em; } .FontSS { font-size: 70%; line-height: 1.5em; } .FontB { font-size: 120%; } .F11 { font-size: 11px; line-height: 12px; } /*=========text-align=========*/ .TACenter { text-align: center; } .TARight { text-align: right; } .TALeft { text-align: left; } /*=========Indent=========*/ .caption { text-align: left; display: block; clear: both; font-size: 85%; line-height: 130%; padding-top: 5px; } .caption_right { font-size: 85%; text-align: right; display: block; line-height: 130%; clear: both; padding-top: 5px; } .caption02 { font-size: 9px; line-height: 12px; } .caption03 { font-size: 10px; line-height: 15px; color: #fff; } .caption04 { font-size: 10px; line-height: 15px; color: #fff; width: 928px; text-align: right; margin-bottom: 20px; } .visible_pc { display: block; } .visible_sp { display: none; } } @media only screen and (max-width: 768px) { * { margin: 0; padding: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; } body { /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/ font-size: 1.4rem; /*14px*/ line-height: 1.42857143; color: #333333; } h1, h2, h3, h4, h5 { margin: 0; padding: 0; } div { margin: 0; padding: 0; } p { margin: 0; padding: 0; } a { color: #131341; text-decoration: none; } /*a:visited { color: #131341; } a:hover { color: #131341; text-decoration: underline; } a:focus { color: #131341; outline: thin dotted; } a:hover, a:active { color: #131341; outline: 0; }*/ table, th, td { margin: 0; padding: 0; font-size: inherit; font-size: 1em; border-collapse: collapse; } table { width: 100%; } ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; list-style-position: outside; } img { margin: 0; padding: 0; border: none; line-height: 0; vertical-align: bottom; max-width: 100%; } article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } /*------------------------ option.css ------------------------*/ /*=========display=========*/ .DisPlayNone { display: none; } .DisPlayBlock { display: block; } .DisPlayInline { display: inline; } /*=========float=========*/ /*=========clear=========*/ .ClearBoth { clear: both; } .ClearRight { clear: right; } .ClearLeft { clear: left; } .ClearBox { clear: both; height: 0; overflow: hidden; } .ClearFix { zoom: 1; } .ClearFix:after { display: block; clear: both; height: 0; visibility: hidden; line-height: 0; content: "."; } .clearfix:after { content: ""; display: block; clear: both; height: 0; } /* no ie mac \*/ * html .ClearFix { height: 1%; } .ClearFix { display: block; } /*=========visibility=========*/ .VisVis { visibility: visible; } .VisHid { visibility: hidden; } .VisCol { visibility: collapse; } /*=========Border=========*/ .BorderNone { border: none; } /*=========Font=========*/ .FontBold { font-weight: bold; } .FC_blue { color: #0088fb; } .FC_white { color: #ffffff; } .FC_Red { color: #FF3333; } a.FC_blue2 { color: #007FFF; } a.FC_blue2:visited { color: #551a8b; } a.FC_blue2:active { color: #551a8b; } .FontS { font-size: 80%; line-height: 1.2em; } .FontSS { font-size: 70%; line-height: 1.5em; } .FontB { font-size: 120%; } .F11 { font-size: 11px; line-height: 12px; } /*=========text-align=========*/ /*.TACenter { text-align: center; } .TARight { text-align: right; } .TALeft { text-align: left; }*/ /*=========Indent=========*/ .caption { text-align: left; display: block; clear: both; font-size: 85%; line-height: 130%; padding-top: 5px; } .caption_right { font-size: 85%; text-align: right; display: block; line-height: 130%; clear: both; padding-top: 5px; } .caption02 { font-size: 9px; line-height: 12px; } .caption03 { font-size: 10px; line-height: 15px; color: #fff; } .caption04 { font-size: 10px; line-height: 15px; color: #fff; width: 928px; text-align: right; margin-bottom: 20px; } .tar { text-align: right; } .visible_sp { display: block; } .visible_pc { display: none; } .mb1 { margin-bottom: 1%; } .mb2 { margin-bottom: 2%; } .mb3 { margin-bottom: 3%; } .mb4 { margin-bottom: 4%; } .mb5 { margin-bottom: 5%; } .mb6 { margin-bottom: 6%; } .mb7 { margin-bottom: 7%; } .mb8 { margin-bottom: 8%; } .mb9 { margin-bottom: 9%; } .mb10 { margin-bottom: 10%; } .mb11 { margin-bottom: 11%; } .mb12 { margin-bottom: 12%; } .mb13 { margin-bottom: 13%; } .mb15 { margin-bottom: 15%; } .mb17 { margin-bottom: 17%; } .mb20 { margin-bottom: 20%; } .mt1 { margin-top: 1%; } .mt2 { margin-top: 2%; } .mt3 { margin-top: 3%; } .mt4 { margin-top: 4%; } .mt5 { margin-top: 5%; } .mt6 { margin-top: 6%; } .mt7 { margin-top: 7%; } .mt8 { margin-top: 8%; } .mt9 { margin-top: 9%; } .mt10 { margin-top: 10%; } .mt12 { margin-top: 12%; } .mt17 { margin-top: 17%; } .ml1 { margin-left: 1%; } .ml2 { margin-left: 2%; } .ml3 { margin-left: 3%; } .ml4 { margin-left: 4%; } .ml5 { margin-left: 5%; } .ml6 { margin-left: 6%; } .ml7 { margin-left: 7%; } .ml8 { margin-left: 8%; } .ml9 { margin-left: 9%; } .ml10 { margin-left: 10%; } .mr1 { margin-right: 1%; } .mr2 { margin-right: 2%; } .mr3 { margin-right: 3%; } .mr4 { margin-right: 4%; } .mr5 { margin-right: 5%; } .mr6 { margin-right: 6%; } .mr7 { margin-right: 7%; } .mr8 { margin-right: 8%; } .mr9 { margin-right: 9%; } .mr10 { margin-right: 10%; } .pb1 { padding-bottom: 1%; } .pb2 { padding-bottom: 2%; } .pb3 { padding-bottom: 3%; } .pb4 { padding-bottom: 4%; } .pb5 { padding-bottom: 5%; } .pb6 { padding-bottom: 6%; } .pb7 { padding-bottom: 7%; } .pb8 { padding-bottom: 8%; } .pb9 { padding-bottom: 9%; } .pb10 { padding-bottom: 10%; } .pb11 { padding-bottom: 11%; } .pb12 { padding-bottom: 12%; } .pb16 { padding-bottom: 16%; } .pt1 { padding-top: 1%; } .pt2 { padding-top: 2%; } .pt3 { padding-top: 3%; } .pt4 { padding-top: 4%; } .pt5 { padding-top: 5%; } .pt6 { padding-top: 6%; } .pt7 { padding-top: 7%; } .pt8 { padding-top: 8%; } .pt9 { padding-top: 9%; } .pt10 { padding-top: 10%; } .pt12 { padding-top: 12%; } .pt15 { padding-top: 15%; } .tac { text-align: center; } } @-ms-viewport { width: device-width; } .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 420px) { .hidden-xs { display: none !important; } } @media (min-width: 420px) and (max-width: 770px) { .hidden-sm { display: none !important; } } @media (min-width: 770px) { .hidden-md { display: none !important; } }/*# sourceMappingURL=style.css.map */