/*---------------------------
    basic-design
---------------------------*/
html{font-size: 62.5%;}
body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
ul{
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
li{text-decoration: none;}
#header{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}
#logo img{height: 34px;}
.header-flex{
  display: flex;
  justify-content: flex-end;
  max-width: 1200px;
  width: 100%;
  margin: 15px auto;
}
.header-logo-flex{
  display: flex;
  align-items: center;
}
.header-button{
    font-weight: bold;
    padding: 20px 20px;
    background-color: red;
    border-radius: 8px;
}
.wrap{overflow: hidden;}
.container{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.container img{width: 100%;}
section{
    width: 100%;
    padding: 40px 0;
}
footer{
  background: linear-gradient(to right, #852CCC, #CE3854);
  color: #fff;
  text-align: center;
  padding: 40px 0;
}
.footer-flex{
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: baseline;
  margin: 0 auto;
  text-align: left;
}
.footer-flex p{
  font-size: 1.3rem;
  margin: 0;
}
.footer-flex img{height: 34px;}
.footer-flex-left{
  width: 700px;
  display:flex; 
  justify-content: space-between;
}
.spOnly{display: none;}

/*---------------------------
    basic-text
---------------------------*/
a{font-size: 1.8rem;text-decoration: none;}
p{font-size: 1.8rem;}
h1{
  margin:10px 0 15px;
  font-size: 4.6rem;
  font-weight: bold;
  line-height: 1.1;
}
h2{
  margin:30px 0 60px;
  font-size: 3.8rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}
h3{
  margin:15px 0 20px;
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.5;
}
small{
  margin-top : 40px;
  font-size: 1.2rem;
  display: inline-block;
}

/*---------------------------
    animation どうするか早めに解決する。
---------------------------*/
.fade-out{
  opacity: 0;
  transform: translate(0,70px);
  -webkit-transform: translate(0,70px);
}
.fade-in{
  opacity: 1.0;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
  transition: .8s;
}

/*---------------------------
    MV
---------------------------*/
#mv{
  background-image: url(images/MV.jpg);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 80px 0 50px 0;
  position: relative;
}
.mv-button{
  position: relative;
  width: 260px;
  padding: 10px;
  box-shadow: rgba(0,0,0,0.5) 0 5px 20px;
  border-radius: 30px;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #000;
  background: #fff;
  transition: 0.5s;
}
.mv-button:hover{
  opacity: 0.6;
  box-shadow: #fff 0 0 20px 2px;
  transition: 0.5s;
}
#mv .tanium-logo{
  height: 50px;
  width: auto;
  margin-bottom: 20px;
}

/* バナー */
.mv_bnr {
  position: absolute;
  right: 0;
  bottom: -20px;
  width: 36%;
}
.mv_bnr_link {
  display: block;
  transition: 0.5s;
}
.mv_bnr_link:hover {
  opacity: .8;
}
.mv_bnr_img {
  max-width: 100%;
}

/*---------------------------
    section1
---------------------------*/
.section1-h2{
  font-size: 4rem;
  text-align: center;
}
.section1-image{
  width: 100%;
  max-width: 1200px;
}

/*---------------------------
    section2
---------------------------*/
#section2-1,#section2-2{
  padding: 0;
  position: relative;
}
#section2-1::after,#section2-2::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.1));
}
#section2-1{
  background-image: url(images/section2-gradation-bg01.png);
  background-size: cover;
  background-position: center top;
}
#section2-2{
  background-image: url(images/section2-gradation-bg02.png);
  background-size: cover;
  background-position: center top;
}
.section2-flex{
  display: flex;
}
.section2-text, .section2-image{
  flex-basis: 50%;
  padding: 50px;
}
.section2-text-pc{
  order: 2; 
}
.section2-image img{
  width: 300px;
  height: auto;
}
#section2-1 .section2-image{text-align: right;}
.section2-image-pc{
  order: 1;
}
.module{background-color: #fff;}
/*---------------------------
    section3
---------------------------*/
#section3{background: linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.16));}
.basic-module-text{
  margin-bottom: 40px;
  text-align: center;
}
.s3-list{
  margin-bottom: 50px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-between;
}
.s3-list1 li{
  margin: 3.5rem 2.5rem;
  border-radius: 8px;
  align-items: center;
}
.s3-list1 .module{
  display: flex;
  max-width: 335px;
  width: 100%;
  box-shadow:rgba(0,0,0,0.2) 0 0 10px 1px;
}
.s3-list1 .module-flex{
  display: inline-block;
  flex-basis: 30%;
  margin: 2em;
  text-align: center;
}
.s3-list2 .module{
  display: flex;
}
.s3-list2 .module-flex{
  display: inline-block;
  padding: 40px;
  text-align: center;
  box-shadow:rgba(0,0,0,0.2) 0 0 10px 1px;
  /*box-shadow:#fff 0 0 10px 4px;*/
  border-radius: 12px;
}
.s3-list2 .module-name{
  font-size: 1.8rem;
  font-weight: bold;
}
.module-flex img{width: 80px;}
.module-flex div{
  font-size: 1.2rem;
}
.module-description{
  margin: 0 2em 0 0;
  flex-basis: 70%;
}
/*---------------------------
    section4
---------------------------*/
#section4{
  background-image: url(images/border-dotted.png);
  background-size: 10px;
  background-repeat: repeat-x;
}

