/* 蜈ｱ騾� */

body {
  color: #333333;
  font-family: '繝｡繧､繝ｪ繧ｪ',Meiryo,'繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3','Hiragino Kaku Gothic Pro','�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け',Arial,Helvetica,sans-serif;
}

body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

h2{
  background: none;
}

/* contents */
#contents {
  background-color: #FFFFFF;
  font-family: 'Hiragino Kaku Gothic Pro','繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3','�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け',Arial,Helvetica,sans-serif;
}

/* 繝ｬ繧ｹ繝昴Φ繧ｷ繝� */
.-sp-only {
  display: none;
}

@media only screen and (max-width:800px) {
  .-pc-only {
    display: none;
  }
  .-sp-only {
    display: block;
  }
}

/* 繧､繝ｳ繝翫� */
.inner {
  max-width: 1275px;
  width: 100%;
  margin: 0 auto;
}

/* 繧ｿ繧､繝医Ν�亥推繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蜈ｱ騾夲ｼ� */
.title {
  font-size: 200%;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.075em;
  text-align: center;
}

.title::before {
  content:attr(title);
  font-size: 62.5%;
  font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 2.45;
  letter-spacing: 0.075em;
  color: #CC0022;
  text-align: center;
  display: block;
}

.title::after {
  content: '';
  display: block;
  width: 45px;
  height: 3px;
  background-color: #B1000E;
  margin: 0 auto;
  margin-top: 20px;
}

/* top */
.top {
  background-color: #469D91;
  width: 100%;
}

.top__flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
}

.top__flexLeft {
  width: 42.3%;
  padding-left: 7%;
}

.top__text {
  font-size: 125%;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  white-space: nowrap;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
}

.top__title {
  font-size: 312.5%;
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
  white-space: nowrap;
  padding-top: 20px;
  padding-bottom: 20px;
}

.top__list {
  width: 100%;
  background-color: #FFFFFF;
  padding-top: 16px;
  padding-bottom: 16px;
}

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

.top__list span {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: auto 20px;
  vertical-align: text-top;
}

.top__list li p {
  font-size: 100%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.1em;
  display: block;
  width: 85%;
}

.top__list span img {
  width: 100%;
}

.top__flexRight {
  width: 57.7%;
}

.top__image {
  width: 100%;
}

.top__image img {
  display: block;
  width: 90%;
  margin: auto;
}

@media only screen and (max-width:1200px) {
  .top__text {
  text-align: center;
  }
  
  .top__title {
  text-align: center;
  }
  
  .top__flex {
    align-items: center;
  }

  .top__flexLeft {
    width: 50%;
    padding-left: 2%;
  }

  .top__title {
    font-size: 281%;
  }

  .top__flexRight {
    width: 50%;
  }
}

/* misson */
.misson {
  background-color: #D9E6FF;
  width: 100%;
  padding-top: 20px;
}

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

.misson__logo {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 562.5%;
  font-weight: 700;
  font-family: "Roboto";
  line-height: 1;
  letter-spacing: 0.075em;
  color: #CC0022;
  transform: translateY(12%);
}

.misson__main {
  width: 94%;
}

.misson__flex {
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  padding: 20px 0px 20px 20px;
  margin-right: 10%;
}

.misson__box {
  width: 29.5%;
}

.misson__boxImage {
  display: block;
  width: 63%;
  margin: 0 auto;
}

.misson__boxImage img {
  width: 100%;
}

.missonContent {
  width: 100%;
  background-color: #FFFFFF;
  border: 2px solid #CC0022;
  box-shadow: 10px 10px #A94657 ;
}

.missonContentPart {
  font-size: 87.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1;
  letter-spacing: 0.075em;
  background-color: #CC0022;
  color: #FFFFFF;
  width: 85px;
  text-align: center;
  padding-top: 6px;
  padding-bottom: 6px;
}

.missonContentTitle {
  font-size: 106%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.7;
  letter-spacing: 0.075em;
  color: #CC0022;
  text-align: center;
  padding-top: 10px;
}

.missonContentList {
  padding-left: 6%;
  padding-bottom: 20px;
}

.missonContentList li {
  font-size: 87.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.04em;
}

.misson__answerWrap {
  margin-top: 60px;
  margin-bottom: 90px;
  margin-right: 8%;
  position: relative;
}

.misson__answer {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background-color: #CC0022;
  box-shadow: 10px 10px #A94657 ;
  position: relative;
  z-index: 2;
}

.misson__answerLeft {
  width: 22%;
  font-size: 112.5%;
  font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
  letter-spacing: 0.075em;
  color: #FFFFFF;
  text-align: center;
  border-right: 1px solid #FFFFFF;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.misson__answerRight {
  width: 78%;
  font-size: 150%;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.075em;
  color: #FFFFFF;
  text-align: center;
  margin-top: 20px;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
}

.misson__answerTriangle {
  width: 250px;
  margin: auto;
  position: absolute;
  top: -35px;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 0;
}

.misson__answerTriangle img {
  width: 100%;
}

.contact {
  max-width: 1100px;
  margin: 0 8% 0 auto;
  transform: translateY(50%);
  display: flex;
  justify-content: space-between;
  background-color: #FDF8B2;
  border: 6px solid #CC0022;
  border-radius: 30px;
  padding: 15px 70px 15px;
}

