/* ---------------------------------------------------------
   protimes.css【プロタイムズについて】
----------------------------------------------------------*/
/*********************
Common
*********************/
.pc {display: block;}
.sp {display: none;}
@media screen and (max-width: 767px) {
   .pc {display: none!important;}
   .sp {display: block!important;}
}
img {max-width: 100%;}
h2 {
   font-weight: 900;
}

/*********************
Buottun
*********************/
.cube_btn_wrap {
   display: inline-block;
   vertical-align: top;
   padding-bottom: 4px;
   transition: 0.2s all ease 0s;
}
.cube_btn_wrap a:link {
   display: block;
   -webkit-transition: .3s;
   transition: .3s;
}
.cube_btn {
   position: relative;
   padding: 15px;
   font-weight: bold;
   text-decoration: none;
   background: #ff4119;
   color: #fff;
   box-shadow: 0 4px 0 #b03318;
   border-radius: 5px;
}

.cube_btn::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: url(../img/btn-ptn.png) repeat;
}

.arrow02::after {
   position: absolute;
   top: calc(50% - 12px);
   right: 30px;
   content: "";
   width: 24px;
   height: 24px;
   background: url(../img/top-arrow.png) center/contain no-repeat;
}

.cube_btn .btn_txt {
   display: inline-block;
   font-weight: bold;
}
@media screen and (max-width: 767px) {
   .cube_btn .btn_txt {
      text-align: left;
      padding-right: 10px;
   }
   .arrow02::after {
      top: calc(50% - 6px);
      right: 5px;
      width: 12px;
      height: 12px;
   }
}
/*********************
Wrapper
*********************/
#protimes_contents .contents_inner {
   width: 980px;
   margin: 0 auto;
   font-family: 'Noto Sans JP', sans-serif;
}
@media screen and (max-width: 767px) {
   #protimes_contents .contents_inner {
      width: 100%;
   }
   
}

/*********************
Content2
*********************/
#Content2 .Inner {
   position: relative;
}
#Content2 .BgImg {
   position: relative;
   z-index: 1;
}
#Content2 .Content2Text {
   position: absolute;
   top: 50px;
   left: 40px;
   z-index: 2;
}
#Content2 .Content2Text h2 {
   margin-bottom: 30px;
   color: #EB6120;
   font-size: 38px;
   font-family: 'YuMincho','Yu Mincho',serif;
}
#Content2 .Content2Text p {
   font-size: 24px;
   line-height: 1.5em;
   color: #2B2B2B;
   font-weight: 300;
}
@media screen and (max-width: 767px) {
   #Content2 .Content2Text {
      position: relative;
      top: 0;
      left: 0;
      z-index: 2;
      padding: 20px 0 20px 20px;
      box-sizing: border-box;
  }
  #Content2 .Content2Text h2 {
   font-size: 20px;
   text-align: center;
   margin-bottom: 20px;
   }
   #Content2 .Content2Text .SpBox {
      display: flex;
      align-items: flex-start;
   }
   #Content2 .Content2Text .SpBox p:first-child {
      margin-right: 15px;
      font-size: 12px;
   }
   #Content2 .Content2Text .SpBox img {
      width: 133px;
      flex-shrink: 0;
   }
}

/*********************
Content3
*********************/
#Content3 .Inner {
   position: relative;
}
#Content3 .BgImg {
   display: block;
   position: relative;
   z-index: 1;
}
#Content3 .Content3Text {
   position: absolute;
   top: 40px;
   right: 40px;
   z-index: 2;
}
#Content3 .Content3Text h2 {
   color: #2B2B2B;
   margin-bottom: 20px;
   font-size: 38px;
   font-family: 'YuMincho','Yu Mincho',serif;
   text-align: right;
   line-height: 1.3em;
}
#Content3 .Content3Text p {
   font-size: 24px;
   line-height: 1.5em;
   color: #2B2B2B;
   font-weight: 300;
}
@media screen and (max-width: 767px) {
   #Content3 .Inner {
      background: #F2F2F2;
   }
   #Content3 .Content3Text {
      position: relative;
      top: 0;
      left: 0;
      z-index: 2;
      padding: 20px 20px 20px 0;
      box-sizing: border-box;
  }
  #Content3 .Content3Text h2 {
   font-size: 20px;
   text-align: center;
   margin-bottom: 20px;
   }
   #Content3 .Content3Text .SpBox {
      display: flex;
      align-items: flex-start;
      flex-direction: row-reverse;
   }
   #Content3 .Content3Text .SpBox p:first-child {
      font-size: 12px;
   }
   #Content3 .Content3Text .SpBox img {
      width: 133px;
      flex-shrink: 0;
      margin-right: 15px;
   }
}

/*********************
Content4
*********************/
#Content4 .Inner {
   position: relative;
   padding: 60px 0;
}
#Content4 .PcIcon {
   position: absolute;
   top: 20px;
   right: 40px;
}
#Content4 h2 {
   margin-bottom: 20px;
   font-size: 40px;
   line-height: 1.1em;
   text-align: center;
   font-weight: 400;
}
#Content4 h2 span:nth-child(1) {
   color: #EB6120;
   font-size: 24px;
   display: block;
}
#Content4 h2 span:nth-child(2) {
   font-size: 16px;
   display: block;
   color: #757575;
   letter-spacing: 2px;
   font-weight: 500;
}
#Content4 h3 {
   text-align: center;
   font-size: 22px;
   font-weight: 500;
   margin-bottom: 20px;
}
#Content4 .Content4Text {
   font-size: 20px;
   padding: 0 20px;
   line-height: 1.8em;
   margin-bottom: 40px;
   color: #2B2B2B;
   font-weight: 300;
}
#Content4 .Content4Img1,
#Content4 .Content4Img2 {
   display: block;
   margin: 0 auto 20px;
   text-align: center;
}
#Content4 .Content4Img2 + p {
   font-size: 20px;
   line-height: 1.8em;
   color: #2B2B2B;
   font-weight: 300;
}


