@charset "utf-8";
.technology {
    margin: 0;
    padding: 0;
}
.body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
.technology a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
.technology ul,
.technology li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
section,
article,
aside,
hgroup,
header,
footer,
nav,
dialog,
figure,
menu,
video,
audio,
mark,
time,
canvas,
details {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    background: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.technology figcaption {
    font-weight: normal;
}
.technology {
    font-family:  "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #343434;
    width: 100%;
    min-width: 769px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    line-height: 1.8;
    font-weight: bold;
    font-size: 16px;
    background-color: #F8F8F8;
    position: relative;
}
.technology a {
    color: #1a0b08;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}
/* a:hover {
    opacity: .7;
} */
.technology a img {
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    text-decoration: none;
}
.technology figure {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    background: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.pc {
    display: block;
}
.sp {
    display: none;
} 
.technology .en {
    font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.inner {
    max-width: 1024px;
    width: 90%;
    margin: 0 auto;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.flex.rowrev {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
/* 下層共通 */
.technology .black {
    background-color: #343434;
}
.technology .gray {
    background-color: #DBDBDB;
}
/* トップのタイトルとリンクボタン */
.technology .sub_top {
    padding: 145px 0 130px;
}
.technology .sub_top h2 {
    font-size: 42px;
    margin-bottom: 10px;
}
.technology .sub_top p {
    font-size: 21px;
}
.technology .sub_top ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 60%;
    border: 1px solid #EDEDED;
    border-radius: 10px;
    margin-top: 30px;
}
.technology .sub_top ul li {
    width: calc(100% / 3);
}
.technology .sub_top ul li a {
    display: block;
    position: relative;
    font-size: 14px;
    background-color: #fff;
    padding: 20px 10px;
    font-weight: normal;
    border-right: 1px solid #EDEDED;
}
.technology .sub_top ul li a:hover {
    opacity: .7;
}
.technology .sub_top ul li:first-child a {
    border-radius: 10px 0 0 10px;
}
.technology .sub_top ul li:last-child a {
    border-radius: 0 10px 10px 0;
    border-right: unset;
}
.technology .sub_top ul li a::after {
    content: '';
    width: 5px;
    height: 5px;
    border-left: 2px solid #11438A;
    border-bottom: 2px solid #11438A;
    -webkit-transform: translateY(-50%) rotate(-45deg);
        -ms-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
    -webkit-transform-origin: 25% 65%;
        -ms-transform-origin: 25% 65%;
            transform-origin: 25% 65%;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    position: absolute;
    top: 50%;
    right: 15px;
    margin: auto;
}
/* グレーのエリア */
.technology .sub_black {
    padding: 70px 0;
    color: #fff;
}
.technology .sub_black h2 {
    font-size: 36px;
    border-bottom: 2px solid #fff;
    display: inline-block;
    margin-bottom: 25px;
}
.technology .sub_black p {
    font-size: 30px;
}
/* タイトルとテキスト */
.technology .subCont h3 {
    font-size: 20px;
    margin-bottom: 20px;
}
/* タイトルとテキスト、写真横 */
.technology .subCont02 {
    margin: 0 auto 50px;
}
.technology .subCont02 .subCont02_txt {
    width: 50%;
}
.technology .subCont02 figure {
    width: 47%;
}
.technology .subCont02 .subCont02_txt h3 {
    font-size: 20px;
    margin-bottom: 20px;
}
.technology .subCont02 .subCont02_txt h3 span {
    font-size: 16px;
}
.technology .subCont02 figcaption {
    display: block;
    font-size: 12px;
    line-height: 1.5;
}
/* タイトル（中）とテキスト */
.technology .subCont03 h3 {
    font-size: 38px;
    margin-bottom: 20px;
}
/* モーダル */
.technology .modalBtn {
    text-align: center;
}
.technology .modalOpen {
    border: none;
    position: relative;
    background-color: #fff;
    padding: 0 55px 0 20px;
    height: 35px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 16px;
    font-weight: bold;
    font-family:  "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    border-radius: 20px;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    margin: 20px auto 0;
}
.technology .modalOpen:hover {
    cursor: pointer;
    background-color: #11438A;
}
.technology .modalOpen p {
    color: #11438A;
    line-height: 1;
    text-align: left;
}
.technology .modalOpen:hover p {
    color: #fff;
}
.technology .modalOpen span {
    color: #fff;
    z-index: 1;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}
.technology .modalOpen:hover span {
color: #11438A;
font-size: 22px;
}
.technology .modalOpen span::before {
content: '';
position: absolute;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
left: 50%;
top: 53%;
display: inline-block;
width: 22px;
height: 22px;
border-radius: 30px;
background-color: #11438A;
z-index: -1;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.technology .modalOpen:hover span::before {
    background-color: #fff;
    -webkit-transform:translate(-50%, -50%) scale(1.2);
        -ms-transform:translate(-50%, -50%) scale(1.2);
            transform:translate(-50%, -50%) scale(1.2);
}
.technology .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(170, 170, 170, .9);
}
.technology .modal .modalInn {
    max-width: 875px;
    width: 90%;
    margin: 0 auto;
    padding-top: 100px;
}
.technology .modal .modal-box {
    background-color: #343434;
    margin: 100px auto;
    max-width: 1024px;
    width: 90%;
    -webkit-animation-name: modalopen;
            animation-name: modalopen;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    position: relative;
    color: #fff;
    padding: 50px 0 100px;
    overflow-x: hidden;
}
@-webkit-keyframes modalopen {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes modalopen {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.technology .modal .modal-box h2 {
    background-color: #fff;
    color: #343434;
    font-size: 30px;
    padding-left: 5%;
}
.technology .modal .modal-box .modal_top {
    margin: 0 auto 45px;
}
.technology .modal .modal-box .modal_top h3 {
    font-size: 24px;
    display: inline-block;
    border-bottom: 2px solid #fff;
    margin-bottom: 40px;
}
.technology .modal .modal-box .modal_top h4 {
    font-size: 20px;
    margin-bottom: 10px;
}
.technology .modal .modal-box .modal_top p {
    font-size: 14px;
}
.technology .modal .modal-box .modal_top .modal_topTxt, .technology .modal .modal-box .modal_top .modal_topFig {
    width: 47%;
}
.technology .modal .modal-box .modalClose.close01 {
    position: fixed;
    top: 4%;
    right: 6%;
    width: 50px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 100;
}
.technology .modal .modal-box .modalClose.close01:hover {
    opacity: .7;
}
@media screen and (min-width: 1165px){
    .technology .modal .modal-box .modalClose.close01 {
      right: calc(50% - 505px);
    }
}
.technology .modal .modal-box .modalClose.close02 {
    max-width: 125px;
    background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
padding: 3px 10px 3px 20px;
margin: 100px auto 0;
border-radius: 30px;
-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
cursor: pointer;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
align-items: center;
}
.technology .modal .modal-box .modalClose.close02:hover {
    opacity: .7;
}
.technology .modal .modal-box .modalClose.close02 p {
    line-height: 1;
    color: #11438A;
}
.technology .modal .modal-box .modalClose.close02 span {
    width: 22px;
    display: block;
}
.technology .modal .modal-box .modalClose.close02 span img {
    vertical-align: middle;
}
/* スマホ時スライダー */
.technology .tech_slider .swiper-container {
    position: relative;
}
.technology .tech_slider ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.technology .tech_slider ul li {
    width: 32%;
}
.technology .tech_slider ul li.swiper-slide {
    height: auto;
}
/* sub_foot */
.technology .sub_foot {
    padding-bottom: 100px;
}
.technology .sub_foot .sub_footBook {
    max-width: 710px;
    margin: 0 auto;
    background-color: #fff;
    border: 5px solid #11438A;
    padding: 30px 50px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.technology .sub_foot .sub_footBook figure {
    width: 30%;
}
.technology .sub_foot .sub_footBook .sub_footBook_txt {
    width: 67%;
}
.technology .sub_foot .sub_footBook .sub_footBook_txt p {
    font-size: 20px;
    color: #11438A;
    margin-bottom: 20px;
}
.technology .sub_foot .sub_footBook .sub_footBook_txt a {
    display: inline-block;
    color: #11438A;
    position: relative;
    margin-left: 15px;
    z-index: 1;
}
.technology .sub_foot .sub_footBook .sub_footBook_txt a::before {
    content: '';
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    display: inline-block;
    width: 150px;
    height: 33px;
    border: 2px solid #11438A;
    border-radius: 20px;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    z-index: -1;
}
.technology .sub_foot .sub_footBook .sub_footBook_txt a:hover {
    color: #fff;
}
.technology .sub_foot .sub_footBook .sub_footBook_txt a:hover::before {
    background-color: #11438A;
}
/*  */
.technology .sub_foot .sub_footBtn {
    margin: 100px auto 0;
}
.technology .sub_foot .sub_footBtn h3 {
    font-size: 26px;
    text-align: center;
    margin-bottom: 40px;
}
.technology .sub_foot .sub_footBtn ul {
    max-width: 710px;
    margin: 0 auto;
}
.technology .sub_foot .sub_footBtn li {
    width: 48%;
    border-radius: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.technology .sub_foot .sub_footBtn li a {
    overflow: hidden;
}
.technology .sub_foot .sub_footBtn li a figure {
    height: 50%;
    overflow: hidden;
    border-radius: 30px 30px 0 0;
}
.technology .sub_foot .sub_footBtn li a figure img {
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.technology .sub_foot .sub_footBtn li a:hover figure img {
    opacity: .8;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.technology .sub_foot .sub_footBtn li a .sub_footBtn_txt {
    padding: 25px 20px 15px;
}
.technology .sub_foot .sub_footBtn li a .sub_footBtn_txt h4 {
    font-size: 24px;
    margin-bottom: 10px;
}
/* アコーディオン */
.technology .tech_acordion h3.accordion__button {
    width: 100%;
    background-color: #fff;
    border: 1px solid #343434;
    font-size: 14px;
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0 auto;
  }
  .technology .tech_acordion h3.accordion__button::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 45%;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: block;
    width: 10px;
    height: 10px;
    border-top: solid 2px #343434;
    border-right: solid 2px #343434;
    -webkit-transform: translateY(-50%) rotate(135deg);
        -ms-transform: translateY(-50%) rotate(135deg);
            transform: translateY(-50%) rotate(135deg);
  }
  .technology .tech_acordion.open h3.accordion__button {
    background-color: #343434;
    color: #fff;
  }
  .technology .tech_acordion.open h3.accordion__button::after {
    -webkit-transform: translateY(-20%) rotate(315deg);
        -ms-transform: translateY(-20%) rotate(315deg);
            transform: translateY(-20%) rotate(315deg);
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
  }
  .technology .tech_acordion .accordion__body {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .technology .tech_acordion .accordion__text {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #343434;
    border-top: none;
    font-size: 14px;
  }
  .technology .tech_acordion .accordion__text span {
    display: block;
    font-size: 12px;
    margin-top: 20px;
    font-weight: normal;
  }
  /* 固定矢印 */
  .techPagetop.pagetop {
    position: fixed;
    z-index: 100;
}
@media only screen and (max-width: 768px) {
    .technology {
        min-width: 100%;
        font-size: 14px;
    }
	.pc {
        display: none!important;
    }
    .sp {
        display: block!important;
    }
    .flex {
        display: block;
    }
    /* スマホ時スライダー */
    .technology .tech_slider ul li.swiper-slide {
        max-width: 500px;
        width: 90%;
        /* height: 500px; */
    }
/* 下層共通 */
/* トップのタイトルとリンクボタン */
.technology .sub_top {
    padding: 60px 0 130px;
}
.technology .sub_top h2 {
    font-size: 32px;
}
.technology .sub_top p {
    font-size: 16px;
}
.technology .sub_top ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    margin-top: 65px;
    border: none;
}
.technology .sub_top ul li {
    width: 50%;
}
.technology .sub_top ul li a {
    border-right: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;
}
.technology .sub_top ul li:first-child a {
    border-radius: 10px 0 0 0;
    border-top: 1px solid #EDEDED;
    border-left: 1px solid #EDEDED;
}
.technology .sub_top ul li:nth-child(2) a {
    border-radius: 0 10px 10px 0;
    border-top: 1px solid #EDEDED;
}
.technology .sub_top ul li:last-child a {
    border-radius: 0 0 10px 10px;
    border-right: 1px solid #EDEDED;
    border-left: 1px solid #EDEDED;
}
/* グレーのエリア */
.technology .sub_black h2 {
    font-size: 24px;
    margin-bottom: 15px;
}
.technology .sub_black p {
    font-size: 20px;
}
/* タイトルとテキスト、写真横 */
.technology .subCont02 {
    width: 100%;
    margin: 0 auto 80px;
}
.technology .subCont02 .subCont02_txt {
    width: 100%;
}
.technology .subCont02 figure {
    width: 100%;
    margin-top: 20px;
}
.technology .subCont02 figcaption {
    font-size: 10px;
}
/* タイトル（中）とテキスト */
.technology .subCont03 h3 {
    font-size: 28px;
    margin-bottom: 10px;
}
/* モーダル */
.technology .modal .modalInn {
    padding-top: 70px;
}
.technology .modal .modal-box {
    margin: 75px auto 60px;
    padding: 20px 0 100px;
}
.technology .modal .modal-box h2 {
    font-size: 20px;
}
.technology .modal .modal-box .modal_top h3 {
    margin-bottom: 30px;
}
.technology .modal .modal-box .modal_top .modal_topTxt, .technology .modal .modal-box .modal_top .modal_topFig {
    width: 100%;
    margin-top: 20px;
}
.technology .modal .modal-box .modalClose.close01 {
    top: 3%;
    width: 45px;
}
.technology .modal .modal-box .modalClose.close02 {
    margin: 200px auto 0;
}
/* スマホ時スライダー */
.technology .tech_slider .swiper-pagination {
    position: absolute;
    bottom: -30px;
    width: auto;
    left: 0;
}
/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin-right: 15px;
}
/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
  height: 10px;
  width: 10px;
  background-color: #fff;
}
.swiper-pagination.dot_black .swiper-pagination-bullet {
    background-color: #000;
}
.swiper-pagination.dot_gray .swiper-pagination-bullet {
    background-color: #989493;
}
/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin-right: 10px;
}
/* sub_foot */
.technology .sub_foot {
    padding-bottom: 80px;
}
.technology .sub_foot .sub_footBook {
    padding: 30px 0;
    text-align: center;
}
.technology .sub_foot .sub_footBook figure {
    width: 50%;
    margin: 0 auto;
}
.technology .sub_foot .sub_footBook .sub_footBook_txt {
    width: 100%;
}
.technology .sub_foot .sub_footBook .sub_footBook_txt p {
    margin:0 auto 20px;
}
.technology .sub_foot .sub_footBook .sub_footBook_txt a {
    margin-left: 0;
}
/*  */
.technology .sub_foot .sub_footBtn h3 {
    font-size: 26px;
    text-align: left;
}
.technology .sub_foot .sub_footBtn li {
    width: 100%;
}
.technology .sub_foot .sub_footBtn li:first-child {
    margin-bottom: 30px;
}
.technology .sub_foot .sub_footBtn li a .sub_footBtn_txt {
    padding: 30px;
}
.technology .sub_foot .sub_footBtn li a .sub_footBtn_txt h4 {
    font-size: 24px;
}
.technology .sub_foot .sub_footBtn li a .sub_footBtn_txt p {
    font-size: 16px;
}
/* アコーディオン */
.technology .tech_acordion h3.accordion__button {
    font-size: 10px;
    padding: 2px 10px;
  }
  .technology .tech_acordion h3.accordion__button::after {
    width: 7px;
    height: 7px;
  }
  .technology .tech_acordion .accordion__text {
    font-size: 10px;
  }
    /* 固定矢印 */
    .techPagetop.pagetop {
       bottom: 30px;
    }
}