.contactImage {
  width: 25%;
  margin-top: -80px;
}

.contactImage img {
  width: 100%;
}

.contactMessage {
  width: 48%;
}

.contactMeassageImage {
  width: 52%;
  margin: 0 auto;
}

.contactMeassageImage img {
  width: 100%;
}

.contactMeassageText {
  font-size: 137.5%;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.075em;
  text-align: center;
  margin-top: 10px;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
}

.contactButton {
  width: 27%;
  background-color: #CC0022;
  border-radius: 15px;
  height: 90px;
  margin-top: 10px;
}

.contactButton p {
  font-size: 125%;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.075em;
  color: #FFFFFF;
  position: relative;
  margin-top: 20px;
  margin-left: 11%;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
}

.contactButton p:after {
  content: "";
  position: absolute;
  top: 50%;;
  transform: translateY(-50%);
  background-image: url(../images/issue_arrow.svg);
  width: 24px;
  height: 7px;
  margin-left: 8px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all .3s;
}

.contactButton:hover {
  opacity: .6;
}

.contactButton:hover p:after {
  margin-left: 13px;
}

@media only screen and (max-width:1200px) {
  .contactButton p {
    font-size: 100%;
  }
}

@media only screen and (max-width:1080px) {
  .misson__answerRight {
    font-size: 125%;
  }

  .contactMeassageText {
    font-size: 100%;
  }

  .contact.-type1 .contactImage {
    margin-top: -40px;
  }

  .contact.-type1 .contactButton p br {
    display: none;
  }

  .contact.-type1 .contactButton p:after {
    top: auto;
    bottom: 0;
  }
}

/* reason */
.reason {
  background-color: #7BC6BC;
}

.reason .inner {
  padding: 120px 0;
}

.reason .title {
  color: #FFFFFF;
}

.reason__subTitle {
  font-size: 125%;
  font-weight: 700;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2.45;
  letter-spacing: 0.075em;
  color: #FFFFFF;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 5px;
}