/*---------------------------
    contact
---------------------------*/
.contact-button{
  position: relative;
  width: 300px;
  margin:0 auto;
  padding: 10px;
  /*box-shadow: #aaa 0 5px 16px;*/
  border-radius: 30px;
  font-size: 26px;
  text-align: center;
  color: #fff;
  background: linear-gradient(to right, #852CCC, #CE3854);
  transition: 0.5s;
}
.contact-button:hover{
  opacity: 0.5;
  transition: 0.5s;
}

.mv-text1{
  font-size: 3rem;
  margin: 0;
}

/*---------------------------
    animation
---------------------------*/
.animation-updown{
  animation: updown 2s infinite;
  box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
@keyframes updown {
    0% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
    10% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }
    20% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
    30% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }
    40% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
}


/*---------------------------
    modal-window
---------------------------*/
.modal-open{
    display: inline-block;
    background-color: #666;
    color: #fff;
    margin: 10px;
  }
  .modal-open a{
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    color: #fff;
  }
  /*** 以下モーダル用CSS ***/
  .modal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
  .modal:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
  }
  .modal:target{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s;
  }
  .modal .overlay{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
  }
  .modal-wrapper{
    width: 100%;
    max-width: 650px;
    min-width: 300px;
    height: 100%;
    max-height: 550px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .modal-contents{
    overflow: auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
  }
  .modal-content{
    margin: 25px;
  }
  .modal-close{
    position: absolute;
    top: 5px;
    right: 10px;
    text-decoration: none;
  }


/*---------------------------
    responsive-sp
---------------------------*/
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */

/* basic-design */
ul{padding-inline-start: 0;}
.header-flex{width: auto;}
.container{padding: 0 20px;}

/*text*/
a{font-size: 1.6rem;}
p{font-size: 1.6rem;}
h1{font-size: 2.4rem;}
h2{
  margin: 30px 0 ;
  font-size: 2.2rem;
}
h3{ font-size: 2rem;}

/* rensposive */
.pcOnly{display: none;}
.spOnly{display: inline-block}
.spOnly{margin-bottom: 20px;}

#logo img{ 
  height: 26px;
}

/* mv */
#mv{padding: 50px 0;}
#mv .tanium-logo{width: 100%;}
.mv-button{
  margin: 40px auto 0;
  width: 200px;
  font-size: 1.6rem;
}
.mv-text1{font-size: 2rem;}

.mv_bnr {
  position: static;
  width: 100%;
  margin: 30px auto 0;
}

/* section1 */
.section1-h2{font-size: 2.2rem;}

/* section2 */
#section2-1,#section2-2{background-image: none;}
#section2-1 .container,#section2-2 .container,#section3{padding: 0;}
#section2-1::after, #section2-2::after{background: none;}
.section2-flex{flex-flow: column;}
.section2-text, .section2-image img {
  padding: 40px;
  margin: 0 auto;
}
.section2-text{order: 2;}
.section2-image{
  padding: 30px;
  text-align: center!important;
  background:linear-gradient(to right, #852CCC, #CE3854);
  order: 1;
}

/* section3 */
.s3-list{margin-bottom: 0}
.s3-list1 .module{width: 100%;}
.s3-list1 li{margin:0 1rem 3.5rem 1rem;}
.s3-list2 li{margin:0 1rem 3.5rem 1rem;}
.s3-list2 .module-flex{padding: 20px;}
.module-flex img{ width: 50px;}
.module-description p{font-size: 1.2rem;}

/* contact */
section#contact{padding: 0 0 50px;}
.contact-button{
  width: 250px;
  font-size: 2rem;
}

/* footer */
.footer-flex-left{
  flex-flow: column;
  padding: 20px;
}
.footer-flex-left img,.footer-flex-left p{margin-bottom: 20px;}


}