@charset "UTF-8";
/* 
Theme Name: 継続支援B型 インク(ink)
Description: 継続支援B型 インク(ink)様用のテンプレートです
Version: 1.0
Author: M.Sugimoto
*/

html{
  scroll-behavior: smooth;
}

body {
  font-family: 'M PLUS 2', sans-serif;
  font-size: 62.5%;
  color: #333333;
}


/* header */

header{
  width: 100%;
  height: min(22.564vw, 88px);
  background-color: #004da0;
  position: fixed;
  top: 0;
  z-index: 100;
}

.h_box{
  box-sizing: border-box;
  width: max(81.5vw, calc(100% - 72.151px));
  height: min(22.564vw, 88px);
  padding: min(2.82vw, 11px) min(3.077vw, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.h_logo img{
  width: min(31.282vw, 122px);
}

.h_icon{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 min(3.077vw, 12px);
}

.h_icon a{
  display: inline-block;
  border-radius: 50%;
}

.h_icon div{
  background-color: #ffffff;
  width: min(11.65vw, 45.435px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.h_mail div img{
  width: min(7.576vw, 29.546px);
  height: auto;
}

.h_line div img{
  width: min(6.99vw, 27.26px);
  height: auto;
}

.h_icon a:hover{
  filter: brightness(90%);
  transition: 0.2s ease-in-out;
}

#g-nav {
  position: fixed;
  z-index: 999;
  top: -120%;
  left: 0;
  width: 100%;
  height: min(77.477vw, 302.16px);
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.6s;
}

#g-nav.panelactive {
  top: 0;
}

#g-nav ul {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#g-nav li {
  box-sizing: content-box;
  background-color: transparent;
  line-height: min(6.6308vw, 25.86px);
  border: none;
  font-size: min(4.103vw, 16px);
}

#g-nav li:first-child{
  padding-top: min(5.641vw, 22px);
}

#g-nav li:not(:last-child) {
  padding-bottom: min(5.128vw, 20px);
}

#g-nav li:last-child{
  padding-bottom: min(6.41vw, 25px);
}

#g-nav li a {
  color: #004da0;
  font-weight: 800;
  text-decoration: none;
  position: relative;
}

#g-nav li a::after {
  position: absolute;
  bottom: max(-0.769vw, -3px);
  left: 0;
  content: "";
  width: 100%;
  height: min(0.513vw, 2px);
  background: #fbc600;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
#g-nav li a:hover::after {
  bottom: 0;
  opacity: 1;
  visibility: visible;
} 

.openbtn {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  cursor: pointer;
  width: min(18.5vw, 72.151px);
  height: min(22.564vw, 88px);
  background-color: #fbc600;
}

.openbtn p{
  font-size: min(3.333vw, 13px);
  font-weight: 700;
  color: #004da0;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: min(3.59vw, 14px);
}

.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: min(4.122vw, 16.0755px);
  height: min(1.635vw, 6.378px);
  border-radius: min(0.818vw, 3.189px);
  background-color: #004da0;
  width: min(10.256vw, 40px);
}

.openbtn span:nth-of-type(1) {
  top: min(6.667vw, 26px);
}

.openbtn span:nth-of-type(2) {
  top: min(9.487vw, 37px);
}

.openbtn span:nth-of-type(3) {
  top: min(12.564vw, 49px);
}

.openbtn.active span:nth-of-type(1) {
  top: min(9.231vw, 36px);
  left: min(4.398vw, 17.151px);
  transform: rotate(-45deg);
  width: min(9.744vw, 38px);
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
  top: min(9.231vw, 36px);
  left: min(4.398vw, 17.151px);
  transform: rotate(45deg);
  width: min(9.744vw, 38px);
}

/* media query header */

@media screen and (min-width:768px) {
  .w1200{
    width: min(62.5vw, 1200px);
    margin: 0 auto;
  }

  header{
    height: min(7.5vw, 144px);
  }

  .h_box {
    width: min(62.5vw, 1200px);
    height: min(7.5vw, 144px);
    padding: min(1.458vw, 28px) 0 min(1.042vw, 20px);
  }

  .h_container{
    display: flex;
    justify-content: space-between;
  }

  .h_logo img{
    width: min(17.448vw, 335px);
    height: auto;
  }

  .h_icon{
    display: none;
  }

  .openbtn{
    display: none;
  }

  #g-nav {
    position: static;
    width: min(35.625vw, 684px);/* 684px */
    height: 100%;
    transition: all 0.6s;
    background-color: transparent;
  }
  
  #g-nav ul {
    position: static;
    transform: unset;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  #g-nav li {
    line-height: 1;
    font-size: min(1.146vw, 22px);
    padding: 0 !important;
  }
  
  #g-nav li a {
    color: #ffffff;
  }
}

/* main */

main{
  margin-top: min(22.564vw, 88px);
  overflow: hidden;
}

.slider_sp{
  display: block;
}

.slider_pc{
  display: none;
}

#about{
  background-image: url(./img/bg_ye01_sp.svg);
  background-size: cover;
  border-top: min(2.051vw, 8px) solid #004da0;
  position: relative;
  padding: min(9.744vw, 38px) 0 min(4.103vw, 16px);  
}

#about::after{
  content: "";
  background-image: url(./img/ink_02.svg);
  background-size: cover;
  width: min(14.265vw, 55.635px);
  height: min(13.378vw, 52.175px);
  position: absolute;
  top: 0px;
  right: 0px;
}

#about_container::before{
  content: "";
  display: block;
  height: min(32.308vw, 126px);
  margin-top: max(-32.308vw, -126px);
  visibility: hidden;
}

h2{
  text-align: center;
}