.reason__text {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.reason__text p {
  font-size: 94%;
  font-weight: 500;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.85;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  display: inline-block;
  text-align: left;
}

.reason__list {
  display: block;
  width: 46%;
  background-color: #FFFFFF;
  padding: 16px 16px 16px 0px;
  margin: 20px auto 0;
  position: relative;
}

.reason__list::before {
  content: "";
  position: absolute;
  top:0;
  left:-110px;
  background-image: url(../images/re_01.png);
  width: 135px;
  height: 135px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.reason__list::after {
  content: "";
  position: absolute;
  top:0;
  right:-100px;
  background-image: url(../images/re_02.png);
  width: 135px;
  height: 135px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

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

.reason__list span {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(../images/check-red.png);
  background-size: contain;
  margin: auto 20px;
  vertical-align: text-top;
}

.reason__list li p {
  font-size: 100%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.1em;
  display: block;
  width: 85%;
}

.reason__list span img {
  width: 100%;
}

/* service */
.service {
  background-color: #D9E6FF;
}

.service .inner {
  padding: 25px 10px 100px;
}

.service__box {
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  margin: 45px auto 0;
  background-color: #FFFFFF;
  border: 6px solid #469D91;
}

.service__concept {
  width: 14.5%;
  background-color: #FDF8B2;
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
}

.service__concept::after {
  content: '';
  position: absolute;
  top:50%;
  right: -50%;
  transform: translateY(-50%);
  background-image: url(../images/se-left_01.png);
  width: 165px;
  height: 305px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.service__concept.-type2::after {
  background-image: url(../images/se-left_02.png);
}

.service__concept.-type3::after {
  background-image: url(../images/se-left_03.png);
}

.service__concept p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 531.2%;
  font-weight: 700;
  font-family: "Roboto";
  line-height: 1;
  letter-spacing: 0.075em;
  color: #469D91;
  white-space: nowrap;
}

.service__content {
  width: 85.5%;
}

.service__contentTitle {
  font-size: 137.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.6;
  letter-spacing: 0.075em;
  color: #469D91;
  text-align: center;
  margin-top: 40px;
}

.service__contentText {
  margin: 28px auto 0;
  text-align: center;
}

.service__contentText p {
  font-size: 94%;
  font-weight: 500;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.86;
  letter-spacing: 0.1em;
  display: inline-block;
  text-align: left;
}

.service__contentFlex {
  display: flex;
  justify-content: space-between;
  padding: 40px 4.8% 40px 9.6%;
}

.service__contentBox {
  width: 32%;
  background-color: #FDF8B2;
  border-radius: 30px;
}

.service__contentBoxImage {
  display: block;
  width: 30%;
  margin: 0 auto;
  height: 90px;
  position: relative;
}

.service__contentBoxImage img {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.service__contentBoxTopic {
  font-size: 100%;
  font-weight: 800;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  background-color: #469D91;
  border-radius: 15px;
  width: 76%;
  margin: 10px auto;
  text-align: center;
}

.service__contentBoxList {
  width: 80%;
  display: block;
  margin: 0 auto;
  padding-bottom: 30px;
}

.service__contentBoxList li {
  font-size: 87.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #333333;
}

.service__contentBoxList li a {
  color: #CC0022;
  text-decoration: underline;
}

.service__contentBoxList li a:hover {
  opacity: .6;
}

.service__contentButton {
background-color: #CC0022;
display: block;
width: 43%;
margin: 0 auto 30px;
border-radius: 45px;
transform: translateX(10%);
padding-top: 15px;
padding-bottom: 20px;
}

.service__contentButton p {
font-size: 125%;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.075em;
color: #FFFFFF;
position: relative;
text-align: center;
margin-right: 10%;
font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
}

.service__contentButton p:after {
content: "";
position: absolute;
top: 50%;;
transform: translateY(-50%);
background-image: url(../images/service_arrow.svg);
width: 24px;
height: 7px;
margin-left: 8px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all .3s;
}

.service__contentButton:hover {
opacity: .8;
}

.service__contentButton:hover p:after {
margin-left: 13px;
}

@media only screen and (max-width:1080px) {
  .service__concept::after {
    right: -65%;
    width: 120px;
    background-size: contain;
  }

.service__contentButton p {
  font-size: 112.5%;
  }
}

.asterisk {
  display: inline-block;
  font-size: 62.5%;
  letter-spacing: 0.05em;
  line-height: 1.8;
  white-space: normal;
}

/* study */
.study {
  background-color: #B4F0E8;
  padding-top: 35px;
  padding-bottom: 70px;
}

.study .inner {
  padding: 0px 10px;
}

.study__before {
  max-width: 83.5%;
  margin: 30px auto 0;
  background-color: #FFFFFF;
  display: flex;
}

.study__before.-type2{
  margin-top:80px;
}

.study__beforeLogo {
  width: 14%;
  position: relative;
}

.study__beforeLogo p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 375%;
  font-weight: 700;
  font-family: "Roboto";
  line-height: 1;
  letter-spacing: 0.075em;
  color: #CC0022;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
}

.study__beforeMain {
  width: 54%;
  position: relative;
}

.study__beforeMainCase {
  font-size: 150%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.2;
  letter-spacing: 0.075em;
  margin-top: 30px;
  display: inline-block;
  border-bottom: 3px dotted #CC0022;
  position: absolute;
  right: 12%;
  color: #333333;
}

.study__beforeMainCase span {
  font-size: 67%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.75;
  letter-spacing: 0.075em;
}

.study__beforeImage {
  width: 32%;
}

.study__beforeImage img {
  width: 110%;
  margin-top: -20px;
  transform: translateY(5px);
}

.study__beforeMainTopic {
  font-size: 112.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background-color: #CC0022;
  border-radius: 30px;
  text-align: center;
  width: 82%;
  margin-top: 90px;
}

.study__beforeMainList li{
  display: flex;
  margin-top: 20px;
}

.study__beforeMainListBatu {
  display: block;
  width: 110px;
  height: 82px;
}

.study__beforeMainListBatu img {
  display: block;
  width: 50%;
  height: 50%;
  margin: auto;
}

.study__beforeMainList li p {
  font-size: 100%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.04em;
  display: inline-block;
  width: 71%;
}

.study__beforeMainList li p span {
  background: linear-gradient(transparent 60%, rgba(253, 248, 178, 1) 60%);
}

.study__beforeMainListAdjust {
  white-space: nowrap;
  padding-bottom: 30px;
}

.study__service {
  max-width: 1180px;
  margin: 0 auto;
  background-color: #FDF8B2;
  border: 5px solid #CC0022;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  padding-right: 4%;
  padding-left: 4%;
}

.study__serviceImage {
  width: 22%;
}

.study__serviceImage img {
  width: 90%;
}

.study__serviceList {
  width: 76%;
}

.study__serviceListTitle {
  font-size: 94%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background-color: #CC0022;
  border-radius: 30px;
  text-align: center;
  width: 240px;
  margin-top: 20px;
}

.study__serviceList ul {
  margin-top: 10px;
}

.study__serviceList ul li {
  display: flex;
  justify-content: space-between;
}

.study__serviceList ul li span {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: auto;
}

.study__serviceList ul li span img {
  width: 100%;
  height: 100%;
}

.study__serviceListItem {
  font-size: 100%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.06em;
  display: block;
  width: 26%;
}

.study__serviceListContent {
  font-size: 94%;
  font-weight: 500;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.02em;
  display: block;
  width: 70%;
}

.study__after {
  max-width: 83.5%;
  margin: 0 auto;
  background-color: #FFFFFF;
  display: flex;
  padding-top: 10px;
  padding-bottom: 15px;
}

.study__afterLogo {
  width: 14%;
  position: relative;
}

.study__afterLogo p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 375%;
  font-weight: 700;
  font-family: "Roboto";
  line-height: 1;
  letter-spacing: 0.075em;
  color: #CC0022;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
}

.study__afterMain {
  width: 64%;
}

.study__afterImage {
  width: 22%;
  margin: auto;
}

.study__afterImage img {
  width: 100%;
}

.study__afterMainList li{
  display: flex;
  margin-top: 20px;
}

.study__afterMainListHanamaru {
  display: block;
  width: 110px;
  height: 82px;
}

.study__afterMainListHanamaru img {
  width: 100%;
  height: 100%;
}

.study__afterMainList li p {
  font-size: 100%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.04em;
  display: inline-block;
  width: 70%;
}

.study__afterMainList li p span {
  background: linear-gradient(transparent 60%, rgba(253, 248, 178, 1) 60%);
}

.contact.-type2 {
  max-width: 1100px;
  margin: 30px auto 80px;
  display: flex;
  justify-content: space-between;
  background-color: #FDF8B2;
  border: 6px solid #CC0022;
  border-radius: 30px;
  padding: 15px 70px 15px;
}

@media only screen and (max-width:1200px) {
  .study__wrap br {
    display: none;
  }
  
  .study__beforeLogo p {
    font-size: 312.5%;
  }

  .study__beforeMainCase {
    font-size: 125%;
  }
  
  .study__beforeMainCase span {
    font-size: 70%;
  }

  .study__beforeMainTopic {
    font-size: 100%;
  }

  .study__beforeMainList {
    margin-bottom: 10px;
  }

  .study__beforeMainListBatu {
    display: block;
    width: 70px;
    height: 82px;
  }
  
  .study__beforeMainList li p {
    font-size: 87.5%;
  }

  .study__beforeMainListAdjust {
    white-space:normal;
    padding-bottom: 10px;
  }

  .study__service {
    padding-right: 1%;
    padding-left: 1%;
  }
  
  .study__serviceImage {
    width: 20%;
  }

  .study__serviceList {
    width: 80%;
  }

  .study__serviceList ul li span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 auto auto;
  }

  .study__serviceListItem {
    font-size: 87.5%;
  }
  
  .study__serviceListContent {
    font-size: 81.2%;
    font-weight: 500;
  }

  .study__afterLogo p {
    font-size: 312.5%;
  }

  .study__afterMainListHanamaru {
    display: block;
    width: 100px;
    height: 60px;
  }

  .study__afterMainList li p {
    font-size: 87.5%;
  }
}

@media only screen and (max-width:1268px) {
  .study__beforeMainList li p {
    width: 80%;
  }
}

@media only screen and (max-width:900px) {
  .contact.-type2 .contactButton p br {
    display: none;
  }

  .contact.-type2 .contactButton p:after {
    top: auto;
    bottom: 0;
  }
}

/* company */
.company {
  background-color: #333333;
  position: relative;
  z-index: 0;
  padding-bottom: 65px;
}

.company::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/company_bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.company .title {
  position: relative;
  z-index: 4;
  color: #FFFFFF;
  padding-top: 60px;
}

.companyContent {
  position: relative;
  z-index: 4;
}

.companySubtitle {
  font-size: 125%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2.45;
  letter-spacing: 0.075em;
  color: #FFFFFF;
  text-align: center;
  margin-top: 15px;
}

.companyText {
  margin: 30px auto 0;
  text-align: center;
  line-height: 100%;
}

.companyText p {
  font-size: 100%;
  font-weight: 300;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  display: inline-block;
  text-align: left;
}

.companyText p span {
  font-size: 62.5%;
  letter-spacing: 0.05em;
}

.companyLogo {
  width: 180px;
  height: 55px;
  margin: 30px auto 0;
}

.companyLogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -----SP繝�じ繧､繝ｳ----- */

/* 繧､繝ｳ繝翫� */
.sp-inner {
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media only screen and (max-width:374px) {
  .sp-inner {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* sp繧ｿ繧､繝医Ν�亥推繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蜈ｱ騾夲ｼ� */
.sp-title {
  font-size: 112.5%;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.075em;
  text-align: center;
  font-family: 'Hiragino Kaku Gothic Pro','繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3','�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け',Arial,Helvetica,sans-serif;
}

.sp-title::before {
  content:attr(title);
  font-size: 88.8%;
  font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
  letter-spacing: 0.075em;
  color: #CC0022;
  text-align: center;
  display: block;
}

.sp-title::after {
  content: '';
  display: block;
  width: 45px;
  height: 3px;
  background-color: #B1000E;
  margin: 0 auto;
  margin-top: 20px;
}

/* sp-top */
.sp-top {
  background-color: #469D91;
  width: 100%;
  padding-bottom: 30px;
}

.sp-top__text {
  font-size: 94%;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  padding-top: 30px;
  text-align: center;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
}

.sp-top__title {
  font-size: 162.5%;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  margin-top: 16px;
  text-align: center;
}

.sp-top__image {
  max-width: 345px;
  width: 100%;
  margin-top: 16px;
  margin: 0 auto;
  text-align: center;
}

.sp-top__image img {
  width: 100%;
}

.sp-top__list {
  max-width: 330px;
  width: 100%;
  background-color: #FFFFFF;
  padding-top: 14px;
  padding-bottom: 14px;
  margin: 0 auto;
}

.sp-top__list li {
  display: flex;
  justify-content: space-between;
}

.sp-top__list span {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: auto 6px;
  vertical-align: text-top;
}

.sp-top__list li p {
  font-size: 81.2%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2.3;
  letter-spacing: 0.04em;
  display: block;
  width: 100%;
}

.sp-top__list span img {
  width: 100%;
}

/* sp-tcontact-type2 */
.sp-contact-type2 {
  background-color: #FDF8B2;
  padding-top: 15px;
  padding-bottom: 25px;
}

.sp-contact-type2 .sp-inner {
  display: flex;
  justify-content: center;
  position: relative;
}

.sp-contactImage-type2 {
  display: block;
  width: 165px;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 50%;
  margin: auto;
}

.sp-contactImage-type2 img {
  width: 100%;
}

.sp-contactRight-type2 {
  width: 240px;
  position: relative;
  z-index: 2;
  margin-right: -100px;
}

.sp-contactText-type2 {
  font-size: 75%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.075em;
  text-align: center;
}

.sp-contactButton-type2 {
  display: block;
  width: 240px;
  background-color: #CC0022;
  border-radius: 30px;
  height: 60px;
  margin-top: 15px;
}

.sp-contactButton-type2 p {
  font-size: 94%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.2;
  letter-spacing: 0.075em;
  color: #FFFFFF;
  position: relative;
  padding-top: 12px;
  margin-left: 15%;
}

.sp-contactButton-type2 p:after {
  content: "";
  position: absolute;
  top: 50%;;
  transform: translateY(-50%);
  background-image: url(../images/issue_arrow.svg);
  width: 24px;
  height: 7px;
  margin-left: 8px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all .3s;
}

.sp-contactButton-type2:hover p:after {
  margin-left: 15px;
}

@media only screen and (max-width:374px) {
  .sp-contactRight-type2 {
    width: 200px;
  }

  .sp-contactButton-type2 {
    width: 200px;
  }
} 

/* sp-misson_ */
.sp-misson {
  background-color: #D9E6FF;
  width: 100%;
  padding-top: 30px;
}

.sp-misson .sp-title {
  padding-bottom: 20px;
}

.sp-misson__box {
  width: 325px;
  margin: 35px auto 0;
}

.sp-misson__boxImage {
  display: block;
  width: 195px;
  margin: 0 auto;
}

.sp-misson__boxImage img {
  width: 100%;
}

.sp-missonContent {
  width: 100%;
  background-color: #FFFFFF;
  border: 2px solid #CC0022;
  box-shadow: 10px 10px #A94657 ;
}

.sp-missonContentPart {
  font-size: 87.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1;
  letter-spacing: 0.075em;
  background-color: #CC0022;
  color: #FFFFFF;
  width: 85px;
  text-align: center;
  padding-top: 6px;
  padding-bottom: 6px;
}

.sp-missonContentTitle {
  font-size: 106.2%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.7;
  letter-spacing: 0.075em;
  color: #CC0022;
  text-align: center;
  padding-top: 15px;
}

.sp-missonContentList {
  padding-left: 6%;
  padding-bottom: 20px;
}

.sp-missonContentList li {
  font-size: 87.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.04em;
}

.sp-misson__answerWrap {
  margin-top: 60px;
  padding-bottom: 90px;
  position: relative;
}

.sp-misson__answer {
  max-width: 315px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background-color: #CC0022;
  box-shadow: 10px 10px #A94657 ;
  position: relative;
  z-index: 2;
}

.sp-misson__answerLeft {
  width: 105px;
  font-size: 94%;
  font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  text-align: center;
  border-right: 1px solid #FFFFFF;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.sp-misson__answerRight {
  width: 210px;
  font-size: 94%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.45;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  text-align: left;
  margin-top: 8px;
  padding-left: 20px;
}

.sp-misson__answerTriangle {
  width: 250px;
  margin: auto;
  position: absolute;
  top: -35px;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 0;
}

.sp-misson__answerTriangle img {
  width: 100%;
}

@media only screen and (max-width:374px) {
  .sp-misson__box {
    width: 280px;
  }

  .sp-misson__answer {
    max-width: 300px;
  }

  .sp-misson__answerLeft {
    width: 100px;
  }

  .sp-misson__answerRight {
    width: 200px;
  }
}

/* sp-contact */
.sp-contact {
  background-color: #FDF8B2;
  padding: 40px 0;
}

.sp-contactWrap {
  width: 320px;
  display: flex;
  margin: 0 auto;
}

.sp-contactImage {
  width: 105px;
}

.sp-contactImage img {
  width: 100%;
}

.sp-contactMessage {
  width: 215px;
}

.sp-contactMeassageImage {
  width: 100%;
}

.sp-contactMeassageImage img {
  width: 100%;
}

.sp-contactMeassageText {
  font-size: 100%;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.03em;
  text-align: center;
  margin-top: 10px;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
}

.sp-contactButton {
  display: block;
  width: 315px;
  margin: 0 auto;
  background-color: #CC0022;
  border-radius: 30px;
  height: 60px;
  transform: translateY(-5px);
}

.sp-contactButton p {
  font-size: 106.2%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1;
  letter-spacing: 0.075em;
  color: #FFFFFF;
  position: relative;
  padding-top: 20px;
  margin-left: 11%;
}

.sp-contactButton p:after {
  content: "";
  position: absolute;
  top: 65%;
  background-image: url(../images/issue_arrow.svg);
  width: 24px;
  height: 7px;
  margin-left: 8px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all .3s;
}

.sp-contactButton:hover {
  opacity: .6;
}

.sp-contactButton:hover p:after {
  margin-left: 13px;
}

@media only screen and (max-width:374px) {
  .sp-contactWrap {
    width: 300px;
  }

  .sp-contactButton {
    width: 280px;
  }

  .sp-contactMessage {
    width: 190px;
  }

  .sp-contactMeassageText {
    font-size: 87.5%;
  }
}

/* sp-reason */
.sp-reason {
  background-color: #7BC6BC;
  padding: 40px 0px 110px;
}

.sp-reason .sp-title {
  color: #FFFFFF;
}

.sp-reason__subTitle {
  font-size: 125%;
  font-weight: 700;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.8;
  letter-spacing: 0.075em;
  color: #FFFFFF;
  text-align: center;
  margin-top: 30px;
}

.sp-reason__text {
  width: 100%;
  margin: 30px auto 0;
  text-align: center;
}

.sp-reason__text p {
  font-size: 94%;
  font-weight: 500;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.85;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  display: inline-block;
  text-align: left;
}

.sp-reason__list {
  display: block;
  width: 285px;
  background-color: #FFFFFF;
  padding: 20px 16px 16px 0px;
  margin: 30px auto 0;
  position: relative;
}

.sp-reason__list::before {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -30px;
  background-image: url(../images/re_01.png);
  width: 110px;
  height: 110px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sp-reason__list::after {
  content: "";
  position: absolute;
  bottom: -80px;
  right: -30px;
  background-image: url(../images/re_02.png);
  width: 110px;
  height: 110px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sp-reason__list li {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
}

.sp-reason__list span {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(../images/check-red.png);
  background-size: contain;
  margin: 0 6px auto;
  vertical-align: text-top;
}

.sp-reason__list li p {
  font-size: 87.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.57;
  letter-spacing: 0.06em;
  display: block;
  width: 85%;
}

.sp-reason__list span img {
  width: 100%;
}

@media only screen and (max-width:374px) {
  .sp-reason__text p {
    font-size: 81.2%;
  }
  
  .sp-reason__list::before {
    left: 0px;
  }
  
  .sp-reason__list::after {
    right: 0px;
  }
}


/* sp-service */
.sp-service {
  background-color: #D9E6FF;
  padding: 40px 0px;
}

.sp-service__box {
  width: 345px;
  margin: -10px auto 20px;
}

.sp-service__head {
  display: flex;
  justify-content: space-between;
  padding-right: 14px;
  padding-left: 14px;
  transform: translateY(50px);
}

.sp-service__headImage {
  display: block;
  width: 82px;
  height: 130px;
}

.sp-service__headImage img {
  width: 100%;
  height: 100%;
}

.sp-service__headConcept {
  display: block;
  transform: translateY(-25px);
}

.sp-service__headConcept p {
  font-size: 219%;
  font-weight: 700;
  font-family: "Roboto";
  line-height: 3.85;
  letter-spacing: 0.05em;
  color: #469D91;
}

.sp-service__content {
  width: 100%;
  background-color: #FFFFFF;
  border: 6px solid #469D91;
}

.sp-service__contentTitle {
  font-size: 125%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.8;
  letter-spacing: 0em;
  color: #469D91;
  text-align: center;
  margin-top: 40px;
}

.sp-service__contentText {
  text-align: center;
  margin: 28px auto 0;
}

.sp-service__contentText p {
  font-size: 94%;
  font-weight: 500;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.86;
  letter-spacing: 0.1em;
  display: inline-block;
  text-align: left;
}

.sp-service__contentBox {
  width: 240px;
  height: 350px;
  background-color: #FDF8B2;
  border-radius: 30px;
  margin: 16px auto 58px;
  position: relative;
}

.sp-service__contentBoxImage {
  display: block;
  width: 32%;
  margin: 0 auto;
  height: 90px;
  position: relative;
}

.sp-service__contentBoxImage img {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.sp-service__contentBoxTopic {
  font-size: 100%;
  font-weight: 800;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  background-color: #469D91;
  border-radius: 15px;
  width: 195px;
  margin: 10px auto;
  text-align: center;
}

.sp-service__contentBoxList {
  width: 195px;
  display: block;
  margin: 0 auto;
  padding-bottom: 30px;
}

.sp-service__contentBoxList li {
  font-size: 87.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #333333;
  white-space: nowrap;
}

.sp-service__contentBoxList li a {
  color: #CC0022;
  text-decoration: underline;
}

.sp-service__contentBoxList li a:hover {
  opacity: .6;
}

.sp-service__contentButton {
background-color: #CC0022;
display: block;
width: 315px;
margin: 0 auto 30px;
border-radius: 30px;
padding-top: 15px;
padding-bottom: 20px;
}

.sp-service__contentButton p {
font-size: 106.2%;
font-weight: 600;
font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
line-height: 1;
letter-spacing: 0.075em;
color: #FFFFFF;
position: relative;
text-align: center;
margin-right: 10%;
}

.sp-service__contentButton p:after {
content: "";
position: absolute;
top: 50%;;
transform: translateY(-50%);
background-image: url(../images/service_arrow.svg);
width: 24px;
height: 7px;
margin-left: 8px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all .3s;
}

.sp-service__contentButton:hover {
opacity: .8;
}

.sp-service__contentButton:hover p:after {
margin-left: 13px;
}

@media only screen and (max-width:374px) {
  .sp-service__box {
    width: 300px;
  }

  .sp-service__headConcept p {
    font-size: 175%;
  }

  .sp-service__contentButton {
    background-color: #CC0022;
    display: block;
    width: 280px;
    }
}

/* sp-service swiper */
.swiper-button-prev,
.swiper-button-next {
  width: 22px;
  height: 22px;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  margin: auto;
}

.swiper-button-prev:after {
  background-image: url(../images/arrow-left.svg);
}

.swiper-button-next:after {
  background-image: url(../images/arrow-right.svg);
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background-color: #B2B2B2;
}

.swiper-pagination-bullet-active {
  background-color: #469D91;
  }

  .swiper-pagination {
    transform: translateY(-10px);
  }

  /* sp-study */
.sp-study {
  background-color: #B4F0E8;
  padding-top: 25px;
  padding-bottom: 60px;
}

.sp-study .sp-title {
  padding-top: 20px;
}

.sp-study__wrap {
  width: 345px;
  margin: 28px auto 0;
  background-color: #FFFFFF;
}

.sp-study__wrap.-type2 {
  margin: 40px auto 0;
}

.sp-study__before {
  width: 315px;
  margin: 0 auto;
}

.sp-study__beforeMainCase {
  font-size: 137.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.2;
  letter-spacing: 0.075em;
  padding-top: 24px;
  text-align: center;
  color: #333333;
}

.sp-study__beforeMainCaseJob {
  font-size: 100%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.75;
  letter-spacing: 0.075em;
  text-align: center;
  display: block;
  width: 100%;
  padding-bottom: 24px;
  border-bottom: 3px dotted #CC0022;
}

.sp-study__beforeLogo {
  font-size: 237.5%;
  font-weight: 700;
  font-family: "Roboto";
  line-height: 1;
  letter-spacing: 0.075em;
  color: #CC0022;
  text-align: center;
  padding: 20px 0;
}

.sp-study__beforeMainTopic {
  font-size: 94%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background-color: #CC0022;
  border-radius: 30px;
  text-align: center;
  width: 240px;
  margin: 0 auto;
}

.sp-study__beforeMainTopic.-type2 {
  width: 288px;
}

.sp-study__beforeImage {
  margin: 20px auto 0;
  display: block;
  width: 290px;
}

.sp-study__beforeImage img {
  width: 100%;
}

.sp-study__beforeMainList {
  margin-bottom: 30px;
}

.sp-study__beforeMainList li{
  display: flex;
  margin-top: 10px;
}

.sp-study__beforeMainListBatu {
  display: block;
  width: 60px;
  height: 45px;
}

.sp-study__beforeMainListBatu img {
  display: block;
  width: 65%;
  height: 70%;
  margin-left: 0;
  margin-right: auto;
}

.sp-study__beforeMainList li p {
  font-size: 87.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.9;
  letter-spacing: 0.04em;
  display: inline-block;
  width: 90%;
}

.sp-study__beforeMainList li p span {
  background: linear-gradient(transparent 60%, rgba(253, 248, 178, 1) 60%);
}

.sp-study__service {
  max-width: 285px;
  margin: 0 auto;
  background-color: #FDF8B2;
  border: 5px solid #CC0022;
  border-radius: 30px;
}

.sp-study__serviceImage {
  margin: 5px auto 0;
  display: block;
  width: 165px;
}

.sp-study__serviceImage img {
  width: 100%;
}

.sp-study__serviceListTitle {
  font-size: 94%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background-color: #CC0022;
  border-radius: 30px;
  text-align: center;
  width: 240px;
  margin: 0 auto;
}

.sp-study__serviceList {
  display: block;
  width: 240px;
  margin: 20px auto;
}

.sp-study__serviceList li {
  display: flex;
  justify-content: space-between;
}

.sp-study__serviceList li span {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: auto;
}

.sp-study__serviceList li span img {
  width: 100%;
  height: 100%;
}

.sp-study__serviceListItem {
  font-size: 100%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.8;
  letter-spacing: 0.06em;
  width: 205px;
  display: block;
}

.sp-study__serviceContent {
  display: block;
  width: 225px;
  margin: 0 auto 30px;
  background-color: #469D91;
}

.sp-study__serviceContent:hover {
  opacity: .8;
}

.sp-study__serviceContent p {
  font-size: 94%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  padding-top: 7.5px;
  padding-bottom: 7.5px;
  transform: translateX(-10px);
  position: relative;
}

.sp-study__serviceContent p:after {
  content: "";
  position: absolute;
  top: 50%;;
  transform: translateY(-50%);
  background-image: url(../images/modal_open.svg);
  width: 12px;
  height: 12px;
  margin-left: 8px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* sp-study modal */
.hidden {
  display: none;
}

#mask_01,#mask_02 {
  background: rgba(112, 112, 112, 1);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 6;
}

#modal_01,#modal_02 {
  display: block;
  width: 330px;
  height: 600px;
  margin: auto;
  background-color: #FFFFFF;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 8;
}

.modal__close {
  width: 40px;
  height: 40px;
  background-color: #333333;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.modal__close img {
  display: block;
  margin: 12px auto 0;
}

.modal__title {
  font-size: 94%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background-color: #CC0022;
  border-radius: 30px;
  text-align: center;
  width: 240px;
  margin: 40px auto 0;
}

.modal__list {
  padding-right: 20px;
  padding-left: 20px;
}

.modal__listItem {
  padding-top: 25px;
}

.modal__listItemTitle {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #CC0022;
}

.modal__listItemTitle span {
  display: inline-block;
  width: 24px;
  height: 24px;
}

.modal__listItemTitle span img {
  width: 100%;
  height: 100%;
}

.modal__listItemTitle p {
  font-size: 100%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.4;
  letter-spacing: 0.06em;
  width: 290px;
  display: block;
  text-align: center;
}

.modal__listItemContent {
  font-size: 87.5%;
  font-weight: 500;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.9;
  letter-spacing: 0.02em;
  padding-top: 5px;
}

@media only screen and (max-width:374px) {
  #modal_01,#modal_02 {
    width: 310px;
    height: 500px;
  }

  .modal__listItemContent {
    font-size: 77.5%;
  }

  .modal__listItemTitle {
    padding-bottom: 8px;
  }

  .modal__listItem {
    padding-top: 15px;
  }
}

.sp-study__after {
  width: 315px;
  margin: 10px auto 0; 
}

.sp-study__afterHead {
  display: flex;
  justify-content: center;
}

.sp-study__afterLogo {
  font-size: 237.5%;
  font-weight: 700;
  font-family: "Roboto";
  line-height: 1;
  letter-spacing: 0.075em;
  color: #CC0022;
  margin: auto 0;
}

.sp-study__afterImage {
  width: 140px;
}

.sp-study__afterImage img {
  width: 110%;
}

.sp-study__afterList {
  padding-bottom: 50px;
}

.sp-study__afterList li{
  display: flex;
  margin-top: 10px;
}

.sp-study__afterListHanamaru {
  display: block;
  width: 60px;
  height: 45px;
}

.sp-study__afterListHanamaru img {
  width: 100%;
  height: 100%;
}

.sp-study__afterList li p {
  font-size: 87.5%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.85;
  letter-spacing: 0.02em;
  display: inline-block;
  width: 270px;
}

.sp-study__afterList li p span {
  background: linear-gradient(transparent 60%, rgba(253, 248, 178, 1) 60%);
}

@media only screen and (max-width:374px) {
  .sp-study__wrap {
    width: 300px;
  }

  .sp-study__before {
    width: 300px;
  }

  .sp-study__after {
    width: 300px;
  }

  .sp-study__beforeMainList li p {
    font-size: 81.2%;
  }

  .sp-study__afterList li p {
    font-size: 81.2%;
  }
}


/* sp-company */
.sp-company {
  background-color: #333333;
  position: relative;
  z-index: 0;
  padding-bottom: 30px;
}

.sp-company::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/company_bg.png);
  background-position: top 0 right 30%;
  background-size: cover;
  background-repeat: no-repeat;
}

.sp-company .sp-title {
  position: relative;
  z-index: 4;
  color: #FFFFFF;
  padding-top: 40px;
  font-family: "Hiragino Kaku Gothic Pro", "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", Arial, Helvetica, sans-serif;
}

.sp-companyContent {
  position: relative;
  z-index: 4;
}

.sp-companySubtitle {
  font-size: 100%;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.075em;
  color: #FFFFFF;
  text-align: center;
  margin-top: 15px;
}

.sp-companyText {
  margin: 20px auto 0;
  text-align: center;
  line-height: 100%;
}

.sp-companyText p {
  font-size: 87.5%;
  font-weight: 300;
  font-family: "Hiragino Kaku Gothic ProN", "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", sans-serif;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  display: inline-block;
  text-align: left;
}

.sp-companyText p span {
  font-size: 57%;
  letter-spacing: 0.05em;
  line-height: 1.9;
}

.sp-companyLogo {
  width: 116px;
  height: 35px;
  margin: 20px auto 0;
  position: relative;
  z-index: 2;
}

.sp-companyLogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


@media only screen and (max-width:400px) {
  .sp-companySubtitle {
    font-size: 81.2%;
  }
}

@media only screen and (max-width:374px) {
  .sp-companyText p {
    font-size: 75%;
  }
}

/* header */
.path__listArrow img {
  margin-top: 1px;
  width: 22px;
  height: 12px;
}

.Container{
  padding-right: 0;
  padding-left: 0;
}

#HeaderArea1{
  padding-right: 15px;
  padding-left: 15px;
}

#HeaderArea2{
  padding-right: 15px;
  padding-left: 15px;
}

#TopicPath{
  padding-right: 15px;
  padding-left: 15px;
}

