#wrapper { font-family: 'Noto Sans JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif; } #footer { margin-top: 0; } @media only screen and (min-width:769px) { .mv{ background: url("../imgs/top.png") center center no-repeat; background-size: cover; height: 480px; position: relative;} .mv h2 { height: 0; overflow: hidden; } .top {} .topq { padding: 80px 0; position: relative; overflow: hidden; background: #D8EFFA; } .topq::before { content: ''; position: absolute; bottom: 0; left: 0; border-bottom: 160px solid #fff; border-left: 100vw solid transparent; } .topq::after { content: ''; position: absolute; bottom: 0; left: 0; border-bottom: 160px solid #fff; border-right: 100vw solid transparent; } .topq p { font-size: 60px; font-weight: bold; color: #000; text-align: center; padding: 40px 0 80px; } .topq ul { display: flex; justify-content: center; } .topq li { width: 300px; height: 120px; background: #1F3980; margin: 40px; position: relative; border-radius: 20px; } .topq li p { margin: 0; padding: 0; font-size: 30px; font-weight: bold; color: #FFF; line-height: 40px; position: absolute; top: 20px; left: 40px; text-align: center; width: 260px; } .topq li:first-child p { top: 40px; } .topq li img { position: absolute; top: 20px; left: -40px; } .topa { margin-top: -40px; float: left; width: 100%; padding: 0 0 160px; background: #FFF;} .topa .fukidashi { position: relative; font-size: 30px; font-weight: bold; color: #DF5E48; text-align: center; border: solid 8px #DF5E48; border-radius: 20px; width: 800px; margin: 0 auto; padding: 20px 0; } .topa .fukidashi img { position: absolute; right: -120px; } .caseInner { width: 1100px; margin: 0 auto; } .caseIcon { width: 180px; height: 180px; background: #1F3980; color: #FFF; font-size: 40px; font-family: 'Noto Serif JP', serif; padding: 20px 0 0; box-sizing: border-box; text-align: center; float: left; } .caseIcon span { font-size: 80px; } .case1 { width: 100%; padding: 0 0 80px; background: #FFF; float: left; } .case1 h3 { width: 890px; font-size: 45px; font-weight: bold; color: #1F397F; border-bottom: solid 4px #1F397F; float: right; font-style: italic; } .case1 p { width: 890px; font-size: 20px;float: right; padding: 40px 0 0; } .case1 ul { width: 890px; font-size: 20px;float: right; padding: 40px 0 0; display: block; position: relative;} .case1 li.case1Img1 { position: absolute; top: 135px; left: -60px; } .case1 li.case1Img2 { position: absolute; top: 145px; left: 710px; } .case1 li.case1Img3 { position: absolute; top: 245px; left: -60px; } .case1 li.case1Img4 { position: absolute; top: 90px; left: 510px; } .case1 li.case1Img5 { position: absolute; top: 150px; left: 580px; } .case1 .fukidashi { position: relative; font-size: 25px; font-weight: bold; color: #DF5E48; text-align: center; border: solid 8px #DF5E48; border-radius: 20px; width: 800px; margin: 40px 60px 0 0; padding: 20px 0; } .case1 .fukidashi img { position: absolute; left: -160px; top: 30px; } .case2 { width: 100%; padding: 80px 0; background: #EBF7FD; float: left; } .case2 h3 { width: 890px; font-size: 45px; font-weight: bold; color: #1F397F; border-bottom: solid 4px #1F397F; float: right; font-style: italic; } .case2 p { width: 890px; font-size: 20px;float: right; padding: 40px 0 0; } .case2 p img { float: right; } .case2 .fukidashi { position: relative; font-size: 25px; font-weight: bold; color: #DF5E48; background: #FFF; text-align: center; border: solid 8px #DF5E48; border-radius: 20px; width: 800px; margin: 40px 60px 0 0; padding: 20px 0; } .case2 .fukidashi img { position: absolute; left: -120px; top: -30px; } .case3 { width: 100%; padding: 80px 0; background: #FFF; float: left; } .case3 h3 { width: 890px; font-size: 45px; font-weight: bold; color: #1F397F; border-bottom: solid 4px #1F397F; float: right; font-style: italic; } .case3 p { width: 890px; font-size: 20px;float: right; padding: 40px 0 0; } .case3 p b { display: block; background: #D8EFFA; border-radius: 10px; width: 400px; margin: 0 0 0 20px; padding: 20px 0; font-size: 25px; text-align: center; } .case3 p img { float: right; } .case3 .fukidashi { position: relative; font-size: 25px; font-weight: bold; color: #DF5E48; background: #FFF; text-align: center; border: solid 8px #DF5E48; border-radius: 20px; width: 800px; margin: 40px 60px 0 0; padding: 20px 0; } .case3 .fukidashi img { position: absolute; left: -120px; top: -10px; } .case4 { width: 100%; padding: 80px 0; background: #EBF7FD; float: left; } .case4 h3 { width: 890px; font-size: 45px; font-weight: bold; color: #1F397F; border-bottom: solid 4px #1F397F; float: right; font-style: italic; } .case4 p { width: 890px; font-size: 20px;float: right; padding: 40px 0 0; } .case4 .fukidashi { position: relative; font-size: 25px; font-weight: bold; color: #DF5E48; background: #FFF; text-align: center; border: solid 8px #DF5E48; border-radius: 20px; width: 800px; margin: 40px 60px 0 0; padding: 20px 0; } .case4 .fukidashi img { position: absolute; left: -220px; bottom: -80px; } .close { width: 100%; float: left; } .closeq { padding: 80px 0; position: relative; overflow: hidden; background: #FFF; } .closeq::before { content: ''; position: absolute; bottom: 0; left: 0; border-bottom: 160px solid #D8EFFA; border-left: 100vw solid transparent; } .closeq::after { content: ''; position: absolute; bottom: 0; left: 0; border-bottom: 160px solid #D8EFFA; border-right: 100vw solid transparent; } .closeq h4 { font-size: 40px; font-weight: bold; color: #1F3980; text-align: center; padding:0; } .closeq h5 { font-size: 60px; font-weight: bold; color: #DF5E47; text-align: center; padding:0 0 80px; } .closeq p { font-size: 40px; font-weight: bold; color: #000; text-align: center; padding: 0 0 20px; } .closeq ul { display: flex; justify-content: center; } .closeq li { width: 300px; height: 120px; background: #1F3980; margin: 40px; position: relative; border-radius: 20px; text-align: center; font-size: 50px; font-weight: bold; color: #FFF; line-height: 120px; } .closea { float: left; width: 100%; padding: 0 0 80px; background: #D8EFFA;} .closea h4 { font-size: 60px; font-weight: bold; color: #1F3980; text-align: center; padding:0; } .closea h5 { width: 880px; font-size: 80px; font-weight: bold; color: #1F3980; text-align: center; margin: 40px auto; padding: 15px 0; border-radius: 8px; border: solid 8px #1F3980; background: #FFF; } .closea p { position: relative; width: 880px; margin: 0 auto; font-size: 40px; font-weight: bold; color: #000; text-align: center; padding: 0; } .closea p img { position: absolute; right: -120px; bottom: -80px; } ::placeholder{ color: #aaa;} ::-ms-input-placeholder{ color: #aaa;} input[type=submit], button, select{ -webkit-appearance: none;} input,textarea{ width:100%; padding: 5px; font-family: 'Noto Sans JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif; font-size:15px; border:2px solid #d6d6d6; box-sizing: border-box;} select{ padding: 5px; font-family: 'Noto Sans JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif; font-size:15px; border:2px solid #d6d6d6; box-sizing: border-box;} textarea{ text-align: left; height: 10em; font-weight: normal;} input[type=submit]{ border: none; padding: 0; background: #000; color: #fff; margin: 0 auto; max-width: 480px; padding: 1em 1em; font-size: 20px; cursor: pointer;} .form { width: 100%; padding: 80px 0; background: #EBF7FD; float: left; } .form h3 { text-align: center; font-size: 50px; font-weight: bold; margin-bottom: 80px;} .form dl{ display: table; table-layout: fixed; width: 1100px; margin: 0 auto; } .form dl dt{ display: table-cell; vertical-align: middle;} .form dl dt p{ font-size: 20px;} .form dl dd{ display: table-cell; vertical-align: middle; background: #fff; width: 360px; font-weight: bold; text-align: center; padding:15px 0;box-sizing: border-box;} .form dl dd p{ font-size: 15px; line-height: 1em; margin: 0 auto;} .form dl dd p span{ font-size: 20px; line-height: 1em;} .form dl dd strong{ display: block; font-size: 35px; line-height: 1em; color: #014db4; margin:10px auto;} .form form{ background: #FFF; width: 1100px; margin: 80px auto 0; padding: 0 40px 40px; box-sizing: border-box; } .form form table{ width: 100%; border-collapse: collapse; border-spacing: 0;} .form form table th{ vertical-align: top; padding: 40px 40px 0 0; width: 240px; font-size: 20px;} .form form table th span{ background: #DF5E49; color: #FFF; font-size: 12px; line-height: 1em; padding: 5px 10px; float: right;} .form form table td{ vertical-align: top; padding: 40px 0 0;} .form form .submit_btn{ text-align: center; margin-top: 40px;} .form form .submit_btn button{ background: #DF5E49; color: #FFF; border: none; font-size: 20px; font-weight: bold; line-height: 1em; padding: 25px 0; width: 360px; display: inline-block; cursor: pointer; border-radius: 10px; } } @media only screen and (max-width:768px) { .mv{ background: url("../imgs/sp_top.png") center center no-repeat; background-size: contain; height: 50vw; margin-top: 60px; position: relative;} .mv h2 { height: 0; overflow: hidden; } .top {} .topq { padding: 40px 0; position: relative; overflow: hidden; background: #D8EFFA; } .topq::before { content: ''; position: absolute; bottom: 0; left: 0; border-bottom: 80px solid #fff; border-left: 100vw solid transparent; } .topq::after { content: ''; position: absolute; bottom: 0; left: 0; border-bottom: 80px solid #fff; border-right: 100vw solid transparent; } .topq p { font-size: 20px; font-weight: bold; color: #000; text-align: center; padding: 0 0 40px; } .topq ul { } .topq li { width: calc(100% - 40px); height: 100px; background: #1F3980; margin: 0 auto 20px; position: relative; border-radius: 10px; } .topq li p { margin: 0; padding: 0; font-size: 25px; font-weight: bold; color: #FFF; line-height: 30px; position: absolute; top: 15px; padding-left: 20px; text-align: center; width: 100%; box-sizing: border-box;} .topq li:first-child p { top: 30px; } .topq li img { position: absolute; bottom: -10px; left: -10px; height: 100px; } .topa { margin-top: -40px; float: left; width: 100%; padding: 0 0 80px; background: #FFF;} .topa .fukidashi { position: relative; font-size: 18px; font-weight: bold; color: #DF5E48; border: solid 4px #DF5E48; border-radius: 20px; width: calc(100% - 40px); margin: 20px auto 0; padding: 10px 60px 10px 10px; box-sizing: border-box; text-align: left; } .topa .fukidashi br { display: none; } .topa .fukidashi img { position: absolute; right: -20px; bottom: 0; width: 80px; } .caseInner { } .caseIcon { width: 80px; background: #1F3980; color: #FFF; font-size: 20px; font-family: 'Noto Serif JP', serif; margin: 0 0 20px; box-sizing: border-box; text-align: center; float: left; } .caseIcon span { font-size: 30px; } .case1 { width: 100%; padding: 0 0 40px; background: #FFF; float: left; } .case1 h3 { width: 100%; font-size: 25px; line-height: 45px; font-weight: bold; color: #1F397F; border-bottom: solid 4px #1F397F; font-style: italic; } .case1 p { width: 100%; font-size: 15px; padding: 20px 20px 0; box-sizing: border-box; } .case1 ul { width: 100%; padding: 40px 10px 0; display: block; position: relative; float: left; box-sizing: border-box; } .case1 li img { width: 100%; } .case1 li.case1ImgBg1 { width: 50%; float: right; } .case1 li.case1Img1 { position: absolute; top: 20%; left: 0; width: 50%; padding: 0 10px; box-sizing: border-box; } .case1 li.case1Img2 { position: absolute; top: 43%; left: 0; width: 50%; padding: 0 10px; box-sizing: border-box; } .case1 ul.case1Img2 { padding: 0 10px 50px; } .case1 li.case1ImgBg2 { width: 50%; float: right; } .case1 li.case1Img3 { position: absolute; top: 50%; left: 0; width: 50%; padding: 0 10px; box-sizing: border-box; } .case1 li.case1Img4 { position: absolute; top: 20%; left: 0; width: 60%; padding: 0 0 0 10px; box-sizing: border-box; } .case1 li.case1Img5 { position: absolute; top: 20%; right: 0; width: 50%; text-align: center; padding: 0 10px 0 0; box-sizing: border-box; } .case1 li.case1Img5 img { width: 50%; } .case1 .fukidashi { position: relative; font-size: 18px; font-weight: bold; color: #DF5E48; background: #FFF; border: solid 4px #DF5E48; border-radius: 20px; width: calc(100% - 40px); margin: 20px auto 0; padding: 10px 10px 10px 60px; box-sizing: border-box; text-align: left; } .case1 .fukidashi br { display: none; } .case1 .fukidashi img { width: 80px; position: absolute; left: -20px; bottom: 0; } .case2 { width: 100%; padding: 40px 0; background: #EBF7FD; float: left; } .case2 h3 { width: 100%; font-size: 25px; line-height: 45px; font-weight: bold; color: #1F397F; border-bottom: solid 4px #1F397F; font-style: italic; } .case2 p { width: 100%; font-size: 15px; padding: 20px 20px 0; box-sizing: border-box; } .case2 p img { width: 160px; float: right; } .case2 .fukidashi { position: relative; font-size: 18px; font-weight: bold; color: #DF5E48; background: #FFF; border: solid 4px #DF5E48; border-radius: 20px; width: calc(100% - 40px); margin: 20px auto 0; padding: 10px 10px 10px 60px; box-sizing: border-box; text-align: left; } .case2 .fukidashi br { display: none; } .case2 .fukidashi img { width: 80px; position: absolute; left: -20px; bottom: 0; } .case3 { width: 100%; padding: 40px 0; background: #FFF; float: left; } .case3 h3 { width: 100%; font-size: 25px; line-height: 45px; font-weight: bold; color: #1F397F; border-bottom: solid 4px #1F397F; font-style: italic; } .case3 p { width: 100%; font-size: 15px; padding: 20px 20px 0; box-sizing: border-box; } .case3 p b { display: block; background: #D8EFFA; border-radius: 10px; width: 100%; margin: 0; padding: 10px 0; font-size: 20px; text-align: center; } .case3 p img { width: 160px; float: right; } .case3 .fukidashi { position: relative; font-size: 18px; font-weight: bold; color: #DF5E48; background: #FFF; border: solid 4px #DF5E48; border-radius: 20px; width: calc(100% - 40px); margin: 20px auto 0; padding: 10px 10px 10px 60px; box-sizing: border-box; text-align: left; } .case3 .fukidashi br { display: none; } .case3 .fukidashi img { width: 80px; position: absolute; left: -20px; bottom: 0; } .case4 { width: 100%; padding: 40px 0; background: #EBF7FD; float: left; } .case4 h3 { width: 100%; font-size: 25px; line-height: 45px; font-weight: bold; color: #1F397F; border-bottom: solid 4px #1F397F; font-style: italic; } .case4 p { width: 100%; font-size: 15px; padding: 20px 20px 0; box-sizing: border-box; } .case4 p img { width: 160px; float: right; } .case4 .fukidashi { position: relative; font-size: 18px; font-weight: bold; color: #DF5E48; background: #FFF; border: solid 4px #DF5E48; border-radius: 20px; width: calc(100% - 40px); margin: 20px auto 0; padding: 10px 10px 110px 10px; box-sizing: border-box; text-align: left; } .case4 .fukidashi br { display: none; } .case4 .fukidashi img { height: 120px; position: absolute; right: -20px; bottom: 0; } .close { width: 100%; float: left; } .closeq { padding: 40px 0; position: relative; overflow: hidden; background: #FFF; } .closeq::before { content: ''; position: absolute; bottom: 0; left: 0; border-bottom: 80px solid #D8EFFA; border-left: 100vw solid transparent; } .closeq::after { content: ''; position: absolute; bottom: 0; left: 0; border-bottom: 80px solid #D8EFFA; border-right: 100vw solid transparent; } .closeq h4 { font-size: 20px; font-weight: bold; color: #1F3980; text-align: center; padding:0; } .closeq h5 { font-size: 25px; font-weight: bold; color: #DF5E47; text-align: center; padding:0 0 40px; } .closeq p { font-size: 20px; font-weight: bold; color: #000; text-align: center; padding: 0 0 10px; } .closeq ul { } .closeq li { width: calc(100% - 40px); background: #1F3980; margin: 10px auto; position: relative; border-radius: 10px; text-align: center; font-size: 25px; font-weight: bold; color: #FFF; line-height: 50px; } .closea { float: left; width: 100%; padding: 0 0 20px; background: #D8EFFA;} .closea h4 { font-size: 25px; font-weight: bold; color: #1F3980; text-align: center; padding:0; } .closea h5 { width: calc(100% - 40px); font-size: 30px; font-weight: bold; color: #1F3980; text-align: center; margin: 10px auto; padding: 10px 0; border-radius: 4px; border: solid 4px #1F3980; background: #FFF; box-sizing: border-box; } .closea p { position: relative; width: 100%; margin: 0 auto; font-size: 20px; font-weight: bold; color: #000; text-align: left; padding: 0 100px 0 20px; box-sizing: border-box; } .closea p img { width: 80px; position: absolute; right: 0; bottom: -80px; } ::placeholder{ color: #aaa;} ::-ms-input-placeholder{ color: #aaa;} input[type=submit], button, select{ -webkit-appearance: none;} input,textarea{ width:100%; padding: 5px; font-family: 'Noto Sans JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif; font-size:20px; border:2px solid #d6d6d6; box-sizing: border-box;} select{ padding: 5px; font-family: 'Noto Sans JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif; font-size:20px; border:2px solid #d6d6d6; box-sizing: border-box;} textarea{ text-align: left; height: 10em; font-weight: normal;} input[type=submit]{ border: none; padding: 0; background: #000; color: #fff; margin: 0 auto; max-width: 480px; padding: 1em 1em; font-size: 24px; cursor: pointer;} .form { width: 100%; padding: 40px 0; background: #EBF7FD; float: left; } .form h3 { text-align: center; font-size: 30px; font-weight: bold; margin-bottom: 40px;} .form dl{ width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .form dl dt{ } .form dl dt p{ font-size: 15px;} .form dl dd{ background: #FFF; width: 100%; font-weight: bold; text-align: center; margin: 20px 0 0; padding:10px; box-sizing: border-box; } .form dl dd p{ font-size: 15px; line-height: 1em; margin: 0 auto;} .form dl dd p span{ font-size: 15px; line-height: 1em;} .form dl dd strong{ display: block; font-size: 30px; line-height: 1em; color: #014db4; margin:10px auto;} .form form{ background: #FFF; width: 100%; margin: 40px auto 0; padding: 0 20px 20px; box-sizing: border-box; } .form form table { width: 100%; border-collapse: collapse; border-spacing: 0;} .form form table th{ display: block; padding: 20px 0 0; font-size: 20px;} .form form table th span{ background: #DF5E49; color: #FFF; font-size: 12px; line-height: 1em; padding: 5px 10px; float: right;} .form form table td{ display: block; padding: 0;} .form form .submit_btn{ text-align: center; margin-top: 40px;} .form form .submit_btn button{ background: #DF5E49; color: #FFF; border: none; font-size: 20px; font-weight: bold; line-height: 1em; padding: 20px 40px; display: inline-block; cursor: pointer; border-radius: 10px; } } /*background alternative*/ header h1 a , header nav li a , .regi , #difference h2 , #difference ul li a , #about h2 , #bottomBns li a , #footerTel , #mailmg p:last-child a { height:0px; overflow:hidden; line-height:2; background-repeat:no-repeat; } /* gNav --------------------------------------------------*/ .navStyle { padding: 80px 0 0; float: right; } .navStyle ul { overflow: hidden; text-align: center; line-height: 1; } .navStyle .pNavList, .navStyle .regi { display: none; } .navStyle li { position: relative; display: inline-block; } .navStyle li:before { } .navStyle li:after { } .navStyle li:first-child:after { display: none; } .navStyle li a { position: relative; display: block; padding: 0 20px; color: #000; font-size: 14px; } .navStyle li.on a, .noT .navStyle li a:hover { color: #333; } .navStyle li.on:before, .noT .navStyle li:hover:before { opacity: 1; } .navStyle li.on a { font-style: italic; }.navStyle { padding: 80px 350px 0 0; float: right; } .navStyle li a { position: relative; display: block; padding: 0 20px; color: #000; font-size: 18px; } .navStyle li { border-right: solid 1px #000; } .navStyle li:nth-child(3) { border: 0; } .regi { position:absolute; right:0; top:70px; background-image:url(../../../../img/common/tel.gif); width:329px !important; padding-top:30px; } /* SP */ @media only screen and (max-width:960px) { #gNav { position: fixed; top: 60px; left: 0; display: none; width: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); z-index: 999; } .navStyle { padding: 0; background-color: #fff; border-bottom: none; } .navStyle ul { text-align: left; border-top: #b2b2b2 solid 1px; } .navStyle li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; width: 50%; text-align: center; border-bottom: #b2b2b2 solid 1px; border-right: 0; background: #1f3066; } .navStyle li:nth-child(odd) { border-right: #b2b2b2 solid 1px; } .navStyle li:before, .navStyle li:after { display: none; } .navStyle li a { padding: 15px 0; color: #333; font-size: 14px; letter-spacing: 0.05em; color: #FFF; } .navStyle li.on a, .noT .navStyle li a:hover { color: #fff; background-color: #1a2a4c; font-style: normal; } .navStyle .pNavList, .navStyle .regi { display: block; } .navStyle .pNavList { border-top: none; } .navStyle .regi { width: 100% !important; position: relative; top: 0; background-position: center; margin-top: -1px; border-top: #b2b2b2 solid 1px; padding-top:50px; background-image:url(../../../../img/common/tel.svg); } .navStyle .regi a { display: block; padding: 22px 0; color: #fff; font-size: 16px; text-align: center; background-color: #b39826; letter-spacing: 0.1em; } } @media only screen and (max-width:331px) { .navStyle .regi { background-size: contain; } } #lowerHed { background-color:#003986; color:#FFF; } #lowerHed div { height: 60px; } #lowerHed h2 { float:left; line-height: 60px; } #lowerHed ul { float:right; width:80%; text-align:right; font-size: 14px; line-height: 60px; } #lowerHed ul.mini { width:67%; } #lowerHed ul li { list-style:none; display:inline; padding-right:5px; } #lowerHed ul li:after { content:">"; margin-left:10px; } #lowerHed ul li:last-child:after { content:""; margin-left:0px; } #lowerHed ul li a { color:#FFF; } /* SP */ @media only screen and (max-width:768px) { #lowerHed { background-color:#003986; color:#FFF; margin-top:40px; } #lowerHed div { width:100%; margin:0 auto; position:relative; padding:8px 5px; line-height:1.5; overflow:hidden; box-sizing:border-box; } #lowerHed h2 { float:left; /*width:30%;*/ } #lowerHed ul { float:right; text-align:left; font-size:75%; } #lowerHed ul li { list-style:none; display:inline; padding-right:0px; } #lowerHed ul li:after { content:">"; margin-left:3px; } #lowerHed ul li:nth-of-type(3):after { content:""; margin-left:0px; } #lowerHed ul li:nth-of-type(4):before { content: "\A >"; white-space: pre; margin-left:0px; } #lowerHed ul li:last-child:after { content:""; margin-left:0px; } #lowerHed ul li a { color:#FFF; } } #header { position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: 150px; background: #FFF; transition: .3s; padding: 0; } #header h1, #header .navStyle, #header .regi { transition: .3s; } .is-animation { height: 60px !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .is-animation h1 { color: #000; padding: 10px 0 0 !important; } .is-animation h1 img{ height: 40px !important; } .is-animation .navStyle { padding: 20px 350px 0 0; } .is-animation .regi { top: 15px; } #container { padding-top: 150px; } @media only screen and (max-width:768px) { #header { height: 60px; } #header h1 img{ height: 40px !important; } .is-animation { height: 60px !important; } .is-animation #gNav { top: 60px; } .is-animation h1 img{ height: 40px !important; } #container { padding-top: 0; } .is-animation .navStyle { padding: 0; } .is-animation .regi { top: 0; } #banner { width: 100%; } #spMenu:before, #spMenu:after, #spMenu .cbdr { background-color: #003986; } } #difference h2 { background-image:url(../../../../img/common/different.gif); padding-top:50px; margin: 0 auto 40px; background-color: #434343; } #difference ul { width: 980px; overflow:hidden; padding-bottom:55px; margin: 0 auto; } #difference ul li { width:203px; height:203px; float:left; list-style:none; margin-right:45px; } #difference ul li:last-child { margin-right:0px; } #difference ul li a:link , #difference ul li a:visited { padding-top:203px; background-image:url(../../../../img/common/different1_off.gif); display:block; } #difference ul li a:hover { padding-top:203px; background-image:url(../../../../img/common/different1_on.gif); display:block; } #difference ul li:nth-of-type(2) a:link , #difference ul li:nth-of-type(2) a:visited { background-image:url(../../../../img/common/different2_off.gif); } #difference ul li:nth-of-type(2) a:hover { background-image:url(../../../../img/common/different2_on.gif); } #difference ul li:nth-of-type(3) a:link , #difference ul li:nth-of-type(3) a:visited { background-image:url(../../../../img/common/different3_off.gif); } #difference ul li:nth-of-type(3) a:hover { background-image:url(../../../../img/common/different3_on.gif); } #difference ul li:nth-of-type(4) a:link , #difference ul li:nth-of-type(4) a:visited { background-image:url(../../../../img/common/different4_off.gif); } #difference ul li:nth-of-type(4) a:hover { background-image:url(../../../../img/common/different4_on.gif); } #about { background-color:#efefef; padding:55px 0 75px; line-height:2; } #about h2 { background-image:url(../../../../img/common/logo2.gif); background-position:center top; padding-top:97px; margin-bottom:45px; } #about span , #about a { color:#0396c0; font-weight:bold; text-decoration:underline; } #about a:hover { text-decoration:none; } #about b { text-decoration:underline; } #aboutInner h2 + p { margin-bottom:30px; } #about p:last-child a { background-color:#868686; color:#FFF; text-decoration:none; display:block; width:400px; margin:0 auto; text-align:center; padding:5px 0; line-height:1.5; font-weight:normal; } #about p:last-child a:hover { text-decoration:underline; } #bottomBns { padding:50px 0 55px; background: #FFF; } #bottomBns ul { overflow:hidden; margin-left: 63px; } #bottomBns li { list-style:none; float:left; width:318px; margin-right:10px; margin-bottom:10px; } #bottomBns li:nth-child(3n) { margin-right:0px; } #bottomBns li a { padding-top:248px; display:block; background-image:url(../../../../img/common/bn1.gif); } #bottomBns li a:hover { background-image:url(../../../../img/common/bn1_on.gif); } #bottomBns li:nth-of-type(2) a { background-image:url(../../../../img/common/bn2.gif); } #bottomBns li:nth-of-type(2) a:hover { background-image:url(../../../../img/common/bn2_on.gif); } #bottomBns li:nth-of-type(3) a { background-image:url(../../../../img/common/bn3.gif); } #bottomBns li:nth-of-type(3) a:hover { background-image:url(../../../../img/common/bn3_on.gif); } #bottomBns li:nth-of-type(4) a { background-image:url(../../../../img/common/bn4.gif); } #bottomBns li:nth-of-type(4) a:hover { background-image:url(../../../../img/common/bn4_on.gif); } #bottomBns li:nth-of-type(5) a { background-image:url(../../../../img/common/bn5.gif); } #bottomBns li:nth-of-type(5) a:hover { background-image:url(../../../../img/common/bn5_on.gif); } #bottomBns li:nth-of-type(6) a { background-image:url(../../../../img/common/bn6.gif); } #bottomBns li:nth-of-type(6) a:hover { background-image:url(../../../../img/common/bn6_on.gif); } #footer { background-color:#898989; color:#FFF; } #footerInner { width:1100px; margin:0 auto; padding:45px 0 65px; text-align:center; } #footerInner a { color:#FFF; } #footerInner nav li { display:inline; margin-right:20px; padding-bottom:25px; line-height:3; } #footerInner nav li a { padding-right:20px; border-right:solid 1px #fff; display:inline-block; line-height:1; } #footerInner nav li:nth-of-type(5) a , #footerInner nav li:nth-of-type(9) a , #footerInner nav li:nth-of-type(13) a , #footerInner nav li:last-child a { border-right:none; } #footerInner nav li:nth-of-type(6):before , #footerInner nav li:nth-of-type(10):before , #footerInner nav li:nth-of-type(14):before { content: "\A"; white-space: pre; } #footerTel { margin:50px 0 50px; background-image:url(../../../../img/common/footer_tel.png); padding-top:40px; background-position:center top; } .address { background-image:url(../../img/common/footer_logo.png); background-repeat:no-repeat; padding-left:130px; line-height:1.5; text-align:left; width:600px; margin:0 0 60px 100px; box-sizing:border-box; position:relative; float: left; } .address a.logo { position:absolute; left:0px; top:0px; width:111px; padding-top:91px; height:0px; overflow:hidden; display:block; } .address a.tel { text-decoration:none; cursor:default; } .line { width: 300px; float: right; padding: 0; margin: 0 100px 60px 0; } .copyrights { clear: both; } #footerInner p:last-child { font-size:75%; } @media screen and (max-width: 979px){ #difference h2 { background-image:url(../../../../img/common/different_sp.gif); background-size:214px 19px; background-position:center 3px; padding-top:23px; padding-bottom:3px; background-color:#434343; margin:0 5px 20px; } #difference ul { overflow:hidden; padding-bottom:30px; margin:0 auto; letter-spacing: -0.4em; text-align:center; width:252px; padding-left:20px; } #difference ul li { width:106px; height:106px; float:left; list-style:none; margin-right:20px; } #difference ul li:last-child { margin-right:0px; } #difference ul li a:link , #difference ul li a:visited { padding-top:106px; background-image:url(../../../../img/common/different1_sp_off.gif); background-size:106px 106px; display:block; } #difference ul li a:hover { padding-top:106px; background-image:url(../../../../img/common/different1_sp_on.gif); display:block; } #difference ul li:nth-of-type(2) a:link , #difference ul li:nth-of-type(2) a:visited { background-image:url(../../../../img/common/different2_sp_off.gif); } #difference ul li:nth-of-type(2) a:hover { background-image:url(../../../../img/common/different2_sp_on.gif); } #difference ul li:nth-of-type(3) a:link , #difference ul li:nth-of-type(3) a:visited { background-image:url(../../../../img/common/different3_sp_off.gif); } #difference ul li:nth-of-type(3) a:hover { background-image:url(../../../../img/common/different3_sp_on.gif); } #difference ul li:nth-of-type(4) a:link , #difference ul li:nth-of-type(4) a:visited { background-image:url(../../../../img/common/different4_sp_off.gif); } #difference ul li:nth-of-type(4) a:hover { background-image:url(../../../../img/common/different4_sp_on.gif); } #about { background-color:#efefef; padding:30px 10px 40px; line-height:2; font-size: 14px; } #about h2 { background-image:url(../../../../img/common/logo2.gif); background-size:237px 48px; background-position:center top; padding-top:48px; margin-bottom:30px; } #about span , #about a { color:#0396c0; font-weight:bold; text-decoration:underline; } #about b { text-decoration:underline; } #aboutInner h2 + p { margin-bottom:30px; } #about p:last-child { padding-top:15px; } #about p:last-child a { background-color:#868686; color:#FFF; text-decoration:none; display:block; width: 100%; margin:0 auto; text-align:center; padding:5px 0; line-height:1.5; font-weight:normal; font-size: 12px; } #about p:last-child a:hover { text-decoration:underline; } #bottomBns { padding:50px 0 40px; } #bottomBns ul { overflow:hidden; margin:0 auto; letter-spacing: -0.4em; text-align:center; } #bottomBns li { list-style:none; display:inline-block; width:50%; margin-right:0; text-align:center; } #bottomBns li:nth-child(2n) { margin-right:0; } #bottomBns li:nth-child(3n) { margin-right:0; } #bottomBns li a { padding-top:124px; display:block; background-image:url(../../../../img/common/bn1_sp.gif); background-size:159px 124px; background-position: center; } #bottomBns li a:hover { background-image:url(../../../../img/common/bn1_on.gif); } #bottomBns li:nth-of-type(2) a { background-image:url(../../../../img/common/bn2_sp.gif); } #bottomBns li:nth-of-type(2) a:hover { background-image:url(../../../../img/common/bn2_on.gif); } #bottomBns li:nth-of-type(3) a { background-image:url(../../../../img/common/bn3_sp.gif); } #bottomBns li:nth-of-type(3) a:hover { background-image:url(../../../../img/common/bn3_on.gif); } #bottomBns li:nth-of-type(4) a { background-image:url(../../../../img/common/bn4_sp.gif); } #bottomBns li:nth-of-type(4) a:hover { background-image:url(../../../../img/common/bn4_on.gif); } #bottomBns li:nth-of-type(5) a { background-image:url(../../../../img/common/bn5_sp.gif); } #bottomBns li:nth-of-type(5) a:hover { background-image:url(../../../../img/common/bn5_on.gif); } #bottomBns li:nth-of-type(6) a { background-image:url(../../../../img/common/bn6_sp.gif); } #bottomBns li:nth-of-type(6) a:hover { background-image:url(../../../../img/common/bn6_on.gif); } /*=========================================== 縲€FOOTER ===========================================*/ #footer { background-color:#898989; color:#FFF; } #footerInner { width: 100%; padding:45px 0; text-align:center; } #footerInner a { color:#FFF; } #footerInner nav { overflow:hidden; } #footerInner nav li { float:left; width:50%; padding-bottom:0; box-sizing:border-box; text-align:left; margin-right: 0; font-size: 12px; } #footerInner nav li:nth-of-type(odd) { text-align:right; } #footerInner nav li:nth-of-type(odd) a { padding-right:10px; border-right:solid 1px #fff; display:inline-block; line-height:1; } #footerInner nav li:nth-of-type(even) a { padding-left:10px; text-align:left; border: 0; padding-right:0; } #footerInner nav li:last-child a { border-right:none; } #footerInner nav li:nth-of-type(5):before, #footerInner nav li:nth-of-type(10):before { content: none; } #footerTel { background-image:url(../../../../img/common/footer_tel.png); background-size:219px 20px; padding-top:20px; background-position:center top; position:relative; width:219px; margin:35px auto; } #footerTel a { position:absolute; right:0px; top:0px; width:107px; padding-top:20px; height:0px; overflow:hidden; } .address a.logo { position:absolute; left:0px; top:0px; width:50px; padding-top:45px; height:0px; overflow:hidden; display:block; } .address { background-image:url(../../img/common/footer_logo.png); background-size:55px 45px; background-repeat:no-repeat; background-position: 10px top; line-height:1.5; text-align:left; width: 300px; margin:0 auto 40px; box-sizing:border-box; padding:0 10px 0 75px; font-size: 10px; float: none; } .address span { display:block; } .line { width: 300px; float: none; padding: 0; margin:0 auto 40px; } #footerInner p:last-child { font-size:75%; } }