@charset "utf-8"; /* LESS Document */ /* -------------------------- 共通 ----------------------------*/ /* html { overflow-x:hidden; } */ body{ font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; /*font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";*/ /*font-family: "游明朝","Yu Mincho",YuMincho,"Hiragino Mincho ProN","HGS明朝E","メイリオ",Meiryo,serif;*/ /*font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";*/ background-color: #ffffff; margin: 0; padding: 0; font-size: 30px; } /* 游ゴシックIEずれ対応 @media all and (-ms-high-contrast:none) { body { font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic",sans-serif; } } */ .mincho { /*font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;*/ font-family: Georgia,"游明朝","Yu Mincho",YuMincho,"Hiragino Mincho ProN","HGS明朝E","メイリオ",Meiryo,serif; } .gothic { @font-face { font-family: YuGothicM; src: local("Yu Gothic Medium"); } /*font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;*/ font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif"; } img{ max-width: 100%; height: auto; vertical-align: bottom; } p{ margin: 0; } ul{ padding: 0; } .clearfix:after{ content: ""; clear: both; display: block; } article, aside, footer, header, nav, section { display: block; } .flr { float: right; } .fll { float:left; } .cf:after{ content: ""; clear: both; display: block; } ul,ol,li{ list-style: none; } .inline-block{ display: inline-block; *display: inline; *zoom: 1; } .coming_soon{ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; max-width: 768px; max-height: 324px; text-align: center; } .indispensable { position: relative; bottom: 2px; font-weight: bold; color: #fff; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; /* behavior: url(./PIE.htc); */ background-color: #ff0000; vertical-align: middle; /*letter-spacing: 1.2px;*/ white-space: nowrap; font-size: 0.6em; line-height:1.0; padding: 0.2em 0.3em 0.1em; } @media all and (-ms-high-contrast:none){ .indispensable{ bottom: 0px; padding: 0.4em 0.3em 0em; } } /* -------------------------- レスポンシブ対応 ----------------------------*/ .pc_top{ display: block; .kv{ } .mv{ padding-top: 50px; } } .sp_top{ display: none; .kv{ } .kv2{ padding: 40px 0; } .mv{ padding-top: 40px; } } .pc_break{ display: block; } #ssl_seal_outline{ width:100%; text-align:center; } #ssl_seal{ margin:30px 0; font-size:13px; } /* -------------------------- main ----------------------------*/ #main { color: #000; figure{ margin: 0; padding: 0; } dl,dt,dd{ margin: 0; padding: 0; } .link-btn{ width: 100%; text-align: center; a{ transition: all .25s ease; width: 650px; height: 46px; padding-top: 24px; border-radius: 35px; display: inline-block; background-color: #000726; line-height: 1.0; color: #ffffff; span.inner{ transition: all .25s ease; display: inline-block; position: relative; font-size: 24px; line-height: 1.0; font-weight: bold; color: #ffffff; padding: 0 83px 0 0; } &:hover, &:active,{ background-color: #1e4a8b; box-shadow: 6px 6px 0px #cccccc; span.inner{ padding: 0 93px 0 0; &:after{ transform: rotateX(180deg); } } } } } #content { #mainarea { width: 1000px; margin: 0 auto; font-size:16px;; line-height: 1.6; font-style: normal; word-wrap: break-word; #content-innr { .mainttl { width: 100%; h1{ img{ display: block; } } } h3{ background-color: #EFEFEF; margin-top: 30px; padding: 0.2em 1.0em; font-size: 1.0em; } @media all and (-ms-high-contrast:none){ h3{ padding: 0.4em 1.0em 0em; } } .sub_idx{ padding: 3px 0; font-size: 18px; background-image: url("../images/noanoa_blue_line_s.png"); background-position: left bottom; background-repeat: repeat-x; } img{ width: 100%; margin: 30px auto 0; } .attention{ text-align: left; line-height: 1.4; border: solid 5px #a5bfce; padding: 5px; margin: 50px 10px 0; } } } } } /* -------------------------- カスタマイズ ----------------------------*/ .marker_yellow{ background: linear-gradient(transparent 60%, yellow 50%); } /* -------------------------- cont01 ----------------------------*/ .cont01{ background-color: #FBF7D0; padding: 30px 0 50px; .outline{ padding: 0 15px; } .main_left{ width: 27%; text-align: center; } .main_right{ width: 73%; font-size: 14px; } } /* -------------------------- cont_contact ----------------------------*/ .cont_contact{ margin-top: 40px; .outline{ width: 100%; text-align: left; margin: 30px auto 0; } h4{ color: #a5bfce; font-size: 20px; font-weight: bold; margin: 30px 15px 10px; line-height: 1.0; } .main{ border-top: solid 3px #a5bfce; padding: 10px 0 0; margin: 0 0px; } .main li{ border-bottom: solid 1px #ccc; padding: 10px 10px; } .main span{ display: inline-block; width: 210px; color: #666; font-weight: normal; vertical-align: middle; line-height: 1.3; padding: 0px; } .main span.kojin_block{ width: auto; display: inline-block; vertical-align: middle; } .main span.kojin_txt{ width: auto; font-size: 13px; } img:hover, img:focus{ opacity: 0.4; } .sub{ display: inline-block; vertical-align: top; padding: 0; max-width:460px; font-size:0; vertical-align:middle; margin-top:25px; } .sub li{ /* 上記スタイル打消し */ border: none; padding: 0; width: 210px; border: solid 0px #000; display: inline-block; vertical-align: top; margin: 0 3px 10px 0; img{ margin-bottom: 3px; } p{ width:140px;text-align:center;font-size:13px;line-height:1.4; } } input[type=text]{ width:60%;border:solid 1px #ccc;padding:10px 10px; } textarea{ width: 60%; height: 100px; border: solid 1px #ccc; padding: 10px 10px; vertical-align: middle; } select{ width:60%;border:solid 1px #ccc;padding:10px 10px; } .attention{ font-size: 12px; } .button2 { display: block; padding: 0.6em 1.8em; /*border-radius: 1.6em;*/ border-radius: 0.4em; color: #fff; font-size: 18px; text-align: center; text-decoration: none; cursor: pointer; } .button2:hover, .button2:focus { opacity: 0.8; } .btn2 { background-color: #EE6090; /*box-shadow: 0 5px 20px rgba(247, 185, 42, .5);*/ max-width: 220px; margin: 30px auto 0; line-height: 1.0; padding: 0.7em 0.3em 0.7em; } @media all and (-ms-high-contrast:none){ .btn2 { padding: 0.8em 0.3em 0.5em; } } } /* -------------------------- balloon ----------------------------*/ .balloon_outline{ padding-bottom: 40px; } /* -------------------------- balloon black ----------------------------*/ .balloon_black{ position: relative; background: #000000; padding: 2px 0px 2px; width: 100%; text-align: center; } .balloon_black h2{ display: block; font-size: 38px; font-weight: normal; line-height: 1.6; color: #fff; margin:15px; } .balloon_black:after{ content: ""; position: absolute; right: 0; bottom: -19px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #000000 transparent transparent transparent; border-width: 20px 20px 0 20px; } /* -------------------------- balloon orange ----------------------------*/ .balloon_orange{ position: relative; background: #FF7805; padding: 2px 0px 2px; width: 100%; text-align: center; } .balloon_orange h2{ display: block; font-size: 36px; font-weight: normal; line-height: 1.6; color: #fff; margin:15px; } .balloon_orange:after{ content: ""; position: absolute; right: 0; bottom: -19px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #FF7805 transparent transparent transparent; border-width: 20px 20px 0 20px; } /* -------------------------- balloon yellow ----------------------------*/ .balloon_yellow{ position: relative; background: #FFFF8E; padding: 2px 0px 2px; width: 100%; text-align: center; } .balloon_yellow h2{ display: block; font-size: 38px; font-weight: normal; line-height: 1.6; color: #000; margin:15px; } .balloon_yellow:after{ content: ""; position: absolute; right: 0; bottom: -19px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #FFFF8E transparent transparent transparent; border-width: 20px 20px 0 20px; } /* -------------------------- balloon org ----------------------------*/ .balloon_org{ position: relative; background: #ffffff; padding: 2px 0px 2px; width: 100%; text-align: center; } .balloon_org h1{ display: block; font-size: 38px; font-weight: normal; line-height: 1.0; color: #666666; margin: 10px 15px; padding: 0.2em 0.3em 0.1em; } @media all and (-ms-high-contrast:none){ .balloon_org h1{ padding: 0.4em 0.3em 0em; } } @media all and (-ms-high-contrast:none){ .balloon_org h2{ padding: 0.4em 0.3em 0em; } } /* -------------------------- balloon blue ----------------------------*/ .balloon_blue{ position: relative; background: #a5bfce; padding: 2px 0px 2px; width: 100%; text-align: center; } .balloon_blue h2{ display: block; font-size: 32px; font-weight: normal; line-height: 1.0; color: #fff; margin: 10px 15px; padding: 0.2em 0.3em 0.1em; } @media all and (-ms-high-contrast:none){ .balloon_blue h1{ padding: 0.4em 0.3em 0em; } } @media all and (-ms-high-contrast:none){ .balloon_blue h2{ padding: 0.4em 0.3em 0em; } } .balloon_blue:after{ content: ""; position: absolute; right: 0; bottom: -19px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #a5bfce transparent transparent transparent; border-width: 20px 20px 0 20px; } /* -------------------------- balloon green ----------------------------*/ .balloon_green{ position: relative; background: #33CC99; padding: 2px 0px 2px; width: 100%; text-align: center; } .balloon_green h2{ display: block; font-size: 38px; font-weight: normal; line-height: 1.6; color: #fff; margin:15px; } .balloon_green:after{ content: ""; position: absolute; right: 0; bottom: -19px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #33CC99 transparent transparent transparent; border-width: 20px 20px 0 20px; } /* -------------------------- balloon pink ----------------------------*/ .balloon_pink{ position: relative; background: #F4B2BA; padding: 10px 0px 10px; width: 100%; text-align: center; } .balloon_pink h2{ display: block; font-size: 38px; font-weight: normal; line-height: 1.6; color: #fff; margin:15px; } .balloon_pink:after{ content: ""; position: absolute; right: 0; bottom: -19px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #F4B2BA transparent transparent transparent; border-width: 20px 20px 0 20px; } /* -------------------------- button ----------------------------*/ .button:hover, .button:focus { opacity: 0.8; } /* -------------------------- カスタマイズ shareボタン ----------------------------*/ .share{ text-align: center; margin: 30px 15px 0;; font-size: 0; .ttl_share{ } div,{ display: inline-block; vertical-align: middle; } ul{ margin: 0; padding: 0 0px; list-style-type: none; font-size: 0; /* タグ改行によるスペース発生の対処 */ display: inline-block; } ul li{ display: inline-block; /* リスト並列化 */ margin-right: 15px; vertical-align: middle; } ul li:first-child{ margin-left: 25px; /* bar */ padding-left: 25px; /* bar */ border-left: solid 1px #fff; } ul li:last-child{ margin-right: 0px; /* reset */ } } /* -------------------------- ページトップ ----------------------------*/ .pagetop { position: fixed; bottom: 30px; right: 23px; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; z-index: 5; } .pagetop a { display: block; width: 60px; /* サイズ */ height: 60px; /* サイズ */ background-color: #000726; /* 背景カラー */ /*border-radius: 50px;*/ /* 形 */ text-align: center; color: #fff; font-size: 30px; /* fontサイズ */ text-decoration: none; line-height: 60px; /* サイズ */ border: solid 1px #222222; } .pagetop.show { opacity: 0.8; filter: alpha(opacity=80); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* -------------------------- メインヴィジュアル -----------------------------*/ .kv{ text-align: center; } .mv{ text-align: center; } .img1{ position:absolute; left:-50px; width:132px; } .img2{ position:absolute; right:30px; width:125px; } .img3{ position:absolute; left:-40px; width:161px; } .img4{ position:absolute; left:-36px; width:174px; } .img02 { max-width: 100%; margin-top: 15px; } /* -------------------------- ヘッダー ----------------------------*/ /* .fixed { position: fixed; left: 50%; transform: translate(-50%, 0); top: 0; max-width: 1040px;; z-index: 1000; } */ #header_txt{ width: 100%; background-color: #EFEFEF; margin: 0px auto 0px; padding: 5px 0 2px; text-align: left; p{ max-width: 1000px; margin: 0 auto; padding: 0 5px; color: #666666; font-size: 16px; line-height:1.4; } } #header { } header{ width: 100%; font-size: 0px; line-height: 0; background-color: #fff; text-align: center; padding: 0px 0; margin:0 auto 0; background-color: #ffffff; .txt_attn{ display: inline-block; padding: 5px 15px; } #logo{ position: relative; max-width: 1000px; margin: 20px auto 0; padding: 0px 5px 0; font-size: 16px; line-height: 1.4; text-align: left; h2{ font-size: 24px; text-align: center; line-height: 1.8; .ttl{ font-size: 22px; line-height: 1.0; margin-top: 10px; display: block; } } } #login{ position: absolute; top: 0; right: 5px; span{ vertical-align:middle; } img{ display:inline-block;vertical-align:middle; } } .button { display: inline-block; vertical-align: middle; margin: 0; padding: 5px 5px 5px 12px; -webkit-appearance: none; border: 1px solid transparent; border-radius: 0px; /*transition: baii 0.25s ease-out;*/ font-size: 17px; line-height: 1.6; text-align: left; cursor: pointer; background-color: #E55B2C; color: #fefefe; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; position: relative; width: 410px; } .salesman_photo{ position: absolute; right: -1px; bottom: -1px; } } /* -------------------------- フッター ----------------------------*/ footer{ font-size: 0px; line-height: 0; background-color: #fff; text-align: center; padding: 20px 0; margin-top: 20px; color: #333; background-color: #fff; ul{ padding: 5px 0; text-align: center; font-size: 14px; } ul li{ display: inline-block; line-height: 1.6; margin-left: 5px; padding-left: 10px; border-left: 1px solid #666; a{ color:#666; text-decoration: none; } a:visited{ color:#666; } a:hover{ color:#666; text-decoration: none; } } ul li:first-child{ margin-left: 0; padding-left: 0; border-left: 0; } .logo{ display: inline-block; padding: 5px 15px; } .txt_attn{ display: inline-block; padding: 5px 15px; } #copyright{ color: #666; max-width: 1000px; margin:0 auto; padding: 0px 5px 0; font-size: 14px; line-height:1.8; text-align: center; } } /*li:nth-child(2) li:nth-child(odd) li:nth-child(even)*/