@charset "UTF-8";
 html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
article, aside, details, figcaption, figure, hgroup, menu, nav, section {
display: block; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
.wp-embedded-content {
max-width: 100%;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
ins {
background-color: #ff9;
color: #000;
text-decoration: none; }
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold; }
del {
text-decoration: line-through; }
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help; }
input, select {
vertical-align: middle; }
body {
font: 13px/1.231 arial,helvetica,clean,sans-serif;
*font-size: small;
*font: x-small; }
select, input, button, textarea {
font: 99% arial,helvetica,clean,sans-serif; }
pre, code, kbd, samp, tt {
font-family: monospace;
*font-size: 108%;
line-height: 100%; }
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p, p p, blockquote p, pre p, dl p, ol p, ul p, th p, td p, dd p, dt p {
font-size: 100%; }
h1, h2, h3, h4, h5, h6 {
font-weight: bold; }
.fs10 {
font-size: 80%; }
.fs11 {
font-size: 85%; }
.fs12 {
font-size: 93%; }
.fs13 {
font-size: 100%; }
.fs14 {
font-size: 108%; }
.fs15 {
font-size: 116%; }
.fs16 {
font-size: 123.1%; }
.fs17 {
font-size: 131%; }
.fs18 {
font-size: 138.5%; }
.fs19 {
font-size: 146.5%; }
.fs20 {
font-size: 153.9%; }
.fs21 {
font-size: 161.6%; }
.fs22 {
font-size: 167%; }
.fs23 {
font-size: 174%; }
.fs24 {
font-size: 182%; }
.fs25 {
font-size: 189%; }
.fs26 {
font-size: 197%; }
img {
-ms-interpolation-mode: bicubic; }
strong {
font-weight: bold; }
em {
font-weight: bold; }
p {
margin: 0 0 15px 0;
font-size: 14px; }
ul {
list-style: none; }
dl dt a {
font-weight: bold; }
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
font-size: inherit;
font: 100%; }
th, td {
vertical-align: top;
text-align: left; }
div {
box-sizing: border-box; } a:hover img,
span:hover img.hover {
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )"; } .cf, #gHeader, #gHeader #headerTop, #gNavi ul, #gNaviSp .close, #gContainer, #gContainerInner, .footArea, #gFooter, #gFooter .footerNavi, #gFooter .footerNavi ul, .separate, .pagetop, #about .menu, #about .box p, #blog .blogArticle .contents, #blog .blogArticle .sns, #blog .recommend .listArea, #blog .recommend .listArea .list a, #first .textBox, #first .step, #first .step .txt, #topPage01 .textBox01, #topPage01 .top_anatani .box, #topPage01 .top_nayami, #topPage02 .top_aisatsu .topBox, #topPage02 .top_staff .staffslidePcBox, #topPage02 .top_blog, #trafficaccident .area01, #trafficaccident .area03 .separate {
*zoom: 1; }
.cf:after, #gHeader:after, #gHeader #headerTop:after, #gNavi ul:after, #gNaviSp .close:after, #gContainer:after, #gContainerInner:after, .footArea:after, #gFooter:after, #gFooter .footerNavi:after, #gFooter .footerNavi ul:after, .separate:after, .pagetop:after, #about .menu:after, #about .box p:after, #blog .blogArticle .contents:after, #blog .blogArticle .sns:after, #blog .recommend .listArea:after, #blog .recommend .listArea .list a:after, #first .textBox:after, #first .step:after, #first .step .txt:after, #topPage01 .textBox01:after, #topPage01 .top_anatani .box:after, #topPage01 .top_nayami:after, #topPage02 .top_aisatsu .topBox:after, #topPage02 .top_staff .staffslidePcBox:after, #topPage02 .top_blog:after, #trafficaccident .area01:after, #trafficaccident .area03 .separate:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden; }
.mt0 {
margin-top: 0px !important; }
.mb0 {
margin-bottom: 0px !important; }
.mr0 {
margin-right: 0px !important; }
.ml0 {
margin-left: 0px !important; }
.pt0 {
padding-top: 0px !important; }
.pb0 {
padding-bottom: 0px !important; }
.pr0 {
padding-right: 0px !important; }
.pl0 {
padding-left: 0px !important; }
.mt5 {
margin-top: 5px !important; }
.mb5 {
margin-bottom: 5px !important; }
.mr5 {
margin-right: 5px !important; }
.ml5 {
margin-left: 5px !important; }
.pt5 {
padding-top: 5px !important; }
.pb5 {
padding-bottom: 5px !important; }
.pr5 {
padding-right: 5px !important; }
.pl5 {
padding-left: 5px !important; }
.mt10 {
margin-top: 10px !important; }
.mb10 {
margin-bottom: 10px !important; }
.mr10 {
margin-right: 10px !important; }
.ml10 {
margin-left: 10px !important; }
.pt10 {
padding-top: 10px !important; }
.pb10 {
padding-bottom: 10px !important; }
.pr10 {
padding-right: 10px !important; }
.pl10 {
padding-left: 10px !important; }
.mt15 {
margin-top: 15px !important; }
.mb15 {
margin-bottom: 15px !important; }
.mr15 {
margin-right: 15px !important; }
.ml15 {
margin-left: 15px !important; }
.pt15 {
padding-top: 15px !important; }
.pb15 {
padding-bottom: 15px !important; }
.pr15 {
padding-right: 15px !important; }
.pl15 {
padding-left: 15px !important; }
.mt20 {
margin-top: 20px !important; }
.mb20 {
margin-bottom: 20px !important; }
.mr20 {
margin-right: 20px !important; }
.ml20 {
margin-left: 20px !important; }
.pt20 {
padding-top: 20px !important; }
.pb20 {
padding-bottom: 20px !important; }
.pr20 {
padding-right: 20px !important; }
.pl20 {
padding-left: 20px !important; }
.mt25 {
margin-top: 25px !important; }
.mb25 {
margin-bottom: 25px !important; }
.mr25 {
margin-right: 25px !important; }
.ml25 {
margin-left: 25px !important; }
.pt25 {
padding-top: 25px !important; }
.pb25 {
padding-bottom: 25px !important; }
.pr25 {
padding-right: 25px !important; }
.pl25 {
padding-left: 25px !important; }
.mt30 {
margin-top: 30px !important; }
.mb30 {
margin-bottom: 30px !important; }
.mr30 {
margin-right: 30px !important; }
.ml30 {
margin-left: 30px !important; }
.pt30 {
padding-top: 30px !important; }
.pb30 {
padding-bottom: 30px !important; }
.pr30 {
padding-right: 30px !important; }
.pl30 {
padding-left: 30px !important; }
.mt35 {
margin-top: 35px !important; }
.mb35 {
margin-bottom: 35px !important; }
.mr35 {
margin-right: 35px !important; }
.ml35 {
margin-left: 35px !important; }
.pt35 {
padding-top: 35px !important; }
.pb35 {
padding-bottom: 35px !important; }
.pr35 {
padding-right: 35px !important; }
.pl35 {
padding-left: 35px !important; }
.mt40 {
margin-top: 40px !important; }
.mb40 {
margin-bottom: 40px !important; }
.mr40 {
margin-right: 40px !important; }
.ml40 {
margin-left: 40px !important; }
.pt40 {
padding-top: 40px !important; }
.pb40 {
padding-bottom: 40px !important; }
.pr40 {
padding-right: 40px !important; }
.pl40 {
padding-left: 40px !important; }
.mt45 {
margin-top: 45px !important; }
.mb45 {
margin-bottom: 45px !important; }
.mr45 {
margin-right: 45px !important; }
.ml45 {
margin-left: 45px !important; }
.pt45 {
padding-top: 45px !important; }
.pb45 {
padding-bottom: 45px !important; }
.pr45 {
padding-right: 45px !important; }
.pl45 {
padding-left: 45px !important; }
.mt50 {
margin-top: 50px !important; }
.mb50 {
margin-bottom: 50px !important; }
.mr50 {
margin-right: 50px !important; }
.ml50 {
margin-left: 50px !important; }
.pt50 {
padding-top: 50px !important; }
.pb50 {
padding-bottom: 50px !important; }
.pr50 {
padding-right: 50px !important; }
.pl50 {
padding-left: 50px !important; }
.mt55 {
margin-top: 55px !important; }
.mb55 {
margin-bottom: 55px !important; }
.mr55 {
margin-right: 55px !important; }
.ml55 {
margin-left: 55px !important; }
.pt55 {
padding-top: 55px !important; }
.pb55 {
padding-bottom: 55px !important; }
.pr55 {
padding-right: 55px !important; }
.pl55 {
padding-left: 55px !important; }
.mt60 {
margin-top: 60px !important; }
.mb60 {
margin-bottom: 60px !important; }
.mr60 {
margin-right: 60px !important; }
.ml60 {
margin-left: 60px !important; }
.pt60 {
padding-top: 60px !important; }
.pb60 {
padding-bottom: 60px !important; }
.pr60 {
padding-right: 60px !important; }
.pl60 {
padding-left: 60px !important; }
.mt65 {
margin-top: 65px !important; }
.mb65 {
margin-bottom: 65px !important; }
.mr65 {
margin-right: 65px !important; }
.ml65 {
margin-left: 65px !important; }
.pt65 {
padding-top: 65px !important; }
.pb65 {
padding-bottom: 65px !important; }
.pr65 {
padding-right: 65px !important; }
.pl65 {
padding-left: 65px !important; }
.mt70 {
margin-top: 70px !important; }
.mb70 {
margin-bottom: 70px !important; }
.mr70 {
margin-right: 70px !important; }
.ml70 {
margin-left: 70px !important; }
.pt70 {
padding-top: 70px !important; }
.pb70 {
padding-bottom: 70px !important; }
.pr70 {
padding-right: 70px !important; }
.pl70 {
padding-left: 70px !important; }
.mt75 {
margin-top: 75px !important; }
.mb75 {
margin-bottom: 75px !important; }
.mr75 {
margin-right: 75px !important; }
.ml75 {
margin-left: 75px !important; }
.pt75 {
padding-top: 75px !important; }
.pb75 {
padding-bottom: 75px !important; }
.pr75 {
padding-right: 75px !important; }
.pl75 {
padding-left: 75px !important; }
.mt80 {
margin-top: 80px !important; }
.mb80 {
margin-bottom: 80px !important; }
.mr80 {
margin-right: 80px !important; }
.ml80 {
margin-left: 80px !important; }
.pt80 {
padding-top: 80px !important; }
.pb80 {
padding-bottom: 80px !important; }
.pr80 {
padding-right: 80px !important; }
.pl80 {
padding-left: 80px !important; }
.mt85 {
margin-top: 85px !important; }
.mb85 {
margin-bottom: 85px !important; }
.mr85 {
margin-right: 85px !important; }
.ml85 {
margin-left: 85px !important; }
.pt85 {
padding-top: 85px !important; }
.pb85 {
padding-bottom: 85px !important; }
.pr85 {
padding-right: 85px !important; }
.pl85 {
padding-left: 85px !important; }
.mt90 {
margin-top: 90px !important; }
.mb90 {
margin-bottom: 90px !important; }
.mr90 {
margin-right: 90px !important; }
.ml90 {
margin-left: 90px !important; }
.pt90 {
padding-top: 90px !important; }
.pb90 {
padding-bottom: 90px !important; }
.pr90 {
padding-right: 90px !important; }
.pl90 {
padding-left: 90px !important; }
.mt95 {
margin-top: 95px !important; }
.mb95 {
margin-bottom: 95px !important; }
.mr95 {
margin-right: 95px !important; }
.ml95 {
margin-left: 95px !important; }
.pt95 {
padding-top: 95px !important; }
.pb95 {
padding-bottom: 95px !important; }
.pr95 {
padding-right: 95px !important; }
.pl95 {
padding-left: 95px !important; }
.mt100 {
margin-top: 100px !important; }
.mb100 {
margin-bottom: 100px !important; }
.mr100 {
margin-right: 100px !important; }
.ml100 {
margin-left: 100px !important; }
.pt100 {
padding-top: 100px !important; }
.pb100 {
padding-bottom: 100px !important; }
.pr100 {
padding-right: 100px !important; }
.pl100 {
padding-left: 100px !important; }
hr {
border-color: #a0a0a0;
border-style: dotted;
border-width: 1px 0px 0px 0px;
height: 1px;
margin: 30px 0 !important; }
hr.solid {
border-style: solid; }
img {
vertical-align: bottom; }
img.b,
img.boxPart,
.b {
display: block !important; }
.floatRight,
.fR {
float: right;
display: inline; }
.floatLeft,
.fL {
float: left;
display: inline; }
.ul-fL li {
float: left;
display: inline; }
.ul-fR li {
float: right;
display: inline; }
.leftImg,
.iL {
float: left;
display: inline;
margin: 0 10px 5px 0; }
.rightImg,
.iR {
float: right;
display: inline;
margin: 0 0 5px 10px; }
.clear,
.clearCol {
clear: both;
font: 1px/1px monospace; }
.alignRight,
.aR {
text-align: right; }
.alignCenter,
.aC {
text-align: center; }
.alignLeft,
.aL {
text-align: left !important; }
.disnon {
display: none; }
.relative {
position: relative; }
.absolute {
position: absolute; }
.vT {
vertical-align: top; }
.vM {
vertical-align: middle; }
.vB {
vertical-align: bottom; }
@media only screen and (max-width: 767px) {
.pc {
display: none !important; } }
@media only screen and (min-width: 768px) {
.sp {
display: none !important; } }
.opa, a.btn:hover, #blog .recommend .listArea .list a:hover, #blog #side .blogList a:hover {
text-decoration: none;
opacity: 0.8;
filter: alpha(opacity=80); }  h1 .type01, h2 .type01, h3 .type01, h4 .type01, h5 .type01, h6 .type01 {
color: #ff9900; }
.red {
color: #8f3029; }
.blue {
color: #5da2c1; }
html, body {
width: 100%; }
body {
background: #ffffff;
color: #3e3a39;
font-family: Arial, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
line-height: 1.6; }
@media only screen and (min-width: 768px) {
body {
min-width: 1020px; } }
input, textarea {
font-family: Arial, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif; }
* html body, * html input, * html textarea {
font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif; }
a:link {
color: #000000;
text-decoration: none; }
a:visited {
color: #000000; }
a:hover {
text-decoration: underline;
color: #000000; }
@media only screen and (max-width: 767px) {
img {
max-width: 100%;
height: auto; } } #gWrapBg {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/bg.png); }
@media only screen and (min-width: 768px) {
#gWrapBg {
padding-bottom: 60px; } }
#gWrapBg.top {
padding-bottom: 0; }
.bg_b {
width: 100%; } #gHeader {
box-sizing: border-box; }
#gHeader #headerTop {
background-color: #3daad1;
padding: 5px 0; }
@media only screen and (max-width: 767px) {
#gHeader #headerTop {
display: none; } }
#gHeader h1 {
float: left;
font-size: 12px;
font-weight: normal; }
#gHeader .s_navi {
float: right; }
#gHeader .s_navi li {
float: left;
margin-right: 2em;
font-size: 12px; }
#gHeader .s_navi li a {
color: #fff; }
#gHeader .s_navi li:last-child {
margin-right: 0; }
@media only screen and (max-width: 767px) {
#gHeader h2 {
position: relative;
height: 50px;
text-align: center;
box-sizing: border-box;
padding-top: 14px; } }
#gHeader h2 #spmenu {
position: absolute;
right: 12px;
top: 14px;
z-index: 9999; }
#gHeader h2 #spmenu .menu-trigger,
#gHeader h2 #spmenu .menu-trigger span {
display: inline-block;
transition: all .4s;
box-sizing: border-box; }
#gHeader h2 #spmenu .menu-trigger {
position: relative;
width: 25px;
height: 22px; }
#gHeader h2 #spmenu .menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #4ea5c3;
border-radius: 4px; }
#gHeader h2 #spmenu .menu-trigger span:nth-of-type(1) {
top: 0; }
#gHeader h2 #spmenu .menu-trigger span:nth-of-type(2) {
top: 9px; }
#gHeader h2 #spmenu .menu-trigger span:nth-of-type(3) {
bottom: 0; }
#gHeader h2 #spmenu .menu-trigger span:nth-of-type(1) {
-webkit-animation: menu-bar01 .75s forwards;
animation: menu-bar01 .75s forwards; }
@-webkit-keyframes menu-bar01 {
0% {
-webkit-transform: translateY(9px) rotate(45deg); }
50% {
-webkit-transform: translateY(9px) rotate(0); }
100% {
-webkit-transform: translateY(0) rotate(0); } }
@keyframes menu-bar01 {
0% {
transform: translateY(9px) rotate(45deg); }
50% {
transform: translateY(9px) rotate(0); }
100% {
transform: translateY(0) rotate(0); } }
#gHeader h2 #spmenu .menu-trigger span:nth-of-type(2) {
transition: all .25s .25s;
opacity: 1; }
#gHeader h2 #spmenu .menu-trigger span:nth-of-type(3) {
-webkit-animation: menu-bar02 .75s forwards;
animation: menu-bar02 .75s forwards; }
@-webkit-keyframes menu-bar02 {
0% {
-webkit-transform: translateY(-9px) rotate(-45deg); }
50% {
-webkit-transform: translateY(-9px) rotate(0); }
100% {
-webkit-transform: translateY(0) rotate(0); } }
@keyframes menu-bar02 {
0% {
transform: translateY(-10px) rotate(-45deg); }
50% {
transform: translateY(-9px) rotate(0); }
100% {
transform: translateY(0) rotate(0); } }
#gHeader h2 #spmenu .menu-trigger.active span:nth-of-type(1) {
-webkit-animation: active-menu-bar01 .75s forwards;
animation: active-menu-bar01 .75s forwards; }
@-webkit-keyframes active-menu-bar01 {
0% {
-webkit-transform: translateY(0) rotate(0); }
50% {
-webkit-transform: translateY(9px) rotate(0); }
100% {
-webkit-transform: translateY(0px) rotate(45deg); } }
@keyframes active-menu-bar01 {
0% {
transform: translateY(0) rotate(0); }
50% {
transform: translateY(9px) rotate(0); }
100% {
transform: translateY(9px) rotate(45deg); } }
#gHeader h2 #spmenu .menu-trigger.active span:nth-of-type(2) {
opacity: 0; }
#gHeader h2 #spmenu .menu-trigger.active span:nth-of-type(3) {
-webkit-animation: active-menu-bar03 .75s forwards;
animation: active-menu-bar03 .75s forwards; }
@-webkit-keyframes active-menu-bar03 {
0% {
-webkit-transform: translateY(0) rotate(0); }
50% {
-webkit-transform: translateY(-9px) rotate(0); }
100% {
-webkit-transform: translateY(-9px) rotate(-45deg); } }
@keyframes active-menu-bar03 {
0% {
transform: translateY(0) rotate(0); }
50% {
transform: translateY(-9px) rotate(0); }
100% {
transform: translateY(-9px) rotate(-45deg); } }
#Header {
text-align: center; }
@media only screen and (min-width: 768px) {
#Header {
padding: 30px 0 40px 0; } } #gNavi {
border-bottom: 1px solid #c2e1ea;
margin-bottom: 15px; }
@media only screen and (max-width: 767px) {
#gNavi {
display: none; } }
#gNavi ul {
margin: 0 auto;
width: 980px;
position: relative; }
#gNavi ul li {
vertical-align: bottom;
float: left;
padding-bottom: 40px; }
#gNavi ul li:hover {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/icon03.png) center bottom no-repeat; }
#gNavi ul li a {
display: block;
padding-left: 20px;
border-left: 1px solid #ccc;
margin-right: 20px; }
#gNavi ul li a img {
vertical-align: text-top; }
#gNavi ul li a img:hover {
opacity: 1.0; }
#gNavi ul li:first-child a {
padding-left: 0;
border-left: none; }
#gNavi ul li.last {
margin-right: 0;
border-right: none; }
#gNavi .contact {
position: absolute;
top: -85px;
right: -20px;
width: 327px;
height: 217px;
z-index: 9999;
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/contact_bg.png) center top no-repeat; }
@media only screen and (max-width: 767px) {
#gNavi .contact {
display: none; } }
#gNavi .contact p {
text-align: center;
padding-top: 140px; }
#gNavi .contact.contactUnder {
top: -40px; }
.top #gNavi {
margin-bottom: 70px; } #gNaviSp {
position: absolute;
top: 0px;
left: 0;
z-index: 9998;
overflow: hidden;
width: 100%;
background-color: #fff;
padding-top: 30px;
opacity: 1;
animation-duration: 0.5s;
animation-name: fade-in;
-moz-animation-duration: 0.5s;
-moz-animation-name: fade-in;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fade-in; }
@keyframes fade-in {
0% {
display: none;
opacity: 0; }
1% {
display: block;
opacity: 0; }
100% {
display: block;
opacity: 1; } }
@-moz-keyframes fade-in {
0% {
display: none;
opacity: 0; }
1% {
display: block;
opacity: 0; }
100% {
display: block;
opacity: 1; } }
@-webkit-keyframes fade-in {
0% {
display: none;
opacity: 0; }
1% {
display: block;
opacity: 0; }
100% {
display: block;
opacity: 1; } }
@media only screen and (min-width: 768px) {
#gNaviSp {
display: none; } }
#gNaviSp.disnon {
opacity: 0; }
#gNaviSp .close {
text-align: right;
box-sizing: border-box;
padding: 23px 10px;
margin-bottom: 30px; }
#gNaviSp .close img {
float: right; }
#gNaviSp .aC {
margin-bottom: 45px; }
#gNaviSp .overlay {
background-color: #fff;
height: 2000px; }
#gNaviSp ul {
width: 180px;
margin: 0 auto 30px auto; }
#gNaviSp ul li {
list-style: none;
margin: 0 0 30px 0; }
#gNaviSp .under li {
margin: 0 0 15px 0; } #gContainer {
margin: 0 auto;
width: 980px; }
#gContainerInner {
padding: 0 12px; } @media only screen and (min-width: 768px) {
#gMainBody {
float: left;
width: 710px; } } @media only screen and (min-width: 768px) {
#side {
float: right;
width: 240px;
box-sizing: border-box; } } @media only screen and (min-width: 768px) {
.footArea {
padding-top: 50px;
margin-bottom: 70px; } }
@media only screen and (max-width: 767px) {
.footArea {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/bg.png);
padding-top: 40px; } }
.footArea .logoArea {
text-align: center;
width: 358px;
height: 353px;
float: left;
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/bg02.png) center top no-repeat;
padding-top: 75px; }
@media only screen and (max-width: 767px) {
.footArea .logoArea {
display: none; } }
.footArea .logoArea img {
margin-bottom: 20px; }
@media only screen and (min-width: 768px) {
.footArea .contactArea {
width: 595px;
float: right; } }
@media only screen and (min-width: 768px) {
.footArea .contactArea .contact {
margin-bottom: 20px;
position: relative;
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/contact_foot.png) center top no-repeat;
width: 606px;
height: 112px;
margin-left: -10px; } }
@media only screen and (min-width: 768px) {
.footArea .contactArea .contact p {
position: absolute;
bottom: -10px;
right: 25px;
margin-bottom: 0;
font-size: 13px; } }
@media only screen and (max-width: 767px) {
.footArea .contactArea .contact img {
margin-bottom: 10px; } }
.footArea .contactArea .info {
background-color: #feecd2;
position: relative; }
@media only screen and (min-width: 768px) {
.footArea .contactArea .info {
padding: 20px 10px 20px 175px;
margin-bottom: 20px; } }
@media only screen and (max-width: 767px) {
.footArea .contactArea .info {
padding: 85px 20px 20px 20px;
margin-bottom: 20px; } }
.footArea .contactArea .info img {
position: absolute; }
@media only screen and (min-width: 768px) {
.footArea .contactArea .info img {
top: 0;
left: 20px; } }
@media only screen and (max-width: 767px) {
.footArea .contactArea .info img {
top: -5px;
left: 15px; } }
.footArea .contactArea .info p {
margin-bottom: 0; }
.footArea .contactArea table {
border: 1px double #4ea5c3 !important;
width: 100%;
margin-bottom: 5px;
box-sizing: border-box; }
.footArea .contactArea table th {
background-color: #4ea5c3;
color: #fff;
text-align: center;
padding: 10px 15px;
border: 1px solid #ccc; }
@media only screen and (max-width: 767px) {
.footArea .contactArea table th {
padding: 5px 7px;
font-size: 7px; } }
.footArea .contactArea table td {
border: 1px solid  #ccc;
text-align: center;
padding: 10px; }
@media only screen and (max-width: 767px) {
.footArea .contactArea table td {
padding: 5px;
font-size: 7px; } }
@media only screen and (max-width: 767px) {
.footArea .contactArea table td img {
width: 15px;
height: auto; } }
@media only screen and (max-width: 767px) {
.footArea .contactArea .aR {
font-size: 12px; } }
.pagetopSp {
background-image: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/bg.png); }
.pagetopSp a {
display: block;
text-align: center;
background-color: rgba(49, 179, 219, 0.2);
padding: 10px 0; }
@media only screen and (min-width: 768px) {
.pagetopSp a {
display: none; } }
@media only screen and (max-width: 767px) {
#gFooter {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/bg.png); } }
#gFooter .logoAreaSp {
text-align: center;
padding: 20px 0 10px 0; }
#gFooter .logoAreaSp img {
width: 218px;
margin-bottom: 10px; }
@media only screen and (min-width: 768px) {
#gFooter .logoAreaSp {
display: none; } }
@media only screen and (min-width: 768px) {
#gFooter .footerNavi {
width: 700px;
margin: 0 auto 40px auto; } }
@media only screen and (max-width: 767px) {
#gFooter .footerNavi {
display: none; } }
#gFooter .footerNavi ul li {
float: left;
padding-right: 20px;
border-right: 1px solid #ccc;
margin-right: 20px; }
#gFooter .footerNavi ul li a img {
vertical-align: text-top; }
#gFooter .footerNavi ul li:last-child {
margin-right: 0;
border-right: none; }
#copy {
background-color: #4ea5c3;
text-align: center;
margin-top: -4px; }
#copy p {
color: #fff;
margin-bottom: 0;
font-weight: normal; }
@media only screen and (min-width: 768px) {
#copy p {
font-size: 12px; } }
@media only screen and (max-width: 767px) {
#copy p {
font-size: 10px; } }
@media only screen and (min-width: 768px) {
#copy {
padding: 10px 0; } }
@media only screen and (max-width: 767px) {
#copy {
padding: 10px 0; } } .separate {
width: 980px;
margin: 0 auto; }
.separate .separateInner {
overflow: hidden;
_zoom: 1; } .separate.col02 .separateInner {
width: 996px;
margin-right: -16px; }
.separate.col02 .col {
width: 482px;
float: left;
display: inline;
margin: 0 16px 0 0; } .separate.col03 .separateInner {
width: 996px;
margin-right: -16px; }
.separate.col03 .col {
width: 316px;
float: left;
display: inline;
margin: 0 16px 0 0; } @media only screen and (min-width: 768px) {
.inner {
width: 980px;
margin: auto; } }
@media only screen and (max-width: 767px) {
.inner {
padding: 0 10px; } }
@media only screen and (min-width: 768px) {
.indent {
width: 880px;
margin: auto; } }
@media only screen and (max-width: 767px) {
.indent {
padding: 0 10px; } }
.pagetop {
position: relative; }
.pagetop a {
display: block;
position: absolute;
right: 22px;
bottom: 0;
line-height: 0; }
.breadcrumbs {
font-size: 12px;
text-align: left;
padding-bottom: 15px; }
@media only screen and (min-width: 768px) {
.breadcrumbs .home {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/pankuzu.png) left center no-repeat;
padding-left: 30px;
color: #4ea5c3; } }
.aligncenter {
float: none;
clear: both;
display: block;
margin: 0 auto 10px auto; }
.alignright {
float: right;
margin: 0 0 10px 20px; }
.alignleft {
float: left;
margin: 0 20px 10px 0; }
h3 {
text-align: center;
margin-bottom: 20px; }
@media only screen and (max-width: 767px) {
h3 img {
max-width: 80%; } }
.border, #about #c01, #about #c02, #blog .blogArticle h3, #first .textBox, #first .step.border, #trafficaccident .area01 .box {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/border.png) center bottom no-repeat; }
@media only screen and (min-width: 768px) {
.border, #about #c01, #about #c02, #blog .blogArticle h3, #first .textBox, #first .step.border, #trafficaccident .area01 .box {
padding-bottom: 50px;
margin-bottom: 40px; } }
@media only screen and (max-width: 767px) {
.border, #about #c01, #about #c02, #blog .blogArticle h3, #first .textBox, #first .step.border, #trafficaccident .area01 .box {
padding-bottom: 40px;
margin-bottom: 20px; } }
a.btn {
border: 1px solid #4ea5c3;
border-radius: 3px;
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/arrow.png) 95% center no-repeat #fff;
padding: 4px 45px 7px 15px;
text-align: center;
color: #4ea5c3; }
@media only screen and (min-width: 768px) {
a.btn {
font-size: 15px;
display: inline-block; } }
@media only screen and (max-width: 767px) {
a.btn {
display: block;
font-size: 12px; } }
a.btn img {
vertical-align: middle; }
.bnone {
border-top: none !important; }
.wp-pagenavi {
text-align: center; }
.wp-pagenavi a, .wp-pagenavi span {
padding: 3px 7px !important; }
#topTitle {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/bg_title.png) center top repeat-x;
position: relative; }
#topTitle h2 {
text-align: center; }
@media only screen and (min-width: 768px) {
#topTitle h2 {
padding: 60px 0 70px;
margin-bottom: 60px; } }
@media only screen and (max-width: 767px) {
#topTitle h2 {
padding: 25px 0;
margin-bottom: 20px; } }
@media only screen and (max-width: 767px) {
#topTitle h2 img {
max-width: 70%; } }
#topTitle .nezumiIcon {
position: absolute; }
@media only screen and (min-width: 768px) {
#topTitle .nezumiIcon {
left: 50%;
margin-left: -490px;
width: 980px;
bottom: -40px; } }
@media only screen and (max-width: 767px) {
#topTitle .nezumiIcon {
display: none; } }
.content h3 {
text-align: left;
border-left: 4px solid #4ea5c3;
padding-left: 8px; }
@media only screen and (min-width: 768px) {
.content h3 {
font-size: 20px;
margin-bottom: 40px; } }
@media only screen and (max-width: 767px) {
.content h3 {
font-size: 16px; } }
@media only screen and (min-width: 768px) {
.content p {
font-size: 15px;
line-height: 2.0em; } }
@media only screen and (min-width: 768px) {
#about .aC {
margin-bottom: 50px; } }
@media only screen and (max-width: 767px) {
#about .aC {
margin-bottom: 30px; } }
@media only screen and (min-width: 768px) {
#about .menu {
margin-bottom: 70px; } }
@media only screen and (max-width: 767px) {
#about .menu {
margin: 0 auto 30px auto;
text-align: center;
max-width: 80%; } }
@media only screen and (min-width: 768px) {
#about .menu a {
margin-right: 15px; }
#about .menu a:last-child {
margin-right: 0px; } }
#about .box {
background: #fff;
border-radius: 10px; }
@media only screen and (min-width: 768px) {
#about .box {
padding: 30px 50px;
margin: 40px 0 60px; } }
@media only screen and (max-width: 767px) {
#about .box {
padding: 20px 10px;
margin: 20px 0 30px; } }
#about .box p span {
color: #4ea5c3; }
@media only screen and (min-width: 768px) {
#about .box p span {
font-size: 18px; } }
@media only screen and (max-width: 767px) {
#about .box p span {
font-size: 16px; } }
#about .box p span.col00 {
color: #3e3a39; }
#about .box p span.list {
float: left; }
@media only screen and (max-width: 767px) {
#about .box p span.list {
height: 3.0em; } }
@media only screen and (max-width: 767px) {
#about .box p span.hei {
height: 5.0em; } }
#about .supp {
font-size: 13px; }
#about #c01 .c01_area1 {
position: relative; }
@media only screen and (min-width: 768px) {
#about #c01 .c01_area1 {
width: 720px;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px; } }
@media only screen and (max-width: 767px) {
#about #c01 .c01_area1 {
margin-bottom: 40px; } }
@media only screen and (min-width: 768px) {
#about #c01 .c01_area1 .box {
padding-left: 190px;
margin-bottom: 20px; } }
@media only screen and (max-width: 767px) {
#about #c01 .c01_area1 .box {
margin-top: 50px;
padding-top: 70px; } }
#about #c01 .c01_area1 .box p {
margin-bottom: 5px; }
#about #c01 .c01_area1 .box img {
position: absolute; }
@media only screen and (min-width: 768px) {
#about #c01 .c01_area1 .box img {
top: 20px;
left: -18px; } }
@media only screen and (max-width: 767px) {
#about #c01 .c01_area1 .box img {
width: 100px;
height: auto;
top: -40px;
left: -10px; } }
#about #c01 .c01_area1 a {
display: block;
box-sizing: border-box; }
@media only screen and (min-width: 768px) {
#about #c01 .c01_area1 a {
float: left;
width: 344px;
margin-right: 30px; }
#about #c01 .c01_area1 a:last-child {
margin-right: 0; } }
@media only screen and (max-width: 767px) {
#about #c01 .c01_area1 a {
margin-bottom: 10px; } }
#about #c01 .c01_area2 {
position: relative; }
@media only screen and (min-width: 768px) {
#about #c01 .c01_area2 {
width: 720px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px; } }
@media only screen and (min-width: 768px) {
#about #c01 .c01_area2 .box {
padding-left: 60px;
margin-bottom: 20px; } }
@media only screen and (max-width: 767px) {
#about #c01 .c01_area2 .box {
margin-top: 50px;
padding-top: 20px; } }
#about #c01 .c01_area2 .box img {
position: absolute; }
@media only screen and (min-width: 768px) {
#about #c01 .c01_area2 .box img {
top: 20px;
right: -18px; } }
@media only screen and (max-width: 767px) {
#about #c01 .c01_area2 .box img {
width: 90px;
top: -40px;
right: -10px; } }
@media only screen and (max-width: 767px) {
#about #c01 .c01_area2 .box span {
font-size: 15px;
padding-right: 30px; } }
#about #c01 .c01_area2 a {
display: block;
box-sizing: border-box; }
@media only screen and (min-width: 768px) {
#about #c01 .c01_area2 a {
padding: 7px 10px; } }
@media only screen and (min-width: 768px) {
#about #c02 a.btn {
padding: 15px 0 17px 0; } }
#about #c03 h4 {
color: #4ea5c3;
font-weight: normal;
margin-bottom: 20px; }
@media only screen and (min-width: 768px) {
#about #c03 h4 {
font-size: 27px; } }
@media only screen and (max-width: 767px) {
#about #c03 h4 {
font-size: 16px;
margin-bottom: 10px; } }
#about #c03 table {
border: 2px double #666464 !important;
width: 100%;
margin-bottom: 10px;
box-sizing: border-box; }
@media only screen and (min-width: 768px) {
#about #c03 table {
font-size: 15px; } }
#about #c03 table th {
background-color: #c4e5f1;
text-align: center;
padding: 10px 15px;
border: 1px solid #666464;
font-weight: normal;
width: 23%;
vertical-align: middle; }
#about #c03 table td {
border: 1px solid  #666464;
text-align: center;
padding: 10px;
width: 17%;
vertical-align: middle; }
#about #c03 table .txt {
font-size: 13px;
width: 60%;
vertical-align: middle;
text-align: left; }
@media only screen and (max-width: 767px) {
#blog img {
display: block;
margin: 0 auto; } }
#blog .blogArticle {
background-color: #fff;
position: relative;
margin-top: 10px; }
@media only screen and (min-width: 768px) {
#blog .blogArticle {
padding: 60px 30px 10px 30px;
margin-bottom: 50px; } }
@media only screen and (max-width: 767px) {
#blog .blogArticle {
padding: 30px 10px 10px 10px;
margin-bottom: 30px; } }
#blog .blogArticle .cate {
position: absolute;
left: 30px;
top: -10px;
display: inline-block;
background-color: #4ea5c3;
line-height: 1.0em; }
@media only screen and (min-width: 768px) {
#blog .blogArticle .cate {
font-size: 15px;
padding: 10px 20px; } }
@media only screen and (max-width: 767px) {
#blog .blogArticle .cate {
font-size: 12px;
padding: 5px 10px; } }
#blog .blogArticle .cate a {
color: #fff; }
#blog .blogArticle .cate::after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent; }
#blog .blogArticle .cate::after {
top: 0;
right: -10px;
border-style: solid;
border-width: 0 10px 10px 0;
border-bottom-color: #328aaa; }
#blog .blogArticle .date {
color: #4ea5c3;
margin-bottom: 0; }
#blog .blogArticle h3 {
font-weight: normal;
border-left: none; }
@media only screen and (min-width: 768px) {
#blog .blogArticle h3 {
font-size: 24px;
padding: 0 0 20px 0; } }
@media only screen and (max-width: 767px) {
#blog .blogArticle h3 {
font-size: 16px;
padding: 0 0 20px 0;
margin-bottom: 20px; } }
#blog .blogArticle .contents {
margin-bottom: 20px; }
#blog .blogArticle .contents img {
max-width: 100%;
height: auto; }
@media only screen and (max-width: 767px) {
#blog .blogArticle .contents p {
word-wrap: break-word; } }
@media only screen and (min-width: 768px) {
#blog .blogArticle .sns {
width: 300px;
float: right;
margin-right: -50px; } }
#blog .blogArticle .sns div {
float: left; }
@media only screen and (min-width: 768px) {
#blog .blogArticle .sns div {
margin-right: 10px; } }
@media only screen and (max-width: 767px) {
#blog .blogArticle .sns div {
margin-right: 3px; } }
#blog .blogArticle .sns div:last-child {
margin-right: 0; }
#blog .blogArticle .category_foot {
clear: both;
text-align: right;
font-size: 11px; }
#blog .recommend {
background-color: #fff; }
@media only screen and (min-width: 768px) {
#blog .recommend {
padding: 10px 30px 30px; } }
@media only screen and (max-width: 767px) {
#blog .recommend {
padding: 10px; } }
@media only screen and (min-width: 768px) {
#blog .recommend .listArea {
margin-right: -40px; } }
@media only screen and (min-width: 768px) {
#blog .recommend .listArea .list {
float: left;
margin-right: 40px;
width: 295px; } }
#blog .recommend .listArea .list a {
display: block; }
#blog .recommend .listArea .list a p {
font-size: 12px; }
#blog .recommend .listArea .list a .thum {
width: 90px;
height: 60px;
overflow: hidden;
float: left;
position: relative;
margin-right: 10px; }
#blog .recommend .listArea .list a .thum img {
max-height: 60px;
width: auto;
max-width: 500%; }
@media only screen and (min-width: 768px) {
#blog #side {
padding-top: 70px; } }
#blog #side h4 {
margin: 20px 0 10px; }
#blog #side ul {
margin: 10px 0; }
#blog #side ul li {
margin-bottom: 10px;
padding-left: 10px; }
@media only screen and (min-width: 768px) {
#blog #side ul li {
font-size: 15px; } }
#blog #side .blogList {
margin: 10px 0; }
#blog #side .blogList li {
border-bottom: 1px dotted #000;
padding-bottom: 10px;
margin-bottom: 10px;
line-height: 1.2em; }
@media only screen and (min-width: 768px) {
#blog #side .blogList li {
font-size: 15px; } }
#blog #side .blogList li .date {
color: #4ea5c3; }
@media only screen and (min-width: 768px) {
#blog #side .blogList li .date {
font-size: 13px; } }
@media only screen and (max-width: 767px) {
#blog #side .blogList li .date {
font-size: 11px; } }
#blog #side .blogList li:last-child {
border-bottom: none;
padding-bottom: 0; } @media only screen and (max-width: 767px) {
#first img {
margin-bottom: 10px; } }
@media only screen and (min-width: 768px) {
#first .textBox {
padding-top: 10px; } }
@media only screen and (min-width: 768px) {
#first .textBox img {
float: right;
margin-left: 40px;
margin-top: -10px; } }
@media only screen and (min-width: 768px) {
#first .step {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/first/border.png) right bottom no-repeat;
padding: 0 0 30px 0;
margin-bottom: 10px; } }
@media only screen and (max-width: 767px) {
#first .step {
position: relative;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
text-align: center; } }
@media only screen and (min-width: 768px) {
#first .step .stepicon {
float: left;
margin-right: 25px; } }
@media only screen and (max-width: 767px) {
#first .step .stepicon {
position: absolute;
left: 0;
top: 0;
width: 75px;
height: 75px; } }
@media only screen and (min-width: 768px) {
#first .step .txt {
float: left;
width: 448px;
padding: 20px 0 0px 0; } }
@media only screen and (max-width: 767px) {
#first .step .txt {
position: relative;
text-align: left; } }
@media only screen and (max-width: 767px) {
#first .step .txt p {
padding-top: 15px; } }
@media only screen and (min-width: 768px) {
#first .step .stepimg {
float: right;
padding-top: 20px; } }
@media only screen and (max-width: 767px) {
#first .step .stepimg {
clear: both;
margin: 0 auto; } }
#first .step h4 {
color: #4ea5c3;
font-weight: normal; }
@media only screen and (min-width: 768px) {
#first .step h4 {
font-size: 20px;
margin-bottom: 25px; } }
@media only screen and (max-width: 767px) {
#first .step h4 {
display: table-cell;
vertical-align: middle;
height: 75px;
font-size: 16px;
padding-left: 85px; } }
#first #about .step#c01, #about #first .step#c01, #first #about .step#c02, #about #first .step#c02, #first #blog .blogArticle h3.step, #blog .blogArticle #first h3.step, #first .step.textBox, #first .step.border, #first #trafficaccident .area01 .step.box, #trafficaccident .area01 #first .step.box {
border-bottom: none; }
@media only screen and (min-width: 768px) {
#first .leftBox {
width: 400px;
float: left; } }
@media only screen and (max-width: 767px) {
#first .leftBox {
margin-bottom: 40px; } }
#first .leftBox .tit {
color: #4ea5c3;
font-weight: bold;
margin-bottom: 5px; }
@media only screen and (min-width: 768px) {
#first .leftBox .tit {
font-size: 18px; } }
@media only screen and (max-width: 767px) {
#first .leftBox .tit {
font-size: 15px; } }
@media only screen and (max-width: 767px) {
#first .leftBox .btn {
font-size: 10px; } }
@media only screen and (min-width: 768px) {
#first .rightBox {
width: 400px;
float: right; } } @media only screen and (max-width: 767px) {
#privacy {
padding-bottom: 5px; }
#privacy img {
display: block;
margin: 0 auto; } }
#privacy p {
margin-bottom: 40px; }
#privacy span {
color: #4ea5c3; }
#privacy h3 {
margin-top: 50px;
margin-bottom: 20px; } #gHeader .toppageHeader {
position: relative; }
@media only screen and (min-width: 768px) {
#gHeader .toppageHeader {
height: 530px;
margin-bottom: 30px; } }
@media only screen and (min-width: 768px) {
#gHeader .toppageHeader h2 {
width: 980px;
position: absolute;
left: 50%;
margin-left: -490px;
top: 20px;
z-index: 5; } }
#gHeader .toppageHeader .catch {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
margin: auto; }
@media only screen and (min-width: 768px) {
#gHeader .toppageHeader .catch {
top: 60px;
width: 672px;
height: 97px; } }
@media only screen and (max-width: 767px) {
#gHeader .toppageHeader .catch {
top: 50px;
width: 300px;
height: 43px; } }
@media only screen and (min-width: 768px) {
#gHeader .toppageHeader #mainImageBloc {
padding-top: 70px;
position: relative;
overflow: hidden;
margin-bottom: 70px; } }
@media only screen and (max-width: 767px) {
#gHeader .toppageHeader #mainImageBloc {
display: none; } }
#gHeader .toppageHeader #mainImageBloc .bx-viewport {
overflow: visible !important;
width: 1040px !important; }
#gHeader .toppageHeader #mainImageBloc .bx-prev {
left: -50px;
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/prev.png) no-repeat; }
@media only screen and (max-width: 767px) {
#gHeader .toppageHeader #mainImageBloc .bx-prev {
display: none; } }
#gHeader .toppageHeader #mainImageBloc .bx-next {
right: -50px;
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/next.png) no-repeat; }
@media only screen and (max-width: 767px) {
#gHeader .toppageHeader #mainImageBloc .bx-next {
display: none; } }
#gHeader .toppageHeader #mainImageBloc .bx-wrapper .bx-controls-direction a {
top: 50%;
margin-top: -30px;
width: 37px;
height: 71px; }
#gHeader .toppageHeader #mainImageBloc #mainImage {
overflow: hidden; }
@media only screen and (min-width: 768px) {
#gHeader .toppageHeader #mainImageBloc li {
height: 465px;
background-color: #fff; } }
@media only screen and (min-width: 768px) {
#gHeader .toppageHeader #mainImageBloc .mask {
position: absolute;
left: 0;
top: 0;
z-index: 4; } }
@media only screen and (max-width: 767px) {
#gHeader .toppageHeader #mainImageBloc .mask {
display: none; } }
@media only screen and (min-width: 768px) {
#gHeader .toppageHeader #mainImageBloc .image {
margin: 0 auto; } }
@media only screen and (max-width: 767px) {
#topPage01 {
padding-top: 30px; } }
@media only screen and (min-width: 768px) {
#topPage01 .title01 {
margin-bottom: 10px; } }
@media only screen and (max-width: 767px) {
#topPage01 .textBox01 {
margin-bottom: 40px; } }
@media only screen and (min-width: 768px) {
#topPage01 .textBox01 img {
float: right;
display: inline;
margin-left: 24px;
margin-right: -25px; } }
@media only screen and (min-width: 768px) {
#topPage01 .textBox01 p {
padding-top: 30px;
font-size: 15px;
overflow: hidden; } }
#topPage01 .top_kodawari {
text-align: center; }
@media only screen and (min-width: 768px) {
#topPage01 .top_kodawari {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/bg01.png) left top repeat-x;
margin-bottom: 45px; } }
@media only screen and (max-width: 767px) {
#topPage01 .top_kodawari {
padding: 0 20px;
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/sp/bg.png) center top repeat-x;
background-size: contain;
margin-bottom: 20px; } }
@media only screen and (min-width: 768px) {
#topPage01 .top_kodawari img {
margin-top: -30px; } }
@media only screen and (max-width: 767px) {
#topPage01 .top_kodawari img {
margin-top: -15px; } }
@media only screen and (min-width: 768px) {
#topPage01 .top_anatani {
width: 780px;
margin: 0 auto 70px auto; } }
@media only screen and (max-width: 767px) {
#topPage01 .top_anatani {
padding: 0 20px;
margin: 0 auto 30px auto; } }
#topPage01 .top_anatani .box .left {
display: block;
float: left; }
#topPage01 .top_anatani .box .right {
display: block;
float: right; }
@media only screen and (max-width: 767px) {
#topPage01 .top_anatani img {
margin-bottom: 15px; } }
@media only screen and (min-width: 768px) {
#topPage01 .top_nayami {
max-width: 1200px;
margin: 0 auto 70px auto; } }
@media only screen and (max-width: 767px) {
#topPage01 .top_nayami {
margin-bottom: 30px; } }
@media only screen and (min-width: 768px) {
#topPage01 .top_nayami a {
display: block;
float: left;
width: 33.33%;
padding: 5px;
box-sizing: border-box; } }
#topPage01 .top_nayami a img {
max-width: 100%;
height: auto; }
@media only screen and (max-width: 767px) {
#topPage01 .top_nayami a img {
margin-bottom: 10px; } }
#topPage01 .title02 {
text-align: center; }
#topPage01 .btn_0 {
text-align: center; }
@media only screen and (min-width: 768px) {
#topPage01 .btn_0 {
margin: 25px 0 20px; } }
@media only screen and (max-width: 767px) {
#topPage01 .btn_0 {
margin: -20px 0 20px; } }
@media only screen and (min-width: 768px) {
#topPage01 .top_pumph {
margin: 40px 0 80px 0; }
#topPage01 .top_pumph p {
font-size: 15px;
margin-bottom: 30px; }
#topPage01 .top_pumph .btn_area {
width: 880px;
margin: 0 auto; }
#topPage01 .top_pumph .btn_area .btn {
width: 360px;
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px; }
#topPage01 .top_pumph .btn_area .btn:first-child {
margin-right: 30px; } }
@media only screen and (max-width: 767px) {
#topPage01 .top_pumph {
margin: 20px 0 40px 0; }
#topPage01 .top_pumph .btn_area .btn {
margin-bottom: 10px; } }
@media only screen and (min-width: 768px) {
#topPage02 {
padding-top: 40px; } }
@media only screen and (max-width: 767px) {
#topPage02 {
padding-top: 30px; } }
@media only screen and (min-width: 768px) {
#topPage02 h3 {
margin-bottom: 40px; } }
@media only screen and (max-width: 767px) {
#topPage02 h3 img {
max-width: 60%; } }
@media only screen and (min-width: 768px) {
#topPage02 .top_aisatsu {
margin-bottom: 60px; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_aisatsu {
margin-bottom: 40px; } }
#topPage02 .top_aisatsu .topBox {
position: relative; }
@media only screen and (min-width: 768px) {
#topPage02 .top_aisatsu .topBox {
margin-bottom: 60px; } }
@media only screen and (min-width: 768px) {
#topPage02 .top_aisatsu .topBox .incho {
float: left;
padding: 0 0 0 40px; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_aisatsu .topBox .incho {
margin-bottom: 10px; } }
@media only screen and (min-width: 768px) {
#topPage02 .top_aisatsu .topBox .rightBox {
float: right;
width: 342px; } }
#topPage02 .top_aisatsu .topBox .rightBox .name01 {
font-weight: bold;
margin-bottom: 0; }
@media only screen and (min-width: 768px) {
#topPage02 .top_aisatsu .topBox .rightBox .name01 {
font-size: 18px; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_aisatsu .topBox .rightBox .name01 {
font-size: 16px; } }
#topPage02 .top_aisatsu .topBox .rightBox .name02 {
font-weight: bold;
margin-bottom: 0; }
@media only screen and (min-width: 768px) {
#topPage02 .top_aisatsu .topBox .rightBox .name02 {
font-size: 30px; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_aisatsu .topBox .rightBox .name02 {
font-size: 24px; } }
#topPage02 .top_aisatsu .topBox .rightBox .kata {
color: #4ea5c3; }
@media only screen and (min-width: 768px) {
#topPage02 .top_aisatsu .topBox .rightBox .kata {
margin-bottom: 5px; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_aisatsu .topBox .rightBox .kata {
margin-bottom: 15px;
font-size: 15px; } }
@media only screen and (min-width: 768px) {
#topPage02 .top_aisatsu .topBox .nezumi {
position: absolute;
bottom: -10px;
left: -40px; } }
#topPage02 .top_aisatsu .tit {
font-weight: bold; }
@media only screen and (min-width: 768px) {
#topPage02 .top_aisatsu .tit {
font-size: 20px; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_aisatsu .tit {
font-size: 16px; } }
@media only screen and (min-width: 768px) {
#topPage02 .top_staff {
width: 665px;
margin: 0 auto 65px auto; } }
#topPage02 .top_staff h3 {
margin-bottom: 10px; }
#topPage02 .top_staff .tit {
text-align: center; }
@media only screen and (min-width: 768px) {
#topPage02 .top_staff .tit {
font-size: 16px; } }
#topPage02 .top_staff .staffslidePcBox {
margin-bottom: 40px; }
@media only screen and (min-width: 768px) {
#topPage02 .top_staff .staff {
float: left;
width: 200px;
margin: 0 20px 0 0; } }
@media only screen and (min-width: 768px) {
#topPage02 .top_staff .staff:last-child {
margin: 0 0 0 0; } }
#topPage02 .top_staff .staffslideSpBox {
width: 190px;
margin: 0 auto 30px auto; }
@media only screen and (min-width: 768px) {
#topPage02 .top_staff .staffslideSpBox {
display: none; } }
#topPage02 .top_staff .bx-prev {
left: -50px;
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/prev02.png) no-repeat; }
#topPage02 .top_staff .bx-next {
right: -70px;
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/next02.png) no-repeat; }
@media only screen and (max-width: 767px) {
#topPage02 .top_staff .bx-next {
right: -65px; } }
#topPage02 .top_staff .name {
text-align: center;
font-weight: bold; }
@media only screen and (min-width: 768px) {
#topPage02 .top_staff .name {
font-size: 18px; } }
@media only screen and (min-width: 768px) {
#topPage02 .top_blog {
width: 880px;
margin: 0 auto 70px auto; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_blog {
padding: 0 10px; } }
#topPage02 .top_blog .blogList {
position: relative; }
@media only screen and (min-width: 768px) {
#topPage02 .top_blog .blogList {
float: left;
width: 450px; } }
#topPage02 .top_blog .blogList .blogbtn {
position: absolute; }
@media only screen and (min-width: 768px) {
#topPage02 .top_blog .blogList .blogbtn {
right: 0px;
top: 5px; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_blog .blogList .blogbtn {
right: 0px;
bottom: -25px; } }
#topPage02 .top_blog .blogList h3 {
text-align: left; }
@media only screen and (min-width: 768px) {
#topPage02 .top_blog .blogList h3 {
margin-bottom: 15px; } }
#topPage02 .top_blog .blogList ul {
border-top: 1px solid #dad5bc; }
@media only screen and (max-width: 767px) {
#topPage02 .top_blog .blogList ul {
margin-bottom: 60px; } }
#topPage02 .top_blog .blogList ul li {
border-bottom: 1px solid #dad5bc;
padding: 10px 0; }
#topPage02 .top_blog .blogList ul li .date {
color: #4ea5c3;
font-size: 11px;
float: left;
width: 65px;
margin-right: 5px;
display: block; }
#topPage02 .top_blog .blogList ul li .cate {
display: block;
width: 110px;
float: left;
margin-right: 10px;
text-align: center;
background-color: #f57d7a;
font-size: 10px;
border-radius: 3px; }
#topPage02 .top_blog .blogList ul li .cate a {
color: #fff; }
#topPage02 .top_blog .blogList ul li .tit {
display: block;
overflow: hidden;
font-size: 12px; }
@media only screen and (max-width: 767px) {
#topPage02 .top_blog .blogList ul li .tit {
clear: both; } }
@media only screen and (min-width: 768px) {
#topPage02 .top_blog .banner {
padding-top: 20px;
float: right;
width: 395px; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_blog .banner {
margin-bottom: 30px;
text-align: center; } }
#topPage02 .top_blog .banner .left {
margin-right: 10px; }
@media only screen and (max-width: 767px) {
#topPage02 .top_blog .banner img {
margin-bottom: 20px; } }
#topPage02 .top_map #map {
width: 100%; }
@media only screen and (min-width: 768px) {
#topPage02 .top_map #map {
height: 430px; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_map #map {
height: 200px; } }
#topPage02 .top_map h3 {
text-align: left; }
@media only screen and (min-width: 768px) {
#topPage02 .top_map h3 {
width: 930px;
margin: 0 auto 20px auto; } }
@media only screen and (max-width: 767px) {
#topPage02 .top_map h3 {
padding: 0 10px; } } @media only screen and (max-width: 767px) {
#trafficaccident img {
display: block;
margin: 0 auto; } }
@media only screen and (min-width: 768px) {
#trafficaccident .leftImg {
float: left;
margin-right: 40px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .leftImg {
float: none;
display: block;
margin: 0 auto 10px auto; } }
@media only screen and (min-width: 768px) {
#trafficaccident .rightImg {
float: right;
margin-left: 40px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .rightImg {
float: none;
display: block;
margin: 0 auto 10px auto; } }
@media only screen and (min-width: 768px) {
#trafficaccident .aC {
margin-bottom: 70px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .aC {
margin-bottom: 35px; } }
@media only screen and (min-width: 768px) {
#trafficaccident .area01 {
margin-bottom: 40px; } }
@media only screen and (min-width: 768px) {
#trafficaccident .area01 .leftbox {
width: 550px;
padding-left: 50px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area01 .rightImg {
max-width: 240px;
height: auto; } }
@media only screen and (min-width: 768px) {
#trafficaccident .area01 .box {
padding: 0 0 30px 0;
margin: 0 0 20px 0; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area01 .box {
padding: 0 0 20px 0;
margin: 0 0 10px 0; } }
#trafficaccident .area01 .box img {
margin-bottom: 10px; }
#trafficaccident .area01 .box:last-child {
background-image: none;
padding-bottom: 0; }
#trafficaccident .area02_top {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/trafficaccident/bg_top.png) center top no-repeat;
background-size: cover;
height: 40px; }
#trafficaccident .area02_bot {
background: url(//harinezumi-yuuki.com/wp/wp-content/themes/yuuki/images/trafficaccident/bg_bot.png) center bottom no-repeat;
background-size: cover;
height: 60px; }
@media only screen and (min-width: 768px) {
#trafficaccident .area02_bot {
margin-bottom: 50px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area02_bot {
margin-bottom: 30px; } }
#trafficaccident .area02 {
background-color: rgba(61, 170, 209, 0.15); }
#trafficaccident .area02 .title {
position: relative;
text-align: center; }
@media only screen and (min-width: 768px) {
#trafficaccident .area02 .title {
margin-bottom: 50px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area02 .title {
margin-bottom: 30px;
padding-left: 20px; } }
#trafficaccident .area02 .title .nezumi {
position: absolute; }
@media only screen and (min-width: 768px) {
#trafficaccident .area02 .title .nezumi {
top: -50px;
left: 70px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area02 .title .nezumi {
top: 0px;
left: -5px;
width: 40px;
height: auto; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area02 .title img {
max-width: 80%; } }
#trafficaccident .area02 .cf, #trafficaccident .area02 #gHeader, #trafficaccident .area02 #gHeader #headerTop, #gHeader #trafficaccident .area02 #headerTop, #trafficaccident .area02 #gNavi ul, #gNavi #trafficaccident .area02 ul, #trafficaccident .area02 #gNaviSp .close, #gNaviSp #trafficaccident .area02 .close, #trafficaccident .area02 #gContainer, #trafficaccident .area02 #gContainerInner, #trafficaccident .area02 .footArea, #trafficaccident .area02 #gFooter, #trafficaccident .area02 #gFooter .footerNavi, #gFooter #trafficaccident .area02 .footerNavi, #trafficaccident .area02 #gFooter .footerNavi ul, #gFooter .footerNavi #trafficaccident .area02 ul, #trafficaccident .area02 .separate, #trafficaccident .area02 .pagetop, #trafficaccident .area02 #about .menu, #about #trafficaccident .area02 .menu, #trafficaccident .area02 #about .box p, #about .box #trafficaccident .area02 p, #trafficaccident .area02 #blog .blogArticle .contents, #blog .blogArticle #trafficaccident .area02 .contents, #trafficaccident .area02 #blog .blogArticle .sns, #blog .blogArticle #trafficaccident .area02 .sns, #trafficaccident .area02 #blog .recommend .listArea, #blog .recommend #trafficaccident .area02 .listArea, #trafficaccident .area02 #blog .recommend .listArea .list a, #blog .recommend .listArea .list #trafficaccident .area02 a, #trafficaccident .area02 #first .textBox, #first #trafficaccident .area02 .textBox, #trafficaccident .area02 #first .step, #first #trafficaccident .area02 .step, #trafficaccident .area02 #first .step .txt, #first .step #trafficaccident .area02 .txt, #trafficaccident .area02 #topPage01 .textBox01, #topPage01 #trafficaccident .area02 .textBox01, #trafficaccident .area02 #topPage01 .top_anatani .box, #topPage01 .top_anatani #trafficaccident .area02 .box, #trafficaccident .area02 #topPage01 .top_nayami, #topPage01 #trafficaccident .area02 .top_nayami, #trafficaccident .area02 #topPage02 .top_aisatsu .topBox, #topPage02 .top_aisatsu #trafficaccident .area02 .topBox, #trafficaccident .area02 #topPage02 .top_staff .staffslidePcBox, #topPage02 .top_staff #trafficaccident .area02 .staffslidePcBox, #trafficaccident .area02 #topPage02 .top_blog, #topPage02 #trafficaccident .area02 .top_blog, #trafficaccident .area02 .area01 {
margin-bottom: 20px; }
@media only screen and (min-width: 768px) {
#trafficaccident .area02 .cf .leftImg, #trafficaccident .area02 #gHeader .leftImg, #gHeader #trafficaccident .area02 #headerTop .leftImg, #trafficaccident .area02 #gNavi ul .leftImg, #gNavi #trafficaccident .area02 ul .leftImg, #trafficaccident .area02 #gNaviSp .close .leftImg, #gNaviSp #trafficaccident .area02 .close .leftImg, #trafficaccident .area02 #gContainer .leftImg, #trafficaccident .area02 #gContainerInner .leftImg, #trafficaccident .area02 .footArea .leftImg, #trafficaccident .area02 #gFooter .leftImg, #gFooter #trafficaccident .area02 .footerNavi .leftImg, #gFooter .footerNavi #trafficaccident .area02 ul .leftImg, #trafficaccident .area02 .separate .leftImg, #trafficaccident .area02 .pagetop .leftImg, #trafficaccident .area02 #about .menu .leftImg, #about #trafficaccident .area02 .menu .leftImg, #trafficaccident .area02 #about .box p .leftImg, #about .box #trafficaccident .area02 p .leftImg, #trafficaccident .area02 #blog .blogArticle .contents .leftImg, #blog .blogArticle #trafficaccident .area02 .contents .leftImg, #trafficaccident .area02 #blog .blogArticle .sns .leftImg, #blog .blogArticle #trafficaccident .area02 .sns .leftImg, #trafficaccident .area02 #blog .recommend .listArea .leftImg, #blog .recommend #trafficaccident .area02 .listArea .leftImg, #blog .recommend .listArea .list #trafficaccident .area02 a .leftImg, #trafficaccident .area02 #first .textBox .leftImg, #first #trafficaccident .area02 .textBox .leftImg, #trafficaccident .area02 #first .step .leftImg, #first #trafficaccident .area02 .step .leftImg, #first .step #trafficaccident .area02 .txt .leftImg, #trafficaccident .area02 #topPage01 .textBox01 .leftImg, #topPage01 #trafficaccident .area02 .textBox01 .leftImg, #trafficaccident .area02 #topPage01 .top_anatani .box .leftImg, #topPage01 .top_anatani #trafficaccident .area02 .box .leftImg, #trafficaccident .area02 #topPage01 .top_nayami .leftImg, #topPage01 #trafficaccident .area02 .top_nayami .leftImg, #trafficaccident .area02 #topPage02 .top_aisatsu .topBox .leftImg, #topPage02 .top_aisatsu #trafficaccident .area02 .topBox .leftImg, #trafficaccident .area02 #topPage02 .top_staff .staffslidePcBox .leftImg, #topPage02 .top_staff #trafficaccident .area02 .staffslidePcBox .leftImg, #trafficaccident .area02 #topPage02 .top_blog .leftImg, #topPage02 #trafficaccident .area02 .top_blog .leftImg, #trafficaccident .area02 .area01 .leftImg {
width: 260px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area02 .cf .leftImg, #trafficaccident .area02 #gHeader .leftImg, #gHeader #trafficaccident .area02 #headerTop .leftImg, #trafficaccident .area02 #gNavi ul .leftImg, #gNavi #trafficaccident .area02 ul .leftImg, #trafficaccident .area02 #gNaviSp .close .leftImg, #gNaviSp #trafficaccident .area02 .close .leftImg, #trafficaccident .area02 #gContainer .leftImg, #trafficaccident .area02 #gContainerInner .leftImg, #trafficaccident .area02 .footArea .leftImg, #trafficaccident .area02 #gFooter .leftImg, #gFooter #trafficaccident .area02 .footerNavi .leftImg, #gFooter .footerNavi #trafficaccident .area02 ul .leftImg, #trafficaccident .area02 .separate .leftImg, #trafficaccident .area02 .pagetop .leftImg, #trafficaccident .area02 #about .menu .leftImg, #about #trafficaccident .area02 .menu .leftImg, #trafficaccident .area02 #about .box p .leftImg, #about .box #trafficaccident .area02 p .leftImg, #trafficaccident .area02 #blog .blogArticle .contents .leftImg, #blog .blogArticle #trafficaccident .area02 .contents .leftImg, #trafficaccident .area02 #blog .blogArticle .sns .leftImg, #blog .blogArticle #trafficaccident .area02 .sns .leftImg, #trafficaccident .area02 #blog .recommend .listArea .leftImg, #blog .recommend #trafficaccident .area02 .listArea .leftImg, #blog .recommend .listArea .list #trafficaccident .area02 a .leftImg, #trafficaccident .area02 #first .textBox .leftImg, #first #trafficaccident .area02 .textBox .leftImg, #trafficaccident .area02 #first .step .leftImg, #first #trafficaccident .area02 .step .leftImg, #first .step #trafficaccident .area02 .txt .leftImg, #trafficaccident .area02 #topPage01 .textBox01 .leftImg, #topPage01 #trafficaccident .area02 .textBox01 .leftImg, #trafficaccident .area02 #topPage01 .top_anatani .box .leftImg, #topPage01 .top_anatani #trafficaccident .area02 .box .leftImg, #trafficaccident .area02 #topPage01 .top_nayami .leftImg, #topPage01 #trafficaccident .area02 .top_nayami .leftImg, #trafficaccident .area02 #topPage02 .top_aisatsu .topBox .leftImg, #topPage02 .top_aisatsu #trafficaccident .area02 .topBox .leftImg, #trafficaccident .area02 #topPage02 .top_staff .staffslidePcBox .leftImg, #topPage02 .top_staff #trafficaccident .area02 .staffslidePcBox .leftImg, #trafficaccident .area02 #topPage02 .top_blog .leftImg, #topPage02 #trafficaccident .area02 .top_blog .leftImg, #trafficaccident .area02 .area01 .leftImg {
text-align: center; } }
#trafficaccident .area02 .cf .leftImg img, #trafficaccident .area02 #gHeader .leftImg img, #gHeader #trafficaccident .area02 #headerTop .leftImg img, #trafficaccident .area02 #gNavi ul .leftImg img, #gNavi #trafficaccident .area02 ul .leftImg img, #trafficaccident .area02 #gNaviSp .close .leftImg img, #gNaviSp #trafficaccident .area02 .close .leftImg img, #trafficaccident .area02 #gContainer .leftImg img, #trafficaccident .area02 #gContainerInner .leftImg img, #trafficaccident .area02 .footArea .leftImg img, #trafficaccident .area02 #gFooter .leftImg img, #gFooter #trafficaccident .area02 .footerNavi .leftImg img, #gFooter .footerNavi #trafficaccident .area02 ul .leftImg img, #trafficaccident .area02 .separate .leftImg img, #trafficaccident .area02 .pagetop .leftImg img, #trafficaccident .area02 #about .menu .leftImg img, #about #trafficaccident .area02 .menu .leftImg img, #trafficaccident .area02 #about .box p .leftImg img, #about .box #trafficaccident .area02 p .leftImg img, #trafficaccident .area02 #blog .blogArticle .contents .leftImg img, #blog .blogArticle #trafficaccident .area02 .contents .leftImg img, #trafficaccident .area02 #blog .blogArticle .sns .leftImg img, #blog .blogArticle #trafficaccident .area02 .sns .leftImg img, #trafficaccident .area02 #blog .recommend .listArea .leftImg img, #blog .recommend #trafficaccident .area02 .listArea .leftImg img, #blog .recommend .listArea .list #trafficaccident .area02 a .leftImg img, #trafficaccident .area02 #first .textBox .leftImg img, #first #trafficaccident .area02 .textBox .leftImg img, #trafficaccident .area02 #first .step .leftImg img, #first #trafficaccident .area02 .step .leftImg img, #first .step #trafficaccident .area02 .txt .leftImg img, #trafficaccident .area02 #topPage01 .textBox01 .leftImg img, #topPage01 #trafficaccident .area02 .textBox01 .leftImg img, #trafficaccident .area02 #topPage01 .top_anatani .box .leftImg img, #topPage01 .top_anatani #trafficaccident .area02 .box .leftImg img, #trafficaccident .area02 #topPage01 .top_nayami .leftImg img, #topPage01 #trafficaccident .area02 .top_nayami .leftImg img, #trafficaccident .area02 #topPage02 .top_aisatsu .topBox .leftImg img, #topPage02 .top_aisatsu #trafficaccident .area02 .topBox .leftImg img, #trafficaccident .area02 #topPage02 .top_staff .staffslidePcBox .leftImg img, #topPage02 .top_staff #trafficaccident .area02 .staffslidePcBox .leftImg img, #trafficaccident .area02 #topPage02 .top_blog .leftImg img, #topPage02 #trafficaccident .area02 .top_blog .leftImg img, #trafficaccident .area02 .area01 .leftImg img {
margin-bottom: 20px; }
@media only screen and (min-width: 768px) {
#trafficaccident .area02 strong {
font-size: 18px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area02 strong {
font-size: 16px;
padding: 10px 0; } }
@media only screen and (min-width: 768px) {
#trafficaccident .area02 .contact {
width: 600px;
margin: 0 auto; } }
#trafficaccident .area02 .contact p {
font-size: 12px;
line-height: 1.4em;
margin-bottom: 0; }
#trafficaccident .area02 .contact .box {
background-color: #fff;
position: relative;
border-radius: 10px;
text-align: center;
margin-bottom: 15px; }
@media only screen and (min-width: 768px) {
#trafficaccident .area02 .contact .box {
padding: 60px 0 20px 0; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area02 .contact .box {
padding: 40px 10px 10px 10px; } }
#trafficaccident .area02 .contact .box .txt {
position: absolute; }
@media only screen and (min-width: 768px) {
#trafficaccident .area02 .contact .box .txt {
top: -10px;
left: 40px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area02 .contact .box .txt {
top: -10px;
left: 0px;
max-width: 90%;
height: auto; } }
#trafficaccident .area02 .contact .box img {
margin-bottom: 15px; }
@media only screen and (max-width: 767px) {
#trafficaccident .area02 .contact .box p {
text-align: left; }
#trafficaccident .area02 .contact .box p br {
display: none; } }
@media only screen and (min-width: 768px) {
#trafficaccident .area03 .separate {
width: 1020px;
margin: 0 -40px 0 0; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area03 .separate {
width: 100%; } }
@media only screen and (min-width: 768px) {
#trafficaccident .area03 .separate .box {
float: left;
width: 300px;
margin-right: 40px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area03 .separate .box {
margin-bottom: 40px; } }
#trafficaccident .area03 .separate .box img {
margin-bottom: 10px; }
#trafficaccident .area03 .separate .box .tit {
color: #4ea5c3;
font-weight: bold;
margin-bottom: 5px;
text-align: center; }
@media only screen and (min-width: 768px) {
#trafficaccident .area03 .separate .box .tit {
font-size: 18px; } }
@media only screen and (max-width: 767px) {
#trafficaccident .area03 .separate .box .tit {
font-size: 16px; } }