h2 span{
  display: inline-block;
  font-size: min(4.615vw, 18px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #004da0;
  padding-bottom: min(2.051vw, 8px);
  border-bottom: min(0.513vw, 2px) solid #004da0;
}

.about_pic{
  text-align: center;
  margin: min(6.154vw, 24px) 0;
}

.about_txt p{
  font-size: min(3.59vw, 14px);
  font-weight: 500;
  line-height: min(7.18vw, 28px);
  text-align: center;
}

.sys_box01{
  width: min(88.205vw, 344px);
  display: flex;
  align-items: flex-end;
  gap: 0 min(2.82vw, 11px);
  margin: min(11.026vw, 43px) auto 0;
}

.sysb1_subbox01 img{
  width: min(17.949vw, 70px);
  height: auto;
  transform: translateY(min(0.769vw, 3px));
}

.sysb1_subbox02 picture img{
  width: min(39.487vw, 154px);
  height: auto;
}

.sysb1_subbox02 p{
  font-size: min(5.944vw, 23.18px);
  font-weight: 900;
  line-height: min(5.621vw, 21.92px);
  color: #004da0;
}

.sysb1_subbox02 span{
  font-size: min(4.005vw, 15.62px);
}

.sys_box02{
  width: min(94.872vw, 370px);
  height: min(59.487vw, 232px);
  background-color: #fbc600;
  margin: 0 auto;
  border-radius: min(2.564vw, 10px);
  box-sizing: border-box;
  padding: min(4.102vw, 16px) min(3.59vw, 14px) 0;
}

.sysb2_subbox01{
  width: min(87.692vw, 342px);
  height: min(28.462vw, 111px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.sysb2_pc{
  width: min(27.475vw, 107.153px);
  height: min(28.462vw, 111px);
  background-image: url(./img/system_pc.svg);
  background-size: cover;
  box-sizing: border-box;
  padding-top: min(13.846vw, 54px);
}

.sysb2_line{
  width: min(31.561vw, 123.089px);
  height: min(28.462vw, 111px);
  background-image: url(./img/system_line.svg);
  background-size: cover;
  box-sizing: border-box;
  padding-top: min(13.846vw, 54px);
}

.sysb2_live{
  width: min(27.334vw, 106.604px);
  height: min(28.462vw, 111px);
  background-image: url(./img/system_live.svg);
  background-size: cover;
  box-sizing: border-box;
  padding-top: min(13.846vw, 54px);
}

.sysb2_subbox01 div p{
  font-size: min(3.59vw, 14px);
  font-weight: 700;
  line-height: min(4.621vw, 18.02px);
  color: #ffffff;
  text-align: center;
}

.sysb2_subbox02{
  margin: min(3.333vw, 13px) 0;
}

.sysb2_subbox02 p{
  font-size: min(3.59vw, 14px);
  font-weight: 500;
  line-height: min(6.538vw, 25.5px);
  text-align: center;
}

.sysb2_subbox02 br{
  display: none;
}

#content{
  background-image: url(./img/bg_bl01_sp.svg);
  background-size: cover;
  position: relative;
  padding: min(7.692vw, 30px) 0 min(22.308vw, 87px);  
}

#content::before{
  content: "";
  background-image: url(./img/ink_03.svg);
  background-size: cover;
  width: min(20.251vw, 78.978px);
  height: min(14.518vw, 56.619px);
  position: absolute;
  top: 0px;
  left: 0px;
}

#content_container::before{
  content: "";
  display: block;
  height: min(30.256vw, 118px);
  margin-top: max(-30.256vw, -118px);
  visibility: hidden;
}

.content_txt{
  margin: min(4.615vw, 18px) auto min(11.795vw, 46px);
}

.content_txt p{
  font-size: min(3.59vw, 14px);
  font-weight: 500;
  line-height: min(7.18vw, 28px);
  text-align: center;
}

.content_box{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.office, .creative, .lightwork{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.308vw, 9px) 0;
}

.cross{
  margin: min(5.385vw, 21px) 0 min(7.18vw, 28px);
}

.cross img{
  width: min(13.333vw, 52px);
  height: min(13.59vw, 53px);
}

.office_box01{
  width: min(47.949vw, 187px);
  height: min(58.505vw, 228.168px);
  background-image: url(./img/content_bg01.svg);
  background-size: cover;
  box-sizing: border-box;
  padding-top: min(21.282vw, 83px);
  position: relative;
}

.office_box01::after{
  content: "";
  background-image: url(./img/content_char01.svg);
  background-size: cover;
  width: min(37.179vw, 145px);
  height: min(18.768vw, 73.197px);
  position: absolute;
  top: min(32.051vw, 125px);
  left: max(-20vw, -78px);
}

.office_box01 p{
  font-size: min(5.385vw, 21px);
  font-weight: 800;
  line-height: min(8.0128vw, 31.25px);
  color: #004da0;
  text-align: center;
}

.office_box02{
  width: min(51.282vw, 200px);
  display: flex;
  justify-content: space-between;
}

.office_box02 p{
  font-size: min(3.59vw, 14px);
  font-weight: 500;
  line-height: min(6.821vw, 26.6px);
  text-align: center;
}

.creative_box01{
  width: min(47.949vw, 187px);
  height: min(58.505vw, 228.168px);
  background-image: url(./img/content_bg02.svg);
  background-size: cover;
  box-sizing: border-box;
  padding-top: min(21.282vw, 83px);
  position: relative;
}

.creative_box01::after{
  content: "";
  background-image: url(./img/content_char02.svg);
  background-size: cover;
  width: min(27.633vw, 107.768px);
  height: min(25.641vw, 100px);
  position: absolute;
  top: min(30.769vw, 120px);
  right: max(-13.846vw, -54px);
}

