@charset "utf-8"; .b_01,.b_02{margin:0 0 2em}.b_02 p{margin:0 0 1em}.b_02 p:last-child{margin:0}.b_03{margin:0 0 2em}.b_03 span{display:block;margin:0 0 1em;line-height:1px;text-align:center}.b_03 span:last-child{margin:0}.b_03 img{width:100%;height:auto;margin:0 auto}.b_03.b_03_column2{display:table;table-layout:fixed;border-collapse:collapse;border:none;width:100%;line-height:1px}.b_03.b_03_column2 span,.b_03.b_03_column2 span:last-child{margin:0}.b_03.b_03_column2 div.column_l{display:table-cell;width:auto;padding-right:5px;line-height:1px;vertical-align:top}.b_03.b_03_column2 div.column_r{display:table-cell;width:auto;padding-left:5px;line-height:1px;vertical-align:top}.b_03.b_03_column3{display:table;table-layout:auto;border-collapse:collapse;border:none;width:100%;line-height:1px}.b_03.b_03_column3 div.column_c,.b_03.b_03_column3 div.column_l,.b_03.b_03_column3 div.column_r{display:table-cell;width:32%;vertical-align:top}.b_03.b_03_column3 div.column_blank{display:table-cell;width:auto;vertical-align:top}.b_03.b_03_column3 div.column_c span,.b_03.b_03_column3 div.column_l span,.b_03.b_03_column3 div.column_r span{display:block;width:auto}@media screen and (max-width:600px){.b_03.b_03_column2{display:block;width:100%;line-height:1px}.b_03.b_03_column2 div.column_l{display:block;width:auto;margin:0 0 1em;padding-right:0;line-height:1px}.b_03.b_03_column2 div.column_r{display:block;width:auto;padding-left:0;line-height:1px}.b_03.b_03_column3,.b_03.b_03_column3 div.column_c,.b_03.b_03_column3 div.column_l,.b_03.b_03_column3 div.column_r{display:block;width:100%}.b_03.b_03_column3 div.column_blank{display:none}.b_03.b_03_column3 div.column_c,.b_03.b_03_column3 div.column_l{margin:0 0 1em}.b_03.b_03_column3 div.column_r{margin:0}}.b_04{margin:0 0 2em}.b_04_in{margin:0 0 1em}.b_04_in:last-child{margin:0}.b_04 .b_04_in div{margin:0 0 .3em}.b_04 .b_04_in span img{display:block;float:left;width:30%;margin:0 .5em .5em 0}.b_04 img{width:100%;height:auto;margin:0 auto}.b_04.b_04_column2{display:table;table-layout:fixed;border-collapse:collapse;border:none;width:100%}.b_04.b_04_column2 div.column_l{display:table-cell;width:auto;padding-right:5px;vertical-align:top}.b_04.b_04_column2 div.column_r{display:table-cell;width:auto;padding-left:5px;vertical-align:top}.b_04.b_04_column2 div.column_l div,.b_04.b_04_column2 div.column_r div{margin:0 0 .3em}.b_04.b_04_column2 div.column_l span,.b_04.b_04_column2 div.column_r span{display:block;float:none;width:100%;margin:0 0 .5em}.b_04.b_04_column3{display:table;table-layout:auto;border-collapse:collapse;border:none;width:100%}.b_04.b_04_column3 div.column_c,.b_04.b_04_column3 div.column_l,.b_04.b_04_column3 div.column_r{display:table-cell;width:32%;vertical-align:top}.b_04.b_04_column3 div.column_blank{display:table-cell;width:auto;vertical-align:top}.b_04.b_04_column3 div.column_c div,.b_04.b_04_column3 div.column_l div,.b_04.b_04_column3 div.column_r div{margin:0 0 .3em}.b_04.b_04_column3 div.column_c span,.b_04.b_04_column3 div.column_l span,.b_04.b_04_column3 div.column_r span{display:block;float:none;width:100%;margin:0 0 .5em}.b_04.b_04_column3 div.column_c span p,.b_04.b_04_column3 div.column_l span p,.b_04.b_04_column3 div.column_r span p{line-height:normal}@media screen and (max-width:600px){.b_04_img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_04.b_04_column2{display:block;width:100%}.b_04.b_04_column2 div.column_l{display:block;width:auto;margin:0 0 1em;padding-right:0}.b_04.b_04_column2 div.column_r{display:block;width:auto;padding-left:0}.b_04.b_04_column3,.b_04.b_04_column3 div.column_c,.b_04.b_04_column3 div.column_l,.b_04.b_04_column3 div.column_r{display:block;width:100%}.b_04.b_04_column3 div.column_c,.b_04.b_04_column3 div.column_l{margin:0 0 1em}.b_04.b_04_column3 div.column_blank{display:none;width:auto}}.b_05{width:100%;margin:0 auto 2em}.b_06{margin:0 0 2em}.b_06 table{display:table;table-layout:auto;border-collapse:collapse;border:none;width:100%}.b_06 table td,.b_06 table th{border:1px solid #ccc}.b_06_item{width:30%;padding:7px 10px;text-align:left;background:#eee}.b_06_content{width:auto;padding:7px 10px;text-align:left}@media screen and (max-width:600px){.b_06_item{width:30%}}.b_07{position:relative;margin:0 0 2em}.b_07 iframe{width:100%!important;height:100%!important}.b_08{margin:0 0 2em}.btn_fb{display:block;float:left;width:107px}.btn_fb iframe{height:25px!important}.blueButton.blue .pluginButton{height:22px;line-height:22px}.btn_tweet{display:block;float:left;width:100px}.btn_mixi{display:block;float:left;width:58px}.btnMx{display:block;width:58px;height:18px;background:url(http://i.yimg.jp/images/topics/social/btnMx.png) no-repeat;text-indent:-9999px;overflow:hidden}.b_08 #line img{width:88px!important}.b_04_2,.b_09{margin:0 0 2em}.b_04_2_in{margin:0 0 1em}.b_04_2_in:last-child{margin:0}.b_04_2_in div{margin:0 0 .3em}.b_04_2_in span{display:block;float:left;width:30%;margin:0 .5em .5em 0;line-height:1px}.b_04_2 img{width:100%;height:auto;margin:0 auto}.b_04_2.b_04_2_column2{display:table;table-layout:fixed;border-collapse:collapse;border:none;width:100%}.b_04_2.b_04_2_column2 div.column_l{display:table-cell;width:auto;padding-right:5px;vertical-align:top}.b_04_2.b_04_2_column2 div.column_r{display:table-cell;width:auto;padding-left:5px;vertical-align:top}.b_04_2.b_04_2_column2 div.column_l div,.b_04_2.b_04_2_column2 div.column_r div{margin:0 0 .3em}.b_04_2.b_04_2_column2 div.column_l span,.b_04_2.b_04_2_column2 div.column_r span{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_04_2.b_04_2_column3{display:table;table-layout:auto;border-collapse:collapse;border:none;width:100%}.b_04_2.b_04_2_column3 div.column_c,.b_04_2.b_04_2_column3 div.column_l,.b_04_2.b_04_2_column3 div.column_r{display:table-cell;width:32%;vertical-align:top}.b_04_2.b_04_2_column3 div.column_blank{display:table-cell;width:auto;vertical-align:top}.b_04_2.b_04_2_column3 div.column_c div,.b_04_2.b_04_2_column3 div.column_l div,.b_04_2.b_04_2_column3 div.column_r div{margin:0 0 .3em}.b_04_2.b_04_2_column3 div.column_c span,.b_04_2.b_04_2_column3 div.column_l span,.b_04_2.b_04_2_column3 div.column_r span{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}@media screen and (max-width:600px){.b_04_2_img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_04_2.b_04_2_column2{display:block;width:100%}.b_04_2.b_04_2_column2 div.column_l{display:block;width:auto;margin:0 0 1em;padding-right:0}.b_04_2.b_04_2_column2 div.column_r{display:block;width:auto;padding-left:0}.b_04_2.b_04_2_column3,.b_04_2.b_04_2_column3 div.column_c,.b_04_2.b_04_2_column3 div.column_l,.b_04_2.b_04_2_column3 div.column_r{display:block;width:100%}.b_04_2.b_04_2_column3 div.column_c,.b_04_2.b_04_2_column3 div.column_l{margin:0 0 1em}.b_04_2.b_04_2_column3 div.column_blank{display:none;width:auto}}.b_04_3{margin:0 0 2em}.b_04_3_in{margin:0 0 1em}.b_04_3_in:last-child{margin:0}.b_04_3_in div{margin:0 0 .3em}.b_04_3_in span{display:block;float:left;width:30%;margin:0 .5em .5em 0;line-height:1px}.b_04_3 img{width:100%;height:auto;margin:0 auto}.b_04_3.b_04_3_column2{display:table;table-layout:fixed;border-collapse:collapse;border:none;width:100%}.b_04_3.b_04_3_column2 div.column_l{display:table-cell;width:auto;padding-right:5px;vertical-align:top}.b_04_3.b_04_3_column2 div.column_r{display:table-cell;width:auto;padding-left:5px;vertical-align:top}.b_04_3.b_04_3_column2 div.column_l div,.b_04_3.b_04_3_column2 div.column_r div{margin:0 0 .3em}.b_04_3.b_04_3_column2 div.column_l span,.b_04_3.b_04_3_column2 div.column_r span{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_04_3.b_04_3_column3{display:table;table-layout:auto;border-collapse:collapse;border:none;width:100%}.b_04_3.b_04_3_column3 div.column_c,.b_04_3.b_04_3_column3 div.column_l,.b_04_3.b_04_3_column3 div.column_r{display:table-cell;width:32%;vertical-align:top}.b_04_3.b_04_3_column3 div.column_blank{display:table-cell;width:auto;vertical-align:top}.b_04_3.b_04_3_column3 div.column_c div,.b_04_3.b_04_3_column3 div.column_l div,.b_04_3.b_04_3_column3 div.column_r div{margin:0 0 .3em}.b_04_3.b_04_3_column3 div.column_c span,.b_04_3.b_04_3_column3 div.column_l span,.b_04_3.b_04_3_column3 div.column_r span{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}@media screen and (max-width:600px){.b_04_3_img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_04_3.b_04_3_column2{display:block;width:100%}.b_04_3.b_04_3_column2 div.column_l{display:block;width:auto;margin:0 0 1em;padding-right:0}.b_04_3.b_04_3_column2 div.column_r{display:block;width:auto;padding-left:0}.b_04_3.b_04_3_column3,.b_04_3.b_04_3_column3 div.column_c,.b_04_3.b_04_3_column3 div.column_l,.b_04_3.b_04_3_column3 div.column_r{display:block;width:100%}.b_04_3.b_04_3_column3 div.column_blank{display:none;width:auto}}.b_11{margin:0 0 2em}.b_11_in{margin:0 0 1em}.b_11_in:last-child{margin:0}.b_11 .b_11_in div{margin:0 0 .3em}.b_11 .b_11_in span img{display:block;float:left;width:30%;margin:0 .5em .5em 0}.b_11 img{width:100%;height:auto;margin:0 auto}.b_11.b_11_column2{display:table;table-layout:fixed;border-collapse:collapse;border:none;width:100%}.b_11.b_11_column2 div.column_l{display:table-cell;width:auto;padding-right:5px;vertical-align:top}.b_11.b_11_column2 div.column_r{display:table-cell;width:auto;padding-left:5px;vertical-align:top}.b_11.b_11_column2 div.column_l div,.b_11.b_11_column2 div.column_r div{margin:0 0 .3em}.b_11.b_11_column2 div.column_l span img,.b_11.b_11_column2 div.column_r span img{display:block;float:none;width:100%;margin:0 0 .5em}.b_11.b_11_column3{display:table;table-layout:auto;border-collapse:collapse;border:none;width:100%}.b_11.b_11_column3 div.column_c,.b_11.b_11_column3 div.column_l,.b_11.b_11_column3 div.column_r{display:table-cell;width:32%;vertical-align:top}.b_11.b_11_column3 div.column_blank{display:table-cell;width:auto;vertical-align:top}.b_11.b_11_column3 div.column_c div,.b_11.b_11_column3 div.column_l div,.b_11.b_11_column3 div.column_r div{margin:0 0 .3em}.b_11.b_11_column3 div.column_c span img,.b_11.b_11_column3 div.column_l span img,.b_11.b_11_column3 div.column_r span img{display:block;float:none;width:100%;margin:0 0 .5em}.b_11.b_11_column3 div.column_c span p,.b_11.b_11_column3 div.column_l span p,.b_11.b_11_column3 div.column_r span p{line-height:normal}@media screen and (max-width:600px){.b_11_img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_11.b_11_column2{display:block;width:100%}.b_11.b_11_column2 div.column_l{display:block;width:auto;margin:0 0 1em;padding-right:0}.b_11.b_11_column2 div.column_r{display:block;width:auto;padding-left:0}.b_11.b_11_column3,.b_11.b_11_column3 div.column_c,.b_11.b_11_column3 div.column_l,.b_11.b_11_column3 div.column_r{display:block;width:100%}.b_11.b_11_column3 div.column_c,.b_11.b_11_column3 div.column_l{margin:0 0 1em}.b_11.b_11_column3 div.column_blank{display:none;width:auto}}.b_11_2{margin:0 0 2em}.b_11_2_in{margin:0 0 1em}.b_11_2_in:last-child{margin:0}.b_11_2_in div{margin:0 0 .3em}.b_11_2_in span img{display:block;float:left;width:30%;margin:0 .5em .5em 0;line-height:1px}.b_11_2 img{width:100%;height:auto;margin:0 auto}.b_11_2.b_11_2_column2{display:table;table-layout:fixed;border-collapse:collapse;border:none;width:100%}.b_11_2.b_11_2_column2 div.column_l{display:table-cell;width:auto;padding-right:5px;vertical-align:top}.b_11_2.b_11_2_column2 div.column_r{display:table-cell;width:auto;padding-left:5px;vertical-align:top}.b_11_2.b_11_2_column2 div.column_l div,.b_11_2.b_11_2_column2 div.column_r div{margin:0 0 .3em}.b_11_2.b_11_2_column2 div.column_l span img,.b_11_2.b_11_2_column2 div.column_r span img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_11_2.b_11_2_column3{display:table;table-layout:auto;border-collapse:collapse;border:none;width:100%}.b_11_2.b_11_2_column3 div.column_c,.b_11_2.b_11_2_column3 div.column_l,.b_11_2.b_11_2_column3 div.column_r{display:table-cell;width:32%;vertical-align:top}.b_11_2.b_11_2_column3 div.column_blank{display:table-cell;width:auto;vertical-align:top}.b_11_2.b_11_2_column3 div.column_c div,.b_11_2.b_11_2_column3 div.column_l div,.b_11_2.b_11_2_column3 div.column_r div{margin:0 0 .3em}.b_11_2.b_11_2_column3 div.column_c span img,.b_11_2.b_11_2_column3 div.column_l span img,.b_11_2.b_11_2_column3 div.column_r span img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}@media screen and (max-width:600px){.b_11_2_img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_11_2.b_11_2_column2{display:block;width:100%}.b_11_2.b_11_2_column2 div.column_l{display:block;width:auto;margin:0 0 1em;padding-right:0}.b_11_2.b_11_2_column2 div.column_r{display:block;width:auto;padding-left:0}.b_11_2.b_11_2_column3,.b_11_2.b_11_2_column3 div.column_c,.b_11_2.b_11_2_column3 div.column_l,.b_11_2.b_11_2_column3 div.column_r{display:block;width:100%}.b_11_2.b_11_2_column3 div.column_c,.b_11_2.b_11_2_column3 div.column_l{margin:0 0 1em}.b_11_2.b_11_2_column3 div.column_blank{display:none;width:auto}}.b_11_3{margin:0 0 2em}.b_11_3_in{margin:0 0 1em}.b_11_3_in:last-child{margin:0}.b_11_3_in div{margin:0 0 .3em}.b_11_3_in span{display:block;float:left;width:30%;margin:0 .5em .5em 0;line-height:1px}.b_11_3 img{width:100%;height:auto;margin:0 auto}.b_11_3.b_11_3_column2{display:table;table-layout:fixed;border-collapse:collapse;border:none;width:100%}.b_11_3.b_11_3_column2 div.column_l{display:table-cell;width:auto;padding-right:5px;vertical-align:top}.b_11_3.b_11_3_column2 div.column_r{display:table-cell;width:auto;padding-left:5px;vertical-align:top}.b_11_3.b_11_3_column2 div.column_l div,.b_11_3.b_11_3_column2 div.column_r div{margin:0 0 .3em}.b_11_3.b_11_3_column2 div.column_l span img,.b_11_3.b_11_3_column2 div.column_r span img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_11_3.b_11_3_column3{display:table;table-layout:auto;border-collapse:collapse;border:none;width:100%}.b_11_3.b_11_3_column3 div.column_c,.b_11_3.b_11_3_column3 div.column_l,.b_11_3.b_11_3_column3 div.column_r{display:table-cell;width:32%;vertical-align:top}.b_11_3.b_11_3_column3 div.column_blank{display:table-cell;width:auto;vertical-align:top}.b_11_3.b_11_3_column3 div.column_c div,.b_11_3.b_11_3_column3 div.column_l div,.b_11_3.b_11_3_column3 div.column_r div{margin:0 0 .3em}.b_11_3.b_11_3_column3 div.column_c span img,.b_11_3.b_11_3_column3 div.column_l span img,.b_11_3.b_11_3_column3 div.column_r span img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}@media screen and (max-width:600px){.b_11_3_img{display:block;float:none;width:100%;margin:0 0 .5em;line-height:1px}.b_11_3.b_11_3_column2{display:block;width:100%}.b_11_3.b_11_3_column2 div.column_l{display:block;width:auto;margin:0 0 1em;padding-right:0}.b_11_3.b_11_3_column2 div.column_r{display:block;width:auto;padding-left:0}.b_11_3.b_11_3_column3,.b_11_3.b_11_3_column3 div.column_c,.b_11_3.b_11_3_column3 div.column_l,.b_11_3.b_11_3_column3 div.column_r{display:block;width:100%}.b_11_3.b_11_3_column3 div.column_blank{display:none;width:auto}}.b_10{margin:0 0 2em}.b_10 span{display:block;margin:0 0 1em;line-height:1px;text-align:center}.b_10 span:last-child{margin:0}.b_10 img{width:100%;height:auto;margin:0 auto}.b_10.b_10_column2{display:table;table-layout:fixed;border-collapse:collapse;border:none;width:100%;line-height:1px}.b_10.b_10_column2 span,.b_10.b_10_column2 span:last-child{margin:0}.b_10.b_10_column2 div.column_l{display:table-cell;width:auto;padding-right:5px;line-height:1px;vertical-align:top}.b_10.b_10_column2 div.column_r{display:table-cell;width:auto;padding-left:5px;line-height:1px;vertical-align:top}.b_10.b_10_column3{display:table;table-layout:auto;border-collapse:collapse;border:none;width:100%;line-height:1px}.b_10.b_10_column3 div.column_c,.b_10.b_10_column3 div.column_l,.b_10.b_10_column3 div.column_r{display:table-cell;width:32%;vertical-align:top}.b_10.b_10_column3 div.column_blank{display:table-cell;width:auto;vertical-align:top}.b_10.b_10_column3 div.column_c span,.b_10.b_10_column3 div.column_l span,.b_10.b_10_column3 div.column_r span{display:block;width:auto}@media screen and (max-width:600px){.b_10.b_10_column2{display:block;width:100%;line-height:1px}.b_10.b_10_column2 div.column_l{display:block;width:auto;margin:0 0 1em;padding-right:0;line-height:1px}.b_10.b_10_column2 div.column_r{display:block;width:auto;padding-left:0;line-height:1px}.b_10.b_10_column3,.b_10.b_10_column3 div.column_c,.b_10.b_10_column3 div.column_l,.b_10.b_10_column3 div.column_r{display:block;width:100%}.b_10.b_10_column3 div.column_blank{display:none}.b_10.b_10_column3 div.column_c,.b_10.b_10_column3 div.column_l{margin:0 0 1em}.b_10.b_10_column3 div.column_r{margin:0}}/*! normalize.css v2.1.3 | MIT License | git.io/normalize */*{font-size:100%;margin:0;padding:0}img{vertical-align:top;outline:0}li{list-style-type:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:0;margin:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.webcategory-list-link{float:right;width:auto}#pagenation,.web-categories{clear:both}@charset "utf-8";#slide_area{position:relative;width:100%;max-width:960px;height:auto;margin:0;padding:0;overflow:hidden}#slide_area .slide_cover{display:none;position:absolute;top:0;left:0;width:auto;height:auto;margin:0;padding:0}#slide_area .slide_box{position:absolute;top:0;left:0;width:auto;height:auto;margin:0;padding:0}#slide_area .slide_box div{display:none;float:left;width:auto;height:auto;margin:0;padding:0}#slide_area .slide_box div:first-child{display:block}#slide_area .slide_box div a{display:block;width:100%;max-width:100%;height:auto;margin:0;padding:0;text-decoration:none}#slide_area .slide_box div img{width:100%;max-width:100%;height:auto;margin:0;padding:0}.slide_prev_nav{position:absolute;top:36%;left:5px;width:24px;height:43px}.slide_next_nav{position:absolute;top:36%;right:5px;width:24px;height:43px}.slide_index{display:none;float:right}.slide_index li{display:block;float:left;width:15px;padding:10px 0}.slide_index li a{display:block;width:13px;height:13px;margin:0 auto;text-indent:-9999px;background:url(../images/pagination.png) no-repeat left top}.slide_index li a:hover{background:url(../images/pagination.png) no-repeat left -30px}.slide_index li a.focus{background:url(../images/pagination.png) no-repeat left -15px}#blogside .category_count_block,.blogside .category_count_block{display:none} .clearfix::after { display: block; content: ""; clear: both; } /* The gallery overlay */ #galleryOverlay{ width:100%; height:100%; position:fixed; top:0; left:0; opacity:0; z-index:100000; background-color:#222; background-color:rgba(0,0,0,0.8); overflow:hidden; display:none; -moz-transition:opacity 1s ease; -webkit-transition:opacity 1s ease; transition:opacity 1s ease; } /* This class will trigger the animation */ #galleryOverlay.visible{ opacity:1; } #gallerySlider{ height:100%; left:0; top:0; width:100%; white-space: nowrap; position:absolute; -moz-transition:left 0.4s ease; -webkit-transition:left 0.4s ease; transition:left 0.4s ease; } #gallerySlider .placeholder{ background: url("../images/preloader.gif") no-repeat center center; height: 100%; line-height: 1px; text-align: center; width:100%; display:inline-block; } /* The before element moves the * image halfway from the top */ #gallerySlider .placeholder:before{ content: ""; display: inline-block; height: 50%; width: 1px; margin-right:-1px; } #gallerySlider .placeholder img{ display: inline-block; max-height: 80%; max-width: 80%; width: auto !important; vertical-align: middle; } #gallerySlider.rightSpring{ -moz-animation: rightSpring 0.3s; -webkit-animation: rightSpring 0.3s; } #gallerySlider.leftSpring{ -moz-animation: leftSpring 0.3s; -webkit-animation: leftSpring 0.3s; } /* Firefox Keyframe Animations */ @-moz-keyframes rightSpring{ 0%{ margin-left:0px;} 50%{ margin-left:-30px;} 100%{ margin-left:0px;} } @-moz-keyframes leftSpring{ 0%{ margin-left:0px;} 50%{ margin-left:30px;} 100%{ margin-left:0px;} } /* Safari and Chrome Keyframe Animations */ @-webkit-keyframes rightSpring{ 0%{ margin-left:0px;} 50%{ margin-left:-30px;} 100%{ margin-left:0px;} } @-webkit-keyframes leftSpring{ 0%{ margin-left:0px;} 50%{ margin-left:30px;} 100%{ margin-left:0px;} } /* Arrows */ #prevArrow,#nextArrow{ border:none; text-decoration:none; background:url('../images/arrows.png') no-repeat; opacity:0.5; cursor:pointer; position:absolute; width:43px; height:58px; top:50%; margin-top:-29px; -moz-transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease; transition:opacity 0.2s ease; } #prevArrow:hover, #nextArrow:hover{ opacity:1; } #prevArrow{ background-position:left top; left:40px; } #nextArrow{ background-position:right top; right:40px; } /*css*/ html, body { height: 100%; } body { background: #ebebeb; font: 14px/24px "メイリオ", "Meiryo", Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; color: #8c9799; position: relative; min-width: 320px; -webkit-text-size-adjust: none; } .wrapper{ overflow-x: hidden; } /*Imeges*/ img { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: auto; max-width: 100%; } .img_fleft { float: left; margin-right: 20px; margin-top: 0px; } .img_right { float: right; margin-left: 20px; } .img_top { margin-top: 8px; width: 100%; } /*Links*/ a { color: #f00; text-decoration: none; } a:hover { text-decoration: underline; } a:focus, *:focus { outline:none; } a[href^="tel:"] { color: inherit; text-decoration: none; } input[type=submit]:hover { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )"; } .btn { display: inline-block; background: #ff94ab ; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffc3d0), color-stop(0.00, #e3365b)); background: -webkit-linear-gradient(top, #ffc3d0 0%, #e3365b 100%); background: -moz-linear-gradient(top, #ffc3d0 0%, #e3365b 100%); background: -o-linear-gradient(top, #ffc3d0 0%, #e3365b 100%); background: -ms-linear-gradient(top, #ffc3d0 0%, #e3365b 100%); background: linear-gradient(top, #ffc3d0 0%, #e3365b 100%); font:bold 14px/24px Arial, Helvetica, sans-serif; color:#fff; display: inline-block; padding: 9px 35px; text-decoration:none; border-radius: 5px; -webkit-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25); moz-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25); -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn:hover { background: #ff7b97; text-decoration: none; } /*Titles*/ /*h2 { color: #333f00; font: bold 30px/36px Arial, Helvetica, sans-serif; margin-bottom: 20px; }*/ h3 { color: #f00; font: bold 26px/30px Arial, Helvetica, sans-serif; margin-bottom: 20px; word-wrap: break-word; } h4 { font-size: 36px; line-height: 43px; font-weight: 700; color: #545e60; margin-bottom: 30px; text-transform: uppercase; } h4.simple { font: bold 48px/58px Arial, Helvetica, sans-serif; color: #545e60; margin-bottom: 42px; text-transform: none; } h4.simple span { color: #d33541; vertical-align:top; } h4.footer_title { font: bold 18px/18px; color: #fff; text-transform: none; margin-bottom: 0px; } h5 { font-size: 16px; line-height: 24px; font-weight: 700; color: #545e60; text-transform: uppercase; margin-bottom: 10px; word-wrap: break-word } h6 { font-size: 11px; line-height: 21px; font-weight: 400; color: #6f7a7c; margin-bottom: 10px; text-transform: uppercase; } h6.simple { font: 18px/24px Arial, Helvetica, sans-serif; color: #545e60; margin-bottom: 8px; text-transform: none; } h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #d33541; text-decoration: none; } .second_link:hover { color: #545e60; } hr { border: none; border-bottom: 1px solid #c9c9c9; } a.mail_link { font: 14px/24px Arial, Helvetica, sans-serif; color: #545e60; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } a.mail_link:hover { text-decoration: none; color: #d53543; } /* Indents */ p { margin-bottom: 23px; /*as line-height in body*/ } .m_0 { margin-bottom: 0px !important; } .m_10 { margin-bottom: 10px; } .m_15 { margin-bottom: 15px; } .m_20 { margin-bottom: 20px; } .m_21 { margin-bottom: 21px !important; } .m_22 { margin-bottom: 22px !important; } .m_23 { margin-bottom: 23px; } - .m_25 { margin-bottom: 25px !important; } .m_27 { margin-bottom: 27px !important; } .m_30 { margin-bottom: 30px; } .m_40 { margin-bottom: 40px; } .m_44 { margin-bottom: 44px; } .m_45 { margin-bottom: 45px; } .m_46 { margin-bottom: 46px; } .m_47 { margin-bottom: 47px; } .m_48 { margin-bottom: 48px; } .m_50 { margin-bottom: 50px; } .m_64 { margin-bottom: 64px; } .m_65 { margin-bottom: 65px; } .m_66 { margin-bottom: 66px; } .m_67 { margin-bottom: 67px; } .m_70 { margin-bottom: 70px; } .m_76 { margin-bottom: 76px; } /* Lists */ .list li { margin-top:15px; padding-left:12px; line-height: 14px; background: url(//static.plimo.com/static/type6/images/list_marker2.png) no-repeat 0px 6px; } .list li:first-child { margin-top:0; } .list li a { color: #fff; text-decoration: none; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; } .type6 ul.list li a { color: #8c9799; } .list li a:hover, .type6 .list li a:hover { color: #ff7b97; text-decoration: none; } /************Header************/ #header { width: 100%; } .top_box { background: #3c4144; padding-top: 5px; padding-bottom: 9px; } .top_box .social { float: right; } .top_box .social li { margin-left: 18px; font-size: 20px; line-height: 22px; } .top_box .social li a { color: #bdbdbd; } .head_contact_list { overflow: hidden; float: left; } .head_contact_list li { float: left; position: relative; font: 12px/14px Arial, Helvetica, sans-serif; color: #fff; } .head_contact_list li.icon1 { padding-left: 22px; padding-top: 7px; padding-bottom: 1px; margin-right: 10px; margin-right: 29px; } .head_contact_list li.icon1:after { position: absolute; display: block; left: 3px; top: 6px; width: 11px; height: 16px; content: ''; background: url( //static.plimo.com/static/type6/images/soc_icon1.png) no-repeat 0px 0px; } .head_contact_list li.icon2 { padding-left: 27px; padding-top: 6px; padding-bottom: 1px; margin-right: 50px; } .head_contact_list li.icon2 a { font: 12px/14px Arial, Helvetica, sans-serif; color: #fff; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .head_contact_list li.icon2 a:hover { text-decoration: none; color: #d53543; } .head_contact_list li.icon2:after { position: absolute; display: block; left: 3px; top: 6px; width: 15px; height: 14px; content: ''; background: url( //static.plimo.com/static/type6/images/soc_icon2.png) no-repeat 0px 0px; } .head_contact_list li.icon3 { padding-left: 23px; padding-top: 7px; padding-bottom: 1px; } .head_contact_list li.icon3:after { position: absolute; display: block; left: 3px; top: 6px; width: 12px; height: 12px; content: ''; background: url( //static.plimo.com/static/type6/images/soc_icon3.png) no-repeat 0px 0px; } .header_box { position: relative; padding-top: 38px; padding-bottom: 33px; z-index: 1; background: url(//static.plimo.com/static/type6/images/header_box.png) repeat 0 0; } .type6 .header_box { background: url( //static.plimo.com/static/type6/images/second_index_top.png) no-repeat 0 0; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; } h1 { float: left; } h1 a { } h1 a:hover { text-decoration: none; } h1 .slogan { display: block; } /* Menu */ nav { float: right; } .sf-menu { list-style:none; padding-top: 6px; padding-right: 10px; } .sf-menu > li { float: left; font-family: 'Ubuntu', sans-serif; font-size: 14px; line-height: 17px; font-weight: 700; text-transform: uppercase; margin-left: 39px; position: relative; background: rgba(255, 255, 255, 0.8); background-clip: padding-box; border-radius: 8px 8px 10px 10px / 8px 8px 12px 12px; } .sf-menu > li:first-child { margin-left: 0; } .sf-menu > li > a { display: block; color: #4a5152; text-decoration:none; position: relative; padding: 12px 12px 12px 12px; transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; z-index: 5; } .sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.current > a { color: #fff; text-decoration: none; } .sf-menu > li span, .sf-menu > li.sfHover span, .sf-menu > li.current span { display: block; position: absolute; left: 50%; right: 50%; width: 0px; top: 50%; bottom: 50%; transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; z-index: 4; } .sf-menu > li:hover span, .sf-menu > li.sfHover span, .sf-menu > li.current span { border-radius: 7px; left: 0; top: 0; right: 0; bottom: 0; background: #d33541; width: 100%; } .sf-menu > li > a.sf-with-ul:after { display: block; position: absolute; content: ''; width: 7px; height: 4px; top: 32px; left: 50%; margin-left: -2px; background: url(//static.plimo.com/static/type6/images/menu_arrow.png) no-repeat 0 0; } .sf-menu > li.sfHover > a.sf-with-ul:after, .sf-menu > li > a.sf-with-ul:after:hover, .sf-menu > li.current > a.sf-with-ul:after { background: url(//static.plimo.com/static/type6/images/menu_arrow.png) no-repeat 0 -6px; } .sf-menu .menu-arrow { display: none; } /* submenu */ .sf-menu ul { border-radius: 7px; background: #56605c; opacity: 0; padding: 15px; position: absolute; top: 42px; z-index: 99; transition: opacity 0.2s ease 0.2s; pointer-events: none; } .sf-menu ul li { margin-top: 19px; position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px; font-weight: normal; } .sf-menu ul li:first-child { margin-top: 0; } .sf-menu ul li a { color: #fff; text-decoration: none; } .sf-menu ul li > a:hover, .sf-menu ul li.sfHover > a, .sf-menu ul li.active > a { text-decoration: none; } .sf-menu li:hover ul { opacity: 1; pointer-events: auto; } /* subsubmenu */ .sf-menu ul ul { background: #d33541; left: 97px; top: -7px; padding: 15px; } .sf-menu ul ul li { margin-top: 15px; } .sf-menu ul ul li a { color: #fff; text-decoration: none; } .sf-menu ul ul li > a:hover, .sf-menu ul ul li.sfHover > a, .sf-menu ul ul li.active > a { color:#000; text-decoration: none; font-weight: normal; } #mm0 { display: none; border: 1px solid #ff781d; padding: 3px; width: 100%; } /************Content***********/ .overflow_box { overflow: hidden; } .type6 #content { padding-top: 30px; padding-bottom: 60px; clear: both; } .link_box { display: block; background-color: #666; display: block; text-align: center; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .link_box:hover { background-color: #000; } .link_box_cont { padding: 0px 25px 32px; } .link_box img { width: 100%; margin-bottom: 23px; } .link_box h4 { font-size: 16px; line-height: 21px; font-weight: 700; text-align: center; color: #fff; text-transform: uppercase; margin-bottom: 18px; } .link_box p { line-height: 21px; font-weight: 400; text-align: center; color: #b1c0c3; margin-bottom: 0; } .link_box:hover p { color: #fff; } .link_box a.info_link { display: inline-block; text-align: center; margin-bottom: 11px; background: url(../asset/info_link_bg.png) no-repeat 22px 21px #788686; width: 59px; height: 59px; border-radius: 49%; margin-bottom: 10px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .link_box:hover a.info_link { background-color: #fff; background-position: 22px -21px; text-decoration: none; } .link_box p.link_box_p { color: #8c9799; } #owl .owl-item .carousel_item { padding: 54px 0px 28px 0px !important; } h4.carousel_qoute { text-align: center; font-family: 'Ubuntu', sans-serif; font-size: 30px; line-height: 36px; font-weight: 400; text-transform: none; font-style: italic; text-align: center; padding: 0px 165px; color: #fff; margin-bottom: 0px; } h3.carousel_autor { text-align: center; font-family: 'Ubuntu', sans-serif; font-size: 22px; line-height: 36px; font-weight: 700; font-style: normal; text-align: center; padding: 0px 165px; color: #fea3ab; margin-bottom: 0px; } .owl-theme .owl-controls { margin-top: -38px; text-align: center; position: absolute; top: 0; left: 50%; margin-left: -38px; width: 76px; height: 35px; background: #ebebeb; border-radius: 49%; padding-top: 40px; } .owl-theme .owl-controls .owl-page { margin-left: 2px !important; } .owl-theme .owl-controls .owl-page:first-child { margin-left: 0px !important; } .owl-theme .owl-controls .owl-page span { width: 9px; height: 9px; margin: 0px !important; } .owl-theme .owl-controls .owl-page span:first-child { margin-left: 0 !important; } .box1 { background: url( //static.plimo.com/static/type6/images/box1.jpg) repeat 0 0; padding-top: 37px; padding-bottom: 41px; text-align: center; } .box1 h4 { font:bold 36px/43px Arial, Helvetica, sans-serif; color: #fff; text-align: center; text-transform: none; margin-bottom: 7px; } .box1 p { font: 16px/24px Arial, Helvetica, sans-serif; color: #fff; margin-bottom: 26px; text-align: center; } .box1 .btn { text-align: left; display: inline-block; background: #cd2d39; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #d83f4b), color-stop(0.00, #cd2d39)); background: -webkit-linear-gradient(top, #d83f4b 0%, #cd2d39 100%); background: -moz-linear-gradient(top, #d83f4b 0%, #cd2d39 100%); background: -o-linear-gradient(top, #d83f4b 0%, #cd2d39 100%); background: -ms-linear-gradient(top, #d83f4b 0%, #cd2d39 100%); background: linear-gradient(top, #d83f4b 0%, #cd2d39 100%); font: 14px/24px Arial, Helvetica, sans-serif; color:#fff; display:inline-block; padding: 9px 45px 9px 45px; text-decoration:none; border-radius: 5px; -webkit-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25); moz-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25); -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .box1 .btn:hover { background: #545e60; } .central { text-align: center; } .type6 .link_box_cont { padding: 0px 20px 32px; } .float_img { float: left; margin-right: 30px; margin-bottom: 25px; } .box2 { background: url(//static.plimo.com/static/type6/images/box2.jpg) repeat 0 0; padding: 40px 0; } .oval { position: relative; display: inline-block; margin-bottom: 21px; } .fiture_link { position: relative; display: inline-block; width: 149px; height: 86px; padding-top: 53px; padding-bottom: 10px; border-radius: 49%; border: 1px solid #6f797c; background: url(//static.plimo.com/static/type6/images/box2.jpg) repeat 0 0; z-index: 10; } .fiture_link:after { position: absolute; content: ''; display: block; width: 15px; height: 17px; background: url(//static.plimo.com/static/type6/images/fiture_link.png) no-repeat 0px 0px; bottom: 23px; left: 70px; } .fiture_link:hover { text-decoration: none; } .fiture_link .span1 { font-family: 'Ubuntu', sans-serif; font-size: 18px; line-height: 18px; font-weight: 700; text-align: center; color: #fe1123; margin-bottom: 0px; } .fiture_link .span2 { font-family: 'Ubuntu', sans-serif; font-size: 18px; line-height: 18px; font-weight: 400; text-align: center; color: #fff; margin-bottom: 0px; } .box2 p { font: 13px/24px Arial, Helvetica, sans-serif; color: #c2d6d6; margin-bottom: 14px; } .box2_simple_link { display: inline-block; font-family: 'Ubuntu', sans-serif; font-size: 14px; line-height: 21px; font-weight: 700; text-transform: uppercase; color: #fe1123; margin-left: 20px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .box2_simple_link:hover { color: #fff; text-decoration: none; } span.after { display: block; position: absolute; width: 150px; height: 150px; background: #fff; border-radius: 49%; z-index: 3; top: 10px; left: 50%; margin-left: -69px; } .oval:hover span.after { background: #d33541; } .box3 { background: url(//static.plimo.com/static/type6/images/box3.jpg) repeat 0 0; padding-top: 29px; margin-bottom: 45px; } .box_p { padding-top: 36px; } .bottom_border_box { font: 36px/36px Arial, Helvetica, sans-serif; color: #545e60; border-bottom: 5px solid #545e60; padding-bottom: 20px; margin-bottom: 16px; } p.second { font: 14px/24px Arial, Helvetica, sans-serif; color: #8c9799; margin-bottom: 0px; } .type6 .box3 { padding-top: 66px; padding-bottom: 46px; margin-bottom: 65px; } .quote { overflow: hidden; margin-bottom: 21px; } .qoute_number { float: left; font: bold 48px/48px; color: #d33541; margin-top: 0px; margin-right: 27px; text-align: center; padding-left: 6px; } .quote_cont { overflow: hidden; } .quote_cont h6.simple { margin-bottom: 11px; } .post_disc { overflow: hidden; margin-bottom: 34px; } .blog_img { width: 100%; margin-bottom: 30px; } .date_box { float: left; width: 58px; background: #0a9de5; text-align: center; padding: 4px 6px; margin-right: 32px; } .oval_box { background: #fff; font: 14px/16px Arial, Helvetica, sans-serif; color: #545e60; text-transform: uppercase; border-radius: 49%; padding-top: 16px; padding-bottom: 12px; } .post_info { overflow: hidden; } .oval_box span { display: block; font: 24px/16px Arial, Helvetica, sans-serif; color: #0a9de5; } .post_info { padding-top: 7px; } .autor, .contributor { font: 14px/16px Arial, Helvetica, sans-serif; color: #8c9799; } .autor span, .contributor span { color: #0a9de5; vertical-align: top; } .autor a, .contributor a { font: 14px/16px Arial, Helvetica, sans-serif; color: #0a9de5; vertical-align: top; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .autor a:hover, .contributor a:hover { text-decoration: none; color: #8c9799; } .post { overflow: hidden; margin-bottom: 76px; } /*----------- Map ------------*/ .map { margin-bottom: 76px; } .map iframe { width: 100%; height: 392px; } address { margin-bottom: 21px; } address dl { width: 100%; overflow: hidden; position: relative; } address dt { font: 18px/24px Arial, Helvetica, sans-serif; color: #545e60; margin-bottom: 8px; } address dd { overflow: hidden; font: 14px/24px Arial, Helvetica, sans-serif; color: #8c9799; } address dd a { transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; color: #545e60; } address dd a:hover { color: #ce2f3a; text-decoration: none; } address dl span { float: left; width: 143px; } /************Footer************/ #footer { width: 100%; background: url(//static.plimo.com/static/type6/images/footer_bg.jpg) repeat 0 0; padding-top: 58px; padding-bottom: 50px; } .copyright { font: 12px/20px Arial, Helvetica, sans-serif; color: #fff; text-transform: uppercase; margin-bottom: 20px; } .copyright span { vertical-align: top; } #footer .list li { background: url(//static.plimo.com/static/type6/images/list_marker.png) no-repeat 0px 6px; } .copyright a { color: inherit; vertical-align: top; -webkit-transition: 0.34s; -moz-transition: 0.34s; -ms-transition: 0.34s; -o-transition: 0.34s; transition: 0.34s; } .copyright a:hover { color: #e22230; text-decoration: none; } .social { overflow: hidden; padding-left: 4px; } .social li { float: left; margin-left: 23px; font-size: 22px; line-height: 22px; } .social li:first-child { margin-left: 0px; } .social li a { color: #989a9b; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .social li a:hover { color: #e22230; } .footer_contact { font: bold 14px/33px Arial, Helvetica, sans-serif; color: #e22230; margin-bottom: 14px; line-height: 1.4; text-transform: uppercase; } .footer-link { display: block; } #toTop { background: url(//static.plimo.com/static/type6/images/to_top.png) center top no-repeat; border: none; bottom: 80px; color: transparent; display: none; font-size: 0; height: 42px; line-height: 0; overflow: hidden; position: fixed; right: 55% !important; margin-right: -750px !important; text-decoration: none; width: 42px; z-index: 20; } #toTop:hover { background-position: center -50px; } #toTop:active, #toTop:focus { outline: none; } @media only screen and (max-width: 1400px) { #toTop { left: auto; margin-left: 0; right: 10px !important; bottom: 20px !important; margin-right: 10px !important; } } /*==================================RESPONSIVE LAYOUTS===============================================*/ @media only screen and (max-width: 1200px) { .sf-menu > li { margin-left: 15px; } h4.carousel_qoute { padding: 0px 50px; } .link_box_cont { padding: 0px 15px 32px; } .col1, .col2 { float: left; margin-right: 15px; width: 196px; } .col3 { float: left; width: 197px; margin-right: 0; } .post_info { padding-top: 0px; } .camera_caption { margin-left: -460px; } } @media only screen and (max-width: 995px) { .img_fleft, .img_right { max-width: 45%; } .sf-menu { list-style: none; padding-top: 2px; padding-right: 10px; } .sf-menu > li { margin-left: 2px; font-size: 11px; } .bottom_border_box { font: 34px/36px Arial, Helvetica, sans-serif; } .social li { margin-left: 20px; } .top_box { display: none; } address dl span { float: left; width: 90px; } .col1, .col2 { float: none; margin-right: 0; width: 100% } .col3 { float: none; margin-right: 0; width: 100% } .camera_caption { display: none !important; } } @media only screen and (max-width: 767px) { .sf-menu { display: none; } #mm0 { display: block; } h1 { float: none; margin-bottom: 20px; } nav { float: none; } .float_img { width: 100%; float: none; } .camera_wrap { margin-top: -142px; } .header_box { position: relative; padding-top: 15px; padding-bottom: 20px; } .img_top { margin-bottom: 30px; } h4.carousel_qoute { text-align: center; font-family: 'Ubuntu', sans-serif; font-size: 13px; line-height: 20px; padding: 0px 20px; } h3.carousel_autor { padding: 0px 50px; } } @media only screen and (max-width: 480px) { .img_fleft.nofloat, .img_right.nofloat { float: none; max-width: inherit; margin: 0 0 20px; } .post_info { float: none; width: 100%; } .date_box { margin-bottom: 15px; } .sp_img_height{ max-width: 80%; } } /*-----------------------------------------------------------------------------------------------------------------------*//* inquiry */ .inquiry #content .contentArea { margin: 0 0 2em; width: 100%; } .inquiry #content .message { margin-bottom: 2.4em; } .inquiryFormTable { border-bottom: 1px solid rgb(153, 153, 153); border-top: 1px solid rgb(153, 153, 153); padding: 2em 0 2.4em; } .inquiryFormTable dl { display: table; width: 100%; } .inquiryFormTable dt { border-right: medium none; font-weight: 700; width: 25%; } .inquiryFormTable dd, .inquiryFormTable dt { display: table-cell; padding: 7px 10px 20px; text-align: left; vertical-align: top; } #inquiryForm .comment { color: rgb(153, 153, 153); display: block; font-size: 70%; margin-top: 0.3em; } .inquiryFormTable .formS { width: 30%; } .inquiryFormTable .formM { width: 50%; } .inquiryFormTable .formL { width: 82%; } .inquiryFormTable textarea { padding: 0.3em; width: 98%; } .inquiryFormTable .required { color: rgb(204, 0, 0); font-size: 80%; font-weight: 700; padding-left: 0.5em; } .inquiryFormTable .title { border-bottom: 1px solid rgb(153, 153, 153); color: rgb(51, 51, 51); margin: 1.5em 0; padding: 0.7em 0.5em; } .inquiryFormTable hr { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: rgba(0, 0, 0, 0) -moz-use-text-color -moz-use-text-color; border-image: none; border-style: solid none none; border-width: 15px 0 0; color: rgb(255, 255, 255); height: 0; } .inquiryFormTable .text { color: rgb(102, 102, 102); font-size: 90%; margin: 0.5em 0; } .inquiryFormTable label.tandem { display: block; } .inquiry #content .btBox { margin: 3.5em 0 0; text-align: center; } .inquiry #content .backBt, .inquiry #content .confirmBt, .inquiry #content .submitBt, .inquiry #content .topBt { border: thin solid rgb(0, 0, 0); height: auto; margin: 0; padding: 7px 0; text-align: center; text-decoration: none; width: 152px; } .inquiry #content .backBt { margin-right: 30px; } .inquiry #content .topBt { display: block; margin: 2em auto; } .inquiry #content .errorText:before { content: "※"; } .inquiry #content .errorText { color: rgb(204, 0, 0); display: block; font-size: 85%; } .inquiryFormTable textarea, input.formM { border: 1px solid rgb(204, 204, 204); border-radius: 3px; } /* ===================================== blog ===================================== */ .blog h3 { margin-bottom :0px; padding-bottom :0px; } /* blog imgs -------------------------- */ .blog #content img { height: auto; max-width: 100%; width: auto; } .blog #content .icon_imgs { width: auto !important; } /* blog link -------------------------- */ #blogBody .contentArea a { word-break: break-all; } /* ===================================== pagenation ===================================== */ #pagenation .inner { margin: 30px auto 20px; padding-top: 20px; white-space: nowrap; width: 235px; } #pagenation ul,#pagenation ol { margin: 0; padding: 0; } #pagenation ul { list-style: none outside none; } #pagenation li { float: left; font-size: 100%; margin: 0.15em; text-align: center; width: 2em; } #pagenation li a { background: none repeat scroll 0 0 rgb(237, 237, 237); color: rgb(102, 102, 102); display: block; padding: 0.25em 0; } #pagenation .active a, #pagenation a.active:hover { background: none repeat scroll 0 0 rgb(241, 72, 71); color: rgb(255, 255, 255); } #pagenation .arrow { float: left; margin: 0.2em; } /* ===================================== notfound ===================================== */ #notfoundBody p { text-align: center; } #notfoundBody p strong { font-size: 130%; font-weight: bold; } #notfoundBody form { text-align: center; } #notfoundBody .contentArea { margin-bottom: 2em; margin-left: 0; } .static #content .contentArea p { line-height: 1.4em; margin: 1em 0; } .static #content h2.titleBg, h2.titleBg { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border-bottom: 1px solid rgb(237, 237, 237); border-left: medium none; border-top: 3px solid rgb(0, 0, 0); font-size: 120%; padding: 10px 15px; } #notFound.grid_8 { min-height: 200px; } #notfoundBody form input { padding: 5px; } #notfoundBody form input.searchButton { padding: 0 5px; } /* ===================================== sitemap ===================================== */ ul.sitemap_ic li { border-bottom: 1px dotted rgb(204, 204, 204); list-style: outside none none; margin: 0; padding: 0; width: 100%; background: url(//static.plimo.com/static/type6/images/list_marker2.png) no-repeat 0px 25px; } ul.sitemap_ic li a { display: block; font-weight: bold; margin: 0; padding: 20px 40px 20px 15px; position: relative; text-decoration: none; } ul.sitemap_ic li a:before { background: none repeat scroll 0 0 rgb(204, 204, 204); content: ""; display: block; height: 10px; margin-top: -5px; position: absolute; right: 15px; top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 10px; } ul.sitemap_ic li a:after { background: none repeat scroll 0 0 rgb(235, 235, 235); content: ""; display: block; height: 10px; margin-top: -5px; position: absolute; right: 18px; top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 10px; } #sitemapBody #sitemap.grid_12 { margin-left: 0; } /* ===================================== news ===================================== */ #news { position: relative; margin-left: 0; } #news h2 { border-top: 3px solid rgb(0, 0, 0); display: block; font-size: 130%; margin: 0 0 1em !important; padding: 10px; } #news dl { border-bottom: 1px dashed rgb(204, 204, 204); margin-bottom: 0.6em; width: 100%; } #news dt { float: none; font-weight: bold; margin-bottom: 0.1em; padding: 0 10px; } #news dt .newsNew { background: none repeat scroll 0 0 rgb(0, 0, 0); border-radius: 2px; font-size: 0.5em; margin: 0 0 0 10px; padding: 0.3em 0.5em; } #news dd { float: none; padding: 0 10px 0.6em; width: auto; } #news dd a { text-decoration: underline; } /* title 変更用 -------------------------- */ .gnv_tmp_008_title_block .gnv_tmp_008_link { display: none; } .gnv_tmp_008_title_block #news h2 { display: none; } .gnv_tmp_008_title_block #news .ov { bottom: -63px; position: absolute; } .gnv_tmp_008_title_block h2 { margin-bottom: 0; } /* news link -------------------------- */ #news .ov { display: block; float: left; position: absolute; text-align: right; top: 21px; width: 100%; } /* news detail -------------------------- */ #newsDetail { margin-top: 10px; } .newsDetailBody { margin-top: 1em; padding: 0 10px 10px; } /* ===================================== youtube resp 対応コード ===================================== */ .youtube_contents { position: relative; height: 0; padding: 30px 0 56.25%; overflow: hidden; } .youtube_contents embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .youtube_contents iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ===================================== singlebox ===================================== */ /* 2 column -------------------------- */ .singlebox2 { float: left; margin-left: 0; margin-right: 0; padding: 10px; width: 48.2% !important; } .singlebox2 img { width: 100% !important; } /* 3 column -------------------------- */ .singlebox3 { float: left; margin-left: 0; margin-right: 0; padding: 10px; width: 31.6% !important; } /* 4 column -------------------------- */ .singlebox4 { float: left; margin-left: 0; margin-right: 0; padding: 10px; width: 23.2% !important; } @media only screen and (max-width: 1200px) { /* 2 column -------------------------- */ .singlebox2 { width: 47% !important; } /* 3 column -------------------------- */ .singlebox3 { width: 30.5% !important; } /* 4 column -------------------------- */ .singlebox4 { width: 22.2% !important; } } @media only screen and (max-width: 767px) { /* common column -------------------------- */ .singlebox2, .singlebox3, .singlebox4 { width: 100% !important; padding: 0; } .singlebox2 .b_11_2_in, .singlebox3 .b_11_2_in, .singlebox4 .b_11_2_in { padding: 5px; } .singlebox2 .b_11_2_in span img, .singlebox3 .b_11_2_in span img, .singlebox4 .b_11_2_in span img { margin: 0; } } /* ******************************************************************************* 1. common ├ 1-1. float ├ 1-2. margin ├ 1-3. padding ├ 1-4. text-align ├ 1-5. bold ├ 1-6. ph ├ 1-7. pc sp change ├ 1-8. image layout ├ 1-9. image decoration ├ 1-10. rollover(Transmission) ├ 1-11. other │ ├ 1-11-1. before after │ ├ 1-11-2. list │ ├ 1-11-3. flow │ └ 1-11-4. qa └ 1-12. table ├ 1-12-1. default ├ 1-12-2. table01 ├ 1-12-3. table02 └ 1-12-4. hours 2. header 3. nav 4. mainimage ├ 4-1. top └ 4-2. under 5. footer 6. content ├ 6-1. title ├ 6-2. table ├ 6-3. parts ├ 6-4. map ├ 6-5. tel └ 6-6. other 7. full content 8. blog ├ 8-1. sns └ 8-2. input 9. tel link ├ 9-1. content text link ├ 9-2. tel link └ 9-3. side link 10. hikoukai ******************************************************************************* */ body { color: #2b2b2b; font-size: 16px; line-height: 2.25; letter-spacing: 0.1em; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; background: #fff; } .autor, .contributor { font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; } .web { font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; } a.link_more { color: #fff; background: #ff94ab; font-size: 20px; padding: 15px 10px; line-height: 1.2; display: block; text-align: center; border-radius: 7px; text-decoration: none !important; text-shadow: none; } a.link_more:hover { text-decoration: none; background: #ff7b97; } p:last-child { margin-bottom: 0; } .container { width: 90%; margin: auto; } @media (min-width: 768px) and (max-width: 979px) { .container { width: 748px; } } @media (min-width: 768px) { .container { width: min(1170px,90%); } } /* ===================================================================== under ===================================================================== */ .under .text_image h4 { margin-bottom: 20px; } .text_web { font-size: 22px; line-height: 1.5; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; color: #006395; } @media screen and (max-width: 767px) { .b_11.b_11_column2 div.column_l { display: block; width: 100%; padding: 0; margin-bottom: 2em; } .b_11.b_11_column2 div.column_r { display: block; width: 100%; padding: 0; } } /* 1-1. dl -------------------------- */ dl.access dt { font-size: 22px; color: #0076b2; letter-spacing: 0.2em; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; line-height: 1.5; margin-bottom: 10px; } dl.access dd { margin-bottom: 25px; line-height: 1.5; } /* 1-1. border_box bg_box -------------------------- */ .border_box { border: 5px solid #b7def1; border-radius: 8px; padding: 20px; box-sizing: border-box; } .border_box .ic_01, .border_box .ic_01, .under_bg_box .ic_01 { margin: 0; } .under_bg_box { background: #ffdee5; padding: 30px; border-radius: 7px; } .bg_box { background: #cbeeff; padding: 30px; box-sizing: border-box; border-radius: 7px; } .column_2 .ic_01 li { display: inline-block; width: 32%; box-sizing: border-box; } @media screen and (max-width: 767px) { .column_2 .ic_01 li { display: block; width: 100%; } } /* ================================ お問い合わせ ================================== */ .inquiry #content .backBt, .inquiry #content .confirmBt, .inquiry #content .submitBt, .inquiry #content .topBt { border: 2px solid #ff7b97; padding: 7px 0; width: 250px; background: #ffa3b7; color: #fff; } @media (min-width: 768px) and (max-width: 979px) { .inquiryFormTable dt { width: 32%; } } @media screen and (max-width: 767px) { .inquiryFormTable dt { width: 100%; } .inquiryFormTable dd, .inquiryFormTable dt { width: 100%; display: block; box-sizing: border-box; } .inquiryFormTable .formM { width: 100%; } } /* ================================ blog ================================== */ .blog h3 { margin-bottom: 0px; background: none; color: #109de5; padding: 15px 5px; border: none; } .blogside h3 { background: #109de5; color: #fff; font-size: 20px; text-align: center; border-radius: 5px; padding: 10px; box-sizing: border-box; margin-bottom: 15px; } #pagenation .active a { background: #ff94ab; color: rgb(255, 255, 255); text-decoration: none; } #pagenation .active a:hover { background: #ff7b97; } .list li { line-height: 1.4; background: url(../asset/list_marker2.png) no-repeat 0px 10px; background-size: 4px 4px; } @media (min-width: 560px) { .blogside.grid_4 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; } .blogside.grid_4 hr { display: none; } } @media (min-width: 960px) { .blogside.grid_4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; } .blogside.grid_4 hr { display: none; } } /* ========================================== sitemap ============================================ */ .static #content h2.titleBg, h2.titleBg { border-bottom: none; font-size: 30px; line-height: 1.2; margin: 0 0 20px; word-wrap: break-word; background: #109de5 url(../asset/h3_before.png) no-repeat 19px center; color: #fff; padding: 22px 10px 22px 85px; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; letter-spacing: 0.2em; border-radius: 0 0 8px 8px; border-top: 9px solid #b7def1; display: block; } ul.sitemap_ic li a:after { background: #fff; } ul.sitemap_ic li a:hover { color: #f72e58; } ul.sitemap_ic li a:before { background: #ff7b97; } ul.sitemap_ic li { background: url(../asset/list_marker2.png) no-repeat 0px 28px; } @media screen and (max-width: 767px) { .static #content h2.titleBg, h2.titleBg { line-height: 1.2; background: #109de5 url(../asset/h3_before.png) no-repeat 9px center; padding: 15px 10px 15px 60px; letter-spacing: 0.1em; background-size: 40px 30px; font-size: 25px; } } /* ========================================== notfoundBody ============================================ */ @media (min-width: 768px) and (max-width: 979px) { #notfoundBody .contentArea { margin: 0 0 2em; width: 748px; } } /* ===================================================================== top common ===================================================================== */ h2.main_tit { color: #6b6b6b; font-size: 42px; line-height: 1.2; letter-spacing: 0.2em; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; text-align: center; margin-bottom: 36px; } h2.main_tit .eg_color { color: #9fd134; font-size: 21px; display: block; font-family: "メイリオ", "Meiryo", sans-serif; padding-top: 8px; } .color_text { color: #0894db; font-size: 28px; font-family: "秀英丸ゴシック L", "Shuei MaruGo L", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 400; text-align: center; line-height: 1.2; padding-bottom: 18px; background: url(../asset/text_color_bg.png) no-repeat center bottom; margin-bottom: 17px; letter-spacing: 0.2em; } .top a.link_more { max-width: 400px; margin: 0 auto; } @media screen and (max-width: 767px) { h2.main_tit { font-size: 33px; } a.link_more { font-size: 17px; } } @media screen and (max-width: 497px) { .color_text { font-size: 23px; } } /* ===================================== 新着情報 ===================================== */ .full #content .b_09.block_news { background: #0894db; margin: 0 auto; padding: 65px 0 135px; color: #fff; text-align: center; } .gnv_tmp_008_title_block h2 { background: none; border-bottom: none; border-left: none; border-top: none; font-size: 42px; color: #fff; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; text-align: center !important; margin-bottom: 38px; padding: 0; } .gnv_tmp_008_title_block h2 span { display: block; color: #9fd134; font-size: 21px; padding-top: 7px; } #news dt { font-weight: normal; display: inline-block; margin: 0; } #news dd { display: inline-block; padding: 0 10px; line-height: 1.4; } #news dd a { text-decoration: none; color: #2b2b2b; } .top #news dd a { color: #fff; } .top #news dd a:hover { text-decoration: underline; color: #ffd83e; } .gnv_tmp_008_title_block #news .ov { bottom: -86px; position: absolute; top: inherit; right: 50%; margin-right: -37px; color: #fff; width: auto; font-size: 22px; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; } .gnv_tmp_008_title_block #news .ov:hover { text-decoration: none; color: #ffd83e; } #news dt .newsNew { background: #ffd83e; border-radius: 2px; font-size: 16px; padding: 0; width: 61px; height: 26px; line-height: 26px; font-weight: bold; color: #0894db; display: inline-block; text-align: center; vertical-align: middle; margin: 0 0 0 18px; } #news dl { border-bottom: none; margin-bottom: 12px; } #newsDetail h2.titleBg { text-align: left; color: #109de5; font-size: 26px; display: block; box-sizing: border-box; border: none; background: none; } /* ===================================== 医院情報 information ===================================== */ .full #content .block_information.b_09 { margin: 0 auto; padding: 81px 0 41px; } .block_information li { margin-bottom: 39px; } .block_information .access_text { float: right; width: 46%; } .block_information .access { width: 50%; float: left; padding-top: 11px; } .color_tit { color: #0894db; font-size: 28px; font-family: "秀英丸ゴシック L", "Shuei MaruGo L", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 400; line-height: 1.2; margin-bottom: 12px; } .access_text .text { margin-bottom: 36px; } .access_text .text.text02 { margin-bottom: 42px; } .top .gnv_tmp_map { padding-top: 65%; } .top .gnv_tmp_table02.gnv_tmp_hours { margin-bottom: 21px; } .time span { vertical-align: baseline; } @media (min-width: 768px) and (max-width: 979px) { .top .gnv_tmp_map { padding-top: 91%; } .access_text .text { letter-spacing: normal; } } @media screen and (max-width: 767px) { .top .gnv_tmp_map { padding-top: 85%; } .block_information .access_text, .block_information .access { float: none; width: 100%; margin: 0 auto 30px; } } /* 1-1. time -------------------------- */ .block_information li ul li { width: 48%; margin: 0 4% 0 0; float: left; } .block_information li ul li:last-child { margin: 0; } .time_text .text { margin-bottom: 35px; } .time p { line-height: 1.5; letter-spacing: normal; } .block_information .time_text { float: right; width: 46%; } .block_information .time { width: 50%; float: left; padding: 19px; box-sizing: border-box; } @media screen and (max-width: 767px) { .block_information .time, .block_information .time_text { width: 100%; float: none; padding: 0; margin: 0 auto 30px; } } /* ===================================== 院長あいさつ Greeting ===================================== */ .full #content .b_09.block_greeting { margin: 0 auto; padding: 83px 0 90px; background: url(../asset/block_greeting_bg.jpg) no-repeat center center; background-size: auto 100%; } .block_greeting h2.main_tit { margin-bottom: 33px; } .block_greeting .inner .text_box { width: 65%; max-width: 590px; text-shadow: 1px 1px 1px #fff; } .block_greeting .color_text { margin-bottom: 39px; padding-bottom: 16px; } .block_greeting .text:first-child { margin-bottom: 37px; } .block_greeting .text:last-child { margin-bottom: 40px; } .top .block_greeting a.link_more { margin: 40px 0 0; } @media (min-width: 768px) and (max-width: 979px) { .block_greeting .text:first-child { margin-bottom: 25px; } .block_greeting .inner .text_box { line-height: 2; font-size: 15px; } } @media screen and (max-width: 767px) { .full #content .b_09.block_greeting { padding: 50px 0; background: url(../asset/block_greeting_bg_sp.jpg) no-repeat center center; background-size: cover; } .block_greeting .inner .text_box { width: 100%; } .block_greeting .photo { width: 80%; margin: 0 auto 30px; } .block_greeting .text:first-child { margin-bottom: 20px; } } /* ===================================== もちづき歯科の特徴 Feature ===================================== */ .full #content .block_feature.b_09 { background: #ffeca3; margin: 0 auto; padding: 59px 0 39px; border-bottom: 5px solid #f3d970; } .full #content .feature_box.b_09 { margin: 0 auto; padding: 0 0 80px; background: #fbf9f4; } .full #content .feature_box.box01.b_09 { padding-top: 89px; } .block_feature h2.main_tit { margin-bottom: 0; } .feature_box .photo { width: 44%; max-width: 511px; } .feature_box .text_box { width: 54%; margin-top: 5px; } .feature_box.box01 .text_box, .feature_box.box03 .text_box { float: left; } .feature_box.box02 .text_box, .feature_box.box04 .text_box { float: right; } .feature_box.box01 .photo, .feature_box.box03 .photo { float: right; } .feature_box.box02 .photo, .feature_box.box04 .photo { float: left; } .text_box .sub_tit { line-height: 1.6; color: #0894db; font-size: 28px; font-family: "秀英丸ゴシック L", "Shuei MaruGo L", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 400; padding-left: 45px; position: relative; margin-bottom: 17px; } .sub_tit .inner_count { position: absolute; left: 0; color: #ffffff; width: 36px; height: 36px; vertical-align: middle; text-align: center; border-radius: 8px; font-size: 25px; background: #f6566a; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; box-shadow: 3px 3px 0px #f3d970; line-height: 36px; top: 50%; margin-top: -18px; } .box02 .sub_tit .inner_count { background: #a3d33c; } .box03 .sub_tit .inner_count { background: #ebb641; box-shadow: 3px 3px 0px #ffd4d9; } .box04 .sub_tit .inner_count { background: #22adf4; } @media (min-width: 768px) and (max-width: 979px) { .text_box .sub_tit { font-size: 19px; padding-left: 38px; margin-bottom: 15px; } .sub_tit .inner_count { width: 29px; height: 29px; font-size: 20px; line-height: 29px; margin-top: -15px; } .feature_box .text_box .text { line-height: 1.9; font-size: 15px; } } @media screen and (max-width: 767px) { .full #content .block_feature.b_09 { padding: 40px 0 28px; } .full #content .feature_box.box01.b_09 { padding-top: 50px; } .full #content .feature_box.b_09 { padding-top: 1px; padding-bottom: 50px !important; } .feature_box.box01 .text_box, .feature_box.box02 .text_box, .feature_box.box03 .text_box, .feature_box.box04 .text_box { width: 100%; float: none; margin-bottom: 20px; } .feature_box.box01 .photo, .feature_box.box02 .photo, .feature_box.box03 .photo, .feature_box.box04 .photo { width: 100%; float: none; } .sub_tit .inner_count { top: 2px; margin-top: 0; width: 32px; height: 32px; font-size: 89%; line-height: 30px; } } @media screen and (max-width: 479px) { .text_box .sub_tit { font-size: 22px; margin-bottom: 15px; padding: 5px 0 5px 40px; } } /* 1-1. block_feature_link -------------------------- */ .full #content .b_09.block_feature_link { margin: 0 auto; background: #fbf9f4; padding: 17px 0 104px; } .block_feature_link li { width: 32%; float: left; margin-right: 2%; } .block_feature_link li:last-child { margin-right: 0%; } .block_btn { display: table; background: #ff94ab; width: 100%; border-radius: 7px; padding: 15px 10px; line-height: 1.2; text-align: center; vertical-align: middle; color: #fff; font-size: 20px; height: 54px; box-sizing: border-box; } .block_btn .btn_inner { display: table-cell; vertical-align: middle; height: 100%; } .block_btn:hover { text-decoration: none; background: #ff7b97 !important; } .block_feature_link li:nth-child(2n) .block_btn { background: #68cded; } .block_feature_link li:last-child .block_btn { background: #ebb641; } @media screen and (max-width: 767px) { .full #content .b_09.block_feature_link { padding-bottom: 60px; } .block_btn { padding: 15px 2px; font-size: 17px; height: 90px; letter-spacing: normal; } } /* ===================================== 治療方針 Policy ===================================== */ .full #content .block_policy.b_09 { margin: 0 auto; padding: 90px 0; text-align: center; } .block_policy .text { line-height: 2.25; margin-bottom: 30px; } @media screen and (max-width: 767px) { .full #content .block_policy.b_09 { padding: 45px 0; } } /* ===================================== block_phone ===================================== */ .full #content .b_09.block_phone { margin: 0 auto; padding: 40px 0 10px; } .block_phone li { margin: 0 auto 15px; } .block_phone li:last-child { margin: 0 auto; } /* ===================================== 1. bottom ===================================== */ #content-bottom { padding: 70px 0 66px; } #content-bottom ul { display: grid; grid-template-columns: 1fr 1fr; max-width: fit-content; margin: auto; gap: 0 4%; } #content-bottom li { padding-bottom: 40px ; } /*#content-bottom li:last-child { float: right; }*/ #content-bottom li img { width: 100%; max-width: 560px; } @media screen and (max-width: 767px) { #content-bottom ul { display: block; } body.under #content-bottom { padding-top: 0; } } /* ===================================== 1. header ===================================== */ .type6 .header_box { background: none; padding: 0; } h1 { width: 31%; } h1 img { max-width: 361px; width: 100%; } h1 a img:hover { opacity: 1; } @media screen and (max-width: 1200px) { h1 { width: 23%; } } @media (min-width: 768px) and (max-width: 979px) { .header_box .grid_12 { width: 748px; margin: 0; } } @media screen and (max-width: 767px) { .type6 .header_box { background: #109de5; position: relative; box-shadow: 0px 1px 1px #7db1b6; padding: 7px 0 45px; } h1 { width: 85%; margin: 0 auto; text-align: center; } h1 img { max-width: 810px; } #mm0 { border: none; padding: 5px; border-radius: 7px; background: #fff; } .type6 .header_box:after { position: absolute; content: ""; width: 100%; height: 5px; background: url(../asset/header_after.png) repeat-x; bottom: 19px; } } /* 1-1. nav -------------------------- */ .sf-menu { padding-top: 12px; padding-right: 0; } .sf-menu > li.current span { background: none; } .sf-menu > li { font-family: inherit; font-size: 15px; line-height: 1.2; font-weight: normal; margin-left: 10px; border-bottom: 5px solid transparent; } .sf-menu > li > a { color: #565656; padding: 13px; transition: none; -moz-transition: none; -webkit-transition: none; letter-spacing: 1px; } .sf-menu > li > a.sf-with-ul:after { display: block; position: absolute; content: ''; width: 10px; height: 6px; top: 35px; left: 50%; margin-left: -5px; background: url(../asset/menu_arrow01.png) no-repeat 0px 0px; background-size: 10px 6px; } .sf-menu > li.orange > a.sf-with-ul:after { background: url(../asset/menu_arrow02.png) no-repeat 0px 0px; background-size: 10px 6px; } .sf-menu > li:hover span, .sf-menu > li.sfHover span, .sf-menu > li.current span { border-radius: 0; left: 0; top: 0; right: 0; bottom: 0; background: #22adf4; width: 100%; border-radius: 7px; } .sf-menu > li > a:hover, .sf-menu > li > span:hover { color:#fff; } @media (min-width: 768px) and (max-width: 979px) { .sf-menu { padding-top: 6px; } .sf-menu > li {; margin-left: 5px; } .sf-menu > li > a { padding: 12px 7px; font-size: 15px; letter-spacing: normal; } .sf-menu > li > a.sf-with-ul:after { top: 32px; } } /* 1-1. sub nav -------------------------- */ .sf-menu ul { background: #22adf4; padding: 15px 5px 10px; text-align: center; top: 47px; left: 50%; width: 150px; margin-left: -80px; } .sf-menu ul li:first-child { margin-top: 0; } .sf-menu ul li { position: relative; font-family: inherit; font-size: 12px; line-height: 1.5; font-weight: normal; margin-top: 10px; } .sf-menu ul li a { line-height: 1.5; display: block; letter-spacing: normal; } .sf-menu ul li a:hover { color: #ffd83e; } /* ===================================== 1. common ===================================== */ /* 1-1. float -------------------------- */ .fl { float: left;} .fr { float: right;} .cb { clear: both; padding: 1.5em 0; } /* 1-2. margin -------------------------- */ .m00 { margin: 0 !important;} .m05 { margin: 5px !important;} .m10 { margin: 10px !important;} .m15 { margin: 15px !important;} .m20 { margin: 20px !important;} .m25 { margin: 25px !important;} .m30 { margin: 30px !important;} .m35 { margin: 35px !important;} .m40 { margin: 40px !important;} .m45 { margin: 45px !important;} .m50 { margin: 50px !important;} .mt00 { margin-top: 0 !important;} .mt05 { margin-top: 5px !important;} .mt10 { margin-top: 10px !important;} .mt15 { margin-top: 15px !important;} .mt20 { margin-top: 20px !important;} .mt25 { margin-top: 25px !important;} .mt30 { margin-top: 30px !important;} .mt35 { margin-top: 35px !important;} .mt40 { margin-top: 40px !important;} .mt45 { margin-top: 45px !important;} .mt50 { margin-top: 50px !important;} .mr00 { margin-right: 0 !important;} .mr05 { margin-right: 5px !important;} .mr10 { margin-right: 10px !important;} .mr15 { margin-right: 15px !important;} .mr20 { margin-right: 20px !important;} .mr25 { margin-right: 25px !important;} .mr30 { margin-right: 30px !important;} .mr35 { margin-right: 35px !important;} .mr40 { margin-right: 40px !important;} .mr45 { margin-right: 45px !important;} .mr50 { margin-right: 50px !important;} .mb00 { margin-bottom: 0 !important;} .mb05 { margin-bottom: 5px !important;} .mb10 { margin-bottom: 10px !important;} .mb15 { margin-bottom: 15px !important;} .mb20 { margin-bottom: 20px !important;} .mb25 { margin-bottom: 25px !important;} .mb30 { margin-bottom: 30px !important;} .mb35 { margin-bottom: 35px !important;} .mb40 { margin-bottom: 40px !important;} .mb45 { margin-bottom: 45px !important;} .mb50 { margin-bottom: 50px !important;} .mb70 { margin-bottom: 70px !important;} .ml00 { margin-left: 0 !important;} .ml05 { margin-left: 5px !important;} .ml10 { margin-left: 10px !important;} .ml15 { margin-left: 15px !important;} .ml20 { margin-left: 20px !important;} .ml25 { margin-left: 25px !important;} .ml30 { margin-left: 30px !important;} .ml35 { margin-left: 35px !important;} .ml40 { margin-left: 40px !important;} .ml45 { margin-left: 45px !important;} .ml50 { margin-left: 50px !important;} /* 1-3. padding -------------------------- */ .pa00 { padding: 0 !important;} .pa05 { padding: 5px !important;} .pa10 { padding: 10px !important;} .pa15 { padding: 15px !important;} .pa20 { padding: 20px !important;} .pa25 { padding: 25px !important;} .pa30 { padding: 30px !important;} .pa35 { padding: 35px !important;} .pa40 { padding: 40px !important;} .pa45 { padding: 45px !important;} .pa50 { padding: 50px !important;} .pt00 { padding-top: 0 !important;} .pt05 { padding-top: 5px !important;} .pt10 { padding-top: 10px !important;} .pt15 { padding-top: 15px !important;} .pt20 { padding-top: 20px !important;} .pt25 { padding-top: 25px !important;} .pt30 { padding-top: 30px !important;} .pt35 { padding-top: 35px !important;} .pt40 { padding-top: 40px !important;} .pt45 { padding-top: 45px !important;} .pt50 { padding-top: 50px !important;} .pr00 { padding-right: 0 !important;} .pr05 { padding-right: 5px !important;} .pr10 { padding-right: 10px !important;} .pr15 { padding-right: 15px !important;} .pr20 { padding-right: 20px !important;} .pr25 { padding-right: 25px !important;} .pr30 { padding-right: 30px !important;} .pr35 { padding-right: 35px !important;} .pr40 { padding-right: 40px !important;} .pr45 { padding-right: 45px !important;} .pr50 { padding-right: 50px !important;} .pb00 { padding-bottom: 0 !important;} .pb05 { padding-bottom: 5px !important;} .pb10 { padding-bottom: 10px !important;} .pb15 { padding-bottom: 15px !important;} .pb20 { padding-bottom: 20px !important;} .pb25 { padding-bottom: 25px !important;} .pb30 { padding-bottom: 30px !important;} .pb35 { padding-bottom: 35px !important;} .pb40 { padding-bottom: 40px !important;} .pb45 { padding-bottom: 45px !important;} .pb50 { padding-bottom: 50px !important;} .pl00 { padding-left: 0 !important;} .pl05 { padding-left: 5px !important;} .pl10 { padding-left: 10px !important;} .pl15 { padding-left: 15px !important;} .pl20 { padding-left: 20px !important;} .pl25 { padding-left: 25px !important;} .pl30 { padding-left: 30px !important;} .pl35 { padding-left: 35px !important;} .pl40 { padding-left: 40px !important;} .pl45 { padding-left: 45px !important;} .pl50 { padding-left: 50px !important;} /* 1-4. text-align -------------------------- */ .tal { text-align:left;} .tac { text-align:center;} .tar { text-align:right;} /* 1-5. bold -------------------------- */ .bold { font-weight: bold; } /* 1-6. ph -------------------------- */ .ph { display: inline-block; border: 1px solid #e3e3e3; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .ph img { width: 100%; } /* 1-7. pc sp change -------------------------- */ .pc { display: block !important; } .sp { display: none !important; } @media screen and (max-width: 767px) { .pc { display: none !important; } .sp { display: block !important; } } /* 1-8. image layout -------------------------- */ /** 基本設定 **/ /* right*/ .b_11_2_in span img, .b_11 .b_11_in span img { float: right; margin: 0 0 20px 20px; width: 37%; } @media screen and (max-width: 767px) { .b_11_2_in span img, .b_11 .b_11_in span img { float: none; margin: 0 auto 20px; width: 100%; } } /** 個別設定 **/ /* left */ .img_l span img { float: left !important; margin: 0 20px 20px 0 !important; } /* right */ .img_r span img { float: right !important; margin: 0 0 20px 20px !important; } /* 1-9. image decoration -------------------------- */ /* Round */ .image img, .text_image img, .gnv_tmp_style img { border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; } /* 1-10. rollover(Transmission) -------------------------- */ .rollover a img:hover, .rollover span a img:hover, .rollover .img_r span a img:hover { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; } /* ===================================== 1-11. other ===================================== */ /* 1-11-1. before after -------------------------- */ .ba_box { background: url(/asset/ba_ar.png) no-repeat 49% 55%; display: table; width: 100%; } .ba_box div.column_l, .ba_box div.column_r { display: table-cell; width: 30%; } .ba_box div.column_l span, .ba_box div.column_r span { width: 100%; } .ba_box div.column_l p, .ba_box div.column_r p, .ba_box div.column_l span img, .ba_box div.column_r span img { width: 95% !important; margin: 0 auto !important; } .ba_box .column_r, .ba_box .column_l { text-align: center; color: #B69440; font-size: 120%; font-weight: bold; } .ba_box .column_r span { text-align: right; } @media screen and (max-width: 767px) { .ba_box { background: url(/asset/ba_ar_sp.png) no-repeat center 50%; margin: 0 auto 5em !important; } .ba_box div.column_l, .ba_box div.column_r { width: 100% !important; display: block !important; } .ba_box .column_l { margin-bottom: 2em!important; } .ba_box .column_r span { text-align: center; } } /* 1-11-2. list -------------------------- */ /* list 01 */ .ic_01 { width: 100%; margin: 0 15px; } .ic_01 .clearfix { padding: 5px 5px 10px 25px; } .ic_01 span { position: relative; } .ic_01 span:before { content: ""; position: absolute; background: #ff94ab; top: 12px; left: -16px; margin-top: -4px; height: 7px; width: 7px; border-radius: 50%; } /* ul */ .ic_01 li { position: relative; padding: 5px 5px 10px 20px; } .ic_01 li:before { content: ""; position: absolute; background: #ff94ab; top: 18px; left: 0; margin-top: 0px; height: 8px; width: 8px; border-radius: 50%; } /* list 02 */ .ic_02 { margin: 0 15px; } .ic_02 .clearfix { padding: 5px 5px 5px 35px; } .ic_02 .clearfix span { position: relative; } .ic_02 span:before{ content:"\00a0"; display: block; border: solid 9px #ff94ab; height: 0; width: 0; position: absolute; left: -29px; top: 10px; margin-top: -8px; } .ic_02 span:after{ content:"\00a0"; display:block; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; position:absolute; left: -23px; top: 10px; margin-top: -4px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /* ul */ .ic_02 ul { margin: 35px; } .ic_02 li { position: relative; padding: 5px 5px 5px 0; } .ic_02 li:before { content:"\00a0"; display: block; border: solid 9px #000; height: 0; width: 0; position: absolute; left: -29px; top: 10px; margin-top: -4px; } .ic_02 li:after{ content:"\00a0"; display:block; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; position:absolute; left: -23px; top: 10px; margin-top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /* arrow list 01 */ .ic_arrow_01 { margin: 0 15px; } .ic_arrow_01 div { padding: 5px 5px 5px 25px; } .ic_arrow_01 span { position: relative; } .ic_arrow_01 span:before { display: block; content: ""; position: absolute; left: -15px; width: 0; height: 0; margin-top: 6px; border: 5px solid transparent; border-left: 5px solid #000; } .ic_arrow_01 span:hover:before { left: -12px; } /* ul */ .ic_arrow_01 ul { margin: 25px; } .ic_arrow_01 li { position: relative; padding: 5px 5px 5px 0; } .ic_arrow_01 li:before { display: block; content: ""; position: absolute; top: 10px; left: -15px; width: 0; height: 0; margin-top: -1px; border: 5px solid transparent; border-left: 5px solid #000; } /* arrow list 02 */ .ic_arrow_02 { margin: 0 15px; } .ic_arrow_02 .clearfix { padding: 5px 5px 5px 30px; } .ic_arrow_02 span { position: relative; } .ic_arrow_02 span:before { display: block; content: ""; position: absolute; top: 10px; left: -25px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #999; } .ic_arrow_02 span:after { display: block; content: ""; position: absolute; top: 10px; left: -19px; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; border-left: 5px solid #fff; } .ic_arrow_02 span:hover:before { left: -22px; } .ic_arrow_02 span:hover:after { left: -16px; } /* ul */ .ic_arrow_02 ul { margin: 30px; } .ic_arrow_02 li { position: relative; padding: 5px 5px 5px 0; } .ic_arrow_02 li:before { display: block; content: ""; position: absolute; top: 10px; left: -25px; width: 16px; height: 16px; margin-top: -4px; border-radius: 50%; background: #999; } .ic_arrow_02 li:after { display: block; content: ""; position: absolute; top: 10px; left: -19px; width: 0; height: 0; margin-top: -1px; border: 5px solid transparent; border-left: 5px solid #fff; } .ic_arrow_02 li:hover:before { left: -22px; } .ic_arrow_02 li:hover:after { left: -16px; } /* 1-11-3. flow -------------------------- */ .flow { margin: 0 15px; } img.gnv_tmp_flow_arrow_01, img.gnv_tmp_flow_arrow_02 { margin: 10px auto 0; } .flow.b_11 .b_11_in span img { width: 30% !important; float: left !important; } @media screen and (max-width: 767px) { .flow.b_11 .b_11_in span img { width: 100% !important; float: none !important; } } /* 1-11-4. qa -------------------------- */ .gnv_tmp_qa_q { border-left: 3px solid #333; padding: 10px; display: table; margin: 0 15px 10px; } .gnv_tmp_qa_q span.tit { font-size: 200%; font-weight: bold; color: #333; padding-right: 20px; display: table-cell; width: 30px; } .gnv_tmp_qa_a { border-left: 3px solid #ccc; padding: 10px; display: table; margin: 0 15px 10px; } .gnv_tmp_qa_a span.tit { font-size: 200%; font-weight: bold; color: #ccc; padding-right: 20px; display: table-cell; width: 30px; } .gnv_tmp_qa_a p, .gnv_tmp_qa_q p { display: table-cell; width: 100%; vertical-align: top; } /* ===================================== 1-12. table ===================================== */ /* 1-12-1. default -------------------------- */ .b_06 table td, .b_06 table th { border: 1px solid #ccc; padding: 5px !important; } .table2 .b_06_item { background: none; width: 30%; border: none; border-bottom: 1px solid #f6566a; } .table2 .b_06_content { border: none; border-bottom: 1px solid #b7def1; } /* 1-12-2. table01 -------------------------- */ table.gnv_tmp_table01 { margin-bottom: 1.5em; } table.gnv_tmp_table01 th, table.gnv_tmp_table01 td { text-align: left; } table.gnv_tmp_table01 { background: #fff; width: 100%; } table.gnv_tmp_table01 thead th { background: #ddd; border-top: 1px dotted #ccc; } table.gnv_tmp_table01 th { background: #efefef; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; } table.gnv_tmp_table01 td { background: #fff; border-bottom: 1px dotted #ccc; border-top: 1px dotted #ccc; } /* 1-12-3. table02 -------------------------- */ table.gnv_tmp_table02 { margin-bottom: 1.5em; } table.gnv_tmp_table02 th, table.gnv_tmp_table02 td { text-align: left; padding: 2px 0; } table.gnv_tmp_table02 { width: 100%; } table.gnv_tmp_table02 thead th:first-child { letter-spacing: 2px; } table.gnv_tmp_table02 thead th { background: #a3d33c; border-top: none; border-bottom: none; color: #fff; font-size: 15px; padding: 4px 0 3px; } .top table.gnv_tmp_table02 th, .top table.gnv_tmp_table02 td { border: none; } table.gnv_tmp_table02 th { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } table.gnv_tmp_table02 td { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } /* 1-12-4. hours -------------------------- */ table.gnv_tmp_hours th, table.gnv_tmp_hours td { text-align: center; letter-spacing: normal; font-size: 15px; background: #fbf9f4; } table.gnv_tmp_hours tbody th { width: 20%; } table.gnv_tmp_hours tbody th, table.gnv_tmp_hours tbody td { border-bottom: 1px solid #fff !important; } /*th { padding: 0px !important; }*/ @media screen and (max-width: 767px) { table.gnv_tmp_hours th, table.gnv_tmp_hours td { font-size: 70%; } .table2 .b_06_content { letter-spacing: normal; } } /* ===================================== 2. header ===================================== */ @media (min-width: 768px) and (max-width: 768px) { #header .container { width: 748px; } } @media (min-width: 768px) and (max-width: 979px) { .header_box .row { margin-left: 0 !important; } } /* ===================================== 3. nav ===================================== */ #inquiryBody nav { display:none; } /* ===================================== 4. mainimage ===================================== */ /* 4-1. top -------------------------- */ /* slider default hidden */ #slider.camera_wrap { display:none!important; } /* image size fixed */ #mainimage .main_content { background: url(../asset/mainimg.jpg) no-repeat top center; height: 1082px; position: relative; margin-top: -144px; background-size: auto 100%; } .under #mainimage { background: url(../asset/under_h2.jpg) no-repeat center center; margin-bottom: 24px; margin-top: -47px; padding: 51px 0; background-size: 2000px 100%; clear: both; } @media (max-width: 1199px) and (min-width: 980px) { #mainimage .main_content { margin-top: -70px; } .under #mainimage { margin-top: -10px; } } @media (min-width: 768px) and (max-width: 979px) { .under #mainimage { margin-top: -10px; padding: 30px 0; } #mainimage .main_content { margin-top: -60px; } #mainimage .main_content { height: 700px; } } @media screen and (max-width: 767px) { .under #mainimage { margin-top: 0; padding: 31px 0; } #mainimage .main_content { background: none; height: auto; margin-top: 0; } } /* 4-2. under -------------------------- */ #notfoundBody #mainimage, #sitemapBody #mainimage, #newsList #mainimage, #websiteNewsDetail #mainimage, #inquiryBody #mainimage { display: none; } .under h2 { border-left: none; color: #6b6b6b; margin: 0 auto; padding: 10px; font-size: 40px; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; letter-spacing: 0.2em; text-align: center; line-height: 1.2; } .under h2 span { color: #999; font-size: 70%; padding-left: 20px; } h2.titleBg { text-align: left; } @media screen and (max-width: 767px) { .under h2 { font-size: 35px; } } /* ===================================== 5. footer ===================================== */ #footer { margin-top: 0; background: url(../asset/footer_bg.jpg) no-repeat center center; padding: 77px 0 220px; border-top: 10px solid #0894db; background-size: cover; } #footer .row { margin-left: 0; } .copyright { color: #4b4b4b; margin-bottom: 9px; font-size: 16px; font-family: inherit; line-height: 1.8; text-transform: capitalize; } .copyright span { font-size: 14px; } .footer_sitemap li { display: inline; padding-right: 15px; line-height: 1.8; } ul.footer_sitemap { margin-bottom: 5px; } .footer_sitemap a { color: #4b4b4b; font-size: 15px; } #footer img { width:auto; } .footer_contact { margin-bottom: 14px; font-size: 30px; color: #0894db; vertical-align: top; font-family: inherit; font-weight: normal; text-transform: capitalize; text-align: left !important; } .footer_contact span, .footer_contact span a { vertical-align: top; } @media (min-width: 560px){ } @media (min-width: 980px){ #footer .row { display: grid; grid-template-columns: 32% 52%; justify-content: space-between; max-width: fit-content; margin: auto; } } #footer .list li { background: none; line-height: 1.4; margin: 27px 0 0 0; padding: 0; } #footer .list li:first-child { margin-top: 0; } #footer ul.list li a { color: #4b4b4b; font-size: 16px; line-height: 1.4; } .footer_box02 .list.inner01 { float: left; } .footer_box02 .list.inner02 { float: right; } #footer h4.footer_title { color: #0894db; font-size: 28px; line-height: 1.2; font-family: "秀英丸ゴシック L", "Shuei MaruGo L", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 400; letter-spacing: 0.2em; text-align: left !important; margin: 17px 0 31px; padding: 0; background: none; } #footer h4.footer_title:before { display: none; } #footer .list li a:hover { color: #f6566a; } @media (min-width: 960px) { #footer .footer-link { grid-column: 1 / 3;; } } @media (min-width: 768px) and (max-width: 979px) { #footer { padding: 60px 0 100px; } .footer_contact { font-size: 20px; } ul.footer_sitemap { margin-bottom: 15px; } .footer_sitemap li { display: block; padding-right: 0; } .footer_box01, .footer_box02 { width: 60%; margin: auto; } } @media (max-width: 767px) { #footer { background: url(../asset/footer_bg_sp.jpg) no-repeat center center; background-size: cover; } .footer_box01, .footer_box02 { width: 100%; float: none; } .footer_box01 { margin-bottom: 30px; } } @media (max-width: 479px) { .footer_box02 .list.inner01 { float: none; margin-bottom: 27px; } .footer_box02 .list.inner02 { float: none; } .footer_contact { font-size: 25px; } } /* 6-1. title -------------------------- */ #toTop { background: url(../asset/totop.png) center top no-repeat; bottom: 4%; height: 117px; right: 4% !important; margin-right: 0 !important; width: 120px; background-size: 100px 95px; display: block; } #toTop:hover { background-position: center top; opacity: 0.8; } @media (max-width: 767px) { #toTop { height: 90px; right: 6% !important; width: 90px; background-size: 90px 90px; } } /* ===================================== 6. content ===================================== */ #content { min-height: 700px; } /*@media (min-width: 768px) and (max-width: 768px) { .container { width: 748px; } }*/ @media (max-width: 767px) { #content { min-height: 400px; } } /* 6-1. title -------------------------- */ h3 { font-size: 30px; line-height: 1.2; margin: 0; word-wrap: break-word; background: #109de5 url(../asset/h3_before.png) no-repeat 19px center; color: #fff; padding: 22px 10px 22px 85px; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; letter-spacing: 0.2em; border-radius: 0 0 8px 8px; border-top: 9px solid #b7def1; } h4 { color: #0894db; font-size: 25px; line-height: 1.2em; margin-bottom: 0; letter-spacing: 0.2em; font-family: "秀英丸ゴシック L", "Shuei MaruGo L", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 400; position: relative; padding: 12px 5px 12px 35px; background: url(../asset/under_h4_border.png) repeat-x center bottom; } h4:before { position: absolute; content: ""; background: #ffd83e; width: 15px; height: 15px; top: 20px; left: 9px; border-radius: 50%; } h5:before { position: absolute; content: ""; width: 4px; height: 20px; background: #ffa9bc; left: 0; top: 6px; } h5 { font-size: 20px; line-height: 1.2; font-weight: normal; color: #f75f7f; margin-bottom: 0; font-family: "秀英丸ゴシック B", "Shuei MaruGo B", sans-serif; font-family: "dnp-shuei-mgothic-std", sans-serif; font-weight: 600; padding: 3px 5px 3px 16px; position: relative; } @media (max-width: 767px) { h3 { font-size: 25px; background: #109de5 url(../asset/h3_before.png) no-repeat 9px center; padding: 19px 5px 19px 65px; letter-spacing: 1px; border-radius: 0 0 8px 8px; background-size: 40px 30px; } } @media (max-width: 497px) { .under h2 { font-size: 30px; } h3 { font-size: 23px; } } /* 6-2. table -------------------------- */ .table_num { width: 100%; } .table_num th { font-size: 300%; font-color: #333; vertical-align: top; font-weight: bold; padding-right: 0.5em; } .table_num td { padding-bottom: 1em; } /* 6-3. parts -------------------------- */ .b_11 .b_11_in span img { margin: 0 2em 1em 0; width: 35%; } .grid_3 .b_11_in span img, .grid_4 .b_11_in span img, .llebox3 .b_11_in span img, .singlebox3 .b_11_in span img, .singlebox4 .b_11_in span img { float: none; width: 100%; } @media (max-width: 767px) { /* 6-3. parts -------------------------- */ .b_11 .b_11_in span img { float: none; width: 100%; margin: 0 0 2em; } } /* 6-4. map -------------------------- */ .gnv_tmp_map { position: relative; width: 100%; padding-top: 35%; } .gnv_tmp_map iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; border: none; } @media screen and (max-width: 767px) { .gnv_tmp_map { padding-top: 70%; } } /* 6-5. tel -------------------------- */ .tel_txt a { cursor: text; } .tel_txt a:hover { text-decoration: none; } @media screen and (max-width: 767px) { .tel_txt a, .tel_txt a:hover { text-decoration: underline; } } /* 6-6. other-------------------------- */ /* column2 column margin */ .b_10.b_10_column2 div.column_l { padding-right: 10px; } .b_10.b_10_column2 div.column_r { padding-left: 10px; } /* box color */ .bc01 { background: #e8daca; padding: 20px 15px; } .bc02 { background: #cf9e64; padding: 20px 15px; } .bc03 { background: #b09371; padding: 20px 15px; } .bc04 { background: #635545; padding: 20px 15px; } /* w960 */ .w960 { max-width: 960px; margin: 0 auto; padding: 0 10px; } /*----- googlecalender、googleMap、インドアビュー -----*/ .gMap, .calenderWrap, .indoorView { position: relative; } .gMap iframe, .calenderWrap iframe, .indoorView iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .gMap { padding-top: 33.25%; } .calenderWrap, .indoorView { padding-top: 56.25% } .calenderWrap iframe { min-height: 260px; } .indoorView iframe { min-height: 240px; } @media only screen and (max-width: 480px) { .gMap{ padding-top: 220px; } .calenderWrap { padding-top: 300px; } .indoorView { padding-top: 240px; } } /*-------------------------------------------------------*/ /* ===================================== 7. full content ===================================== */ .full #content .container { width: 100%; } .full #content .container12 { width: 100%!important; } .full #content .b_09 { margin-bottom: 0; padding-bottom: 1.5em; } .full #content { padding: 0; } .full #content .grid_12 { margin-left: auto; margin-right: auto; width: 1170px; float: none; } @media (min-width: 980px) and (max-width: 1199px) { .full #content .grid_12 { width: 940px; } } @media (min-width: 768px) and (max-width: 979px) { .full #content .grid_12 { width: 748px; } } @media (max-width: 767px) { .full #content .grid_12 { width: 420px; } .full .header_box .grid_12 { width: 100%; } } @media (max-width: 479px) { .full #content .grid_12 { width: 300px; padding: 0; } } /* ===================================== 8. blog ===================================== */ .blog .grid_8 { margin-left: 0; } .blog .entry { border-bottom: 1px solid #ccc; margin-bottom: 60px; padding-bottom: 60px; } /* 8-1. sns -------------------------- */ .blog #content .shareBt { text-align: right; } .blog .shareBt .fb_iframe_widget { margin-right: 5px; } .blog .shareBt .twitter-tweet-button { text-align: right; vertical-align: middle; width: 90px !important; } .lineBt img { margin-top: 5px; } /* 8-2. input -------------------------- */ input[type="text"]{ border: 1px solid rgb(204, 204, 204); border-radius: 3px; padding: 2px; border-radius: none; width: 98%; margin-bottom: 5px; } .blog_search_submit { text-align: center; width: 98%; display: block; } .blog_search_submit input { padding: 0 5px; } /* ===================================== 9. link ===================================== */ /* 9-1. content text link -------------------------- */ .link a:link { text-decoration: underline; } /* 9-2. tel link -------------------------- */ a[href^="tel:"] { pointer-events: none; cursor:text; } @media screen and (max-width: 767px) { a[href^="tel:"] { pointer-events: auto; cursor:pointer; } } /* 9-3. side link -------------------------- */ #sidecontact{ display: block; position: fixed; top: 21%; z-index: 1000; } #sidecontact.rightContent{ right:0; } @media (min-width: 768px) and (max-width: 979px) { #sidecontact { width: 75px; } } @media screen and (max-width: 767px) { #sidecontact{ display: none; } } /* ===================================== 11. hikoukai ===================================== */ .hikoukai { display: none !important; } #drag-temp-pre-content .parts.hikoukai { display: block !important; border: 5px solid #777; background: #555; padding: 20px 0; } /*-------------------------------------- 20170612森田追記 ----------------------------------------*/ .top .indoor { padding-bottom: 0 !important; margin-bottom: 4em !important; } .top .indoor iframe { margin: 0 auto; display: block; } @media screen and (min-width: 601px){ .google_map_wrap { display: block; position: relative; padding-top: 56.25% } .google_map_wrap iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } } @media screen and (max-width: 600px){ .top .indoor iframe { width: 100% !important; height: 250px; } } /*viemo*/ .iframeWrap { position: relative; padding-top: 56.25%; } .iframeWrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .viemo_w{ max-width: 800px; margin-left: auto; margin-right: auto; } .full #content .viemo_w .grid_12{ max-width: 800px; } @media (min-width: 768px){ .b_11_3.b_11_3_column2 { display: grid; grid-template-columns: 1fr 1fr; } .b_11_3.b_11_3_column2 .column_l .bg_box, .b_11_3.b_11_3_column2 .column_r .bg_box { height: 100%; } } .iframeWrap { max-width: 90vw; margin: auto; } .disIB,.disib { display: inline-block !important; } .sidebar { position: fixed; right: 0; top: 100px; height: 0; z-index: 1000; } .sidebar_menu { position: fixed; top: 12%; right: 25px; width: 55px; height: 63px; z-index: 200; } .sidebar_menu img { width: 45px; margin-right: 5px; display: block; } .sidebar_menu span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #015883; border-radius: 4px; display: inline-block; transition: all .5s; box-sizing: border-box; } .sidebar_menu span:nth-of-type(1) { top: 0; } .sidebar_menu span:nth-of-type(2) { top: 19px; } .sidebar_menu span:nth-of-type(3) { top: 38px; } .sidebar_menu .sidebar_flag_name { font-family: 'Kiwi Maru', serif; color: #015883; text-align: center; padding-top: 45px; } #sidebar_flag:checked ~ .sidebar_menu span:nth-of-type(1) { -webkit-transform: translateY(100%) rotate(-45deg); transform: translateY(100%) rotate(-45deg); } #sidebar_flag:checked ~ .sidebar_menu span:nth-of-type(2) { opacity: 0; } #sidebar_flag:checked ~ .sidebar_menu span:nth-of-type(3) { -webkit-transform: translateY(100%) rotate(45deg); transform: translateY(100%) rotate(45deg); top: 0; } .sidebar_nav { /* height: 100vh; */ height: calc(100vh + 157px); width: 100vw; z-index: 10; background: #fff; background: rgba(8,148,219,0.9); padding: 80px 40px 20px; overflow-y: auto; /* position: absolute; */ /* display: grid; */ /* width: 750px; */ /* justify-content: space-between; */ gap: 0 10px; content-visibility: auto; contain-intrinsic-size: 100vw; box-sizing: border-box; top: 0; left: 0; margin-top: -116px; /* grid-template-columns: 1fr 1fr 1fr; */ } #sidebar_flag ~ .sidebar_nav { -webkit-transform: translateX(101vw); -ms-transform: translateX(101vw); -moz-transform: translateX(101vw); -o-transform: translateX(101vw); transform: translateX(101vw); -webkit-transition-duration: .4s; -o-transition-duration: .4s; -moz-transition-duration: .4s; transition-duration: .4s; } #sidebar_flag:checked ~ .sidebar_nav { -webkit-transform: translateX(0vw); -ms-transform: translateX(0vw); -moz-transform: translateX(0vw); -o-transform: translateX(0vw); transform: translateX(0vw); } .sidebar_nav_inner a:hover { transition: opacity 0.3s ease; } .sidebar_nav_inner a:hover img { opacity: 0.7; } .sidebar_nav_inner > ul { display: grid; grid-template-columns: repeat(3,1fr); max-width: fit-content; margin: auto; gap: 0 30px; } .sidebar_nav_inner ul a { color: #fff; padding: 10px 40px 10px 0; border-bottom: 1px solid #fff; position: relative; display: block; transition: opacity 0.3s ease; height: 100%; display: grid; align-items: center; box-sizing: border-box; line-height: 1.7; } .sidebar_nav_inner ul a:hover { opacity: 0.7; } .sidebar_nav_inner ul a::after { content: ""; position: absolute; right: 0; top: 50%; border-top: 1px solid #fff; border-right: 1px solid #fff; rotate: 45deg; width: 10px; height: 10px; margin-top: -5px; } .sidebar_nav_inner ul a:hover { text-decoration: none; } @media (min-width: 960px){ .sidebar_nav_inner { display: grid; align-items: center; height: 49%; margin-top: 70px; } } @media (max-width: 767px){ .sidebar_menu { top: 8vw; width: 9vw; height: 6vw; right: 3vw; } .sidebar_nav { padding: 80px 20px 20px; letter-spacing: 0.05em; } .sidebar_nav_inner > ul { grid-template-columns: 1fr 1fr; margin-top: 30px; gap: 0 4vw; max-width: 96%; } .sidebar_menu span:nth-of-type(1) { top: 0; } .sidebar_menu span:nth-of-type(2) { top: 50%; } .sidebar_menu span:nth-of-type(3) { top: 100%; } #sidebar_flag:checked ~ .sidebar_menu span:nth-of-type(1) { -webkit-transform: translateY(100%) rotate(-45deg); transform: translateY(100%) rotate(-45deg); } #sidebar_flag:checked ~ .sidebar_menu span:nth-of-type(3) { -webkit-transform: translateY(100%) rotate(45deg); transform: translateY(100%) rotate(45deg); } }