@charset "UTF-8";

:root {
  --main-color: #174EBB;
  --gray-color: #707070;
}

.pc {display: block;}
.sph {display: none;}
@media screen and (max-width: 767px) {
.pc {display: none;}
.sph {display: block;}
}

/*-------------------------
__base_style
-------------------------*/
html{visibility:hidden;overflow-x:hidden;}
html.wf-active,
html.wf-inactive{visibility:visible;}
body{font-family:"Noto Sans JP", sans-serif;}

#wrap{overflow-y:hidden;}

/*-------------------------
__header
-------------------------*/
#header{background-color:rgba(255, 255, 255, 0);height:150px;position:relative;z-index:10;}
#header .header_back #logo{font-size:1px;line-height:0;height:auto;width:340px;position:absolute;top:50%;left:40px;transform:translateY(-50%);}
#header .header_back #logo a{display:block;}
#header .header_back #logo img{height:auto;width:100%;}

#header .header_menu{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);}
#header .header_menu ul{display:flex;position:absolute;left:calc(50% + 80px);top:50%;transform:translate(-50%, -50%);}
#header .header_menu ul li{font-size:18px;line-height:1.6;font-family: "Montserrat", sans-serif;font-weight: 700;}
#header .header_menu ul li:not(:last-child){margin-right:50px;}
#header .header_menu ul li a{text-decoration:none;}
#header .header_menu ul li a.text{color:var(--gray-color);transition:color .3s;}
@media screen and (min-width: 768px) {
  #header .header_menu ul li a.text:hover{color:var(--main-color);}
}
#header .header_menu ul li.current a.text{color:var(--main-color);}

#header .contact_button{position:absolute;right:40px;top:50%;transform:translateY(-50%);font-family: "Montserrat", sans-serif;font-weight: 700;}
#header .contact_button a{font-size:20px;font-weight:700;color:#FFF;text-align:center;text-decoration:none;letter-spacing:0.1em;display:block;background-color:var(--main-color);width:184px;padding:12px 0;box-sizing:border-box;border:solid 2px var(--main-color);border-radius:50px;transition:color .3s, background-color .3s;}
@media screen and (min-width: 768px) {
  #header .contact_button a:hover{color:var(--main-color);background:none;}
}

#header.scrolled{background-color:rgba(255, 255, 255, 0.9);height:70px;}
#header.scrolled #logo{width:220px;}

#drawer{display:none;}

@media screen and (max-width: 1280px) {
  #header{height:11.718vw;}
  #header .header_back #logo{width:26.562vw;left:3.125vw;}

  #header .header_menu ul{left:calc(50% + 6.25vw);}
  #header .header_menu ul li{font-size:1.406vw;}
  #header .header_menu ul li:not(:last-child){margin-right:3.906vw;}

  #header .contact_button{right:3.125vw;}
  #header .contact_button a{font-size:1.562vw;width:14.375vw;padding:0.937vw 0;border-width:0.156vw;}

  #header.scrolled{height:5.468vw;}
  #header.scrolled #logo{width:17,187vw;}
}

@media screen and (max-width: 767px) {
  #header{height:70px;}

  #header .header_back #logo{width:205px;left:20px;}

  #header .toggle_btn{position:fixed;cursor:pointer;}
  #header .toggle_btn.open {height:48px;width:48px;right:10px;top:10px;z-index:2;transition:background-color .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);transition:1s;}
  #header .toggle_btn.open span,
  #header .toggle_btn.open::before,
  #header .toggle_btn.open::after{content:"";position:absolute;top:calc(50% - 1px);left:25%;width:50%;border-bottom:2px solid var(--main-color);transition:transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);}
  #header .toggle_btn.open::before{transform:translateY(-8px);}
  #header .toggle_btn.open::after{transform:translateY(8px);}
  #header .toggle_btn.close{inset:0;pointer-events:none;z-index:1;transition:background-color .6s;}
  #header #drawer:checked + .toggle_btn.open span{transform:scaleX(0);}
  #header #drawer:checked + .toggle_btn.open::before{transform:rotate(135deg) scaleX(1.2);border-bottom:2px solid #fff;}
  #header #drawer:checked + .toggle_btn.open::after{border-bottom:2px solid #fff;transform:rotate(-135deg) scaleX(1.2);}
  #header #drawer:checked ~ .toggle_btn.close{pointer-events:auto;}

  #header.scrolled{height:50px;}
  #header.scrolled #logo{width:180px;}
  #header.scrolled .toggle_btn.open{top:1px;transition:1s;}

  #header .menu{background:rgba(23, 78, 187, .7);height:100%;width:249px;margin:0;padding:75px 25px 0;box-sizing:border-box;overflow:auto;position:fixed;right:0;top:0;z-index:1;transform:translateX(100%);transition:transform .6s cubic-bezier(0, 0, 0, 1);}
  #header .menu ul{text-align:left;}
  #header .menu li{font-size:14px;line-height:1.4;list-style:none;border-bottom:1px solid #fff;
  }
  #header .menu li:first-child{border-top:1px solid #fff;}
  #header .menu a{color:#fff;display:block;padding:12px 5px;text-decoration:none;}
  #header #drawer:checked ~ .menu {transform:none;}
  #header .menu li p{margin:0 0 0 1em;}
  #header .menu li p a{padding:0 5px 12px;}
}