.creative_box01 p{
  font-size: min(5.385vw, 21px);
  font-weight: 800;
  line-height: min(8.013vw, 31.25px);
  color: #004da0;
  text-align: center;
}

.creative_box02{
  width: min(86.154vw, 336px);
  display: flex;
  justify-content: space-between;
}

.creative_box02 p{
  font-size: min(3.59vw, 14px);
  font-weight: 500;
  line-height: min(6.821vw, 26.6px);
  text-align: center;
}

.lightwork{
  position: relative;
}

.lightwork_box01{
  width: min(47.949vw, 187px);
  height: min(58.684vw, 228.866px);
  background-image: url(./img/content_bg03.svg);
  background-size: cover;
  box-sizing: border-box;
  padding-top: min(24.103vw, 94px);
  position: relative;
}

.lightwork_box01::after{
  content: "";
  background-image: url(./img/content_char03.svg);
  background-size: cover;
  width: min(17.416vw, 67.921px);
  height: min(17.949vw, 70px);
  position: absolute;
  top: min(28.462vw, 111px);
  left: max(-13.333vw, -52px);
}

.lightwork_box01 p{
  font-size: min(5.385vw, 21px);
  font-weight: 800;
  line-height: min(8.013vw, 31.25px);
  color: #004da0;
  text-align: center;
}

.lightwork_box02 p{
  font-size: min(3.59vw, 14px);
  font-weight: 500;
  line-height: min(6.821vw, 26.6px);
  text-align: center;
}

.cont_fukidashi{
  width: min(46.154vw, 180px);
  height: min(46.311vw, 180.612px);
  position: absolute;
  bottom: max(-33.333vw, -130px);
  right: max(-32.821vw, -128px);
  z-index: 10;
}

#qa{
  background-image: url(./img/bg_ye02_sp.svg);
  background-size: cover;
  position: relative;
  padding: min(7.179vw, 28px) 0 min(6.923vw, 27px);
}

#qa::before{
  content: "";
  background-image: url(./img/ink_04.svg);
  background-size: cover;
  width: min(13.766vw, 53.686px);
  height: min(15.078vw, 58.811px);
  position: absolute;
  top: 0px;
  left: 0px;
}

#qa_container::before{
  content: "";
  display: block;
  height: min(29.487vw, 115px);
  margin-top: max(-29.487vw, -115px);
  visibility: hidden;
}

.qa_wrap{
  width: min(94.872vw, 370px);
  margin: min(6.41vw, 25px) auto 0;
}

.qa_box{
  width: min(94.872vw, 370px);
  background-color: #ffffff;
  border-radius: min(3.462vw, 13.5px);
  border: min(0.769vw, 3px) solid #ffd943;
  box-sizing: border-box;
  padding: min(3.077vw, 12px) min(4.615vw, 18px) min(3.846vw, 15px);
  margin-bottom: min(4.359vw, 17px);
}

.qa_box:first-child::before {
  content: "";
  background-image: url(./img/qa_char.svg);
  background-size: cover;
  width: min(13.974vw, 54.5px);
  height: min(16.667vw, 65px);
  position: absolute;
  top: min(4.1026vw, 16px);
  left: calc(50% - min(39.487vw, 154px));
}

.qa_box dt{
  display: flex;
  gap: 0 min(3.077vw, 12px);
  background-image: radial-gradient(circle farthest-side, #333, #333 25%, transparent 25%, transparent);
  background-size: min(1.282vw, 5px) min(0.321vw, 1.25px);
  background-position: left bottom;
  background-repeat: repeat-x;
  padding-bottom: min(3.077vw, 12px);
}

.qa_box dd{
  display: flex;
  gap: 0 min(3.077vw, 12px);
}

.q{
  font-size: min(4.718vw, 18.4px);
  font-weight: 700;
  line-height: min(5.128vw, 20px);
  color: #004da0;
}

.question{
  font-size: min(3.205vw, 12.5px);
  font-weight: 500;
  line-height: min(5.128vw, 20px);
  padding-top: min(0.384vw, 1.5px);
}

.a{
  font-size: min(4.718vw, 18.4px);
  font-weight: 700;
  line-height: min(5.128vw, 20px);
  color: #FF64AB;
  padding: min(3.077vw, 12px) min(2.603vw, 1.015px) 0;
}

.answer{
  font-size: min(2.949vw, 11.5px);
  font-weight: 500;
  line-height: min(5.128vw, 20px);
  padding-top: min(3.077vw, 12px);
}

.img-wrap-full{
  margin-top: min(1.40625vw, 27px);
}

.img-wrap-full img{
  object-fit: cover;
  width: min(149.744vw, 584px);
}

.img-wrap-2col{
  display: flex;
  justify-content: space-between;
  gap: 0 min(0.625vw, 12px); 
  margin-top: min(2.564vw, 10px);
}

.subheading{
  font-size: min(3.577vw, 13.95px);
  line-height: min(5.128vw, 20px);
  color: #FF5297;
  margin-top: min(2.82vw, 11px);
}

.subtext{
  font-size: min(2.949vw, 11.5px);
  font-weight: 500;
  line-height: min(5.128vw, 20px);
  margin-top: min(1.538vw, 6px);
}

#flow{
  background-image: url(./img/bg_bl02_sp.svg);
  background-size: cover;
  position: relative;
  padding: min(7.949vw, 31px) 0 min(11.282vw, 44px);
}

#flow::before{
  content: "";
  background-image: url(./img/ink_05.svg);
  background-size: cover;
  width: min(22.214vw, 86.634px);
  height: min(21.655vw, 84.455px);
  position: absolute;
  top: 0px;
  right: 0px;
}

