@charset "utf-8"; /* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 全デバイス共通のスタイルとスマートフォンおよび小型タブレット向けレイアウトの指定 /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/ /*========================================== body ===========================================*/ body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; width: 100%; height: auto; margin: 0px; word-break: break-all; word-wrap: break-word; } .cf:after { content: ''; display: table; clear: both; } ul { width: auto; height: auto; margin: 0px; padding: 0px; list-style: none; } img { border: none; vertical-align: bottom; } #clear { width: auto; height: auto; margin: 0; padding: 0; clear: both; } #shadow { opacity: 0.6; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 1; } /*========================================== ヘッダーのスタイル ===========================================*/ #headerbox { width: auto; height: 90px; display: block; border-top: 5px solid ff6a00; background-color: #fff; box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2); } #headerbox header { width: 100%; height: 90px; margin: 0; padding: 0; display: block; } #headerbox h1 { width: 96%; height: auto; margin: 0; padding: 5px 2%; font-size: 0.65em; font-weight: normal; color: #000; float: right; display: block; line-height: 1.5em; } #headerbox .logo { width: 70%; float: left; } #headerbox .logo img { width: 100%; max-width: 400px; } /*========================================== グローバルナビゲーションのスタイル ===========================================*/ .menu-pc { display: none; } .menu-sp { position: absolute; top: 90px; background-color: ff6a00; opacity: 0.95; width: 100%; height: auto; z-index: 1; display: block; text-align: center; } .header_btn { height: auto; width: 10%; max-width: 40px; float: right; margin: 10px 5% 0 0; padding: 0 0 10px 0; } .menu-sp ul { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .header_btn img { width: 100%; height: auto; max-width: 40px; } .menu-sp .toggle { color: #FFF; text-decoration: none; display: block; border-bottom: 1px solid #FFF; font-size: 15px; font-weight: bold; padding-top: 15px; padding-right: 10%; padding-bottom: 15px; padding-left: 10%; line-height: 1.5em; } .toggle { cursor: pointer; } .menu-sp p { width: 100%; height: auto; color: #FFF; text-align: center; font-size: 16px; font-weight: bold; padding-top: 20px; padding-right: 0; padding-bottom: 20px; padding-left: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 1.5em; } .menu-sp ul li .toggle { position: relative; display: block; padding: 20px 25px 20px 10px; } .menu-sp ul li .toggle::after { position: absolute; top: 50%; right: 10px; display: block; content: ''; width: 8px; height: 8px; margin-top: -4px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .home { cursor: pointer; } .menu-sp .home { color: #FFF; text-decoration: none; display: block; border-bottom: 1px solid #FFF; font-size: 1em; font-weight: bold; padding-top: 20px; padding-right: 10%; padding-bottom: 20px; padding-left: 10%; line-height: 1.5em; } .menu-sp .close { color: #FFF; text-decoration: none; display: block; border-bottom: 1px solid #FFF; font-size: 1em; font-weight: bold; padding-top: 20px; padding-right: 10%; padding-bottom: 20px; padding-left: 10%; line-height: 1.5em; } .menu-sp ul li .home { position: relative; display: block; padding: 20px 25px 20px 10px; } /*========================================== メイン ===========================================*/ .mainimgbox { background-color: #fff; padding: 0; } .mainbox { max-width: 900px; width: 94%; height: auto; margin: 0 auto 50px; padding: 3%; overflow: hidden; } /*========================================== メインイメージ ===========================================*/ #mainimg { width: 98%; height: auto; margin: 0 auto 10px; padding: 0; display: block; } #mainimg img { width: 100%; max-width: 900px; height: auto; } /*---------- pankuzu ----------*/ .topic-path { width: 94%; max-width: 900px; line-height: 1.0; height: auto; margin: 0 auto; padding: 5px 0 5px 0px; overflow: hidden; } .topic-path li { float: left; font-size: 0.8em; color: #666; margin: 0; } .topic-path li a { color: #666; text-decoration: none; } .topic-path li a:hover { color: #666; text-decoration: underline; } /*---------- leftbox ----------*/ .leftbox { width: 100%; max-width: 570px; margin: 0; padding: 0; float: left; } .leftbox_content { width: 100%; max-width: 570px; margin: 0 auto 40px; padding: 0; } .leftbox_content p { width: auto; height: auto; margin: 0 auto; padding: 10px 0px 20px 0px; font-size: 14px; line-height: 25px; } .leftbox_content .thumbnail { width: 45%; margin: 0 10px 0 0; display: block; float: left; } h2, h3 { width: 100%; max-width: 570px; height: auto; margin: 0; padding: 7px; color: #696969; line-height: 25px; font-size: 15px; box-sizing: border-box; background-color: ff6a00; background-image: url(../images/h2.png); background-repeat: repeat; background-position: center center; } /*---- h2:before, h3:before { content: url(../images/h-arrow.png); display: inline-block; vertical-align: middle; width: 25px; height: 25px; padding-right: 5px; }--*/ /*---------------column ----------*/ .leftbox_content2 { overflow: hidden; padding: 0px; border-top: none; margin-bottom: 40px; } .leftbox_img { margin-bottom: 20px; } .leftbox_img .leftbox_img { max-width: 250px; display: block; margin-bottom: 0; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; } /*---------------canvas-------------*/ #CanvasBox1 { width: 80%; height: auto; margin: 0 auto 10px auto; } #CanvasBox1 #canvas1 { width: auto; height: auto; } #CanvasBox2 { width: 80%; height: auto; margin: 0 auto 10px auto; } #CanvasBox2 #canvas2 { width: auto; height: auto; } #CanvasBox3 { width: 80%; height: auto; margin: 0 auto 10px auto; } #CanvasBox3 #canvas3 { width: auto; height: auto; } #CanvasBox4 { width: 80%; height: auto; margin: 0 auto 10px auto; } #CanvasBox4 #canvas4 { width: auto; height: auto; } #CanvasBox5 { width: 80%; height: auto; margin: 0 auto 10px auto; } #CanvasBox5 #canvas5 { width: auto; height: auto; } #CanvasBox6 { width: 80%; height: auto; margin: 0 auto 10px auto; } #CanvasBox6 #canvas6 { width: auto; height: auto; } /*---------------btn-------------*/ .btn { margin: 0 auto; text-align: center; } .conductor_btn { width: 100%; max-width: 570px; margin: 0 auto; position: relative; display: inline-block; padding: 0.8em 0em; text-decoration: none; color: #FFF; background: #c70011; border-bottom: solid 2px #9d000d; border-radius: 2px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.19); font-weight: bold; } .conductor_btn:active { border-bottom: solid 2px #db0606; box-shadow: 0 0 2px rgba(0, 0, 0, 0.30); } .leftbox_box { width: auto; margin: 10px auto 20px; overflow: hidden; } .leftbox_text { font-size: 14px; line-height: 20px; color: #000; } .rightbox_content { display: none; } /*---------------footer-------------*/ footer { width: 100%; height: auto; padding: 10px 0; margin: 0 auto; } footer .footer_text { width: auto; height: auto; text-align: center; } footer .footer_text p { font-size: 13px; color: #000; line-height: 25px; } footer .footer_text p a { color: #000; } footer .footer_text p a:hover { color: #000; text-decoration: none; } /*========================================== tail ===========================================*/ /*タブレット向けのレイアウトの指定：480px～767px */ .txt_link { color: #0044cc; font-size: 1.2em; text-decoration: underline; } @media screen and (min-width: 630px) and (max-width: 767px) { .leftbox_img { text-align: center; width: 70%; margin: 0 auto 20px; height: auto; display: block; } #CanvasBox, #CanvasBox2, #CanvasBox3, #CanvasBox4, #CanvasBox5, #CanvasBox6 { width: 100%; height: auto; margin: 0 auto; padding: 0; } #canvas, #canvas2, #canvas3, #canvas4, #canvas5, #canvas6 { width: auto; height: auto; padding: 15px 0; margin: 0 auto 25px; } .linkbtn { width: 100%; height: auto; padding: 15px 15%; font-size: 1em; font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, from(#d00000), to(#943232)); color: #fff; text-decoration: none; border: 2px solid #E6E6E6; } } /* PC向けおよび大型タブレット向けのレイアウトの指定：768px～ */ @media only screen and (min-width: 768px) { /*========================================== ヘッダーのスタイル ===========================================*/ #headerbox { width: auto; height: 110px; min-width: 900px; border-top: 5px solid ff6a00; background-color: #fff; } #headerbox header { width: 1000px; height: 120px; margin: 0 auto; padding: 0; display: block; } #headerbox h1 { width: 98%; height: 15px; margin: 0; padding: 5px 1%; font-size: 0.75em; display: block; line-height: 20px; text-align: right; } #headerbox .logo { width: auto; height: auto; float: left; margin: 0; padding: 0; } /*========================================== グローバルナビゲーションのスタイル ===========================================*/ .header_btn { display: none; } .menu-sp { display: none; } .menu-pc { display: block; float: right; width: auto; height: auto; margin: 0; } .headmenu1, .headmenu2 { width: 150px; height: 35px; margin: 50px 5px 0 20px; padding: 0px; line-height: 35px; font-size: 0.85em; font-weight: bold; text-align: center; text-decoration: none; color: #999; float: right; display: inline-block; outline: none; background-image: url(../images/arrow-1.png); background-repeat: no-repeat; background-position: left center; } .headmenu1 a, .headmenu2 a { display: block; color: #fff; text-decoration: none; } .headmenu1 a:hover, .headmenu2 a:hover { color: #FFF; text-decoration: underline; } /*========================================== メインイメージ ===========================================*/ #mainimg { width: 900px; height: auto; margin: 0 auto; padding: 0; display: block; } #mainimg img { width: 100%; max-width: 900px; height: auto; } /*---------- pankuzu ----------*/ .topic-path { width: 900px; line-height: 1.0; height: auto; margin: 0 auto 10px; padding: 10px 0 10px; overflow: hidden; } /*========================================== メイン ===========================================*/ .mainimgbox { background-color: #efefef; padding: 20px 0; box-shadow: 0px 0px 4px 0px #ccc inset; } .mainbox { width: 960px; height: auto; margin: 0 auto 50px; padding: 20px; overflow: hidden; } .leftbox_img { margin-bottom: 10px; float: left; float: none; display:block; margin: 20px auto; } /*---------------right-------------*/ .leftbox_img .leftbox_img { max-width: 250px; height: auto; padding-left: 0px; margin-left: auto; margin-right: auto; } /*---------------canvas-------------*/ #CanvasBox1 { width: 80%; max-width: 260px; height: 210px; margin: 0 0 10px; padding: 20px; float: right; border: 1px solid #e9e9e9; background-color: #fff; } #CanvasBox1 #canvas1 { width: 250px !important; height: auto !important; margin-right: 5px; } #CanvasBox2 { width: 80%; max-width: 260px; height: 210px; margin: 0 0 10px; padding: 20px; float: right; border: 1px solid #e9e9e9; background-color: #fff; } #CanvasBox2 #canvas2 { width: 250px !important; height: auto !important; margin-right: 5px; } #CanvasBox3 { width: 80%; max-width: 260px; height: 210px; margin: 0 0 10px; padding: 20px; float: right; border: 1px solid #e9e9e9; background-color: #fff; } #CanvasBox3 #canvas3 { width: 250px !important; height: auto !important; margin-right: 5px; } #CanvasBox4 { width: 80%; max-width: 260px; height: 210px; margin: 0 0 10px; padding: 20px; float: right; border: 1px solid #e9e9e9; background-color: #fff; } #CanvasBox4 #canvas4 { width: 250px !important; height: auto !important; margin-right: 5px; } #CanvasBox5 { width: 80%; max-width: 260px; height: 210px; margin: 0 0 10px; padding: 20px; float: right; border: 1px solid #e9e9e9; background-color: #fff; } #CanvasBox5 #canvas5 { width: 250px !important; height: auto !important; margin-right: 5px; } #CanvasBox6 { width: 80%; max-width: 260px; height: 210px; margin: 0 0 10px; padding: 20px; float: right; border: 1px solid #e9e9e9; background-color: #fff; } #CanvasBox6 #canvas6 { width: 250px !important; height: auto !important; margin-right: 5px; } /*---------------btn-------------*/ .btn { margin: 0 auto; text-align: center; } .conductor_btn { width: 300px; margin: 0 auto; position: relative; display: inline-block; padding: 0.8em 0em; text-decoration: none; color: #FFF; background: #c70011; border-bottom: solid 2px #9d000d; border-radius: 2px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 2px 2px rgba(0, 0, 0, 0.19); font-weight: bold; } /***********rightbox_content***********/ .rightbox_content { float: right; width: 100%; max-width: 300px; height: auto; margin: 0; display: block; } h4 { width: 300px; margin: 0 auto 5px; line-height: 25px; padding: 8px; font-size: 14px; font-weight: bold; display: block; text-align: center; color: #fff; box-sizing: border-box; position: relative; background-color: #ff6a00; background-image: url(../images/h2.png); background-repeat: repeat; background-position: center center; } .rightbox_content ul { width: 300px; height: auto; margin: 0 auto; background-color: #fff; display: block; } .rightbox_content ul li { width: 300px; height: auto; line-height: 25px; padding: 10px 0 10px 10px; margin: 0 auto 10px; color: #000; font-size: 14px; border-bottom: 1px solid #dddddd; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; } .rightbox_content ul li a { color: #000; text-decoration: none; } .right_content ul li a:hover { color: #4f4f4f; text-decoration: underline; } /***********@media end tab***********/ }