@charset "utf-8";
/* ------------------------------------------------
 reset css - drop parent style
------------------------------------------------ */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block}
html { overflow-y: scroll; -webkit-text-size-adjust:100%}
ul, ol { list-style:none}
blockquote , q { quotes:none}
blockquote:before, blockquote:after, q:before, q:after { content:''; content: none}
a:focus { outline:none}
ins { text-decoration:none}
mark { font-style:italic; font-weight:bold}
del { text-decoration:line-through}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help}
table { border-collapse:collapse; border-spacing:0; width:100%}
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0}
button, input, select, textarea { outline:0; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:100%}
input, textarea { background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); -webkit-appearance: none; border-radius:0}
input[type="checkbox"]{ -webkit-appearance: checkbox}
input[type="radio"]{ -webkit-appearance: radio}
button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0}
iframe { max-width:100%}
/* ------------------------------------------------
 基本設定　drop child style
------------------------------------------------ */
@font-face {
	font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Regular-min.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Medium-min.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Bold-min.woff") format("woff");
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: 'design_plus';
  src: url('../fonts/design_plus.eot?v=1.2');
  src: url('../fonts/design_plus.eot?v=1.2#iefix') format('embedded-opentype'),
       url('../fonts/design_plus.woff?v=1.2') format('woff'),
       url('../fonts/design_plus.ttf?v=1.2') format('truetype'),
       url('../fonts/design_plus.svg?v=1.2#design_plus') format('svg');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'footer_bar';
  src: url('../fonts/footer_bar.eot?v=1.2');
  src: url('../fonts/footer_bar.eot?v=1.2#iefix') format('embedded-opentype'),
       url('../fonts/footer_bar.woff?v=1.2') format('woff'),
       url('../fonts/footer_bar.ttf?v=1.2') format('truetype'),
       url('../fonts/footer_bar.svg?v=1.2#footer_bar') format('svg');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'tiktok_x_icon';
  src: url('../fonts/tiktok_x_icon.eot?v=1.1');
  src: url('../fonts/tiktok_x_icon.eot?v=1.1#iefix') format('embedded-opentype'),
       url('../fonts/tiktok_x_icon.woff?v=1.1') format('woff'),
       url('../fonts/tiktok_x_icon.ttf?v=1.1') format('truetype'),
       url('../fonts/tiktok_x_icon.svg?v=1.1#tiktok_x_icon') format('svg');
  font-weight: normal;
  font-display: swap;
}