#flow_container::before{
  content: "";
  display: block;
  height: min(30.256vw, 118px);
  margin-top: max(-30.256vw, -118px);
  visibility: hidden;
}

.flow_box{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: min(8.974vw, 35px);
}

.flow_item{
  width: min(61.923vw, 241.5px);
  aspect-ratio: 1;
  background-color: #fbc600;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 10;
}

.flow_item h3{
  font-size: min(4.154vw, 16.2px);
  font-weight: 800;
  line-height: min(6.013vw, 23.45px);
  color: #004da0;
  text-align: center;
}

.flow_item p{
  font-size: min(3.205vw, 12.5px);
  font-weight: 500;
  line-height: min(5.41vw, 21.1px);
  width: min(43.077vw, 168px);
  margin: 0 auto;
}

.flow_item01, .flow_item03{
  padding: min(12.308vw, 48px) 0 min(11.795vw, 46px);
  position: relative;
}

.flow_item01::before{
  content: "";
  background-image: url(./img/flow_step01.svg);
  background-size: cover;
  width: min(11.026vw, 43px);
  height: min(11.223vw, 43.768px);
  position: absolute;
  top: min(1.795vw, 7px);
  left: min(3.077vw, 12px);
}

.flow_item02{
  padding: min(9.231vw, 36px) 0 min(11.282vw, 44px);
  position: relative;
}

.flow_item02::before{
  content: "";
  background-image: url(./img/flow_step02.svg);
  background-size: cover;
  width: min(11.026vw, 43px);
  height: min(11.223vw, 43.768px);
  position: absolute;
  top: min(1.795vw, 7px);
  left: min(3.077vw, 12px);
}

.flow_item03::before{
  content: "";
  background-image: url(./img/flow_step03.svg);
  background-size: cover;
  width: min(11.026vw, 43px);
  height: min(11.223vw, 43.768px);
  position: absolute;
  top: min(1.795vw, 7px);
  left: min(3.077vw, 12px);
}

.flow_item03::after{
  content: "";
  background-image: url(./img/flow_char.svg);
  background-size: cover;
  width: min(24.21vw, 94.42px);
  height: min(27.949vw, 109px);
  position: absolute;
  bottom: max(-11.282vw, -44px);
  right: max(-15.128vw, -59px);
}

.flow_item01 h3, .flow_item03 h3{
  margin-bottom: min(4.359vw, 17px);
}

.flow_item02 h3{
  margin-bottom: min(3.077vw, 12px);
}

.arrow{
  height: min(11.667vw, 45.5px);
}

.arrow img{
  width: min(12.491vw, 48.714px);
  height: min(5.641vw, 22px);
  transform: rotate(90deg) translateX(min(1.538vw, 6px));
}

#info{
  background-image: url(./img/bg_ye03_sp.svg);
  background-size: cover;
  position: relative;
  padding: min(7.436vw, 29px) 0 min(11.538vw, 45px);
}

#info::before{
  content: "";
  background-image: url(./img/ink_06.svg);
  background-size: cover;
  width: min(20.488vw, 99.04px);
  height: min(15.148vw, 59.078px);
  position: absolute;
  top: 0px;
  left: 0px;
}

#info_container::before{
  content: "";
  display: block;
  height: min(29.744vw, 116px);
  margin-top: max(-29.743vw, -116px);
  visibility: hidden;
}

#info_container h2{
  margin-bottom: min(7.692vw, 30px);
}

.info_area_sp{
  width: min(60.513vw, 236px);
  height: min(178.974vw, 698px);
  box-sizing: border-box;
  margin: 0 auto;
  background-color: #ffffff;
}

.info_area_pc{
  display: none;
}

.side_button{
  display: none;
}

/* media query main */