@media screen and (max-width: 767px) {
   #Content4 .Inner {
      padding: 30px 0;
   }
   #Content4 h2 {
      font-size: 20px;
      margin-bottom: 15px;
   }
   #Content4 h2 span:nth-child(1) {
      font-size: 12px;
  }
   #Content4 h2 span:nth-child(2) {
      font-size: 10px;
      letter-spacing: 1px;
   }
   #Content4 h3 {
      font-size: 14px;
      padding: 0 20px;
      line-height: 1.3em;
      margin-bottom: 15px;
   }
   #Content4 .Content4Text {
      font-size: 12px;
      padding: 0;
      margin-right: 10px;
   }
   #Content4 .SpIcon {
      width: 90px;
      margin-top: 5px;
   }
   #Content4 .SpBox {
      display: flex;
      align-items: flex-start;
      padding: 0 20px;
   }
   #Content4 .SpBox p:first-child {
      font-size: 12px;
   }
   #Content4 .Content4Img2 {
      width: 336px;
   }
   #Content4 .Content4Img2 + p {
      padding: 0 20px;
      font-size: 12px;
      line-height: 1.8em;
   }
}

/*********************
Content5
*********************/
#Content5 .Inner {
   padding: 60px 0;
   background: #F2F2F2;
   text-align: center;
   width: 100vw;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
   #Content5 .Inner {
      padding: 30px 0;
   }
   #Content5 .Inner img {
      width: 336px;
   }
}

/*********************
Content6
*********************/
#Content6 .Inner {
   padding: 60px 0;
}
#Content6 h2 {
   color: #EB6120;
   font-size: 38px;
   font-family: 'YuMincho','Yu Mincho',serif;
   text-align: center;
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: solid 4px #FFE6DE;
}
#Content6 h2 span {
   color: #EB6120;
   font-size: 12px;
   margin-left: -20px;
}
#Content6 .Inner ul {
   display: flex;
   align-items: center;
}
#Content6 .Inner ul li:nth-child(1) {
   width: 286px;
   margin-right: 60px;
   flex-shrink: 0;
}
#Content6 .Inner ul li:nth-child(2) {
   font-size: 20px;
   line-height: 1.8em;
   color: #2B2B2B;
   font-weight: 300;
}
#Content6 .Inner .GoodNotes {
   font-size: 14px;
   line-height: 1.5em;
   display: inline-block;
   font-weight: 300;
   margin-top: 10px;
}
@media screen and (max-width: 767px) {
   #Content6 .Inner {
      padding: 20px 20px 0;
   }
   #Content6 h2 {
      font-size: 18px;
      padding-bottom: 10px;
      line-height: 1.5em;
   }
   #Content6 h2 span {
      margin-left: -10px;
   }
   #Content6 .Inner ul {
      flex-flow: column;
      margin-bottom: 30px;
      justify-content: center;
   }
   #Content6 .Inner ul li:nth-child(1) {
      width: 220px;
      margin: 0 0 20px;
   }
   #Content6 .Inner ul li:nth-child(2) {
      font-size: 12px;
      line-height: 1.8em;
   }
   #Content6 .Inner .GoodNotes {
      font-size: 12px;
   }
}

/*********************
Content7
*********************/
#Content7 .Inner {
   padding: 80px;
   text-align: center;
   background: #FFFBEF;
   width: 100vw;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}
#Content7 h2 {
   color: #EB6120;
   font-size: 42px;
   margin-bottom: 30px;
   font-weight: 600;
}
#Content7 .Inner p:nth-child(2) {
   font-size: 28px;
   border-bottom: dotted 1px #707070;
   display: inline-block;
   padding-bottom: 4px;
   margin-bottom: 20px;
}
#Content7 .Inner p:nth-child(3) {
   font-size: 20px;
   line-height: 1.8em;
   color: #2B2B2B;
   font-weight: 300;
}
@media screen and (max-width: 767px) {
   #Content7 .Inner {
      padding: 20px;
      box-sizing: border-box;
   }
   #Content7 h2 {
      font-size: 20px;
      margin-bottom: 20px;
   }
   #Content7 .Inner p:nth-child(2) {
      font-size: 12px;
   }
   #Content7 .Inner p:nth-child(3) {
      font-size: 12px;
      text-align: left;
   }
}

/*********************
Content8
*********************/
#Content8 .Inner {
   padding-top: 40px;
}

/*********************
Content9
*********************/
#Content9 .Inner {
   margin: 40px 0 0;
}

#Content9 .Inner .triangle-imgwrap {
   position: relative;
   width: 568px;
   margin: 0 auto;
}
 
#Content9 .Inner .triangle-imgwrap .cube_btn_wrap {
   position: absolute;
   bottom: 20px;
   right: 30px;
}
 
#Content9 .Inner .triangle-imgwrap .about_new {
   width: 220px;
}
 
#Content9 .Inner .triangle-imgwrap .cube_btn {
   background-color: #eb6120;
   padding: 10px;
}
 
#Content9 .Inner .triangle-imgwrap .cube_btn .cube_btn .btn_txt {
   text-align: center;
   line-height: 1.5;
   padding-left: 25px;
}

@media screen and (max-width: 767px) {
   #Content9 .Inner .triangle-imgwrap {
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
   }
   #Content9 .Inner .triangle-imgwrap .cube_btn_wrap {
      bottom: 12px;
      right: 20px;
   }
   #Content9 .Inner .triangle-imgwrap .cube_btn {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 6px 10px;
   }
}