/*-------------------------
__content
-------------------------*/
#content .topic_path{width:1200px;margin:0 auto;}
#content .topic_path ul{display:flex;justify-content:flex-end;}
#content .topic_path li{font-size:14px;line-height:1.4;color:var(--main-color);}
#content .topic_path li:before{content:"｜";font-weight:400;color:#000;margin-left:5px;margin-right:5px;}
#content .topic_path li:first-child:before{content:"";margin:0;}
#content .topic_path li a{font-weight:400;color:var(--gray-color);text-decoration:none;}
#content .topic_path li a:hover{text-decoration:underline;}

@media screen and (max-width: 1280px) {
  #content .topic_path{width:93.75vw;}
  #content .topic_path li{font-size:1.093vw;}
  #content .topic_path li:before{margin-left:0.39vw;margin-right:0.39vw;}
}

@media screen and (max-width: 767px) {
  #content .topic_path{display: none;}
}

#content.lower{padding:20px 0 0;position:relative;}

#main{display:block;}

#main p.en{font-size:300px;font-weight:300;color:var(--main-color);letter-spacing:0.15em;opacity:.06;position:absolute;left:0;bottom:calc(100% - 350px);transform:rotate(90deg);transform-origin:bottom left;white-space:nowrap;pointer-events:none;}

#main .background {background: #F5F5F5;}

#main .contents {width:1200px;margin:0 auto;padding:80px 0 160px;}
#main .contents .contents_title{text-align:left;margin:0 0 80px;position:relative;}
#main .contents .contents_title .contents_title_en{font-family:"Noto Sans JP", sans-serif;font-size:50px;line-height:1.2;font-weight:100;color:var(--main-color);letter-spacing:0.05em;margin:0 0 25px;}
#main .contents .contents_title .contents_title_jp{font-size:56px;font-weight:500;letter-spacing:.2em;margin:0 0 35px;padding: 0 0 35px;border-bottom: 1px solid var(--gray-color);position: relative;}
#main .contents .contents_title .contents_title_jp:before {content: "";position: absolute;left: 0;bottom: -1px;width: 140px;height: inherit;border-bottom: 1px solid var(--main-color);}

#main .contents .contents_title .txt{font-size:24px;line-height:1.5;}
#main .contents .contents_title .txt02{font-size:18px;line-height:2;}
#main .contents .contents_title .txt02.mt{margin:40px 0 0;}

#main .contents .contents_title .contents_title_service_menu{display:flex;position:absolute;right:0;top:100px;}
#main .contents .contents_title .contents_title_service_menu li{height:35px;width:35px;}
#main .contents .contents_title .contents_title_service_menu li:not(:last-child){margin-right:28px;}
#main .contents .contents_title .contents_title_service_menu li a{display:block;height:100%;width:100%;position:relative;}
#main .contents .contents_title .contents_title_service_menu li a::before{content:"";display:block;height:100%;width:100%;border-radius:20px;transition:transform .2s cubic-bezier(0.25, 0, 0, 1);}
#main .contents .contents_title .contents_title_service_menu li:first-child a::before{background-color:#174ebb;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(2) a::before{background-color:#f52b39;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(3) a::before{background-color:#1eb55a;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(4) a::before{background-color:#1caec5;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(5) a::before{background-color:#b11f98;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(6) a::before{background-color:#ecad19;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(7) a::before{background-color:#1808a4;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(8) a::before{background-color:#db5683;}
@media screen and (min-width: 768px) {
  #main .contents .contents_title .contents_title_service_menu li a:hover::before{
    transform: scale(1.2);
  }
}
#main .contents .contents_title .contents_title_service_menu li a::after{font-size:15px;font-weight:700;display:block;white-space:nowrap;opacity:0;visibility:hidden;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);transition:opacity .2s cubic-bezier(0.25, 0, 0, 1), bottom .2s cubic-bezier(0.25, 0, 0, 1);}
#main .contents .contents_title .contents_title_service_menu li:first-child a::after{content:"マニュアル制作";color:#174ebb;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(2) a::after{content:"クリエイティブ";color:#f52b39;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(3) a::after{content:"オフセット印刷";color:#1eb55a;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(4) a::after{content:"デジタル印刷";color:#1caec5;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(5) a::after{content:"製本・加工";color:#b11f98;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(6) a::after{content:"アッセンブリ・物流";color:#ecad19;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(7) a::after{content:"マニュサポ";color:#1808a4;}
#main .contents .contents_title .contents_title_service_menu li:nth-child(8) a::after{content:"メイシカル";color:#db5683;}
@media screen and (min-width: 768px) {
  #main .contents .contents_title .contents_title_service_menu li a:hover::after{
    opacity:1;visibility:visible;bottom:calc(100% + 15px);
  }
}