#TopicPath ul{
  padding-right: 0;
  padding-left: 0;
  max-width: 1275px;
  width: 100%;
}

@media only screen and (max-width:800px) {
  .path__listArrow img {
    margin-top: 3px;
  }

  #TopicPath ul li {
    font-size: 50%;
  }
}

@media only screen and (max-width:994px) {
  .JS #TopicPath{
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media only screen and (max-width:994px) {
  .JS #TopicPath ul{
    padding-right: 0;
    padding-left: 0;
  }
}

/* bottom_util02 */
div.bottom_util02 {
	background-color: #fff;
	padding: 10px 0 10px 0;
	width: 100%;
}

div.bottom_util02 p {
	background-color: #fff;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 80px 0 0;
	text-align: right;
	width: 965px;
}

@media screen and (max-width:998px){
	div.bottom_util02 {
		background-color:#fff;
		box-sizing: border-box;
		padding: 10px 10px 10px 0;
		width:100%;
	}

	div.bottom_util02 p {
		text-align:right;
		padding: 0 60px 0 0;
		width: 100%;
	}
}


/* footer */
.FatMenuWide{
  padding-right: 15px;
  padding-left: 15px;
}

.FatMenuSet{
  padding-right: 0;
  padding-left: 0;
  max-width: 1275px;
  width: 100%;
}

#FooterArea{
  padding-right: 15px;
  padding-left: 15px;
}

#FooterPageTop{
  right: 0;
}