@media screen and (min-width:768px) {
  main{
    margin-top: min(7.5vw, 144px);
  }

  .slider_sp{
    display: none;
  }

  .slider_pc{
    display: block;
  }

  #about{
    background-image: url(./img/bg_ye01_pc.svg);
    border-top: min(0.833vw, 16px) solid #004da0;
    padding: min(3.646vw, 70px) 0 min(5.99vw, 115px);  
  }

  #about::before{
    content: "";
    background-image: url(./img/ink_01.svg);
    background-size: cover;
    width: min(11.40625vw, 219px);
    height: min(8.802vw, 169px);
    position: absolute;
    top: 0px;
    left: min(15.521vw, 298px);
  }
  
  #about::after{
    width: min(6.823vw, 131px);
    height: min(6.146vw, 118px);
    right: min(14.896vw, 286px);
  }
  
  #about_container::before{
    height: min(11.146vw, 214px);
    margin-top: max(-11.146vw, -214px);
  }
  
  h2 span{
    font-size: min(1.667vw, 32px);
    padding-bottom: min(0.833vw, 16px);
    border-bottom: min(0.26vw, 5px) solid #004da0;
  }

  .about_pic{
    margin: min(4.167vw, 80px) 0 min(2.552vw, 49px);
  }

  .about_pic img{
    width: min(39.0625vw, 750px);
    height: auto;
  }

  .about_txt p{
    font-size: min(0.885vw, 17px);
    line-height: min(2.421875, 46.5px);
  }

  .about_txt br{
    display: none;
  }

  .sys_box01{
    width: min(57.292vw, 1100px);
    gap: 0 min(1.09375vw, 21px);
    margin: min(1.927vw, 37px) auto 0;
  }
  
  .sysb1_subbox01 img{
    width: min(10vw, 192px);
    transform: translateY(min(0.15625vw, 3px));
  }

  .sysb1_subbox02{
    display: flex;
    align-items: center;
    gap: 0 min(1.09375vw, 21px);
    margin-bottom: min(1.458vw, 28px);
  }
  
  .sysb1_subbox02 picture img{
    width: min(17.917vw, 344px);
  }
  
  .sysb1_subbox02 p{
    font-size: min(2.5234375vw, 48.45px);
    line-height: min(2.386vw, 45.82px);
  }
  
  .sysb1_subbox02 span{
    font-size: min(1.7vw, 32.64px);
  }
  
  .sys_box02{
    width: 100%;
    height: min(13.28125vw, 255px);
    border-radius: min(1.302vw, 25px);
    padding: min(0.99vw, 19px) min(5.729vw, 110px) min(1.77vw, 34px) min(5.833vw, 112px);
    display: flex;
    justify-content: space-between;
  }
  
  .sysb2_subbox01{
    width: min(35.677vw, 684px);
    height: min(10.521vw, 202px);
    margin: 0;
  }
  
  .sysb2_pc{
    width: min(10.15625vw, 195px);
    height: min(10.521vw, 202px);
    padding-top: min(5.46875vw, 105px);
  }
  
  .sysb2_line{
    width: min(11.667vw, 224px);
    height: min(10.521vw, 202px);
    padding-top: min(5.46875vw, 105px);
  }
  
  .sysb2_live{
    width: min(10.104vw, 194px);
    height: min(10.521vw, 202px);
    padding-top: min(5.46875vw, 105px);
  }
  
  .sysb2_subbox01 div p{
    font-size: min(1.09375vw, 21px);
    line-height: min(1.6125vw, 30.96px);
  }
  
  .sysb2_subbox02{
    margin: min(0.46875vw, 9px) 0 min(0.15625vw, 3px);
  }
  
  .sysb2_subbox02 p{
    font-size: min(0.885vw, 17px);
    line-height: min(1.953125vw, 37.5px);
    text-align: left;
  }

  .sysb2_subbox02 br{
    display: block;
  }

  #content{
    background-image: url(./img/bg_bl01_pc.svg);
    padding: min(3.698vw, 71px) 0 min(4.792vw, 92px);
  }
  
  #content::before{
    width: min(11.40625vw, 219px);
    height: min(8.177vw, 157px);
    left: unset;
    right: min(9.84375vw, 189px);
  }
  
  #content_container::before{
    height: min(11.146vw, 214px);
    margin-top: max(-11.146vw, -214px);
  }
  
  .content_txt{
    margin: min(1.823vw, 35px) auto min(3.75vw, 72px);
  }
  
  .content_txt p{
    font-size: min(1.042vw, 20px);
    line-height: min(2.448vw, 47px);
  }

  .content_txt br{
    display: none;
  }

  .content_box{
    flex-direction: row;
    align-items: flex-start;
  }
  
  .office, .creative, .lightwork{
    gap: min(1.25vw, 24px) 0;
  }

  .office{
    margin-left: min(3.958vw, 76px);
  }

  .lightwork{
    margin-right: min(3.802vw, 73px);
  }
  
  .cross{
    margin: min(7.135vw, 137px) min(1.927vw, 37px) 0;
  }
  
  .cross img{
    width: min(2.708vw, 52px);
    height: min(2.76vw, 53px);
  }
  
  .office_box01{
    width: min(13.958vw, 268px);
    height: min(17.03125vw, 327px);
    padding-top: min(6.146vw, 118px);
  }
  
  .office_box01::after{
    width: min(10.833vw, 208px);
    height: min(5.46875vw, 105px);
    top: min(9.427vw, 181px);
    left: max(-4.21875vw, -81px);
  }
  
  .office_box01 p{
    font-size: min(1.535vw, 29.47px);
    line-height: min(2.325vw, 44.64px);
  }
  
  .office_box02{
    width: min(13.958vw, 268px);
    display: block;
  }
  
  .office_box02 p{
    font-size: min(0.99vw, 19px);
    line-height: min(1.979vw, 38px);
  }
  
  .creative_box01{
    width: min(13.958vw, 268px);
    height: min(17.03125vw, 327px);
    padding-top: min(6.146vw, 118px);
  }
  
  .creative_box01::after{
    width: min(8.021vw, 154px);
    height: min(7.396vw, 142px);
    top: min(10.46875vw, 201px);
    right: max(-4.375vw, -84px);
  }
  
  .creative_box01 p{
    font-size: min(1.535vw, 29.47px);
    line-height: min(2.325vw, 44.64px);
  }
  
  .creative_box02{
    width: min(13.958vw, 268px);
    display: block;
  }
  
  .creative_box02 p{
    font-size: min(0.99vw, 19px);
    line-height: min(1.979vw, 38px);
  }
  
  .lightwork_box01{
    width: min(13.958vw, 268px);
    height: min(17.083vw, 327px);
    padding-top: min(6.979vw, 134px);
  }
  
  .lightwork_box01::after{
    width: min(5.104vw, 98px);
    height: min(5.26vw, 101px);
    top: unset;
    left: unset;
    right: 0;
  }
  
  .lightwork_box01 p{
    font-size: min(1.535vw, 29.47px);
    line-height: min(2.325vw, 44.64px);
  }
  
  .lightwork_box02 p{
    font-size: min(0.99vw, 19px);
    line-height: min(1.979vw, 38px);
  }
  
  .cont_fukidashi{
    width: min(15.3125vw, 294px);
    height: min(15.365vw, 295px);
    bottom: max(-19.271vw, -370px);
    right: max(-0.15625vw, -3px);
  }

  #qa{
    background-image: url(./img/bg_ye02_pc.svg);
    padding: min(3.49vw, 67px) 0 min(5.78125vw, 111px);
  }
  
  #qa::before{
    width: min(10.365vw, 199px);
    height: min(11.354vw, 218px);
    left: min(10.26vw, 197px);
  }
  
  #qa_container::before{
    height: min(10.99vw, 211px);
    margin-top: max(-10.99vw, -211px);
  }

  .qa_wrap{
    width: 100%;
    margin: min(2.24vw, 43px) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 min(1.25vw, 24px);
  }

  .qa_box{
    border-radius: min(1.203125vw, 23.1px);
    border: min(0.365vw, 7px) solid #ffd943;
    padding: min(1.042vw, 20px) min(1.771vw, 34px) min(1.042vw, 20px);
    margin-bottom: min(1.667vw, 32px);
    width: min(30.4167vw, 584px);
  }

  .qa_box:first-child::before {
    width: min(6.458vw, 124px);
    height: min(7.708vw, 148px);
    top: min(0.78125vw, 15px);
    left: calc(50% - min(26.771vw, 514px));
  }

  .q{
    font-size: min(1.51vw, 29px);
    line-height: min(1.40625vw, 27px);
  }
  
  .question{
    font-size: min(1.042vw, 20px);
    line-height: min(1.40625vw, 27px);
  }
  
  .a{
    font-size: min(1.51vw, 29px);
    line-height: min(1.40625vw, 27px);
    padding: min(0.99vw, 19px) min(0.052vw, 1px) 0;
  }
  
  .answer{
    font-size: min(0.885vw, 17px);
    line-height: min(1.40625vw, 27px);
    padding-top: min(0.99vw, 19px);
  }

  .img-wrap-full img{
    width: min(26.146vw, 502px);
  }

  .subheading{
    font-size: min(1.146vw, 22px);
    line-height: min(1.40625vw, 27px);
  }

  .subtext{
    font-size: min(0.885vw, 17px);
    line-height: min(1.40625vw, 27px);
  }

  #flow{
    background-image: url(./img/bg_bl02_pc.svg);
    padding: min(3.542vw, 68px) 0 min(6.354vw, 122px);
  }
  
  #flow::before{
    width: min(10.3125vw, 198px);
    height: min(10.052vw, 193px);
    right: min(9.167vw, 176px);
  }
  
  #flow_container::before{
    height: min(10.99vw, 211px);
    margin-top: max(-10.99vw, -211px);
  }
  
  .flow_box{
    flex-direction: row;
    justify-content: space-between;
    margin: min(4.635vw, 89px) min(3.385vw, 65px) 0;
  }
  
  .flow_item{
    width: min(16.09375vw, 309px);
  }
  
  .flow_item h3{
    font-size: min(1.068vw, 20.5px);
    line-height: min(1.5625vw, 30px);
  }
  
  .flow_item p{
    font-size: min(0.885vw, 17px);
    line-height: min(1.40625vw, 27px);
    width: min(11.71875vw, 225px);
  }
  
  .flow_item01, .flow_item03{
    padding: min(3.177vw, 61px) 0 min(3.125vw, 60px);
  }
  
  .flow_item01::before{
    width: min(2.917vw, 56px);
    height: min(2.969vw, 57px);
    top: min(0.46875vw, 9px);
    left: min(0.78125vw, 15px);
  }
  
  .flow_item02{
    padding: min(2.396vw, 46px) 0 min(2.96875vw, 57px);
  }
  
  .flow_item02::before{
    width: min(2.917vw, 56px);
    height: min(2.969vw, 57px);
    top: min(0.46875vw, 9px);
    left: min(0.78125vw, 15px);
  }
  
  .flow_item03::before{
    width: min(2.917vw, 56px);
    height: min(2.969vw, 57px);
    top: min(0.46875vw, 9px);
    left: min(0.78125vw, 15px);
  }
  
  .flow_item03::after{
    width: min(7.083vw, 136px);
    height: min(8.177vw, 157px);
    bottom: max(-6.354vw, -122px);
    right: max(-3.125vw, -60px);
  }
  
  .flow_item01 h3, .flow_item03 h3{
    margin-bottom: min(1.042vw, 20px);
  }
  
  .flow_item02 h3{
    margin-bottom: min(0.729vw, 14px);
  }
  
  .arrow{
    height: min(1.458vw, 28px);
  }
  
  .arrow img{
    width: min(3.229vw, 62px);
    height: min(1.458vw, 28px);
    transform: unset;
  }

  #info{
    background-image: url(./img/bg_ye03_pc.svg);
    padding: min(3.49vw, 67px) 0 min(6.042vw, 116px);
  }
  
  #info::before{
    width: min(9.792vw, 188px);
    height: min(7.24vw, 139px);
    left: min(11.615vw, 223px);
  }
  
  #info_container::before{
    height: min(10.9375vw, 210px);
    margin-top: max(-10.9375vw, -210px);
  }

  #info_container h2{
    margin-bottom: min(7.692vw, 30px);
  }
  
  .info_area_sp{
    display: none;
  }

  .info_area_pc{
    display: block;
    width: min(56.979vw, 1094px);
    height: min(19.167vw, 368px);
    box-sizing: border-box;
    margin: 0 auto;
    background-color: #ffffff;
  }

  .side_button{
    display: flex;
    flex-direction: column;
    gap: min(1.041vw, 20px) 0;
    position: fixed;
    right: 0;
    top: min(8.541vw, 164px);
    z-index: 200;
  }

  .side_button a{
    display: inline-block;
    width: min(5.417vw, 104px);
    height: min(19.167vw, 368px);
    border-radius: min(1.771vw, 34px) 0 0 min(1.771vw, 34px);
    box-sizing: border-box;
    padding: 0 min(1.667vw, 32px);
    writing-mode: vertical-lr;
    color: #ffffff;
    font-size: min(1.042vw, 20px);
    font-weight: 800;
    letter-spacing: 0.2em;
    text-decoration: none;
    text-align: center;
  }

  .side_button a:hover{
    filter: brightness(90%);
    transition: 0.2s ease-in-out;
  }

  .sb_mail{
    background-color: #ff5994;
  }

  .sb_mail p{
    display: inline-block;
    line-height: min(2.083vw, 40px);
    padding-top: min(2.448vw, 47px);
    background-image: url(./img/icon_mail01.svg);
    background-size: min(2.083vw, 40px) min(1.667vw, 32px);
    background-repeat: no-repeat;
    background-position: top 0 left 0;
  }

  .sb_line{
    background-color: #06c755;
  }

  .sb_line p{
    display: inline-block;
    line-height: min(2.083vw, 40px);
    padding-top: min(2.448vw, 47px);
    background-image: url(./img/icon_line01.svg);
    background-size: min(2.083vw, 40px) min(1.979vw, 38px);
    background-repeat: no-repeat;
    background-position: top 0 left 0;
  }
}