#main .sub_title{font-size:28px;font-weight:700;color:var(--main-color); text-align:left;margin:0 0 20px;}
#main .sub_title2{font-size:28px;font-weight:700;text-align:left;margin:0 0 40px;padding:0 0 18px;border-bottom:1px solid var(--gray-color);}

@media (max-width: 1280px) {
  #content.lower{padding:1.562vw 0 0;}

  #main p.en{font-size:23.4375vw;bottom:calc(100% - 20.312vw);}

  #main .contents{width:93.75vw;padding:6.25vw 0 12.5vw;}
  #main .contents .contents_title{margin:0 0 6.25vw;}
  #main .contents .contents_title .contents_title_en{font-size:3.906vw;margin:0 0 1.953vw;}
  #main .contents .contents_title .contents_title_jp{font-size:4.375vw;margin:0 0 2.734vw;padding: 0 0 2.734vw;}
  #main .contents .contents_title .contents_title_jp:before {width:10.93vw;}
  #main .contents .contents_title .txt{font-size:1.875vw;}
  #main .contents .contents_title .txt02{font-size:1.406vw;}
  #main .contents .contents_title .txt02.mt{margin:3.125vw 0 0;}

  #main .contents .contents_title .contents_title_service_menu{top:7.812vw;}
  #main .contents .contents_title .contents_title_service_menu li{height:2.734vw;width:2.734vw;}
  #main .contents .contents_title .contents_title_service_menu li:not(:last-child){margin-right:2.187vw;}
  #main .contents .contents_title .contents_title_service_menu li a::after{font-size:1.171vw;bottom:calc(100% + 0.39vw);}

  #main .sub_title{font-size:2.187vw;margin:0 0 1.562vw;}
  #main .sub_title2{font-size:2.187vw;margin:0 0 3.125vw;padding:0 0 1.406vw;}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  #main .contents .contents_title .contents_title_service_menu li a:hover::after{
    opacity:1;visibility:visible;bottom:calc(100% + 1.171vw);
  }
}


@media screen and (max-width: 767px) {
  #content.lower {padding:20px 0 0;}

  #main p.en{font-size:20.30vw;bottom:calc(100% - 165px);letter-spacing:.1em;left: 10px;}

  #main .contents{width:auto;padding:0 40px 40px;}
  #main .contents .contents_title{margin:0 0 25px;}
  #main .contents .contents_title .contents_title_en{font-size:16px;margin:0 0 10px;}
  #main .contents .contents_title .contents_title_jp{font-size:14px;font-weight:700;letter-spacing:0;margin: 0 0 25px;padding:0 0 20px;}
  #main .contents .contents_title .contents_title_jp:before {width: 14.41vw;}
  #main .contents .contents_title .txt{font-size:12px;}
  #main .contents .contents_title .txt02{font-size:12px;}
  #main .contents .contents_title .txt02.mt{margin:20px 0 0;}

  #main .contents .contents_title .contents_title_service_menu{display:none;}

  #main .sub_title{font-size:14px;}
  #main .sub_title2{font-size:14px;font-weight:500;padding:0 0 15px;margin:0 0 20px;}

}

/*-------------------------
__footer
-------------------------*/
.footer_banner{width:1200px;margin:0 auto;position:relative;z-index:1;}
.footer_banner ul{display:flex;}
.footer_banner ul li{background:rgba(27,78,187,.2);height:210px;width:50%;border-radius:10px;position:relative;}
.footer_banner ul li:nth-child(2){background:rgba(27,78,187,.1);}
.footer_banner ul li a{color:var(--main-color);text-decoration:none;display:flex;justify-content:center;align-items:center;height:100%;width:100%;}
.footer_banner ul li dl{transition:transform 0.2s;}
@media screen and (min-width: 768px) {
  .footer_banner ul li a:hover dl{transform: scale(1.1);}
}
.footer_banner ul li dl dt{font-size:48px;margin:0 0 20px;font-family: "Montserrat", sans-serif;font-weight: 700;}
.footer_banner ul li dl dd{font-size:20px;}

