/* CSS Document */ 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 : 901px) { /* 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: #333; font-size: 14px; } *{ 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; } .MB134 { margin-bottom:134px; } .MB138 { margin-bottom:138px; } .MB142 { margin-bottom:142px; } .MB150 { margin-bottom:150px; } .MB153 { margin-bottom:153px; } .MB167 { margin-bottom:167px; } .MB180 { margin-bottom:180px; } .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; } .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; } .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 print, screen and (max-width: 900px) { *{ 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-size: 1.4rem; /*14px*/ color: #1D1D1D; } 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%; } .tac{ text-align: center; } } @-ms-viewport { width: device-width; } /*.mod-freeHTML{ font-family: 'M PLUS Rounded 1c',"Meiryo", "メイリオ", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif!important; font-weight: 500; }*/ img{ max-width: 100%; } .position{ position: relative; } .wrap1{ width: 90%; max-width: 1000px; margin-left: auto; margin-right: auto; } .wrap2{ width: 80%; max-width: 800px; margin-left: auto; margin-right: auto; } .wrap3{ width: 90%; max-width: 740px; margin-left: auto; margin-right: auto; } .wrap4{ width: 90%; max-width: 650px; margin-left: auto; margin-right: auto; } .wrap5{ width: 90%; max-width: 600px; margin-left: auto; margin-right: auto; } .naname{ font-style: italic; } .main-img{ margin-bottom: 50px; } .main-img img{ width: 100%; } .mod-freeHTML{ width: 100%; overflow: hidden; } .note-box{ margin-bottom: 20px; } .youtube { position: relative; width: 100%; padding-top: 56.25%; } .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .main-wrap{ width: 100%; overflow-x: hidden; color: #333333; } .head-box{ padding-top: 56px; padding-bottom: 80px; } .head-box-ttl{ font-size: 55px; color: #0c2da1; line-height: 1.36; text-align: center; font-weight: 700; } .head-box-ttl .big{ font-size: 75px; } .head-box-ttl .line{ background: linear-gradient(transparent 80%, #fff100 0%); } .head-flex{ display: flex; justify-content: space-between; margin-top: 40px; align-items: center; } .head-flex .flex-img{ width: 47.3%; } .head-flex .flex-text{ width: 40.8%; } .head-flex .flex-text .txt1{ font-size: 16px; line-height: 1.5; margin-bottom: 15px; font-weight: 700; } .head-flex .flex-text .item-name{ margin-bottom: 20px; } .head-flex .flex-text .good-logo{ width: 69%; } .head-flex .flex-text .txt2{ font-size: 16px; line-height: 1.35; font-weight: 700; } .head-flex .flex-text .txt2 sup{ font-size: 12px; } .con-ttl{ position: relative; background: #0c2da1; } .con-ttl .obi-ttl{ max-width: 745px; width: 110%; position: absolute; left: -78px; top:-8px; } .con-ttl .ttl-text{ text-align: center; line-height: 1.32; color: #fff; font-size: 59px; padding-top: 130px; padding-bottom: 130px; font-weight: 700; } .con-ttl .ttl-text .mini{ font-size: 41px; line-height: 1.33; display: block; } .con-ttl .ttl-text .mini span{ font-size: 30px;; } .con-ttl .ttl-text .big{ font-size: 96px; } .con-text{ padding-bottom: 75px; background: #acc5e7; } .con-text .tex-wrap{ background: #fff; padding: 74px 30px 30px; margin-bottom: -85px; bottom:85px; position: relative; } .con-text .tex-wrap .top-text{ margin-bottom: 46px; font-size: 20px; line-height: 1.8; font-weight: 700; text-align: center; } .con-text .tex-wrap .top-text span{ color: #0c2da1; } .con-text .tex-wrap .img-box.ptn1{ max-width: 870px; margin-left: auto; margin-right: auto; padding-bottom: 60px; } .con-text .tex-wrap .img-box.ptn2{ max-width: 840px; margin-left: auto; margin-right: auto; padding-bottom: 30px; } .con-text .tex-wrap .img-box.ptn3{ max-width: 840px; margin-left: auto; margin-right: auto; padding-bottom: 30px; } .con-text .tex-wrap .plus-box{ position: relative; background: #d7e2f4; padding: 0 16px 16px; } .con-text .tex-wrap .plus-img{ top:-34px; position: absolute; left: 0; right:0; margin-left: auto; margin-right: auto; width: 72px; } .con-text .tex-wrap .plus-ttl{ padding-top: 60px; text-align: center; text-align: center; } .con-text .tex-wrap .plus-ttl .text1{ font-size: 16px; font-weight: 700; } .con-text .tex-wrap .plus-ttl .ttl-img{ width: 81.2%; margin-left: auto; margin-right: auto; max-width: 760px; margin-bottom: 20px; } .con-text .tex-wrap .plus-ttl .text2{ font-size: 23px; font-weight: 700; margin-bottom: 40px; } .con-text .tex-wrap .plus-ttl .text3{ font-size: 17px; line-height: 1.76; font-weight: 700; margin-bottom: 45px; } .con-text .tex-wrap .plus-ttl .text3 span{ color: #0c2da1; } .con-text .tex-wrap .merit-list{ display: flex; justify-content: space-between; margin-bottom: 23px; max-width: 868px; margin-left: auto; margin-right: auto; } .con-text .tex-wrap .merit-list li{ width: 31.3%; } .con-text .tex-wrap .merit-list li .merit-cap{ font-size: 24px; line-height: 1.5; color: #0c2da1; text-align: center; font-weight: 700; margin-top: 5px; } .notes{ font-size: 11px; line-height: 1.57; } .notes.right{ text-align: right; } .fl-btn{ position: fixed; top: 200px; right:0; z-index: 9999; width: 160px; } .fl-btn li a{ text-align: center; padding-top: 23px; padding-bottom: 23px; display: block; border-radius: 20px 0 0 20px; line-height: 1.38; font-size: 18px; font-weight: 700; color: #fff; border-top: 2px solid #fff; border-left: 2px solid #fff; border-bottom: 2px solid #fff; } .fl-btn li:nth-child(1){ margin-bottom: 12px; } .fl-btn li:nth-child(1) a{ background: #31a5b1; } .fl-btn li:nth-child(2) a{ background: #1733a4; } .demo-box{ background: #31a5b1; color: #fff; padding-top: 63px; padding-bottom: 56px; font-size: 20px; line-height: 1.8; text-align: center; } .demo-box .ttl-text{ font-size: 67px; color: #fff; line-height: 1.37; margin-bottom: 15px; font-weight: 700; } .demo-box sup{ font-size: 11px; } .demo-box .notes{ margin-top: 10px; font-size: 11px; } .demo-box .link-btn{ margin-top: 30px; } .demo-box .link-btn a{ padding-top: 20px; padding-bottom: 20px; background: #fff; position: relative; color: #31a7b1; font-size: 22px; line-height: 1; width: 100%; border-radius: 5px; display: block; font-weight: 700; } .demo-box .link-btn a .sankaku{ width: 8px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .demo-box .link-btn a .sankaku img{ display: block; } .bottom-box{ padding-top: 100px; padding-bottom: 60px; } .bottom-box .ttl-text{ margin-bottom: 45px; text-align: center; font-size: 30px; font-weight: 700; } .bottom-box .main-flex{ display: flex; align-items: flex-end; padding-bottom: 10px; border: 10px solid #d0d0d0; margin-bottom: 54px; } .bottom-box .main-flex .flex-img{ width: 11%; margin-left: 16%; } .bottom-box .main-flex .flex-img img{ margin-top: -25px; } .bottom-box .main-flex .flex-text{ width: 65%; margin-left: 8%; } .bottom-box .main-flex .flex-text .main{ font-size: 22px; line-height: 1.36; font-weight: 700; margin-bottom: 6px; } .bottom-box .main-flex .flex-text sup{ font-size: 11px; } .item-list li{ display: flex; margin-bottom: 50px; align-items: center; } .item-list li:last-child{ margin-bottom: 60px; } .item-list li .list-img{ width: 37.5%; margin-right: 8%; } .item-list li .list-text{ width: 38.1%; } .item-list li .list-text .txt1{ font-size: 16px; line-height: 1.5; margin-bottom: 10px; font-weight: 600; } .item-list li .list-text .good-logo{ width: 73.6%; margin-top: 10px; } .item-list li .list-text .link-btn a{ padding-top: 12px; padding-bottom: 12px; background: #333333;; position: relative; color: #fff; text-align: center; font-size: 18px; line-height: 1; width: 100%; border-radius: 5px; display: block; font-weight: 700; margin-top: 22px; } .item-list li .list-text .link-btn a .sankaku{ width: 8px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .item-list li .list-text .link-btn a .sankaku img{ display: block; } .bottom-btn{ margin-top: 120px; width: 70%; max-width: 300px; margin-left: auto; margin-right: auto; } .bottom-btn a{ border-radius: 50px; display: block; width: 100%; text-align: center; font-size: 18px; color: #fff; background: #1733a4; padding-top: 14px; padding-bottom: 14px; font-weight: 700; } @media print, screen and (max-width: 900px) { .head-box{ padding-top: 7.2vw; padding-bottom: 18.6vw; } .head-box-ttl{ font-size:6.4vw; } .head-box-ttl .big{ font-size: 8.8vw; } .head-box-ttl .line{ background: linear-gradient(transparent 80%, #fff100 0%); } .head-flex{ display: block; justify-content: space-between; margin-top: 6.6vw; align-items: center; } .head-flex .flex-img{ width: 56.6%; margin-left: auto; margin-right: auto; margin-bottom: 4.2vw; } .head-flex .flex-text{ width: 100%; text-align: center; } .head-flex .flex-text .txt1{ font-size: 3.2vw; line-height: 1.5; margin-bottom: 2vw; } .head-flex .flex-text .item-name{ margin-bottom: 4vw; width: 58%; margin-left: auto; margin-right: auto; } .head-flex .flex-text .good-logo{ width: 37%; margin-left: auto; margin-right: auto; margin-bottom: 1.4vw; } .head-flex .flex-text .txt2{ font-size: 3.2vw; line-height: 1.35; } .head-flex .flex-text .txt2 sup{ font-size: 2.5vw; } .main-img{ margin-bottom: 4.5vw; } .con-ttl .obi-ttl{ max-width: none; width: 110%; position: absolute; left: -21vw; top:-4.8vw; } .con-ttl .ttl-text{ text-align: center; line-height: 1.12; font-size: 7.8vw; padding-top: 18.9vw; padding-bottom: 18.9vw; } .con-ttl .ttl-text .mini{ font-size:5.4vw; line-height: 1.43; padding-bottom: 3vw; } .con-ttl .ttl-text .mini span{ font-size: 4vw; } .con-ttl .ttl-text .big{ font-size: 12.8vw; } .con-text{ padding-bottom: 12.8vw; } .con-text .tex-wrap{ padding: 7.2vw 3.3vw 3.3vw; margin-bottom: -13.3vw; bottom:13.3vw; } .con-text .tex-wrap .top-text{ margin-bottom: 6.1vw; font-size: 3.2vw; line-height: 1.8; } .con-text .tex-wrap .img-box.ptn1{ max-width: none; width: 91%; margin-left: auto; margin-right: auto; padding-bottom: 4vw; } .con-text .tex-wrap .img-box.ptn2{ max-width: none; width: 91%; margin-left: auto; margin-right: auto; padding-bottom: 4vw; } .con-text .tex-wrap .img-box.ptn3{ max-width: none; width: 91%; margin-left: auto; margin-right: auto; padding-bottom: 4vw; } .con-text .tex-wrap .plus-box{ position: relative; padding: 0 3.4vw 3.4vw; } .con-text .tex-wrap .plus-img{ top:-4.4vw; position: absolute; left: 0; right:0; margin-left: auto; margin-right: auto; width: 9.6vw; } .con-text .tex-wrap .plus-ttl{ padding-top: 8vw; text-align: center; text-align: center; } .con-text .tex-wrap .plus-ttl .text1{ font-size: 2.9vw; font-weight: 700; } .con-text .tex-wrap .plus-ttl .ttl-img{ width: 81.2%; margin-left: auto; margin-right: auto; max-width: none; margin-bottom: 2vw; } .con-text .tex-wrap .plus-ttl .text2{ font-size: 3.4vw; font-weight: 700; margin-bottom: 4.6vw; } .con-text .tex-wrap .plus-ttl .text3{ font-size: 2.9vw; line-height: 1.76; margin-bottom: 6vw; } .con-text .tex-wrap .merit-list{ display: block; margin-bottom: 0vw; max-width: none; margin-left: auto; margin-right: auto; width: 84.3%; } .con-text .tex-wrap .merit-list li{ width: 100%; margin-bottom: 6.9vw; } .con-text .tex-wrap .merit-list li .merit-cap{ font-size:4vw; margin-top: 1vw; text-align: center; font-weight: 700; } .demo-box{ padding-top: 8.6vw; padding-bottom: 16vw; font-size: 3.7vw; line-height: 1.67; text-align: left; } .demo-box .ttl-text{ font-size:10.6vw; text-align: center; line-height: 1.37; margin-bottom: 15px; } .demo-box sup{ font-size: 2.5vw; } .demo-box .notes{ margin-top: 2.5vw; font-size: 2.5vw; } .demo-box .link-btn{ margin-top: 8.4vw; } .demo-box .link-btn a{ padding-top: 3.4vw; padding-bottom: 3.4vw; font-size: 4vw; line-height: 1; width: 100%; border-radius: 1vw; display: block; text-align: center; } .demo-box .link-btn a .sankaku{ width: 2vw; position: absolute; right: 2vw; top: 50%; transform: translateY(-50%); } .bottom-box{ padding-top: 15.4vw; padding-bottom: 15.4vw; } .bottom-box .ttl-text{ margin-bottom: 12vw; text-align: center; font-size: 5.33vw; } .bottom-box .main-flex{ display: flex; align-items: flex-end; padding-bottom: 2.1vw; border: 1.8vw solid #d0d0d0; margin-bottom: 54px; } .bottom-box .main-flex .flex-img{ width: 27%; margin-left: 4%; } .bottom-box .main-flex .flex-img img{ margin-top: -12vw; } .bottom-box .main-flex .flex-text{ width: 58.5%; margin-left: 3%; } .bottom-box .main-flex .flex-text .main{ font-size: 3.7vw; line-height: 1.36; font-weight: 700; margin-bottom: 1vw; } .bottom-box .main-flex .flex-text .notes{ line-height: 1.2; } .bottom-box .main-flex .flex-text sup{ font-size: 2.5vw; } .item-list li{ display: block; margin-bottom: 14.13vw; align-items: center; } .item-list li:last-child{ margin-bottom: 12.8vw; } .item-list li .list-img{ width: 77%; margin-right:auto; margin-left: auto; } .item-list li .list-text{ width: 100%; } .item-list li .list-text .txt1{ font-size: 16px; line-height: 1.5; margin-bottom: 10px; } .item-list li .list-text .good-logo{ width: 73.6%; margin-top: 10px; } .item-list li .list-text .link-btn a{ padding-top: 3.7vw; padding-bottom: 3.7vw; text-align: center; font-size: 4vw; line-height: 1; width: 100%; border-radius: 1vw; display: block; margin-top: 6.6vw; } .item-list li .list-text .link-btn a .sankaku{ width: 2vw; position: absolute; right: 2vw; top: 50%; transform: translateY(-50%); } .bottom-btn{ margin-top: 0px; width: 70%; max-width:none; margin-left: auto; margin-right: auto; } .bottom-btn a{ border-radius: 6.67vw; display: block; width: 100%; text-align: center; font-size: 4.1vw; padding-top: 1.8vw; padding-bottom: 1.8vw; font-weight: 700; } .notes{ font-size: 2.7vw; } .notes.right{ text-align:left; } .note-box{ margin-bottom: 2.8vw; } .fl-btn{ position: fixed; top: auto; right:0; bottom: 0; width: 100%; } .st-backToTopFixed{ bottom: 20vw;; } .fl-btn ul{ display: flex; } .fl-btn li{ width: 50%; margin-bottom: 0!important; } .fl-btn li a{ text-align: center; padding-top: 5vw; padding-bottom: 5vw; display: block; border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0; line-height: 1; font-size: 4.4vw; border-top: 0; border-left: 0; border-bottom: 0; } footer{ padding-bottom: 12vw; } } .bottom-btn2{ margin-top: 60px; } .bottom-btn2 a{ padding-top: 20px; padding-bottom: 20px; border: 2px solid #333333; position: relative; color: #333333; font-size: 22px; line-height: 1; width: 100%; border-radius: 5px; display: block; font-weight: 700; text-align: center; } .bottom-btn2 a .sankaku{ width: 8px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .bottom-btn2 a .sankaku img{ display: block; } .ex-btn{ margin-top: 45px; max-width: 450px; margin-left: auto; margin-right: auto; } .ex-btn a{ display: block; text-align: center; padding-top: 15px; padding-bottom: 15px; background: #0C2DA1; color: #fff; font-size: 18px; border-radius: 5px; } .ex-ttl{ text-align: center; margin-bottom: 12px; font-size: 26px; color: #0C2DA1; margin-top: 30px; font-weight: 700; } .con-text .tex-wrap .img-box.ptn4{ max-width: 490px; margin-left: auto; margin-right: auto; padding-bottom: 40px; margin-top: 48px; } @media print, screen and (max-width: 900px) { .notes.right.ex{ text-align: right; margin-top: 1vw; } .bottom-btn2{ margin-top: 12.8vw; margin-bottom: 24.9vw; } .bottom-btn2 a{ padding-top: 3.4vw; padding-bottom: 3.4vw; font-size: 4vw; line-height: 1; width: 100%; border-radius: 1vw; display: block; text-align: center; } .bottom-btn2 a .sankaku{ width: 2vw; position: absolute; right: 2vw; top: 50%; transform: translateY(-50%); } .ex-btn{ margin-top: 8vw; max-width: none; margin-left: auto; margin-right: auto; } .ex-btn a{ display: block; text-align: center; padding-top: 3.2vw; padding-bottom: 3.2vw; font-size: 4.1vw; line-height: 1.45; border-radius: 1vw; } .ex-ttl{ text-align: center; margin-bottom: 1.8vw; font-size: 4.1vw; margin-top: 8.4vw; font-weight: 700; } .con-text .tex-wrap .img-box.ptn4{ max-width: none; margin-left: auto; margin-right: auto; padding-bottom: 5.3vw; margin-top: 3.4vw; } }