*, ::before, ::after { box-sizing: border-box}
body { font-family: 'Noto Sans JP', sans-serif; font-size:14px; line-height:1; width:100%; position:relative; -webkit-font-smoothing:antialiased}
a { color: #333; text-decoration:none}
a, a:before, a:after, input {
  -webkit-transition-property:background-color, color; -webkit-transition-duration:0.2s; -webkit-transition-timing-function:ease;
  transition-property:background-color, color; transition-duration:0.2s; transition-timing-function:ease;
}
/* レイアウト */
#sa-common { position:relative; height:100%; overflow: hidden}
/* ------------------------------------------------
 フッター
------------------------------------------------ */
/* フッターロゴ */
#footer_bottom { height:100px; position:relative}
#footer_logo { z-index:3; position:absolute; left:40px; top:50%; transform: translateY(-50%)}
#footer_logo .logo { line-height:1; margin:0; padding:0; font-weight:500; display:block}
#footer_logo img { height:auto; display:block; margin:auto; transition: opacity 0.35s ease-in-out}
#footer_logo img:hover { opacity:0.5}
#footer_logo .logo_image.mobile { display:none}
#footer_logo .logo_text { transition: color 0.35s ease}
/* SNSボタン（ヘッダーも共通） */
#footer_sns { position:absolute; right:30px; top:42px; z-index:3}
.sns_button_list { font-size:0; z-index:20; text-align:center}
.sns_button_list li { display:inline-block; margin:0 5px; position:relative}
.sns_button_list li a { display:block; overflow:hidden; width:20px; height:20px; line-height:20px; text-align:center; position:relative}
.sns_button_list li a span { display:none}
.sns_button_list li a:before { font-family:'design_plus'; font-size:15px; display:block; position:absolute; top:1px; left:0; right:0}
.sns_button_list li.twitter a:before { font-family: 'tiktok_x_icon'; content: "\e901"}
.sns_button_list li.tiktok a:before { font-family: 'tiktok_x_icon'; content: "\e900"}
.sns_button_list li.facebook a:before { content:'\e902'}
.sns_button_list li.insta a:before { content:'\ea92'}
.sns_button_list li.pinterest a:before { content:'\e905'}
.sns_button_list li.google a:before { content:'\e900'}
.sns_button_list li.youtube a:before { font-family: 'footer_bar'; content: "\ea9d"}
.sns_button_list li.contact a:before { content:'\f003'}
.sns_button_list li.rss a:before { content:'\e90b'}
/* メッセージをフッターリンクに改修 */
.menu-footer-link-container { position: absolute; top: 50%; transform: translateY(-50%); width:100%; margin-top: 10px; z-index:1; text-align:center}
#menu-footer-link { display: flex; justify-content: center; flex-wrap: wrap}
#menu-footer-link li { padding-right: 10px}
#menu-footer-link li:before { content: "|"; padding-right: 10px}
#menu-footer-link li:first-child:before { content: ""}
@media screen and (max-width: 1151px) {
  #menu-footer-link { margin: 20px 0 0; padding: 15px 0}
  #menu-footer-link li { padding: 10px}
  .page_navi .prev:before { margin-right: 30px!important; font-size: 20px}
  .page_navi .next:before { margin-left: 30px!important; font-size: 20px}
}
#menu-footer-link li a.window { display: inline-block; padding-right: 24px; background: url("/solution/wp-content/themes/drop-child/img/common/icon-window.avif") no-repeat right center/16px auto}
.box-link a, a.box-link { display: flex; justify-content: center; align-items: center; width: 70%; height: 50px; margin: 50px auto; border: 1px solid #000}
a.box-link { max-width: 300px; margin: 50px auto 0}
@media screen and (min-width: 1151px) { 
  .box-link a { width: 320px}
}
/* ------------------------------------------------
　responsive.cssから移植
------------------------------------------------ */
/* フッターロゴ */
#footer_logo img { width: 112px!important; height: auto;}
@media only screen and (max-width: 428px) {
  #footer_logo img { margin-bottom: 80px; width: 60%; max-width: 50px; height: auto;}
}
@media only screen and (max-width: 767px) {
  #footer_logo img { margin-bottom: 80px; max-width: 70px;}
}
@media screen and (max-width:1151px) {
  #footer_bottom { height:auto !important; padding:40px 0}
  #footer_logo { margin:0; position:relative; left:auto; top:auto; -ms-transform: translateY(0%); -webkit-transform: translateY(0%); transform: translateY(0%)}
}
@media screen and (max-width:750px) {
	#footer_logo .logo_image.pc { display:none}
  #footer_logo .logo_image.mobile { display:block}
}
/* SNSボタン */
@media screen and (max-width:1151px) {
  #footer_sns { margin:30px 0 0 0; position:relative; right:auto; top:auto}
}
@media screen and (max-width:750px) {
	#footer_sns { margin:25px 0 0 0}
}
/* コピーライト */
@media screen and (max-width:750px) {
  #copyright { line-height:50px; height:50px}
}
/* ページ上部へ戻るボタン */
@media screen and (max-width:750px) {
  #return_top a { height:50px; width:50px; line-height:50px}
}
/* ------------------------------------------------
 responsive.css相殺追記
------------------------------------------------ */
@media screen and (max-width:1151px) {
  #footer_logo img{ margin-bottom: 80px; max-width: 70px!important; height: auto}
}

/* ページ上部へ戻るボタン */
#return_top a { background:#000; display:block; height:60px; width:60px; line-height:60px; text-decoration:none; z-index:100; position:relative}
#return_top a:hover { color:#fff !important}
#return_top span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block}
#return_top a:before { color:#fff; font-family:'design_plus'; content:'\e911'; font-size:12px; display:block; width:12px; height:12px; position:absolute; left:0; right:0; top:4px; margin:auto}
#return_top { position:fixed; right:0px; bottom:0px; z-index:999; transform: translate3d(0,100%,0)}
#return_top.active { transform: translate3d(0,0,0)}
/* コピーライト */
#copyright { line-height:60px!important; height:60px; font-size:12px; text-align:center}
/* ------------------------------------------------
 Common・Layout
------------------------------------------------ */
.contents-inr { width: 100%; min-width: 320px; padding: 0 20px}
.text-center { text-align: center!important}
.text-deco-line { text-decoration: underline}
.sec-base { padding: 30px 20px}
.service-top.sec-base { padding: 30px 0}
.text-left {text-align: left!important}
@media screen and (max-width: 767px) {
  .contents-inr { padding: 0 20px!important}
  .sm-hidden { display: none!important}
  .sp-only { display: block}
  .pc-only { display: none}
}
@media screen and (min-width: 768px) { 
  .pc-hidden { display: none !important}
  .contents-inr { max-width: 1030px; margin: 0 auto}
  .sp-only { display: none}
  .pc-only { display: block}
}
/* SLICK Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging { cursor: pointer; cursor: hand;}
.slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0);}
.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}
.slick-track:before, .slick-track:after { display: table; content: '';}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide { float: right;}
.slick-initialized .slick-slide { display: block;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden  { display: none;}
/* SLICK Arrows */
.slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent;}
.slick-prev:before, .slick-next:before { color: #fff; font-size: 20px; line-height: 1;}
.slick-prev { top: 40%; left: -30px; width: 40px; height: 40px; background: rgba(0,0,0,0.8); border-radius: 50px; z-index:10;}
[dir='rtl'] .slick-prev { top: 40%; right: -30px; left: auto;}
.slick-prev:before { content: '←';}
[dir='rtl'] .slick-prev:before { content: '→';}
.slick-next { top: 40%; right: -30px; width: 40px; height: 40px; background: rgba(0,0,0,0.8); border-radius: 50px; z-index:10;}
[dir='rtl'] .slick-next { top: 40%; right: -30px;}
.slick-next:before { content: '→';}
[dir='rtl'] .slick-next:before { content: '←';}
@media print, (min-width: 768px) { 
  .slick-prev, .slick-next { width: 50px; height: 50px;}
  .slick-prev, [dir='rtl'] .slick-prev { left: -20px;}
  .slick-next, [dir='rtl'] .slick-next { right: -20px;}
}