/* footer */

#access{
  background-color: #004da0;
  padding: min(5.385vw, 21px) min(2.564vw, 10px) 0;
  position: relative;
}

#access::before{
  content: "";
  background-image: url(./img/footer_char.svg);
  background-size: cover;
  width: min(20.092vw, 78.358px);
  height: min(19.231vw, 75px);
  position: absolute;
  top: 0;
  left: min(6.41vw, 25px);
}

#access_container::before{
  content: "";
  display: block;
  height: min(27.436vw, 107px);
  margin-top: max(-27.436vw, -107px);
  visibility: hidden;
}

.f_toptxt h3{
  font-size: min(4.103vw, 16px);
  font-weight: 800;
  line-height: min(6.154vw, 24px);
  letter-spacing: 0.2em;
  color: #ffffff;
  text-align: center;
  margin-bottom: min(2.82vw, 11px);
}

.f_toptxt p{
  font-size: min(3.077vw, 12px);
  font-weight: 400;
  line-height: min(4.487vw, 17.5px);
  color: #ffffff;
  text-align: center;
}

.f_box01{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(3.333vw, 13px) 0;
  margin-top: min(4.359vw, 17px);
}

.f_box01 div{
  width: min(78.462vw, 306px);
  height: min(17.436vw, 68px);
  border-radius: min(8.718vw, 34px);
  background-color: #fff000;
}

