@charset "utf-8";

/*------------------------------
  common
------------------------------*/
/*-- リセット --*/
html { font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif; background-color: #4CA; }
body { min-width: 100vw; width: 100%; margin: 0; padding: 0; font-size: 10px; -webkit-text-size-adjust: 100%; color: "222"; background-color: #FFF; overflow-x: hidden; }
* { margin: 0; padding: 0; text-align: left; line-height: 1.5em; box-sizing: border-box; }
a { text-decoration: none; }
img { width: 100%; border: none; display: block; }
li { list-style: none; }
dl, dt, dd { padding: 0; margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
input, select { vertical-align: middle; }
header, main, footer { width: 100%; }
h1, h2, h3, h4, h5 { font-size: 1em; }

/*-- ClearFix --*/
.cf { zoom:100%; }
.cf:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; }

/*-- main --*/
main { font-size: 1.6em; background-color: #FFF; }
main .bg_w { background-color: #FFF; }
main .bg_y { background-color: #fff7e0; }
.caption { padding-left: .5em; text-indent: -.5em; font-weight: 600; color: #35A; }
section { overflow: hidden; }


/*-- HEADER --*/
header { width: 100%; background: rgba(255,255,255,0.8); z-index: 10; }
.header_body { max-width: 1280px; min-width: 300px; width: 96%; margin: 0 auto; display: flex; position: relative; }
.header_body h1 { max-width: 320px; min-width: 240px; width: 25%; margin-top: 1.5em; }
.header_body h1 a { font-size: 1.6em; letter-spacing: .1em; color: #222; display: block; }
.header_body h1 a p { margin-bottom: .75em; }
.header_body h1 a p span { margin-left: .5em; }
.header_body h1 img { width: 100%; }
.head_menu { width: 75%; margin-top: 3.5em; font-size: 1.8em; font-weight: 600; flex-grow: 2; }
.head_menu ul { margin-left: 3em; display: flex; }
.head_menu li { width: 240px; height: 80px; }
.head_menu li a, .head_menu li span { padding: 1.472em .25em 1.472em 4em; letter-spacing: .1em; background-size: 2.6em; background-position: left 1em top 50%; background-repeat: no-repeat; display: block; }
.head_menu li a { color: #222; transition: .15s; }
.head_menu li span { color: #4CA; }
.head_menu li a:hover { letter-spacing: .25em; color: #4CA; transition: .3s; }
.head_menu li.home a, .head_menu li.home span { letter-spacing: .25em; }
.head_menu li.home a { background-image: url(../img/ico/ico_home.svg); }
.head_menu li.support a { background-image: url(../img/ico/ico_counter.svg); }
.head_menu li.usage a { background-image: url(../img/ico/ico_weathervane.svg); }
.head_menu li.home a:hover { letter-spacing: .35em; }
.head_menu li.home a:hover, .head_menu li.home span { background-image: url(../img/ico/ico_home_green.svg); }
.head_menu li.support a:hover, .head_menu li.support span { background-image: url(../img/ico/ico_counter_green.svg); }
.head_menu li.usage a:hover, .head_menu li.usage span { background-image: url(../img/ico/ico_weathervane_green.svg); }
.header_body .label { padding: .5em 4em 1em 4em; font-weight: 600; color: #FFF; background-color: #4CA; border-radius: 0 0 1em 1em; display: flex; position: absolute; top: 0; right: 0; }
.header_body .label .route { font-size: 1.4em; line-height: .666em; }
.header_body .label .route span { display: block; }
.header_body .label .route span:first-child { padding-top: .5em; background: url(../img/ST_Logo.svg) left 7.2em bottom 0 no-repeat; background-size: 2.85em; }
.header_body .label .time { padding: .5em 0 0 .5em; font-size: 2.2em; color: #FD4; }
.header_body .label .time span { font-size: 2.2em; font-family: Verdana, sans-serif; line-height: .6em; }
/*-- HEADER.fixed --*/
header.fixed { box-shadow: 0 0 5px 0 rgba(68,204,170,0.5); position: fixed; top: 0; }
header.fixed .header_body h1 { width: 240px; margin-top: .5em; }
header.fixed .header_body h1 a { font-size: 1.3em; letter-spacing: 0; }
header.fixed .header_body h1 img { width: 200px; }
header.fixed .header_body h1 a p { margin-bottom: 0; }
header.fixed .header_body .label { display: none; }
header.fixed .head_menu { margin-top: 0; }
header.fixed .head_menu ul { justify-content: center; }

/*-- HEADER（mobile） --*/
.header_sp_body { width: 100vw; height: 60px; background-color: rgba(255,255,255,0.8); position: fixed !important; top: 0; z-index: 20; display:none; }
.header_sp_body h1 { width: 200px; margin: .5em; position: absolute; left: 0; top: 0; z-index: 100; }
.header_sp_body input { display: none; }
/*メニューボタン*/
.headmenu_btn { width: 60px; height: 50px; margin: .5em 0 0 0; display: flex !important; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; z-index: 100; }
.headmenu_btn span, .headmenu_btn span:before, .headmenu_btn span:after { content: ''; width: 30px; height: 4px; background-color: #4CA; border-radius: 4px; display: block; position: absolute; transition: .25s; }
.headmenu_btn span::before { bottom: 10px; transition: .5s; }
.headmenu_btn span::after { top: 10px; transition: .5s; }
#headmenu-check:checked ~ .headmenu_btn span { background-color: rgba(255,255,255,0); }
#headmenu-check:checked ~ .headmenu_btn span::before { bottom: 0; transform: rotate(45deg); }
#headmenu-check:checked ~ .headmenu_btn span::after { top: 0; transform: rotate(-45deg); }
/*スライドインメニュー*/
.sp_menu { padding: 0 .5em 0 .5em; margin: 0 auto; background-color: none; opacity: 0; transition: 0; }
.sp_menu::after { content: ''; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.6); display: block; position: fixed; top: 0; left: 0; z-index: -1; display: none; }
#headmenu-check:checked ~ .sp_menu { padding: 65px .5em 1em .5em; background-color: #ececec; opacity: 1; }
#headmenu-check:checked ~ .sp_menu::after { display: block; }
.sp_menu .sp_menu_list li a, .sp_menu .sp_menu_list li span { width: 85%; padding: 0 1em 0 4.5em; margin: 0 0 0 auto; font-size: 1.8em; font-weight: 600; letter-spacing: .1em; line-height: 0; background-position: left 1.5em top 50%; background-repeat: no-repeat; background-size: 2.6em; border-radius: .5em; display: block; transition: .3s; }
#headmenu-check:checked ~ .sp_menu .sp_menu_list li a, #headmenu-check:checked ~ .sp_menu .sp_menu_list li span { padding: 1.3em 1em 1.3em 4.5em; margin: .25em 0 .25em auto; line-height: 1.111em; }
.sp_menu_list li span { color: #666; }
.sp_menu_list li a { color: #4CA; background-color: #FFF; }
.sp_menu_list li a:active { width: 100%; }
.sp_menu_list li.home span { background-image: url(../img/ico/ico_home.svg); }
.sp_menu_list li.home a { background-image: url(../img/ico/ico_home_green.svg); }
.sp_menu_list li.support span { background-image: url(../img/ico/ico_counter.svg); }
.sp_menu_list li.support a { background-image: url(../img/ico/ico_counter_green.svg); }
.sp_menu_list li.usage span { background-image: url(../img/ico/ico_weathervane.svg); }
.sp_menu_list li.usage a { background-image: url(../img/ico/ico_weathervane_green.svg); }
.sp_menu .sp_menu_info { margin: 0 auto; }
.sp_menu .sp_menu_info h2 { margin-bottom: 0; font-size: 1.5em; font-weight: 600; line-height: 0; letter-spacing: .1em; text-align: center; color: #4CA; }
.sp_menu .sp_menu_info h2 span { margin: 0 .25em; line-height: 0; display: inline-block; }
.sp_menu .sp_menu_info h2 span:last-child { font-size: 1.2em; }
.sp_menu .sp_menu_info p { margin: 0 auto; font-size: 1.5em; text-align: center; line-height: 0; }
.sp_menu .sp_menu_info p span { line-height: 0; display: inline-block; }
.sp_menu .sp_menu_info p.address { font-weight: 600; letter-spacing: .1em; }
.sp_menu .sp_menu_info p.tel { font-size: 3.6em; font-weight: 600; font-family: Verdana, sans-serif; display: none; }
.sp_menu .sp_menu_info p.tel a { padding-left: 1em; line-height: 0; color: #4CA; background: url(../img/ico/ico_tel_green.svg) 0 55% no-repeat; background-size: .9em; }
#headmenu-check:checked ~ .sp_menu .sp_menu_info { margin: 1.5em auto; }
#headmenu-check:checked ~ .sp_menu .sp_menu_info h2 { margin-bottom: .5em; line-height: 1.5em; }
#headmenu-check:checked ~ .sp_menu .sp_menu_info h2 span { line-height: 1.5em; }
#headmenu-check:checked ~ .sp_menu .sp_menu_info p { margin: .125em auto; line-height: 1.5em; }
#headmenu-check:checked ~ .sp_menu .sp_menu_info p span, #headmenu-check:checked ~ .sp_menu .sp_menu_info p a { line-height: 1.5em; }
#headmenu-check:checked ~ .sp_menu .sp_menu_info p.tel { display: block; }

/*-- FOOTER --*/
footer { width: 100%; margin: 0; background-color: #4CA; }
.footer_body { max-width: 1080px; min-width: 300px; width: 90%; padding: 2em 0; margin: 0 auto; color: #FFF; }
.foot_menu { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.foot_menu li { margin: 0 1em 1.5em 1em; }
.foot_menu li.home { margin-left: 4em; }
.foot_menu li.usage { margin-right: 4em; }
.foot_menu li a { width: 13.33em; font-size: 1.8em; font-weight: 600; line-height: 3.333em; text-align: center; color: #FFF; border: #FFF solid 2px; border-radius: .333em; display: block; transition: .2s; }
.foot_menu li.home a { letter-spacing: .2em; }
.foot_menu li a:hover { letter-spacing: .2em; color: #4CA; background-color: #FFF; transition: .5s; }
.foot_menu li.home a:hover { letter-spacing: .4em; }
.footer_body .name { font-size: 1.8em; font-weight: 600; line-height: 2em; letter-spacing: .2em; text-align: center; }
.footer_body .name span:first-child::after { content: '｜'; margin: 0 .5em; }
.footer_body .address { font-size: 1.6em; font-weight: 600; letter-spacing: .15em; text-align: center; }
.footer_body .address span { margin-right: .5em; }
.footer_body .address .postal { margin-right: 1em; }
.footer_body .mail a { width: 13em; margin: 0 auto; font-size: 1.6em; font-weight: 600; line-height: 2.4em; letter-spacing: .2em; color: #FFF; display: block; }
.footer_body .mail a:hover { color: #FD4; text-decoration: underline; }
.footer_body .copy { margin-top: 3em; font-size: 1.6em; letter-spacing: .1em; }
.footer_body .copy a { font-weight: 600; color: #FFF; }
.footer_body .copy a:hover { color: #FD4; text-decoration: underline; }
/*-- 電話番号フロート --*/
footer .float { padding: .5em 10% .5em .5em; font-weight: 600; background-color: #FFF; border-width: 3px 0 0 3px; border-color: #4CA; border-style: solid; border-radius: 2em 0 0 0; box-shadow: -2px 0 3px 1px rgba(68,204,170,0.5); display: flex; position: fixed; right: 0; bottom: 0; }
footer .float h3 { width: 6em; padding: 1.2em 0; margin: 0 1em; font-size: 2em; line-height: 1.2em; color: #4CA; border-right: #4CA solid 3px; position: relative; }
footer .float h3::before { content: ''; width: 0; height: 0; border-width: .5em 0 .5em .6em; border-color: transparent transparent transparent #4CA; border-style: solid; position: absolute; right: -.6em; top: calc(50% - .5em); }
footer .float h3::after { content: ''; width: 0; height: 0; border-width: .5em 0 .5em .6em; border-color: transparent transparent transparent #FFF; border-style: solid; position: absolute; right: -.35em; top: calc(50% - .5em); }
footer .float div { margin-top: .5em; }
footer .float .tel a { padding-left: 1em; font-size: 3.6em; font-family: Verdana, sans-serif; line-height: 1.2em; letter-spacing: .1em; color: #4CA; background-image: url(../img/ico/ico_tel_green.svg); background-position: 0 50%; background-repeat: no-repeat; background-size: .8em; }
footer .float .tel a:hover { color: #FA4; background-image: url(../img/ico/ico_tel_orange.svg); }
footer .float .open { padding-left: .3125em; font-size: 1.6em; letter-spacing: .1em; }
footer .float .address { padding-left: .2777em; font-size: 1.8em; line-height: 1em; }


/*-- リンクボタン --*/
.lnkbtn a { width: 100%; padding: 1em 2em 1em 1em; font-size: 1.5em; font-weight: 600; letter-spacing: .1em; background-position: right .75em top 50%; background-repeat: no-repeat; background-size: .75em; border-width: 2px; border-style: solid; border-radius: .416em; display: block; transition: .2s; }
.lnkbtn a:hover { letter-spacing: .2em; transition: .3s; }
.lnkbtn.orange a { color: #FFF; background-color: #FA4; background-image: url(../img/ico/ico_arr_white.svg); border-color: #FA4; }
.lnkbtn.orange a:hover { color: #FA4; background-color: #FFF; background-image: url(../img/ico/ico_arr_orange.svg); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3); }
.lnkbtn.green a { color: #4CA; background-color: #FFF; background-image: url(../img/ico/ico_arr_green.svg); border-color: #4CA; }
.lnkbtn.green a:hover { color: #FFF; background-color: #FA4; background-image: url(../img/ico/ico_arr_white.svg); border-color: #FA4; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3); }
.bottomlnk { padding: 2em 0 3em 0; margin: 1em auto 0 auto !important; }
.bottomlnk .lnkbtn { max-width: 600px; min-width: 280px; width: 60%; margin: 0 auto; }
/*-- TOPに戻るボタン --*/
.btn_2top { width: 7em; padding: .5em 1em 1em 1em; margin: 0 10% -.5em auto; font-weight: 600; line-height: 1.25em; text-align: center; color: #4CA; position: relative; cursor: pointer; transition: .3s; }
.btn_2top::before { content: ''; width: 0; height: 0; border-width: 0 3.5em 1em 3.5em; border-style: solid; position: absolute; left: 0; top: -1em; }
.bg_w .btn_2top { background-color: #fff7e0; }
.bg_w .btn_2top::before { border-color: transparent transparent #fff7e0 transparent; }
.bg_y .btn_2top { background-color: #FFF; }
.bg_y .btn_2top::before { border-color: transparent transparent #FFF transparent; }
.btn_2top:hover { padding-bottom: 1em; color: #FA4; transform: translateY(-.5em); filter: drop-shadow(0 0 3px rgba(0,0,0,0.1)); }

/*-- ページタイトル --*/
.title { margin: 60px auto 40px auto; font-weight: 600; text-align: center; }
.title .sub { padding: .5em 1em; margin-bottom: 1.3em; font-size: 1.25em; text-align: center; border-bottom: #4CA solid 3px; display: inline-block; position: relative; }
.title .sub span { margin: 0 .25em; }
.title .sub::before { content: ''; width: 0; height: 0; border-width: 1em 1em 0 1em; border-color: #4CA transparent transparent transparent; border-style: solid; position: absolute; bottom: -1em; left: calc(50% - 1em); }
.title .sub::after { content: ''; width: 0; height: 0; border-width: 1em 1em 0 1em; border-color: #FFF transparent transparent transparent; border-style: solid; position: absolute; bottom: -.75em; left: calc(50% - 1em); }
.bg_y.title .sub::after { border-color: #fff7e0 transparent transparent transparent; }
.title .main { font-size: 2.375em; font-family: 'M PLUS Rounded 1c', sans-serif; letter-spacing: .15em; text-align: center; }
.title .main span { width: 1.75em; height: 1.75em; margin: 0 .25em; line-height: 1.75em; letter-spacing: 0; text-align: center; color: #FFF; background-color: #8BE; border-radius: 50%; display: inline-block; }

/*-- 記事ページタイトル部 --*/
.page_about { margin-bottom: 2.5em; padding-bottom: 6em; background: url(../img/ico/ico_down_lg.svg) 50% 100% no-repeat; background-size: 4em; }
.page_about .read { max-width: 930px; min-width: 300px; width: 90%; margin: 0 auto; line-height: 1.8em; letter-spacing: .2em; }
.page_about .read span { margin: 0 .25em; font-weight: 600; color: #4CA; }
.page_about .list { max-width: 1280px; min-width: 320px; width: 90%; margin: 30px auto; display: flex; flex-wrap: wrap; justify-content: center; }
.page_about .list li { width: calc(25% - 20px); }
.page_about .list li a { margin: 0 10px 10px 10px; color: #222; display: block; }
.page_about .list li a p { padding-left: .5em; }
.page_about .list li a img { border-radius: .8em; transition: .3s; }
.page_about .list li a dd { padding-top: .2em; font-size: 1.5em; font-weight: bold; font-family: 'M PLUS Rounded 1c', sans-serif; line-height: 1.2em; color: #4CA; transition: .3s; }
.page_about .list li a:hover img { transform: scale(1.025); filter: brightness(.8) opacity(.5) drop-shadow(0 0 0 #FA4); transition: .2s; }
.page_about .list li a:hover dd { color: #FA4; }
.page_about .catch { font-size: 2.375em; font-weight: 600; font-family: 'M PLUS Rounded 1c', sans-serif; text-align: center; color: #4CA; }


/*------------------------------
  index
------------------------------*/
/*-- フォトギャラリー --*/
#gallery { max-width: 1280px; min-width: 320px; width: 100%; margin: 0 auto; position: relative; }
#gallery button { width: 3.75em; height: 3.75em; text-align: center; color: rgba(255,255,255,0); background-color: rgba(255,255,255,0.8); background-position: 50% 50%; background-repeat: no-repeat; background-size: 1.25em; border-radius: 50%; border: #888 solid 2px; outline: none; -webkit-appearance: none; appearance: none; position: absolute; top: calc(50% - 1.875em); z-index: 5; }
#gallery button:hover { background-color: rgba(68,204,170,0.8); border-color: rgba(68,204,170,0.8); }
#gallery button.slick-prev { background-image: url(../img/ico/ico_arl.svg); left: -1.875em; }
#gallery button.slick-prev:hover { background-image: url(../img/ico/ico_arl_white.svg); }
#gallery button.slick-next { background-image: url(../img/ico/ico_arr.svg); right: -1.875em; }
#gallery button.slick-next:hover { background-image: url(../img/ico/ico_arr_white.svg); }
#gallery .slick-list { border-radius: 1.25em; overflow: hidden; }
#gallery .slick-track { display: flex; }
#gallery img { object-fit: cover; }
/*-- スライド下キャッチ --*/
.top_title { max-width: 980px; min-width: 300px; width: 96%; margin: 1em auto; }
.top_title h2, .top_title p { font-weight: 600; line-height: 2em; text-align: center; }
.top_title h2 { font-size: 2.625em; font-family: 'M PLUS Rounded 1c', sans-serif; letter-spacing: .1em; color: #4CA; }
.top_title h2 span { margin: 0 .25em; }
.top_title p { font-size: 1.25em; letter-spacing: .2em; color: #35A; }
/*-- アクセスエリア --*/
.access_wrap { max-width: 1280px; min-width: 320px; width: 98%; margin: 2.5em auto; display: flex; justify-content: space-between;  flex-wrap: wrap; position: relative; }
/*-- Twitterウィジェット --*/
#twitt { width: 42.1875%; min-height: 30em; max-height: 810px; height: auto; padding: 0; background-color: #8BE; border-radius: .625em; overflow-y: scroll; }

/*-- e-さぽっとへのアクセス --*/
#access { width: 55.46875%; }
#access h3 { padding: .5em .5em .5em 2em; font-size: 1.5em; font-weight: 600; font-family: 'M PLUS Rounded 1c', sans-serif; color: #FA4; background: url(../img/ico/ico_shop_orange.svg) 0 50% no-repeat; background-size: 1.65em; }
#access dl { margin: 1em 0 0 0; font-weight: 600; display: flex; align-items: center; }
#access dt { width: 6em; padding: .2em 0; margin-right: 1em; text-align: center; color: #FFF; background-color: #FA4; border-radius: .35em; display: block; }
#access dd p { font-size: 1.125em; letter-spacing: .1em; }
#access dd span.caption { margin-left: 1em; font-size: .9em; display: inline-block; }
#access .address { padding: .5em 0 .5em 2.8em; margin: 1em 0; font-size: 1.125em; letter-spacing: .1em; background: url(../img/ico/ico_map_orange.svg) 0 50% no-repeat; background-size: 2em; }
/*-- GoogleMaps --*/
#access .map { content: 'GoogleMaps'; width: 100%; height: 30em; border-radius: .625em; overflow: hidden; }

/*-- 駐車台数フキダシ --*/
#access .pop { width: 13.75em; height: 13.75em; padding-top: 4em; color: #FFF; background: #4CA url(../img/ico/ico_car_white.svg) left 50% top 1.5em no-repeat; background-size: 6em; border-radius: 50%; position: absolute; right: -3em; top: -12em; transform: rotate(15deg); }
#access .pop::after { content: ''; width: 0; height: 0; border-width: 6em 1em 0 1em; border-color: #4CA transparent  transparent transparent; border-style: solid; position: absolute; left: calc(50% - 1em); bottom: -5em; }
#access .pop p { margin: 0 auto; font-size: 2em; font-weight: 600; font-family: 'M PLUS Rounded 1c', sans-serif; line-height: .5em; text-align: center; }
#access .pop p span { margin: 0 .05em; }
#access .pop p span:nth-child(3) { font-size: .8em; }
#access .pop p .num { font-size: 1.75em; font-family: Verdana, sans-serif; }
#access .pop .equipped { font-size: 2.375em; color: #FD4; }

/*-- e-さぽっとdeできること --*/
#about_us { max-width: 1080px; min-width: 320px; width: 100%; padding-bottom: 6em; margin: 0 auto; }
#about_us .read span { font-size: 1.125em; letter-spacing: .1em; line-height: 1.75em; text-align: center; display: block; }
#about_us .point { width: 100%; height: 571px; background: url(../img/img_aboutus.png) 50% 0 no-repeat; background-size: 800px; position: relative; }
#about_us .point p { width: 7.5em; height: 7.5em; font-size: 1.5em; font-weight: 600; color: #4CA; border: #4CA dotted 2px; border-radius: 50%; position: absolute; }
#about_us .point p span { line-height: 1.2em; text-align: center; display: block; }
#about_us .point .p1 { padding: 2.1em .5em; left: 1em; top: 6em; }
#about_us .point .p2 { padding: 1.5em .5em; right: 7em; top: 0; }
#about_us .point .p3 { padding: 1.8em .5em; right: 0; bottom: 2em; }
#about_us .moreinfo { max-width: 640px; min-width: 280px; width: 50%; margin: 0 auto; font-family: 'M PLUS Rounded 1c', sans-serif; text-align: center; }
#about_us .moreinfo dt { padding: 0 .5em; margin: 0 auto 1em auto; font-size: 1.5em; font-weight: 600; color: #FA4; border-bottom: #FA4 dotted 2px; display: inline-block; }
#about_us .moreinfo dd a { text-align: center; }
#about_us .moreinfo dd a span { margin-left: .5em; font-size: 1.5em; }

/*-- サポートメニュー --*/
#support_menu { max-width: 1280px; min-width: 300px; width: 96%; margin: 0 auto; }
#support_menu .list_title { padding: .5em 1em; border-width: 0 0 3px 8px; border-color: #4CA; border-style: solid; }
#support_menu .list_title h3 { font-size: 1.5em; font-weight: 600; color: #4CA; }
#support_menu .list_title h3 span { margin: 0 .25em; }
#support_menu .support_menu_list { margin: 1em auto; display: flex; flex-wrap: wrap; }
#support_menu .support_menu_list li { width: 49.25%; margin: 0 1.5% 1em 0; }
#support_menu .support_menu_list li:nth-child(even) { margin-right: 0; }
#support_menu .support_menu_list li a dt { border-radius: 1em; overflow: hidden; }
#support_menu .support_menu_list li a dt img { transition: .3s; }
#support_menu .support_menu_list li a dd { padding: .5em; font-size: 1.25em; font-weight: 600; color: #4CA; transition: .3s; }
#support_menu .support_menu_list li a:hover dt { box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3); }
#support_menu .support_menu_list li a:hover dt img { transform: scale(1.0125); filter: brightness(.8) opacity(.5) drop-shadow(0 0 0 #FA4); transition: .1s; }
#support_menu .support_menu_list li a:hover dd { color: #FA4; transition: .1s; }

/*-- 末尾解説テキスト --*/
#suggest { max-width: 900px; min-width: 300px; width: 96%; padding-bottom: 6em; margin: 0 auto; }
#suggest>p { margin: 1em auto; font-size: 1.125em; letter-spacing: .1em; line-height: 1.75em; }
#suggest ul { margin: 1em auto; }
#suggest li { padding-left: 1em; font-size: 1.125em; font-weight: 600; letter-spacing: .25em; line-height: 1.75em; color: #35A; }



/*------------------------------
  support
------------------------------*/
.article_body.support .page_about { margin-bottom: 8em; }
.article_body.support section { width: 100%; margin: -80px auto 80px auto; padding-top: 80px; }
section#worker { margin-bottom: -1em; }
/*-- 記事タイトル --*/
.service_tit { max-width: 1280px; min-width: 300px; width: 96%; margin: 0 auto; font-size: 3.375em; font-weight: 600; font-family: 'M PLUS Rounded 1c', sans-serif; color: #4CA; }
.service_tit_bar { content: ''; min-width: 36em; width: 55%; height: 6px; background-color: #4CA; border-radius: 0 3px 3px 0; }
/*-- ポイント --*/
.service_point_wrap { max-width: 1680px; min-width: 320px; width: auto; min-height: 572px; height: auto; margin: 0 auto; background-position: 0 0; background-repeat: no-repeat; background-size: 50%; }
#trouble_shooting .service_point_wrap { background-image: url(../img/img_trouble_shooting.png); }
#study .service_point_wrap { background-image: url(../img/img_study.png); }
#creative .service_point_wrap { background-image: url(../img/img_creative.png); }
#worker .service_point_wrap { background-image: url(../img/img_worker.png); }
.service_point { max-width: 1280px; min-width: 320px; width: 100%; margin: 1em auto; }
.service_point>dl, .service_point>p, .service_point>div { margin-left: 50%; }
.service_point dl { margin-bottom: .625em; display: flex; }
.service_point>dl dt { padding: .65em .666em; font-size: 1.65em; font-weight: 600; line-height: 1em; color: #FFF; background-color: #FA4; border-radius: .5em 0 0 .5em; }
.service_point>dl dd { padding: 1.2em 1em 1.2em 1.2em; line-height: 1em; background-color: #FFF; border: #FA4 solid 2px; border-radius: 0 .9375em .9375em 0; flex-grow: 2; }
.service_point>p { padding-bottom: .5em; font-size: 1.125em; font-weight: 600; }
/*-- 料金 --*/
.service_point .price { width: 50vw; height: 3.75em; margin: 1.875em 0 1.875em 50%; background-color: #4CA; border-radius: 1.875em 0 0 1.875em; display: block; }
.service_point .price dl { padding: .125em 1em .125em 2em; font-size: 1.5em; font-weight: 600; line-height: 1em; color: #FFF; }
.service_point .price dt { margin-right: 1em; line-height: 2.5em; }
.service_point .price dd span { margin: 0 .1em; font-size: 1.4em; font-family: Verdana, sans-serif; }
.service_point .price dd.caption { margin-left: 1.5em; font-size: .666em; font-weight: normal; line-height: 4em; color: #FFF; }
/*-- サービスの例 --*/
.service_point_wrap .case { max-width: 1280px; min-width: 300px; width: auto; margin: 0 auto; }
.service_point_wrap .case h4 { padding: .3em 1.25em; color: #FFF; background-color: #4CA; border-radius: .625em; display: inline-block; }
.service_point_wrap .case ul { display: flex; flex-wrap: wrap; justify-content: center; }
.service_point_wrap .case li { width: 32%; margin: .625em 1.333% .625em 0; }
.service_point_wrap .case li:nth-child(3n+3) { margin-right: 0; }
.service_point_wrap .case dl { width: 100%; height: 100%; border: #35A solid 2px; border-radius: .9375em; overflow: hidden; }
.service_point_wrap .case dt { padding: .25em .5em .25em 2.5em; font-size: 1.75em; font-weight: 600; color: #FFF; background-color: #35A; background-position: left .5em top 50%; background-repeat: no-repeat; background-size: 1.6em; }
#trouble_shooting .service_point_wrap .case dt { background-image: url(../img/ico/ico_custom_white.svg); }
#study .service_point_wrap .case dt { background-image: url(../img/ico/ico_mastery_white.svg); }
#creative .service_point_wrap .case dt { background-image: url(../img/ico/ico_camera_white.svg); }
#worker .service_point_wrap .case dt { background-image: url(../img/ico/ico_hand_white.svg); }
.service_point_wrap .case dd { height: 100%; padding: .833em .833em 1.125em 1.125em; font-size: 1.125em; letter-spacing: .05em; background-color: #FFF; }
/*-- サービスのコメント --*/
.article_body.support section .comment { max-width: 980px; min-width: 300px; width: 90%; margin: 1.5em auto; }
.article_body.support section .comment p { margin: 1em 0; padding-left: 1em; font-weight: 600; letter-spacing: .05em; position: relative; }
.article_body.support section .comment p::before { content: '◦'; width: 1em; height: 1.5em; position: absolute; left: 0; top: 0; }
.article_body.support section .comment p span { letter-spacing: 0; text-indent: -.5em; display: block; }



/*------------------------------
  usage
------------------------------*/
.article_body.usage section { width: 100%; margin: -80px auto 80px auto; padding-top: 100px; border-bottom: #ececec groove 3px; }
section#v4 { margin-bottom: -1em; }
/*-- カバーイメージ --*/
.coverimg { max-width: 1280px; min-width: 320px; width: 98%; margin: 0 auto 1.5em auto; }
.coverimg img { border-radius: 1.25em; }
.coverimg h3 { margin-top: .25em; font-size: 2.375em; font-weight: 600; font-family: 'M PLUS Rounded 1c', sans-serif; line-height: 1.2em; text-align: center; color: #4CA; }
/*-- e-さぽっとのオススメ --*/
.flow_wrap { background-position: 100% 0; background-repeat: no-repeat; background-size: 680px; }
#v1 .flow_wrap { background-image: url(../img/img_usage01.jpg); }
#v2 .flow_wrap { background-image: url(../img/img_usage02.jpg); }
#v3 .flow_wrap { background-image: url(../img/img_usage03.jpg); }
#v4 .flow_wrap { background-image: url(../img/img_usage04.jpg); }
.flow_wrap .flow { max-width: 1280px; min-width: 300px; width: 100%; margin: 0 auto; padding-bottom: 2em; text-align: center; }
.flow_wrap .flow i, .flow_wrap .flow p { margin: 0 42% 0 8%; font-weight: 600; text-align: center; }
.flow_wrap .flow i { padding: .25em 1em; font-size: 1.125em; font-style: normal; color: #FFF; background-color: #4CA; border-radius: 0 0 .5em .5em; }
.flow_wrap .flow p { margin-top: 1em; font-size: 1.5em; letter-spacing: .175em; }
/*-- リード文 --*/
.article_body.usage .read { max-width: 900px; min-width: 300px; width: 90%; margin: 1em auto; letter-spacing: .2em; line-height: 1.8em; }
/*-- サービス紹介へのリンク --*/
.service_lnk { max-width: 1280px; min-width: 320px; width: 100%; padding: 1em 0 2em 0; margin: 2em auto; border-top: #4CA solid 2px; display: flex; justify-content: center; }
.service_lnk dt { padding: 1.8em 3em; font-size: 1.125em; font-weight: 600; background: url(../img/ico/ico_lamp.svg) 0 50% no-repeat; background-size: 2em; border-right: #4CA solid 3px; position: relative; }
.service_lnk dt::before { content: ''; width: 0; height: 0; border-width: .75em 0 .75em 1em; border-color: transparent transparent transparent #4CA; border-style: solid; position: absolute; top: calc(50% - .75em); right: -1em; }
.service_lnk dt::after { content: ''; width: 0; height: 0; border-width: .75em 0 .75em 1em; border-color: transparent transparent transparent #FFF; border-style: solid; position: absolute; top: calc(50% - .75em); right: -.7em; }
.service_lnk dd { max-width: 550px; min-width: 280px; width: 80%; margin: 0 2em; }




/*------------------------------
  MediaQuery
------------------------------*/

/*------------------------------
  iPad：portrait
------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){
/*-- common --*/
html { background-color: #FFF; }
main { font-size: 1.3em; overflow-x: hidden; }

/*-- header --*/
.header_body h1 { min-width: 200px; width: 200px; margin: 1em 0 .5em 0; }
.header_body h1 a { font-size: 1.1em; letter-spacing: 0; }
.head_menu { width: calc(100% - 200px); margin-top: 3em; font-size: 1.4em; }
.head_menu ul { margin-left: 1em; align-items: flex-end; }
.head_menu li { width: 33%; height: auto; }
.head_menu li a:hover { letter-spacing: .1em; }
.header_body .label { padding: .25em 2em .5em 2.5em; }
.header_body .label .route { font-size: 1.1em; }
.header_body .label .time { font-size: 1.5em; }
.header_body .label .time span { font-size: 2em; }
/*-- HEADER.fixed --*/
header.fixed .header_body h1 { min-width: 200px; width: 200px; }
header.fixed .header_body h1 a { font-size: 1.1em; }
header.fixed .header_body h1 img { width: 80%; }

/*-- footer --*/
.foot_menu { max-width: 680px; margin: 0 auto; }
.foot_menu li { margin: 0 .5em .8em .5em; }
.foot_menu li.home { margin-left: 4em; }
.foot_menu li.usage { margin-right: 4em; }
.foot_menu li a { width: 11em; font-size: 1.4em; }
.footer_body .name, .footer_body .mail a { font-size: 1.3em; }
.footer_body .address, .footer_body .copy { font-size: 1.2em; }
.footer_body .copy { margin-top: 1em; width: 20em; }
/*-- 電話番号フロート --*/
footer .float { padding-right: 2%; }
footer .float h3 { font-size: 1.5em; }
footer .float .tel a { font-size: 2.4em; }
footer .float .open { font-size: 1.2em; }
footer .float .address { font-size: 1.3em; }

/*-- リンクボタン --*/
.lnkbtn a { padding: .8em 1.6em .8em .8em; font-size: 1.3em;  letter-spacing: 0; border-radius: .8em; }
.lnkbtn a:hover { letter-spacing: 0; }
/*-- TOPに戻るボタン --*/
.btn_2top { margin: 0 2% -.5em auto; }

/*-- 記事ページタイトル部 --*/
.page_about .list { width: 96%; margin: 1em auto; }
.page_about .list li { width: 25%; }
.page_about .list li a { margin: .5em 2% 0 2%; }

/*-- index --*/
/*フォトギャラリー*/
#gallery button { display: none !important; }
#gallery .slick-list { border-radius: 0; }
/*スライド下キャッチ*/
.top_title h2, .top_title p { font-size: 1.2em; line-height: 1.5em; }
.top_title h2 { margin-bottom: .25em; font-size: 2.4em; line-height: 1em !important; letter-spacing: 0; }
.top_title h2 span { margin: 0 .25em; display: inline-block; }
.top_title p { margin-bottom: .5em; }
/*Twitterウィジェット*/
#twitt { width: 49%; min-height: 20em; }
/*e-さぽっとへのアクセス*/
#access { width: 49%; }
#access h3 { font-size: 1.3em; }
#access dl { align-items: flex-start; }
/*駐車台数フキダシ*/
#access .pop { width: 9em; height: 9em; padding-top: 3em; background-position: left 50% top 1.2em; background-size: 5em; right: -1em; top: -8em; }
#access .pop::after { border-width: 4em 1em 0 1em; bottom: -3em; }
#access .pop p { font-size: 1.2em; }
#access .pop .equipped { font-size: 1.6em; }
/*e-さぽっとdeできること*/
#about_us .point { max-width: 768px; height: 414px; margin: 0 auto; background-size: 580px; }
#about_us .point p { font-size: 1.3em; }
#about_us .point .p1 { left: 1em; top: 4em; }
#about_us .point .p2 { right: 7em; top: 0; }
#about_us .point .p3 { right: 0; bottom: 0; }
#about_us .moreinfo dt { margin-bottom: .5em; font-size: 1.1em; }
/*サポートメニュー*/
#support_menu { width: 80%; }

/*-- support --*/
.article_body.support .page_about { margin-bottom: 5em; }
.article_body.support section { margin: -60px auto 60px auto; padding-top: 60px; }
/*ポイント*/
.service_point_wrap { background-size: 50%; }
.service_point>dl dt { padding: .8em .5em .5em .8em; font-size: 1.4em; border-radius: 1.7em 0 0 1.7em; }
.service_point>dl dd { padding: 1em .5em .5em 1.2em; border-width: 2px 0 2px 2px; border-radius: 0; }
/*料金*/
.service_point .price { width: 70vw; margin: 1em 0 1.875em 30%; }
/*サービスの例*/
.service_point_wrap .case { width: 96%; text-align: center; }
.service_point_wrap .case h4 { padding: .5em 2em .3em 2em; }
.service_point_wrap .case li { width: 49.5%; margin: .5em 1% 0 0; }
.service_point_wrap .case li:nth-child(3n+3) { margin-right: 1%; }
.service_point_wrap .case li:nth-child(even) { margin-right: 0; }
.service_point_wrap .case dl { border-radius: .625em; }
.service_point_wrap .case dt { padding: .5em .5em .5em 2.5em; font-size: 1.3em; }

/*-- usage --*/
.article_body.usage section { margin: -60px auto 60px auto; padding-top: 60px; border-bottom: #ececec solid 2px; }
/*e-さぽっとのオススメ*/
.flow_wrap { padding-bottom: 48vw; background-position: 50% 96%; background-size: 80%; }
.flow_wrap .flow { padding: 0; }
.flow_wrap .flow i { margin: 0 auto; font-size: .9em; }
 .flow_wrap .flow p { width: 80%; margin: 1em auto; font-size: 1.15em; letter-spacing: .175em; }
/*リード文*/
.article_body.usage .read { width: 80%; font-size: 1.2em; }
/*サービス紹介へのリンク*/
.service_lnk { width: 90%; padding: .5em 0 .5em 0; }
.service_lnk dt { padding: 1em 2em 1em 3em;  }
.service_lnk dd { margin: .5em 2em; }


}


/*------------------------------
  iPhone
------------------------------*/
@media screen and (max-width:599px){
/*-- common --*/
html { background-color: #FFF; }
main { margin-top: 60px; font-size: 1.4em; overflow-x: hidden; }

/*-- header --*/
.header_body { display: none; }
.header_sp_body { display:block; }

/*-- footer --*/
footer .float { display: none; }
.foot_menu li { width: 49%; margin: 0 .5% .5em .5%; }
.foot_menu li.home, .foot_menu li.support, .foot_menu li.usage { width: 99%; margin: 0 .5% .5em .5%; letter-spacing: .5em; }
.foot_menu li a { width: 100%; line-height: 3em; }
.footer_body .name { margin-top: 1em; font-size: 1.4em; }
.footer_body .name span:first-child::after { display: none; }
.footer_body .name span:nth-child(2) { font-size: 1.5em; text-align: center; display: block; }
.footer_body .address { margin-top: 1em; font-size: 1.4em; }
.footer_body .address span { display: inline-block; }
.footer_body .mail a { font-size: 1.4em; }
.footer_body .copy { margin-top: 2em; font-size: 1.4em; }
.footer_body .copy p { text-align: center; }

/*-- リンクボタン --*/
.lnkbtn a { padding: .8em 1.6em .8em .8em; font-size: 1.3em;  letter-spacing: 0; border-radius: .8em; }
.lnkbtn a:hover { letter-spacing: 0; }
.bottomlnk .lnkbtn { width: 80%; }
/*-- TOPに戻るボタン --*/
.btn_2top { margin: 0 2% -.5em auto; }


/*-- ページタイトル --*/
.title { margin: 0 auto 2em auto; }
.title .sub { font-size: 1em; }
.bg_y.title .sub::after { bottom: -.7em; }
.title .main { font-size: 1.6em; letter-spacing: 0; }
.title .main span { font-size: .8em; }

/*-- 記事ページタイトル部 --*/
.page_about { padding-bottom: 4em; background-size: 2em; }
.page_about .list { margin: 1.5em auto 0 auto; }
.page_about .list li { width: 50%; }
.page_about .list li a { margin: 0 .25em .75em .25em; }
.page_about .list li a p { font-size: .8em; }
.page_about .list li a img { border-radius: .6em; }
.page_about .list li a dd { font-size: 1.1em; }
.page_about .catch { font-size: 1.5em; }

/*-- index --*/
/*フォトギャラリー*/
#gallery button { display: none !important; }
#gallery .slick-list { border-radius: 0; }
/*スライド下キャッチ*/
.top_title h2, .top_title p { font-size: 1em; line-height: 1.5em; }
.top_title h2 { margin-bottom: .25em; font-size: 2.5em; line-height: 1em !important; letter-spacing: 0; }
.top_title h2 span { margin: 0; display: inline-block; }
.top_title p { margin-bottom: .5em; }
/*アクセスエリア*/
.access_wrap { width: 100%; flex-direction: column-reverse; }
/*Twitterウィジェット*/
#twitt { width: 96%; height: 50vh; margin: 2em auto; overflow-y: scroll; }
/*e-さぽっとへのアクセス*/
#access { width: 100%; padding: 1em; border-top: #ececec solid 1px; }
#access h3 { margin: 1em auto .25em .5em; font-size: 1.2em; }
#access dl { margin: 0 0 .5em 0; display: block; }
#access dt { padding: .15em 0 0 0; margin-bottom: .2em; }
#access dd p { padding-left: .5em; font-size: 1em; letter-spacing: 0; }
#access dd span.caption { font-size: .9em; }
#access .address { margin: .5em 0; font-size: 1em; letter-spacing: 0; }
/*駐車台数フキダシ*/
#access .pop { width: 9em; height: 9em; padding-top: 3em; background-position: left 50% top 1.2em; background-size: 5em; right: -1em; top: -1em; }
#access .pop::after { border-width: 4em 1em 0 1em; bottom: -3em; }
#access .pop p { font-size: 1.2em; }
#access .pop .equipped { font-size: 1.6em; }
/*e-さぽっとdeできること*/
#about_us { padding-bottom: 6em; }
#about_us .read { width: 96%; margin: 0 auto; }
#about_us .read span { font-size: 1em; letter-spacing: 0; }
#about_us .point { height: 230px; background-position: left 50% top 20px; background-size: 280px; }
#about_us .point p { width: 7em; height: 7em; font-size: 1.1em; }
#about_us .point .p1 { padding: 1.8em .5em; left: -.75em; top: 3em; }
#about_us .point .p2 { padding: 1.2em .5em; right: 1em; top: -.5em; }
#about_us .point .p3 { padding: 1.2em .5em; right: -.75em; bottom: -.25em; }
#about_us .moreinfo dt { margin-bottom: .5em; font-size: 1.1em; }
#about_us .moreinfo dd a span { margin-left: .25em; font-size: 1.2em; }
/*サポートメニュー*/
#support_menu .list_title { padding: .3em 1em; border-width: 0 0 3px 6px; }
#support_menu .list_title h3 { font-size: 1.3em; }
#support_menu .support_menu_list li, #support_menu .support_menu_list li:nth-child(even) { width: 100%; margin: 0 auto 1em auto; }
#support_menu .support_menu_list li a dt { width: 90%; margin: 0 auto; }
#support_menu .support_menu_list li a dd { font-size: 1.1em; }
/*末尾解説テキスト*/
#suggest { margin-top: 2em; }
#suggest>p, #suggest ul { width: 95%; }

/*-- support --*/
.article_body.support section { margin: -60px auto 60px auto; padding-top: 60px; }
/*記事タイトル*/
.service_tit { font-size: 2em; }
.service_tit_bar { min-width: 22em; }
/*ポイント*/
.service_point_wrap { padding-top: 229px; background-position: 50% 0; background-size: 320px; }
.service_point { margin: 0 0 1.5em 0; }
.service_point>dl { margin: 0 5% .35em 0; display: block; }
.service_point>dl:nth-child(3) { margin-bottom: 1em; }
.service_point>dl dt { padding: .5em .666em .3em .666em; font-size: 1.5em; border-radius: 0 .5em 0 0; }
.service_point>dl dd { padding: .5em 1em; border-width: 2px 2px 2px 0; border-radius: 0 0 1em 0; }
.service_point>p, .service_point>div { margin: .5em 5%; }
.service_point>p { padding-bottom: 0; font-size: 1em; }
/*料金*/
.service_point .price { width: 68%; height: auto; margin: 0 0 0 auto; border-radius: 1.8em 0 0 1.8em; }
.service_point .price dl { width: 100%; height: 3em; padding: .5em 1em .5em 2em; font-size: 1.2em; flex-wrap: wrap; align-items: center; }
.service_point .price dt { margin-right: .6em; line-height: 1em; }
.service_point .price dd span { margin: 0 .25em; font-size: 1.2em; line-height: 1em; }
.service_point .price dd.caption { width: 100%; line-height: 1em; }
/*サービスの例*/
.service_point_wrap .case h4 { width: 11em; padding: .3em 0; margin: .5em auto; text-align: center; border-radius: .9em; display: block; }
.service_point_wrap .case ul { width: 94%; margin: 0 auto; }
.service_point_wrap .case li, .service_point_wrap .case li:nth-child(3n+3) { width: 100%; margin: .25em auto .25em auto; }
.service_point_wrap .case dl { border-radius: .9375em; }
.service_point_wrap .case dt { font-size: 1.5em; letter-spacing: .1em; background-size: 1.4em; }
.service_point_wrap .case dd { font-size: 1em; }

/*-- usage --*/
.article_body.usage section { margin: -60px auto 60px auto; padding-top: 60px; border-bottom-width: 2px; }
.article_body.usage section:last-child { margin-bottom: 0; }
/*カバーイメージ*/
.coverimg img { border-radius: .8em; }
.coverimg h3 { font-size: 1.25em;  }
/*e-さぽっとのオススメ*/
.flow_wrap { padding-bottom: 60vw; background-position: 50% 98%; background-size: 96%; }
.flow_wrap .flow { padding: 0; }
.flow_wrap .flow i { margin: 0 auto; font-size: .9em; }
 .flow_wrap .flow p { width: 90%; margin: 1em auto; font-size: 1.15em; letter-spacing: .175em; }
/*サービス紹介へのリンク*/
.service_lnk { text-align: center; display: block; }
.service_lnk dt { padding: .5em .5em .5em 3em; margin: 0 auto 1em auto; font-size: 1em; text-align: center; border-right: none; border-bottom: #4CA solid 3px; display: inline-block; }
.service_lnk dt::before { border-width: 1em 1em 0 1em; border-color: #4CA transparent transparent transparent; top: auto; bottom: -1em; left: calc(50% - 1em); right: auto; }
.service_lnk dt::after { border-width: 1em 1em 0 1em; border-color: #FFF transparent transparent transparent; top: auto; bottom: -.7em; left: calc(50% - 1em); right: auto; }
.service_lnk dd { margin: 0 auto; }

}