#footer{background:rgba(27,78,187,1);padding:65px 0;position:relative;z-index:1;}
#footer .footer_back{width:1200px;margin:0 auto;}
#footer .footer_back > .inner{display:flex;}
#footer .footer_back .data{width:50%;}
#footer .footer_back .data .footer_logo{font-size:1px;line-height:0;width:300px;margin:0 0 30px;}
#footer .footer_back .data .footer_logo img{height:auto;width:100%;}
#footer .footer_back .data .footer_txt{font-size:14px;line-height:2.2;color:#fff;text-align:left;}
#footer .footer_back .footer_menu{width:50%;}
#footer .footer_back .footer_menu ul li{font-size:18px;line-height:1.8;color:#fff;text-align:left;font-family: "Montserrat", sans-serif;font-weight: 700;}
#footer .footer_back .footer_menu ul li:not(:last-child){margin:0 0 15px;}
#footer .footer_back .footer_menu ul li a {color:#fff;text-decoration: none;transition:.3s;}
@media screen and (min-width: 768px) {
  #footer .footer_back .footer_menu ul li a:hover {opacity:0.5;}
}
#footer .footer_back .footer_menu .privacy{font-size:14px;line-height:1.8;text-align:right;margin-top:-1.8em;}
#footer .footer_back .footer_menu .privacy a{color:#FFF;text-decoration:none;transition:.3s;}
@media screen and (min-width: 768px) {
  #footer .footer_back .footer_menu .privacy a:hover {opacity:0.5;}
}
#footer .footer_back .copyright{font-size:12px;line-height:1.2;color:#fff;text-align:left;margin-top:-1.8em;}

.re_top{display:none;position:fixed;z-index:999;right:15px;bottom:15px;}
.re_top a{display:flex;justify-content:center;align-items:center;background-color:#98b9f5;height:60px;width:60px;border-radius:30px;transition:background-color .3s;}
@media only screen and (min-width: 767px) {
  .re_top a:hover{background-color:#c1d4f7;}
}
.re_top a::after{content:"";display:block;height:10px;width:10px;margin-bottom:-5px;border:2px solid;border-color:#fff #fff transparent transparent;transform:rotate(-45deg);}


@media screen and (max-width: 1280px) {
  .footer_banner{width:93.75vw;}
  .footer_banner ul li{height:16.406vw;border-radius:0.781vw;}
  .footer_banner ul li dl dt{font-size:3.75vw;margin:0 0 1.562vw;}
  .footer_banner ul li dl dd{font-size:1.562vw;}

  #footer{padding:5.078vw 0;}
  #footer .footer_back{width:93.75vw;}
  #footer .footer_back .data .footer_logo{width:23.437vw;margin:0 0 2.343vw;}
  #footer .footer_back .data .footer_txt{font-size:1.093vw;}
  #footer .footer_back .footer_menu ul li{font-size:1.406vw;}
  #footer .footer_back .footer_menu ul li:not(:last-child){margin:0 0 1.171vw;}
  #footer .footer_back .footer_menu .privacy{font-size:1.093vw;}
  #footer .footer_back .copyright{font-size:0.937vw;}

  .re_top{right:1.171vw;bottom:1.171vw;}
  .re_top a{height:4.687vw;width:4.687vw;border-radius:2.343vw;}
  .re_top a::after{height:0.781vw;width:0.781vw;margin-bottom:-0.390vw;border-width:0.156vw;}
}

@media screen and (max-width: 767px) {
  .footer_banner{width:auto;margin:0;}
  .footer_banner ul{display:block;}
  .footer_banner ul li{height:100px;width:auto;border-radius:10px;}
  .footer_banner ul li dl dt {font-size:24px;margin:0 0 10px;}
  .footer_banner ul li dl dd {font-size:14px;}

  #footer{background:rgba(27,78,187,1);padding:40px 0;}
  #footer .footer_back{width:auto;margin:0 40px;}
  #footer .footer_back > .inner{display:block;}
  #footer .footer_back .data{width:auto;padding:0 0 20px;}
  #footer .footer_back .data .footer_logo{width:100%;max-width:300px;margin:0 0 20px;}
  #footer .footer_back .data .footer_txt{font-size:14px;}
  #footer .footer_back .footer_menu {width:auto;}
  #footer .footer_back .footer_menu ul li{font-size:14px;}
  #footer .footer_back .footer_menu ul li:not(:last-child){margin:0 0 20px;}
  #footer .footer_back .footer_menu .privacy{font-size:14px;text-align:left;margin:40px 0 0;}
  #footer .footer_back .copyright{font-size:10px;margin:40px 0 0;}

  .re_top{right:12px;bottom:12px;}
  .re_top a{height:50px;width:50px;border-radius:25px;}
  .re_top a::after{height:8px;width:8px;margin-bottom:-4px;border-width:2px;}
}

@media screen and (max-width: 374px) {
  #footer .footer_back .data .footer_txt{font-size:3.733vw;}
  #footer .footer_back .copyright{font-size:2.666vw;}
}