.f_box01 div a{
  display: block;
  width: min(78.462vw, 306px);
  height: min(17.436vw, 68px);
  border-radius: min(8.205vw, 32px);
  text-decoration: none;
  color: #004da0;
}

.f_box01 div:hover{
  filter: brightness(90%);
  transition: 0.2s ease-in-out;
}

.f_tel{
  position: relative;
}

.f_tel::before{
  content: "";
  background-image: url(./img/icon_tel.svg);
  background-size: cover;
  width: min(8.85vw, 34.514px);
  height: min(10.085vw, 39.33px);
  position: absolute;
  top: min(3.333vw, 13px);
  left: min(8.974vw, 35px);
}

.f_tel a{
  box-sizing: border-box;
  padding: min(2.308vw, 9px) 0;
}

.tel_txt01{
  font-size: min(6.836vw, 26.66px);
  font-weight: 700;
  line-height: 1;
  margin-left: min(20vw, 78px);
}

.tel_txt02{
  font-size: min(3.123vw, 12.18px);
  font-weight: 400;
  line-height: min(4.615vw, 18px);
  margin: min(1.282vw, 5px) 0 0 min(20vw, 78px);
}

.f_mail{
  position: relative;
}

.f_mail::before{
  content: "";
  background-image: url(./img/icon_mail02.svg);
  background-size: cover;
  width: min(7.436vw, 29px);
  height: min(7.235vw, 28.216px);
  position: absolute;
  top: min(5.385vw, 21px);
  left: min(16.667vw, 65px);
}

.f_mail a{
  box-sizing: border-box;
  padding: min(6.795vw, 26.5px) 0;
}

.f_mail a p{
  font-size: min(3.846vw, 15px);
  font-weight: 700;
  line-height: 1;
  margin-left: min(26.667vw, 104px);
}

.f_line{
  position: relative;
}

.f_line::before{
  content: "";
  background-image: url(./img/icon_line02.svg);
  background-size: cover;
  width: min(7.4vw, 28.86px);
  height: min(7.2vw, 28.08px);
  position: absolute;
  top: min(5.385vw, 21px);
  left: min(17.692vw, 69px);
}

.f_line a{
  box-sizing: border-box;
  padding: min(6.795vw, 26.5px) 0;
}

.f_line a p{
  font-size: min(3.846vw, 15px);
  font-weight: 700;
  line-height: 1;
  margin-left: min(26.667vw, 104px);
}

.map_wrap {
  margin: min(6.923vw, 27px) auto 0;
  width: min(94.872vw, 370px);
}

.map {
  position: relative;
  width: 100%;
  height: min(49.231vw, 192px);
}

.map_sp {
  position: absolute;
  top: 0;
  left: 0;
  width: min(94.872vw, 370px);
  height: min(49.231vw, 192px);
}

.map_pc{
  display: none;
}

.f_subbox{
  width: min(86.154vw, 336px);
  margin: min(6.923vw, 27px) auto 0;
  position: relative;
}

.f_logo{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: min(2.051vw, 8px) min(5.641vw, 22px);
}

.f_logo img{
  width: min(25.957vw, 101.234px);
  height: min(20vw, 78px);
}

