@charset "utf-8";
/* CSS Document */
/*
Theme Name: M's corp2
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
*/
/* Box sizing rules */
/* Box sizingの定義 */
html { font-size: 62.5%; margin: 0 !important; overflow-y: scroll;}
/* Remove default padding */
/* デフォルトのpaddingを削除 */
ul[class], ol[class] { padding: 0;}

/* Remove default margin */
/* デフォルトのmarginを削除 */
body, h1, h2, h3, h4, p, ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0;}

/* Set core body defaults */
/* bodyのデフォルトを定義 */
body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5;}

/* Remove list styles on ul, ol elements with a class attribute */
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class], ol[class] { list-style: none;}

/* A elements that don't have a class get default styles */
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class]) { text-decoration-skip-ink: auto;}

/* Make images easier to work with */
/* img要素の扱いを簡単にする */
img { max-width: 100%; display: block;}

/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 */
article > * + * { margin-top: 0.5rem;}

/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのフォントは継承を定義 */
input, button, textarea, select { font: inherit;}

body { margin: 0; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-size: 1.6rem; line-height: 150%; padding: 0;}
a { text-decoration: none;}
.wrap { max-width: 980px; margin: 0 auto;}
#page_top { position: fixed; bottom: 30px; right: 20px;}
#page_top a { background-color: #999; color: #fff; text-align: center; text-decoration: none; padding: 20px 20px;}
#page_top a:hover { background-color: #666; text-decoration: none;}
header .content { max-width: 1200px; display: flex; justify-content: space-around; align-items: center; height: 90px; width: 98%;}
a.roadmap { display: block; padding: 1rem; max-width: 300px; font-size: 1.2rem; color: #fff; font-weight: bold; text-align: center; margin: 0 1rem; border: solid thin #fff;}
.f-logo { width: 76px;}
.content { width: 1000px; margin: 0px auto;}
.forpc { display: block !important;}
.forsp { display: none !important;}
p { text-align: justify; margin: 15px 0;}
.txt-c { text-align: center;}
h1 { display: none;}
h2 { font-size: 2.4rem; color: #0037a5; text-align: center; line-height: 200%;}
h2.h2badge { background-color: #f6ff00; border: 4px solid #000000; border-radius: 1px; box-shadow: 2px 4px 0px 2px #0c0000; padding: 1rem; width: 400px; margin: 0 auto; color: #000; line-height: 120%; font-size: 3rem;}
h2.h2badge-w { background-color: #fff; border: 4px solid #000000; border-radius: 1px; box-shadow: 2px 4px 0px 2px #0c0000; padding: 1rem; width: 385px; margin: 0 auto; color: #000; line-height: 120%; font-size: 3rem;}
.service_top h2 { font-size: 6rem; line-height: 50px;}
.service_top h2 span { font-size: 2.4rem; color: #000;}
header { padding: 0; background: rgba(255, 255, 255, 0.8); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom: 1px solid #0037a5; height: 90px;}
header .content .logo { margin: 0;}
.h-menu { margin: 0 auto; width: 50%; display: flex; color: #0037a5; justify-content: center;}
.menu { position: relative; width: 670px; height: 70px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto;}
.menu > li a { display: block; color: #0037a5; padding: 15px 25px; text-decoration: none;}
.menu > li a:hover { color: #999;}
ul.menu__second-level { visibility: hidden; opacity: 0; z-index: 1;}
.menu__second-level li a {
}
.menu__second-level li a:hover { background: #0037a5; color: #fff;}
/* 下矢印 */
.init-bottom:after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 5px 15px; border-right: 2px solid #0037a5; border-bottom: 2px solid #0037a5; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
/* floatクリア */
.menu:before, .menu:after { content: " "; display: table;}
.menu:after { clear: both;}
.menu { *zoom: 1;}
.menu > li.menu__single { position: relative;}
li.menu__single ul.menu__second-level { position: absolute; top: 40px; width: 150%; background: #a5beef; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
li.menu__single:hover ul.menu__second-level { top: 50px; visibility: visible; opacity: 1;}
.navi_contact_btn a { margin: 0; padding: 10px 15px; background: #0037a5; color: #fff; display: block; float: right; border-radius: 30px; text-decoration: none;}
svg, object { fill: currentColor;}

#is-loading { display: block; position: fixed; width: 100%; height: 150% !important; background: #fff; z-index: 1500; margin-top: -100px;}
#loading { position: fixed; inset: 0; margin: auto; width: 150px; height: 150px !important; z-index: 9;}
#loading__wrapper { overflow: hidden !important;}

/* font */
.ftmiddle { font-size: 1.5rem; line-height: 2.5rem;}
.bold { font-weight: bold;}
.red { color: #ea594e;}
.under { text-decoration: underline;}
.center { text-align: center;}
.white { color: #fff;}
.ft_purple { color: #8b409b;}
.bl { color: #0037a5;}
.green { color: #0b8d57;}
.orange { color: #e67304;}
.serif { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
.san { font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
.bg_white { background: #fff;}
.ft_b1 { font-size: 18px; line-height: 27px;}
.clear { clear: both;}
.right_txt { text-align: right;}
.dispno { display: none;}

/* margin */
.mgtop100 { margin: 100px auto 0 auto !important;}
.mgtop50 { margin: 50px auto 0 auto !important;}
.mgtop30 { margin: 30px auto 0 auto !important;}
.mgtop30_0 { margin: 30px 0 10px 0 !important;}
.mgbot10 { margin: 0 0 10px 0 !important;}
.mgbot20 { margin: 0 0 20px 0 !important;}
.mgbot0 { margin: 0 0 0 0 !important;}

.ctf7-total { width: 70%; font-size: 30px; border: none;}

.top-arrow { margin: 5rem auto 2rem auto; width: 80px; display: block;}
.home_logo { width: auto; margin: 0 auto;}
.home_top { border-bottom: 1px solid #0037a5; background: url("images/header_pic.jpg") top center no-repeat; margin-top: 90px; position: relative; display: flex; justify-content: center; align-items: center; padding: 100px;}
.main-txt { margin: auto; position: relative;}
.home_top P { margin: 0 auto; text-align: center; font-size: 20px; line-height: 30px;}

.service_top { border-bottom: 1px solid #0037a5; background: url("images/header_pic.jpg") top center no-repeat; margin-top: 90px; padding: 100px;}
.service_top P { margin: 30px auto 0 auto; text-align: center; font-size: 20px; line-height: 30px;}

.sec_white { padding: 50px 0;}
.sec_gray { padding: 50px 0; background: #efefef;}
.sec_yellow { padding: 50px; background: #fdfdfb;}
.sec_yellow img { margin-bottom: 20px;}
.sec_yellow div { margin-bottom: 20px;}

.sec_insta { padding: 50px 0; background: url("images/insta_bg.jpg") top center;}
.slide-insta { overflow-x: auto; overflow-y: hidden; white-space: nowrap; max-width: 980px; height: 500px; margin: 0 auto;}
.sb_instagram_header { white-space: normal;}
.sbi_photo_wrap { background-color: rgba(255, 255, 255, 0) !important;}
.sec_contact { padding: 50px 0; background: url("images/contact_bg.jpg") top center;}
.sec_voice { padding: 50px 0; background: url("images/voice_bg.jpg") top center;}
.voice-img { width: 250px;}
.sec_badge1 { padding: 50px 0; background: url("images/badge_bg2.jpg") top center;}
.sec_badge2 { padding: 50px 0; background: url("images/badge_bg3.jpg") top center;}
.sec_badge3 { padding: 80px 0 115px 0; background: #79bcef;}
.flex_box_index { width: 1000px; margin: 3rem auto; display: flex; flex-wrap: wrap; justify-content: center;}
.flex_box_index a { margin: 0.5rem; width: 30%;}
.flex_box { width: 1000px; margin: 3rem auto; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;}
.flex_box a { margin: 0.5rem; width: 30%;}
.flex_box2 { width: 1000px; margin: 30px auto; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: stretch;}
.cast { width: 33%;}
.cast img { width: 100%;}
.flex_box3 { width: 1000px; margin: 30px auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start;}
.flex_box3::after { content: ""; display: block; width: 360px;}
.flex_box4 { width: 1000px; margin: 30px auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;}
.flex_box4::after { content: ""; display: block; width: 360px;}
.flex_box5 { width: 1000px; margin: 30px auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: space-around;}
.flex_box5::after { content: ""; display: block; width: 360px;}
.flex_box6 { margin: 30px auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;}
.banner_1 { position: relative; overflow: hidden; text-align: center; width: 450px; padding: 25% 0;}
.banner_1:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/top_company_bg.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.banner_1:hover:after { transform: scale(1.2);}
.banner_1 .inner { z-index: 1; position: relative;}
.banner_1 .inner p { font-size: 25px; text-align: center; color: #fff;}
.banner_1 .inner p span { font-size: 14px;}
.banner_2 { position: relative; overflow: hidden; text-align: center; width: 450px; padding: 28% 0;}
.banner_2:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/top_recruit_bg.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}

.btn_yellow { width: 60%; background: #ffd102; text-align: center; margin: 20px auto;}
.btn_yellow a { display: block; color: #000; padding: 20px 0;}
.btn_blue { width: 60%; background: #0037a5; text-align: center; margin: 20px auto;}
.btn_blue a { display: block; color: #fff; padding: 20px 0;}
.recruit-btn { color: #0037a5; font-size: 2rem; font-weight: bold; background: #fff; padding: 18px 30px; transition: 0.3s; border: solid 0.2rem #0037a5; width: 80%; margin: 2rem auto 2rem auto; text-align: center; max-width: 550px;}
.recruit-btn:hover { background: #0037a5; border: solid 0.2rem #0037a5; color: #fff;}
.banner_2:hover:after { transform: scale(1.2);}
.banner_2 .inner { z-index: 1; position: relative;}
.banner_2 .inner p { font-size: 25px; text-align: center; color: #fff;}
.banner_2 .inner p span { font-size: 14px;}
.sv-title { color: #0037a5; font-weight: 900; font-size: 2.5rem;}
.sv-txt { color: #000; font-size: 1.2rem;}
#tooltip up { padding-left: 0;}
#tooltip li a { color: #000 !important;}
#tooltip li .sv-icon { display: block; width: 30%; margin: 4rem auto;}
#tooltip li:hover svg { fill: #ffffff;}
#tooltip { display: flex; flex-wrap: wrap; max-width: 1000px; justify-content: center; margin: 0 auto;}
#tooltip li { width: 240px; height: 280px; padding: 0 30px; display: block; position: relative; margin: 0.5rem; border: solid 0.2rem #0037a5; background: #fff; color: #0037a5; text-align: center;}
#tooltip li:hover { border: solid 0.2rem #0037a5; background: #0037a5;}
#tooltip li:hover a { color: #fff;}
#tooltip li:hover .sv-title, #tooltip li:hover .sv-txt { color: #fff;}
#tooltip li > div { width: 90%; min-height: 20px; position: absolute; top: 100px; left: 0; right: 0; margin: auto; padding: 5px; visibility: hidden; opacity: 0; background: rgba(255, 255, 255, 1); font-size: 1.4rem; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 8px gray; -webkit-box-shadow: 0 0 8px gray; filter: progid:DXImageTransform.Microsoft.Shadow(color="#272229", Direction=135, Strength=3); box-shadow: 0 0 8px gray; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; line-height: 150%; color: #000 !important; text-align: left;}
#tooltip li:hover > div { visibility: visible; opacity: 1; top: 100px; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}

#tooltip02 up { padding-left: 0;}
#tooltip02 li a { color: #000 !important;}
#tooltip02 li .sv-icon { display: block; width: 30%; margin: 4rem auto;}
#tooltip02 li:hover svg { fill: #ffffff;}
#tooltip02 { display: flex; flex-wrap: wrap; max-width: 1000px; justify-content: center; margin: 0 auto; padding: 0;}
#tooltip02 li { width: 100%; display: block; position: relative; margin: 0.5rem; background: #36b7cd; color: #fff; text-align: center;}
#tooltip02 li img { float: left;}
#tooltip02 li .text3 { width: 52%; margin: 30px 40px; padding: 5px; text-align: justify; font-size: 1.7rem; line-height: 2.5rem; float: left;}

/*--education--*/
.ed_link { background-image: url("images/ed-bana.png"); background-repeat: no-repeat; background-size: cover; max-width: 1000px; margin: 0 auto; width: 100%; text-align: center; color: #fff; border: solid 0.2rem #0037a5; font-weight: 900; font-size: 3rem; background-color: #fff; justify-content: center; align-items: center; display: flex; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.ed_link:hover { background-image: url("images/ed-bana_on.png"); background-color: rgba(0, 55, 165, 1); background-repeat: no-repeat; background-size: cover; border: solid 0.2rem #0037a5;}
.ed_link a { padding: 6rem 0; width: 100%; display: flex; justify-content: center; align-items: center; color: #0037a5; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.ed_link a:hover { color: #fff;}
.ed_link_btn { background: #0037a5; border-radius: 10rem; color: #fff !important; padding: 1rem 2rem; display: inline-block; font-weight: normal; font-size: 2rem; margin-left: 2rem;}
.ed_banner_1 { position: relative; overflow: hidden; text-align: center; width: 330px; height: 320px; padding: 42% 0 0 0; margin-bottom: 0.4rem;}
.ed_banner_1:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("images/ed-sv01.png") no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.ed_banner_1:hover:after { transform: scale(1.2);}
.ed_banner_1 .inner, .ed_banner_2 .inner { z-index: 1; position: relative;}
.ed_banner_1 .inner p, .ed_banner_2 .inner p { font-size: 20px; text-align: center; color: #fff;}

.ed_banner_2 { position: relative; overflow: hidden; text-align: center; width: 330px; height: 320px; padding: 45% 0 0 0; margin-bottom: 0.4rem;}
.ed_banner_2:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url("images/ed-sv02.png") no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.ed_banner_2:hover:after { transform: scale(1.2);}

.ed_cont { background: #e8f7ff; padding: 2rem; border: solid thin #707070; margin: 0 auto 4rem auto;}
.ed_hl { background: #0037a5; color: #fff; padding: 1rem; margin: 0 0 1rem 0;}

/*--index_insta--*/
#sb_instagram.sbi_fixed_height { overflow: visible !important; height: auto !important;}
#sbi_images { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 1rem !important; -webkit-overflow-scrolling: touch !important;}
#sbi_images .sbi_item { float: none !important; display: block !important; flex: 0 0 auto !important; width: 200px !important; padding: 0 !important;}

/* Slider */
.slick-slider { position: relative;

  display: block; box-sizing: border-box;

  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

  -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}

.slick-list { position: relative; display: block; overflow: hidden; margin: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging { cursor: pointer; cursor: hand;}

.slick-track { position: relative; top: 0; left: 0;

  display: block; margin-left: auto; margin-right: auto; overflow: hidden; height: 250px;}
.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-slide img { display: block;}
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img { pointer-events: none;}
.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-prev, .slick-next { position: absolute; /*絶対配置にする*/
  top: 42%; cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666; /*矢印の色*/
  border-right: 2px solid #666; /*矢印の色*/
  height: 15px; width: 15px; z-index: 100;}

.slick-prev { /*戻る矢印の位置と形状*/
  left: 1.5%; transform: rotate(-135deg);}

.slick-next { /*次へ矢印の位置と形状*/
  right: 1.5%; transform: rotate(45deg);}

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.sbi-screenreader { display: none;}

.fa-instagram { font-size: 2rem; margin: 0 0.5rem 0 0;}
ul.jr_col_10 { width: 1000px; margin: 0 auto;}
ul.jr_col_10 li { display: inline-block; width: 33%; padding: 0 0.5rem;}

.sec_contact h2, .sec_voice h2 { color: #fff; line-height: 40px;}
.sec_contact h2 span { font-size: 2.4rem; font-weight: normal;}
.contact_phone { background: url("images/contact_phone_icon.png") left top no-repeat; padding: 2rem 0 2rem 8.2rem; color: #fff; font-size: 3rem; margin: 50px auto 30px auto; width: 300px;}
.contact_fax { background: url("images/contact_fax_icon.png") left top no-repeat; padding: 2rem 0 2rem 8rem; color: #fff; font-size: 30px; margin: 0px auto; width: 300px;}
.contact_mail { width: 500px; margin: 50px auto;}
.contact_mail a { display: block; padding: 15px 0; background: #fff;}
.contact_mail a:hover { background: #0037a5;}
.contact_mail a .mail_icon { background: url("images/contact_mail_icon_off.png"); width: 66px; height: 46px; float: left; margin: 0 30px;}
.contact_mail a:hover .mail_icon { background: url("images/contact_mail_icon_on.png");}
.contact_mail a p { font-size: 30px; color: #0037a5; float: left; margin: 10px 0 0 0;}
.contact_mail a:hover p { color: #fff !important;}

.bg_campaign_circle { background: url("images/circle_bg.jpg") top center; height: 750px; background-size: contain; position: relative; margin: 0 auto;}
figure.hover-parent { width: 250px; height: 175px; position: relative; margin-bottom: 30px; overflow: hidden;}
figcaption.hover-mask { width: 250px; height: 175px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; color: #fff; display: flex; align-items: center; text-align: center; padding: 30px;}
.cam-en { width: 200px;}
.circle1 { position: absolute; top: 250px; left: 150px; z-index: 5;}
.circle2 { position: absolute; top: 500px; left: 250px; z-index: 4;}
.circle3 { position: absolute; top: 50px; left: 400px; z-index: 3;}
.circle4 { position: absolute; top: 500px; left: 550px; z-index: 2;}
.circle5 { position: absolute; top: 250px; left: 650px; z-index: 1;}
.circle1 .fukidashi { position: absolute; padding: 10px; background-color: rgba(255, 254, 175, 0.9); border: 1px solid #0037a5; width: 200px; left: 170px; bottom: 30px; margin-bottom: 12px; color: #000; font-size: 16px; border-radius: 10px; text-align: justify; opacity: 0; color: #000; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease;}
.circle2 .fukidashi { position: absolute; padding: 10px; background-color: rgba(255, 254, 175, 0.9); border: 1px solid #0037a5; width: 200px; left: 120px; bottom: 150px; margin-bottom: 12px; color: #000; font-size: 16px; border-radius: 10px; text-align: justify; opacity: 0; color: #000; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease;}
.circle3 .fukidashi { position: absolute; padding: 10px; background-color: rgba(255, 254, 175, 0.9); border: 1px solid #0037a5; width: 200px; left: 0px; bottom: -69px; margin-bottom: 12px; color: #000; font-size: 16px; border-radius: 10px; text-align: justify; opacity: 0; color: #000; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease;}
.circle4 .fukidashi { position: absolute; padding: 10px; background-color: rgba(255, 254, 175, 0.9); border: 1px solid #0037a5; width: 270px; left: -120px; bottom: 150px; margin-bottom: 12px; color: #000; font-size: 16px; border-radius: 10px; text-align: justify; opacity: 0; color: #000; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease;}
.circle5 .fukidashi { position: absolute; padding: 10px; background-color: rgba(255, 254, 175, 0.9); border: 1px solid #0037a5; width: 200px; left: -150px; bottom: 60px; margin-bottom: 12px; color: #000; font-size: 16px; border-radius: 10px; text-align: justify; opacity: 0; color: #000; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease;}
.circle1:hover .fukidashi, .circle2:hover .fukidashi, .circle3:hover .fukidashi, .circle4:hover .fukidashi, .circle5:hover .fukidashi { display: block; opacity: 1;}
.bl_box { background: #fff;}
.bl_box { border: 1px solid #0037a5; margin: 0 0 30px 0;}
.bl_box h3 { width: auto; background: #0037a5; color: #fff; padding: 10px 20px;}
.bl_box p { padding: 2rem; margin: 0;}
.bl_box p.list { padding: 2rem 2rem 2rem 3rem; text-indent: -1em;}
.camp01 { background: url(images/camp-icon01.png); background-repeat: no-repeat; background-position: right 1rem bottom 1rem; background-size: 100px;}
.camp02 { background: url(images/camp-icon02.png); background-repeat: no-repeat; background-position: right 1rem bottom 1rem; background-size: 100px;}
.camp03 { background: url(images/camp-icon03.png); background-repeat: no-repeat; background-position: right 1rem bottom 1rem; background-size: 100px;}
.camp04 { background: url(images/camp-icon04.png); background-repeat: no-repeat; background-position: right 1rem bottom 1rem; background-size: 100px;}
.camp05 { background: url(images/camp-icon05.png); background-repeat: no-repeat; background-position: right 1rem bottom 1rem; background-size: 100px;}
.sec_voice .flex_box { margin: 50px auto 0 auto;}
.sec_voice .flex_box img { height: 100%;}
.sec_voice .flex_box p { color: #fff; width: 600px;}
.sec_voice .flex_box p span { font-size: 30px;}
.disk_box { border: 1px solid #0037a5; margin: 30px 0; display: table; width: 100%;}
.left_box { display: table-cell; vertical-align: middle; background: #0037a5; color: #fff; text-align: center; width: 400px;}
.left_box P { font-size: 16px; text-align: center;}
.left_box P strong { font-size: 80px; line-height: 100px;}
.right_box { display: table-cell; background: #fff; padding: 30px 20px;}
.disc01 { background-image: url("images/disc-bk01.png"); background-repeat: no-repeat; background-size: 200px; background-position: bottom 1rem right 1rem;}
.disc02 { background-image: url("images/disc-bk02.png"); background-repeat: no-repeat; background-size: 200px; background-position: bottom 1rem right 1rem;}
.disc03 { background-image: url("images/disc-bk03.png"); background-repeat: no-repeat; background-size: 200px; background-position: bottom 1rem right 1rem;}
.disc04 { background-image: url("images/disc-bk04.png"); background-repeat: no-repeat; background-size: 200px; background-position: bottom 1rem right 1rem;}
.lp { color: #0037a5; background: url("images/lp_icon.png") no-repeat; padding: 0.5rem 0 1rem 3.5rem; background-size: 30px;}
.hq { color: #0037a5; background: url("images/hq_icon.png") no-repeat; padding: 0.5rem 0 1rem 3.5rem; background-size: 30px;}
.st { color: #0037a5; background: url("images/st_icon.png") no-repeat; padding: 0.5rem 0 1rem 3.5rem; background-size: 30px;}
.discorder { width: 60%;}
table.disc-price-list { border: solid thin #0037a5; background: #fff; border-collapse: collapse; width: 60%;}
table.disc-price-list tr:nth-child(odd) td { background: #e2e2e2;}
table.disc-price-list td { backgorund: #fff; border: solid thin #0037a5; padding: 1rem;}
table.disc-price-list th { background: #fffeaf; border: solid thin #0037a5; padding: 1rem;}
table.disc-price-list td.size { background: #0037a5 !important; border: solid thin #0037a5; font-weight: 900; padding: 1rem; color: #fff;}
.js-fix-area { position: relative;}
.js-fix { border: solid thin #0037a5; top: 0; right: 0; background: #fff; position: absolute; width: 364px;}
.is-fixed { position: fixed; top: 105px; width: 364px; right: calc(calc(100vw - 1018px) / 2);}
.is-fixend { position: absolute; top: auto; bottom: 0; right: 0; width: 364px;}
.discorder .submit-title { background: #0037a5; padding: 1rem 0; text-align: center; font-weight: bold; font-size: 2.5rem; color: #fff;}
.form-radio { background: #fff; border: solid;}
.sec-form-disc { width: 1000px; margin: 0 auto; position: relative;}
.file-up { background: #fff; border: solid; padding: 2rem; width: 100%;}
.file-btn { background: #fff;}
.js-fix p { text-align: center;}
.wpcf7-text { width: 100%;}
.discorder .wpcf7-submit { color: #fff; font-size: 2rem; font-weight: bold; background: #0037a5; padding: 20px 10px; border-radius: 6rem; transition: 0.3s; margin: 2rem auto 0 auto; text-align: left; width: 80%; display: flex; align-items: center; justify-content: space-around; border: none;}
.discorder .wpcf7-submit:hover { background: #f6ff00; border: none;}
.use-info { width: 254px; font-weight: bold;}
.discorder .wpcf7-calculator { background: #79bcef; padding: 2rem; text-align: center; border: none; width: 80%; margin: 0 auto;}
.buy { display: flex; font-weight: bold; align-items: center; font-size: 2rem; margin: 0 0 2rem 0;}
.buy p { margin: 0;}
.number, .lot { border: solid; padding: 1rem; font-size: 2rem; font-weight: bold; width: 290px;}
.wpcf7-textarea { width: 100%; margin-right: 1.8rem;}

.disk_banner_1 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center; padding: 1rem;}
.disk_banner_1:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_auth.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.disk_banner_1:hover:after { transform: scale(1.2);}
.disk_banner_1 .inner, .disk_banner_2 .inner, .disk_banner_3 .inner, .disk_banner_4 .inner, .disk_banner_5 .inner { z-index: 1; position: relative;}
.disk_banner_1 .inner p, .disk_banner_2 .inner p, .disk_banner_3 .inner p, .disk_banner_4 .inner p, .disk_banner_5 .inner p { font-size: 20px; text-align: center; color: #fff;}

.disk_banner_2 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center; padding: 1rem;}
.disk_banner_2:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_press.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.disk_banner_2:hover:after { transform: scale(1.2);}

.disk_banner_3 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center; padding: 1rem;}
.disk_banner_3:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_ass.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.disk_banner_3:hover:after { transform: scale(1.2);}

.disk_banner_4 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center; padding: 1rem;}
.disk_banner_4:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_case.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.disk_banner_4:hover:after { transform: scale(1.2);}

.disk_banner_5 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center; padding: 1rem;}
.disk_banner_5:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_logi.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.disk_banner_5:hover:after { transform: scale(1.2);}

.sp-title { width: 300px; height: 320px; background: #0037a5; align-items: center; display: flex; justify-content: flex-start; padding: 0 1rem;}
.sv-list-title { color: #fff; font-size: 3rem;}
.sv-list-subtitle { color: #fff; font-size: 1.5rem;}
.sp_banner_1 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; padding: 1rem; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center;}
.sp_banner_1:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_kikaku.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.sp_banner_1:hover:after { transform: scale(1.2);}
.sp_banner_1 .inner, .sp_banner_2 .inner, .sp_banner_3 .inner, .sp_banner_4 .inner, .sp_banner_5 .inner { z-index: 1; position: relative;}
.sp_banner_1 .inner p, .sp_banner_2 .inner p, .sp_banner_3 .inner p, .sp_banner_4 .inner p, .sp_banner_5 .inner p { font-size: 20px; text-align: center; color: #fff;}

.sp_banner_2 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; padding: 1rem; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center;}
.sp_banner_2:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_pop.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.sp_banner_2:hover:after { transform: scale(1.2);}

.sp_banner_3 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; padding: 1rem; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center;}
.sp_banner_3:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_print.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.sp_banner_3:hover:after { transform: scale(1.2);}

.sp_banner_4 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; padding: 1rem; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center;}
.sp_banner_4:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_package.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.sp_banner_4:hover:after { transform: scale(1.2);}

.sp_banner_5 { position: relative; overflow: hidden; text-align: center; width: 300px; height: 300px; padding: 1rem; margin-bottom: 0.4rem; display: flex; justify-content: center; align-items: center;}
.sp_banner_5:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_logi.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out;}
.sp_banner_5:hover:after { transform: scale(1.2);}

h3.point { width: auto; background: url("images/icon_point.png") top left no-repeat #fff; color: #0037a5; padding: 0.5rem 4rem; margin: 20px 0 0 20px; background-size: 30px;}

table.company { width: 100%; border: 1px solid #000; border-collapse: collapse; margin: 30px auto;}
table.company th, table.company td { padding: 10px 20px; text-align: left; vertical-align: middle;}
table.company th { background: rgba(174, 198, 255, 1); border-right: 1px solid #000; border-bottom: 1px solid #000;}
table.company td { background: rgba(255, 255, 255, 1); border-bottom: 1px solid #000;}
table.company .gmap { height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative;}
table.company .gmap iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%;}

.company-business { display: flex; align-items: flex-start; }
.company-business__label { flex: 0 0 auto; white-space: nowrap; }
.company-business__text { display: block; }

.point_box { width: 330px; height: 330px; display: flex; align-items: center; background: #0037a5; text-align: center;}
.point_box span { font-size: 90px; color: #fff; font-weight: bold;}
.point_box p { color: #fff; margin: 20px 0 0 0; text-align: center; width: 100%;}

.flow_box { width: 32%; min-height: 450px; background: #0037a5; text-align: center; padding: 20px 15px; margin: 0.5rem 0.5rem 0 0;}
.flow_box img { margin: 0px auto;}
.flow_box p { color: #fff; margin: 20px 0 0 0; text-align: justify; width: 100%;}

.sp_box_bg1 { background: url("images/sp_detail_bg01.jpg") top center no-repeat;}
.sp_box_bg2 { background: url("images/sp_detail_bg02.jpg") top center no-repeat;}
.sp_box_bg3 { background: url("images/sp_detail_bg03.jpg") top center no-repeat;}
.sp_box_bg4 { background: url("images/sp_detail_bg04.jpg") top center no-repeat;}
.sp_box_bg5 { background: url("images/sp_detail_bg05.jpg") top center no-repeat;}
.sp_box { width: 100%; padding: 30px; margin: 0 0 60px 0; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.6);}

.sp_box_title { background: #37b7ce; min-height: 100px; text-align: center; width: 45%; border-radius: 20px 20px 0px 0px; display: flex; align-items: center;}
.sp_box_title h3 { color: #fff; font-size: 2.5rem; line-height: 120%; text-align: center; width: 100%;}
.sp_box_detail { width: 90%; background: rgba(255, 255, 255, 0.7); padding: 25px;}
.sp_box_detail p { margin: 0; text-align: justify;}

.price-btn { color: #000; font-size: 2rem; font-weight: bold; background: #76ddff; padding: 18px 30px; border-radius: 4rem; transition: 0.3s; border: solid 0.2rem #000; width: 80%; margin: 0 auto; text-align: center;}
.price-btn:hover { background: #f6ff00; border: solid 0.2rem #000;}
.dl-btn { color: #000; font-size: 2rem; font-weight: bold; background: #76ddff; padding: 20px 10px; border-radius: 2rem; transition: 0.3s; border: solid 0.5rem #000; width: 100%; margin: 0 auto; text-align: left; max-width: 400px; display: flex; align-items: center; justify-content: space-around;}
.dl-btn:hover { background: #f6ff00; border: solid 0.5rem #000;}
.dl-btn img { width: 60px; margin: 0 !important;}
.badge_point_box { width: 450px; border: 4px solid #000; background: #fff; text-align: center; padding: 0 0 40px 0; margin: 0 0 30px 0;}
.badge_point_box h3 { background: #fe8cff; padding: 20px 0; width: 100%; border-bottom: 4px solid #000;}
.badge_point_box img { margin: 0px auto !important;}
.badge_point_box p { padding: 20px; font-size: 16px; text-align: center; margin: 20px 0; font-weight: bold;}
.badge_left { width: 500px; display: flex; align-items: flex-start; flex-wrap: wrap;}
.badge_right { width: 450px; background: #fff; border: 5px solid #000; padding: 50px 20px;}
.bade_arrow { position: relative; width: 500px; height: 124px; background: #ffffff; padding: 10px; text-align: left; border: 5px solid #000000; font-size: 1.6rem; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: flex; align-items: center; margin: 0 0 6rem 0;}
.bade_arrow p { margin: 0 0 0 1rem;}
.bade_arrow:after, .bade_arrow:before { border: solid transparent; content: ""; height: 0; width: 0; pointer-events: none; position: absolute; top: 100%; left: 50%;}
.bade_arrow:after { border-color: rgba(255, 255, 255, 0); border-top-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-right-width: 10px; margin-left: -10px; border-top-color: #ffffff;}
.bade_arrow:before { border-color: rgba(0, 0, 0, 0); border-top-width: 15px; border-bottom-width: 15px; border-left-width: 15px; border-right-width: 15px; margin-left: -15px; margin-top: 5px; border-top-color: #000000;}
.tamp-sample { max-width: 560px;}

.bade_arrow02 { position: relative; width: 500px; height: 240px; background: #ffffff; padding: 10px; text-align: left; border: 5px solid #000000; font-size: 1.6rem; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: flex; align-items: center; margin: 0 0 6rem 0;}
.bade_arrow02 p { margin: 0 0 0 1rem;}
.bade_arrow02:after, .bade_arrow02:before { border: solid transparent; content: ""; height: 0; width: 0; pointer-events: none; position: absolute; top: 100%; left: 50%;}
.bade_arrow02:after { border-color: rgba(255, 255, 255, 0); border-top-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-right-width: 10px; margin-left: -10px; border-top-color: #ffffff;}
.bade_arrow02:before { border-color: rgba(0, 0, 0, 0); border-top-width: 15px; border-bottom-width: 15px; border-left-width: 15px; border-right-width: 15px; margin-left: -15px; margin-top: 5px; border-top-color: #000000;}

.bade_last { position: relative; width: 500px; height: 124px; background: #ffffff; padding: 10px; text-align: left; border: 5px solid #000000; font-size: 1.6rem; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: flex; align-items: center;}
.bade_last p { margin: 0 0 0 1rem;}
.badge_guide1 p, .badge_guide2 p, .badge_guide3 p, .badge_guide4 p { margin: 0;}
.badge_right h3 { font-size: 2rem; font-weight: bold; text-align: left;}
table.badge_postage { width: 100%; border: 5px solid #000; border-collapse: collapse; margin: 0 0 30px 0;}
table.badge_postage td { background: #f6ff00; text-align: center; padding: 15px; border-right: 5px solid #000; border-bottom: 5px solid #000; font-weight: bold; font-size: 20px;}
table.badge_postage th { background: #fff; text-align: center; padding: 15px; font-size: 20px;}
.dltemplate p { font-size: 20px; text-align: center; margin: 30px 0;}
.dltemplate img { margin: 30px auto;}
.dl_att { background: #37b7ce; padding: 30px; border-radius: 20px; margin: 30px 0 0 0;}
.dl_att p { margin: 0px; color: #fff; text-align: left; font-size: 18px;}

/* privacy policy*/
.privacy_top { border-bottom: 1px solid #0037a5; background: url("images/header_pic.jpg") top center no-repeat; height: 200px; padding: 90px 0 0 0; margin-top: 92px;}
.privacy_top h2 { font-size: 6rem; line-height: 50px;}
.privacy_top h2 span { font-size: 2.4rem; color: #000;}
.privacy_h3 { font-size: 20px; width: 100%; padding: 15px 0 15px 15px; text-align: left; color: #fff; background: #0037a5; margin: 30px 0;}
.privacy_h4 { font-size: 20px; width: 100%; border-bottom: 1px solid #0037a5; padding: 15px 0; text-align: left; color: #000; margin: 30px 0;}
.list1 { list-style: none; margin: 30px 0 0 0; text-align: justify;}
.list1 li { text-indent: -1.5em; padding-left: 1.5em;}
.list2 { list-style: disc !important; margin: 0 0 30px 0 !important; text-align: justify;}
.list2 li { margin: 0 0 0 2.5em;}

/*recruit*/
.rec_btn { width: 300px; position: relative; margin-top: 20px;}
.rec_btn a { width: 100%; padding: 15px 0; text-align: center; background: #0037a5; color: #fff; display: block; margin: 0px auto;}
.rec_btn a:hover { background: rgba(255, 255, 255, 1); border: 1px solid #0037a5; color: #0037a5; transition: 1s;}
.not-recruit { background: rgba(37, 37, 37, 0.77); color: #fff; position: absolute; z-index: 500; height: 100%; width: 100%; line-height: 800px; text-align: center; font-size: 50px;}
.recnone { max-width: 980px; margin: 0 auto; position: relative;}

#tooltip03 li .sv-icon { display: block; width: 30%; margin: 4rem auto;}
#tooltip03 li:hover svg { fill: #ffffff;}
#tooltip03 { display: flex; flex-wrap: wrap; max-width: 1000px; justify-content: center; margin: 0 auto; padding: 0;}
#tooltip03 li { width: 100%; display: flex; position: relative; margin: 0.5rem; background: #36b7cd; color: #fff; text-align: center; align-items: center;}
#tooltip03 li img { float: left; margin: 10px 0 !important;}
#tooltip03 li .text3 { width: 52%; margin: 30px 40px; padding: 5px; text-align: justify; font-size: 1.7rem; line-height: 2.5rem; float: left;}

/* badge */

h2.h2badge span { font-size: 2rem;}

h2.h2badge-w span { font-size: 2rem !important;}
.badge_top { border-bottom: 1px solid #0037a5; background: url("images/badge/badge_head_bg.png") top center no-repeat; padding: 150px; margin-top: 169px; background-size: cover;}
.badge_top p { padding: 4rem 0;}
.badge_top img { margin: 0 auto;}
.badge_pr { display: flex; max-width: 980px; margin: 0 auto;}
.badge_pr img { width: 20%; max-width: 160px;}
.badge_list { background: url("images/badge/list-bk.png"); background-size: auto; padding: 1rem 0;}
.badge_list .wrap { max-width: 980px; margin: 0 auto; display: flex;}
.guide-info { background-size: auto; padding: 1rem 0; background: #fff; position: fixed; top: 90px; width: 100%; z-index: 999; border-bottom: solid 0.5rem #000;}
.guide-info .wrap { max-width: 980px; margin: 0 auto; display: flex; justify-content: space-around;}
.guide-box { background: #fff; border: solid 0.5rem #000; margin: 4rem auto;}
.guide-left { width: 45%;}
.guide-right { width: 45%;}
.guide-box p { padding: 1rem;}
.guide-flex { display: flex; justify-content: space-around;}
.guide-btn { background: rgba(255, 174, 0, 1); border: solid 0.5rem; padding: 1rem; font-weight: bold;}
.guide-btn a { color: #000;}
h3.guide-title { background: #fe8cff; border-bottom: solid; padding: 2rem 0; border-top: 0; border-left: 0; border-right: 0; text-align: center; font-size: 3rem;}
h4.guide-subtitle { text-align: center; font-weight: bold; font-size: 2rem; margin: 2rem auto; text-align: center;}
h4.guide-subtitle span { font-size: 1.6rem;}
h5.guide-at { font-weight: bold; border-bottom: solid thin #000; font-size: 2rem; padding: 1rem; width: 90%; margin-left: 1rem;}
.badge_info { background-size: auto; padding: 1rem 0; background: rgba(255, 255, 255, 0.66); position: fixed; bottom: 0; width: 100%; z-index: 999;}
.badge-fix { position: fixed;}
.info-icon { display: inline-block; width: 30px !important; vertical-align: middle;}
.order-icon { margin: 0 auto; width: auto;}
.badge_info .wrap { max-width: 980px; margin: 0 auto; display: flex; justify-content: space-around;}
.tel { border: solid 0.5rem #000; border-radius: 0.1rem; padding: 1rem; text-align: center; font-size: 2rem; font-weight: bold; background: #fff; width: 30%; display: flex; align-items: center; justify-content: center;}
.badge_order { border: solid 0.5rem #000; border-radius: 0.1rem; padding: 1rem; text-align: center; font-size: 2rem; background: #f6ff00; width: 25%; font-weight: bold;}
.temp { border: solid 0.5rem #000; border-radius: 0.1rem; padding: 1rem; text-align: center; font-size: 2rem; background: #79bcef; width: 25%; font-weight: bold;}
.mail { border: solid 0.5rem #000; background: #f6ff00; border-radius: 2rem; padding: 1rem; margin: 1rem auto 0 auto;}
.badge_form { background: #fff; border: solid 0.5rem #000; border-radius: 0.5rem; padding: 2rem; max-width: 900px; margin: 0 auto; font-weight: bold;}
.big-lot { font-size: 2rem; text-align: center;}
.big-lot span { font-size: 1.6rem; text-align: center; padding: 0 0 2rem 0;}
.big-lot-btn { background: #f6ff00; border: solid 0.5rem #000; padding: 3rem 0; position: relative; display: flex; align-items: center; justify-content: center; font-size: 3rem; max-width: 600px; margin: 0 auto; font-weight: bold;}
.btn-pic { position: absolute; left: -6rem; top: -3rem; bottom: 0; width: 120px;}
.option-title { background: #fe8cff; border-bottom: solid; padding: 1rem 0; border-top: 0; border-left: 0; border-right: 0; margin: 0 0 2rem 0;}
.option-lap { background: #fff; border: solid 0.5rem #000;}
.option-lap-box { width: 30%; background: #fff; border: solid 0.5rem #000; text-align: center; padding: 0 0 2rem 0; font-weight: bold;}
.option-lap-box img { margin: 2rem auto;}
.option-lap-box-limit { width: 100%; background: #fff; border: solid 0.5rem #000; text-align: center; padding: 0 0 2rem 0; font-weight: bold;}
h3.price { background: #fe8cff; border-radius: 4rem; text-align: center; max-width: 700px; border: solid 0.5rem #000; margin: 2rem auto 2rem auto; display: flex; justify-content: center; align-items: center; padding: 2rem 0; width: 90%;}
h3.price p { padding: 0 !important; text-align: center; margin: 0;}
.flow-box { background: #fff; border: solid 0.5rem #000; max-width: 980px; margin: 2rem auto; padding: 0 0 4rem 0;}
.flow-box p { padding: 1rem 3rem;}
.badge_flow { border: solid 0.5rem #000; background: #96e0e4; text-align: center; width: 90%; margin: 2rem auto 0 auto; padding: 2rem 0;}
.flow-flex { width: 90%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center;}
.flow-flex img { margin: 0 1rem;}
.flow-flex p { margin: 0;}
.flow-arrow { margin: 0 auto; width: 30px;}
h3.flow-title { background: #fe8cff; border-bottom: solid; padding: 1rem; border-top: 0; border-left: 0; border-right: 0;}
.kiyaku-box { background: #fff; border: solid 0.5rem #000; max-width: 980px; margin: 2rem auto;}
.atent-in { padding: 1rem; overflow-y: scroll; height: 200px; overflow-x: hidden;}
.atent-in p { padding-left: 1em; text-indent: -1em;}
.at-btn { text-align: center;}
.flow_box { width: 28%; min-height: 450px; background: #0037a5; text-align: center; padding: 2rem; margin: 0.5rem 0.5rem 0 0;}
.dl-btn-p { color: #000; font-size: 2rem; font-weight: bold; background: #79bcef; padding: 2rem; transition: 0.3s; border: solid 0.5rem #000; margin: 1rem; text-align: center; max-width: 250px; height: 200px;}
.dl-btn-p:hover { background: #f6ff00; border: solid 0.5rem #000;}
.dl-btn-p img { width: 60%; margin: 0 auto 1rem auto !important;}

.dl-btn-a { color: #000; font-size: 2rem; font-weight: bold; background: #ff9900; padding: 2rem; transition: 0.3s; border: solid 0.5rem #000; margin: 1rem; text-align: center; max-width: 250px; height: 200px;}
.dl-btn-a:hover { background: #f6ff00; border: solid 0.5rem #000;}
.dl-btn-a img { width: 60%; margin: 0 auto 1rem auto !important;}
.dl-btn-a a, .dl-btn-p a { margin: 0; color: #000;}

a.link_badge { text-decoration: none; color: #000; transition: 1s;}
a.link_badge:hover { opacity: 0.5;}

.badge_point_box { width: 980px; border: 4px solid #000; background: #fff; text-align: center; padding: 0 0 40px 0; margin: 2rem auto 0 auto;}
.badge_point_box h3 { padding: 20px 0; width: 90%; max-width: 300px; background: #fe8cff; width: 100%; border: 4px solid #000; margin: 4rem auto;}
.badge_point_box .line { display: flex; justify-content: space-around; align-items: center; font-weight: bold;}
.badge_point_box .line .omote { padding: 1rem 0; width: auto; display: flex; justify-content: space-around; align-items: center; width: 50%;}
.badge_point_box .line .omote img { width: auto;}
hr.dot { border: none; border-top: dotted;}

/* service feature / product */
.feature-card__content { display: flex; align-items: center; gap: 30px;}
.feature-card__content p { flex: 1; margin: 0;}
.feature-card__content img { width: 180px; margin: 0;}
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 1000px; margin: 0 auto 50px auto;}
.product-grid__heading { background: #0037a5; color: #fff; display: flex; align-items: center; padding: 20px;}
.product-grid__heading p { margin: 0; color: #fff; text-align: left; font-size: 1.5rem;}
.product-grid__heading span { font-size: 3rem;}
.product-grid__item { position: relative; display: block; overflow: hidden;}
.product-grid__item img { width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform 0.3s ease-out;}
.product-grid__item:hover img { transform: scale(1.1);}
.product-grid__item span { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; line-height: 140%; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);}
.detail-panel { width: calc(100% - 60px); padding: 30px; margin: 0 0 60px 0; background-position: center; background-repeat: no-repeat; background-size: cover;}
.detail-panel__inner { width: 800px; margin: 0 auto;}
.detail-panel__title { background: #37b7ce; min-height: 60px; text-align: center; width: 45%; border-radius: 10px 10px 0 0; display: flex; align-items: center;}
.detail-panel__title h3 { color: #fff; font-size: 2.5rem; line-height: 120%; text-align: center; width: 100%;}
.detail-panel__body { width: calc(100% - 80px); background: rgba(255, 255, 255, 0.82); padding: 40px; display: flex; align-items: center; gap: 60px;}
.detail-panel__body p { flex: 1; margin: 0; text-align: justify; line-height: 1.7;}
.detail-panel__body img { width: 42%; margin: 0;}

/* design */
.company_infocon{width: 500px; padding: 30px; border: 2px solid #0037a5; margin: 50px auto; text-align: center;}
.company_infocon h2{font-size: 18px; font-weight: bold; margin: 0 0 20px 0;}
.company_infocon p{font-size: 16px; text-align: justify; color: #000;}

/* badge */
.badge_items { display: flex; flex-wrap: wrap; width: 1000px; margin: 50px auto; list-style: none; gap: 2.6%;}
.badge_items li{width:23%; display: block; margin-bottom: 40px; text-align: center;}
.badge_items li img{width: 100%;}
.badge_items li h3{padding:0 20px; display: inline-block; margin: 0 auto 20px auto; text-align: center; color: #fff; font-size: 16px; font-weight: bold; color: #0037a5; border-bottom: 1px solid #0037a5;}

/* contact */
.contact-box { background: #fff; border: solid thin #0037a5; padding: 1rem; width: 95%; max-width: 980px; margin: 0 auto; padding: 2rem;}
.contact-submit { background: #0037a5; padding: 2rem 1rem; max-width: 350px; margin: 0 auto; width: 95%; color: #fff; border: none; border-radius: 0;}
.contact-submit:hover { background: #0037a5; padding: 2rem 1rem; max-width: 350px; margin: 0 auto; width: 95%; color: #fff; border: none; border-radius: 0;}
.contact-name, .contact-email { width: 50%;}
.contact-txt { width: 100%;}
.contact-toku { height: 150px; overflow-y: scroll; overflow-x: hidden; border: solid thin #0037a5; padding: 1rem;}
.wpcf7-response-output { text-align: center;}

footer { background: #0037a5; padding: 30px 0;}
footer a { transition: 1s;}
footer a:hover { opacity: 0.5;}
footer img { transition: 1s;}
footer img:hover { opacity: 0.5;}
footer .foot-menu { margin: 0 auto; max-width: 1200px;}
.foot-menu ul { list-style: none; display: flex; justify-content: space-between; padding: 0;}
.foot-menu li a { color: #fff; text-decoration: none; float: left;}
.footer-info { display: flex; max-width: 1200px; margin: 0 auto; width: 90%; justify-content: space-between; align-items: center;}
.footer_companyinfo { background: url("images/footer_logo.png") bottom left no-repeat; width: auto; margin: 0; padding: 0 0 0 70px; font-size: 14px; line-height: 16px; color: #fff; display: block; flex-grow: 1;}
.copyright { border-top: 1px solid #fff; text-align: center; padding: 20px 0 0 0; margin: 30px 0 0 0; color: #fff; font-size: 1.6rem;}

@media (max-width: 999px) { body { width: 100%; overflow-x: hidden; margin: 0; padding: 0; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-size: 1.6rem; line-height: 150%; }
  img { width: 100%; }
  p { text-align: justify; margin: 0 0 30px 0; }
  .middle { font-size: 1rem; line-height: 2rem; }
  .forpc { display: none !important; }
  .forsp { display: block !important; }
  /* メニュー */
  header { padding: 0; background: rgba(255, 255, 255, 0.8); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom: 1px solid #0037a5; height: auto; }
  .logo { width: 50%; right: 0; position: absolute; display: block; left: 1rem; max-width: 200px; }
  a { font-size: 14px; text-decoration: none; width: 100%; }

  #menu-bar { position: fixed; z-index: 20; width: 100%; height: 45px; display: flex; justify-content: flex-end; align-items: center; background-color: #fff; border: solid 1px #ddd; }
  #menu-button { display: inline-block; margin-right: 0; padding: 10px 0; line-height: 200%; background: #0037a5; color: #fff; height: auto; width: 70px; text-align: center; }

  a.roadmap { display: block; padding: 1rem 0.1rem; max-width: 100%; font-size: 1.2rem; color: #fff; font-weight: bold; text-align: center; margin: 1rem 0; border: solid thin #fff; }
  .f-logo { width: 76px; }

  #nav-menu { position: fixed; z-index: 20; top: 47px; right: -100%; width: 80%; height: 100vh; background-color: #0037a5; border-left: solid 1px #ddd; transition: all 0.5s ease-out; color: #fff; }
  #nav-menu.nav-menu-open { right: 0; }
  #nav-menu ul { padding: 0; margin: 0; }
  #nav-menu li { list-style: none; }
  #nav-menu li a { display: block; padding: 1rem; border-bottom: solid 1px #ddd; color: #fff; }
  #nav-menu .in_menu li { background: #022976; }
  #nav-menu .in_menu li a { padding-left: 2rem; }
  #contents { padding-top: 47px; }
  .txt-c { text-align: justify; }
  .main-contents { padding: 10px; }
  #overlay { position: fixed; top: 0; z-index: 10; width: 100vw; height: 100vh; visibility: hidden; opacity: 0; background: rgba(0, 0, 0, 0.6); transition: all 0.5s ease-out; }
  #overlay.overlay-on { visibility: visible; opacity: 1; }
  .navi_contact_btn { margin: 20px auto 0 auto; padding: 0; background: #fff; border-radius: 30px; text-decoration: none; text-align: center; width: 90%; }
  .navi_contact_btn a { display: block; float: none; text-decoration: none; background: none; color: #0037a5; padding: 15px 0;}

  h1 { display: none; }
  h2 { font-size: 2.2rem; color: #0037a5; text-align: center; line-height: 200%; width: 95%; margin: 0 auto; }
  .service_top h2 { font-size: 4rem; line-height: 130%; }
  .service_top h2 span { font-size: 2.4rem; color: #000; }
  /* floatクリア */
  #is-loading { display: block; position: fixed; width: 100%; height: 100%; background: #fff; z-index: 1500; }
  #loading { position: fixed; inset: 0; margin: auto; width: 100px; height: 100px !important; z-index: 9; }
  .ctf7-total { width: 70%; font-size: 30px; border: none; }

  .content { width: 90%; margin: 0px auto; }
  #page_top { position: fixed; bottom: 30px; right: 20px; }
  #page_top a { background-color: #999; color: #fff; text-align: center; text-decoration: none; padding: 20px 20px; }
  #page_top a:hover { background-color: #666; text-decoration: none; }

  .home_logo { width: 90%; margin: 5rem auto; }
  .home_top { border-bottom: 1px solid #0037a5; background: url("images/header_pic.jpg") top center no-repeat; height: 360px; padding: 10px 0 50px 0; margin-top: 0; }
  .home_top p { width: 90%; margin: 2rem auto 0 auto; font-size: 18px; line-height: 150%; }
  .top-arrow { margin: 5rem auto 0 auto; width: 50px; display: block; }
  .btn_yellow { width: 90%; }
  .btn_blue { width: 90%; }

  .service_top { border-bottom: 1px solid #0037a5; background: url("images/header_pic.jpg") top center no-repeat; height: auto; padding: 85px 0 0 0; top: 105px; margin-top: 45px; }
  .service_top P { margin: 30px auto; text-align: center; font-size: 18px; line-height: 150%; width: 90%; }

  .badge_top { border-bottom: 1px solid #0037a5; background: url("images/badge_head_bg.jpg") top center repeat; height: auto; padding: 85px 0 0 0; top: 105px; }
  .badge_top img { margin: 0 auto; }
  .badge_top p { padding: 2rem 1rem; }

  /*--index_insta--*/
  ul.jr_col_10 { width: 90%; margin: 0 auto; }
  ul.jr_col_10 li { display: block; width: 100%; padding: 2rem 0; }
  #sbi_images { padding: 0px !important; }
  .slick-list { height: 200px !important; }

  .sec_white { padding: 2rem 0; overflow: hidden; }
  .sec_gray { padding: 2rem 0; background: #efefef; overflow: hidden; }
  .sec_insta { padding: 2rem 0; background: url("images/insta_bg.jpg") top center; }
  .slide-insta { width: 90%; margin: 0 auto; white-space: normal; }
  .sec_contact { padding: 2rem 0; background: url("images/contact_bg.jpg") top center; overflow: hidden; }
  .sec_voice { padding: 2rem 0 0 0; background: url("images/voice_bg.jpg") top center; overflow: hidden; background-size: cover; }
  .sec_badge1 { padding: 2rem 0; background: url("images/badge_bg2.jpg") top center; overflow: hidden; }
  .sec_badge2 { padding: 2rem 0; background: url("images/badge_bg3.jpg") top center; overflow: hidden; }
  .sec_badge3 { padding: 2rem 0; background: #79bcef; overflow: hidden; }
  .flex_box_index { width: 90%; margin: 3rem auto; display: flex; flex-wrap: wrap; justify-content: center; }
  .flex_box_index a { margin: 0.5rem; width: 100%; }
  .flex_box { width: 90%; margin: 3rem auto; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; }
  .flex_box a { margin: 0.5rem; width: 30%; }
  .flex_box2 { width: 100%; margin: 2rem auto 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
  .cast { width: 100%; }
  .cast img { width: 100%; }
  .flex_box3 { width: 90%; margin: 2rem auto 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; }
  .flex_box3::after { content: ""; display: block; width: 100%; }
  .flex_box4 { width: 100%; margin: 30px auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; }
  .flex_box4::after { content: ""; display: block; width: 100%; }
  .flex_box5 { width: 90%; margin: 30px auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: space-around; }
  .flex_box5::after { content: ""; display: block; width: 100%; }

  .banner_1 { position: relative; overflow: hidden; text-align: center; height: 0; padding: 30% 0; min-width: 300px; margin: 0 auto 2rem auto; max-width: 550px; width: 100%; }
  .banner_1:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/top_company_bg.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; overflow: hidden; }
  .banner_1:hover:after { transform: scale(1.2); }
  .banner_1 .inner { z-index: 1; position: absolute; top: 30%; bottom: 0; margin: auto; left: 0; right: 0; width: 90%; }
  .banner_1 .inner p { font-size: 25px; text-align: center; color: #fff; }
  .banner_1 .inner p span { font-size: 14px; }
  .banner_2 { position: relative; overflow: hidden; text-align: center; height: 0; min-width: 300px; margin: 2rem auto; max-width: 550px; width: 100%; }
  .banner_2:after { position: absolute; content: ""; display: block; height: 100%; top: 0; background: url(images/top_recruit_bg.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; overflow: hidden; }
  .banner_2:hover:after { transform: scale(1.2); }
  .banner_2 .inner { z-index: 1; position: absolute; top: 35%; bottom: 0; margin: auto; left: 0; right: 0; width: 95%; }
  .banner_2 .inner p { font-size: 25px; text-align: center; color: #fff; }
  .banner_2 .inner p span { font-size: 14px; }
  #tooltip li .sv-icon { display: block; width: 30%; margin: 2rem auto; }
  #tooltip { display: flex; flex-wrap: wrap; max-width: 1000px; justify-content: center; width: 90%; }
  ul#tooltip { padding-left: 0; }
  #tooltip li { width: calc(100% - 60px); padding: 30px; height: auto; display: block; position: relative; margin: 20px 0; left: 0; border: solid 0.2rem #0037a5; }
  #tooltip li:hover { width: 100%; height: auto; display: block; position: relative; margin: 0.5rem 0 0.5rem 0; left: 0; border: solid 0.2rem #0037a5; background: #0037a5; }
  #tooltip li:hover div span { color: #fff; }
  #tooltip li:hover .sv-title,   #tooltip li:hover .sv-txt { color: #fff; }
  #tooltip li:hover > div { visibility: visible; opacity: 1; top: 0; }
  #tooltip li > div { width: auto; min-height: 20px; position: relative; top: 0; margin-left: 0; padding: 5px; visibility: visible; opacity: 1; line-height: 150%; box-shadow: none; background: none; text-align: justify; font-size: 1.5rem; }
  #tooltip li a { color: #000; }
  #tooltip02 up { padding-left: 0; }
  #tooltip02 li a { color: #000 !important; }
  #tooltip02 li .sv-icon { display: block; width: 30%; margin: 4rem auto; }
  #tooltip02 li:hover svg { fill: #ffffff; }
  #tooltip02 { display: flex; flex-wrap: wrap; max-width: 1000px; justify-content: center; margin: 0 auto; padding-left: 0; }
  #tooltip02 li { width: 90%; height: auto; display: block; position: relative; margin: 0.5rem; background: #37b7ce; color: #0037a5; text-align: center; }
  #tooltip02 li:hover { width: 90%; height: auto; display: block; position: relative; margin: 0.5rem; background: #37b7ce; color: #0037a5; text-align: center; }
  #tooltip02 li:hover a { color: #fff; }
  #tooltip02 li:hover .sv-title,   #tooltip02 li:hover .sv-txt { color: #fff; }
  #tooltip02 li > div { width: 95%; min-height: 20px; position: relative; top: 0; left: 0; right: 0; margin: auto; padding: 10px 0; visibility: visible; opacity: 1; background: none; font-size: 1.6rem; box-shadow: none; line-height: 150%; color: #fff !important; text-align: justify; }
  #tooltip02 li:hover > div { width: 95%; min-height: 20px; position: relative; top: 0; left: 0; right: 0; margin: auto; padding: 5px; visibility: visible; opacity: 1; background: none; font-size: 1.4rem; box-shadow: none; line-height: 150%; color: #fff !important; text-align: left; }
  .recruit-btn { color: #0037a5; font-size: 1.8rem; font-weight: bold; background: #fff; padding: 1rem; transition: 0.3s; border: solid 0.2rem #0037a5; width: 80%; margin: 2rem auto 2rem auto; text-align: center; max-width: 550px; }
  .recruit-btn:hover { background: #0037a5; border: solid 0.2rem #0037a5; color: #fff; }
  .sec_contact h2,   .sec_voice h2 { color: #fff; line-height: 40px; }
  .sec_contact h2 span { font-size: 1.8rem; font-weight: normal; }
  .contact_phone { background: url("images/contact_phone_icon.png") left top no-repeat; padding: 2rem 0 2rem 7rem; color: #fff; font-size: 2.5rem; margin: 2rem auto; width: 253px; }
  .contact_fax { background: url("images/contact_fax_icon.png") left top no-repeat; padding: 2rem 0 2rem 8rem; color: #fff; font-size: 2.5rem; margin: 2rem auto; width: 70%; width: 273px; }
  .contact_mail { width: 90%; margin: 2rem auto; max-width: 290px; }
  .contact_mail a { display: block; padding: 15px 0; background: #fff; }
  .contact_mail a:hover { background: #0037a5; }
  .contact_mail a .mail_icon { background: url(images/contact_mail_icon_off.png); width: 50px; height: 30px; float: left; margin: 0.5rem; background-size: contain; background-repeat: no-repeat; background-position: center; }
  .contact_mail a:hover .mail_icon { background: url("images/contact_mail_icon_on.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }
  .contact_mail a p { font-size: 2rem; color: #0037a5; float: left; margin: 10px 0 0 0; }
  .contact_mail a:hover p { color: #fff; }

  /*--キャンペーン事業部--*/

  .bg_campaign_circle { background: url(images/circle_bg.jpg) top center; background-size: 350px; background-repeat: no-repeat; position: relative; background-position: center center; height: 350px; padding: 0; width: 90%; max-width: 320px; margin: 0 auto; }
  .cam-en { width: 100%; }
  .circle1 { position: absolute; top: 30%; left: 0; width: 100px; }
  .circle2 { position: absolute; top: 65%; left: 14%; width: 100px; }
  .circle3 { position: absolute; top: 5%; margin: auto; width: 100px; left: 0; right: 0; }
  .circle4 { position: absolute; top: 30%; left: 69%; width: 100px; }
  .circle5 { position: absolute; top: 65%; left: 54%; width: 100px; }
  .sp-fukidashi { margin-top: 2rem; }
  .fukidashi { position: relative; display: block; padding: 10px; background-color: rgba(255, 254, 175, 0.9); border: 1px solid #0037a5; width: 90%; margin: 0 auto 12px auto; color: #000; font-size: 16px; border-radius: 10px; text-align: justify; z-index: 0; }
  .bl_box { border: 1px solid #0037a5; margin: 0 0 2rem 0; background: #fff; }
  .bl_box h3 { width: auto; background: #0037a5; color: #fff; padding: 10px 20px; }
  .bl_box p { padding: 20px; margin: 0; }
  .sec_voice .flex_box { margin: 2rem auto 0 auto; }
  .sec_voice .flex_box img { height: 100%; margin: 0 auto 2rem auto; }
  .sec_voice .flex_box p { color: #fff; }
  .sec_voice .flex_box p span { font-size: 30px; }
  .disk_box { border: 1px solid #0037a5; margin: 2rem auto; display: block; width: 100%; }
  .left_box { display: block; vertical-align: middle; background: #0037a5; color: #fff; text-align: center; width: 100%; padding: 2rem 0; }
  .left_box P { font-size: 16px; text-align: center; line-height: 100%; margin: 0; }
  .left_box P strong { font-size: 40px; line-height: 50px; }
  .right_box { display: block; background: #fff; padding: 3rem; }
  .lp { color: #0037a5; background: url("images/lp_icon.png") no-repeat; padding: 0.5rem 0 1rem 3.5rem; background-size: 30px; }
  .hq { color: #0037a5; background: url("images/hq_icon.png") no-repeat; padding: 0.5rem 0 1rem 3.5rem; background-size: 30px; }
  .st { color: #0037a5; background: url("images/st_icon.png") no-repeat; padding: 0.5rem 0 1rem 3.5rem; background-size: 30px; }

  /*--光ディスク--*/

  .sec-form-disc { width: 90%; margin: 0 auto; position: relative; }
  .discorder { width: 90%; margin: 0 auto; }
  table.disc-price-list { border: solid thin #0037a5; background: #fff; border-collapse: collapse; width: 90%; margin: 0 auto; }
  table.disc-price-list tr:nth-child(odd) td { background: #e2e2e2; }
  table.disc-price-list td { backgorund: #fff; border: solid thin #0037a5; padding: 1rem; }
  table.disc-price-list th { background: #fffeaf; border: solid thin #0037a5; padding: 1rem; }
  table.disc-price-list td.size { background: #0037a5 !important; border: solid thin #0037a5; font-weight: 900; padding: 1rem; color: #fff; }
  .discorder .js-fix { border: solid thin #0037a5; top: 0; right: 0; background: #fff; position: relative; width: 100%; }
  .discorder .submit-title { background: #0037a5; padding: 1rem 0; text-align: center; font-weight: bold; font-size: 2.5rem; color: #fff; }
  .form-radio { background: #fff; border: solid; }
  .file-up { background: #fff; border: solid; padding: 2rem 0.5rem; width: 100%; }
  .file-btn { background: #fff; }
  .js-fix p { text-align: center; }
  .wpcf7-text { width: 100%; }
  .discorder .wpcf7-submit { color: #fff; font-size: 2rem; font-weight: bold; background: #0037a5; padding: 20px 10px; border-radius: 6rem; transition: 0.3s; margin: 2rem auto 0 auto; text-align: left; width: 80%; display: flex; align-items: center; justify-content: space-around; border: none; }
  .discorder .wpcf7-submit:hover { background: #f6ff00; border: none; }
  .use-info { width: 254px; font-weight: bold; }
  .discorder .wpcf7-calculator { background: #79bcef; padding: 2rem; text-algin: center; border: none; width: 80%; margin: 0 auto; }
  .buy { display: flex; font-weight: bold; align-items: center; font-size: 2rem; margin: 0 0 2rem 0; }
  .buy p { margin: 0; }
  .number,   .lot { border: solid; padding: 1rem; font-size: 2rem; font-weight: bold; width: 290px; }
  .discorder .wpcf7-textarea { width: 100%; margin-right: 1.8rem; }

  .disk_banner_1 { position: relative; overflow: hidden; text-align: center; height: 170px; padding: 20% 0 15% 0; margin: 0 auto 0.4rem auto; width: 90%; }
  .disk_banner_1:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_auth.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .disk_banner_1:hover:after { transform: scale(1.2); }
  .disk_banner_1 .inner,   .disk_banner_2 .inner,   .disk_banner_3 .inner,   .disk_banner_4 .inner,   .disk_banner_5 .inner { z-index: 1; position: relative; }
  .disk_banner_1 .inner p,   .disk_banner_2 .inner p,   .disk_banner_3 .inner p,   .disk_banner_4 .inner p,   .disk_banner_5 .inner p { font-size: 20px; text-align: center; color: #fff; }

  .disk_banner_2 { position: relative; overflow: hidden; text-align: center; height: 170px; padding: 20% 0 15% 0; margin: 0 auto 0.4rem auto; width: 90%; }
  .disk_banner_2:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_press.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .disk_banner_2:hover:after { transform: scale(1.2); }

  .disk_banner_3 { position: relative; overflow: hidden; text-align: center; height: 170px; padding: 20% 0 15% 0; margin: 0 auto 0.4rem auto; width: 90%; }
  .disk_banner_3:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_ass.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .disk_banner_3:hover:after { transform: scale(1.2); }

  .disk_banner_4 { position: relative; overflow: hidden; text-align: center; height: 170px; padding: 20% 0 15% 0; margin: 0 auto 0.4rem auto; width: 90%; }
  .disk_banner_4:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_case.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .disk_banner_4:hover:after { transform: scale(1.2); }

  .disk_banner_5 { position: relative; overflow: hidden; text-align: center; height: 170px; padding: 20% 0 15% 0; margin: 0 auto 2rem auto; width: 90%; }
  .disk_banner_5:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/disk_service_logi.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .disk_banner_5:hover:after { transform: scale(1.2); }

  /*--SP事業部--*/

  .sp-title { width: 90%; height: 110px; background: #0037a5; align-items: center; display: flex; justify-content: flex-start; padding: 1rem; margin: 0 auto 0.4rem auto; }
  .sp_banner_1 { position: relative; overflow: hidden; text-align: center; height: auto; padding: 25% 0 15% 0; margin: 0 auto 0.4rem auto; width: 90%; }
  .sp_banner_1:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_kikaku.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .sp_banner_1:hover:after { transform: scale(1.2); }
  .sp_banner_1 .inner,   .sp_banner_2 .inner,   .sp_banner_3 .inner,   .sp_banner_4 .inner,   .sp_banner_5 .inner { z-index: 1; position: relative; }
  .sp_banner_1 .inner p,   .sp_banner_2 .inner p,   .sp_banner_3 .inner p,   .sp_banner_4 .inner p,   .sp_banner_5 .inner p { font-size: 20px; text-align: center; color: #fff; }

  .sp_banner_2 { position: relative; overflow: hidden; text-align: center; height: auto; padding: 30% 0 15% 0; margin: 0 auto 0.4rem auto; width: 90%; }
  .sp_banner_2:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_pop.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .sp_banner_2:hover:after { transform: scale(1.2); }

  .sp_banner_3 { position: relative; overflow: hidden; text-align: center; height: auto; padding: 30% 0 15% 0; margin: 0 auto 0.4rem auto; width: 90%; }
  .sp_banner_3:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_print.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .sp_banner_3:hover:after { transform: scale(1.2); }

  .sp_banner_4 { position: relative; overflow: hidden; text-align: center; height: auto; padding: 25% 0 15% 0; margin: 0 auto 0.4rem auto; width: 90%; }
  .sp_banner_4:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_package.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .sp_banner_4:hover:after { transform: scale(1.2); }

  .sp_banner_5 { position: relative; overflow: hidden; text-align: center; height: auto; padding: 30% 0 15% 0; margin: 0 auto 0.4rem auto; width: 90%; }
  .sp_banner_5:after { position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; background: url(images/sp_service_logi.jpg) no-repeat center center; background-size: cover; transition: all 0.3s ease-out; }
  .sp_banner_5:hover:after { transform: scale(1.2); }

  h3.point { width: auto; background: url("images/icon_point.png") top left no-repeat #fff; color: #0037a5; padding: 0.5rem 4rem; margin: 20px 0 0 20px; background-size: 30px; }

  table.company { width: 100%; border: 1px solid #000; border-collapse: collapse; margin: 2rem auto; }
  table.company th,   table.company td { padding: 20px; text-align: left; vertical-align: middle; }
  table.company th { background: rgba(174, 198, 255, 1); border-right: 0; border-bottom: 1px solid #000; display: block; width: auto; text-align: left; }
  table.company td { background: rgba(255, 255, 255, 1); border-bottom: 1px solid #000; display: block; width: auto; text-align: left; }
  table.company .gmap { height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; }
  table.company .gmap iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }

  .point_box { width: calc(90% - 60px); height: auto; padding: 30px; display: flex; align-items: center; background: #0037a5; text-align: center; margin: 0 auto 2rem auto; }
  .point_box span { font-size: 50px; color: #fff; font-weight: bold; }
  .point_box p { color: #fff; margin: 20px 0 0 0; text-align: center; width: 100%; }

  .flow_box { width: 100%; min-height: 450px; background: #0037a5; text-align: center; padding: 20px 15px; margin: 0 auto 2rem auto; }
  .flow_box img { margin: 0px auto; }
  .flow_box p { color: #fff; margin: 20px 0 0 0; text-align: justify; width: 100%; }

  .sp_box_bg1 { background: url("images/sp_detail_bg01.jpg") top center no-repeat; background-size: cover; }
  .sp_box_bg2 { background: url("images/sp_detail_bg02.jpg") top center no-repeat; background-size: cover; }
  .sp_box_bg3 { background: url("images/sp_detail_bg03.jpg") top center no-repeat; background-size: cover; }
  .sp_box_bg4 { background: url("images/sp_detail_bg04.jpg") top center no-repeat; background-size: cover; }
  .sp_box_bg5 { background: url("images/sp_detail_bg05.jpg") top center no-repeat; background-size: cover; }
  .sp_box { width: 100%; padding: 1rem; margin: 2rem auto; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.6); }

  .sp_box_title { background: #37b7ce; min-height: auto; text-align: center; width: 100%; border-radius: 20px 20px 0px 0px; display: flex; align-items: center; padding: 2rem 0; }
  .sp_box_title h3 { color: #fff; font-size: 2rem; line-height: 150%; text-align: center; width: 100%; }
  .sp_box_detail { width: 100%; background: rgba(255, 255, 255, 0.7); padding: 1rem; }
  .sp_box_detail p { margin: 0; text-align: justify; }

  /*-缶バッジ*/
  h2.h2badge { background-color: #f6ff00; border: 4px solid #000000; border-radius: 1px; box-shadow: 2px 4px 0px 2px #0c0000; padding: 1rem; text-align: center; max-width: 90%; margin: 0 auto; color: #000; line-height: 120%; font-size: 3rem; }
  h2.h2badge-w { background-color: #fff; border: 4px solid #000000; border-radius: 1px; box-shadow: 2px 4px 0px 2px #0c0000; padding: 1rem; text-align: center; width: 90%; margin: 0 auto; color: #000; line-height: 120%; font-size: 3rem; }
  .badge_top { border-bottom: 1px solid #0037a5; background: url("images/badge_head_bg.jpg") top center repeat; height: auto; margin-top: 47px; padding: 85px 0; }
  .badge_pr { display: flex; max-width: 90%; margin: 0 auto 1rem auto; }
  .badge_pr img { width: 33%; }
  .badge_list { background: url("images/list-bk.png"); background-size: auto; padding: 1rem 0; }
  .badge_list .wrap { max-width: 980px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: nowrap; }
  .badge_list .wrap img { width: 150px; height: 70px; }
  .badge_point_box { width: 95%; border: 4px solid #000; background: #fff; text-align: center; padding: 0 0 40px 0; margin: 2rem auto 0 auto; }
  .badge_point_box h3 { padding: 20px 0; width: 100%; }
  .badge_point_box img { margin: 0px auto !important; width: 50%; }
  .badge_point_box p { padding: 20px; font-size: 16px; text-align: center; margin: 20px 0; font-weight: bold; }
  .badge_point_box .line { display: flex; justify-content: space-around; align-items: center; font-weight: bold; flex-wrap: wrap; }
  .badge_point_box .line img { width: 25%; padding: 0.5%; }
  .badge_point_box .line .ura { padding: 1rem 0; width: 50%; }
  .badge_point_box .line .ura img { width: 50%; }
  .badge_point_box .line .omote { padding: 1rem 0; width: 90%; }
  .badge_point_box .line .omote img { width: auto; }
  .badge_point_box .line .omote .pic-omote { width: 56%; }
  .sec-order-list { width: 90%; margin: 0 auto; }
  .badge_info { background-size: auto; padding: 1rem 0; background: rgba(255, 255, 255, 0.66); position: fixed; bottom: 0; width: 100%; z-index: 999; }
  .badge-fix { position: fixed; }
  .info-icon { display: inline-block; width: 30px !important; vertical-align: middle; }
  .order-icon { margin: 0 auto; width: 80px; }
  .badge_info .wrap { max-width: 980px; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; }
  .tel { border: solid 0.5rem #000; border-radius: 0.1rem; padding: 0.5rem; text-align: center; font-size: 1rem; font-weight: bold; background: #fff; width: 30%; display: flex; align-items: center; justify-content: center; }
  .badge_order { border: solid 0.5rem #000; border-radius: 0.1rem; padding: 0.5rem; text-align: center; font-size: 1rem; background: #f6ff00; width: 30%; font-weight: bold; }
  .temp { border: solid 0.5rem #000; border-radius: 0.1rem; padding: 0.5rem; text-align: center; font-size: 1rem; background: #79bcef; width: 30%; font-weight: bold; margin: 0; }
  .mail { border: solid 0.5rem #000; background: #f6ff00; border-radius: 0rem; padding: 1rem 0; margin: 0.5rem; align-content: stretch; }
  .badge_form { background: #fff; border: solid 0.5rem #000; border-radius: 0.5rem; padding: 10px; max-width: 900px; margin: 0 auto; font-weight: bold; width: 90%; }
  .big-lot { font-size: 2rem; text-align: center; }
  .big-lot span { font-size: 1.6rem; text-align: center; padding: 0 0 2rem 0; }
  .big-lot-btn { background: #f6ff00; border: solid 0.5rem #000; padding: 3rem 0; position: relative; display: flex; align-items: center; justify-content: center; font-size: 2rem; max-width: 600px; margin: 0 auto; font-weight: bold; }
  .btn-pic { position: absolute; left: 1rem; top: 0; bottom: 0; width: 50px; display: none; }
  .option-title { background: #fe8cff; border-bottom: solid; padding: 1rem 0; border-top: 0; border-left: 0; border-right: 0; }
  .option-lap { background: #fff; border: solid 0.5rem #000; }
  .option-lap-box { width: 95%; background: #fff; border: solid 0.5rem #000; text-align: center; margin: 1rem auto; }
  .option-lap-box img { margin: 2rem auto; }
  h3.price { background: #fe8cff; border-radius: 4rem; text-align: center; border: solid 0.5rem #000; margin: 2rem auto; display: flex; justify-content: center; align-items: center; padding: 1rem 0; width: 100%; }
  h3.price p { padding: 0 !important; text-align: center; margin: 0; font-size: 16px; }
  .flow-box { background: #fff; border: solid 0.5rem #000; max-width: 980px; margin: 2rem auto; padding: 0 0 4rem 0; width: 95%; }
  .flow-box p { padding: 0.5rem; }
  .badge_flow { border: solid 0.5rem #000; background: #96e0e4; text-align: center; width: 90%; margin: 2rem auto 0 auto; padding: 1rem 0; }
  .flow-flex { width: 90%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
  .flow-flex img { margin: 0 auto; width: auto; }
  .flow-flex p { margin: 0; }
  .flow-arrow { margin: 0 auto; width: 30px; }
  h3.flow-title { background: #fe8cff; border-bottom: solid; padding: 1rem; border-top: 0; border-left: 0; border-right: 0; }
  .kiyaku-box { background: #fff; border: solid 0.5rem #000; max-width: 980px; margin: 2rem auto; width: 95%; }
  .atent-in { padding: 1rem; overflow-y: scroll; height: 200px; }
  .atent-in p { padding-left: 1em; text-indent: -1em; }
  .at-btn { text-align: center; }
  .badge-form-btn { background: #f6ff00; border: solid 0.5rem #000; position: relative; display: flex; align-items: center; justify-content: flex-start; font-size: 2rem; max-width: 600px; margin: 1rem auto; font-weight: bold; width: 90%; padding: 1rem; }
  .form-btn-icon { width: 60px; padding: 1rem; height: auto; }
  .sp_box { width: 90%; padding: 1rem; margin: 2rem auto; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.6); }
  .sp_box_detail { width: 94%; background: rgba(255, 255, 255, 0.7); padding: 1rem; }
  .bade_arrow { position: relative; width: 95%; height: auto; background: #ffffff; padding: 10px; text-align: left; border: 5px solid #000000; font-size: 1.8rem; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: flex; align-items: center; margin: 0 auto 6rem auto; flex-wrap: wrap; }
  .bade_arrow img { width: 100px; margin: 0 auto 1rem auto; }
  .bade_arrow p { margin: 0; text-align: justify; }
  .bade_arrow:after,   .bade_arrow:before { border: solid transparent; content: ""; height: 0; width: 0; pointer-events: none; position: absolute; top: 100%; left: 50%; }
  .bade_arrow:after { border-color: rgba(255, 255, 255, 0); border-top-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-right-width: 10px; margin-left: -10px; border-top-color: #ffffff; }
  .bade_arrow:before { border-color: rgba(0, 0, 0, 0); border-top-width: 15px; border-bottom-width: 15px; border-left-width: 15px; border-right-width: 15px; margin-left: -15px; margin-top: 5px; border-top-color: #000000; }
  .tamp-sample { max-width: 560px; width: 90%; margin: 0 auto; }

  .bade_arrow02 { position: relative; width: 95%; height: auto; background: #ffffff; padding: 10px; text-align: left; border: 5px solid #000000; font-size: 1.8rem; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: flex; align-items: center; margin: 0 auto 4rem auto; flex-wrap: wrap; }
  .bade_arrow02 img { width: 100px; margin: 0 auto 1rem auto; }
  .bade_arrow02 p { margin: 0; text-align: justify; }
  .bade_arrow02:after,   .bade_arrow02:before { border: solid transparent; content: ""; height: 0; width: 0; pointer-events: none; position: absolute; top: 100%; left: 50%; }
  .bade_arrow02:after { border-color: rgba(255, 255, 255, 0); border-top-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-right-width: 10px; margin-left: -10px; border-top-color: #ffffff; }
  .bade_arrow02:before { border-color: rgba(0, 0, 0, 0); border-top-width: 15px; border-bottom-width: 15px; border-left-width: 15px; border-right-width: 15px; margin-left: -15px; margin-top: 5px; border-top-color: #000000; }

  .bade_last { position: relative; width: 95%; height: auto; background: #ffffff; padding: 10px; text-align: left; border: 5px solid #000000; font-size: 1.8rem; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; display: flex; align-items: center; margin: 0 auto 2rem auto; flex-wrap: wrap; }
  .bade_last img { width: 100px; margin: 0 auto 1rem auto; }
  .bade_last p { margin: 0; text-align: justify; }
  .price-btn { color: #000; font-size: 2rem; font-weight: bold; background: #76ddff; padding: 18px 30px; border-radius: 1rem; transition: 0.3s; border: solid 0.2rem #000; margin: 0 auto; text-align: center; max-width: 550px; width: 90%; }
  .dl-btn { color: #000; font-size: 2rem; font-weight: bold; background: #76ddff; padding: 10px; border-radius: 2rem; transition: 0.3s; border: solid 0.5rem #000; width: 100%; margin: 0 auto; text-align: left; max-width: 450px; display: flex; align-items: center; justify-content: space-around; }
  .dl-btn:hover { background: #f6ff00; border: solid 0.5rem #000; }
  .dl-btn img { width: 80px; margin: 1rem !important; }
  .badge_point_box { max-width: 980px; border: 4px solid #000; background: #fff; text-align: center; padding: 0 0 40px 0; margin: 1rem auto 0 auto; }
  .badge_point_box h3 { background: #fe8cff; padding: 23px; width: 30%; border-bottom: 4px solid #000; margin: 2rem auto; }
  .badge_point_box img { margin: 0px auto !important; }
  .badge_point_box p { padding: 10px; font-size: 1.6rem; text-align: justify; margin: 20px 0; font-weight: bold; }
  .badge_left { width: 100%; }
  .badge_right { width: 100%; background: #fff; border: 5px solid #000; padding: 50px 20px; }
  .badge_guide1 { background: url("images/badge/badge_guide_1.png") top center no-repeat; width: 100%; height: 184px; display: flex; align-items: center; padding: 0px 20px 50px 130px; margin: 0 0 30px 0; background-size: contain; }
  .badge_guide2 { background: url("images/badge/badge_guide_2.png") top center no-repeat; width: 100%; height: 184px; display: flex; align-items: center; padding: 0px 20px 50px 130px; margin: 0 0 30px 0; background-size: contain; }
  .badge_guide3 { background: url("images/badge/badge_guide_3.png") top center no-repeat; width: 100%; height: 244px; display: flex; align-items: center; padding: 0 20px 50px 130px; margin: 0 0 30px 0; background-size: contain; }
  .badge_guide4 { background: url("images/badge/badge_guide_4.png") top center no-repeat; width: 100%; height: 154px; display: flex; align-items: center; padding: 0px 20px 20px 130px; margin: 0; background-size: contain; }
  .badge_guide1 p,   .badge_guide2 p,   .badge_guide3 p,   .badge_guide4 p { margin: 0; }
  .badge_right h3 { font-size: 2rem; font-weight: bold; text-align: left; }
  table.badge_postage { width: 100%; border: 5px solid #000; border-collapse: collapse; margin: 0 0 30px 0; }
  table.badge_postage td { background: #f6ff00; text-align: center; padding: 10px; border-right: 5px solid #000; border-bottom: 5px solid #000; font-weight: bold; font-size: 1.8rem; }
  table.badge_postage th { background: #fff; text-align: center; padding: 15px; font-size: 20px; }
  .dltemplate p { font-size: 20px; text-align: center; margin: 30px 0; }
  .dltemplate img { margin: 30px auto; }
  .dl_att { background: #37b7ce; padding: 10px; border-radius: 10px; margin: 30px 0 0 0; }
  .dl_att p { margin: 0px; color: #fff; text-align: left; font-size: 18px; }
  .guide-info { background-size: auto; padding: 1rem 0; background: rgba(255, 255, 255, 0.66); position: fixed; bottom: auto; width: 100%; z-index: 999; top: 47px; }
  .guide-info .wrap { width: 98%; margin: 0 auto; display: flex; justify-content: space-around; }
  .guide-box { background: #fff; border: solid 0.5rem #000; margin: 4rem auto; width: 90%; }
  .guide-box p { padding: 1rem; }
  .guide-left { width: 100%; }
  .guide-right { width: 100%; }
  
  .guide-flex { display: flex; justify-content: space-around; flex-wrap: wrap; }
  #kihon { margin: 6rem auto 2rem auto; }
  .guide-btn { background: rgba(255, 174, 0, 1); border: solid 0.1rem; padding: 0.1rem; font-weight: bold; text-align: center; }
  h3.guide-title { background: #fe8cff; border-bottom: solid; padding: 1rem; border-top: 0; border-left: 0; border-right: 0; text-align: center; font-size: 2rem; }
  h4.guide-subtitle { text-align: center; font-weight: bold; font-size: 1.8rem; }
  h4.guide-subtitle span { font-size: 1.6rem; }

  /*recruit*/
  .not-recruit { background: rgba(37, 37, 37, 0.77); color: #fff; position: absolute; z-index: 0; height: 100%; width: 100%; line-height: 1400px; text-align: center; font-size: 25px; }

/* service feature / product */
  .feature-card__content { display: block;}
  .feature-card__content p { margin: 0 0 20px 0;}
  .feature-card__content img { width: 55%; margin: 0 auto;}
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; width: 90%;}
  .product-grid__heading { min-height: 120px; padding: 15px;}
  .product-grid__heading span { font-size: 2.4rem;}
  .product-grid__item span { font-size: 1.5rem;}
  .detail-panel { width: calc(100% - 40px); padding: 20px; margin: 20px auto 50px auto;}
  .detail-panel__inner { width: 100%;}
  .detail-panel__title { min-height: auto; width: 100%; border-radius: 10px 10px 0 0; padding: 15px 0;}
  .detail-panel__title h3 { font-size: 18px; line-height: 150%;}
  .detail-panel__body { width: calc(100% - 40px); padding: 20px; display: block;}
  .detail-panel__body p { margin: 0 0 20px 0;}
  .detail-panel__body img { width: 100%; margin: 0;}

/* design */
.company_infocon{width:  calc(100% - 40px); padding: 20px;}

/* badge */
.badge_items { display: flex; flex-wrap: wrap; width: 95%; margin: 50px auto; list-style: none; gap: 2.9%;}
.badge_items li{width:100%; display: block;}

  /* contact */
  .contact-box { background: #fff; border: solid thin #0037a5; width: 95%; max-width: 980px; margin: 0 auto; padding: 1rem; }
  .contact-submit { background: #0037a5; padding: 2rem 1rem; max-width: 350px; margin: 0 auto; width: 95%; color: #fff; border: none; border-radius: 0; }
  .contact-submit:hover { background: #fff; border: solid thin #0037a5; color: #0037a5; }
  .contact-name,   .contact-email { width: 100%; }
  .contact-txt { width: 100%; }

  footer { background: #0037a5; padding: 2rem 0; }
  footer a { transition: 1s; }
  footer a:hover { opacity: 0.5; }
  footer .menu { width: 95%; margin: 0px auto; float: none; justify-content: flex-start; display: flex; flex-wrap: wrap; }
  footer .menu > li { display: block; }
  footer .menu > li a { color: #fff; padding: 0; text-decoration: none; }
  footer .menu > li a:hover { color: #fff; }
  .footer_companyinfo { background: url("images/footer_logo.png") top left no-repeat; width: 95%; margin: 0px auto; padding: 0 0 0 70px; font-size: 14px; line-height: 16px; color: #fff; }
  .footer-info { display: flex; max-width: 1200px; margin: 0 auto; width: 90%; justify-content: space-between; align-items: center; flex-wrap: wrap; }
  .footer_companyinfo { background: url("images/footer_logo.png") bottom left no-repeat; width: auto; margin: 0; padding: 0 0 0 70px; font-size: 14px; line-height: 16px; color: #fff; display: block; flex-grow: 1; }
  .copyright { border-top: 1px solid #fff; text-align: center; padding: 1rem; margin: 30px 0 0 0; color: #fff; font-size: 14px; }
  .company-business { display: block; }
  .company-business__label { display: inline; margin-right: 0; }
  .company-business__text { display: inline; }
}


/* accent theme */
.theme-accent { --accent-color: #0037a5;}
.theme-accent--pink { --accent-color: #EA3F70;}
.theme-accent h2 { color: var(--accent-color);}
.theme-accent .product-grid__heading { background: var(--accent-color);}
.theme-accent .detail-panel__title { background: var(--accent-color);}
.theme-accent .disk_box { border-color: var(--accent-color);}
.theme-accent .left_box { background: var(--accent-color);}
.theme-accent .company_infocon { border-color: var(--accent-color);}
.theme-accent .company_infocon h2 { color: var(--accent-color);}
.theme-accent .service_top { border-color: var(--accent-color);}
.theme-accent .detail-panel__body p { margin: 0 0 20px 0;}
.theme-accent .company_infocon p { line-height: 1.8;}
.theme-accent .company_infocon h2 { margin: 0 0 25px 0;}

@media (max-width: 999px) {
  .theme-accent .company_infocon p { line-height: 1.8;}
}

.company-info__body { text-align: justify;}
.company-info__body p { margin: 0; text-align: left; line-height: 1.8;}
.company-info__contact { display: flex; gap: 20px; flex-wrap: wrap;}
.company-info__business { display: flex; align-items: flex-start; line-height: 1.8;}
.company-info__label { flex: 0 0 auto; margin-right: 0.5em;}
.company-info__text { display: block; min-width: 0;}

@media (max-width: 999px) {
  .company-info__contact { display: block;}
  .company-info__contact span { display: block;}
  .company-info__business { display: flex;}
  .company-info__text { overflow-wrap: anywhere;}
}

/* factory accent */
.theme-accent--orange { --accent-color: #EA673F;}
.detail-panel__body--text { display: block;}
.detail-panel__body--text p { width: 100%; margin: 0;}

@media (max-width: 999px) {
  .detail-panel__body--text { display: block;}
  .detail-panel__body--text p { margin: 0;}
}

/* badge page headings */
.heading-character { width: 100%;}
.heading-character h2 { margin: 0 auto;}
.heading-character__text { position: relative; display: inline-block;}
.heading-character__text img { position: absolute; z-index: 2; width: auto; max-width: none; margin: 0;}
.heading-character--hero .heading-character__text img { right: calc(100% + 15px); top: 50%; width: 72px; transform: translateY(-50%);}
.heading-character--section { margin: 0 auto 30px auto;}
.heading-character--section .heading-character__text img { left: calc(100% + 15px); top: 50%; width: 58px; transform: translateY(-50%);}
.badge-hero .heading-character--hero { margin: 0 auto;}
.badge-page .badge-hero .heading-character__text { color: #0037a5; font-size: 4rem;}
.badge-page .badge-hero .heading-character__text > span { color: #000; font-size: 2.4rem;}
.badge-page .badge_items { margin-top: 30px;}
.badge-page .badge-hero h2 > .heading-character__text { color: #0037a5; font-size: 6rem; line-height: 1.2;}


@media (max-width: 999px) {
  .heading-character--hero .heading-character__text img { right: calc(100% + 8px); top: 50%; width: 48px; transform: translateY(-50%);}
  .heading-character--section { margin: 0 auto 20px auto;}
  .heading-character--section .heading-character__text img { left: calc(100% + 8px); top: 50%; width: 44px; transform: translateY(-50%);}
  .badge-page .badge-hero .heading-character__text { color: #0037a5; font-size: 4rem;}
  .badge-page .badge-hero .heading-character__text > span { color: #000; font-size: 2.4rem;}
  .badge-page .heading-character--section h2 { color: #0037a5;}
  .badge-page .badge_items { width: 95%; margin: 20px auto 50px auto; gap: 3%;}
  .badge-page .badge_items li { width: 48.5%; margin-bottom: 30px;}
  .badge-page .badge_items li h3 { padding: 0 5px; font-size: 1.4rem; line-height: 1.5;}
  .heading-character--hero .heading-character__text img { display: none;}
}