@charset "utf-8"; font /* html/body設定 ----------------------------------------------------------------*/ html { } body { color:#000; background:#ffffff; text-align:left; font-size:14px; line-height:1.5; -webkit-text-size-adjust:none; /* 縦横文字サイズ同じ */ -webkit-font-smoothing: antialiased; font-family:'メイリオ','Meiryo', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",'ＭＳ Ｐゴシック', Osaka, sans-serif; } a { color:#003399;} a:hover { color:#cc3300 } strong { font-weight:bold; } /*=============================================================== 基本文字サイズ ===============================================================*/ h2 { font-weight:bold; line-height:1.5; } h3 { font-weight:bold; line-height:1.5; } h4 { line-height:1.5; font-weight:bold; } p { line-height:1.5; } sup { margin:0; padding:0; font-size:11px; line-height:1.5; } /*=============================================================== レイアウト ===============================================================*/ .wrapper { background:#fff; } .content_width { width:auto; max-width:1280px; margin-left:auto; margin-right:auto; box-sizing:border-box; -webkit-box-sizing:border-box; /* 20210720 コンテンツ幅修正のため追記 */ padding: 0; /* /20210720 コンテンツ幅修正のため追記 */ } .mid_width { width:auto; max-width:1100px; margin-left:auto; margin-right:auto; box-sizing:border-box; -webkit-box-sizing:border-box; } .narrow_width { width:auto; max-width:1000px; margin-left:auto; margin-right:auto; box-sizing:border-box; -webkit-box-sizing:border-box; } /* 1280px*/ @media screen and (max-width: 1280px) { } /* for tablet max-width: 1280px */ /* タブレット以下 */ @media screen and (max-width: 1160px) { .mid_width { width:100%; } } /* タブレット以下 */ @media screen and (max-width: 1000px) { .narrow_width { width:100%; } } /* タブレット以下 */ @media screen and (max-width: 768px) { .narrow_width { padding:0; } .content_width { padding:0; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== grid ===============================================================*/ .gridcontainer { } .gridcontainer_mt0 { margin-top:0; } .gridcontainer .grid { float:left; } .grid { margin-top:50px; } /* gridSize :445 gutterSize :50 column :2 */ .gridwrp_2 { width:105.319%;} .gridwrp_2 .grid_2 { width:94.949%; margin-right:5.051%; } .gridwrp_2 .grid_1 { width:44.949%; margin-right:5.051%; } .gridwrp_2 .grid:nth-child(2n+1) { clear:both; } /* gridSize :400 gutterSize :40 column :3 */ .gridwrp_3 { width:100%; display:flex; flex-wrap: wrap; flex-direction: row; } .gridwrp_3 .grid_1 { width:30.303%; margin-left: 1.515%; margin-right:1.515%; padding:0; margin-top:40px; box-sizing:border-box; } .gridwrp_3 img { width:100% !important; } .six_column .gridwrp_3 { width:100%; } .six_column .gridwrp_3 .grid_1 { width:31.3%; margin-right:1.515%; margin-top:15px; } /* gridSize :210 gutterSize :40 column :4 */ .gridwrp_4 { width:104.167%;} .gridwrp_4 .grid_4 { width:96.000%; margin-right:4.000%; } .gridwrp_4 .grid_3 { width:71.000%; margin-right:4.000%; } .gridwrp_4 .grid_2 { width:46.000%; margin-right:4.000%; } .gridwrp_4 .grid_1 { width:21.000%; margin-right:4.000%; } .gridwrp_4 .grid:nth-child(4n+1) { clear:both; } .column + .gridcontainer { margin-top:-20px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .gridwrp_3 { display:block; } .gridwrp_3 .grid_1 { width:100%; } .six_column .gridwrp_3 .grid_1 { width:100%; } .gridcontainer_mt0 { margin-top:-20px; } .grid { margin-top:20px; } .grid_border > * { padding:20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .gridwrp_2, .gridwrp_2 .grid_1 { width:100%; margin-right:0; } .gridwrp_4 { width:105.000%;} .gridwrp_4 .grid_1 { width:45.238%; margin-right:4.762%; } .grid:first-child { /*margin-top:0px;*/ } .gridwrp_4 .grid:nth-child(2) { /*margin-top:0;*/ } .sp_gridwrp2 .gridwrp_3 { width:105.319%;} .sp_gridwrp2 .gridwrp_3 .grid_2 { width:94.949%; margin-right:5.051%; } .sp_gridwrp2 .gridwrp_3 .grid:nth-child(2n+1) { clear:both; } .sp_gridwrp2 .gridwrp_3 .grid:nth-child(3n+1) { clear:none; } .sp_gridwrp2 .gridwrp_2 { width:105.319%;} .sp_gridwrp2 .gridwrp_2 .grid_2 { width:94.949%; margin-right:5.051%; } .sp_gridwrp2 .gridwrp_2 .grid_1 { width:44.949%; margin-right:5.051%; } .sp_gridwrp2 .gridwrp_2 .grid:nth-child(2n+1) { clear:both; } .sp_gridwrp2 .gridwrp_2 .grid:nth-child(3n+1) { clear:none; } .sp_gridwrp2 .linkarea p { padding: 0; } .column + .gridcontainer { margin-top:0; } } /* for SP max-width: 480px */ /*=============================================================== fixed ===============================================================*/ .fixed { position: fixed; top: 0; } .bg_fixed { background-attachment: fixed; } /* タブレット以下 */ @media screen and (max-width: 768px) { .fixed { position: fixed; top: 0; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== PAGETOP ===============================================================*/ #btn_pagetop { width:100%; overflow:hidden; } #btn_pagetop a { display:block; position:absolute; right:-300px; top:0; width:50px; height:50px; color:#fff; background-color:#666; text-indent:100%; overflow:hidden; white-space:nowrap; z-index:101; position:fixed; } #btn_pagetop a:hover { background-color:#999; } #btn_pagetop a:after { position:absolute; content:" "; width:14px; height:14px; top:20px; left:0; right:0; bottom:auto; margin:auto; border-top:solid 2px #fff; border-left:solid 2px #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-radius:2px; } /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { #btn_pagetop a { width:40px; height:40px; background-size:40px 40px; } #btn_pagetop a:after { width:12px; height:12px; top:17px; left:0; right:0; bottom:auto; } } /* for SP max-width: 480px */ /*=============================================================== btn_detail ===============================================================*/ .submit_btns .btn_detail { width: 33%; } @media only screen and (max-width: 768px) { .submit_btns .btn_detail { width: 60%; } } @media only screen and (max-width: 480px) { .submit_btns .btn_detail { width: 100%; } } .btn_detail.btn_prev a { position: relative; padding: 10px 39px!important; color: #000!important; text-decoration: none; text-align: center; min-width: inherit; background: #fff; border: 1px solid #cbcbcb!important; border-radius: 100vh!important; font-weight: normal!important; font-size: 1.125rem!important; display: flex; justify-content: center; align-items: center; line-height: 1.5!important; } .btn_detail.btn_prev:after { border-right: solid 1px #5f5f5f!important; border-bottom: solid 1px #5f5f5f!important; position: absolute; width: 8px; height: 8px; left: 21px!important; /*top: calc(50% - 22px)!important;*/ } .btn_detail.btn_prev:before { background: rgba(255,255,255,0.00); border: solid 1px #5f5f5f; border-radius: 50%; width: 25px; height: 25px; content: ""; position: absolute; left: 10px; top: calc(50% - 14px); display: block; z-index: 1; } .btn_detail.btn_prev a:hover { text-decoration:none; background:#fff!important; opacity: 1!important; } .btn_detail.btn_prev a:after { display: none; } .btn_detail.btn_next a { position: relative; padding: 10px 39px 10px 15px!important; color: #fff!important; text-decoration: none; min-width: inherit; background: #4c4c4c; border: 1px solid #4c4c4c!important; border-radius: 100vh!important; font-weight: normal!important; font-size: 1.125rem!important; display: flex; justify-content: center; align-items: center; line-height: 1.5!important; } .btn_detail.btn_next a:hover { border: 1px solid #0068b7!important; background: #0068b7!important; } .btn_detail.btn_next.btn_deactive a { border: 1px solid #ccc!important; } .btn_detail.btn_next input { border-radius: 100vh!important; border: 1px solid #4c4c4c!important; font-weight: normal!important; font-size: 1.125rem!important; } .btn_detail.btn_next input:hover { border: 1px solid #0068b7!important; background: #0068b7!important; } .btn_detail.btn_next button { border-radius: 100vh!important; border: 1px solid #4c4c4c!important; font-weight: normal!important; font-size: 1.125rem!important; padding: 10px 39px; line-height: 1.5; } .btn_detail.btn_next button:hover { border: 1px solid #0068b7!important; background: #0068b7!important; } .btn_detail.btn_next:after { border-right: solid 1px #fff!important; border-bottom: solid 1px #fff!important; position: absolute; width: 8px; height: 8px; right: 21px!important; /*top: calc(50% - 22px)!important;*/ content: ""; display: block; } .btn_detail.btn_next:before { background: rgba(255,255,255,0.00)!important; border: solid 1px #fff; border-radius: 50%; width: 25px!important; height: 25px!important; content: ""; position: absolute; right: 10px!important; top: calc(50% - 14px)!important; display: block; z-index: 1; } .btn_detail.btn_next:hover:before { background: rgba(255,255,255,0.00); } .btn_detail.btn_next.download:after { right: 19px!important; top: calc(50% - 28px); } .btn_detail.btn_next_card_information a { border-radius: 100vh!important; border: 1px solid #4c4c4c!important; font-weight: normal!important; font-size: 1.125rem!important; padding: 10px 39px; line-height: 1.5; } .btn_detail.btn_next_card_information a:after { border-right: solid 1px #fff!important; border-bottom: solid 1px #fff!important; position: absolute; width: 8px; height: 8px; right: 21px!important; top: calc(50% - 5px)!important; content: ""; display: block; transform: rotate(-45deg); } .btn_detail.btn_next_card_information a:before { background: rgba(255,255,255,0.00); border: solid 1px #fff; border-radius: 50%; width: 25px; height: 25px; content: ""; position: absolute; right: 10px; top: calc(50% - 14px); display: block; z-index: 1; } .btn_detail.btn_next_card_information a:hover { border: 1px solid #0068b7!important; background: #0068b7!important; } .btn_detail.btn_next_card_information a:hover:before { background: rgba(255,255,255,0.00); } .config-forms .baseBtn { border-radius: 100vh; } /*@media screen and (min-width: 481px) { .btn_detail.print_tos { width: auto !important; } }*/ /*.btn_detail.print_tos { width: 33%; max-width: 270px; } @media only screen and (max-width: 768px) { .btn_detail.print_tos { width: 60%; } } @media only screen and (max-width: 480px) { .btn_detail.print_tos { width: 100%; } }*/ .btn_detail.print_tos a { position: relative; padding: 10px 15px 10px 15px; color: #000; font-size: 1.125rem; font-weight: normal; text-decoration: none; text-align: center; min-width: inherit; background: #fff; border: 1px solid #cbcbcb; border-radius: 100vh; display: flex; justify-content: center; align-items: center; } .btn_detail.print_tos a:after { border-left: solid 1px #5f5f5f; border-top: solid 1px #5f5f5f; position: absolute; width: 8px; height: 8px; right: 21px; top: calc(50% - 4px); transform: rotate(135deg); content: ""; } .btn_detail.print_tos a:before { border: solid 1px #5f5f5f; border-radius: 50%; width: 25px; height: 25px; content: ""; position: absolute; right: 10px; top: calc(50% - 14px); display: block; z-index: 0; } .btn_detail.print_tos a > span { font-weight: normal; padding-right: 30px; font-size: 1.125rem; } .btn_detail.print_tos a { color: #000; } /* .btn_detail.print_tos a:after { border-right: solid 1px #5f5f5f!important; border-bottom: solid 1px #5f5f5f!important; position: absolute; width: 8px; height: 8px; left: 21px!important; top: calc(50% - 22px)!important; content: ""; } .btn_detail.print_tos a:before { border: solid 1px #5f5f5f; border-radius: 50%; width: 25px; height: 25px; content: ""; position: absolute; left: 10px; top: calc(50% - 14px); display: block; z-index: 0; } .btn_detail.print_tos:after { display: none; } */ .l-productListItem .btn_remove a { border-radius: 100vh; } /*.btn_detail a { position:relative; display:block; color:#fff; font-size:16px; line-height:20px; font-weight:bold; text-align:center; padding:15px 0; border-radius:2px; background:#000; text-decoration:none; } .btn_detail a:after { position:absolute; content:''; top:0; bottom:0; right:10px; margin:auto; border:solid 1px #fff; width:10px; height:10px; border-top:none; border-left:none; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } .btn_detail a:hover { text-decoration:none; background:#333; }*/ /*.btn_detail.pdf a { font-weight: normal; background: url(/image/btn_pdf) #f93 no-repeat 20px center; background-size: auto 20px; }*/ .btn_detail.pdf a { border-radius: 100vh!important; border: 1px solid #4c4c4c!important; background: #4c4c4c!important; font-weight: normal!important; font-size: 1.125rem!important; padding: 10px 39px; line-height: 1.5; } .btn_detail.pdf a:hover { border: 1px solid #0068b7!important; background: #0068b7!important; } .btn_detail.pdf a:after { border-right: solid 1px #fff!important; border-bottom: solid 1px #fff!important; position: absolute; width: 8px; height: 8px; right: 21px!important; top: calc(50% - 4px)!important; content: ""; display: block; transform: rotate(-45deg); } .btn_detail.pdf:before { background: rgba(255,255,255,0.00); border: solid 1px #fff; border-radius: 50%; width: 25px; height: 25px; content: ""; position: absolute; right: 10px; top: calc(50% - 14px); display: block; z-index: 1; } .btn_detail.pdf:hover:before { background: rgba(255,255,255,0.00); } @media only screen and (max-width: 480px) { .btn_detail.pdf:before { right: calc(50% - 125px); } .btn_detail.pdf a, .btn_detail.csv a { max-width: 270px; } } @media only screen and (max-width: 332px) { .btn_detail.pdf:before { right: 10px; } } .btn_order a:hover, .btn_order input:hover { text-decoration:none; background-color:#ffab33; opacity:1 !important; } .btn_detail.zip_search { position: absolute; top: 20px; left: 13%; width: 200px; margin: 0 0 0 20px; } .btn_detail.zip_search a { font-size: 15px; line-height: 17px; font-weight: normal; padding:10px 0; border-radius:2px; } .btn_detail.zip_search a:after { content:none; } .btn_detail_red a { background-color:#c91b36; } .btn_detail_red a:hover { background-color:#e31838; } .btn_detail_black a { background-color:#000; } .btn_detail_black a:hover { background-color:#222; } .btn_window { font-weight: normal; background: url(/image/btn_window) no-repeat 0 center; background-size: 10px auto; padding-left:20px; color:#a30b1a; font-size:14px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .btn_detail { width:90%; margin:0 auto; margin-top:20px; } .btn_detail a { font-size:16px; background-size:18px 30px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .btn_detail { width:50%; margin:0 auto; margin-top:20px; } .btn_detail.zip_search { position: absolute; top: 10px; left: 36%; width: 63%; margin: 0; } .btn_detail.zip_search a { font-size: 14px; } .btn_detail.pdf { float: none; width:80%; margin: 0 auto; } .btn_detail a, .btn_detail input { font-size:14px; background-size:18px 30px; } .btn_detail.pdf { margin:20px auto 10px; } } /* for SP max-width: 480px */ .btn_detail.btn_next.delete a, .btn_detail.btn_next.warning a { border: 1px solid #d64747!important; } .btn_detail.btn_next.delete a:hover, .btn_detail.btn_next.warning a:hover { border: 1px solid #0068b7!important; } .btn_detail.regist.btn_deactive a { border: 1px solid #ccc!important; } .btn_detail.regist a { border-radius: 100vh!important; border: 1px solid #4c4c4c!important; font-weight: normal!important; font-size: 1.125rem!important; padding: 10px 39px; line-height: 1.5; } .btn_detail.regist a:hover { border: 1px solid #0068b7!important; background: #0068b7!important; } .btn_detail.regist:after { border-right: solid 1px #fff!important; border-bottom: solid 1px #fff!important; position: absolute; width: 8px; height: 8px; right: 21px!important; /*top: calc(50% - 22px)!important;*/ content: ""; display: block; } .btn_detail.regist:before { background: rgba(255,255,255,0.00); border: solid 1px #fff; border-radius: 50%; width: 25px; height: 25px; content: ""; position: absolute; right: 10px; top: calc(50% - 14px); display: block; z-index: 1; } .btn_detail.regist:hover:before { background: rgba(255,255,255,0.00); } @media only screen and (max-width: 480px) { .config-forms.login_panel .submit_btns .btn_detail { min-width: inherit!important; } } /*------------------------------------------------------------- btn_white -------------------------------------------------------------*/ .btn_white { width:300px; margin:0 auto; margin-top:30px; } .btn_white a { text-decoration:none; display:block; background-color:#fff; text-align:center; color:#1d50a2; font-size:18px; line-height:20px; font-weight:bold; padding:15px 0; border:solid 1px #1d50a2; } .btn_white a:hover { text-decoration:none; color:#fff; background-color:#1d50a2; } .btn_white a:after { border-top:solid 1px #1d50a2; border-left:solid 1px #1d50a2; } .btn_white a:hover:after { border-top:solid 2px #fff; border-left:solid 2px #fff; } /* タブレット以下 */ @media screen and (max-width: 768px) { .btn_white { width:90%; margin:0 auto; margin-top:20px; } .btn_white a { font-size:14px; line-height:20px; padding:10px 0; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- btn_detail -------------------------------------------------------------*/ .btn_detail2 { width:400px; margin:30px auto 0; } .btn_detail2 a { text-decoration:none; display:block; background-color:#ffffff; text-align:center; color:#000000; font-size:18px; line-height:20px; font-weight:bold; padding:15px 0; border:solid 1px #333333; position:relative; } .btn_detail2 a:hover { text-decoration:none; color:#a30b1a; } .btn_detail2 a span { position:relative; padding-right:25px; } .btn_detail2 a span:after { position: absolute; content: ''; margin: auto; top: 0; bottom: 0; right: 0; width: 5px; height: 5px; border-top: 3px solid transparent; border-right: 5px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid #a30b1a; box-sizing: border-box; -webkit-box-sizing: border-box; } /* タブレット以下 */ @media screen and (max-width: 768px) { .btn_detail2 { width:90%; margin:0 auto; margin-top:20px; } .btn_detail2 a { font-size:14px; line-height:20px; padding:10px 0; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== BP6 上書き ===============================================================*/ .localnav { width:100%; } /*------------------------------------------------------------- カートボタン -------------------------------------------------------------*/ .content_cart + .submit_3btns .btn_detail a, .submit_3btns .btn_detail input { background-color:#DAD9D6; border:solid 1px #DAD9D6; color:#000; } .content_cart + .submit_3btns .btn_detail a:hover, .submit_3btns .btn_detail input:hover { background-color:#DAD9D6; border:solid 1px #DAD9D6; color:#000; opacity:0.7 !important; } .content_cart + .submit_3btns .btn_order a, .content_cart + .submit_3btns .btn_order input { background-color:#FF0000; border:solid 1px #FF0000 !important; color:#fff; } .content_cart + .submit_3btns .btn_order a:hover, .content_cart + .submit_3btns .btn_order input:hover { background-color:#FF0000; border:solid 1px #FF0000; color:#fff; opacity:0.7 !important; } .content_cart + .submit_3btns .btn_estimate a, .content_cart + .submit_3btns .btn_estimate input { background-color:#A30B1A; border:solid 1px #A30B1A; color:#fff; } .content_cart + .submit_3btns .btn_estimate a:hover, .content_cart + .submit_3btns .btn_estimate input:hover { background-color:#A30B1A; border:solid 1px #A30B1A; color:#fff; opacity:0.7 !important; } .content_cart + .submit_3btns .btn_deactive a, .content_cart + .submit_3btns .btn_deactive input, .content_cart + .submit_3btns .btn_deactive a:hover, .content_cart + .submit_3btns .btn_deactive input:hover { opacity: 1 !important; } /*------------------------------------------------------------- カートボタン -------------------------------------------------------------*/ .product_detail2 .btn_detail.favorite { width:250px; margin:0; margin-top: 0; margin-bottom: 20px; } .product_detail2 .btn_detail.favorite a { font-weight: normal; text-decoration:none; background:#FF0000; border:solid 1px #FF0000; padding:10px 0; border-radius:3px; opacity:1 !important; } .product_detail2 .btn_detail.favorite a:hover { background:#FF0000; opacity:0.7 !important; } .product_detail2 .btn_detail.favorite a:after { content:none; } .estimate { background:#C6C6C0; } /*=============================================================== headline_fsas 見だし ===============================================================*/ .headline_fsas { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; display:block; margin:0 auto; text-align:left; background:#6f0f10; width:1080px; margin-left:auto; margin-right:auto; } .headline_fsas .title { font-size:20px; line-height:1.2; color:#fff; padding:0; border:0; padding: 10px; } .headline_fsas .comment { color:#333; padding-top:10px; } /* タブレット以下 */ @media screen and (max-width: 1140px) { .headline_fsas { width:100%; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .headline_fsas { padding: 0; } .section_label + .headline_fsas { margin-top:20px; } .headline_fsas::before, .headline_fsas::after { width: 5px; height: 100%; border-top: 1px solid #333; border-bottom: 1px solid #333; } .headline_fsas::before { left: 0; border-left: 1px solid #333; } .headline_fsas::after { right: 0; border-right: 1px solid #333; } .headline_fsas .title { font-size:20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .headline_fsas .title { font-size:16px; } } /* for SP max-width: 480px */ /*=============================================================== subhead 小見出し ===============================================================*/ .subhead { font-size:24px; line-height:1.4; text-align:center; margin-top:30px; } .subhead2 { font-size:20px; line-height:1.4; text-align:left; margin:30px 0 10px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .subhead { font-size:18px; line-height:1.4; text-align:center; margin-top:20px; } .subhead2 { font-size:16px; line-height:1.4; text-align:left; margin:20px 0 10px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== 背景 ===============================================================*/ .bg_graytile { background-image:url(/image/bg_graytile); background-position:top center; background-repeat:repeat; } .bg_gray { background-color:#eee; } .bg_gray2 { background-color:#dad9d6; } .bg_gray3 { background-color:#3c3c35; } .bg_baige { background-color:#f6efdd; } .bg_photo_leaf { background-color:#fff ; background-image:url(/bplats/image/top/bg_photo_leaf.jfif); /* background-image:url(/image/bg_photo_leaf);*/ background-position:top center; background-repeat:repeat; background-size:cover; } /*=============================================================== seciton headlineとcontentなど、複数の要素、機能を取りまとめるコンテナ的な親要素。 幅はsection_innerに記述する ===============================================================*/ .section_wrp { margin-top:0; } .section { width:100%; border-top:solid 0px #ddd; text-align: left; position:relative; } .section_inner { margin:0 auto; padding:60px 0 60px 0; } /* 20210721 コンテンツ幅修正のため追記 */ .section_inner.wideSection { max-width: 1280px; padding: 50px 0 70px; } /* /20210721 コンテンツ幅修正のため追記 */ /* 1360px */ @media screen and (max-width: 1360px) { .section_inner { padding:30px 30px 30px; } /* 20210721 コンテンツ幅修正のため追記 */ .section_inner.wideSection { padding: 30px; } /* /20210721 コンテンツ幅修正のため追記 */ } /* for 1360px max-width: 1360px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .section_wrp { /*padding-top:85px;*/ } .section_inner { margin:0 auto; padding:20px 20px 20px; } /* 20210721 コンテンツ幅修正のため追記 */ .section_inner.wideSection { padding: 20px; } /* /20210721 コンテンツ幅修正のため追記 */ } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_inner { margin:0 auto; /*padding:20px 20px 20px;*/ /* 20210721 コンテンツ幅修正のため追記 */ padding: 10px; /* /20210721 コンテンツ幅修正のため追記 */ } /* 20210721 コンテンツ幅修正のため追記 */ .section_inner.wideSection { padding: 10px; } /* /20210721 コンテンツ幅修正のため追記 */ } /* for SP max-width: 480px */ /*------------------------------------------------------------- section_label -------------------------------------------------------------*/ .label_wrp { position:relative; } .section_label { position:absolute; display:inline-block; top:0; left:0; background:#6f0f10; color:#fff; padding:10px 30px; font-size:16px; line-height:20px; font-weight:bold; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_label { padding:5px 15px; font-size:14px; line-height:15px; display:inline-block; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== content 個別のコンテンツ ===============================================================*/ .content { text-align:left; } .bm_width { width:100%; max-width:1100px; margin:0 auto; } .headline_fsas + .content { margin-top:25px; } .content + .content { margin-top:80px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .content { width:100%; margin:0 auto; box-sizing:border-box; -webkit-box-sizing:border-box; } .headline_fsas + .content { margin-top:20px; } .content + .content { margin-top:30px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .headline_fsas + .content { margin-top:5px; } .content + .content { margin-top:20px; } } /* for SP max-width: 480px */ /*=============================================================== column 囲み、メモなどサブ的な括り。 ===============================================================*/ .column { width:100%; margin:0 auto; } /* /20210727 修正のため追記 */ .column h3 { /*font-size:20px;*/ /* 20210727 修正のため追記 */ font-size:18px; /* /20210727 修正のため追記 */ font-weight:bold; text-align:left; margin-top:30px; } .column h4 { /*font-size:18px;*/ /* 20210727 修正のため追記 */ font-size:18px; /* /20210727 修正のため追記 */ font-weight:bold; text-align:left; margin-top:30px; } .column p { margin-top:30px; /*font-size:16px;*/ /* 20210727 修正のため追記 */ font-size: 18px; /* /20210727 修正のため追記 */ } .column * + p { margin-top:20px; /*font-size:16px;*/ /* 20210727 修正のため追記 */ font-size: 18px; /* /20210727 修正のため追記 */ } .column p + p { margin-top:15px; } .column p.caution { font-size:12px; } .column .bbottom { border-bottom:1px solid #000; padding-bottom:10px; } /* 20210820 修正のため追記 */ .column p img.icon-a { vertical-align: middle; margin-left: 3px; margin-right: 6px; } /* /20210820 修正のため追記 */ /* タブレット以下 */ @media screen and (max-width: 768px) { .column { width:100%; margin:0 auto; } .column h3 { font-size:18px; margin-top:15px; } .column h4 { font-size:16px; margin-top:15px; } .column p { margin-top:10px; /* 20210727 修正のため追記 */ /*font-size:14px;*/ /* /20210727 修正のため追記 */ } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .column h3 { /* 20210727 修正のため追記 */ /*font-size:16px;*/ /* /20210727 修正のため追記 */ } .column h4 { /* 20210721 修正のため追記 */ /*font-size:14px;*/ /* /20210721 修正のため追記 */ } .column p, .column li { /* 20210727 修正のため追記 */ /*font-size:12px;*/ /* /20210727 修正のため追記 */ } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .notes -------------------------------------------------------------*/ .notes { background:#eee; padding:20px; margin-top:20px; } .notes p { font-size:12px; line-height:20px; } .notes > p { margin-top:0; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== txtlink 2016/11/16 ===============================================================*/ .txtlink a { padding-left:15px; color:#6f0f10; text-decoration:none; position:relative; display:inline-block; text-decoration:underline; } .txtlink a:hover { opacity:0.7; } .txtlink a:after { position:absolute; content:" "; width:6px; height:6px; top:0; bottom:0; left:0; right:auto; margin:auto; border-top:solid 2px #6f0f10; border-left:solid 2px #6f0f10; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .txtlink.arw_prev a { } .txtlink.arw_prev a:after { top:0; bottom:0; left:3px; right:auto; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .txtlink.arw_after a { padding-left:0; padding-right:10px; } .txtlink.arw_after a:after { left:auto; right:0; } .txtlink.arw_down a:after { top:7px; bottom:auto; left:2px; right:auto; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .txtlink.arw_after_down a { padding-left:0; padding-right:10px; } .txtlink.arw_after_down a:after { top:7px; bottom:auto; left:auto; right:0; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } /* arw_box */ .txtlink.arw_box a { color:#861718; font-weight:bold; padding-left:25px; } .txtlink.arw_box a:before { content:' '; width:20px; height:20px; background:#861718; position:absolute; top:0; bottom:0; left:0; right:auto; margin:auto; } .txtlink.arw_box a:after { border-top:solid 1px #fff; border-left:solid 1px #fff; top:0; bottom:0; left:5px; right:auto; margin:auto; } /*=============================================================== arw_btn ===============================================================*/ .arw_btn { width:440px; margin:0 auto; margin-top:30px; } .arw_btn a { display:block; border:solid 1px #5e5e5e; padding:10px 0; font-size:17px; text-align:center; text-decoration:none; color:#000; } .arw_btn a span { padding-right:20px; position:relative; } .arw_btn a span:after { position:absolute; content:''; position:absolute; margin:auto; top:0; bottom:0; right:0; width:5px; height:5px; border-top: 3px solid transparent; border-right: 5px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid #a30b1a; box-sizing:border-box; -webkit-box-sizing:border-box; } .arw_btn a:hover { color:#a30b1a; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .arw_btn { width:100%; margin-top:20px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- morelink -------------------------------------------------------------*/ .morelink { } .morelink a { position:relative; padding-left:12px; } .morelink a:after { content:''; position:absolute; margin:auto; top:0; bottom:0; left:0; width:5px; height:5px; border-top: 4px solid transparent; border-right: 5px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid #a30b1a; box-sizing:border-box; -webkit-box-sizing:border-box; } .morelinkn a:hover { } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== modal 2016/10/11 ===============================================================*/ .modal_bg { position:absolute; top:0; left:0; background:#000; display:none; z-index:9998; } .modal { position:absolute; top:0; left:0; width:800px; display:none; z-index:9999; transition:top 0.2s linear,left 0.1s linear; -moz-transition:top 0.2s linear,left 0.1s linear; -ms-transition:top 0.2s linear,left 0.1s linear; -o-transition:top 0.2s linear,left 0.1s linear; -webkit-transition:top 0.2s linear,left 0.1s linear; } .modal .close { position:absolute; width:30px; height:30px; top:0; right:0; text-indent:100%; overflow:hidden; white-space:nowrap; cursor:pointer; z-index:9999; } .modal .close:before { content:" "; position:absolute; width:30px; height:2px; background:#fff; top:10px; right:0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .modal .close:after { content:" "; position:absolute; width:30px; height:2px; background:#fff; top:10px; right:0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .modal .close:hover { opacity:0.7; } .modal .modal_container { padding:0; position:relative; } .modal .modal_contents_wrp { position: relative; padding:40px; width: 100%; height: 100%; box-sizing:border-box; -webkit-box-sizing:border-box; } .modal .modal_inner { padding:30px; } .modal .modal_contents_wrp::-webkit-scrollbar { display: none; } /* タブレット以下 */ @media screen and (max-width: 768px) { .modal { width:100%; } .modal .modal_container { } .modal .close { top:5px; right:0px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .modal .modal_pager -------------------------------------------------------------*/ .modal .modal_pager li a { position:absolute; top:0; bottom:0; margin:auto; display:block; width:30px; height:30px; white-space:nowrap; text-indent:100%; overflow:hidden; } .modal .modal_pager li a:after { position:absolute; content:" "; width:15px; height:15px; top:6px; left:0; border-top:solid 2px #fff; border-left:solid 2px #fff; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .modal .modal_pager li.prev a { left:0; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .modal .modal_pager li.next a { right:0; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .modal_container -------------------------------------------------------------*/ .modal .modal_container .modal_header { } .modal .modal_container .modal_header h3 { font-size:25px; line-height:50px; text-align:center; font-weight:bold; text-shadow:none; } .modal .modal_container .modal_header p { font-size:14px; line-height:20px; text-align:center; font-weight:bold; } .modal .btn { width:560px; margin:0 auto; margin-top:40px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .modal .modal_container .modal_header h3 { font-size:20px; line-height:25px; padding-top:5px; } .modal .btn { width:100%; margin:0 auto; margin-top:40px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .modal_container .btn -------------------------------------------------------------*/ .modal_container .btn { width:450px; margin:0 auto; margin-top:30px; } .modal_container .btn a { position:relative; display:block; background-color:#e63412; text-align:center; color:#fff; font-size:18px; line-height:20px; font-weight:bold; padding:20px 0; border-radius:5px; box-shadow:rgba(0, 0, 0, 0.2) 0px 3px 0px 0px; -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 3px 0px 0px; -moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 3px 0px 0px; text-decoration:none; } .modal_container .btn a:hover { text-decoration:none; background-color:#ff6600; } .modal_container .btn a:after { position:absolute; content:" "; width:13px; height:13px; top:0; left:auto; bottom:0; right:10px; margin:auto; border-top:solid 2px #fff; border-left:solid 2px #fff; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } /* タブレット以下 */ @media screen and (max-width: 768px) { .modal_container .btn { width:100%; margin:0 auto; margin-top:15px; } .modal_container .btn a { font-size:16px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- nodata -------------------------------------------------------------*/ .modal .nodata { padding:50px 15px; text-align:center; } .modal .nodata h3 { font-size:16px; color:#fff; } .modal .closebtn a { display:block; width:120px; margin:0 auto; line-height:30px; border:solid 1px #fff; text-align:center; margin-top:20px; color:#fff; } .modal_gamedetail .closebtn a:hover { color:#000; background:#fff; text-decoration:none; } /* タブレット以下 */ @media screen and (max-width: 768px) { .modal .close { top:30px; right:0px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- モーダル制作時の確認用 -------------------------------------------------------------*/ .modal { /*display:block;*/ } .modal_demo1 .modal_inner, .modal_demo2 .modal_inner { color:#fff; background:#333; padding:30px; } /*=============================================================== 基本のレイアウト section_contents ===============================================================*/ .section_contents { } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- headline -------------------------------------------------------------*/ .section_contents .headline_fsas { text-align:center; } .section_contents .headline_fsas .title { font-size:35px; line-height:1.4; } .section_contents .headline_fsas .read { font-size:22px; line-height:1.4; font-weight:bold; margin-top:5px; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- visual -------------------------------------------------------------*/ .section_contents .visual { margin-top:30px; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- content -------------------------------------------------------------*/ .section_contents .headline_fsas + .content, .section_contents .visual + .content { margin-top:30px; } .section_contents .content + .content { margin-top:80px; } /* h3 */ .section_contents .content h3 { font-size:25px; line-height:1.8; } /* h4 */ .section_contents .content h4 { font-size:18px; line-height:1.8; } /* p */ .section_contents .content p { font-size:16px; line-height:2; } /* margin */ .section_contents .content * + h3, .section_contents .content * + h4, .section_contents .content * + p { margin-top:2em; } .section_contents .content h3 + p, .section_contents .content h3 + h4, .section_contents .content h4 + p { margin-top:0; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_contents .headline_fsas + .content, .section_contents .visual + .content { margin-top:15px; } .section_contents .content + .content { margin-top:30px; } /* h3 */ .section_contents .content h3 { font-size:20px; } /* h4 */ .section_contents .content h4 { font-size:16px; } /* p */ .section_contents .content p { font-size:14px; } /* margin */ .section_contents .content * + h3, .section_contents .content * + h4, .section_contents .content * + p { margin-top:1em; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== txt_area ===============================================================*/ .txt_area { } * + .txt_area { margin-top:30px; } .txt_area .tag { display:inline-block; color:#861718; font-size:24px; line-height:1; text-align:center; padding:10px; border:1px solid #861718; } .txt_area .read { font-size:20px; line-height:1.4; } .txt_area .title { font-size:30px; line-height:1.4; } .txt_area * + .title { margin-top:10px; } .txt_area .subtitle { font-size:24px; } .txt_area p { font-size:16px; text-align:left; } .txt_area * + p { margin-top:10px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .txt_area { } * + .txt_area { margin-top:20px; } .txt_area .tag { display:block; font-size:14px; padding:5px; border:1px solid #861718; } .txt_area .read { font-size:14px; } .txt_area .title { font-size:20px; } .txt_area * + .title { margin-top:5px; } .txt_area .subtitle { font-size:16px; } .txt_area p { font-size:14px; } .txt_area * + p { margin-top:10px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .txt_area .title { font-size:16px; } .txt_area .subtitle { font-size:14px; } .txt_area p { font-size:14px; } } /* for SP max-width: 480px */ /*=============================================================== pickup_product ===============================================================*/ .pickup_product { background:#eee; text-align:left; padding:50px 0; } .pickup_product .photo_area, .pickup_product .txt_area { width:48%; margin-top:0; } /* タブレット以下 */ @media screen and (max-width: 1160px) { .pickup_product { padding:30px; } .pickup_product img { width:100%; height:auto; } } /* for tablet max-width:1100px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 768px) { .pickup_product { padding:20px; } .pickup_product .photo_area, .pickup_product .txt_area { width:100%; float:none; } .pickup_product .txt_area { margin-top:20px; } } /* for SP max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== pickup_item ===============================================================*/ .pickup_item { position:relative; z-index:1; background:#fff; text-align:left; padding:0; box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.20); } .pickup_item .pickup_item_label { position:absolute; top:0; right:0; width:130px; height:130px; text-align:center; font-size:19px; line-height:25px; padding:30px 0; background:#fe0000; color:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; } /* タブレット以下 */ @media screen and (max-width: 1160px) { .pickup_item .pickup_item_label { width:80px; height:80px; font-size:14px; line-height:18px; padding:15px 0; } } /* for tablet max-width:1100px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .pickup_item .pickup_item_label { width:70px; height:70px; font-size:12px; line-height:12px; padding:8px 0; } } /* for SP max-width: 480px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .pickup_item .pickup_item_label { width:50px; height:50px; font-size:10px; line-height:12px; padding:8px 0; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- pickup_item txt img -------------------------------------------------------------*/ .pickup_item .txt { float:right; width:60%; padding:40px; box-sizing:border-box; -webkit-box-sizing:border-box; } .pickup_item .txt .read { font-size:18px; line-height:1.4; font-weight:bold; } .pickup_item .txt * + .title { margin-top:10px; } .pickup_item .txt .title { font-size:32px; line-height:1.3; } .pickup_item .txt .title .label { font-size:26px; color:#fe0000; } .pickup_item .txt .title .type { color:#a30b1a; } .pickup_item .txt p { font-size:16px; line-height:1.68; margin-top:15px; } .pickup_item .txt p.red { color:#fe0000; font-weight:bold; } .pickup_item .img { float:left; width:40%; } .pickup_item .txt .btn { width:440px; margin:0 auto; margin-top:30px; } .pickup_item .txt .btn a { display:block; border:solid 1px #5e5e5e; padding:8px 0; font-size:17px; text-align:center; text-decoration:none; color:#000; } .pickup_item .txt .btn a span { padding-right:20px; position:relative; } .pickup_item .txt .btn a span:after { position:absolute; content:''; position:absolute; margin:auto; top:0; bottom:0; right:0; width:5px; height:5px; border-top: 3px solid transparent; border-right: 5px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid #a30b1a; box-sizing:border-box; -webkit-box-sizing:border-box; } .pickup_item .txt .btn a:hover { color:#a30b1a; } /* タブレット以下 */ @media screen and (max-width: 1160px) { .pickup_item .txt { padding:20px; } .pickup_item .txt .read { font-size:16px; } .pickup_item .txt .title { font-size:25px; } .pickup_item .txt .title .label { font-size:18px; color:#fe0000; } .pickup_item .txt p { font-size:14px; line-height:1.68; margin-top:15px; } .pickup_item .txt .btn { width:90%; } } /* for tablet max-width:1100px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .pickup_item .txt { float:none; width:100%; margin-top:0; padding:20px; } .pickup_item .txt .read { font-size:16px; } .pickup_item .txt * + .title { margin-top:5px; } .pickup_item .txt .title { font-size:18px; } .pickup_item .txt p { font-size:14px; line-height:1.6; margin-top:10px; } .pickup_item .img { float:none; width:100%; margin-top:15px; } .pickup_item .txt .btn { margin-top:15px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .pickup_item .txt .title { font-size:16px; } .pickup_item .txt p { font-size:12px; } .pickup_item .txt .btn a { font-size:14px; } .pickup_item .txt .btn a span { padding-right:15px; } .pickup_item .txt .btn { width:100%; } } /* for SP max-width: 480px */ /* SP向けレイアウトの指定：～320px */ @media only screen and (max-width: 320px) { .pickup_item .txt .btn a { font-size:12px; } } /* for SP max-width: 320px */ /*------------------------------------------------------------- pickup_items -------------------------------------------------------------*/ .pickup_items { } .pickup_items .flol, .pickup_items .flor { width:49%; } .pickup_items .pickup_item .txt { float:right; width:66%; padding:30px; box-sizing:border-box; -webkit-box-sizing:border-box; } .pickup_items .pickup_item .img { float:left; width:34%; } .pickup_items .pickup_item .txt .btn { width:100%; margin:0 auto; margin-top:25px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .pickup_items .flol, .pickup_items .flor { width:100%; float:none; } .pickup_items .flor { margin-top:20px; } .pickup_items .pickup_item .img { margin-top:0; width:25%; } .pickup_items .pickup_item .txt { width:75%; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .pickup_items .pickup_item .txt { padding:20px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- pickup_items font size -------------------------------------------------------------*/ .pickup_items .pickup_item .txt .title { font-size:25px; } .pickup_items .pickup_item .txt .title .label { font-size:20px; } .pickup_items .pickup_item .txt p { font-size:16px; line-height:1.68; margin-top:15px; } /* タブレット以下 */ @media screen and (max-width: 1160px) { .pickup_items .pickup_item .txt .title { font-size:20px; } .pickup_items .pickup_item .txt .title .label { font-size:18px; color:#fe0000; } .pickup_items .pickup_item .txt p { font-size:14px; margin-top:10px; } .pickup_items .pickup_item .txt .btn a { font-size:14px; } } /* for tablet max-width:1100px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .pickup_items .pickup_item .txt * + .title { margin-top:5px; } .pickup_items .pickup_item .txt .title { font-size:18px; } .pickup_items .pickup_item .txt p { font-size:14px; line-height:1.6; margin-top:10px; } .pickup_items .pickup_item .txt .btn { margin-top:15px; } .pickup_items .pickup_item .txt .btn a { font-size:13px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .pickup_items .pickup_item .txt .title { font-size:16px; } .pickup_items .pickup_item .txt p { font-size:12px; } .pickup_items .pickup_item .txt .btn a { font-size:14px; } .pickup_items .pickup_item .txt .btn a span { padding-right:15px; } .pickup_items .pickup_item .txt .btn { width:100%; } } /* for SP max-width: 480px */ /* SP向けレイアウトの指定：～320px */ @media only screen and (max-width: 320px) { .pickup_items .pickup_item .txt .btn a { font-size:12px; } } /* for SP max-width: 320px */ /*=============================================================== price_off ===============================================================*/ .price_off { text-align:center; } .price_off .title { font-size:25px; line-height:1.2; font-weight:bold; color:#C00; } .price_off .price { background-color:#666; color:#fff; margin-top:20px; padding:10px 10px; font-size:40px; line-height:1.2; font-weight:bold; position:relative; } .price_off .price + .price { margin-top:30px; } .price_off .price .cap { font-size:14px; font-weight:normal; } .price_off .btn_detail { width:auto; max-width:400px; margin:0 auto; margin-top:30px; } /* 1280px */ @media screen and (max-width: 1280px) { .price_off .price .cap { display:block; } } /* for tablet max-width: 1280px */ /* 960px */ @media screen and (max-width: 960px) { .price_off .title { font-size:23px; } .price_off .price { font-size:30px; } } /* for tablet max-width: 960px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .price_off .title { font-size:20px; } .price_off .price { padding:5px; margin-top:10px; font-size:20px; } .price_off .price .cap { font-size:12px; } .price_off .btn_detail { width:90%; margin:0 auto; margin-top:20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- org_price -------------------------------------------------------------*/ .org_price:after, .org_price:before { content:' '; position:absolute; width:90%; height:3px; background:#c00; top:0; bottom:0; left:0; right:0; margin:auto; transform:rotate(-12deg); } .org_price:after { transform:rotate(12deg); } .price_off .off_price { background:#c00; } .off_price:after { content:' '; position:absolute; top:-25px; left:0; right:0; margin:auto; width:30px; height:30px; border-top: 20px solid #c00; border-right: 15px solid transparent; border-bottom: 20px solid transparent; border-left: 15px solid transparent; box-sizing:border-box; -webkit-box-sizing:border-box; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== itemlist ===============================================================*/ .itemlist h3 { text-align:center; } .itemlist .item { box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.20); background:#fff; -webkit-box-sizing:border-box; box-sizing:border-box; position:relative; } .itemlist_case .item { box-shadow:none; background:none; } .itemlist .item .head { color:#fff; font-size:14px; line-height:40px; font-weight:bold; text-align:center; background:#333; width:120px; height:40px; position:absolute; top:10px; left:-10px; } .itemlist .item .head.head_campaign { background:#308dd3; } .itemlist .item .head.head_column { background:#1ca12c; } .itemlist .item .head.head_service { background:#fe0000; } .itemlist .item .head.head_case { background:#706aba; } .itemlist .youtube { position:relative; width:100%; padding-top:56.25%; } .itemlist .youtube iframe { position:absolute; top:0; right:0; width:100% !important; height:100% !important; } .itemlist .item .txt { padding:15px; } .itemlist_case .item .txt { padding:15px 5px; } .itemlist .item .txt .title { font-size:18px; margin-bottom: 10px; /* border-bottom: 1px solid #dddddd; padding-bottom: 11px; */ } .itemlist .item .txt .title.new_icon::before { content:"NEW"; color:#FF0000; margin-right:5px; font-size:14px; } .itemlist .item .txt .title .case { font-size:15px; font-weight:bold; display:block; } .itemlist .item .txt .tag01 { background-color: #a30b1a; width: auto; color: white; padding: 4px; font-size: 12px; margin-right:4px; margin-bottom:3px; display:inline-block; } .itemlist .item .txt p { font-size:14px; } .itemlist .item .txt p span { font-size:10px; } .itemlist .item .txt * + p { margin-top:5px; } .itemlist .item .morelink { text-align:right; } /* タブレット以下 */ @media screen and (max-width: 768px) { .itemlist .title { width:auto; font-size:18px; } .itemlist .item { margin-top:20px; } .itemlist .item .head { font-size:12px; line-height:30px; width:100px; height:30px; } .itemlist .item .txt { padding:10px; } .itemlist .item .txt .title { font-size:14px; } .itemlist .item .txt p { font-size:14px; margin-top:5px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== headline_fsas_wrp ===============================================================*/ .headline_fsas_wrp { position:relative; } .headline_fsas_wrp .title { font-size:26px; line-height:1.4; padding-bottom:15px; border-bottom:1px solid #333; } .headline_fsas_wrp .read { color: #000; font-size:15px; line-height:2; text-align:center; margin-top:30px; } .headline_fsas_wrp .txtlink { position:absolute; bottom:10px; right:0; font-size:16px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .headline_fsas_wrp .title { font-size:18px; } .headline_fsas_wrp .txtlink { font-size:14px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== section_news ===============================================================*/ .section_news { /*color:#fff;*/ } .section_news .narrow_width { position:relative; } .news_list { margin-top:0; } .news_list dt, .news_list dd { /*color:#fff;*/ font-size:16px; line-height:1.5; padding-top:5px; } .news_list dt { width:160px; float:left; font-weight:bold; font-size:14px; } .news_list dd { margin-left:100px; } .news_list dd.news_new::before { content:"NEW"; color:#FF0000; margin-right:10px; font-weight:bold; } .news_list dd + dt, .news_list dd + dt + dd { margin-top:10px; } .news_list dd a { color:#000000; text-decoration:underline; } .news_list dd a:hover { color:#ccc; } /* タブレット以下 */ @media screen and (max-width: 768px) { .news_list { margin-top:15px; } .news_list dt { font-size:14px; font-weight:bold; width:100%; float:none; } .news_list dd { font-size:14px; margin-left:0; margin-top:0 !important; border:0; padding-top:5px; } .news_list dd + dt { margin-top:10px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- section_news .arw_btn -------------------------------------------------------------*/ .section_news .arw_btn { position:absolute; top:0; right:0; width:auto; margin:0 auto; } .section_news .arw_btn a { display:block; color:#000; font-size:14px; padding:0; border:none; margin-top:8px; text-decoration:underline; } .section_news .arw_btn a:hover { color:#a30b1a; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== contact_link ===============================================================*/ .contact_link { background:#ffffff; width:100%; color:#000000; max-width:100%; padding:50px 0; } .contact_link .read { color:#000; font-size:24px; font-weight:normal; text-align:center; border-bottom:none; -webkit-box-sizing:border-box; box-sizing:border-box; } .contact_link .contact_box { width:990px; margin:0 auto; } .contact_link .contact_box .box { background:#eee; width:47%; border:0; box-sizing:border-box; -webkit-box-sizing:border-box; min-height:235px; max-height:235px; } .contact_link .contact_box .box .txt { padding:20px; padding-bottom:0; } .contact_link .contact_box .box h3 { text-align:center; font-size:26px; line-height:1.5; border-bottom:solid 1px #000; padding-bottom:10px; } .contact_link .contact_box .box p { font-size:14px; line-height:20px; } .contact_link .contact_box .box .cap { font-size:12px; margin-top:5px; line-height:15px; } .contact_link .contact_box .box .btn a { background:#000; display:block; color:#fff; text-align:center; font-size:16px; text-decoration:none; line-height:60px; } /* タブレット以下 */ @media screen and (max-width: 1050px) { .contact_link .contact_box { width:100%; } .contact_link .contact_box .box { width:49%; padding:15px; min-height:inherit; } .contact_link .contact_box .box .txt { padding:15px; padding-bottom:0; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .contact_link .read { font-size:18px; } .contact_link .contact_box .box h3 { font-size:18px; } .contact_link .contact_box .box p { font-size:12px; } .contact_link .contact_box .box .cap { font-size:12px; } .contact_link .contact_box .box .btn a { font-size:14px; line-height:40px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .contact_link { padding:20px 20px; } .contact_link .contact_box .box { width:100%; float:none; } } /* for SP max-width: 480px */ /*=============================================================== read_visual ===============================================================*/ .read_visual { background:#666 no-repeat center center; background-size:cover; padding:80px 40px; -webkit-box-sizing:border-box; box-sizing:border-box; } .read_visual .txt { color:#fff; } .read_visual .txt h2 { font-size:40px; line-height:1.4; } .read_visual .txt p { font-size:18px; line-height:1.8; margin-top:20px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .read_visual { padding:0; background:none; } .read_visual .txt { width:100%; padding:20px; color:#333; } .read_visual .txt h2 { font-size:20px; line-height:1.4; } .read_visual .txt p { font-size:14px; line-height:1.6; margin-top:10px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== product_menu ===============================================================*/ .product_menu { background:#a30b1a; margin-top:-150px; text-align:center; } .product_menu .inner { width:1000px; margin:0 auto; } .product_menu li { display:inline-block; box-sizing:border-box; margin-right:30px; } .product_menu li a { display:block; text-align:left; font-size:16px; line-height:60px; color:#fff; text-decoration:none; } .product_menu li a::after { display:inline-flex; content:""; width: 5px; height: 5px; border: 2px solid; border-color: transparent transparent #fff #fff; transform: rotate(-45deg); position:relative; top:-7px; margin-left:10px; } .product_menu li a:hover { opacity:0.6; } /* タブレット以下 */ @media screen and (max-width: 1160px) { .product_menu { margin-top:0; } } /* タブレット以下 */ @media screen and (max-width: 1000px) { .product_menu { margin-top:0; text-align:center; } .product_menu .inner { width:100%; margin:0 auto; border-right:dotted 0px #fff; } .product_menu li { box-sizing:border-box; -webkit-box-sizing:border-box; } .product_menu li a { display:block; text-align:center; font-size:14px; line-height:50px; color:#fff; text-decoration:none; } .product_menu li a:hover { background:#333333; } } /* for tablet max-width: 1000px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .product_menu li { display:none; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { /* .product_menu li { width:33.33%; display:none; } .product_menu li a { font-size:14px; line-height:40px; } .product_menu li:nth-child(1) , .product_menu li:nth-child(2) , .product_menu li:nth-child(3) { border-bottom:dotted 1px #fff; } */ } /* for SP max-width: 480px */ /*=============================================================== section_product ===============================================================*/ .section_product { border:0; } .section_product p { font-size:16px; } .section_product strong { color:#fe0000; font-weight:bold; } .section_product .arw_btn { margin-top:40px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_product .arw_btn { margin-top:20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_product p { font-size:14px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- headline -------------------------------------------------------------*/ .section_product .headline .title { background:#fe0000; color:#fff; display:block; border-bottom:solid 0px #861718; padding:0 20px; font-size:26px; line-height:55px; width:1100px; margin:0 auto; text-align:left; box-sizing:border-box; -webkit-box-sizing:border-box; } /* タブレット以下 */ @media screen and (max-width: 1160px) { .section_product .headline .title { width:100%; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_product .headline .title { font-size:18px; line-height:1.5; padding:5px 10px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- subhead -------------------------------------------------------------*/ .section_product .subhead { text-align:center; margin-top:60px; } .section_product .subhead h3 { display:inline-block; border-bottom:solid 1px #000; font-size:26px; line-height:1.5; margin:0 auto; } /* タブレット以下 */ @media screen and (max-width: 1160px) { .section_product .headline .title { width:100%; } .section_product .subhead { text-align:center; margin-top:40px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_product .subhead { margin-top:30px; } .section_product .subhead h3 { font-size:18px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- txtlink -------------------------------------------------------------*/ .section_product .txtlink { margin-top:10px; } .section_product .txtlink a { padding-left:10px; } .section_product .txtlink a:after { position:absolute; content:" "; top:7px; bottom:auto; left:0; right:auto; margin:auto; width:6px; height:6px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #a30b1a; border-right: 4px solid transparent; box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } /*=============================================================== section_overview ===============================================================*/ .section_overview { } .section_overview .photo_area { width:40%; } .section_overview .txt_area { width:53%; } .section_overview .txt_area .title { font-size:24px; color:#fe0000; margin-top:20px; } .section_overview .txt_area p { line-height:2.25; } .section_overview .gridcontainer { margin-top:20px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_overview .photo_area { width:40%; } .section_overview .txt_area { width:57%; } .section_overview .gridcontainer { margin-top:0; } .section_overview .txt_area .title { font-size:18px; margin-top:0; } .section_overview .txt_area p { line-height:1.5; } .section_overview .gridcontainer { margin-top:-10px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_overview .photo_area, .section_overview .txt_area { width:100%; } .section_overview .txt_area .title { font-size:16px; margin-top:0px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- pointlist -------------------------------------------------------------*/ .pointlist { } .pointlist .item { border:solid 10px #eee; padding:15px 25px 30px; box-sizing:border-box; -webkit-box-sizing:border-box; } .pointlist .item .point { color:#a30b1a; text-align:center; font-size:20px; font-weight:bold; background:url(/image/overview_point1) top center no-repeat; background-size:40px 63px; padding-top:80px; margin-top:-50px; } .pointlist .item .point1 { background-image:url(/image/overview_point1); } .pointlist .item .point2 { background-image:url(/image/overview_point2); } .pointlist .item .point3 { background-image:url(/image/overview_point3); } .pointlist .item .title { /*font-size:24px;*/ font-size:21px; text-align:center; margin-top:30px; } .section_overview .pointlist .item p { font-size:15px; margin-top:20px; line-height:1.7; } /* タブレット以下 */ @media screen and (max-width: 768px) { .pointlist .item { border:solid 5px #eee; padding:10px 20px; } .pointlist .item .point { font-size:16px; background-size:25px 40px; padding-top:50px; margin-top:-30px; } .pointlist .item .title { font-size:18px; margin-top:20px; } .pointlist .item p { font-size:14px; margin-top:15px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .pointlist { margin-top:20px; } .pointlist .item { border:solid 5px #eee; padding:10px 20px; } .pointlist .item .point { font-size:14px; background-size:20px 32px; padding-top:40px; margin-top:-25px; } .pointlist .item .title { font-size:16px; margin-top:10px; } .pointlist .item p { font-size:14px; margin-top:5px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- numberlist -------------------------------------------------------------*/ .section_overview .numberlist { margin-top:-10px; } .section_overview .numberlist .item { background:#eee; padding: 25px 0 0; } .section_overview .numberlist .txtblock { background:#ffefef; padding:10px 20px; display:inline-flex; align-items:center; text-align:center; } .section_overview .numberlist .txtblock h4 { font-weight:bold; font-size:20px; color:#FF0000; margin-bottom:10px; } .section_overview .numberlist .txtblock [class*="txt"] { display:block; font-weight:bold; } .section_overview .numberlist .txtblock .txt1 { background:#FFFFFF; font-size:15px; padding:5px 10px; margin-bottom:10px; } .section_overview .numberlist .txtblock .txt2 { font-size:20px; } .section_overview .numberlist .txtblock .txt2 strong { font-size:26px; } .section_overview .numberlist .txtblock .txt3 { font-size:15px; } .section_overview .numberlist .txtblock .submit_btn a { font-size:16px !important; padding:15px 10px 15px 0; box-sizing:border-box; } .section_overview .numberlist .item .title { font-size:20px; line-height:36px; background-image:url(/image/overview_number_01); background-position:left top; background-repeat:no-repeat; padding-left:95px; } .section_overview .numberlist .item h5 { font-size:17px; font-weight:bold; margin:5px 0 13px; } .section_overview .numberlist .item .number1 { background-image:url(/image/overview_number_01); } .section_overview .numberlist .item .number2 { background-image:url(/image/overview_number_02); } .section_overview .numberlist .item .number3 { background-image:url(/image/overview_number_03); } .section_overview .numberlist .item .number4 { background-image:url(/image/overview_number_04); } .section_overview .numberlist .item .number5 { background-image:url(/image/overview_number_05); } .section_overview .numberlist .item .number6 { background-image:url(/image/overview_number_06); } .section_overview .numberlist .item .number7 { background-image:url(/image/overview_number_07); } .section_overview .numberlist .item .number8 { background-image:url(/image/overview_number_08); } .section_overview .numberlist .item .number9 { background-image:url(/image/overview_number_09); } .section_overview .numberlist .item .txt { padding:20px 30px 30px 30px; } .section_overview .numberlist .item .txt p { margin-top:20px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_overview .numberlist .item { padding:20px 0; } .section_overview .numberlist .item .title { font-size:16px; line-height:25px; background-size:53px 25px; padding-left:60px; } .section_overview .numberlist .item .txt { padding:10px 15px 15px 15px; } .section_overview .numberlist .item .txt p { margin-top:10px; } .section_overview .numberlist .item h5 { font-size:14px; font-weight:bold; margin:5px 0 7px; } .section_overview .numberlist .txtblock { padding:20px; } .section_overview .numberlist .txtblock .adjuster { width:100%; } .section_overview .numberlist .txtblock h4 { font-size:16px; margin-bottom:5px; } .section_overview .numberlist .txtblock .txt1 { margin-bottom:5px; font-size:12px; } .section_overview .numberlist .txtblock .txt2 { font-size:16px; } .section_overview .numberlist .txtblock .txt2 strong { font-size:18px; } .section_overview .numberlist .txtblock .txt3 { font-size:12px; } .section_overview .numberlist .txtblock .submit_btn { margin-top:10px; } .section_overview .numberlist .txtblock .submit_btn a { font-size:12px !important; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_overview .numberlist .item { padding:15px 0; } .section_overview .numberlist .item h5 { font-size:14px; font-weight:bold; margin:5px 0 7px; } } /* for SP max-width: 480px */ /*=============================================================== section_features ===============================================================*/ .section_result .list, .section_features .list { padding:0; margin-right:50px; } .section_result .list li, .section_features .list li { width:calc(100% / 3.1); box-sizing:border-box; border-right:1px dotted #FFFFFF; background:#a30b1a; color:#FFFFFF; padding:20px 30px 30px; } .section_result .list li:last-child, .section_features .list li:last-child { border:none; } .section_result .list strong, .section_features .list strong { display:block; padding:7px 0 5px; font-size:18px; margin-bottom:15px; color:#FFFFFF; border-bottom:1px solid #BB686A; } .section_result .list .subtitle, .section_features .list .subtitle { font-size:26px; } .section_result .list .txtlink, .section_features .list .txtlink { background:#FFFFFF; font-size:14px; padding:10px 20px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_result .list li, .section_features .list li { width:100%; border:none; border-bottom:1px dotted #FFFFFF; padding:15px 20px 20px; } .section_result .list strong, .section_features .list strong { font-size:16px; } .section_result .list .subtitle, .section_features .list .subtitle { font-size:20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_result .list dt strong, .section_features .list dt strong { font-size:16px; padding-top:2px; } .section_result .list dt, .section_features .list dt { width:4em; float:left; text-align:center; } .section_result .list dd, .section_features .list dd { margin-left:5em; } .section_result .list dd .subtitle, .section_features .list dd .subtitle { font-size:16px; } .section_result .list dd p, .section_features .list dd p { font-size:14px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- movie_content -------------------------------------------------------------*/ .movie_content { width:100%; height:auto; margin-top:30px; } .movie_content .inner { background:#eee; } .movie_content .movie_area , .movie_content .txt_area { padding:45px; box-sizing:border-box; -webkit-box-sizing:border-box; } .movie_content .movie_area { width:58%; background:#000; } .movie_content .txt_area { width:42%; background:#eee; margin:0; } .movie_content .catchtxt { margin-top:50px; text-align:center; font-size:26px; font-weight:normal; } .youtube_wrp { position: relative; width: 100%; /*padding-top: 56.25%;*/ } .youtube_wrp iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /* タブレット以下 */ @media screen and (max-width: 1100px) { .movie_content .movie_area , .movie_content .txt_area { padding:20px; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .movie_content { margin-top:20px; } .movie_content .movie_area , .movie_content .txt_area { padding:20px; } .movie_content .catchtxt { margin-top:30px; font-size:20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .movie_content .movie_area , .movie_content .txt_area { padding:20px; width:100%; float:none; } .movie_content .catchtxt { margin-top:20px; font-size:16px; text-align:left; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- movie_label -------------------------------------------------------------*/ .movie_label { font-size:26px; line-height:1; font-weight:bold; position:relative; padding-left:50px; background-image:url(/image/icon_movie); background-position:left top; background-repeat:no-repeat; } /* タブレット以下 */ @media screen and (max-width: 768px) { .movie_label { font-size:20px; padding-left:44px; background-size:36px 20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .movie_label { font-size:14px; line-height:16px; padding-left:35px; background-size:29px 16px; } } /* for SP max-width: 480px */ /*=============================================================== section_operating_environment ===============================================================*/ .section_operating_environment .btn_detail { width:400px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_operating_environment .btn_detail { width:90%; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- speclist1 -------------------------------------------------------------*/ .speclist1 table { width:100%; text-align:left; border-collapse:collapse; border-spacing:0; border:0; } .speclist1 table .bold { font-weight:bold; } .speclist1 table th { width:200px; padding:15px; border:solid 1px #fff; border-right:solid 10px #fff; border-bottom:0; background:#dad9d6; color:#000; box-sizing:border-box; -webkit-box-sizing:border-box; /* 20210727 修正のため追記 */ font-size: 18px; /* /20210727 修正のため追記 */ } .speclist1 table td { padding:15px; border:solid 1px #fff; background:#eee; border-bottom:0; box-sizing:border-box; -webkit-box-sizing:border-box; /* 20210727 修正のため追記 */ font-size: 18px; /* /20210727 修正のため追記 */ } .speclist1 table td + td { border-left:0; } .speclist1 table tr:nth-child(odd) { background:#fff; } .speclist1 table tr:nth-child(even) { background:#fafafa; } .subhead + .speclist1 { margin-top:10px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .speclist1 .table { margin-top:15px; } .speclist1 table { padding:0; /*margin-top:0px;*/ /* 20210721 修正のため追記 */ margin-top:10px; /* /20210721 修正のため追記 */ } .speclist1 table a:hover { color:#003b77; } .speclist1 table th { padding:10px; display:list-item; list-style:none; border-right:solid 0px #ddd; width:100%; } .speclist1 table td { padding:10px; display:list-item; list-style:none; width:100%; border-right:solid 0px #ddd; } .speclist1 table tr:nth-child(odd) , .speclist1 table tr:nth-child(even) { background:#fff; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- speclist2 -------------------------------------------------------------*/ .speclist2 { margin-top:50px; } .speclist2 table { text-align:left; border-collapse:collapse; border-spacing:0; width:100%; } .speclist2 table th { padding:15px; border:solid 1px #fff; border-bottom:0; color:#000; box-sizing:border-box; -webkit-box-sizing:border-box; width:auto; vertical-align:middle; } .speclist2 table td { padding:15px; border:solid 1px #fff; background:#eee; border-bottom:0; box-sizing:border-box; -webkit-box-sizing:border-box; text-align:center; vertical-align:middle; } .speclist2 table th.th { background:#dad9d6; } .speclist2 table th.col2 { width:240px; } .speclist2 table th.col1 { width:160px; } .speclist2 table .cell_margin { border-right:solid 10px #fff; } .speclist2 table th.th_label { background:#a30b1a; color:#fff; text-align:center; font-size:16px; font-weight:bold; } .speclist2 table tbody th.feat { text-align:center; } .speclist2 table tbody th.func { vertical-align:middle; } .speclist2 table .strong { font-size:16px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .speclist2 { margin-top:20px; } .speclist2 table { display:block; border-bottom:0; } .speclist2 table thead { display:none; } .speclist2 table tbody { display:block; } .speclist2 table tbody tr { display:block; } .speclist2 table tbody th, .speclist2 table tbody td { display: list-item; list-style:none; border: none; font-size:14px; } .speclist2 table tbody th { list-style-type:none; padding:10px; width:100%; box-sizing:border-box; border-bottom:1px solid #fff; } .speclist2 table tbody td { margin-left:0px; padding:10px; border-bottom:solid 1px #fff; text-align:left; width:100%; box-sizing:border-box; } .speclist2 table tbody th.feat { text-align:left; } .speclist2 table tbody tr:nth-child(2) { border-top:0; border-left:0; border-right:0; } .speclist2 table tbody tr:nth-child(3), .speclist2 table tbody tr:nth-child(4), .speclist2 table tbody tr:nth-child(5), .speclist2 table tbody tr:nth-child(6) { border-top:0; } .speclist2 table tbody tr:nth-child(2) th, .speclist2 table tbody tr:nth-child(2) td { border-left:0px solid #ddd; border-right:0px solid #ddd; } .speclist2 table th.col2, .speclist2 table th.col1 { width:100%; } .speclist2 table .cell_margin { border-right:solid 0 #fff; } .speclist2 table .strong { font-size:14px; } .speclist2 table tbody th.feat, .speclist2 table tbody tr th.func { width:100%; text-align:center; border-left:0; border-right:0; background:#666; color:#fff; vertical-align:middle; } .speclist2 table tbody th.func + th { width:100%; } .speclist2 table tbody td:nth-of-type(1):before, .speclist2 table tbody td:nth-of-type(2):before { content:"SaaS版（クラウド）"; display:block; padding-right:15px; color:#666; font-size:12px; } .speclist2 table tbody td.afternone:nth-of-type(1):before, .speclist2 table tbody td.afternone:nth-of-type(2):before { display:none; } .speclist2 table tbody td:nth-of-type(2):before { content:"パッケージ版（オンプレミス）"; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== section_price ===============================================================*/ .section_price { } /*------------------------------------------------------------- circle_numlist -------------------------------------------------------------*/ .circle_numlist li { font-size:16px; padding:15px 0; padding-left:45px; border-bottom:dotted 1px #ccc; position:relative; } .circle_numlist li .number { width:35px; height:35px; background:#a30b1a; color:#fff; display:block; text-align:center; font-size:16px; line-height:35px; font-weight:bold; border-radius:50%; margin-right:10px; position:absolute; top:8px; left:0; } .circle_numlist li .txtlink { font-size:12px; margin-left:30px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .circle_numlist li { font-size:14px; padding-left:35px; } .circle_numlist li .number { width:25px; height:25px; font-size:14px; line-height:25px; top:12px; left:0; } .circle_numlist li .txtlink { display:block; margin-left:0; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== section_costcheck ===============================================================*/ /*------------------------------------------------------------- form_section -------------------------------------------------------------*/ .section_costcheck .form_section { margin:0 auto; box-sizing:border-box; -webkit-box-sizing:border-box; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_costcheck .form_section { width:100%; margin:0 auto; padding:50px; box-sizing:border-box; -webkit-box-sizing:border-box; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_section { padding:20px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .txt -------------------------------------------------------------*/ .section_costcheck .form_section .txt { margin-top:30px; } .section_costcheck .form_section .txt p { font-size:14px; line-height:1.6; text-align:center; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_section .txt { margin-top:15px; } .section_costcheck .form_section .txt p { font-size:12px; text-align:left; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- form -------------------------------------------------------------*/ .section_costcheck .form_content { text-align:left; margin-top:30px; font-size:16px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_costcheck .form_content { margin-top:15px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- form dl -------------------------------------------------------------*/ .section_costcheck .form_content dl { border-bottom:solid 1px #ddd; margin:0; } .section_costcheck .form_content dt , .section_costcheck .form_content dd { padding:20px 10px; border-top:solid 1px #ddd; box-sizing:border-box; -webkit-box-sizing:border-box; font-size:14px; line-height:20px; } .section_costcheck .form_content dt { padding-top:32.5px; float:left; width:25%; font-weight:bold; clear:both; } .section_costcheck .form_content dt span { padding-left:3px; } .section_costcheck .form_content dd { float:right; width:75%; } .section_costcheck .form_content .red { font-size:11px; color:#FF6283; font-weight:normal; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_costcheck .form_content dt { padding:15px 0 0 0; float:none; width:100%; } .section_costcheck .form_content dd { border:0; padding:10px 0 15px 0; float:left; width:100%; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_item -------------------------------------------------------------*/ .section_costcheck .form_item { position:relative; width:100%; } .section_costcheck .form_item + .section_costcheck .form_item { margin-top:20px; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .btns -------------------------------------------------------------*/ .section_costcheck .btns { width:100%; height:auto; padding:15px 0; } .section_costcheck .btns .btn { display:block; width:150px; float:left; margin-right:20px; box-sizing:border-box; -webkit-box-sizing:border-box; } .section_costcheck .btns .btn a { display:block; padding:5px 25px; border-radius:2px; text-decoration:none; text-align:center; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .btns .btn { width:48%; margin:0; } .section_costcheck .btns .clearbtn { float:right; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_item .btns -------------------------------------------------------------*/ .section_costcheck .form_item .checkbtn { /* position:absolute; top:5px; margin:auto; right:0; */ } .checkbtn a { background:#a30b1a; border:solid 1px #a30b1a; color:#fff; } .checkbtn a:hover { opacity:0.7; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_item -------------------------------------------------------------*/ .section_costcheck .form_item .clearbtn { /* position:absolute; top:5px; margin:auto; right:0; */ } .clearbtn a { position:relative; background:#eee; border:solid 1px #ddd; color:#666; } .clearbtn a:hover { opacity:0.7; } .clearbtn a:after , .clearbtn a:before { position:absolute; content:' '; width:10px; height:1px; background:#999; top:0; bottom:0; right:10px; margin:auto; transform:rotate(45deg); } .clearbtn a:before { transform:rotate(-45deg); } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_item .clearbtn { top:-38px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- form_content table -------------------------------------------------------------*/ .section_costcheck .form_content table, .section_costcheck .form_content table th, .section_costcheck .form_content table td { background:none; border:0; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_content input -------------------------------------------------------------*/ .section_costcheck .form_content input.txtinput { width:90%; border:0; padding:10px; font-size:14px; line-height:1.6; border:solid 1px #ccc; margin:0; border-radius:5px; -webkit-appearance:none; outline:0; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -ms-transition:all 0.1s linear; transition:all 0.1s linear; } .section_costcheck .form_content input.input_error { background:#ffebeb; border:solid 1px #fe0000; } .section_costcheck .form_content input.txtinput_m { width:60%; } .section_costcheck .form_content input.txtinput_s { width:25%; } .section_costcheck .form_content input.txtinput_postal { width:150px; border:0; padding:10px; font-size:14px; line-height:1.6; border:solid 1px #ccc; margin:0; border-radius:5px; -webkit-appearance:none; outline:0; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -ms-transition:all 0.1s linear; transition:all 0.1s linear; } .section_costcheck .form_content textarea { width:90%; border:0; padding:10px; font-size:14px; line-height:1.6; border:solid 1px #ccc; margin:0; vertical-align:middle; border-radius:5px; -webkit-appearance:none; outline:0; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -ms-transition:all 0.1s linear; transition:all 0.1s linear; } .section_costcheck .form_content input.txtinput:focus, .section_costcheck .form_content input.txtinput_postal:focus, .section_costcheck .form_content textarea:focus { border-color:#333; } .section_costcheck .form_content .sample { font-size:90%; line-height:1; margin-top:10px; color:#999; } .section_costcheck .form_content .sample a { color:#999; text-decoration:none; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_costcheck .form_content input.txtinput_m, .section_costcheck .form_content input.txtinput_s { width:50%; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_content input.txtinput, .section_costcheck .form_content textarea, .section_costcheck .form_content input , .section_costcheck .form_content textarea { width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:12px; } .section_costcheck .form_content input.txtinput_postal { -webkit-box-sizing:border-box; box-sizing:border-box; font-size:12px; } .section_costcheck .form_content .sample { margin-top:5px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_content .radio -------------------------------------------------------------*/ .section_costcheck .form_content .radio li input { width:auto; display:none; border:0; margin:0; } .section_costcheck .form_content .radio li { padding:0; } .section_costcheck .form_content .radio li + li { margin-top:10px; } /*　ラジオボタンの装飾　*/ .section_costcheck .form_content .radio li label { display:inline-block; vertical-align:middle; position:relative; padding-left:24px; cursor:pointer; font-size:14px; line-height:20px; } .section_costcheck .form_content .radio li label:before { content:""; position:absolute; top:0; bottom:0; left:0; margin:auto; border-radius:50%; width:16px; height:16px; background:#fff; border:1px solid #333; -webkit-box-sizing:border-box; box-sizing:border-box; } .section_costcheck .form_content .radio li label:after { content:""; position:absolute; top:0; bottom:0; left:4px; margin:auto; border-radius:50%; width:8px; height:8px; background:#333; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -ms-transition:all 0.1s linear; transition:all 0.1s linear; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); transform:scale(0); } .section_costcheck .form_content .radio li input:checked + label:after { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_content .radio li label { font-size:12px; line-height:20px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_content checkbox -------------------------------------------------------------*/ .section_costcheck .form_content .checkbox li { float:left; width:33.3333%; padding:0; } .section_costcheck .form_content .checkbox li:nth-child(4), .section_costcheck .form_content .checkbox li:nth-child(5), .section_costcheck .form_content .checkbox li:nth-child(6) { margin-top:10px; } .section_costcheck .form_content .agreebox { padding-top:20px; font-size:14px; line-height:20px; text-align:center; } .section_costcheck .form_content .checkbox li input, .section_costcheck .form_content .agreebox input { width:auto; display:none; border:0; margin:0; } /*　チェックボックスの装飾　*/ .section_costcheck .form_content .checkbox li label, .section_costcheck .form_content .agreebox label { display:inline-block; vertical-align:middle; position:relative; padding-left:24px; cursor:pointer; font-size:14px; line-height:20px; } .section_costcheck .form_content .checkbox li label:before, .section_costcheck .form_content .agreebox label:before { content:""; position:absolute; top:0; bottom:0; left:0; margin:auto; border-radius:10%; width:16px; height:16px; background:#fff; border:1px solid #333; -webkit-box-sizing:border-box; box-sizing:border-box; } .section_costcheck .form_content .checkbox li label:after, .section_costcheck .form_content .agreebox label:after { content:""; position:absolute; top:-4px; left:5px; margin:auto; width:6px; height:14px; border-right:2px solid transparent; border-bottom:2px solid transparent; -webkit-transform:rotate(40deg); -moz-transform:rotate(40deg); -ms-transform:rotate(40deg); transform:rotate(40deg); -webkit-transition:border-bottom-color,border-right-color .2s linear; -moz-transition:border-bottom-color,border-right-color .2s linear; -ms-transition:border-bottom-color,border-right-color .2s linear; transition:border-bottom-color,border-right-color .2s linear; } .section_costcheck .form_content .checkbox li input:checked + label:after, .section_costcheck .form_content .agreebox input:checked + label:after { border-color:#333; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_content .checkbox li { width:100%; } .section_costcheck .form_content .checkbox li + li { margin-top:10px; } .section_costcheck .form_content .checkbox li label, .section_costcheck .form_content .agreebox label { font-size:12px; } .section_costcheck .form_content .agreebox { padding-top:10px; font-size:12px; text-align:left; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_content select -------------------------------------------------------------*/ .section_costcheck .form_content select { background:#fff; /*background:url(/image/space1x1.gif) no-repeat;*/ } .section_costcheck .form_content select option { background:#fff; color:#333; } .section_costcheck .form_content optgroup.area { color:#333; background:#eee; } /*------------------------------------------------------------- .section_costcheck .form_content .submit -------------------------------------------------------------*/ .section_costcheck .form_content .submit { padding:40px 0; margin:0; } .section_costcheck .form_content .submit input { width:200px; margin:0 auto; padding:15px 0; display:block; color:#eee; font-size:18px; line-height:20px; font-weight:bold; text-decoration:none; text-shadow:0px 1px 2px rgba(0,0,0,0.8); border:0; border-radius:5px; background:#333; box-shadow:0 2px 0 0 rgba(0,0,0,0.2); -moz-box-shadow:0 2px 0 0 rgba(0,0,0,0.2); -webkit-box-shadow:0 2px 0 0 rgba(0,0,0,0.2); -webkit-transition:all 0.1s linear; -ms-transition:all 0.1s linear; -moz-transition:all 0.1s linear; transition:all 0.1s linear; cursor:pointer; -webkit-appearance:none; } .section_costcheck .form_content .submit input:hover { background:#D4145A; } .section_costcheck .form_content .submit .cap { color:#666; font-size:12px; line-height:1.6; margin-top:40px; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_content .submit { padding:15px 0; } .section_costcheck .form_content .submit input { width:100%; padding:10px 0; font-size:14px; } .section_costcheck .form_content .submit .cap { margin-top:15px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_content .two_submit -------------------------------------------------------------*/ .section_costcheck .form_content .submit_two { width:440px; margin:0 auto; } .section_costcheck .form_content .submit_two .flol , .section_costcheck .form_content .submit_two .flor { width:50%; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_content .submit_two { width:100%; } .section_costcheck .form_content .submit_two .flol , .section_costcheck .form_content .submit_two .flor { width:49%; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- バリデート -------------------------------------------------------------*/ .validate { padding-bottom:5px; margin-bottom:10px; } .validate p { background:#fee; padding:10px; color:#c00; font-size:14px; line-height:1.6; } .validate_submit { margin:0 auto; text-align:center; padding-bottom:20px; } .validate_submit p { padding:10px; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .validate { margin-bottom:5px; } .validate p { font-size:12px; padding:7px; } .validate_submit { margin:0 auto; text-align:left; } } /* for SP max-width: 480px */ /*=============================================================== section_costcheck ===============================================================*/ .section_costcheck { border:0; } .content_costcheck { } .section_costcheck .form_section { width:100%; padding:50px; padding-bottom:80px; background:#fff; } .section_costcheck .form_content .result input { text-align:right; font-weight:bold; color:#000; font-size:20px; } .content_costcheck .val { /*color:#308dd3;*/ font-weight:bold; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_costcheck .form_section { padding:30px; padding-bottom:50px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .section_inner { padding:0; } .section_costcheck .form_section { padding:20px; } .section_costcheck .form_content .result input { font-size:20px; color:#000; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- content_title -------------------------------------------------------------*/ .content_costcheck .content_title { text-align:center; background-image:url(/image/costcheck_title_arw); background-position:bottom center; background-repeat:no-repeat; padding-bottom:100px; padding-top:150px; margin-top:-270px; } .content_costcheck .content_title .title { font-size:30px; line-height:1.5; padding:20px; font-weight:normal; } .content_costcheck .content_title .title { font-size:30px; line-height:1.5; padding:20px; font-weight:normal; } /* タブレット以下 */ @media screen and (max-width: 1280px) { .content_costcheck .content_title { margin-top:-200px; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .content_costcheck .content_title { background-size:contain; padding-bottom:50px; padding-top:150px; margin-top:-200px; } .content_costcheck .content_title .title { font-size:25px; line-height:1.4; padding:15px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .content_costcheck .content_title { padding-bottom:30px; padding-top:0; margin-top:-30px; } .content_costcheck .content_title .title { font-size:16px; padding:30px 10px 10px; } .content_costcheck .content_title:after { bottom:-30px; width:50px; height:30px; border-top: 10px solid #6f0f10; border-bottom: 10px solid transparent; border-right: 30px solid transparent; border-left: 30px solid transparent; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- content_block -------------------------------------------------------------*/ .content_block { margin-top:30px; } .content_block + .content_block { margin-top:50px; } .content_block .title { font-size:22px; line-height:1.5; padding:10px; color:#fff; background:#6f0f10; text-align:center; } .content_block .subtitle { font-size:16px; font-weight:bold; margin-top:20px; } .content_block p { margin-top:20px; } .content_block .subtitle + p { margin-top:10px; } .content_block .catchtxt { font-size:20px; line-height:1.5; font-weight:bold; text-align:center; color:#c00; } .content_block .error { margin-top:10px; font-size:14px; color:#fe0000; font-weight:bold; display:none; } /* タブレット以下 */ @media screen and (max-width: 768px) { .content_block { margin-top:0; } .content_block + .content_block { margin-top:50px; } .catchtxt { font-size:16px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .content_block .title { font-size:16px; padding:5px; } .catchtxt { text-align:left; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_content table -------------------------------------------------------------*/ .section_costcheck .form_content table { margin-top:20px; } .section_costcheck .form_content table th, .section_costcheck .form_content table td { vertical-align:middle; font-weight:normal; white-space:nowrap; } .section_costcheck .form_content table td.second { text-align:right; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_costcheck .form_content table { margin-top:10px; } .section_costcheck .form_content table th { white-space:nowrap; display:inline; } .section_costcheck .form_content table td.second { text-align:left; display:inline; padding:0; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_content table th, .section_costcheck .form_content table td.second { white-space:normal; width:auto; text-align:left; display:inline-block; font-size:14px; } .section_costcheck .form_content table th, .section_costcheck .form_content table td { padding:0; white-space:normal; } .section_costcheck .form_content table td.second { text-align:left; width:auto; } .section_costcheck .form_content table td.result { text-align:right; } .section_costcheck .form_content table td input { margin-top:5px; } .section_costcheck .form_content table td.result input { margin-bottom:5px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_content -------------------------------------------------------------*/ .section_costcheck .form_content_input dt { text-align:right; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_costcheck .form_content_input dt { text-align:left; } .section_costcheck .form_content_input .bold + .bold { display:block; margin-top:10px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .content_costcheck .section_costcheck .form_content dd { text-align:right; } .section_costcheck .form_content .bold { display:inline-block; margin-top:10px; } .section_costcheck .form_content_input .bold + .bold { display:inline; margin-top:0; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .section_costcheck .form_content2 -------------------------------------------------------------*/ .section_costcheck .form_content2 dt { width:60%; } .section_costcheck .form_content2 dd { width:40%; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_costcheck .form_content dt { padding:15px 0 0 0; float:none; width:100%; } .section_costcheck .form_content dd { border:0; padding:10px 0 15px 0; float:left; width:100%; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_costcheck .form_content2 dl { padding-bottom:10px; } .section_costcheck .form_content2 dt { border:0; } .section_costcheck .form_content2 dt , .section_costcheck .form_content2 dd, .section_costcheck .form_content2 dd .section_costcheck .form_item, .section_costcheck .form_content2 dd .align_right { display:inline; width:auto; text-align:left !important; } .section_costcheck .form_content2 dd { padding-top:0; float:none; } .section_costcheck .form_content2 * + .bold { float:right; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- section_costcheck .offer_area -------------------------------------------------------------*/ .section_costcheck .offer_area { background:#eee; padding:20px; text-align:center; margin-top:10px; display:none; } .section_costcheck .offer_area h3 { font-size:25px; } .section_costcheck .offer_area p { font-size:20px; margin:0; } .section_costcheck .offer_area .submit_btn { width:500px; margin:0 auto; margin-top:5px; } .section_costcheck .offer_area .submit_btn a { padding:15px 0; } .section_costcheck .offer_area.package .submit_btn a { background:#000; } .section_costcheck .offer_area.sass h3 { color:#fe0000; } .section_costcheck .offer_area.sass .submit_btn a { background:#fe0000; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section_costcheck .offer_area { padding:15px; margin-bottom:10px; } .section_costcheck .offer_area .submit_btn { width:100%; } .section_costcheck .offer_area h3 { font-size:16px; } .section_costcheck .offer_area p { font-size:14px; } .section_costcheck .offer_area .submit_btn a { padding:10px 0; font-size:16px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== フッタ ===============================================================*/ .fsus_footer_wrp { width:100%; } .fsus_footer_wrp .bnrs { background:#6f0f10; padding:20px 20px 10px; } .fsus_footer_wrp .bnrs >ul { font-size-adjust:0; } .fsus_footer_wrp .bnrs >ul li { display:inline-block; margin:0 5px 10px; } .fsus_footer_wrp .bnrs >ul li img { height:50px; } .fsus_footer_wrp .bnrs a:hover { opacity:0.7; } .fsus_footer { padding:40px 0 50px 0; box-sizing:border-box; text-align:left; /*max-width:1100px;*/ /* 20210720 コンテンツ幅修正のため追記 */ max-width:1280px; /* 20210720 コンテンツ幅修正のため追記 */ } .fsus_footer a { text-decoration:none; color:#000; } .fsus_footer a:hover { text-decoration:underline; color:#000; } .fsus_footer .links * { box-sizing:border-box; } .fsus_footer .links > ul { width:100%; display:table; } .fsus_footer .links > ul li { font-size:13px; } .fsus_footer .links > ul > li { width:20%; display:table-cell; padding:10px; } .fsus_footer .links > ul > li > a, .fsus_footer .links > ul > li > div { display:block; padding-bottom:7px; margin-bottom:15px; font-size:14px; border-bottom:1px dotted #000000; color:#000000; font-weight:bold; } .fsus_footer .links > ul > li li + li { margin-top:8px; } .fsus_footer .links > ul > li > ul > li a::before { content:"▶︎"; font-size:9px; margin-right:5px; text-decoration:none !important; } @media screen and (max-width: 1160px) { .fsus_footer { width:100%; padding:40px 30px 50px 30px; } } /* for tablet max-width: 1160px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_footer { padding:20px 15px 20px; } .fsus_footer .links > ul > li { width:100%; display:block; font-size:14px; padding:10px; } .fsus_footer .links > ul li { font-size:12px; } .fsus_footer .links > ul > li li + li { margin-top:0; } .fsus_footer .links > ul > li > a, .fsus_footer .links > ul > li > div { font-size:14px; padding-bottom:5px; margin-bottom:7px; } .fsus_footer .links > ul > li > ul > li a::before { content:"▶︎"; font-size:9px; margin-right:5px; text-decoration:none !important; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .fsus_footer_wrp .bnrs { text-align:left; padding:15px 15px; } .fsus_footer_wrp .bnrs >ul li { display:inline-block; width:49%; margin:0; padding:5px; box-sizing:border-box; } .fsus_footer_wrp .bnrs >ul li img { width:100%; height:auto; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- footer_copy_wrp -------------------------------------------------------------*/ .footer_copy_wrp { width:100%; text-align:center; padding:20px; background:#000000; box-sizing:border-box; -webkit-box-sizing:border-box; } .footer_copy_wrp .content_width { /*padding: 40px 0!important;*/ /* 20210727 修正のため追記 */ padding: 0!important; /* /20210727 修正のため追記 */ } .footer_copy_wrp .footer_link { float:left; } .footer_copy_wrp .footer_link li { float:left; margin-right:30px; } .footer_copy_wrp .footer_link li a { color:#fff; text-decoration:none; } .footer_copy_wrp .copyright { color:#fff; float:right; } /* タブレット以下 */ @media screen and (max-width: 768px) { .footer_copy_wrp { padding:20px; } .footer_copy_wrp .footer_link { float:none; margin-top:-10px; } .footer_copy_wrp .footer_link li { width:50%; margin:10px 0 0 0; text-align:left; font-size:12px; line-height:1.4; } .footer_copy_wrp .footer_link li a { color:#fff; text-decoration:none; } .footer_copy_wrp .copyright { font-size:10px; line-height:1.4; float:none; margin-top:15px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== .main_slider .slider ===============================================================*/ .main_slider { margin:0; padding:0; } .bx-viewport li { min-height: 1px; min-width: 1px; } .bx-clone {display: none;} /*------------------------------------------------------------- bx -------------------------------------------------------------*/ .main_slider .bx-wrapper { padding-bottom:0; } .main_slider .bx-wrapper img { margin:0 auto; /* 20210719スライダーの調整のため追加 */ max-height: inherit; max-width: inherit; /* /20210719スライダーの調整のため追加 */ } .main_slider .bx-wrapper .bx-pager { padding-top: 0; text-align:right; display:none; } /* タブレット以下 */ @media screen and (max-width: 1600px) { } /* for tablet max-width: 1280px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- main_slider -------------------------------------------------------------*/ .main_slider { overflow:hidden; /* 20210729 修正のため追記 */ /*height:0;*/ /* 20210729 修正のため追記 */ max-height:558px; transition:all,0.3s; } .main_slider .slider { position:relative; background:#fff; max-width: 1645px; margin: 0 auto; } .main_slider .slider .slide { width:100%; height:auto; position:relative; } /* タブレット以下 */ @media screen and (max-width: 1600px) { .main_slider { max-height:none; } .main_slider .slider { height:auto; overflow:inherit; } .main_slider.open { height:auto; } } /* for tablet max-width: 1280px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .main_slider { height:0; } .main_slider .slider .slide , .main_slider .slider .slide:nth-child(even) { float:none; width:100%; } .main_slider .slider { padding-bottom:40px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .main_slider .slider .slide .slide_inner -------------------------------------------------------------*/ .main_slider .slider .slide .slide_inner, .main_slider .slider .slide .slide_inner .link { display:block; text-align:center; overflow:hidden; } /* タブレット以下 */ @media screen and (max-width: 1280px) { .main_slider .slider .slide .slide_inner, .main_slider .slider .slide .slide_inner .link { width:100%; height:auto; } } /* for tablet max-width: 1280px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .main_slider .slider .slide .slide_inner, .main_slider .slider .slide .slide_inner .link { height:auto; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .main_slider .slider .pager -------------------------------------------------------------*/ .main_slider .slider .pager { position:absolute; top:0; bottom:0; margin:auto; width:30px; height:30px; z-index:5; } .main_slider .slider .prev { left:50px !important; } .main_slider .slider .next { right:50px !important; } /* タブレット以下 */ @media screen and (max-width: 1280px) { .main_slider .slider .prev { left:20px !important; } .main_slider .slider .next { right:20px !important; } } /* for tablet max-width: 1280px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .main_slider .slider .pager a -------------------------------------------------------------*/ .main_slider .slider .pager a { display:block; width:30px; height:30px; border-radius:50% 50%; overflow:hidden; text-indent:-200%; position:relative; background:rgba(0,0,0,1); } .main_slider .slider .pager a:hover { background:rgba(0,0,0,0.7); } .main_slider .slider .pager a:after { content:''; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:8px; height:8px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #fff; border-right: 8px solid transparent; box-sizing:border-box; -webkit-box-sizing:border-box; transform: rotate(0) translateX(5px); transition: all .3s; } .main_slider .slider .prev a:after { transform: rotate(180deg) translateX(5px); } .main_slider .slider .pager a:hover:after { } /* タブレット以下 */ @media screen and (max-width: 1280px) { } /* for tablet max-width: 1280px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .main_slider .slider .controler -------------------------------------------------------------*/ .main_slider .slider .controler { position:absolute; bottom:20px; right:50px !important; z-index:100; } /* タブレット以下 */ @media screen and (max-width: 1600px) { } /* for tablet max-width: 1280px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .main_slider .slider .controler { position:absolute; bottom:8px; right:0 !important; left:0 !important; margin:auto; width:115px; height:auto; z-index:100; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .main_slider .slider .controler .btn a -------------------------------------------------------------*/ .main_slider .slider .controler .btn { width:25px; float:left; margin-left:10px; } .main_slider .slider .controler .btn a { display:block; width:25px; height:25px; background:rgba(0,0,0,0.9); overflow:hidden; text-indent:100%; position:relative; } .main_slider .slider .controler .btn a:hover { background:rgba(0,0,0,0.6); } .main_slider .slider .controler .btn a:after { content:''; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:6px; height:6px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #fff; border-right: 5px solid transparent; box-sizing:border-box; -webkit-box-sizing:border-box; transform: rotate(0) translateX(3px); transition: all .3s; } .main_slider .slider .controler .prev a:after { transform: rotate(180deg) translateX(3px); } .main_slider .slider .controler .btn a:hover:after { } /* タブレット以下 */ @media screen and (max-width: 1280px) { } /* for tablet max-width: 1280px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .main_slider .slider .controler .pouse a -------------------------------------------------------------*/ .main_slider .slider .controler .pouse a:before, .main_slider .slider .controler .pouse a:after { content:''; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:2px; height:10px; -webkit-transform: translate(-2px,0); -moz-transform: translate(-2px,0); -ms-transform: translate(-2px,0); transform: translate(-2px,0); background:#fff; border:0; } .main_slider .slider .controler .pouse a:after { -webkit-transform: translate(2px,0); -moz-transform: translate(2px,0); -ms-transform: translate(2px,0); transform: translate(2px,0); } .main_slider .slider .controler .pouse.active a { background:#eee; } .main_slider .slider .controler .pouse.active a:hover { background:#ccc; } .main_slider .slider .controler .pouse.active a:before, .main_slider .slider .controler .pouse.active a:after { background:#666; } /* タブレット以下 */ @media screen and (max-width: 1280px) { } /* for tablet max-width: 1280px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== main_slider slide ===============================================================*/ /*------------------------------------------------------------- .main_slider .slider .slide_bg -------------------------------------------------------------*/ .main_slider .slider .slide { background-repeat:no-repeat; background-position:center center; } .main_slider .slider .slide .img_sp { display:none; } /* タブレット以下 */ @media screen and (max-width: 1600px) { .main_slider .slider .slide .img img { width:100%; display:inherit; } } /* for tablet max-width: 1280px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 768px) { .main_slider .slider .slide .img { display:none; } .main_slider .slider .slide .img_sp { display:block; } .main_slider .slider .slide .img_sp img { width:100%; height:auto; max-width:inherit !important; } } /* for SP max-width: 768px */ /*=============================================================== static ===============================================================*/ /*------------------------------------------------------------- locallink_box -------------------------------------------------------------*/ .locallink_box { background:#eee; padding:30px; } .locallink_box .locallink { width:48%; } .locallink_box .locallink h3 { font-size:18px; } .locallink_box .locallink * + h3 { margin-top:30px; } .locallink_box .locallink li { margin-top:10px; padding-left:15px; position:relative; /* 20210727 修正のため追記 */ font-size: 18px; /* /20210727 修正のため追記 */ } .locallink_box .locallink li:before { content:' '; width:6px; height:6px; border-radius:50%; background:#000; position:absolute; left:0px; top:9px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .locallink_box { padding:20px; } .locallink_box .locallink h3 { /* 20210727 修正のため追記 */ /*font-size:16px;*/ /* /20210727 修正のため追記 */ } .locallink_box .locallink * + h3 { margin-top:20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .locallink_box .locallink { width:100%; float:none; } .locallink_box .locallink h3 { /* 20210727 修正のため追記 */ /*font-size:14px;*/ /* /20210727 修正のため追記 */ } .locallink_box .locallink li { /* 20210727 修正のため追記 */ /*font-size:12px;*/ /* /20210727 修正のため追記 */ margin-top:5px; } .locallink_box .locallink + .locallink { margin-top:20px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- headline -------------------------------------------------------------*/ .headline .title { border-bottom: none!important; font-size: 2.652rem; line-height: 1.4; color: #000; } /* タブレット以下 */ @media screen and (max-width: 768px) { .headline .title { font-size: 2.125rem; } } /* for tablet max-width: 768px */ /*------------------------------------------------------------- static_content -------------------------------------------------------------*/ .static_content { } .static_content .column + .column { margin-top:30px; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- static_content title -------------------------------------------------------------*/ /* 20210727 修正のため追記 */ .static_content h2 { font-size:20px; } /* /20210727 修正のため追記 */ .static_content .title { /* 20210727 修正のため追記 */ /*font-size:18px;*/ /* /20210727 修正のため追記 */ /* 20211130 修正のため追記 */ /*background:#a30b1a; color:#fff; padding:10px;*/ font-weight: normal; font-size: 1.875rem; /* /20211130 修正のため追記 */ } .static_content .box .title { /* 20211210 修正のため追記 */ font-size: 1.125rem; /* /20211210 修正のため追記 */ } .static_content h3.title { font-weight: normal; font-size: 1.75rem; } .static_content .column + .title { margin-top:50px; } .static_content .column .title { background:#eee; color:#000; margin-top:15px; padding: 10px; } .static_content .column * + .title { margin-top:30px; } .static_content .column .subtitle { font-size: 1.375rem; line-height: 1.2; margin-bottom: 14px; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .static_content .title { /* 20210727 修正のため追記 */ /*font-size:15px;*/ /* /20210727 修正のため追記 */ } .static_content .subtitle { /* 20210721 修正のため追記 */ /*font-size:14px;*/ /* /20210721 修正のため追記 */ } .static_content .column .title { margin-top:10px; } .static_content .column + .title { margin-top:30px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- static_content number_title -------------------------------------------------------------*/ .static_content .column .number_title { color:#0068b7; } .static_content .column .number_title .number { background:#0068b7; padding:2px 0px; color:#fff; margin-right:10px; min-width: 1.8em; text-align: center; display: inline-block; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .static_content .column .number_title { padding-left:35px; position:relative; } .static_content .column .number_title .number { margin:0; position:absolute; top:-2px; left:0; padding:0; min-width:25px; line-height:25px; text-align:center; font-size:14px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- static_content list -------------------------------------------------------------*/ .static_content .column ul { margin-top:20px; } .static_content .column li { margin-top:5px; padding-left:15px; position:relative; /*font-size: 16px;*/ /* 20210731 修正のため追記 */ font-size: 18px; /* /20210731 修正のため追記 */ } .static_content .column li:before { content:' '; width:8px; height:8px; border-radius:50%; background:#3c3b36; position:absolute; left:0px; top:6px; } /* 20211124 修正のため追記 */ .static_content .column li img.icon-a { vertical-align: middle; margin-left: 3px; margin-right: 6px; } /* /20211124 修正のため追記 */ /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- static_content table_wrp -------------------------------------------------------------*/ .table_wrp table { width:100%; text-align:left; font-size:14px; line-height:1.5; border-collapse: separate; border-spacing: 0; border-bottom:solid 1px #ddd; } .table_wrp table th { padding:10px; font-weight:bold; border:solid 1px #ddd; border-right:0; border-bottom:0; background:rgba(0,0,0,0.05); color:#000; box-sizing:border-box; -webkit-box-sizing:border-box; width:auto; } .table_wrp table thead th { background:rgba(0,0,0,0.1); } .table_wrp table td { padding:10px; border:solid 1px #ddd; border-bottom:0; color:#000; box-sizing:border-box; -webkit-box-sizing:border-box; } .table_wrp table td + td { border-left:0; } .table_wrp table tr:nth-child(odd) { background:#fff; } .table_wrp table tr:nth-child(even) { background:rgba(0,0,0,0.05); } .table_wrp table .icon_fin { padding: 0.25em 0.5em; text-decoration: none; color: #FFF; background: #a9a9a9; transition: .4s; float:right; margin-right:5px; } .table_wrp table .icon_open { padding: 0.25em 0.5em; text-decoration: none; color: #FFF; background: #da0b0b; transition: .4s; float:right; margin-right:5px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .table_wrp table { padding:0; margin-top:20px; border: solid 1px #ddd; } .table_wrp table tr:nth-child(even){ background: transparent; } .table_wrp table th, .table_wrp table td { display:block; width:auto; padding:10px; font-size:14px; border-left:none; border-right:none; border-top: none; } .table_wrp table th:not(:first-child), .table_wrp table td:not(:first-child) { border-top: solid 1px #ddd; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .static_content .table_wrp { width:100%; } .static_content .table_wrp table th { font-size:12px; font-weight:bold; } .static_content .table_wrp table td { font-size:12px; } .static_content .table_simple table th { display: list-item; list-style:none; width:100%; border-right:solid 1px #ddd; } .static_content .table_simple table td { display: list-item; list-style:none; width:100%; border-top:dotted 0px #ddd; } .static_content .table_simple table tr:nth-child(odd) , .static_content .table_simple table tr:nth-child(even) { background:#fff; } .static_content .table_scroll { width:100%; overflow-x:scroll; } .static_content .table_scroll table { width:1000px; } .table_wrp table .icon_fin { padding: 0 0.5em; font-size: 12px; } .table_wrp table .icon_open { padding: 0 0.5em; font-size: 12px; } } /* for SP max-width: 480px */ /*=============================================================== product_detail_static ===============================================================*/ .section_product_static { border:0; } /*------------------------------------------------------------- mv -------------------------------------------------------------*/ .mv { text-align:center; overflow:hidden; margin:0 auto; width:100%; } /* タブレット以下 */ @media screen and (max-width: 1600px) { .mv img { width:100%; height:auto; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- product_detail -------------------------------------------------------------*/ .section_product_static .product_detail { width:46.36%; } .section_product_static .product_detail .product_detail_ph img { width:100%; } .section_product_static .product_detail_txt { padding:15px 0 30px; } .section_product_static .product_detail_txt .product_detail_hdg { background:#FF0000; padding:10px 15px; font-size:16px !important; text-align:center; color:#FFFFFF; margin-bottom:0 !important; } /* タブレット以下 */ @media screen and (max-width: 1100px) { .section_product_static .product_detail { width:48%; } .section_product_static .product_detail_txt { padding:0 0 10px; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .section_product_static .product_detail { width:100%; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- product_detail -------------------------------------------------------------*/ .section_product_static .product_detail .headline { position:relative; width:100%; height:auto; padding-bottom:35px; text-align:left; font-size:34px; } .section_product_static .product_detail .headline span { font-size:16px; padding-top:5px; display:block; } /*.section_product_static .product_detail .headline:after { position:absolute; content:' '; width:100%; height:45px; top:-75px; left:0; background:#fe0000; } */ .section_product_static .product_detail + .product_detail { margin-bottom:40px; } .section_product_static .product_detail .product_detail_hdg { font-size:34px; line-height:1.4; margin-bottom:20px; } .section_product_static .product_detail .product_detail_hdg span { font-size:25px; display:block; } .section_product_static .product_detail + .mid_width { clear:both; background:#fef9ea; padding:25px 35px; } .section_product_static .product_detail + .mid_width p { line-height:1.9; font-size:16px; } /* .section_product_static .product_detail + .mid_width .caption { font-size:14px; margin-top:10px; line-height:1.7; } */ .section_product_static .product_detail + .mid_width::before { content:""; display:block; clear:both; } .section_product_static .product_detail .read { border-bottom:solid 1px #c6c6c0; padding-bottom:15px; font-size:20px; } .section_product_static .product_detail .read + p { margin-top:20px; } .section_product_static .detail_txt p { font-size:16px; } /* タブレット以下 */ @media screen and (max-width: 1100px) { .section_product_static .product_detail .headline img { width:100%; height:auto; } .section_product_static .product_detail .headline:after { height:30px; top:-40px; } .section_product_static .product_detail + .mid_width { padding:20px 25px; } .section_product_static .product_detail + .mid_width p { font-size:14px; } /* .section_product_static .product_detail + .mid_width .caption { font-size:12px; } */ } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .section_product_static .product_detail .headline:after { height:20px; top:-30px; } .section_product_static .product_detail .headline { font-size:22px; line-height:1.4; padding:20px 0 15px; } .section_product_static .product_detail .headline span { font-size:14px; } .section_product_static .product_detail .read { padding-bottom:0; font-size:16px; } .section_product_static .product_detail .product_detail_hdg { font-size:22px; margin:20px 0 10px; } .section_product_static .product_detail .product_detail_hdg span { font-size:18px; display:block; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_product_static .product_detail .headline:after { content:none; } .section_product_static .product_detail .read { padding-bottom:15px; } .section_product_static .product_detail .read img { width:100%; height:auto; } .section_product_static .product_detail .read + p { /*margin-top:15px;*/ } .section_product_static .detail_txt p { font-size:14px; } .section_product_static .product_detail .product_detail_hdg { margin-bottom:0; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .product_detail .list -------------------------------------------------------------*/ .product_detail .list { border-bottom:dotted 1px #b2b2b2; } .product_detail .list li { border-top:dotted 1px #b2b2b2; padding:15px; font-size:16px; } .product_detail .list li strong { color:#fe0000; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .product_detail .list { margin-top:20px; } .product_detail .list li { padding:10px; font-size:14px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- price_box -------------------------------------------------------------*/ .price_box { border:solid 10px #dad9d6; padding:15px 5px; text-align:center; margin-top:25px; background:#fff; } .price_box .title { color:#a30b1a; margin-top:0; font-size:20px; } .price_box .price { font-size:22px; margin-top:5px; text-align:center; } .price_box .price + .caption { margin-top:0; } .price_box .price strong { font-size:30px; color:#fe0000; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .price_box { border:solid 5px #dad9d6; padding:10px 5px; margin-top:20px; } .price_box .title { color:#a30b1a; font-size:14px; } .price_box .price { font-size:14px; } .price_box .price strong { font-size:18px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- submit_btn -------------------------------------------------------------*/ .submit_btn { margin-top:25px; } .section + .submit_btn { width:40%; margin:50px auto 0; } .submit_btn a, .submit_btn input { position:relative; text-decoration:none; display:block; background-color:#a30b1a; text-align:center; color:#fff; font-size:24px; line-height:1.5; font-weight:bold; padding:22px 0; width:100%; -webkit-transition: .1s; transition: .1s; } .submit_btn.arw a:after , .submit_btn.arw input:after { position:absolute; content:" "; width:13px; height:13px; top:0; left:auto; bottom:0; right:10px; margin:auto; width:8px; height:8px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #fff; border-right: 6px solid transparent; box-sizing:border-box; -webkit-box-sizing:border-box; } .submit_btn a:hover, .submit_btn input:hover { opacity:0.7; } .submit_btn + .caption { margin-top:20px; font-size:12px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .section + .submit_btn { width:90%; margin-top:20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .submit_btn { margin-top:20px; } .submit_btn a, .submit_btn input { font-size:16px; padding:10px 0; } .submit_btn.arw a:after , .submit_btn.arw input:after { position:absolute; content:" "; width:13px; height:13px; top:0; left:auto; bottom:0; right:10px; margin:auto; width:8px; height:8px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #fff; border-right: 6px solid transparent; box-sizing:border-box; -webkit-box-sizing:border-box; } .submit_btn + .caption { margin-top:15px; } .section + .submit_btn { width:90%; margin-top:20px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- 注文一覧配下のsubmit_btn 20210901追記 -------------------------------------------------------------*/ .content_mypage .searchBtn .submit_btn { margin-top: 10px; border-radius: 100vh!important; } /*------------------------------------------------------------- 注文一覧配下のclearBtn 20211202追記 -------------------------------------------------------------*/ .m-topFilterBox .o-box-body .btn_container .baseBtn { border-radius: 100vh!important; } /*=============================================================== static_pagetitle ===============================================================*/ .static_pagetitle { width: 1080px; margin: 0 auto; border-bottom: 10px solid #a30b1a; padding-bottom: 35px; line-height: 1.0; background:none; padding:40px 0; text-align:center; } .static_pagetitle .title { color: #000; font-size: 26px; border-bottom:none; } .static_pagetitle .title span { color: #fe0000; font-weight:bold; } .static_pagetitle .title_eng { font-size: 12px; } @media screen and (max-width: 1080px) { .static_pagetitle { width: 100%; padding:20px 0; border-bottom: 5px solid #a30b1a; } } /* タブレット以下 */ /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .static_pagetitle { padding-bottom: 10px; } .static_pagetitle .title { font-size: 18px; } .static_pagetitle .title_eng { font-size: 12px; /*margin-top: -10px;*/ } } /* for SP max-width: 480px */ /*=============================================================== section_campaign ===============================================================*/ .section_campaign { } .section_campaign h4 { font-size: 22px; line-height: 2.0; text-align: center; margin-top: 30px; } .section_campaign .mv { margin-top:30px; } .section_campaign .speclist1 { font-size: 16px; margin-top: 70px; } .section_campaign .speclist1 + p { margin-top: 20px; font-size: 12px; line-height: 2; } .section_campaign .submit_btn a { width: 610px; margin: 0 auto; margin-top: 65px; } /* タブレット以下 */ @media screen and (max-width: 860px) { .section_campaign h4 .pc_tablet { display: none; } .section_campaign h4 .sp { display: block; } .section_campaign h4 { font-size: 20px; line-height: 1.5; text-align: left; margin-top: 20px; } .section_campaign .mv { margin-top:20px; } .section_campaign .speclist1 { margin-top: 40px; } } /* タブレット以下 */ @media screen and (max-width: 670px) { .section_campaign .submit_btn a { width: 100%; margin-top: 40px; } } /* for tablet max-width: 610px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_campaign h4 { font-size: 14px; text-align: left; } .section_campaign .speclist1 { font-size: 15px; margin-top: 20px; } .section_campaign .submit_btn a { width: 100%; margin-top: 30px; } .section_campaign .speclist1 + p { margin-top: 20px; font-size: 12px; line-height: 1.5; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- campaign_title -------------------------------------------------------------*/ .campaign_title { margin: 0 auto; text-align: center; width: 840px; height: auto; } .campaign_title img { width: 100%; height: auto; } /* タブレット以下 */ @media screen and (max-width: 860px) { .campaign_title { margin-top: 0; width: 100%; } } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== case_detail ===============================================================*/ .case_detail { } .case_detail .content_width2 { width:auto; max-width:1180px; margin-left:auto; margin-right:auto; -webkit-box-sizing:border-box; box-sizing:border-box; } .case_detail .content_width3 { width:auto; max-width:1030px; margin-left:auto; margin-right:auto; -webkit-box-sizing:border-box; box-sizing:border-box; } .case_detail .content_wrp { -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.2); -moz-box-shadow:0px 0px 5px rgba(0,0,0,0.2); -ms-box-shadow:0px 0px 5px rgba(0,0,0,0.2); box-shadow:0px 0px 5px rgba(0,0,0,0.2); } .case_detail .content { background:#fff; } .case_detail .content + .content { margin-top:0; } .case_detail .headtxt { padding:90px 45px 45px 85px; position:relative; } .case_detail .headtxt:after { content:""; width:50px; height:165px; background:#ff0000; position:absolute; top:0; left:0; } .case_detail .headtxt h3 { font-size:30px; line-height:1.5; } .case_detail .headtxt h5 { font-size:20px; font-weight:bold; line-height:1.5; } .case_detail .headtxt p { font-size:16px; line-height:1.75; margin-top:30px; } .case_detail .headimg { position:relative; } .case_detail .headimg .txt { color:#fff; position:absolute; right:0; bottom:-40px; width:48.73%; height:auto; padding:40px; -webkit-box-sizing:border-box; box-sizing:border-box; background:rgba(60,60,53,0.95); } .case_detail .headimg .txt h4 { font-size:30px; line-height:1.4; } .case_detail .headimg .txt h5 { font-size:18px; line-height:1.5; font-weight:bold; margin-top:20px; } .case_detail .headimg .txt h5 span { font-size:13px; line-height:1.5; } .case_detail .headimg .txt p { font-size:14px; line-height:1.5; margin-top:10px; } .case_detail .headimg .txt p span { font-size:16px; line-height:1.5; } /* 1280px*/ @media screen and (max-width: 1280px) { .case_detail .headimg .txt { padding:30px; } } /* for tablet max-width: 1280px */ /* タブレット以下 */ @media screen and (max-width: 1080px) { .case_detail .headimg .txt { padding:20px; } .case_detail .headimg .txt h4 { font-size:24px; } } /* for tablet max-width: 1080px */ /* タブレット以下 */ @media screen and (max-width: 960px) { .case_detail .headimg .txt { position:static; width:100%; height:auto; } } /* for tablet max-width: 960px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .case_detail .headtxt { padding:20px 20px 20px 30px; } .case_detail .headtxt:after { width:10px; height:100%; } .case_detail .headtxt h3 { font-size:20px; } .case_detail .headtxt h5 { font-size:14px; } .case_detail .headtxt p { font-size:14px; line-height:1.6; margin-top:10px; } .case_detail .headimg .txt h4 { font-size:16px; } .case_detail .headimg .txt h5 { font-size:14px; margin-top:10px; } .case_detail .headimg .txt h5 span { font-size:12px; } .case_detail .headimg .txt p { font-size:12px; margin-top:0; } .case_detail .headimg .txt p span { font-size:14px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- case_detail stepbox -------------------------------------------------------------*/ .case_detail .stepbox { padding:50px; } .case_detail .fitimg + .stepbox { padding-top:0; } .case_detail .stepbox + .stepbox { padding-top:30px; } .case_detail .stepbox .head { color:#fff; font-size:18px; line-height:20px; padding:15px 35px; background:#a30b1a; width:350px; } .case_detail .stepbox .head4 { color:#fff; font-size:18px; line-height:20px; padding:15px 25px; width:95%; margin:0 auto; background:#a30b1a; display:block; box-sizing:border-box; } .case_detail .stepbox .head3 { color:#fff; font-size:18px; line-height:20px; padding:15px 35px; background:#a30b1a; display:inline-block; box-sizing:border-box; } .case_detail .stepbox .head2 { color:#fff; font-size:18px; line-height:20px; padding:15px 20px; background:#a30b1a; width:100%; box-sizing:border-box; } .case_detail .stepbox .head2 + .txt { padding:15px 30px; } .case_detail .stepbox .left { float:left; width:43%; } .case_detail .stepbox .right { float:right; width:51.7%; } .case_detail .stepbox .left2 { float:left; width:48%; } .case_detail .stepbox .right2 { float:right; width:48%; } .case_detail .stepbox .left3 { float:left; width:22%; } .case_detail .stepbox .right3 { float:right; width:74%; } .case_detail .stepbox .right .fitimg,.case_detail .stepbox .left .fitimg, .case_detail .stepbox .right2 .fitimg,.case_detail .stepbox .left2 .fitimg, .case_detail .stepbox .right3 .fitimg,.case_detail .stepbox .left3 .fitimg { margin-top:30px; } .case_detail .stepbox .txt { padding:20px 40px; } .case_detail .stepbox .txt2 { padding:0 40px; margin:0 20px; } .case_detail .stepbox .txt h4 { color:#48190a; font-size:26px; line-height:1.6; } .case_detail .stepbox .txt .list { margin-top:20px; } .case_detail .stepbox .txt .list li { font-size:16px; line-height:1.7; padding:10px 25px; background:#eee; } .case_detail .stepbox .txt .list li + li { margin-top:5px; } .case_detail .stepbox .txt .style_set1 li::before { content: ""; display: inline-block; width: 12px; height: 12px; background: #a30b1a; margin: 0 8px 0px 0; vertical-align: baseline; border-radius: 20px; } .case_detail .stepbox .txt p { font-size:16px; line-height:2.1; margin-top:20px; } .case_detail .stepbox .fitimg + p { font-size:14px; line-height:1.5; margin-top:10px; } .case_detail .stepbox .txt2 p { font-size:16px; line-height:2.1; } .case_detail .link_txt { background:#eeeeee; padding:15px 20px; margin:30px 0; word-break: break-all; } /* 1280px*/ @media screen and (max-width: 1280px) { } /* for tablet max-width: 1280px */ /* タブレット以下 */ @media screen and (max-width: 1080px) { .case_detail .stepbox { padding:30px; } .case_detail .stepbox + .stepbox { padding-top:10px; } .case_detail .stepbox .left, .case_detail .stepbox .right, .case_detail .stepbox .left2, .case_detail .stepbox .right2, .case_detail .stepbox .left3, .case_detail .stepbox .right3 { float:none; width:100%; } .case_detail .stepbox .right .fitimg { margin-top:20px; } .case_detail .stepbox .txt h4 { line-height:1.5; } } /* for tablet max-width: 1080px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .case_detail .stepbox { padding:20px; } .case_detail .stepbox .head { font-size:16px; line-height:20px; padding:10px; width:auto; } .case_detail .stepbox .txt { padding: 10px 20px 0; } .case_detail .stepbox .txt h4 { font-size:16px; line-height:1.4; } .case_detail .stepbox .txt .list { margin-top:10px; } .case_detail .stepbox .txt .list li { font-size:14px; line-height:1.6; padding:10px; } .case_detail .stepbox .txt p { font-size:14px; line-height:1.6; margin-top:10px; } .case_detail .stepbox .txt2 { padding:15px 20px; margin:0 20px; } .case_detail .stepbox .txt2 p { font-size:14px !important; line-height:1.8 !important; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- case_detail txtlink -------------------------------------------------------------*/ .case_detail .txtlink { text-align:right; margin-top:30px !important; } .case_detail .txtlink a { padding-left:10px; color:#000; font-size:14px; text-decoration:underline; position:relative; display:inline-block; } .txtlink a:hover { opacity:0.7; } .txtlink a:after { position:absolute; content:''; width:5px; height:5px; top:0; bottom:0; left:0; right:auto; margin:auto; border-top:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #a30b1a; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transform:none; -moz-transform:none; -ms-transform:none; transform:none; } /* 1280px*/ @media screen and (max-width: 1280px) { } /* for tablet max-width: 1280px */ /* タブレット以下 */ @media screen and (max-width: 1080px) { } /* for tablet max-width: 1080px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .case_detail .txtlink { text-align:left; margin-top:20px !important; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- case_detail linkbox -------------------------------------------------------------*/ .case_detail .linkbox { padding:50px 50px 70px; } .case_detail .linkbox .inner { background:#eee; padding:60px; position:relative; } .case_detail .linkbox .inner:before { content:"導入サービス"; position:absolute; top:-18px; bottom:auto; left:0; right:0; margin:auto; font-size:26px; line-height:30px; font-weight:bold; text-align:center; } .case_detail .linkbox .inner:after { content:""; position:absolute; top:30px; bottom:auto; left:0; right:0; margin:auto; width:155px; height:1px; background:#000; } /* .case_detail .linkbox .title p { color:#ff0000; font-size:22px; line-height:30px; margin-top:0; } .case_detail .linkbox .title h4 { font-size:30px; line-height:1.5; font-weight:normal; } .case_detail .linkbox .title h4 span { color:#861718; } */ .case_detail .linkbox .title { font-size:28px; width:auto; max-width:702px; height:auto; } .case_detail .linkbox p { font-size:16px; line-height:1.8; margin-top:30px; } .case_detail .linkbox .btns { width:100%; margin:0 auto; } .case_detail .linkbox .btn { width:47.9%; float:left; margin-right:4.2%; margin-top:30px; } .case_detail .linkbox .btn_wh { margin-right:0; } .case_detail .linkbox .btn a { display:block; padding:15px 0; font-size:17px; line-height:30px; text-align:center; text-decoration:none; } .case_detail .linkbox .btn a span { padding-right:20px; position:relative; } .case_detail .linkbox .btn a span:after { position:absolute; content:''; margin:auto; top:0; bottom:0; right:0; width:5px; height:5px; border-top: 3px solid transparent; border-right: 5px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid #a30b1a; -webkit-box-sizing:border-box; box-sizing:border-box; } .case_detail .linkbox .btn_re a { color:#fff; background:#ff0000; border:1px solid #ff0000; } .case_detail .linkbox .btn_re a:hover { color:#fff; opacity:0.7; } .case_detail .linkbox .btn_re a span:after { border-left: 5px solid #fff; } .case_detail .linkbox .btn_wh a { color:#000; background:#fff; border:1px solid #000; } .case_detail .linkbox .btn_wh a:hover { color:#a30b1a; } .case_detail .linkbox .btn_re a span:after { border-left: 5px solid #fff; } .case_detail .linkbox .btn a span .sp_none { display:inline; } /* 1280px*/ @media screen and (max-width: 1280px) { } /* for tablet max-width: 1280px */ /* タブレット以下 */ @media screen and (max-width: 1080px) { .case_detail .linkbox { padding:30px; margin-top:30px; } .case_detail .linkbox .inner { padding:45px 30px 30px; } } /* for tablet max-width: 1080px */ /* タブレット以下 */ @media screen and (max-width: 980px) { .case_detail .linkbox .btns { width:90%; } .case_detail .linkbox .btn { width:100%; float:none; margin-right:0; margin-top:20px; } .case_detail .linkbox .btn_wh { margin-top:10px; } .case_detail .linkbox .btn a { padding:10px 0; font-size:17px; line-height:20px; text-align:center; text-decoration:none; } } /* for tablet max-width: 980px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .case_detail .linkbox { padding:10px 20px 20px; } .case_detail .linkbox .inner { padding:30px 20px 20px; } .case_detail .linkbox .inner:before { top:-12px; font-size:20px; line-height:1; } .case_detail .linkbox .inner:after { top:20px; } .case_detail .linkbox p { font-size:14px; line-height:1.6; margin-top:10px; } .case_detail .linkbox .btns { width:100%; } .case_detail .linkbox .btn { margin-top:10px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .case_detail .linkbox .btn a { padding:10px 0; font-size:14px; line-height:20px; text-align:center; text-decoration:none; } .case_detail .linkbox .btn a span { padding-right:15px; } .case_detail .linkbox .btn a span .sp_none { display:none; } .case_detail .linkbox .title { font-size:18px; } } /* for SP max-width: 480px */ /*=============================================================== check_agree_box　2017/11/21 ===============================================================*/ .check_agree_box { text-align:center; } .check_agree_box .btn_detail { display:inline-block; margin-left:0px; } .check_agree_box .btn_detail a, .check_agree_box .btn_detail input { background:#a30b1a; padding:5px 20px; border:solid 1px #a30b1a; } .check_agree_box .btn_detail a:hover, .check_agree_box .btn_detail input:hover { background:#a30b1a; opacity:0.7; } .check_agree_box .btn_deactive a, .check_agree_box .btn_deactive input, .check_agree_box .btn_deactive a:hover, .check_agree_box .btn_deactive input:hover { background:#ccc; border:solid 1px #999; } /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .check_agree_box .btn_detail { width:auto; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- .form_content checkbox -------------------------------------------------------------*/ .check_agree_box .checkbox_input { width:auto; display:none; border:0; margin:0; } .check_agree_box label { display:inline-block; vertical-align:middle; position:relative; padding-left:24px; cursor:pointer; font-size:14px; line-height:20px; } .check_agree_box label:before { content:""; position:absolute; top:0; bottom:0; left:0; margin:auto; border-radius:10%; width:16px; height:16px; background:#fff; border:1px solid #999; -webkit-box-sizing:border-box; box-sizing:border-box; } .check_agree_box label:after { content:""; position:absolute; top:-13px; left:6px; margin:auto; width:6px; height:14px; border-right:2px solid transparent; border-bottom:2px solid transparent; -webkit-transform:rotate(40deg); -moz-transform:rotate(40deg); -ms-transform:rotate(40deg); transform:rotate(40deg); -webkit-transition:border-bottom-color,border-right-color .2s linear; -moz-transition:border-bottom-color,border-right-color .2s linear; -ms-transition:border-bottom-color,border-right-color .2s linear; transition:border-bottom-color,border-right-color .2s linear; } .check_agree_box input:checked + label:after { border-color:#a30b1a; } /* タブレット以下 */ @media screen and (max-width: 960px) { } /* for tablet max-width: 960px */ /* SP向けレイアウトの指定：～736px */ @media only screen and (max-width: 736px) { } /* for SP max-width: 736px */ /*=============================================================== add 2017/12/15 fsus_header ===============================================================*/ .fsus_header_wrp { width:100%; /* 20210730 修正のため追記 */ background: #000; color: #fff; /* /20210730 修正のため追記 */ } .fsus_header_wrp .fsus_header { position:relative; overflow:hidden; } .fsus_header_wrp .fsus_header .fujitsulogo { display:inline-block; vertical-align:top; /*padding:15px 30px 0 0;*/ /* 20210730 修正のため追記 */ padding:30px 30px 0 0; /* /20210730 修正のため追記 */ box-sizing: content-box; } .fsus_header_wrp .fsus_header .sitelogo { display:inline-block; /*padding:30px 0 20px;*/ /* 20210728 修正のため追記 */ padding:20px 0 20px; /* /20210728 修正のため追記 */ vertical-align:top; } .fsus_header_wrp .fsus_header .sitelogo span { /* 20210730 修正のため追記 */ display: block; margin-top: 5px; /* /20210730 修正のため追記 */ } /* タブレット以下 */ @media screen and (max-width: 1280px) { .fsus_header_wrp .fsus_header .fujitsulogo { padding:15px 30px 0 15px; } .fsus_header_wrp .fsus_header { height:auto; /*height:75px !important;*/ } .fsus_header_wrp .fsus_header .sitelogo { width:28%; } .fsus_header_wrp .fsus_header .sitelogo img { width:100%; height:auto; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_header_wrp .fsus_header .sitelogo { padding:10px 15px; } .fsus_header_wrp .fsus_header .sitelogo { display:block; /*width:195px;*/ /*padding:5px 15px 0;*/ /* 20210730 修正のため追記 */ width:50%; min-width: 195px; padding:5px 15px 15px; /* /20210730 修正のため追記 */ } /* 20210730 修正のため追記 */ .fsus_header_wrp .fsus_header .sitelogo span { font-size: 12px; } /* /20210730 修正のため追記 */ .fsus_header_wrp .fsus_header .fujitsulogo { width:40px; padding:13px 15px 0; } .fsus_header_wrp .fsus_header .sitelogo { } .fsus_header_wrp .fsus_header .fujitsulogo img, .fsus_header_wrp .fsus_header .sitelogo img { width:100%; } .fsus_header_wrp .fsus_header { /*height:75px;*/ height:auto; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { /* 20210730 修正のため追記 */ .fsus_header_wrp .fsus_header { height:130px!important; } .fsus_header_wrp .fsus_header .sitelogo span { font-size: 11px; } /* /20210730 修正のため追記 */ } /* for SP max-width: 480px */ /*------------------------------------------------------------- function -------------------------------------------------------------*/ .fsus_header_wrp .fsus_header .function { } .fsus_header_wrp .fsus_header .function ul { position:absolute; height:30px; right:0; /*bottom:20px;*/ /* 20210730 修正のため追記 */ bottom:25px; /* /20210730 修正のため追記 */ } .fsus_header_wrp .fsus_header .function li { float:left; line-height:30px; margin-left:15px; padding:0; } .fsus_header_wrp .fsus_header .icon a { background-image:url(/image/header_icon_guide_w); background-size:23px 23px; background-position:center left; background-repeat:no-repeat; padding-left:28px; font-size:14px; line-height:30px; text-decoration:none; /*color:#000;*/ /* 20210730 修正のため追記 */ color:#fff; /* /20210730 修正のため追記 */ display:block; } .fsus_header_wrp .fsus_header .icon a:hover { opacity:0.7; } .fsus_header_wrp .fsus_header .faq a { background-image:url(/image/header_icon_faq_w); } .fsus_header_wrp .fsus_header .use a { background-image:url(/image/header_icon_use_w); } .fsus_header_wrp .fsus_header .tos a { background-image:url(/image/header_icon_tos_w); } .fsus_header_wrp .fsus_header .search { height:30px; } .fsus_header_wrp .fsus_header .search .inputfld input { height:30px; border:solid 1px #000; padding:0 10px; box-sizing:border-box; -webkit-box-sizing:border-box; vertical-align:top; width:154px; } .fsus_header_wrp .fsus_header .search .submit input { vertical-align:middle; } .fsus_header_wrp .fsus_header .search .inputfld { background:#E7E7E7; border:2px solid #E7E7E7; padding:3px 5px 1px; border-radius:50px; overflow:hidden; } .fsus_header_wrp .fsus_header .search .inputfld select { border:none; border-radius:50px; padding:5px 10px 5px 5px; background:#E7E7E7 url(/image/icon_arrow) no-repeat 97% 60%; background-size:7%; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size:13px; } .fsus_header_wrp .fsus_header .search .inputfld select::-ms-expand { display:none; } /* タブレット以下 */ @media screen and (max-width: 1280px) { .fsus_header_wrp .fsus_header .function ul { } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_header_wrp .fsus_header .function ul { position:static; width:100%; padding-top:0; padding-bottom:10px; margin-left:-5px; display:none; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== fsus_gnav ===============================================================*/ .fsus_gnav { /*background:#eee;*/ /* 20210730 修正のため追記 */ background:#666; /* /20210730 修正のため追記 */ position:relative; } .fsus_gnav .content_width { /*position:relative;*/ } .fsus_gnav .fsus_nav { /*padding-left:8%; */ height:55px; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; } .fsus_gnav .fsus_nav ul{ margin-bottom:0; } .fsus_gnav .btns { position:relative; width:100%; max-width:1260px; } .fsus_gnav .btns ul { position:absolute; top:-55px; right:0; } /* タブレット以下 */ @media screen and (max-width: 1280px) { .fsus_gnav .btns { right:35px; } .fsus_gnav .btns ul { margin-left:0; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 1000px) { .fsus_gnav .fsus_nav { padding-left:0; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_gnav { display:none; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .fsus_gnav .fsus_nav -------------------------------------------------------------*/ .fsus_gnav .fsus_nav > ul > li { float:left; margin-right:0; } .fsus_gnav .fsus_nav > ul > li > a { display:block; padding:0 20px; line-height:55px; /* 20210730 修正のため追記 */ color: #fff; /* /20210730 修正のため追記 */ } .fsus_gnav .fsus_nav > ul > li > a .arw { display:block; position:relative; padding-right:15px; font-size: 18px; } .fsus_gnav .fsus_nav a { color:#000; text-decoration:none; } /*------------------------------------------------------------- .fsus_gnav .fsus_nav -------------------------------------------------------------*/ .fsus_gnav .fsus_nav > ul > li { float:left; margin-right:0; } .fsus_gnav .fsus_nav .has_subpanel > a { display:block; padding:0 20px; line-height:55px; color:#000; text-decoration:none; } .fsus_gnav .fsus_nav a .arw { display:block; position:relative; padding-right:15px; } .fsus_gnav .fsus_nav a .arw:after { content:''; position:absolute; margin:auto; top:0; bottom:0; right:0; /*border-right:solid 1px #000; border-bottom:solid 1px #000;*/ /* 20210730 修正のため追記 */ border-right:solid 1px #fff; border-bottom:solid 1px #fff; /* /20210730 修正のため追記 */ width:6px; height:6px; -webkit-transform: rotate(-45deg) translateY(-3px); -moz-transform: rotate(-45deg) translateY(-3px); -ms-transform: rotate(-45deg) translateY(-3px); transform: rotate(-45deg) translateY(-3px); } .fsus_gnav .fsus_nav .has_subpanel a .arw:after { -webkit-transform: rotate(45deg) translateY(-3px); -moz-transform: rotate(45deg) translateY(-3px); -ms-transform: rotate(45deg) translateY(-3px); transform: rotate(45deg) translateY(-3px); } .fsus_gnav .fsus_nav a:hover, .fsus_gnav .fsus_nav .active a { color:#fff; background:#333333; } .fsus_gnav .fsus_nav a:hover .arw:after, .fsus_gnav .fsus_nav a .arw:hover:after, .fsus_gnav .fsus_nav .active a .arw:after { border-right:solid 1px #fff; border-bottom:solid 1px #fff; } /* タブレット以下 */ @media screen and (max-width: 1000px) { .fsus_gnav .fsus_nav > ul > li { margin-right:0%; } .fsus_gnav .fsus_nav a { padding:0 20px; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_gnav .fsus_nav a { padding:0 15px; } .fsus_gnav .fsus_nav a:after { right:10px; width:4px; height:4px; -webkit-transform: rotate(45deg) translateY(-3px); -moz-transform: rotate(45deg) translateY(-3px); -ms-transform: rotate(45deg) translateY(-3px); transform: rotate(45deg) translateY(-3px); transition: all .3s; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .fsus_gnav .btns -------------------------------------------------------------*/ .fsus_gnav .btns li { float:left; width:135px; } .fsus_gnav .btns li:last-of-type { float:left; width:190px; } .fsus_gnav .btns li a { display:block; background-image:url(/image/header_icon_lock_w); background-size:30px 30px; background-position:20px center; background-repeat:no-repeat; padding-left:30px; font-size:14px; line-height:55px; text-decoration:none; /*color:#000;*/ /* 20210730 修正のため追記 */ color:#fff; /* /20210730 修正のため追記 */ text-align:center; border-left:solid 1px #9d9c95; } .fsus_gnav .btns li.user a { background-image:url(/image/header_icon_user_w); border-right:solid 1px #9d9c95; } .fsus_gnav .btns li a:hover { opacity:0.7; } /* タブレット以下 */ @media screen and (max-width: 1280px) { } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_gnav .btns li { float:left; width:110px; } .fsus_gnav .btns li a { background-size:20px 20px; background-position:10px center; padding-left:20px; border-right:solid 0px #9d9c95; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .fsus_gnav .subpanel -------------------------------------------------------------*/ .fsus_gnav [class*="lyt-column"] { max-width:100%; margin:0 auto; display:flex; flex-wrap:wrap; align-items:stretch; align-content:stretch; justify-content:space-between; } .fsus_gnav .lyt-column > * { width:100%; } .fsus_gnav .lyt-column2 > * { width:50%; } .fsus_gnav .lyt-column3 > * { width:32%; } .fsus_gnav .lyt-column4 > * { width:25%; } .fsus_gnav .lyt-column5 > * { width:20%; } .fsus_gnav .subpanel { position:absolute; width:100%; top:55px; left:0; background:#333333; box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.20); padding:20px; box-sizing:border-box; z-index:10000; display:none; } .fsus_gnav .subpanel a:hover { opacity:0.6; } .fsus_gnav .subpanel img { width:100%; } .fsus_gnav .subpanel_inner { max-width:1400px; margin:0 auto; } .fsus_gnav .subpanel_primary { width:28%; } .fsus_gnav .subpanel_primary > a { display:block; background:#484848 !important; padding:20px; box-sizing:border-box; text-decoration:none; } .fsus_gnav .subpanel_primary .ph { margin-bottom:15px; } .fsus_gnav .subpanel_primary .title { border-top:5px solid #FF0000; padding-top:12px; font-size:18px; margin-bottom:8px; } .fsus_gnav .subpanel_secondary { width:66%; } .fsus_gnav .subpanel_secondary .ph { margin-top:10px; } .fsus_gnav .subpanel_secondary .title { padding-top:12px; font-size:16px; padding-bottom:7px; color:#FFFFFF; border-bottom:1px dotted #FFFFFF; } .fsus_gnav .subpanel_secondary .title a { text-decoration:none; } .fsus_gnav .subpanel_secondary .title a:hover { text-decoration:underline; } .fsus_gnav .subpanel_secondary .title a::after { content:">"; font-size:12px; padding-left:10px; } .fsus_gnav .subpanel_secondary ul { margin-top:5px; } .fsus_gnav .subpanel_secondary li { margin-top:8px; } .fsus_gnav .subpanel_secondary li a { display:block; text-decoration:none; position:relative; padding-left:15px; } .fsus_gnav .subpanel_secondary li a::before { content:">"; font-size:10px; margin-right:10px; position:absolute; left:0; } .fsus_gnav .subpanel_primary span, .fsus_gnav .subpanel_secondary span { display:block; } .fsus_gnav .subpanel_primary .txt, .fsus_gnav .subpanel_secondary li { font-size:13px; } /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_gnav .subpanel { position:absolute; top:48px; padding:0; } .fsus_gnav .subpanel ul { background:#fff; margin-top:0; } .fsus_gnav .subpanel ul li { width:100%; border-bottom:solid 1px rgba(52,152,219,0.2); margin-top:0; } .fsus_gnav .subpanel ul li a { color:#6f0f10; padding:15px; padding-right:25px; } .fsus_gnav .subpanel ul li a:hover { color:#fff; background:#861718; text-decoration:none; } .fsus_gnav .subpanel li a:before { content:''; position:absolute; top:0; bottom:0; left:auto; right:10px; margin:auto; border-right:solid 1px #861718; border-bottom:solid 1px #861718; width:10px; height:10px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); transition: all .3s; } .fsus_gnav .subpanel li a:hover:before { border-right:solid 1px #fff; border-bottom:solid 1px #fff; } .subpanel_inner .ph a::after { display:none; } .subpanel_inner .ph img { width:100% !important; border:10px solid #ffffff; margin-bottom:0; box-sizing:border-box; } .subpanel_inner .txt { display:block; padding:0; margin-top:10px; } .fsus_gnav .subpanel li a:hover:before { border-right:solid 1px #fff; border-bottom:solid 1px #fff; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .fsus_gnav .subpanel_inner .ph { display:none !important; } } /* for SP max-width: 480px */ /*=============================================================== fsus_sp_navigation ===============================================================*/ .fsus_sp_navigation { position:absolute; /*top:75px;*/ /* 20210802 修正のため追記 */ top:auto; /* /20210802 修正のため追記 */ left:0; width:100%; height:auto; /*background:#f2f2f2;*/ /* 20210730 修正のため追記 */ background:#666; /* /20210730 修正のため追記 */ z-index:300; display:none; } /* タブレット以下 */ @media screen and (max-width: 1280px) { } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { /* 20210730 修正のため追記 */ .fsus_sp_navigation { top:130px; } /* /20210730 修正のため追記 */ } /* for SP max-width: 480px */ /*------------------------------------------------------------- fsus_sp_navigation -------------------------------------------------------------*/ .fsus_sp_navigation .search_area { padding:15px; border-top:solid 1px #b1b1ac; } .fsus_sp_navigation .search .inputfld input { height:30px; width:90%; border:solid 1px #000; padding:0 10px; box-sizing:border-box; -webkit-box-sizing:border-box; vertical-align:top; } .fsus_sp_navigationr .search .submit input { vertical-align:middle; } /* タブレット以下 */ @media screen and (max-width: 1280px) { } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_sp_navigation .search_area .search { height:30px; } .fsus_sp_navigation .search_area .search .inputfld select { height:30px !important; border:solid 1px #000; padding:0 10px !important; box-sizing:border-box; -webkit-box-sizing:border-box; vertical-align:top; width:92.5% !important; box-sizing:border-box; border-radius:50%; } .fsus_sp_navigation .search_area .search .submit { position:relative; top:3px; } .fsus_sp_navigation .search_area .search .submit select { vertical-align:middle; } .fsus_sp_navigation .search_area .search .inputfld select { border:none; border-radius:50px; padding:5px 10px 5px 5px; background:#E7E7E7 url(/image/icon_arrow) no-repeat 98% 50%; background-size:15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size:13px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .fsus_sp_navigation .search_area .search .inputfld select { width:89% !important; } .fsus_sp_navigation .search_area .search .inputfld select { background:#E7E7E7 url(/image/icon_arrow) no-repeat 96% 50%; background-size:15px; } } /* for SP max-width: 480px */ /*------------------------------------------------------------- fsus_sp_navigation -------------------------------------------------------------*/ .fsus_sp_navigation .fsus_nav { } .fsus_sp_navigation .fsus_nav .subpanel { } .fsus_sp_navigation .fsus_nav li a { display:block; color:#fff; background:#000000; line-height:42px; padding:0 15px; box-sizing:border-box; -webkit-box-sizing:border-box; text-decoration:none; position:relative; border-top:solid 1px #f2f2f2; } .fsus_sp_navigation .fsus_nav li a:after { content:''; position:absolute; margin:auto; top:0; bottom:0; right:10px; border-right:solid 1px #fff; border-bottom:solid 1px #fff; width:6px; height:6px; -webkit-transform: rotate(-45deg) translateX(-5px); -moz-transform: rotate(-45deg) translateX(-5px); -ms-transform: rotate(-45deg) translateX(-5px); transform: rotate(-45deg) translateX(-5px); transition: all .3s; } .fsus_sp_navigation .fsus_nav li.has_subpanel a:after { -webkit-transform: rotate(45deg) translateX(-5px); -moz-transform: rotate(45deg) translateX(-5px); -ms-transform: rotate(45deg) translateX(-5px); transform: rotate(45deg) translateX(-5px); transition: all .3s; } .fsus_sp_navigation .fsus_nav li.has_subpanel.active a:after { -webkit-transform: rotate(-135deg) translateY(-5px); -moz-transform: rotate(-135deg) translateY(-5px); -ms-transform: rotate(-135deg) translateY(-5px); transform: rotate(-135deg) translateY(-5px); } .fsus_sp_navigation .fsus_nav li a:hover { background:#666; } /* タブレット以下 */ @media screen and (max-width: 1280px) { } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .fsus_sp_navigation .fsus_nav .subpanel -------------------------------------------------------------*/ .fsus_sp_navigation .fsus_nav .subpanel a { display:block; background:#f2f2f2; color:#000; line-height:20px; padding:10px 25px 10px 15px; } .fsus_sp_navigation .fsus_nav .subpanel a:hover { background:#fefefe; } .fsus_sp_navigation .fsus_nav .active .subpanel a:after, .fsus_sp_navigation .fsus_nav .subpanel a:after { content:''; position:absolute; margin:auto; top:0; bottom:0; right:10px; border-right:solid 1px #000; border-bottom:solid 1px #000; width:6px; height:6px; /* -webkit-transform: rotate(-45deg) translate(-3px,-5px); -moz-transform: rotate(-45deg) translate(-3px,-5px); -ms-transform: rotate(-45deg) translate(-3px,-5px); */ transform: rotate(-45deg) translate(-3px,-5px); transition: all .3s; } /* タブレット以下 */ @media screen and (max-width: 1280px) { } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_sp_navigation .fsus_nav .subpanel a { padding:15px; background:#FFFFFF; } .fsus_sp_navigation .fsus_nav .subpanel .subpanel_inner .ph img { border:none; } .fsus_sp_navigation .subpanel_primary .title { border-top:#FF0000 5px solid; padding:10px 0 0; margin:10px 0 0; background:none; color:#000000; font-weight:bold; font-size:16px; } .fsus_sp_navigation .fsus_nav .subpanel .subpanel_box a { /*padding:0 30px 0 0;*/ } .fsus_sp_navigation .subpanel_secondary .title a { padding:8px 7px; margin-right:-10px; background:#666666; border:none; color:#FFFFFF; } .fsus_sp_navigation .subpanel_secondary .title a:hover { background:#666666; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- .fsus_sp_navigation .fsus_btns_area -------------------------------------------------------------*/ .fsus_sp_navigation .fsus_btns_area { border-top:solid 1px #4b4b4b; } /* .fsus_sp_navigation .search_area{ display:none; } */ .fsus_sp_navigation .fsus_btns_area > li { /* width:50%; float:left; */ width:100%; margin-bottom:0; } .fsus_sp_navigation .subpanel { padding:10px 10px 3px; } .fsus_sp_navigation .subpanel_inner { margin-bottom:7px; } .fsus_sp_navigation .subpanel li { margin-top:0 !important; } .fsus_sp_navigation .title { display:block; background:#666; color:#FFFFFF; margin-bottom:2px; padding:7px 10px; } .fsus_sp_navigation .fsus_btns_area li a { display:block; text-align:left; line-height:42px; color:#000; text-decoration:none; border-bottom:solid 1px #4b4b4b; background-image:url(/image/header_icon_lock_w); background-position:10px center; background-repeat:no-repeat; background-size:20px 20px; padding-left:35px; } .fsus_sp_navigation .fsus_btns_area li a:hover { background-color:#fefefe; } /* .fsus_sp_navigation .fsus_btns_area li:nth-child(odd) a{ border-right:solid 1px #000; } */ .fsus_sp_navigation .fsus_btns_area li.guide a { background-image:url(/image/header_icon_guide_w); background-size:18px 18px; } .fsus_sp_navigation .fsus_btns_area li.faq a { background-image:url(/image/header_icon_faq_w); background-size:18px 18px; } .fsus_sp_navigation .fsus_btns_area li.user a { background-image:url(/image/header_icon_user_w); } .fsus_sp_navigation .fsus_btns_area li.login a { background-image:url(/image/header_icon_lock_w); } .fsus_sp_navigation .fsus_btns_area li.use a { background-image:url(/image/header_icon_use_w); } .fsus_sp_navigation .fsus_btns_area li.tos a { background-image:url(/image/header_icon_tos_w); } /* タブレット以下 */ @media screen and (max-width: 1280px) { } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_nav ul, .fsus_btns_area ul { margin-bottom:0; } .fsus_sp_navigation .subpanel_box { margin-top:10px !important; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*------------------------------------------------------------- fsus_header_wrp .hum_menu -------------------------------------------------------------*/ .fsus_header_wrp .hum_menu { display:none; } /* タブレット以下 */ @media screen and (max-width: 768px) { .fsus_header_wrp .hum_menu { display:block; position:absolute; top:0; bottom:0; margin:auto; right:8px; width:50px; height:50px; } .fsus_header_wrp .hum_menu .menu_icon { position:relative; z-index:300; padding:0; padding-top:30px; font-size:12px; line-height:20px; width:100%; text-align:center; } .fsus_header_wrp .hum_menu a { color:#7c7c7c; text-decoration:none; padding:0; /* 20210729 修正のため追記 */ font-size: 100%; /* /20210729 修正のため追記 */ } .fsus_header_wrp .hum_menu a:hover { color:#7c7c7c; text-decoration:none; } .fsus_header_wrp .hum_menu, .fsus_header_wrp .hum_menu span { display: inline-block; transition: all .3s; box-sizing: border-box; } .fsus_header_wrp .hum_menu span { position: absolute; left:0; right:0; margin:auto; width: 22px; height: 4px; background-color: #7c7c7c; border-radius: 1px; } .fsus_header_wrp .hum_menu span:nth-of-type(1) { top: 5px; } .fsus_header_wrp .hum_menu span:nth-of-type(2) { top: 14px; } .fsus_header_wrp .hum_menu span:nth-of-type(3) { top: 23px; } /* animation */ .fsus_header_wrp .hum_menu.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); -moz-transform: translateY(10px) rotate(-45deg); -ms-transform: translateY(10px) rotate(-45deg); } .fsus_header_wrp .hum_menu.active span:nth-of-type(2) { opacity: 0; -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); } .fsus_header_wrp .hum_menu.active span:nth-of-type(3) { -webkit-transform: translateY(-8px) rotate(45deg); transform: translateY(-8px) rotate(45deg); -moz-transform: translateY(-8px) rotate(45deg); -ms-transform: translateY(-8px) rotate(45deg); } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /*=============================================================== price_table add 2017/12/22 ===============================================================*/ .price_table { width:880px; margin:0 auto; padding:60px 0; } .price_table .list { width:102.273%;} .price_table .list .item { width:31.111%; margin-right:2.222%; float:left; } .price_table .list .item .title { width:100%; text-align:center; vertical-align:middle; height:100px; color:#fff; background:#706f67; display:table; } .price_table .list .item.web_price { margin-top:-10px; } .price_table .list .item.web_price .title { height:110px; background: rgb(230,0,18); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZTYwMDEyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk5MDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(-45deg, rgba(230,0,18,1) 0%, rgba(153,0,0,1) 100%); background: -webkit-linear-gradient(-45deg, rgba(230,0,18,1) 0%,rgba(153,0,0,1) 100%); background: linear-gradient(135deg, rgba(230,0,18,1) 0%,rgba(153,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e60012', endColorstr='#990000',GradientType=1 ); } .price_table .list .item .title h3 { width:100%; padding:0 20px; box-sizing:border-box; -webkit-box-sizing:border-box; display:table-cell; text-align:center; vertical-align:middle; color:#fff; font-size:20px; line-height:1.5; } .price_table .list .item .price_data { width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; display:block; border:solid 1px #dad9d6; border-top:0; padding:30px 0; text-align:center; min-height: 285px; background: rgb(255,255,255); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); } .price_table .list .item.web_price .price_data { padding-bottom:40px; } .price_table .list .item .price_data .item_id { font-size:30px; line-height:1; } .price_table .list .item .price_data .item_price { font-size:20px; line-height:1; } .price_table .list .item .price_data .item_price strong { font-size:46px; line-height:1; font-weight:bold; } .price_table .list .item .price_data .item_unit { font-size:16px; line-height:1; position:relative; padding-top:25px; } .price_table .list .item .price_data .item_unit + p { margin-top:0; } .price_table .list .item .price_data .item_unit strong { font-size:30px; color:#000; } .price_table .list .item .price_data .item_unit:after { position:absolute; content:' '; width:30px; height:1px; background:#9d9c95; top:0; left:0; right:0; margin:auto; } /* タブレット以下 */ @media screen and (max-width: 940px) { .price_table { padding:30px 0; width:100%; } .price_table .list .item .title { height:80px; } .price_table .list .item.web_price .title { height:90px; } .price_table .list .item .price_data { padding:20px 0; min-height:inherit; } .price_table .list .item.web_price .price_data { padding-bottom:30px; } .tabcontent .price_table .list .item .title br { display:block; } .price_table .list .item .title h3 { font-size:20px; line-height:1.2; } .price_table .list .item .price_data .item_id { font-size:25px; } .price_table .list .item .price_data .item_price { font-size:14px; } .price_table .list .item .price_data .item_price strong { font-size:30px; } .price_table .list .item .price_data .item_unit { font-size:14px; line-height:1; position:relative; padding-top:15px; } .price_table .list .item .price_data .item_unit strong { font-size:25px; color:#000; } .price_table .list .item .price_data .item_unit:after { width:20px; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { .price_table { padding:20px 0; } .price_table .list { width:100%;} .price_table .list .item { width:100%; margin-right:0%; float:none; } .price_table .list .item .title, .price_table .list .item.web_price .title { width:100%; text-align:center; vertical-align:middle; height:auto; padding:10px 0; } .price_table .list .item.web_price { margin-top:0; } .price_table .list .item .price_data, .price_table .list .item.web_price .price_data { padding:20px 0; } .tabcontent .price_table .list .item .title br { display:block; } .price_table .list .item .title h3 { font-size:16px; line-height:1.2; } .price_table .list .item .price_data .item_id { font-size:20px; } .price_table .list .item .price_data .item_price { font-size:14px; } .price_table .list .item .price_data .item_price strong { font-size:30px; } .price_table .list .item .price_data .item_unit { font-size:14px; line-height:1; position:relative; padding-top:15px; } .price_table .list .item .price_data .item_unit strong { font-size:20px; color:#000; } .price_table .list .item .price_data .item_unit:after { width:20px; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { } /* for SP max-width: 480px */ /******************* Bplats init set up *******************/ .footer_wrp { padding:0; } /* 20210727 修正のため追記 */ .footer_wrp .free_area { margin: 0; } /* /20210727 修正のため追記 */ .footer_wrp > .content_width { max-width:100%; width:100%; padding:0; } .footer { display:none; } .footer_wrp .copyright { clear:none !important; padding:0; /* 20210727 修正のため追記 */ font-size: 12px; height: auto; line-height: 1.2; /* /20210727 修正のため追記 */ } .list_media { width:100%; padding:0 70px; font-size:0; box-sizing:border-box; margin:50px 0; } .list_media li { width:calc(100% / 5 - 20px); display:inline-block; vertical-align:top; border:1px solid #dddddd; box-sizing:border-box; min-height:270px; margin:0 10px; padding:20px; } .list_media .title { border-bottom:3px solid #eeeeee; font-size:16px; padding-bottom:10px; } .list_media p { font-size:15px; margin-top:13px; } .list_media li { background:#eeeeee; } #section02 .accordion_header { display:none !important; } #section02 .tabaccordionbody { padding:0; } #section02 .tabaccordionbody * + h4 { margin-top:0; } #section02 .tabaccordionhead { display:none; margin-top:0 !important; } #section02 .tabcontent { padding-bottom:0 !important; width:100%; box-sizing:border-box; display:block !important; } #section02 .tabcontent br { display:none; } #section02 .tabcontent br.br_clear { display:block; } .bg_blue { background:none; } .price_table .list .item .price_data .item_unit span { display:block; font-weight:bold; font-size:24px; padding-bottom:10px; } /* 1280px*/ @media screen and (max-width: 1280px) { .bg_blue > .section_inner { padding:0; } } /* for tablet max-width: 1280px */ /* タブレット以下 */ @media screen and (min-width: 1160px) { .mid_width { width:100%; } #section02 .tabaccordionhead ul { text-align:center; } #section02 .tabaccordionhead ul li { display:inline-block; float:none; } .section_product_detail2 + #section02 .content_width { max-width:100%; } .section_product_detail2 + #section02 .content_width .fitimg { text-align:center; } .section_product_detail2 + #section02 .content_width .tabcontent { padding-bottom:100px; } .section_product_detail2 + #section02 .content_width .fitimg img { width:auto; margin:0 auto !important; } .section_product_detail2 + #section02 .content_width .fitimg .btn_prev { margin-bottom:60px; } .section_product_detail2 + #section02 .section_inner { padding:60px 0 0; } .section_product_detail2 + #section02 .content_width .tabaccordionbody { padding:80px 0 0; } .section_product_detail2 + #section02 .content_width .tabcontent { display:block !important; } } @media screen and (max-width: 1160px) { .sp_img { width:100% !important; } .blanklink { width:70%; margin:0 auto; float:none; } } /* for tablet max-width: 768px */ /* タブレット以下 */ @media screen and (max-width: 768px) { #section02 .delay > .content { padding:20px; } #section02 .tabcontent { padding:0 !important; } #section02 [class*="tabcontent"] { display:block !important; margin-top:30px; } #section02 .accordion_header + [class*="tabcontent"] { border:none; } #section02 [class*="tabcontent"] + .accordion_header { display:none; } #section02 [class*="tabcontent"] .section_inner { padding:0; } } /* for tablet max-width: 768px */ /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .free_area + .content_width { padding:20px; } #section02 .gridwrp_3 .grid_1 { margin:20px 0 0; } /* .sp_iframe { width:100%; } */ } /* for SP max-width: 480px */ /* tmp hack */ .section_product_detail2 .product_detail2 ul.charges_model li ul.charges_list { margin-left:0; } [id*="section0"].section_product_detail2 .column_left.product_detail2 .product_details .linkbtn .blanklink{transition: .1s all; padding: 0;} [id*="section0"].section_product_detail2 .column_left.product_detail2 .product_details .linkbtn .blanklink:hover{opacity: .6; } [id*="section0"].section_product_detail2 .column_left.product_detail2 .product_details .linkbtn .blanklink .link.btn_modal a{display: block; text-align: center;margin: 0;padding: 5px 15px 5px 30px;background-position: 10px 50%;} [id*="section0"].section_product_detail2 .column_left.product_detail2 .product_details .linkbtn .blanklink .link.btn_modal a:hover{color:#fff;} .btn-area .only-checkbox {box-sizing: border-box;-webkit-box-sizing: border-box;text-align: center;padding: 0 !important;background-color:transparent !important;border-radius: 0 !important;} .btn-area .only-checkbox a {color: #fff !important;text-decoration: none !important;padding: 5px 15px !important;border-radius: 3px !important;display: inline-block !important;border: solid 1px #ccc !important;background-color: rgba(0,0,0,0.7) !important;} .btn-area .only-checkbox a:hover{opacity:.6;} /*list*/ #section02 .section_product_detail2 .column_left.product_detail2 { width:100% !important; float:left; } @media only screen and (min-width: 1281px) { #section02 .section_product_detail2 .column_left .product_details { width:76%; } } /* for PC min-width: 1281px */ @media only screen and (max-width: 1160px) { .section_product_detail2 .column_left{ width: 100%; float: none; } .section_product_detail2 .column_right{ width: 100%; float: none; } .product_detail_page .section_product_detail2 div.option_left{ width: 100%; float: none; } .product_detail_page .column_right.option_right{ width: 100%; float: none; margin-top:20px; } } /* for PC min-width: 1160px */ /*detail*/ #section01 .section_product_detail2 .column_left.product_detail2 { width:78% !important; float:left; } #section01 .section_product_detail2 .column_left.product_detail2 .product_details { float: left; padding: 0 0 0 25px; width: 70%; } /*btn*/ .btn_detail { max-width:100%; } /* modules - box */ .box_detail1 { padding:25px 40px; background:#f6f6f6; } .box_detail1 ul { padding-left:15px; margin-top:10px; } .box_detail1 li { list-style:outside disc; padding-left:5px; } .box_detail1 li + li { margin-top:5px; } /* modules */ .change_img_pc { display:block !important; } .change_img_sp { display:none !important; } .br_fix { display:block !important; } .icon-pdf::before { content:""; display:inline-block; background: url(/image/icon-pdf) no-repeat; width:16px; height:16px; margin-right:6px; } .icon-window::after { content:""; display:inline-block; background: url(/image/icon-window) no-repeat bottom; width:16px; height:16px; margin-left:6px; position:relative; top:2px; } ol.list-style1 { padding-left:20px; margin:20px 0; background:#FAFAFA; padding:10px 20px 0 35px; } ol.list-style1 li { list-style: inside decimal; padding-left: -1.4em; text-indent: -1.4em; border-bottom:1px dotted #dddddd; padding:10px; } ol.list-style1 li em { font-weight:bold; font-size:18px; padding-bottom:5px; } ol.list-style1 li small { font-size:14px; } ol.list-style1 li:last-child { border:none; } ol.list-style1 li::before { display:none; } ul.list-style1 li { list-style:none; border-bottom:1px dotted #dddddd; padding:20px; } ul.list-style1 li::before { content:""; display:inline-block; width:12px; height:12px; background:#000000; border-radius:20px; } ol.list-style2 { width:100%; display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; margin-top:15px; } ol.list-style2 li { position:relative; width:25%; list-style:none; border:1px solid #eeeeee; margin:0 5px; padding:25px 25px 20px !important; box-sizing:border-box; border-radius:5px; } ol.list-style2 li em { display:block; font-weight:bold; font-size:18px; line-height:1.4; text-align:center; padding-bottom:10px; } ol.list-style2 li .number { text-align: center; display: table-cell; position: absolute; top: 0; left: 0; width: 30px; background: #0068b7; vertical-align: middle; color: #ffffff; line-height: 30px; } ol.list-style2 li img { width:100%; } ol.list-style2 li div { margin-bottom:15px; } ol.list-style2 li small { font-size:14px; margin-top:10px; } ol.list-style2 li::before { display:none; } .list-style3 { width:100%; margin:25px 0 60px; } .list-style3 li { position:relative; list-style:none; box-sizing:border-box; margin-bottom:30px; padding:20px 0 0 100px; counter-increment:x; /*font-size:16px; */ /* 20210731 修正のため追記 */ font-size:18px; /* /20210731 修正のため追記 */ line-height:1.8; border-top:1px solid #d3d3d3; } .list-style3 li .f_right { float:right; margin-left:20px; } .list-style3 li .f_left { float:left; } .list-style3 li div { margin-bottom:12px; background:#eeeeee; padding:5px 10px; font-size:18px; font-weight:bold; } .list-style3 li::before { content:counter(x); position:absolute; top:0; left:0; background:#0068b7; color:#FFFFFF; padding:3px 60px 3px 10px; } .list-style3 li::after { content:""; display:block; clear:both; } .list-style3 + p { text-align:center; margin-bottom:60px; padding-top:30px; border-top:1px solid #eeeeee; font-size:18px; } .list-style4 { width:100%; margin:25px 0 60px; } .list-style4 li { position:relative; list-style:none; box-sizing:border-box; margin-bottom:5px; padding:15px 0 3px 100px; counter-increment:x; font-size:16px; line-height:1.4; border-top:1px solid #d3d3d3; } .list-style4 li:before { display:none; } .list-style4 li div { margin-bottom:12px; background:#eeeeee; padding:5px 10px; font-size:18px; font-weight:bold; } .list-style4 li:last-child { border-bottom:1px solid #d3d3d3; padding-bottom:8px; } .list-style4 li a { word-break: break-all; } .list-style4 li small { font-size:12px; } .list_step { padding-bottom:60px; } .list_step li { padding:0 20px; box-sizing:border-box; } .list_step li::before { display:none; } .list_step h3 { margin:0; text-align:center; } .list_step em { display:block; width:100px; height:100px; margin:0 auto 30px; background:#a30b1a; color:#FFFFFF; border-radius:100px; ine-height:1.3; text-align:center; position:relative; } .list_step span { display:table-cell; width:100px; height:100px; vertical-align:middle; font-size:22px; } .list_step em::after { border-bottom:1px solid #a30b1a; content:""; position:absolute; left:0; top:50%; width:350%; } .list_step li:last-child em::after { display:none; } .list_step p { line-height:1.8; } .list-flow { margin-top:30px; } .list-flow li + li { margin-top:20px; } .list-flow li { display:table; width:100%; } .list-flow em, .list-flow p { display:table-cell; } .list-flow em { position:relative; background:#666666; padding:50px 10px; color:#FFFFFF; font-size:18px; width:13%; text-align:center; } .list-flow li em::after { content:""; position:absolute; bottom:-15px; left:0; width: 0; height: 0; border-style: solid; border-width:15px 65px 0 65px; border-color: #666666 transparent transparent transparent; } .list-flow li:last-child em::after { display:none; } .list-flow p { padding:0 30px; vertical-align:middle; background:#f1ece9; width:87%; } .list-flow p span { display:block; font-weight:bold; font-size:24px; margin-bottom:5px; } .list-qa { } .list-qa dt { margin-bottom:1px; } .list-qa dt, .list-qa dd { background:#EBEBEB; position:relative; padding:20px 20px 20px 65px; } .list-qa dd +dt { margin-top:20px; } .list-qa dt:before { content:"Q"; background:#666666; } .list-qa dd:before { content:"A"; background:#a30b1a; } .list-qa dt:before, .list-qa dd:before { position:absolute; top:10px; left:10px; padding:10px 15px; color:#FFFFFF; font-size:20px; } .table-style1 { margin-bottom:20px; } .table-style1 th { padding:10px 15px; font-size:12px; } .table-style1 th + th { padding:10px 15px; } .table-style1 td { text-align:left; background:#eeeeee; padding:10px 15px; } .table-style1 td + td { text-align:center; vertical-align:middle; background:none; } .table-style2 { margin-bottom:20px; } .table-style2 table { border-left:1px solid #dddddd; border-right:1px solid #dddddd; } .table-style2 th { padding:10px 15px; background:#eeeeee; } .table-style2 td { text-align:left; background:#ffffff; padding:10px 15px; vertical-align:middle; border-left:1px dotted #cccccc; } .table-style2 td strong { color:#B80003; } .table-style2 + .caption { text-align:right; font-size:12px !important; } .nav_pagenation { display:-webkit-flex; display:-ms-flex; display:flex; width:100%; max-width: 800px; margin:60px auto 0; text-align: center; } .nav_pagenation > * { letter-spacing:normal; } .prev_pager, .next_pager { display: block; width:45%; max-width: 600px; vertical-align:top; margin: 0 auto; box-sizing: border-box; } .next_pager a,.prev_pager a { display:block; text-align:left; border:1px solid #D4D4D4; background:#eeeeee; font-size:15px; position: relative; box-sizing: border-box; } .next_pager a, .prev_pager a { padding:15px 20px; transition:all,0.3s; } .next_pager a:hover,.prev_pager a:hover { background:#FFFFFF; border:1px solid #888888; } .prev_pager > a::before { content:"< PREV"; vertical-align:middle; margin-right:5px; font-size:12px; } .next_pager > a::after { content:"NEXT >"; vertical-align:middle; margin-left:5px; font-size:12px; } /* .prev_pager > a::before, .next_pager > a::after { content:"NEXT >"; vertical-align:middle; margin-right:5px; font-size:12px; } .prev_pager > a::before { content:"< PREV"; } */ .list_pager { max-width: 800px; text-align:center; margin: 40px auto 0; } .list_pager li { display:inline-block; margin:0 4px; } .list_pager li a {display:block;padding:4px 10px;border:1px solid #888888;text-decoration: none;} .list_pager li a:hover { background:#eeeeee; border:1px solid #eeeeee; } .list_pager .active { padding:4px 10px; background:#888888; color:#FFFFFF; } .lyt-col { width:100%; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; } .lyt-col.column1 li { width:100%; } .lyt-col.column2 li { width:50%; } .lyt-col.column3 li { width:calc(100% / 3); } .lyt-col.column4 li { width:25%; } /* 文字変換対応（HACK） */ #entriesTerms > h3 { font-size:0; } #entriesTerms > h3::after { content:"サイト利用規約確認"; font-size:20px; } .box + .checkbox span { display:none; } .box + .checkbox::after { content:"サイト利用規約に同意する"; vertical-align:middle; font-size:18px; } /* .submit_btns .caution { font-size:0px; } .submit_btns .caution::after { display:block !important; font-size:16px !important; content:"次へ進むには、サイト利用規約および個人情報保護ポリシーへの同意が必要です。"; } .headline > h2.title { display:none; } */ /* 文言調整 */ form.cart .headline_wrp .btn_left a { padding:5px 30px 5px 15px !important; } .btn_detail a::after { bottom: 1px; } #section01 .inline_module .checkbox-inline label span { font-size:0 !important; } #section01 .inline_module .checkbox-inline label span::after { content: "利用規約／サービス仕様書に同意する"; display: inline-block; font-size: 16px; margin-left: 9px; } div.product_set_name.caption label, label > span { font-size:18px; } .estimate .form .btn_detail a { font-size:20px; background:#a30b1a !important; padding:17px 0 !important; border: none; } .estimate .form .btn_detail a:hover { opacity:0.6; } /* 商品リストページ */ /* #section02 .content.content_cart table tbody tr:nth-child(1) { display:none; } */ .mod-btn-default, .mod-btn-default:link, .mod-btn-default:visited { background-color:#861718 !important; border-color:#861718 !important; cursor:pointer; } .mod-btn-default:hover, .mod-btn-default:active { background-color:#861718 !important; border-color:#861718 !important; opacity:0.6 !important; } .mod-badge-required[class*="mod-badge-"] { color:#861718 !important; border-color: #861718 !important; } /* div対応後変更予定 */ .box + .checkbox { text-align: center; font-size: 16px; margin:20px 0 0; } .box + .checkbox + h3 { border: 1px solid #dddddd; padding: 25px 30px 0; border-bottom: none; font-size:20px !important; } .box + .checkbox + h3::after { display:none; } .box + .checkbox + h3 + p { border: 1px solid #dddddd; padding: 5px 30px 25px; border-top: none; word-break:break-all; } .box + .checkbox + h3 + p + .checkbox { text-align: center; font-size: 16px; margin: 20px 0 30px; } /* btn矢印変更 */ /**/ .btn_detail.left a::after, .btn_detail.btn_prev a::after { position: absolute; content: ''; top: 0; bottom: 0; left: 10px; right:auto; margin: auto; border: solid 1px #fff; border-top-width: 1px; border-left-width: 1px; border-top-style: solid; border-left-style: solid; border-top-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); width: 10px; height: 10px; border-top: none; border-left: none; -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); } .btn_detail.right.btn_order a { border:1px solid #000; } .btn_detail.right.btn_order a:hover { background:#E70012; } /* マイページbtn & system */ .mypage_menu .link { margin:-30px 12px 0 0; text-align:right; } /*.delay .headline { margin-top:40px; }*/ .section_other .delay .headline { margin-top:0; } h2.product_name_title { padding-top:18px; padding-bottom:13px; } .product_detail2 ul.charges_model li ul.charges_list li { padding:0; } .checkbox-inline label { padding-top:10px; display:block; font-size:18px; } .orders_confirm.submit_btns .btn_detail.btn_next.check_agree a { font-size:18px; } .btn_detail.check_agree #btn { display:none; } .btn_detail.check_agree #btn + #btn { display:block } .btn_detail.check_agree.btn_deactive #btn { display:block; } .btn_detail.check_agree.btn_deactive #btn + #btn { display:none; cursor:pointer; } #password_policy p { font-size:12px !important; margin:10px 0; } #password_policy dl { padding-top:5px; border:none; border-top: solid 1px #ddd; } #password_policy dl::after { content:""; clear:both; display:block; } #password_policy dl dd,#password_policy dl dt { line-height:1.4; font-size:12px; margin:0; box-sizing:border-box; } #password_policy dl dt { width:15%; padding:5px 10px 0 0; } #password_policy dl dd { width:85%; padding:5px 0 0 0; } .btn-area { text-align:center; } form + #section04 { margin-top:0; } /* タブレット以下 */ @media screen and (max-width: 768px) { .lyt-col { width:100%; display:block; } .section_product_detail2 .column_left .product_details { width:100% !important; float:none; } .product_details .linkbtn .blanklink { width:100%; } .list_step em::after { display:none; } .list_step li { padding:0; box-sizing:border-box; } .lyt-col.column1 li, .lyt-col.column2 li, .lyt-col.column3 li, .lyt-col.column4 li { width:100%; } #password_policy dl dt,#password_policy dl dd { width:100%; float:none; } #password_policy dl dd { padding-top:0; } ol.list-style2 { flex-direction: column;} ol.list-style2 li {width: auto;flex-grow: 1;flex-shrink: 1;flex-basis: auto; } ol.list-style2 li > em + div {text-align: center;} ol.list-style2 li > em + div img {width: 100%;max-width: 300px;} .list-style3 { width:100%; margin:25px 0 20px; } .list-style3 li { padding:15px 0 0 40px; /*font-size:14px;*/ /* 20210728 修正のため追記 */ font-size:16px; /* /20210728 修正のため追記 */ margin-bottom:15px; } .list-style3 li img { width:100%; margin-bottom:6px; } .list-style3 li div { margin-bottom:8px; background:#d3d3d3; padding:3px 10px; font-size:14px; } .list-style3 li::before { content:counter(x); top:0; padding:6px 10px 3px; font-size:12px; } .list-style3 + p { margin-bottom:30px; padding-top:15px; font-size:14px; } .nav_pagenation { margin:30px auto 0; } .next_pager a,.prev_pager a { font-size:14px; } .next_pager a, .prev_pager a { padding:10px 15px; transition:all,0.3s; } .list_pager { margin: 25px auto 0; } .list_pager li a { font-size:12px; padding:3px 9px; } .list_pager .active { padding:3px 9px; } .table-style1, .table-style2 { width:100%; overflow-x:scroll; } .table-style1 td, .table-style2 td { font-size:12px; } .list-flow { margin-top:20px; } .list-flow li { position:relative; } .list-flow li + li { margin-top:20px; } .list-flow em { padding:30px 10px; font-size:14px; width:10%; } .list-flow li em::after { display:none; } .list-flow li::after { content:""; position:absolute; bottom:-15px; left:calc(50% - 65px); width: 0; height: 0; border-style: solid; border-width:15px 65px 0 65px; border-color: #666666 transparent transparent transparent; } .list-flow li:last-child::after { display:none; } .list-flow p { padding:15px 20px; width:90%; } .list-flow p span { display:block; font-weight:bold; font-size:18px; } /* modules - box */ .box_detail1 { padding:20px 15px 20px 20px; } .box_detail1 ul { padding-left:15px; margin-top:10px; } .box_detail1 li { font-size:12px; line-height:1.6; } .list-qa dt, .list-qa dd { padding:15px 10px 15px 50px; } .list-qa dt:before, .list-qa dd:before { font-size:16px; padding:5px 10px; } } /* SP向けレイアウトの指定：～480px */ @media only screen and (max-width: 480px) { .section_product_detail2 div.option_left, .section_product_detail2 div.option_right { width:100% !important; } .section_product_detail2 div.option_right { margin-top:0 !important; } #section04 .submit_3btns { width:100% !important; } .change_img_pc { display:none !important; } .change_img_sp { display:block !important; } .table-style1 th, .table-style1 td, .table-style2 th, .table-style2 td { display:table-cell !important; } .table-style2 th { width:18%; } .table-style2 td { width:25% !important; } .table-style2 td + td + td + td { width:60% !important; } .table-style2 table { width:600px; } } /* for SP max-width: 480px */ /********** Deatail window_detail_area **********/ #detail_overlay + .window_detail_area { display:none; } #detail_overlay.open + .window_detail_area { display:block; } #detail_overlay.open .window_detail_area_close { display:block; } #detail_overlay.open { position:fixed; top:0; left:0; width:100%; height:100%; display:block; background:rgba(0,0,0,0.8); box-sizing:border-box; z-index:102; cursor:pointer; } .window_detail_area { position:fixed; max-width:1000px; margin:auto; padding-bottom:50px; height:80%; overflow-y:scroll; background:#FFFFFF; z-index:103; top:0; left:10%; right:10%; bottom:0; } .window_detail_area article { max-width:1000px; margin:0 auto; } .window_detail_area section { max-width:850px; margin:0 auto; padding-bottom:50px; } .window_detail_area * { box-sizing:border-box; } .window_detail_area h1 { background:#129999; font-size:28px; padding:20px 0; margin:0; text-align:center; color:#ffffff; } .window_detail_area h2 { background:#129999; font-size:20px; padding:5px 15px; color:#ffffff; border-radius:5px; margin-top:45px; } .window_detail_area h3 { border-left:8px solid #129999; line-height:1.2; padding-left:10px; font-size:22px; margin:32px 10px 0; } .window_detail_area h4 { color:#129999; font-size:20px; margin:0; } .window_detail_area .hdg_caption { font-size:15px; margin:20px 10px 0 !important; color:#000000; font-weight:bold; } .window_detail_area [class*="lyt-col"] { max-width:830px; margin:20px auto 0; background:#fef3e7; display:-webkit-flex; display:flex; padding:20px 30px; font-size:14px; } .window_detail_area [class*="lyt-col"] img { width:100%; } .window_detail_area h2 + p { font-size:16px; margin:0 15px; } .window_detail_area p { margin:15px 10px 15px; } .window_detail_area p + h4 { margin:20px 10px 0 !important; } .window_detail_area h2 + p em { background:#861718; color:#FFFFFF; font-style:normal; padding:7px 10px 8px; margin-right:8px; } .window_detail_area .lyt-col2, .window_detail_area .lyt-col3 { -webkit-justify-content: space-between; justify-content: space-between; } .window_detail_area .lyt-col1 .ph { text-align:center; } .window_detail_area .lyt-col2 .col { width:350px; } .window_detail_area .lyt-col3 .col { width:220px; } .window_detail_area .arrow { margin-right:70px; position:relative; } .window_detail_area .arrow::before { content:"▶︎"; color:#129999; position:absolute; top:45%; right:-40px; } .window_detail_area .arrow2 { margin:0 30px; position:relative; text-align:center; } .window_detail_area .arrow2::after { content:"◀︎︎"; color:#129999; position:absolute; top:45%; left:-15px; } .window_detail_area .arrow2::before { content:"▶︎"; color:#129999; position:absolute; top:45%; right:-15px; } .window_detail_area .lyt-col3 .col { } .window_detail_area .lyt-col1 .col { text-align:center; } .window_detail_area ul { margin:10px 10px 0; border-top:1px dotted #CCCCCC; } .window_detail_area ul li { list-style:inside disc; border-bottom:1px dotted #CCCCCC; padding:7px 5px; } .window_detail_area .table-style2 { margin:15px 10px 0; } .window_detail_area .table-style2 + h4 { margin:20px 10px 0 !important; } .window_detail_area_close { display:none; } .window_detail_area_close { position:absolute; right:28px; top:10px; z-index:103; } .window_detail_area_close:before, .window_detail_area_close:after{content:''; height:4px; width:20px; display:block; background:#ffffff; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px; position:absolute; top:8px; left:0px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);} .window_detail_area_close:after{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);} @media screen and (max-width: 768px) { .window_detail_area { margin:auto 30px; } .window_detail_area section { max-width:850px; margin:0 auto; } .window_detail_area * { box-sizing:border-box; } .window_detail_area h1 { background:#129999; font-size:22px; padding:20px 0; margin:0; text-align:center; color:#ffffff; } .window_detail_area h2 { background:#129999; font-size:18px; padding:5px 15px; color:#ffffff; border-radius:5px; margin:30px 15px 0; } .window_detail_area h3 { border-left:8px solid #129999; line-height:1.2; padding-left:10px; font-size:16px; margin:25px 20px 0; } .window_detail_area h4 { color:#129999; font-size:16px; margin:0; } .window_detail_area [class*="lyt-col"] { max-width:830px; margin:15px 20px 0; background:#fef3e7; display:block; padding:20px 30px 10px; font-size:14px; } .window_detail_area [class*="lyt-col"] img { width:100%; } .window_detail_area h2 + p { font-size:14px; margin:15px 20px 0; } .window_detail_area h2 + p em { background:#861718; color:#FFFFFF; font-style:normal; padding:5px 10px 6px; display:block; margin:0 0 5px; } .window_detail_area .lyt-col2, .window_detail_area .lyt-col3 { -webkit-justify-content: space-between; justify-content: space-between; } .window_detail_area .lyt-col1 .ph { text-align:center; } .window_detail_area .lyt-col2 .col, .window_detail_area .lyt-col3 .col { width:100%; } .window_detail_area .arrow { margin-bottom:30px; position:relative; } .window_detail_area .arrow::before { content:"▼︎"; color:#129999; position:absolute; top:auto; right:50%; bottom:-30px; } .window_detail_area .arrow2 { margin:40px 0; position:relative; text-align:center; } .window_detail_area .arrow2::before { content:"▲︎"; color:#129999; position:absolute; top:-30px; right:50%; bottom:-30px; } .window_detail_area .arrow2::after { content:"︎︎▼"; color:#129999; position:absolute; top:auto; right:0; bottom:-30px; } .window_detail_area .lyt-col3 .col { } .window_detail_area .lyt-col1 .col { text-align:center; } } /*! Lity - v2.2.2 - 2017-07-17 * http://sorgalla.com/lity/ * Copyright (c) 2015-2017 Jan Sorgalla; Licensed MIT */ .lity { z-index: 9990; position: fixed; top: 0; right: 0; bottom: 0; left: 0; white-space: nowrap; background: #0b0b0b; background: rgba(0, 0, 0, 0.9); outline: none !important; opacity: 0; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .lity.lity-opened { opacity: 1; } .lity.lity-closed { opacity: 0; } .lity * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lity-wrap { z-index: 9990; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: center; outline: none !important; } .lity-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .lity-loader { z-index: 9991; color: #fff; position: absolute; top: 50%; margin-top: -0.8em; width: 100%; text-align: center; font-size: 14px; font-family: Arial, Helvetica, sans-serif; opacity: 0; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .lity-loading .lity-loader { opacity: 1; } .lity-container { z-index: 9992; position: relative; text-align: left; vertical-align: middle; display: inline-block; white-space: normal; max-width: 100%; max-height: 100%; outline: none !important; } .lity-content { z-index: 9993; width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease; } .lity-loading .lity-content, .lity-closed .lity-content { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .lity-content:after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; display: block; right: 0; width: auto; height: auto; z-index: -1; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } .lity-close { z-index: 9994; width: 35px; height: 35px; position: fixed; right: 0; top: 0; -webkit-appearance: none; cursor: pointer; text-decoration: none; text-align: center; padding: 0; color: #fff; font-style: normal; font-size: 35px; font-family: Arial, Baskerville, monospace; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); border: 0; background: none; outline: none; -webkit-box-shadow: none; box-shadow: none; } .lity-close::-moz-focus-inner { border: 0; padding: 0; } .lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited { text-decoration: none; text-align: center; padding: 0; color: #fff; font-style: normal; font-size: 35px; font-family: Arial, Baskerville, monospace; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); border: 0; background: none; outline: none; -webkit-box-shadow: none; box-shadow: none; } .lity-close:active { top: 1px; } /* Image */ .lity-image img { max-width: 100%; display: block; line-height: 0; border: 0; } /* iFrame */ .lity-iframe .lity-container, .lity-youtube .lity-container, .lity-vimeo .lity-container, .lity-facebookvideo .lity-container, .lity-googlemaps .lity-container { width: 100%; max-width: 964px; } .lity-iframe-container { width: 100%; height: 0; padding-top: 56.25%; overflow: auto; pointer-events: auto; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-overflow-scrolling: touch; } .lity-iframe-container iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } .lity-hide { display: none; } /** * * formpage　hack style * update : 2018-04-16 * responsive * */ .layout-section-default .layout-section__inner-wrap, .layout-section-for-reading-contents .layout-section__inner-wrap { min-width: auto !important; } @media screen and (max-width: 768px) { .layout-section-default .layout-section__inner-wrap, .layout-section-for-reading-contents .layout-section__inner-wrap { min-width: auto !important; } .layout-form-0001 > .layout-form__wrap, .layout-form-default > .layout-form__wrap { display: block !important; width: auto !important; max-width: 392px !important; margin: 0 auto !important; } .layout-form-0001 > .layout-form__wrap > .layout-form__group > .layout-form__label, .layout-form-default > .layout-form__wrap > .layout-form__group > .layout-form__label, .layout-form-0001 > .layout-form__wrap > .layout-form__group > .layout-form__form, .layout-form-default > .layout-form__wrap > .layout-form__group > .layout-form__form { display: block !important; } .layout-form-0001 > .layout-form__wrap > .layout-form__group > .layout-form__label, .layout-form-default > .layout-form__wrap > .layout-form__group > .layout-form__label { width: 100% !important; text-align: left !important; } .layout-form-0001 > .layout-form__wrap > .layout-form__group, .layout-form-default > .layout-form__wrap > .layout-form__group { display: block !important; height: auto !important; } .layout-form-0001 > .layout-form__wrap > .layout-form__group > .layout-form__form, .layout-form-default > .layout-form__wrap > .layout-form__group > .layout-form__form { width: 100% !important; border-left-width: 1px !important; } .mod-btn-backpage, .mod-btn-default, .mod-btn-default-sub, .mod-btn-form-group, .mod-btn-quiet, .mod-btn-quiet-sub, .mod-btn-spotlight { margin: 8px 0 !important; } } /** * * @FSAS Service Portal * update : 2018-06-07 * editor : kunishima * form : responsive * prefix : fsp- * */ /** スタイルハック ************************/ /* new icon */ .new_arrivals > *:first-child { position: relative; } .new_arrivals > *:first-child::before { content:"NEW"; display: inline-block; background: inherit; font-size: 14px; color: #fe0000; line-height: 1; vertical-align: middle; border:1px solid; margin-right: 5px; padding: .3em .3em .1em; } .section_wrp .fsp-article .content { background: transparent; } .section_wrp .case_detail .stepbox { padding:60px 0 0 0; } /** デフォルトスタイル ************************/ .section_wrp .fsp-article .content_wrp { background:top center / contain no-repeat; } .section_wrp .fsp-article .content_wrp p { font-size: 15px; line-height: 2.1; } .section_wrp .fsp-article .content_wrp img { max-width: 100%; } .section_wrp .fsp-article .fsp-lead { max-width:960px; margin:0 auto; padding:50px 50px 0; } .section_wrp .fsp-article .fsp-section h4 { max-width:960px; font-family: "メイリオ", Meiryo,"sans-serif"; font-size: 30px; margin:0 auto; } /*.section_wrp .fsp-article .fsp-section h4 ~ * { max-width:960px; margin:0 auto; padding-top:20px }*/ .section_wrp .fsp-article .fsp-note { text-indent:-2em; padding-left:2em; margin-top:35px; } .section_wrp .fsp-article .fsp-note li { font-size:12px; } .section_wrp .fsp-article .fsp-figure { text-align:center; /*margin: 45px 0 0;*/ } .section_wrp .fsp-article .fsp-figure + p { margin-top:35px; } .section_wrp .fsp-article .fsp-figure .txtlink { margin-top:15px !important; } .section_wrp .fsp-article .fsp-wraparound.cf > img.fsp-laft { float:left; margin-right:20px; margin-bottom:20px; } .section_wrp .fsp-article .fsp-wraparound.cf > img.fsp-right { float:right; margin-left:20px; margin-bottom:20px; } .section_wrp .fsp-article .fsp-section p:nth-of-type(1) { margin-top:0; } /* 世界の働き方 -----------------------------------------*/ .section_wrp #fsp-is_germany .content_wrp { background-image: url(/image/germany_bg); background-color: #fff; padding-bottom: 70px; } .section_wrp #fsp-is_germany .fsp-header .fsp-tl { display: -ms-flexbox; display: flex; flex:1 1 100%; flex-wrap: wrap; align-items: stretch; justify-content: center; width: 100%; position: relative; } .section_wrp #fsp-is_germany .fsp-header .fsp-tl > *{ flex-grow: 1; flex-shrink: 1; max-width: 100%; } .section_wrp #fsp-is_germany .fsp-header .fsp-tl h3 { display: inline-flex; background: #ac2330; align-items: center; justify-content: center; flex-basis: 40%; color: #fff; font-family: "メイリオ", Meiryo,"sans-serif"; text-align: center; font-size: 30px; padding: 1.4em 0; } .section_wrp #fsp-is_germany .fsp-figure { padding:0 40px; } .section_wrp #fsp-is_germany .fsp-header .fsp-tl > div { flex-basis: 60%; } .section_wrp #fsp-is_germany .fsp-section h4 { color: #a30b1a; line-height:1; border-bottom:1px solid #a30b1a; padding:0 0 20px; margin:0 40px; } .section_wrp #fsp-is_germany .fsp-section h4 span::before, .section_wrp #fsp-is_germany .fsp-section h4 span::after { display: inline-block; } .section_wrp #fsp-is_germany .fsp-section h4 span::before { content: "“"; } .section_wrp #fsp-is_germany .fsp-section h4 span::after { content: "”"; } .section_wrp #fsp-is_germany .fsp-section h4 span { font-weight:bold; } .section_wrp #fsp-is_germany .fsp-wraparound.cf { padding-top:25px; } .section_wrp #fsp-is_germany .fsp-wraparound.cf > img.fsp-laft, .section_wrp #fsp-is_germany .fsp-wraparound.cf > img.fsp-right { max-width:50%; padding-right: 1em; } .section_wrp .fsp-article .txtlink, .section_wrp .fsp-article .txtlink a { word-break: break-all; } .world_primary, .world_secondary { display:table-cell; } .world_primary { max-width:860px; } .world_secondary { max-width:320px; padding-right:40px; box-sizing:border-box; } .world_secondary p { line-height:1.6 !important; font-size:14px !important; } @media all and (max-width:1260px) { .section_wrp .fsp-article .fsp-lead { padding: 5% 5% 0; } .section_wrp .fsp-article .fsp-section h4 { margin: 0 5%; } .section_wrp #fsp-is_germany .fsp-header .fsp-tl h3 { font-size:2.4vw; } } @media all and (max-width:768px){ .section_wrp #fsp-is_germany .fsp-header .fsp-tl h3 { padding:25px 0 !important; } .section_wrp .fsp-article .content_wrp p { font-size: 14px; line-height: 2.1; } .section_wrp .fsp-article .txtlink, .section_wrp .fsp-article .txtlink a { font-size: 12px; } .section_wrp .fsp-article .fsp-section { padding: 5% 0 0; } .section_wrp .fsp-article .fsp-section h4 { font-size: 20px; line-height:1.6 !important; } .section_wrp .fsp-article .content_wrp { background-position: center 2%; background-size: 100% auto; } .section_wrp #fsp-is_germany .fsp-wraparound.cf { padding-top: 15px; } .section_wrp .fsp-article .fsp-figure { margin:1.5em 20px; } .section_wrp .fsp-article .fsp-note { margin-top:20px; } .section_wrp #fsp-is_germany .fsp-header .fsp-tl h3 { flex-basis:auto; font-size: 20px; padding: 4% 0; line-height: 1; } .section_wrp #fsp-is_germany .fsp-header .fsp-tl > div { flex-grow: 0; flex-shrink: 0; flex-basis:auto; } .section_wrp #fsp-is_germany .fsp-section h4 { padding: 0 0 0.5em; margin:0 20px; } /*.section_wrp .fsp-article .fsp-section h4 ~ * { padding: 10px 0 0; }*/ .section_wrp #fsp-is_germany .fsp-header .fsp-tl { -ms-flex-direction: column; flex-direction: column; } .section_wrp #fsp-is_germany .fsp-figure { padding:0 0; } .world_primary, .world_secondary { display:block; } .world_primary { max-width:870px; } .world_secondary { max-width:100%; padding:40px 40px 10px; background:#efefef; margin-top:30px; } .world_secondary p { line-height:1.6 !important; } .section_wrp #fsp-is_germany .content_wrp { padding-bottom:40px; } } @media all and (max-width:460px){ .section_wrp .case_detail .stepbox { padding:20px 0 0; } .section_wrp .fsp-article .fsp-section h4 { font-size: 18px; line-height:1.6 !important; } .section_wrp #fsp-is_germany .fsp-wraparound.cf > img.fsp-laft, .section_wrp #fsp-is_germany .fsp-wraparound.cf > img.fsp-right { max-width: 100%; margin-bottom: 1em; padding-right: 0; } .section_wrp .fsp-article.cf > img { max-width: 100%; padding-right: 0; margin-bottom: 1em; float: none; } .world_primary, .world_secondary { display:block; } .world_primary { max-width:870px; } .world_secondary { max-width:100%; padding:0 20px; background:#efefef; margin-top:30px; } .world_secondary p { line-height:1.6 !important; } } /* story column -----------------------------------------*/ .storyc_main { border:20px solid #65c2ab; padding:90px 70px; } .storyc_box { display:table; } .storyc_hdg, .storyc_profile { display:table-cell; vertical-align:top; } .storyc_hdg { padding-right:40px; width:50%; box-sizing:border-box; } .storyc_hdg h3 { font-size:32px; padding-top:20px; font-weight:bold; border-top:5px solid #65c2ab; } .storyc_hdg span { display:block; } .storyc_color1 { color:#65c2ab; font-weight:bold; } .storyc_num { font-size:22px; font-weight:bold; padding-top:5px; } .storyc_profile { background:#fafafa; width:50%; padding:20px 30px; box-sizing:border-box; } .storyc_profile p { font-size:12px; margin-top:10px; } .storyc_profile p span { font-size:16px; font-weight:bold; } .storyc_contents { padding:50px 50px 0; border-top:1px solid #65c2ab; margin-top:20px; } .storyc_contents p { margin-top:25px; line-height:2.5; } .storyc_contents img { width:100%; } @media all and (max-width:768px){ .storyc_main { border:10px solid #65c2ab; padding:50px 40px; } .storyc_box { display:table; } .storyc_hdg, .storyc_profile { display:block; width:100%; } .storyc_hdg { padding:0 0 20px; } .storyc_hdg h3 { font-size:28px; padding-top:20px; line-height:1.4; } .storyc_num { font-size:18px; } .storyc_profile { padding:15px 20px; } .storyc_profile p { font-size:12px; } .storyc_profile p span { font-size:14px; } .storyc_contents { padding:30px 0 0; } .storyc_contents p { margin-top:25px; } } @media all and (max-width:460px){ .storyc_main { padding:30px 20px; } .storyc_hdg { padding:0 0 10px; } .storyc_hdg h3 { font-size:20px; padding-top:15px; } .storyc_num { font-size:16px; } .storyc_profile { padding:10px 15px; } .storyc_contents { padding:30px 0 0; } .storyc_contents p { margin-top:15px; line-height:1.8; font-size:14px; } } .hdg_l1 { font-size:18px; padding:30px 0 10px; } @media all and (max-width:460px){ .hdg_l1 { font-size:14px; padding:10px 0 5px; } } /* seo column -----------------------------------------*/ .column_main { } .column_main .linkbox { padding:100px 0 20px; } .column_main .linkbox .title { font-size:28px; } .column_main p { font-size:16px; line-height:2; } .column_main > p { margin-top:15px; } .column_mv { margin:35px 0 30px; } .column_mv img { width:100%; } .column_hdg { background:#ac2330; padding:15px 20px 13px; color:#FFFFFF; font-size:30px; margin-top:50px; } .column_hdg + p { margin-top:30px; } .column_main p + p { margin-top:15px; } .column_hdg2 { font-size:20px; } .column_hdg3 { font-size:24px; margin:40px 0 -10px; border-left:8px solid #FF0000; padding-left:15px; } .column_hdg4 { font-size:18px; font-weight:bold; margin-top:25px; } .column_box { background:#f4f4e9; padding:20px 30px; margin:30px 0 10px; } .column_box + .caption, .column_box2 + .caption, .column_list_col + .caption { font-size:14px; text-align:right; margin-bottom:30px; } .column_box .caption { font-size:13px; } .column_box2 { background:#f6f6f6; padding:40px 50px; margin:30px 0 10px; } .column_box2 p { font-size:13px; } .column_img { text-align:center; margin:0 0 20px; } .column_img img { width:100%; } .column_img2 { text-align:center; margin:0 0 20px; } .column_img2 img { width:100%; } .column_list { margin-top:20px; padding:35px 40px; border:10px solid #eeeeee; } .column_list > * { font-size:16px; line-height:1.8; } .column_list dt { font-weight:bold; font-size:18px; } .column_list dd { margin-top:5px; } .column_list dd +dt { margin-top:20px; } .column_list2 { margin-top:20px; } .column_list2 li { list-style-type:none; list-style-position:inside; counter-increment:cnt; font-size:15px; line-height:1.8; text-indent:-2.5em; margin-left:35px; } .column_list2 li:before { display: marker; content: "（" counter(cnt) "）"; } .column_list2 li .column_img { margin-top:15px; } .column_list3 { margin:15px 0; } .column_list3 li { list-style:inside decimal; border-top:1px dotted #505050; padding:7px 10px; } .column_list3 li:last-child { border-bottom:1px dotted #505050; } .column_list_col { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; padding:30px 30px 20px; background:#F4F3E8; margin:25px 0; } .column_list_col dt { width:25%; font-weight:bold; line-height:1.6; } .column_list_col dd { width:75%; margin-bottom:10px; line-height:1.6; } .column_main { padding:0 50px 50px; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; } .column_primary { width:72%; } .column_secondary { width:24%; padding-top:50px; } .column_main .column_secondary p { font-size:14px; line-height:1.5; } @media all and (max-width:768px){ .column_main { padding:0 50px 80px; } .column_mv { margin:20px 0 30px; } .column_hdg { padding:10px 15px 8px; font-size:20px; margin-top:30px; } .column_hdg + p { margin-top:20px !important; } .column_hdg2 { font-size:16px; padding-top:5px; margin-bottom:10px; } .column_hdg3 { font-size:20px; margin:25px 0 -10px; } .column_hdg4 { font-size:16px; margin-top:20px; } .column_box { padding:20px 25px; margin:30px 0 10px; } .column_box + .caption, .column_box2 + .caption, .column_list_col + .caption { margin-top:15px; } .column_box2 { padding:20px 30px; margin:30px 0 10px; } .column_img { text-align:center; margin:0 0 15px; } .column_list { padding:10px 15px; } .column_list dt { font-size:16px; } .column_list dd { font-size:14px; } .column_list2 { margin-top:15px; } .column_list2 li { font-size:14px; line-height:1.6; margin-left:30px; } .column_list3 { margin-top:15px; } .column_main { padding:0 50px 50px; } .column_primary { width:100%; } .column_secondary { width:100%; padding-top:50px; } .column_main .column_secondary p { font-size:14px; line-height:1.5; } .column_main .linkbox { padding:20px 0 0; } } @media all and (max-width:460px){ .column_main p { font-size:14px; line-height:1.6; } .column_main > p { margin-top:10px; } .column_main { padding:0 20px 30px; } .column_mv { margin:20px 0 20px; } .column_box { padding:10px 15px; margin:20px 0 0; } .column_box + .caption, .column_box2 + .caption { font-size:12px; margin-bottom:15px; } .column_box2 { padding:20px 20px; margin:20px 0 10px; } .column_box2 p { font-size:11px; } .column_img { text-align:center; margin:0 0 15px; } .column_main .linkbox .title { font-size:18px; } .column_list_col { padding:20px; background:#F4F3E8; margin:20px 0; } .column_list_col dt { width:100%; font-weight:bold; line-height:1.6; } .column_list_col dd { width:100%; margin-bottom:10px; line-height:1.6; } } /* seo column ver2 2019.08.09 -----------------------------------------*/ .column2_mv { margin:35px 0 30px; } .column2_mv img { width:100%; } .column2_main { max-width:1240px; margin:50px auto 0; padding:0 0 50px; display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; } .column2_main p { font-size:16px; line-height:2; margin-top:15px; } .column2_inner { margin:0 10px; } .column2_link { margin:10px 15px 0; text-align:right; } .column2_primary { width:72%; border-right:1px solid #dfdfdf; padding-right:30px; box-sizing:border-box; } .column2_secondary { width:25.5%; padding-top:30px; font-size:14px; } .column2_secondary p { font-size:14px; line-height:1.5; } .column2_hdg { font-size:30px; margin:30px -30px 20px 0; border-bottom:4px solid #dfdfdf; padding:0 10px 10px 10px; } .column2_hdg2 { font-size:20px; margin:30px 0 5px; background:linear-gradient(to right,#eeeeee, #d6d6d6); padding:12px 15px; position:relative; } .column2_hdg2 em { padding:3px 10px; margin-right:15px; top:-3px; position:relative; background:#a30b1a; color:#FFFFFF; font-size:14px; text-align:center; } .column2_hdg3 { font-size:17px; margin-top:20px; color:#6f0f10; } .column2_list { background:#f2f1e4; margin-top:15px; padding:20px 25px; } .column2_list > li { } .column2_list > li + li { margin-top:15px; } .column2_list2 { margin-top:8px; } .column2_list2 > li { background:#f2f1e4; padding:8px 10px; } .column2_list2 > li + li { margin-top:3px; } .column2_listNum { margin-top:15px; } .column2_listNum > li { border-top:1px dotted #cccccc; padding:8px; } .column2_listNum > li:last-child { border-bottom:1px dotted #cccccc; } .column2_listNum .column2_hdg3 { margin:10px 5px 0; } .column2_listNum li p { font-size:14px; margin:10px 5px 5px; } .column2_listNum li p + p { margin-top:5px; } .column2_listNum .column2_list2 { margin:8px 5px 0; } .column2_img { width:100%; text-align:center; padding:20px 30px; margin:15px 0 10px; background:#EEEEEE; box-sizing:border-box; overflow-x:scroll; } .column2_img img { width:100%; } .column2_img .table-style1 { width:100%; margin-bottom:20px; } .column2_img .table-style1 th { width:7% !important; padding:10px; font-size:12px; } .column2_img .table-style1 th + th { padding:10px; border-left:1px solid #dddddd; } .column2_img .table-style1 td { padding:10px; font-size:12px; } .column2_main .linkbox .title { font-size: 28px; } .column2_secondary + .linkbox { padding:100px 50px 30px; } .column2_profile { padding:25px 30px; display:table; margin:30px 10px 0; box-sizing:border-box; background:#F5F4E9; } .column2_profile + .column2_profile { margin-top:15px; } .column2_profile > * { display:table-cell; vertical-align:top; } .column2_profile_ph { padding-right:30px; } .column2_profile_txt { padding-top:5px; } .column2_profile_txt h4 { font-size:16px; margin-bottom:4px; } .column2_profile_txt h4 span { font-size:18px; font-weight:bold; } .column2_profile_txt p { line-height:1.7; font-size:14px; } .column2_profile_txt p span { font-size:12px; } .column2_task::after { content:""; clear:both; display:block; } .column2_task_hdg { background:#a30b1a; color:#FFFFFF; display:inline-block; padding:4px 30px; margin:15px 0 0; } .column2_task_list { background:#eeeeee; padding:10px 35px; } .column2_task_list li { padding:10px; font-size:15px; line-height:1.8; } .column2_task_list li:nth-child(n+2) { border-top:1px solid #cbcbcb; } .column2_task_list li:before { content:""; border-left:8px solid #a30b1a; margin-right:15px; position:relative; top:-1px; } @media all and (max-width:768px){ .column2_main { margin:0 auto; } .column2_mv { margin:35px 0 30px; } .column2_mv img { width:100%; } .column2_inner { margin:0 5px; } .column2_hdg { font-size:24px; margin:30px 0 20px 0; border-bottom:4px solid #dfdfdf; padding:0 10px 10px 10px; } .column2_hdg2 { font-size:17px; margin:30px 0 5px; background:linear-gradient(to right,#eeeeee, #d6d6d6); padding:12px 20px; } .column2_hdg3 { font-size:15px; margin:20px 15px 0; color:#6f0f10; } .column2_primary { width:100%; border-right:1px solid #dfdfdf; padding:0 15px; } .column2_secondary { width:100%; padding:35px 20px 30px; } .column2_secondary p { font-size:14px; line-height:1.5; } .column2_list2 > li { background:#f2f1e4; padding:8px 10px; } .column2_listNum li p { line-height:1.6; } .column2_listNum > li { padding:8px 0; } .column2_img .table-style1 { margin-bottom:20px; } .column2_img .table-style1 th { width:7% !important; padding:10px; font-size:12px; } .column2_img .table-style1 th + th { padding:10px; border-left:1px solid #dddddd; } .column2_img .table-style1 td { padding:10px; font-size:12px; } .column2_main .linkbox .title { font-size: 20px; margin-top:10px; } .column2_secondary + .linkbox { padding:0 20px; } .column2_profile { padding:20px 20px; margin-top:30px; } .column2_list li { font-size:16px; } .column2_list p { font-size:14px; line-height:1.7; margin-top:5px; } .column2_task_hdg { padding:3px 30px; margin:20px 0 2px; } .column2_task_list { background:#eeeeee; padding:5px 15px; } .column2_task_list li { padding:7px 7px 7px 20px; font-size:14px; position:relative; } .column2_task_list li:nth-child(n+2) { border-top:1px solid #cbcbcb; } .column2_task_list li:before { content:""; margin-right:15px; top:18%; left:0; height:60%; position:absolute; } } @media all and (max-width:460px){ .column2_main { } .column2_main p { font-size:14px; line-height:1.8; } .column2_img { padding:20px; } .column2_img .table-style1 { margin:0 20px 0 0; } .column2_img .table-style1 th { background:#EEEEEE; } .column2_img .table-style1 td { background:#EEEEEE; padding:10px; font-size:12px; } .column2_profile > * { display:block; width:100%; padding:0; } .column2_profile_ph { padding:0 0 12px; text-align:center; } .column2_profile_ph img { width:60%; } .column2_profile_txt h4 { font-size:15px; margin-bottom:2px; } .column2_profile_txt p { font-size:12px; line-height:1.5; } } /* cp_member -------------------------------------------------*/ .cp_member_bg { background:#FFFFFF; } .cp_member_mv { max-width:960px; margin:20px auto 0; position:relative; } .cp_member_mv .inner { max-width:920px; height:300px;padding:10px auto ;position:relative; } .cp_member_mv .inner .img { max-width:420px;float: left; padding-left:40px; } .cp_member_mv .inner .img::after { content:"第3弾"; width:100px; height:100px; position:absolute; top:-30px; left:-7px; background:#a30b1a; text-align:center; color:#ffffff; border-radius:100px; font-size:22px; font-weight:bold; padding-top:34px; box-sizing:border-box; } .cp_member_mv .inner .txt { max-width:420px;float: right;padding-left:40px; } .cp_member_mv .inner .txt h2 { font-size:36px; line-height:1.4; margin-bottom:10px; } .cp_member_mv .inner .txt h2 span { font-size:25px; text-align:center; color:#a30b1a; font-weight:bold; display:block; border-top:2px solid #a30b1a; border-bottom:2px solid #a30b1a; padding:10px 0; margin-bottom:25px; line-height:1.3; } .cp_member_mv .inner .txt p { font-size:18px; line-height:1.9; } .cp_member_mv .cp_member_txt { max-width:800px; margin:0 auto; text-align:center; background:#ff0000; color:#FFFFFF; font-size:28px; padding:15px 20px; margin-top:60px; } .cp_member_mv .cp_member_txt span { color:#a30b1a; margin-right:20px; background:#FFFFFF; padding:0 15px; } .cp_member_mv + p { font-size:22px; text-align:center; line-height:1.8; margin-top:100px; } .cp_member_list { max-width:1000px; margin:30px auto 0; } .cp_member_list * { padding:20px; font-size:16px; } .cp_member_list th { font-weight:bold; } .cp_member_caption { background:#f6f6f6; max-width:1000px; margin:30px auto 0; padding:1px 50px 30px; box-sizing:border-box; } .cp_member_caption h4 { font-size:16px; text-align:left; } .cp_member_caption li { font-size:12px; text-align:left; } @media all and (max-width:768px){ .cp_member_bg { background-size:100% auto; } .cp_member_mv { margin:20px auto 0; } .cp_member_mv .inner { width:100%;padding:10px auto;height:430px } .cp_member_mv .inner .img { width:100%;;float:none; padding:0; } .cp_member_mv .inner .img::after{ content:none; } .cp_member_mv .inner .txt { width:100%;;float:none; padding:0 0 10px 0; } .cp_member_mv .inner .txt h2 { font-size:28px; margin:10px 0;} .cp_member_mv .inner .txt h2 span { font-size:16px; padding:5px; margin-bottom:15px; } .cp_member_mv .inner .txt p { font-size:14px; line-height:1.7; } .cp_member_mv .cp_member_txt { font-size:16px; padding:10px 10px; margin:20px 10px 0; } .cp_member_mv .cp_member_txt span { margin-right:10px;display:block; } .cp_member_mv + p { font-size:14px; line-height:1.8; margin:20px 0 0; } .cp_member_list { margin-top:20px; } .cp_member_list * { padding:5px 10px; font-size:14px; background:none !important; } .cp_member_list td { font-size:12px; } .cp_member_caption { margin:30px auto 0; padding:1px 20px 15px; } .cp_member_caption h4 { font-size:12px; } .cp_member_caption li { font-size:10px; line-height:1.8; } } /* CP BOOK -------------------------------------------------*/ .cp_book_bg { background:url(/image/cp_book_bg) no-repeat center top; } .cp_book_mv { max-width:960px; margin:60px auto 0; position:relative; } .cp_book_mv_inner { max-width:565px; padding:10px 0 0 395px; } .cp_book_mv_inner::before { content:""; background:url(/image/cp_book_img) no-repeat; width:272px; height:384px; position:absolute; top:0; left:44px; } .cp_book_mv_inner::after { content:"第2弾"; width:100px; height:100px; position:absolute; top:-30px; left:-7px; background:#a30b1a; text-align:center; color:#ffffff; border-radius:100px; font-size:22px; font-weight:bold; padding-top:34px; box-sizing:border-box; } .cp_book_mv_inner h2 { font-size:50px; line-height:1.4; margin-bottom:10px; } .cp_book_mv_inner h2 span { font-size:25px; text-align:center; color:#a30b1a; font-weight:bold; display:block; border-top:2px solid #a30b1a; border-bottom:2px solid #a30b1a; padding:10px 0; margin-bottom:25px; line-height:1.3; } .cp_book_mv_inner p { font-size:18px; line-height:1.9; } .cp_book_mv_inner strong { color:#ff0000; } .cp_book_txt { max-width:800px; margin:0 auto; text-align:center; background:#ff0000; color:#FFFFFF; font-size:28px; padding:15px 20px; margin-top:60px; } .cp_book_txt span { color:#a30b1a; margin-right:20px; background:#FFFFFF; padding:0 15px; } .cp_book_mv + p { font-size:22px; text-align:center; line-height:1.8; margin-top:100px; } .cp_color1 { color:#a30b1a; } .cp_color2 { color:#ff0000; } .cp_book_list { max-width:1000px; margin:30px auto 0; } .cp_book_list * { padding:20px; font-size:16px; } .cp_book_list th { font-weight:bold; } .cp_book_caption { background:#f6f6f6; max-width:1000px; margin:30px auto 0; padding:1px 50px 30px; box-sizing:border-box; } .cp_book_caption h4 { font-size:16px; text-align:left; } .cp_book_caption li { font-size:12px; text-align:left; } @media all and (max-width:768px){ .cp_book_bg { background-size:100% auto; } .cp_book_mv { margin:20px auto 0; } .cp_book_mv_inner { padding:10px 0 0 120px; } .cp_book_mv_inner::before { width:90px; top:25px; left:5px; background-size:100% auto; } .cp_book_mv_inner::after { content:"第2弾"; width:50px; height:50px; top:-10px; left:-8px; font-size:12px; padding-top:17px; } .cp_book_mv_inner h2 { font-size:22px; } .cp_book_mv_inner h2 span { font-size:16px; padding:5px; margin-bottom:15px; } .cp_book_mv_inner p { font-size:14px; line-height:1.7; } .cp_book_txt { font-size:16px; padding:10px 10px; margin:20px 10px 0; } .cp_book_txt span { margin-right:10px; } .cp_book_mv + p { font-size:14px; line-height:1.8; margin:20px 0 0; } .cp_book_list { margin-top:20px; } .cp_book_list * { padding:5px 10px; font-size:14px; background:none !important; } .cp_book_list td { font-size:12px; } .cp_book_caption { margin:30px auto 0; padding:1px 20px 15px; } .cp_book_caption h4 { font-size:12px; } .cp_book_caption li { font-size:10px; line-height:1.8; } } /* CP COFFEE -------------------------------------------------*/ .cp_coffee_bg { background:url(/image/cp_coffee_bg) no-repeat center top; } .cp_coffee_mv { max-width:1080px; margin:60px auto 0; position:relative; } .cp_coffee_icon1 { display:block; background:#ff0000; position:absolute; top:40px; left:20px; padding:3px 15px; color:#FFFFFF; font-weight:bold; } .cp_coffee_icon2 { width:100px; height:100px; position:absolute; top:0; right:70px; background:#a30b1a; text-align:center; color:#ffffff; border-radius:100px; font-size:20px; font-weight:bold; padding-top:26px; box-sizing:border-box; line-height:1.3; } .cp_coffee_mv_inner { max-width:630px; background:rgba(255,247,240,0.9); text-align:center; border-radius:1000px; padding:120px 0 60px; position:relative; box-sizing:border-box; margin:0 0 120px 450px; } .cp_coffee_mv_inner h2 { font-size:48px; line-height:1.3; margin-bottom:10px; color:#ff0000; } .cp_coffee_mv_inner h2 span { color:#a30b1a; display:block; } .cp_coffee_mv_inner p { font-size:18px; line-height:1.9; } .cp_coffee_mv_inner strong { color:#ff0000; } .cp_coffee_hdg { max-width:1000px; margin:0 auto; padding-left:80px; box-sizing:border-box; } .cp_coffee_box { max-width:1000px; margin:0 auto; box-sizing:border-box; text-align:left; margin-top:-20px; } .cp_coffee_box h4 { line-height:1.6; text-align:left; margin-bottom:10px; color:#a30b1a; position:relative; } .cp_coffee_box h4::before { content:""; position:absolute; background:url(/image/cp_coffee_img1); width:193px; height:198px; left:100px; top:-30px; } .cp_coffee_box h4, .cp_coffee_box p { padding:0 55px 0 325px; } .cp_coffee_box p { line-height:2; } .cp_coffee_img { margin-top:30px; } .cp_coffee_txt { max-width:800px; margin:0 auto; text-align:center; background:#ff0000; color:#FFFFFF; font-size:28px; padding:15px 20px; margin-top:50px; } .cp_coffee_txt span { color:#a30b1a; margin-right:20px; background:#FFFFFF; padding:0 15px; } .cp_coffee_txt_end { max-width:800px; margin:0 auto; text-align:center; background:#4b4b4b; color:#FFFFFF; font-size:28px; padding:15px 20px; margin-top:50px; } .cp_coffee_txt_end span { color:#4b4b4b; margin-right:20px; background:#FFFFFF; padding:0 15px; } .cp_coffee_list { max-width:1000px; margin:50px auto 0; } .cp_coffee_list * { padding:20px; font-size:16px; } .cp_coffee_list th { font-weight:bold; } .cp_coffee_caption { max-width:1000px; margin:30px auto 0; box-sizing:border-box; padding:0 20px; } .cp_coffee_caption h4 { font-size:16px; text-align:left; } .cp_coffee_caption li { font-size:12px; text-align:left; } @media all and (max-width:768px){ .cp_coffee_bg { background-size:100% auto; } .cp_coffee_mv { margin:20px auto 0; } .cp_coffee_icon1 { width:100%; top:0; left:0; padding:10px 0 !important; font-size:10px; line-height:1.4 !important; } .cp_coffee_icon2 { width:60px; height:60px; position:absolute; top:60px; right:-15px; background:#a30b1a; text-align:center; color:#ffffff; border-radius:100px; font-size:12px; font-weight:bold; padding-top:17px; box-sizing:border-box; line-height:1.3; } .cp_coffee_mv_inner { max-width:100%; border-radius:0; padding:70px 0 30px; position:relative; box-sizing:border-box; margin:0 auto 20px; } .cp_coffee_mv_inner h2 { font-size:25px; line-height:1.3; margin-bottom:10px; color:#ff0000; } .cp_coffee_mv_inner h2 span { color:#a30b1a; display:block; } .cp_coffee_mv_inner p { font-size:14px; line-height:1.6; padding:0 20px; } .cp_coffee_mv_inner strong { color:#ff0000; } .cp_coffee_hdg { padding:0 0 10px; text-align:center; } .cp_coffee_hdg img { width:65%; } .cp_coffee_box h4 { position:relative; font-size:16px; padding:0 100px 0 0; } .cp_coffee_box h4::before { content:""; position:absolute; background:url(/image/cp_coffee_img1); width:100px; height:100px; background-size:100% auto; left:auto; right:0px; top:0; } .cp_coffee_box p { padding:0; line-height:1.6; } .cp_coffee_img { margin-top:10px; } .cp_coffee_img img { width:100%; } .cp_coffee_txt { font-size:16px; padding:10px 10px; margin:20px 10px 0; } .cp_coffee_txt span { margin:0 0 10px; display:block; font-size:12px; } .cp_coffee_txt_end { font-size:16px; padding:10px 10px; margin:20px 10px 0; } .cp_coffee_txt_end span { margin:0 0 10px; display:block; font-size:12px; } .cp_book_mv + p { font-size:14px; line-height:1.8; margin:20px 0 0; } .cp_coffee_list { margin-top:20px; } .cp_coffee_list * { padding:5px 10px; font-size:14px; background:none !important; } .cp_coffee_list td { font-size:12px; } .cp_coffee_caption { margin:20px auto 0; padding:0 5px; } .cp_coffee_caption h4 { font-size:12px; } .cp_coffee_caption li { font-size:10px; line-height:1.8; } } #movie_wrap { position:relative; width:70%; padding-top:39.35%; margin:70px auto 100px; box-shadow:0 0 30px 0 rgba(0,0,0,0.3); } #movie_data { position: absolute; top:0; right:0; width:100% !important; height:100% !important; } .movielist[class*="lyt-column"] { display:flex; flex-wrap:wrap; flex-direction:row; } .movielist[class*="lyt-column"] li { box-sizing:border-box; } .movielist.lyt-column2 li { width:50%; } .movielist.lyt-column3 li { width:calc(100% / 3.1); } .movielist.lyt-column4 li { width:25%; } .movielist.lyt-column5 li { width:20%; } .movielist { margin-bottom:80px; } .movielist li { padding:30px 20px 0; } .movielist li a { text-decoration:none; } .movielist li a > * { color:#000000; } .movielist li a > h4 { font-size:16px; margin-bottom:7px; line-height:1.6; } .movielist li a > p { line-height:1.6; } .movie_hdg { text-align:center; font-size:30px; color:#FF0000; margin-bottom:10px; } .movie_thum { margin-bottom:15px; } .movie_thum img { width:100%; } @media all and (max-width:768px){ #movie_wrap { width:100%; padding-top:56.25%; margin:20px auto 40px; } .movielist[class*="lyt-column"] { display:; } .movielist[class*="lyt-column"] li { width:50%; } .movie_hdg { font-size:14px; margin-bottom:0; } .movielist { margin-bottom:30px; } .movielist li { padding:15px 10px 0; } .movielist li a > h4 { font-size:13px; margin-bottom:7px; } } @media all and (max-width:460px){ .movielist li a > p { display:none; } } /*=============================================================== fsas_chamo 2018.09.18 ===============================================================*/ img.image_border, img.operator_image { content: url('/image/operator'); } /*=============================================================== fsas_chamo 2019.01.28 ===============================================================*/ .bg_idejico { background:url(/image/product_idejico_bg) center top no-repeat; background-size:100% auto; } .bg_idejico .tabaccordionbody, .bg_idejico .pankuzu { background:none; } .bg_idejico .grid_1 { background:#FFFFFF; } .bg_idejico .product_menu { margin-top:0 !important; } .bg_idejico .hdg1 { font-size:20px; margin-top:30px; } .bg_idejico .section_inner { padding-bottom:0; } /*=============================================================== workcolumn 2019.02.14 ===============================================================*/ .bg_workc .section_inner { background:url(/image/workc_com_bg); padding:0; margin-top:30px; } .workc_wrap { max-width:1280px; margin:0 auto; padding:20px 70px 80px; background:#FFFFFF; box-sizing:border-box; display:table; } .workc_primary , .workc_secondary { display:table-cell; vertical-align:top; } .workc_primary { width:68.42%; padding-right:5.26%; } .workc_primary > p { margin-top:20px; line-height:2; font-size:16px; word-break:break-all; } .workc_primary p + p { margin-top:12px; } .workc_primary > p span { font-size:14px; } .workc_secondary { width:26.31%; padding-top:12px; } .workc_hdg { font-size:36px; border-bottom:1px solid #d2d2d2; padding-bottom:10px; } .workc_hdg span { font-size:30px; font-weight:bold; } .workc_word { font-style:italic; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color:#888888; font-size:16px; line-height:1.9; margin-bottom:15px; } .workc_lead { background:#f4f4ef; padding:20px 30px; } .workc_lead p { font-size:15px; line-height:1.9 !important; } p + .workc_lead, h2 + .workc_lead { margin-top:30px; } .workc_primary p.workc_caption { font-size:14px; } .workc_primary p.workc_caption + .workc_caption { margin-top:6px; } .workc_tl { margin-top:55px; font-size:28px; border-top:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; padding:15px 0 10px; line-height:normal; } .workc_tl2 { margin-top:40px; font-size:22px; } .workc_ph { margin-top:55px; } .workc_ph img { width:100%; } .workc_ph span { display:block; margin-top:10px; text-align:right; } p + .workc_ph { margin-top:25px; } .workc_profile { border:10px solid #e5e5e5; padding:25px 40px; display:table; margin-top:50px; } .workc_profile + .workc_profile { margin-top:20px; } .workc_profile > * { display:table-cell; vertical-align:top; } .workc_profile_ph { padding-right:30px; } .workc_profile_txt { padding-top:5px; } .workc_profile_txt h4 { font-size:18px; margin-bottom:4px; } .workc_profile_txt p { line-height:1.7; } .workc_list { margin:20px 0 25px; border-bottom:1px dotted #D9D9D9; } .workc_list li { list-style:disc inside; font-size:16px; padding:15px 10px 12px; border-top:1px dotted #D9D9D9; } .workc_list p { font-size:16px; line-height:1.8; margin-top:7px; } .workc_list2 { margin:20px 0 10px; } .workc_list2 li { font-size:16px; padding:12px 18px 10px; background:#e3eef8; border-radius:5px; } .workc_list2 li + li { margin-top:1px; background:#fbf7ee; } .workc_list3 { margin:20px 0 10px; } .workc_list3 li { font-size:16px; padding:12px 18px 10px; margin-bottom:5px; background:#e3eef8; border-radius:5px; } .workc_list3 li { list-style:inside decimal; } .workc_comment { margin:30px 10px 30px 0; padding-left:75px; position:relative; } .workc_comment em { display:block; position:absolute; background:url(/image/workc_icon) center top no-repeat; left:5px; top:10px; padding-top:55px; text-align:center; font-size:12px; } .workc_comment_inner { border-radius:7px; background:#fffeeb; border:1px solid #a3a3a3; display:block; padding:20px 30px; position:relative; } .workc_comment_inner::before { content:""; position:absolute; top:30px; left:-24px; margin-top:-13px; border:13px solid transparent; border-right:12px solid #fffeeb; z-index:2; } .workc_comment_inner::after { content:""; position:absolute; top:30px; left:-28px; margin-top:-14px; border:14px solid transparent; border-right:14px solid #a3a3a3; z-index:1; } .workc_comment_inner p { line-height:1.8; font-size:16px; } .workc_comment2 { margin:30px 10px 30px 0; padding-left:75px; position:relative; } .workc_comment2 em { display:block; position:absolute; background:url(/image/workc_icon) center top no-repeat; left:5px; top:10px; padding-top:55px; text-align:center; font-size:12px; } .workc_comment2_inner { border-radius:7px; background:#E8E8E8; display:block; padding:20px 30px; position:relative; } .workc_comment2_inner::before { content:""; position:absolute; top:30px; left:-24px; margin-top:-13px; border:13px solid transparent; border-right:12px solid #E8E8E8; z-index:2; } .workc_comment2_inner p { line-height:1.8; font-size:16px; } @media all and (max-width:768px){ .workc_wrap { padding:20px 20px; background:#FFFFFF; box-sizing:border-box; display:table; } .workc_primary , .workc_secondary { display:block; width:100%; padding:0; } .workc_primary > p { margin-top:15px; line-height:1.8; font-size:14px; } .workc_primary > p span { font-size:12px; } .workc_hdg { font-size:22px; border-bottom:1px solid #d2d2d2; padding-bottom:10px; } .workc_hdg span { font-size:18px; } .workc_word { line-height:1.8; margin-bottom:15px; } .workc_lead { background:#f4f4ef; padding:15px 20px; } .workc_lead p { font-size:14px; line-height:1.8 !important; } p + .workc_lead, h2 + .workc_lead { margin-top:20px; } .workc_ph { margin-top:30px; } .workc_tl { margin-top:30px; font-size:20px; padding:10px 0 5px; text-align:center; } .workc_tl2 { margin-top:20px; font-size:18px; } .workc_profile { border:10px solid #e5e5e5; padding:25px 40px; display:table; margin:30px 0 ; } .workc_profile { border:5px solid #e5e5e5; padding:15px 20px; margin-top:30px; } .workc_list li { font-size:16px; } .workc_list p { font-size:14px; line-height:1.7; margin-top:5px; } } @media all and (max-width:460px){ .workc_profile > * { display:block; width:100%; padding:0; } .workc_profile_ph { padding:0 0 12px; text-align:center; } .workc_profile_ph img { width:60%; } .workc_profile_txt h4 { font-size:15px; margin-bottom:2px; } .workc_profile_txt p { font-size:12px; line-height:1.5; } .workc_list li { font-size:16px; padding:15px 10px 8px; } .workc_list p { font-size:14px; line-height:1.7; margin-top:5px; } .workc_comment { margin:15px 0 20px; padding-left:55px; } .workc_comment em { background:url(/image/workc_icon) center top no-repeat; background-size:45% auto; top:10px; padding-top:30px; font-size:10px; } .workc_comment_inner { padding:13px 15px; } .workc_comment_inner::before { top:25px; left:-18px; margin-top:-10px; border:8px solid transparent; border-right:10px solid #fffeeb; } .workc_comment_inner::after { top:25px; left:-22px; margin-top:-12px; border:10px solid transparent; border-right:12px solid #a3a3a3; } .workc_comment_inner p { font-size:14px; } .workc_primary p.workc_caption { font-size:12px; } } .gb_s_navigation h4 { background:#861718; color:#FFFFFF; text-align:center; padding:10px; margin-bottom:20px; border-radius:5px; } .gb_s_navigation ul { margin-bottom:30px; } .gb_s_navigation ul li { display:table; margin-bottom:10px; } .gb_s_navigation ul li a { color:#000000; } .gb_s_navigation ul li a:hover p { text-decoration:underline !important; } .gb_s_navigation ul li .ph, .gb_s_navigation ul li p { display:table-cell; vertical-align:top; } .gb_s_navigation ul li .ph { width:120px; padding-right:20px; } .gb_s_navigation ul li img { width:100%; border:1px solid #dddddd; } .gb_s_navigation ul li p { padding-top:10px; } .gb_s_navigation ul li .ph + p { padding-top:0; } @media all and (max-width:460px){ .gb_s_navigation { background:#efefef; margin:0 -20px; padding:25px 25px 5px; } .gb_s_navigation h4 { padding:7px; margin-bottom:15px; } .gb_s_navigation ul { margin-bottom:20px; } .gb_s_navigation ul li { margin-bottom:5px; } .gb_s_navigation ul li p { font-size:12px; } } /*=============================================================== event 2019.05.14 ===============================================================*/ .event-hdg { background:#4b4b4b; color:#FFFFFF; font-size:22px; padding:25px 0; text-align:center; } .event-mv { background:url(/image/event_bg) center; } .event-contens { max-width:1020px; margin:0 auto; padding:54px 0 57px; } .event-contens-hdg { margin-bottom:44px; } .event-price { background:#f0f0f0; padding:70px 0; } .event-price-inner { max-width:1120px; margin:0 auto; } .event-price-col { float:left; width:61.60%; background:#FFFFFF; border-radius:10px; box-shadow:0px 1px 5px 0px #b4b4b4; padding:20px; box-sizing:border-box; text-align:center; } .event-price-col + .event-price-col { float:right; width:32.14%; background:#ff0000; padding-bottom:36px; position:relative; } .event-price-col + .event-price-col::after { position:absolute; top:42%; left:-12%; content:url(/image/event_arrow); z-index:1; overflow:visible; } .event-price-col h4 { font-size:22px; padding:10px 0 15px; } .event-price-col + .event-price-col h4 { font-size:28px; padding:23px 0 14px; background:#FFFFFF; margin:-20px -20px 0; color:#ff0000; box-shadow:0 6px 5px -3px #c80606; border-radius: 10px 10px 0 0; } .event-price-col + .event-price-col p { font-size:30px; color:#FFFFFF; font-weight:bold; line-height:1.3; } .event-price-col + .event-price-col em { font-size:32px; font-weight:bold; display:block; background:#FFFFFF; color:#FF0000; margin:40px 0 15px; line-height:normal; } .event-price-col + .event-price-col span { font-size:50px; font-weight:bold; } .event-price-area { background:#f0f0f0; width:48.5%; float:left; padding-bottom:30px; border-radius:8px; } .event-price-area + .event-price-area { float:right; } .event-price-area h5 { font-size:20px; font-weight:bold; border-bottom:1px dotted #cbcbcb; padding:25px 0 15px; margin-bottom:30px; line-height:normal; box-sizing:border-box; } .event-price-area h5 em { font-size:18px; color:#FF0000; font-weight:bold; } .event-price-area p { font-size:26px; font-weight:bold; } .event-price-area p span { font-size:36px; color:#FF0000; font-weight:bold; } .event-price-col + p { font-size:20px; clear:both; font-weight:bold; max-width:850px; margin:0 auto; padding:30px 0 0 72px; box-sizing:border-box; position:relative; } .event-price-col + p::before { content:url(/image/event_icon); position:absolute; left:0; top:30px; } .event-price-col + p * { font-weight:bold; } .event-price-col + p span { font-size:20px; text-decoration:underline; } .event-price-col + p em { color:#FF0000; } .event-price-col + p .event-small { font-size:16px; text-decoration:none; display:block; } .event-code { font-size:20px; clear:both; font-weight:bold; max-width:850px; margin:0 auto; padding:30px 0 0 72px; box-sizing:border-box; position:relative;} .event-code .left { width:30%; color:#FFFFFF;padding:20px;; background:#4b4b4b;display: table-cell;} .event-code .right { width:70%; background:#FFFFFF;padding:20px;display: table-cell;} /* .event-cv { background:#4b4b4b; text-align:center; color:#FFFFFF; padding:50px 0; } .event-cv p { font-size:24px; display:block; margin-bottom:10px; } .event-cv a { display:block; background:#ff0000; color:#FFFFFF; text-decoration:none; font-size:26px; max-width:740px; margin:0 auto; padding:26px 15px; box-sizing:border-box; position:relative; } .event-cv a::after { position:absolute; top:40%; right:5%; content:"▶︎"; font-size:16px; } .event-cv a:hover { background:#000000; color:#ffffff; } */ .event-cv { background:#4b4b4b; text-align:center; color:#FFFFFF; padding:50px 0; } .event-cv p { font-size:18px; display:block; margin-bottom:10px;} .event-cv p a { color:#FFFFFF; } .event-cv p a:hover { color:#000000 } .event-cv div { font-size:26px;display:inline; } .event-cv div a { width:25%;text-decoration:none; color:#FFFFFF; display:inline-block; margin:0 5px 10px 0;padding:26px 15px;background:#ff0000; box-sizing:border-box;position:relative;} .event-cv div a:hover { background:#000000; color:#ffffff; } .event-info { max-width:930px; margin:50px auto 20px; } .event-info h4 { font-size:20px; border-bottom:1px solid #3c3c35; padding-bottom:10px; margin-bottom:15px; } .event-info li { font-size:13px; margin-bottom:5px; } .event-info .title { width:100%;padding: .25em 0 .25em .75em; margin: 0 0 0 5px; font-size:18px; font-weight:bold;text-align:left; border-left: solid 5px #ff0000;background:#fff;color:#000000; } .event-info ol + .title { margin-top:40px; } @media all and (max-width:768px){ .event-wrap img { width:100%; } .event-hdg { font-size:16px; padding:17px; text-align:center; } .event-mv { background:url(/image/event_bg_sp) center top; background-size:100% auto; } .event-contens { padding:40px 13% 50px; text-align:center; } .event-contens-hdg { margin:0 0 94%; } .event-price { padding:30px 30px; } .event-price-col { float:none; width:100%; padding:20px; } .event-price-col::after { display:block; content:""; clear:both; } .event-price-col + .event-price-col { float:none; width:100%; margin-top:40px; } .event-price-col + .event-price-col::after { top:-17%; left:48%; content:url(/image/event_arrow); transform:rotate(90deg); } .event-price-col + p { font-size:14px; clear:both; font-weight:bold; max-width:520px; margin:0 auto; padding:30px 0 0 55px; box-sizing:border-box; position:relative; } .event-price-col + p::before { content:url(/image/event_icon); position:absolute; left:0; top:25px; transform:scale(0.8,0.8); } .event-price-col + p span { font-size:14px; } .event-price-col + p .event-small { font-size:12px; text-decoration:none; display:block; } } @media all and (max-width:460px){ .event-price { padding:20px 20px; } .event-price-col h4 { font-size:16px; padding:10px 0 15px; } .event-price-col { padding:10px; box-sizing:border-box; text-align:center; } .event-price-area { float:none; width:100%; padding-bottom:10px; } .event-price-area + .event-price-area { float:none; width:100%; margin-top:10px; } .event-price-area h5 { font-size:16px; padding:15px 0 5px; margin-bottom:10px; } .event-price-area h5 em { font-size:14px; } .event-price-area p { font-size:18px; font-weight:bold; line-height:1.3; } .event-price-area p span { font-size:28px; color:#FF0000; font-weight:bold; } .event-price-col + .event-price-col { padding-bottom:16px; } .event-price-col + .event-price-col h4 { font-size:22px; padding:20px 0 5px; background:#FFFFFF; margin:-10px -10px 0; color:#ff0000; box-shadow:none; } .event-price-col + .event-price-col p { font-size:24px; color:#FFFFFF; font-weight:bold; line-height:1.3; } .event-price-col + .event-price-col em { font-size:18px; margin:20px 30px 10px; line-height:normal; } .event-price-col + .event-price-col span { font-size:34px; font-weight:bold; } .event-price-col + .event-price-col::after { top:-27%; left:45%; content:url(/image/event_arrow); transform:scale(1,0.6) rotate(90deg); } .event-price-col + p { font-size:12px; padding:20px 0 0 55px; } .event-price-col + p::before { transform:scale(0.8,0.8); } .event-price-col + p span { font-size:12px; } .event-price-col + p .event-small { font-size:10px; } .event-code { width:100%; margin:0 auto;display:inline; } .event-code .left { display:block; width:90%;padding:12px; text-align:center;} .event-code .right {display:block; width:90%;padding:12px; text-align:center;} .event-cv { padding:25px 20px; } .event-cv p { font-size:14px; } /*.event-cv a { font-size:20px; max-width:740px; margin:0 auto; padding:20px 50px 20px 20px; box-sizing:border-box; position:relative; }*/ .event-cv div { font-size:20px; } .event-cv div a { width:100%;margin:0 5px 10px 0;padding:20px 5px;} .event-info { max-width:930px; margin:30px 20px 20px; } .event-info h4 { font-size:16px; border-bottom:1px solid #3c3c35; padding-bottom:10px; margin-bottom:15px; } .event-info li { font-size:11px; margin-bottom:5px; } .event-info .title { font-size:16px; } } /*=============================================================== Forum2019 2019.05.31 ===============================================================*/ .eventreport_forum .mv { position:relative; } .eventreport_forum .mv h1 { position:absolute; bottom:0; left:0; text-align:center; padding:30px 20px; line-height:1.5; width:100%; background:rgba(255,255,255,0.9); font-size:32px; box-sizing:border-box; } .eventreport_forum .mv h1 span { display:block; font-size:24px; color:#a30b1a; } .eventreport_forum .mv img { width:100%; } .eventreport_forum .lead { background:#a30b1a; color:#FFFFFF; padding:50px 20px; } .eventreport_forum .lead_inner { max-width:1000px; margin:0 auto; } .eventreport_forum p { font-size:16px; line-height:1.8; } .eventreport_forum p + p { margin-top:15px; } .eventreport_forum_contents { background:#da1d1d; padding:60px 20px; } .eventreport_forum_contents_inner { background:#ffffff; max-width:1180px; margin:0 auto; padding:10px 85px 0; box-sizing:border-box; } .eventreport_forum_contents_inner h3 { background:#a30b1a; padding:15px 20px; margin:50px -20px 30px; color:#FFFFFF; font-size:20px; } .eventreport_forum_contents_inner h4 { font-size:18px; margin-bottom:20px; } .eventreport_forum_contents_inner h5 { font-size:18px; margin-bottom:15px; font-weight:bold; } .eventreport_forum_contents_inner p { font-size:16px; line-height:1.8; } .eventreport_forum_contents_inner .fitimg+ p, .eventreport_forum_contents_inner p + p { margin-top:15px; } .eventreport_forum_contents_inner .col2 { display:table; } .eventreport_forum_contents_inner .col2 > * { display:table-cell; width:50%; vertical-align:top; } .eventreport_forum_contents_inner .col2.bg_gray { padding:30px 35px; margin:30px 0; } .eventreport_forum_contents_inner .col2 img { width:100%; } .eventreport_forum_contents_inner .txt_left { padding-right:20px; } .eventreport_forum_list li { position:relative; padding:35px 40px 35px 100px; background:#ededed; margin-top:20px; } .eventreport_forum_list li h4 { color:#a30b1a; font-size:22px; } .eventreport_forum_list em { position:absolute; top:30px; left:30px; background:#a30b1a; display:block; color:#FFFFFF; padding:10px 15px; font-size:18px; font-weight:bold; } .eventreport_forum_contents_inner .summary { background:#eeeeee; margin:40px -85px 30px; padding:1px 85px 40px; } .eventreport_forum_contents_inner .summary h3 { background:#4b4b4b; padding:10px 20px; } .eventreport_forum_contents_inner .case_detail .linkbox { padding:50px 0px 70px; } @media all and (max-width:768px){ .eventreport_forum .mv { } .eventreport_forum .mv h1 { position:static; padding:15px 15px; font-size:20px; line-height:1.4; } .eventreport_forum .mv h1 span { font-size:14px; } .eventreport_forum .lead { padding:25px 20px; } .eventreport_forum .lead_inner { max-width:1000px; margin:0 auto; } .eventreport_forum p { font-size:14px; line-height:1.6; } .eventreport_forum p + p { margin-top:15px; } .eventreport_forum_contents { padding:10px; } .eventreport_forum_contents_inner { padding:1px 25px 0; } .eventreport_forum_contents_inner h3 { background:#a30b1a; padding:10px 15px; margin:30px 0 20px; color:#FFFFFF; font-size:16px; } .eventreport_forum_contents_inner h4 { font-size:16px; margin-bottom:15px; } .eventreport_forum_contents_inner h5 { font-size:16px; margin-bottom:10px; } .eventreport_forum_contents_inner p { font-size:14px; line-height:1.8; } .eventreport_forum_contents_inner .fitimg+ p, .eventreport_forum_contents_inner p + p { margin:10px 0 0 !important; } .eventreport_forum_contents_inner .col2 { display:block; } .eventreport_forum_contents_inner .col2 > * { display:block; width:100%; } .eventreport_forum_contents_inner .col2 > *+* { margin-top:15px; } .eventreport_forum_contents_inner .col2.bg_gray { padding:20px 20px; margin:20px 0; } .eventreport_forum_contents_inner .col2 img { width:100%; } .eventreport_forum_contents_inner .txt_left { padding-right:0; } .eventreport_forum_list li { padding:20px 30px 20px 45px; margin-top:10px; } .eventreport_forum_list li h4 { color:#a30b1a; font-size:18px; } .eventreport_forum_list em { top:0; left:0; padding:5px 10px; font-size:16px; } .eventreport_forum_contents_inner .summary { margin:30px -25px 0; padding:1px 25px 20px; } .eventreport_forum_contents_inner .summary h3 { background:#4b4b4b; padding:10px 20px; } .eventreport_forum_contents_inner .case_detail .linkbox { padding:20px 0px 30px; } } /*=============================================================== cp_timecreator 2019.06.06 ===============================================================*/ .cp_timecreator-hdg { background:#ffffff; color:#da0b0b; text-align:center; padding:25px; font-size:30px; } .cp_timecreator-mv { background:url(../../image/cp_timecreator_bg) no-repeat; background-size:cover; padding:70px 0; } .cp_timecreator-mv-inner { position:relative; width:1300px; margin:0 auto; padding:0 0 44px 650px; box-sizing:border-box; } .cp_timecreator-mv-inner * { position:relative; z-index:2; } .cp_timecreator-mv-price { margin:30px 0 10px; } .cp_timecreator-mv-img { position:absolute; left:0; top:0; z-index:1; } .cp_timecreator-mv-cv { max-width:940px; margin:0 auto 20px; } .cp_timecreator-mv-cv::after { display:block; clear:both; content:""; } .cp_timecreator-mv-cv li { width:48%; float:right; } .cp_timecreator-mv-cv li a { display:block; position:relative; background:#da0b0b; text-align:center; color:#FFFFFF; text-decoration:none; padding:30px 20px; font-size:24px; border-radius:8px; } .cp_timecreator-mv-cv li a::after { position:absolute; top:37%; right:20px; content:"▶︎"; font-size:16px; } .cp_timecreator-mv-cv li:first-child { float:left; } .cp_timecreator-mv-cv li a:hover { opacity:0.6; background:#000000; } .cp_timecreator-mv-link { text-align:center; } .cp_timecreator-mv-link a { color:#FFFFFF; font-size:18px;} .cp_timecreator-mv-link a:hover { color:#da0b0b; } @media all and (max-width:768px){ .cp_timecreator-hdg { padding:15px 10px; font-size:15px; border-top:1px solid #cccccc; } .cp_timecreator-mv { padding:20px 0; } .cp_timecreator-mv-inner { position:relative; width:100%; margin:0 auto; padding:0 15px 15px; box-sizing:border-box; } .cp_timecreator-mv-inner * { width:100%; } .cp_timecreator-mv-price { margin:15px 0 10px; } .cp_timecreator-mv-img { display:none; } .cp_timecreator-mv-cv { margin-bottom:10px; } .cp_timecreator-mv-cv li { width:89%; float:none; margin:0 auto; } .cp_timecreator-mv-cv li + li { margin-top:10px; } .cp_timecreator-mv-cv li a { padding:15px 30px 15px 20px; font-size:18px; } .cp_timecreator-mv-cv li a::after { right:15px; content:"▶︎"; font-size:12px; } .cp_timecreator-mv-cv li:first-child { float:none; } .cp_timecreator-mv-link a { color:#FFFFFF; font-size:10px; } } /*=============================================================== cv_ftNav 2019.07.01 ===============================================================*/ .cv_ftNav { text-align:center; margin-top:40px; } .cv_ftNav img { width:100%; } .cv_ftNav a { transition:all,0.2s; } .cv_ftNav a:hover { opacity:0.6; } @media all and (max-width:768px){ } /*=============================================================== cp_trial 2019.07.31 ===============================================================*/ .cp_trial { } .cp_trial h2 { margin:70px 0 25px; text-align:center; font-size:22px; } .cp_trial_hdg1 { font-size:44px; font-weight:bold; text-align:center; line-height:1.3; float:left; width:45%; padding-top:17px; } .cp_trial_hdg1 span { color:#FF0000; font-weight:bold; } .cp_trial_list { width:55%; float:right; } .cp_trial_list li { border-radius:8px; background:#f1f1f1; padding:12px 20px 7px; font-size:18px; } .cp_trial_list li + li { margin-top:5px; } .cp_trial_list li::before { content:url(../../image/cp_trial_icon); margin-right:10px; position:relative; top:-2px; display:inline-block; vertical-align:middle; } .cp_trial_list li span { color:#FF0000; font-size:20px; font-weight:bold; } .cp_trial_inner { max-width:1120px; margin:0 auto 40px; padding:0 20px; } .cp_trial_inner::after { content:""; display:block; clear:both; } .cp_trial_bg { background:url(/image/cp_trial_bg) no-repeat center top; background-size:contain; padding-top:16%; } .cp_trial_img { text-align:center; padding:0 100px 40px; } .cp_trial_img img { max-width:100%; } .cp_trial .submit_btn { max-width:600px; margin:0 auto; } .cp_trial_hdg2 { font-size:38px; color:#a30b1a; margin-top:120px; text-align:center; } .cp_trial_lead { font-size:20px; text-align:center; } .cp_trial_lead span { color:#ff0000; font-weight:bold; } @media all and (max-width:768px){ .cp_trial h2 { margin:20px 20px 0; font-size:16px; } .cp_trial_hdg1 { font-size:20px; padding:5px 0 10px; } .cp_trial_hdg1,.cp_trial_list { width:100%; float:none; } .cp_trial_list li { padding:10px 10px 7px 36px; font-size:14px; position:relative; } .cp_trial_list li span { font-size:16px; font-weight:bold; } .cp_trial_list li::before { position:absolute; top:5px; left:7px; transform:scale(0.7,0.7); } .cp_trial_inner { margin:0 auto 20px; padding:0 15px; } .cp_trial_bg { background:url(/image/cp_trial_bg) no-repeat center top; background-size:150% auto; padding-top:20%; } .cp_trial_img { text-align:center; padding:15px 40px 20px; } h2 + .cp_trial_img { text-align:center; padding:15px 0 20px; } .cp_trial .submit_btn { margin:0 25px; } .cp_trial .submit_btn a { width:100%; padding:15px 25px; box-sizing:border-box; } .cp_trial_hdg2 { font-size:24px; color:#a30b1a; margin-top:60px; text-align:center; } .cp_trial_lead { font-size:14px; text-align:center; } .cp_trial_lead span { color:#ff0000; font-weight:bold; } .cp_trial .list_step { padding-bottom:0; } .cp_trial_inner + .submit_btn { margin-bottom:25px; padding:15px 30px 15px 20px; } } /* Office365 ************************************************************************************/ _:-ms-input-placeholder, :root main { display: block; } .of-main, .of-main * { box-sizing: border-box; } .of-main a { color: inherit; text-decoration: none; } .of-main img { max-width: 100%; vertical-align: bottom; } .of-main { background: url(/image/o365_main_bg) center top/auto; font: normal 18px/1.6 "メイリオ", Meiryo, Osaka, "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; border-width: 20px 0 5px; border-style: solid; border-color: #e03900; padding: 160px 0 140px; } .of-chart-Block { display: none; } .of-chart-Block.is-visible { display: inherit !important; } .of-chart-hdgBl { min-height: 145px; text-align: center; } .of-chart-hdgBl p { line-height:1.8 !important; } .of-chart_hdg { line-height: 1.6; margin: 0; } .of-chart_hdg.of-first { font-size: 2.556em; color: #e03900; } .of-chart_hdg.of-after { font-size: 1.667em; } .of-chart_hdg.of-after span { font-size: .8em; font-weight: bold; } .of-chart_hdg.of-result { font-size: 1.667em; text-align: center; } .of-chart_hdg.of-result span { color: #fcc636; font-weight: bold; } .of-chart_hdg .of-is_sp { display: none; } .of-chart_lead { font-size: 1em; } .of-chart_list { text-align: left; max-width: 800px; margin: 20px auto 0; padding: 0 1em; } .of-chart_list li { font-size: .778em; text-indent: -1em; padding-left: 1em; } .of-chart_list li:nth-of-type(n + 2) { margin-top: 5px; } .of-chart_Btn { display: flex; justify-content: center; align-items: center; list-style: none; margin: 30px auto 0; padding: 0 8.8%; } .of-chart_Btn li { width: 100%; max-width: 254px; font-size: 1em; text-align: center; margin: 0; position: relative; } .of-chart_Btn li::before { content: ""; display: block; width: 100%; padding-bottom: 100%; } .of-chart_Btn li:nth-of-type(n + 2) { margin-left: 4%; } .of-chart_Btn a, .of-chart_Btn span { display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; max-width: 234px; max-height: 234px; background: white; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); margin: auto; border-radius: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; cursor: pointer; } .of-chart_Btn li a, .of-chart_Btn li span { transition: all .2s, font-size .2s 0s; } .of-chart_Btn li a::before, .of-chart_Btn li a::after, .of-chart_Btn li span::before, .of-chart_Btn li span::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; transition: all 0.4s; } .of-chart_Btn li a::before, .of-chart_Btn li span::before { width: 100%; height: 100%; border: 10px solid transparent; border-radius: 100%; margin: auto; left: -10px; z-index: 0; } .of-chart_Btn li a::after, .of-chart_Btn li span::after { background: url(/image/o365_arrow) no-repeat center top/contain; width: 35px; height: 43px; margin: auto auto 0; bottom: -10px; opacity: 0; left: 0; right: 0; transition: all .3s, bottom 1s, opacity .2s; } .of-chart_Btn li a::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .of-chart_Btn li:hover { -webkit-animation: btnHoverAction .3s ease-out 0s forwards; animation: btnHoverAction .3s ease-out 0s forwards; } .of-chart_Btn li:hover a, .of-chart_Btn li:hover span { font-size: 1.04em; color: #e03900; font-weight: bold; transition: font-size .1s .2s; } .of-chart_Btn li:hover a::before, .of-chart_Btn li:hover span::before { border-color: #e03900; } .of-chart_Btn li:hover a::after, .of-chart_Btn li:hover span::after { bottom: 10px; opacity: 1; transition: bottom .2s ease-out .2s, opacity .8s ease-in-out; } .of-chart-bottom { border-top: 5px dotted #e03900; max-width: 480px; margin: 70px auto 0; padding: 20px 0 0; } .of-chart-bottom_lead { max-width: 197px; margin: 0 auto; } .of-solution { padding: 0 20px; } .of-solution:nth-of-type(1) { margin: 140px 0 0; } .of-solution:nth-of-type(2n) { margin: 90px 0 0; } .of-solution_hdg { font-size: 1.889em; color: #e03900; text-align: center; } .of-solution_hdg span { font-size: .588em; color: black; } .of-solution-card { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; max-width: 960px; margin: 45px auto 0; } .of-solution-card::after { content: ""; flex: 0 0 100%; max-width: 280px; } .of-solution-item { flex: 1 0 100%; background: white; max-width: 31%; box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1); margin: 0 1%; padding: 0 0 40px; border-radius: 10px; overflow: hidden; } .of-solution-item_ttl { display: flex; justify-content: center; align-items: center; background: #f7f7f7; font-size: 1em; text-align: center; line-height: 1.2; margin: 0; padding: 20px 0 16px; } .of-solution-inner { padding: 0 30px; } .of-solution-inner p { margin-top:20px; height:120px; } .of-solution-list { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; min-height: 120px; list-style: none; margin: 5px auto 0; padding: 0; } .of-solution-list li { flex-grow: 1; flex-shrink: 0; flex-basis: calc(100% / 5); max-width: calc(100% / 5); margin: 0; font-size:11px; font-size:11px; text-align:center; } /* .of-solution-list li { flex-grow: 1; flex-shrink: 0; flex-basis: calc(100% / 5); max-width: calc(100% / 5); margin: 0; } .of-solution-list { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; min-height:60px; list-style: none; margin: 5px auto 0; padding: 0; } .of-solution-list li {width: 100%; margin: 0; } */ .of-solution-list li:not(:nth-of-type(4n + 1)) { margin-left: 5.172%; } .of-solution-text { display: flex; justify-content: center; align-items: center; min-height: 126px; font-size: .778em; margin: 0 !important; } .of-solution-list_ttl { font-size: .778em; text-align: left; font-weight: bold; margin: 20px auto 0; padding: 0; } .of-solution-inner .of-solution-btn { height:auto; } .of-solution-btn { margin: 20px auto 0; padding: 0; } .of-solution-btn a { display: flex; justify-content: center; align-items: center; background: #e03900; font-size: .944em; font-weight: bold; color: white; text-decoration: none; line-height: 1; padding: 16px 0 12px; transition: opacity .2s; } .of-solution-btn a:hover { opacity: .6; } .of-chart-hdgBl { transition: opacity .3s; opacity: 1; } .of-chart_Btn li { transition: opacity .3s; opacity: 1; } .fadeOut { pointer-events: none !important; opacity: 0 !important; } @media screen and (max-width: 900px) { .of-main { font-size: 14px; padding: 20% 0; } .of-main { font-size: 12px; padding: 16% 0; } .of-chart-hdgBl { min-height: 0; } .of-chart_Btn li { font-size: 2vw; max-width: 200px; } .of-chart-bottom { max-width: 100%; margin: 10% 22%; padding: 15px 15% 0; } .of-solution:nth-of-type(1) { margin: 10% 0 0; } .of-solution:nth-of-type(2n) { margin: 10% 0 0; } .of-solution-item { max-width: 32%; margin: 0 .5%; } .of-solution-inner { padding: 0 7%; } .of-solution-list { min-height: 10vw; } .of-solution-list li:nth-of-type(n + 5) { margin-top: 5px; } .of-solution-text { min-height: calc(10.6vw + 10px); } .of-solution-list_ttl { font-size: 1.1em; } } @media screen and (max-width: 500px) { .of-chart_hdg { line-height: 1.4; } .of-chart_hdg .of-is_sp { display: inherit; } .of-chart_Btn a, .of-chart_Btn span { width: 100%; height:auto; max-width: 100%; max-height: none; border-radius:0; } .of-chart_Btn li a::before, .of-chart_Btn li span::before { border-radius:0; } .of-chart_Btn { flex-direction: column; padding: 0; margin-top:15px !important; } .of-chart_Btn li { font-size: 1.2em; max-width:85%; } .of-chart_Btn li + li { margin-top:15px !important; } .of-chart_Btn li:nth-of-type(n + 2) { margin-top: 5%; margin-left: 0; } .of-chart_Btn li a::before, .of-chart_Btn li span::before { border-width: 2px; border-color: #e03900; left: -1px; } .of-chart_Btn li a::before { border-color: #e03900; } .of-chart-bottom { margin: 10% 10% 0; } .of-solution:nth-of-type(1) { margin: 26% 0 0; } .of-solution:nth-of-type(2n) { margin: 16% 0 0; } .of-solution-card { justify-content: center; margin-top: 5%; } .of-solution-item { max-width: 100%; padding-bottom:25px } .of-solution-item + .of-solution-item { margin-top:15px !important; } .of-solution-item:nth-of-type(n + 2) { margin-top: 2%; } .of-solution-inner p { margin-top:20px; height:auto; } .of-solution-list_ttl { font-size:1.1em; } .of-chart_Btn li::before { padding-bottom:26%; } } @-webkit-keyframes btnHoverAction { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.98); transform: scale(0.98); } 51% { -webkit-transform: scale(0.98); transform: scale(0.98); } 100% { -webkit-transform: scale(1.04); transform: scale(1.04); } } @keyframes btnHoverAction { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.98); transform: scale(0.98); } 51% { -webkit-transform: scale(0.98); transform: scale(0.98); } 100% { -webkit-transform: scale(1.04); transform: scale(1.04); } } /*=============================================================== tc_20200122 2020.01.22 ===============================================================*/ .tc_20200122 img { max-width: 100%; } .tc_20200122 a:hover { opacity: .7; } /* mv */ .tc_20200122_mv { background: url(/image/tc_20200122_bg01) no-repeat left center; background-size: cover; padding: 70px 0 50px;} .tc_20200122_mv .inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; letter-spacing: .025em; box-sizing: border-box; } .tc_20200122_mv .inner::after { display: block; content: ""; clear: both; } .tc_20200122_mv .txt { float: left; width: 75.47%; } .tc_20200122_mv .img { float: right; width: 23.584%; } .tc_20200122_mv .catch { position: relative; padding-left: 110px; } .tc_20200122_mv .catch .label { position: absolute; top: 0; left: 0; display: block; background: #fe0000; width: 90px; text-align: center; color: #fff; font-size: 18px; } .tc_20200122_mv .catch .read_txt { background: url(/image/tc_20200122_line01) repeat-x left bottom; font-size: 20px;} .tc_20200122_mv h2 { margin: 20px 0 0 13.2%; text-align: center; font-size: 40px; line-height: 1.5; letter-spacing: -.01em; } /* navi */ .tc_20200122_nav { background: #a30b1a; padding: 20px 0; text-align: center; line-height: 1; } .tc_20200122_nav li { display: inline-block; } .tc_20200122_nav li + li { margin-left: 70px; } .tc_20200122_nav li a {display: block; background: url(/image/tc_20200122_arrow02) no-repeat right center; background-size: 13px auto; padding-right: 22px; color: #fff; font-size: 20px; text-decoration: none; font-weight:bold;letter-spacing:0.025em;} /* base layout */ .tc_20200122_content { max-width: 1100px; margin: 0 auto; color: #3c3c35; } .tc_20200122_sec { margin-top: 75px; } .tc_20200122_sec .inner { padding: 0 20px; } .tc_20200122_sec h3 { padding: 8px; color: #3c3c35; font-size: 21px; letter-spacing: .025em;border-left:8px solid #a30b1a;background:#eee; } .tc_20200122_sec p { font-size: 16px; } /* modules */ .tc_20200122 .mod_list01 { margin-top: 35px; } .tc_20200122 .mod_list01 li { min-height: 25px; line-height: 1.5; } .tc_20200122 .mod_list01 li + li { margin-top: 25px; } .tc_20200122 .mod_mark01 { background: url(/image/tc_20200122_ico01) no-repeat left top; background-size: 27px auto; padding-left: 30px; font-size: 17px; font-weight: bold; } .tc_20200122_sec.mod01 .child:first-of-type { margin-top: 35px; } .tc_20200122_sec.mod01 .child ~ .child { margin-top: 50px; } .tc_20200122 .mod_layout01:first-of-type { margin-top: 30px; } .tc_20200122 .mod_layout01 ~ .mod_layout01 { margin-top: 60px; } .tc_20200122 .mod_layout01 h5 { margin-bottom: 30px; font-size: 22px; font-weight: bold; line-height: 1.3; } .tc_20200122 .mod_layout01 .txt { float: left; width: 47.169%; } .tc_20200122 .mod_layout01 .txt p ~ p { margin-top: 1em; } .tc_20200122 .mod_layout01 .txt .att { font-size: 12px; } .tc_20200122 .mod_layout01 .img { float: right; width: 49.056%; } .tc_20200122 .mod_layout01 .img span { display: block; margin-top: 5px; text-align: right; font-size: 12px; } .tc_20200122 .mod_layout01::after { display: block; content: ""; clear: both; } .tc_20200122 .mod_layout02 { margin-top: 60px; } .tc_20200122 .mod_layout02 a { display: block; color: #3c3c35; text-decoration: none; } .tc_20200122 .mod_layout02 .img { float: left; width: 30.188%; } .tc_20200122 .mod_layout02 .txt { float: right; width: 67.924%; } .tc_20200122 .mod_layout02 .txt h4 { font-size: 18px; } .tc_20200122 .mod_layout02 .txt .tit { margin-top: 10px; border-bottom: 1px solid #666; font-size: 22px; font-weight: bold; } .tc_20200122 .mod_layout02 .txt .read_txt { margin-top: 25px; } .tc_20200122 .mod_layout02::after { display: block; content: ""; clear: both; } .tc_20200122 .mod_layout03 { margin-top: 60px; padding: 0 5px; text-align: center; font-size: 0; } .tc_20200122 .mod_layout03 .child { display: inline-block; vertical-align: top; width: 44.285%; margin: 0 2.8575%; } .tc_20200122 .mod_layout03 .child .txt { position: relative; background: #eee; min-height: 185px; border: 1px solid #a30b1a; padding: 30px 4.47% 40px; box-sizing: border-box; } .tc_20200122 .mod_layout03 .child .txt h4 { padding-bottom: 15px; border-bottom: 1px solid #3c3c35; font-size: 18px; font-weight: bold; letter-spacing: .025em; } .tc_20200122 .mod_layout03 .child .txt p { margin-top: 15px; font-size: 16px; line-height: 1.6; } .tc_20200122 .mod_layout03 .child .txt::after { display: block; content: ""; position: absolute; bottom: 0; right: 0; background: #a30b1a url(/image/tc_20200122_arrow01) no-repeat center center; background-size: 8px auto; width: 30px; height: 30px; } .tc_20200122 .mod_layout03 .child .btn a { display: block; background: #a30b1a url(/image/tc_20200122_arrow01) no-repeat right 10px center; background-size: 8px auto; border-radius: 10px; margin-top: 35px; padding: 20px; line-height: 1; color: #fff; font-size: 16px; text-decoration: none; } @media screen and (max-width: 1140px) { .tc_20200122 .pconly { display: none; } .tc_20200122_content { padding: 0 20px; } } @media screen and (max-width: 768px) { /* mv */ .tc_20200122_mv { padding: 30px 0; } .tc_20200122_mv .txt { width: 70%; } .tc_20200122_mv .img { width: 27%; } .tc_20200122_mv .catch { padding-left: 70px; } .tc_20200122_mv .catch .label { width: 60px; font-size: 14px; } .tc_20200122_mv .catch .read_txt { font-size: 16px;} .tc_20200122_mv h2 { margin: 15px 0 0 70px; font-size: 26px; } /* navi */ .tc_20200122_nav { padding: 20px 0; } .tc_20200122_nav li + li { margin-left: 5.2%; } /* base layout */ .tc_20200122_sec { margin-top: 60px; } .tc_20200122_sec .inner { padding: 0 1.515%; } .tc_20200122_sec h3 { padding: 10px 1.515%; font-size: 18px; } .tc_20200122_sec p { font-size: 14px; } /* modules */ .tc_20200122 .mod_list01 { margin-top: 26px; } .tc_20200122 .mod_list01 li + li { margin-top: 18px; } .tc_20200122 .mod_mark01 { font-size: 18px; } .tc_20200122_sec.mod01 .child:first-of-type { margin-top: 25px; } .tc_20200122_sec.mod01 .child ~ .child { margin-top: 35px; } .tc_20200122 .mod_layout01:first-of-type { margin-top: 25px; } .tc_20200122 .mod_layout01 ~ .mod_layout01 { margin-top: 40px; } .tc_20200122 .mod_layout01 h5 { margin-bottom: 25px; font-size: 18px; } .tc_20200122 .mod_layout01 .txt { float: none; width: 100%; } .tc_20200122 .mod_layout01 .txt .att { font-size: 10px; } .tc_20200122 .mod_layout01 .img { float: none; width: 100%; margin-top: 20px; text-align: center; } .tc_20200122 .mod_layout01 .img span { font-size: 10px; text-align: center; } .tc_20200122 .mod_layout02 { margin-top: 40px; } .tc_20200122 .mod_layout02 .txt h4 { font-size: 16px; } .tc_20200122 .mod_layout02 .txt .tit { margin-top: 5px; font-size: 18px; } .tc_20200122 .mod_layout02 .txt .read_txt { margin-top: 15px; } .tc_20200122 .mod_layout03 { margin-top: 40px; padding: 0 1.515%; } .tc_20200122 .mod_layout03 .child { display: block; width: 100%; margin: 0; } .tc_20200122 .mod_layout03 .child ~ .child { margin-top: 25px; } .tc_20200122 .mod_layout03 .child .txt { min-height: auto; } .tc_20200122 .mod_layout03 .child .txt h4 { font-size: 16px; } .tc_20200122 .mod_layout03 .child .txt p { font-size: 14px; } .tc_20200122 .mod_layout03 .child .btn a { margin-top: 15px; font-size: 14px; } } @media screen and (max-width: 460px) { .tc_20200122 .spnone { display: none; } /* mv */ .tc_20200122_mv { padding: 20px 0; } .tc_20200122_mv .txt { float: none; width: 100%; } .tc_20200122_mv .img { float: none; width: 100%; margin-top: 15px; text-align: center; } .tc_20200122_mv .catch { padding-left: 0; } .tc_20200122_mv .catch .label { position: static; margin-bottom: 5px; font-size: 12px; } .tc_20200122_mv .catch .read_txt { font-size: 14px; line-height: 1.4;} .tc_20200122_mv h2 { margin: 15px 0 0 0; font-size: 20px; } /* navi */ .tc_20200122_nav { padding: 10px 0; } .tc_20200122_nav li + li { margin-left: 15px; } .tc_20200122_nav li a { font-size: 14px; } /* base layout */ .tc_20200122_sec .inner { padding: 0 10px; } .tc_20200122_sec h3 { padding: 5px 10px; font-size: 15px; } /* modules */ .tc_20200122 .mod_mark01 { padding-top: 3px;font-size: 14px; } .tc_20200122 .mod_layout01 h5 { margin-bottom: 15px; font-size: 18px; } .tc_20200122 .mod_layout02 .img { float: none; width: 100%; } .tc_20200122 .mod_layout02 .img img { width: 100%; } .tc_20200122 .mod_layout02 .txt { margin-top: 15px; float: none; width: 100%; } .tc_20200122 .mod_layout03 .child .btn a { padding: 15px; } } /*=============================================================== V9.4に伴う修正（FUCA対応） footer margin 2020.02.14 ===============================================================*/ .footer_wrp .content.content_width.contact_link { padding: 50px 0; } @media only screen and (max-width: 480px) { .footer_wrp .content.content_width.contact_link { padding: 20px; } }