.f_logo_txt p:first-child{
  font-size: min(4.121vw, 16.07px);
  font-weight: 500;
  line-height: min(7.179vw, 28px);
  color: #ffffff;
}

.f_logo_txt p:last-child{
  font-size: min(9.79vw, 38.18px);
  font-weight: 900;
  color: #ffffff;
}

.f_address{
  font-size: min(3.846vw, 15px);
  font-weight: 500;
  line-height: min(5.779vw, 22.54px);
  color: #ffffff;
}

.f_fukidashi img{
  width: min(37.692vw, 147px);
  height: min(37.692vw, 147px);
  position: absolute;
  bottom: min(17.179vw, 67px);
  right: max(-4.615vw, -18px);
}

.f_car{
  width: min(82.051vw, 320px);
  height: auto;
  margin-top: min(6.41vw, 25px);
  transform: translateX(max(-3.077vw, -12px));
}

small{
  display: block;
  font-size: min(3.077vw, 12px);
  font-weight: 400;
  line-height: min(11.282vw, 44px);
  color: #ffffff;
  text-align: center;
}

/* media query footer */

@media screen and (min-width:768px) {

  #access{
    padding: min(3.698vw, 71px) 0 min(2.135vw, 41px);
  }
  
  #access::before{
    width: min(7.292vw, 140px);
    height: min(6.979vw, 134px);
    left: min(20.3125vw, 390px);
  }
  
  #access_container::before{
    height: min(11.146vw, 214px);
    margin-top: max(-11.146vw, -214px);
  }
  
  .f_toptxt h3{
    font-size: min(1.875vw, 36px);
    line-height: 1;
    margin-bottom: 0;
  }
  
  .f_toptxt p{
    font-size: min(0.885vw, 17px);
    line-height: min(2.865vw, 55px);
  }

  .f_toptxt br{
    display: none;
  }
  
  .f_box01{
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
    margin: min(1.40625vw, 27px) min(3.802vw, 73px) min(3.802vw, 73px);
  }
  
  .f_box01 div{
    height: min(4.453125vw, 85.5px);
    border-radius: min(2.227vw, 42.75px);
  }
  
  .f_box01 div a{
    width: auto;
    height: min(4.453125vw, 85.5px);
    border-radius: min(2.227vw, 42.75px);
  }
  
  .f_tel{
    width: min(19.948vw, 383px)!important;
  }
  
  .f_tel::before{
    width: min(2.24vw, 43px);
    height: min(2.552vw, 49px);
    top: min(0.833vw, 16px);
    left: min(2.292vw, 44px);
  }
  
  .f_tel a{
    pointer-events: none;
    padding: min(0.625vw, 12px) 0 min(0.729vw, 14px);
  }
  
  .tel_txt01{
    font-size: min(1.6875vw, 32.4px);
    margin-left: min(5.677vw, 109px);
  }
  
  .tel_txt02{
    font-size: min(0.791vw, 15.19px);
    line-height: 1;
    margin: min(0.208vw, 4px) 0 0 min(5.677vw, 109px);
  }
  
  .f_mail{
    width: min(16.25vw, 312px)!important;
  }
  
  .f_mail::before{
    width: min(1.927vw, 37px);
    height: min(1.875vw, 36px);
    top: min(1.25vw, 24px);
    left: min(2.5vw, 48px);
  }
  
  .f_mail a{
    padding: min(1.667vw, 32px) 0 min(1.823vw, 35px);
  }
  
  .f_mail a p{
    font-size: min(0.9375vw, 18px);
    margin-left: min(5.677vw, 109px);
  }
  
  .f_line{
    width: min(16.25vw, 312px)!important;
  }
  
  .f_line::before{
    width: min(1.927vw, 37px);
    height: min(1.875vw, 36px);
    top: min(1.25vw, 24px);
    left: min(2.5vw, 48px);
  }
  
  .f_line a{
    padding: min(1.667vw, 32px) 0 min(1.823vw, 35px);
  }
  
  .f_line a p{
    font-size: min(0.9375vw, 18px);
    margin-left: min(5.677vw, 109px);
  }

  .f_box02{
    display: flex;
    justify-content: space-between;
    margin-right: min(1.146vw, 22px);
  }

  .map_wrap {
    margin: min(0.15625vw, 3px) 0 0;
    width: min(36.667vw, 704px);
  }

  .map {
    height: min(24.583vw, 472px);
  }

  .map_sp{
    display: none;
  }

  .map_pc{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: min(36.667vw, 704px);
    height: min(24.583vw, 472px);
  }
 
  .f_subbox{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: min(21.979vw, 422px);
    margin: 0;
  }
  
  .f_logo{
    gap: min(0.677vw, 13px);
  }
  
  .f_logo img{
    width: min(5.208vw, 100px);
    height: min(4.055vw, 77.849px);
  }
  
  .f_logo_txt p:first-child{
    font-size: min(0.837vw, 16.07px);
    line-height: min(1.458vw, 28px);
  }
  
  .f_logo_txt p:last-child{
    font-size: min(1.989vw, 38.18px);
    line-height: 1;
  }
  
  .f_address{
    font-size: min(0.9375vw, 18px);
    line-height: min(1.382vw, 26.54px);
  }

  .f_address br{
    display: none;
  }
  
  .f_fukidashi img{
    width: min(11.51vw, 221px);
    height: min(9.427vw, 181px);
    bottom: min(5.833vw, 112px);
    right: min(11.458vw, 220px);
  }
  
  .f_car{
    width: min(21.979vw, 422px);
    margin-top: 0;
    transform: unset;
  }
  
  small{
    font-size: min(0.885vw, 17px);
    line-height: 1;
    margin-top: min(3.75vw, 72px);
  }
  
}