/*
Theme Name: TTS_website
Theme URI: localhost/wordpress/
Description: sample-page
Author:amuystyle
Author URI: localhost/wordpress/
Version: 1.0.0
*/


@charset "UTF-8";

body{font-family: "游ゴシック","YuGothic","メイリオ","Meiryo","Helvetica Neue", "Helvetica", 
  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial","ＭＳ Ｐゴシック", 
  "MS PGothic", "ヒラギノ角ゴ ProN W3", 
  "Hiragino Kaku Gothic ProN",sans-serif;}


body {

margin: 0;
padding: 0;
}


/* --------------------------
ヘッダー変更
 -------------------------- */


.c-header {

  align-items: center;
  background-color: #ffffff; /* 背景色 */
  box-sizing: border-box;
  position: fixed; /* 画面に固定して追従させます */
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 0rem 1rem; 
  margin: 0;
  width: 100%;
  height: 80px;
  z-index:99;
}

.c-header__logo {

  text-decoration: none;
}

.c-header__logo img{

  width: 350px;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
  text-decoration: none;
}

.c-header__list-link {
  color:  #00b4f5; /* 文字色 */
  display: block;
  margin-right: 30px; 
  text-decoration: none;
  padding: 10px 0px; 
}

.c-header__list-link:hover {
  filter: opacity(0.6); /* マウスホバー時 */
}


.c-hamburger-menu {
  position: fixed; /* 画面に固定して追従させます */
}




@media screen and (max-width: 1024px) {

.c-header__list-link {

border-top: solid 0px #000;

}


/* ヘッダーのロゴサイズ_1024 */
.c-header__logo img{
  width: 280px;
}

/* ヘッダーのメニュー */
  .c-hamburger-menu__list {
    background-color: #ffffff; /* 出てきたメニューの背景色 */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    right: 0;
    padding: 2rem; /* 出てきたメニューの余白 */
    position: absolute;
    transform: translateX(150%);
    transition: 0.3s; /* 出てくる時間 */
    top: 100%;
    width: 60%;

  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}


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

  .c-hamburger-menu__list {
    width: 80%;

  }


}



/* --------------------------
追従メニュー
 -------------------------- */


.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #00b4f5; /* メニューが出た時の背景色 */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.7; /* メニューが出た時の背景色の濃さ */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 1024px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; 
    height: 32px; 
    justify-content: center;
    width: 32px; /
  }
}



/* メニュー三本線の設定 */
.c-hamburger-menu__button-mark {
  background-color: #00b4f5; /* 三本線の色 */
  display: block;
  height: 2px; /* 線の太さ */
  transition: 0.5s; /* 動きの時間 */
  width: 20px; /* 横幅 */
}



@media screen and (max-width: 1024px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); 
    transform-origin: 0%; 
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); 
    transform-origin: 0%; 
  }
}



/* スクロールダウン */



@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down{
  position:absolute;
  bottom:5%;
  left:75px;
  animation: arrowmove 1s ease-in-out infinite;

  z-index: 90;
}

.scroll_down a{
  position: absolute;
  left: -24px;
  bottom: 15px;
  color: #dddddd;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll_down:before {
    content: "";
    position: absolute;
    bottom: 5px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #dddddd;
    transform: skewX(-31deg);
}

.scroll_down:after{
  content:"";
  position: absolute;
  bottom: 5px;
  right: 0;
  width: 1px;
  height: 85px;
  background:#dddddd;
}

@keyframes arrowmove{
   0%{bottom:5%;}
   50%{bottom:8%;}
   00%{bottom:5%;}
}





/* サイドメニュー左側に固定する */
.side-menu {
  position: fixed;
  top: 15%;
  left:-50px;
  z-index:90;
  font-size:0; /* 親要素でフォントサイズを０にする */
}

.side-menu li a{
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size:1.1rem; 
  /* 以下、装飾 */
  margin-top: 20px;
  padding:15px 10px 15px 16px;
  color: #00b4f5;

  text-decoration: none; /* リンクの線を削除 */
  background-color:rgba(255,255,255,0.8);
  border: 1px solid #00b4f5;
border-radius: 8px;  /* 角丸 */
}




/* ヘッダー、サイドメニュー、スクロールダウンのスマホ版 */

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


.c-header__logo img{

  width: 250px;
}

.side-menu {
display: none;
}




.scroll_down{
  bottom:5%;
  left:25px;
}

.scroll_down a{
  left: -18px;
  bottom: 28px;
  font-size: 10px;
}


}




/* スマホ時のボトムメニュー */

.mini-text{font-size:9px;}/*文字の大きさ*/

ul.bottom-menu {
    position: fixed ;
    left:0;
    bottom:0;
    width: 100%;
    height:53px;/*アイコン枠の高さ*/
    margin:0;
    padding:0;
    background-color:white;/*背景色*/
    border-top:2px solid #00b4f5;/*バーの上線*/
    border-bottom:0px solid #00b4f5;/*バーの下線*/
    z-index:95;
    padding-bottom:env(safe-area-inset-bottom);
}

ul.bottom-menu li {
    float:left;
    width:25%;/*メニューアイコンを4つ並べる*/
    background-color:white;/*背景色*/
    list-style-type:none;
    text-align:center;
    font-size:22px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:#00b4f5;/*アイコンと文字の色*/
    padding-top:10px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}

.bottom-menu li a:hover {
    color:lightgray;/*マウスオーバー時の色*/}

/* === 展開メニュー === */
ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;}

ul.menu-second-level li a{
    border-top:1px dotted gray;/*展開の枠点線*/
        font-size:12px;/*展開メニューの文字サイズ*/
        line-height:24px;/*文字の縦幅*/}

.menu-second-level li a:hover {
    height:100%;
    transition: 1.0s; /*動きを見せる*/
    background: lavender;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute ;
    bottom: 45px;/*メニュー高さ*/
    transition: 0.5s; /*動きを見せる*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding:0;}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 45px;/*メニュー高さ*/
    visibility: visible;
    opacity: 1;}

li.menu-width-max ul.menu-second-level li {
    float: left;
    width: 50%;/*2階層目に2つメニューを並べる*/
    border: none;}




/*スマホの時だけ ボトムメニュー分フッタを底上げ*/
@media screen and (max-width: 767px){ 
#footer{margin-bottom:50px;}
}



@media screen and (min-width: 768px) {
.bottom-menu{
  display:none; }
}




/* --------------------------
トップページコンテンツ
 -------------------------- */



.top_con_main{

   background-size: cover;
 overflow: hidden;
   width: 100%;
  height: 1780px;　/* トップイメージ全体の縦幅 青背景と統一*/

  top: 0;
  left: 0;
  position: relative;
 background-position: center center;


}



.container{

}

.image {
  position: absolute;
  top: 50px;  /* 上から少し余白あり */
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;

    background-attachment: fixed;
  animation: image-switch-animation 20s infinite;
}

.src1 {
  background-image: url(images/33455749_l_t2.jpg);
}
.src2 {
  background-image: url(images/33253091_l_t2.jpg);
}
.src3 {
  background-image: url(images/32341039_l_t2.jpg);
}
.src4 {
  background-image: url(images/32897042_l_t2.jpg);
}
.src5 {
  background-image: url(images/29865603_l_t2.jpg);
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 4s;
}
.image:nth-of-type(3) {
  animation-delay: 8s;
}
.image:nth-of-type(4) {
  animation-delay: 12s;
}
.image:nth-of-type(5) {
  animation-delay: 16s;
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}






.top_back{

position: relative;           
width: 800px;       /* トップ青背景の横幅 */                    
height: 1780px;    /* トップ青背景の縦幅 トップのimage縦幅と統一*/ 

}

 /* トップ青背景の設定 */
.top_back::after {
     
  content: '';
  background: linear-gradient(90deg, rgba(0,180,245,1) 0%, rgba(0,180,245,0.7) 100%);
  mix-blend-mode: multiply;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 50px;　　 /* imageの余白と同じ設定に */
  z-index: 1;
}




@media screen and (max-width: 1024px) {


/* ↓スマホ対応 */
.top_con_main{

    background-image: none; // 元の背景画像を消す
　 background: none;

}


.image {
  
        background-image: none; // 元の背景画像を消す
     background: none;
  
}
.image::before {
content:"";
display:block;
position:fixed;
left:0;
z-index:-1;
-webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    height: 100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-position: center;
background-size:cover;


}

.src1 {
  background-image: url(images/33455749_l_t2_m2.jpg);
}
.src2 {
  background-image: url(images/33253091_l_t2_m.jpg);
}
.src3 {
  background-image: url(images/32341039_l_t2_m.jpg);
}
.src4 {
  background-image: url(images/32897042_l_t2_m.jpg);
}
.src5 {
  background-image: url(images/29865603_l_t2_m.jpg);
}


.top_back{ 
width: 100%;       /* トップ青背景の横幅 */  
}

}



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


/* ↓スマホ対応 */
.top_con_main{

    background-image: none; // 元の背景画像を消す
　 background: none;

}


.image {
  
        background-image: none; // 元の背景画像を消す
     background: none;
    background-attachment: scroll;
}
.image::before {
content:"";
display:block;
position:fixed;
left:0;
z-index:-1;
-webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    height: 100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-position: center;
background-size:cover;


}

.src1 {
  background-image: url(images/33455749_l_t2_m2.jpg);
}
.src2 {
  background-image: url(images/33253091_l_t2_m2.jpg);
}
.src3 {
  background-image: url(images/32341039_l_t2_m2.jpg);
}
.src4 {
  background-image: url(images/32897042_l_t2_m2.jpg);
}
.src5 {
  background-image: url(images/29865603_l_t2_m2.jpg);
}





.top_back{ 
width: 100%;       /* トップ青背景の横幅 */  
}

 /* トップ青背景の設定 */
.top_back::after {
     
  content: '';
  background: linear-gradient(90deg, rgba(0,180,245,0.8) 0%, rgba(0,180,245,0.3) 100%);

}

}



 /* トップコピー */
.top_copy{
   
position: relative;

 z-index: 2;
top: 80px;
  margin-left: 100PX;  /* 文章本体を少し右へ */
    line-height: 3rem;　/* 行間の調整 */
      
}
  


.tts_copy_1,.tts_copy_3,.tts_copy_4,.tts_copy_6,.tts_copy_7{

  color: #ffffff;
 font-size: 25px;

letter-spacing : 0.07em; /* 文字間の調整 */
text-shadow: 0 0 6px rgb(0, 0, 0, 0.7);　/* 文字に影 */
      
}



.tts_copy_1{

   position: absolute;
   margin-top: 10px;
   font-size: 30px;
  
  /* .が「my-fade-in」で状態変化するように指定 */
  animation-name:     my-fade-in;
  animation-duration: 2s;
}


 /* アニメーションの設定 白文字*/
@keyframes my-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.tts_copy_2{
 
margin-top: 115px;
   position: absolute;
 font-size: 42px;
 font-weight: bold;
    color: #000000;
     line-height: 4.2rem;　/* 行間の調整 */
 
}



span.marker {
 
  background-image: linear-gradient( #fff000 40%, #fff000 40%);
  padding: 5px 5px 5px 10px;
  background-repeat: no-repeat;
  background-size: 0% 100%; /* 初期状態は幅0 */
  animation: marker-effect 1s ease-in-out forwards;
  color: black;
}

@keyframes marker-effect {
  to {
    background-size: 100% 100%; /* 最終的に幅100%に */
  }
}



.tts_copy_3{
     position: absolute;
     margin-top: 280px;
  /* .が「my-fade-in」で状態変化するように指定 */
  animation-name:     my-fade-in;
  animation-duration: 3s;
}



.tts_copy_4{
     position: absolute;
     margin-top: 450px;
   /* .が「my-fade-in」で状態変化するように指定 */   
    animation-name:     my-fade-in;
  animation-duration: 4s;
}


.tts_copy_5{
     position: absolute;
     margin-top: 595px;

 font-weight: bold;
  font-size: 34px;

    color: #000000;
       line-height: 3.5rem;　/* 行間の調整 */

}


span.marker_2 {
 
    background-color: #fff000;
    padding: 5px 5px 5px 10px;
       /* .が「my-fade-in」で状態変化するように指定 */   
    animation-name:     my-fade-in;
    animation-duration: 6s;
}




.tts_copy_6{
     position: absolute;
     margin-top: 780px;
  /* .が「my-fade-in」で状態変化するように指定 */
  animation-name:     my-fade-in;
  animation-duration: 5s;
}


.tts_copy_7{

   position: absolute;
     margin-top: 1050px;
  /* .が「my-fade-in」で状態変化するように指定 */
  animation-name:     my-fade-in;
  animation-duration: 5s;


}

.copy7_font_color_y{
 background-image: repeating-linear-gradient(-45deg,
        #005a96 0, #005a96 3px,
        transparent 3px, transparent 6px);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 25%;

}


.tts_copy_8{

   position: absolute;
     margin-top: 1420px;

     font-size: 34px;
 font-weight: bold;
    color: #000000;
     line-height: 3.5rem;　/* 行間の調整 */

}


.tts_copy_9{

   position: absolute;
     margin-top: 1560px;

     font-size: 14px;
    color: #ffffff;

}




/* ラインマーカー */
.lineMarker.scroll-in{
background-position: -100% 0rem;
}

.lineMarker {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,240,0) 10%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,240,0) 10%);
background-image: linear-gradient(left, transparent 50%, rgb(255,240,0) 10%);
background-repeat: repeat-x;
background-size: 200% 2em;
background-position: 0 .8em;
transition: all 1.2s ease;
font-weight: bold;

}




/* トップコピー文字スマホ版 */

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


.image {
  top: 10px;  /* 上からの余白 */

}



.top_con_main{
     background-size: cover;
 overflow: hidden;
   width: 100%;
  height: 1150px;　/* トップイメージ全体の縦幅 青背景と統一*/
}



.top_back{                 
height: 1150px;    /* トップ青背景の縦幅 トップのimage縦幅と統一*/ 
}



.top_copy{
  top: 50px;
  margin-left: 35PX;  /* 文章本体を少し右へ */
}

.tts_copy_1,.tts_copy_3,.tts_copy_4,.tts_copy_6,.tts_copy_7{

font-size: 18px;
line-height: 30px;　/* 行間の調整 */

}

.tts_copy_2{
margin-top: 70px;
font-size: 20px;
line-height: 40px;　/* 行間の調整 */
}

.tts_copy_3{
margin-top: 160px;
}

.tts_copy_4{
  margin-top: 270px;
}


.tts_copy_5{
  margin-top: 370px;
 font-size: 18px;
line-height: 35px;　/* 行間の調整 */
}


.tts_copy_6{
  margin-top: 480px;
}


.tts_copy_7{
   margin-top: 650px;
}



.tts_copy_8{
     margin-top: 890px;
     font-size: 18px;
line-height: 35px;　/* 行間の調整 */
}


.tts_copy_9{

   position: absolute;
     margin-top: 960px;
     font-size: 10px;
}

}


/* スマホの時だけ改行*/
.br-sp {
    display: none;
}

.br-sp2 {
    display: none;
}


@media (max-width: 768px) {
.br-sp {
        display: block;
    }
}

@media (max-width: 500px) {
.br-sp2 {
        display: block;
    }
}



@media screen and (max-width: 345px) {

.tts_copy_1,.tts_copy_3,.tts_copy_4,.tts_copy_6,.tts_copy_7{

font-size: 15px;
}

.tts_copy_2{
font-size: 18px;
}

.tts_copy_5{
 font-size: 15px;
}

.tts_copy_8{
font-size: 15px;
line-height: 32px;　/* 行間の調整 */
}

.tts_copy_9{
font-size: 10px;
}

}





/* --------------------------
メインコンテンツここから
 -------------------------- */


/* キャッチコピー */

.main_con_1{
  background-color: rgb(37 167 225 / 0.2);
width: 100%;
padding-bottom: 70px;
position: relative;

}


.main_con_1 img{
width: 60%;
margin-left: -20px;
margin-top: 50px;
}


.main_con_1_copy{
position: absolute;
top: 70px;
right: 0;
text-align: right;

}

.main_con_1_copy img{
position: absolute;
right: 100px;

}

.target{
opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s, transform 1s;

}
.target.visible {
  opacity: 1;
  transform: translateY(0);
}





.main_con_1_copy span{
 background: rgb(0 180 245 / 0.8);
  padding: 10px 20px 10px 20px;
}




.text-background span {
   color: #ffffff;
  font-size: 38px;
  line-height: 1.8em;
  z-index: 2;
}


.main_con_1_copy img{
  position:relative;
  z-index: 1;

}


.font-s{
font-size: 70%;

}





@media screen and (max-width: 1024px) {

.text-background span {
  font-size: 28px;
}


}


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


.main_con_1 img{
width: 50%;
margin-top: 30px;
}


.main_con_1_copy{
top: 40px;
}

.text-background span {
  font-size: 4vw;
}


.main_con_1_copy img{
  top: -30px;
}

}


@media screen and (max-width: 500px) {
.main_con_1 img{
margin-left: -50px;
}


.main_con_1_copy span{

  padding: 5px 10px 5px 10px;
}

.main_con_1_copy{
  top: 30px;
text-align: right;
}

.text-background span {
  font-size: 5vw;
  line-height: 20px;
}

.main_con_1_copy img{
  top: -70px;
}

}



/* テキスト */

.main_con_1_text p{
  font-size: 28px;
   text-align: center;
     line-height: 1.8em;
}

.main_con_1_text span{
background: linear-gradient(transparent 60%, #fff000 0%);
}


/* 図で説明 */

.main_con_1_figure{
width: 80%;
height:auto;
padding:  20px;            
background-color: #ffffff; 
margin:0 auto;
padding-bottom: 40px;

}

.main_con_1_figure_inner{
  padding: 10px;
    padding-top: 10px;
   text-align: center;
}


.main_con_1_figure_title{
  font-size: 30px;
    letter-spacing : 0.03em; /* 文字間の調整 */
  font-weight: bold;
}


.main_con_1_figure_title_ses{
  font-size: 30px;
  letter-spacing : 0.03em; /* 文字間の調整 */
  font-weight: bold;
  color: #00b4f5;
  text-shadow: 2px 3px 0px #e6e6e6;
}

.main_con_1_figure_inner img{
width: 80%;
}

.ses_common_figure img{
border-bottom: 1.5px solid #00b4f5;
margin-bottom: 20px;
padding-bottom: 50px;
}











@media screen and (max-width: 1024px) {

.main_con_1_text p{
  font-size: 23px;
  line-height: 1.8em;
}

}



@media screen and (max-width: 768px) {
.main_con_1_text p{
  font-size: 4vw;
     line-height: 1.8em;
}


.main_con_1_figure{
width: 90%;
padding-bottom: 20px;

}

.main_con_1_figure_title{
    padding: 0px;
  font-size: 3.5vw;
}

.main_con_1_figure_title_ses{
  font-size: 3.5vw;
}

.main_con_1_figure_inner{
    padding-top: 1px;

}

.main_con_1_figure_inner img{
width: 100%;
margin:0 auto;
}

.ses_common_figure img{
margin-bottom: 20px;
padding-bottom: 30px;
}

}



@media screen and (max-width: 500px) {
.main_con_1_figure{
width: 100%;
padding-bottom: 20px;

}

}







/* TTSの特徴 */

.main_con_features{
  position: relative;
top: 50px;

}



.main_con_features_copy_1{
   position: relative;
width: 760px;
background: linear-gradient(transparent 90%, #fff000 0%);

}


.main_con_features_copy_1 p{
 position: relative;
font-size: 33px;
font-weight:bold;
margin-left: 80px;
 letter-spacing : 0.08em; /* 文字間の調整 */
}



.main_con_features_copy_img img{
width: 20%;
margin-left: 90px;
margin-top: -50px;
}


.main_con_features_content{
 position: relative;
}


.main_con_features_content_img{
margin-top: -50px;
margin-right: 40px;
text-align: right;

}

.main_con_features_content_img img{
width: 60%;


}

.main_con_features_text{
   position: relative;
  -webkit-text-stroke: 2px #ffffff;
text-stroke: 2px #ffffff;
 paint-order: stroke; /* 白フチを文字の下に */
   font-weight: 500;
font-size: min(2.4vw, 32px);
margin-top: -450px;
display: flex;
align-items: center;
margin-left: 120px;
 line-height: 2em;
letter-spacing : 0.08em; /* 文字間の調整 */
}




.main_con_features_button{
 position: relative;
margin-top: 50px;
left: 15%;
 display: flex;
justify-content: center;
  align-items: center;
  width: 300px;
  height: 80px;
  font-size: 20px;
  transition: 0.3s;
background-color: rgb(0 180 245 / 0.8);

}


.main_con_features_button a{
 text-decoration: none;
letter-spacing : 0.08em; /* 文字間の調整 */
  color: #ffffff;

}

.main_con_features_button:hover {
  color: #f2f2f2;
  background-color: #269ae2;
 
}


.main_con_features_partition{
   position: relative;
   text-align: center;
   top: 180px;
}


.main_con_features_partition img{
 width: 60px;
}




@media screen and (max-width: 1024px) {
.main_con_features_text{

margin-top: -320px;
margin-left: 120px;
 line-height: 2em;
}


.main_con_features_button{
margin-top: 10px;
  width: 250px;
  height: 70px;
  font-size: 20px;
}
.main_con_features_partition img{
 width: 50px;
}

}



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

.main_con_features_copy_1{
width: 75%;

}


.main_con_features_copy_1 p{
font-size: 3.4vw;
margin-left: 20px;
letter-spacing : 0.03em; /* 文字間の調整 */
}

.main_con_features_copy_img img{
width: 20%;
margin-left: 20px;
margin-top: -20px;
}

.main_con_features_content_img{
margin-right: 20px;
text-align: right;
}

.main_con_features_text{
margin-top: -230px;
margin-left: 20px;
 line-height: 1.8em;
font-size: 3.4vw;
}

.main_con_features_button{
left: 10%;
}
.main_con_features_partition{
   top: 140px;
}

}


@media screen and (max-width: 500px) {

.main_con_features_copy_1{
width: 95%;

}

.main_con_features_copy_1 p{
font-size: 20px;
}

.main_con_features_text{
margin-top: -160px;
margin-left: 20px;
  line-height: 1.8em;
font-size: 3.8vw;
}

.main_con_features_content_img{
margin-top: -30px;
margin-right: 20px;
text-align: right;
}

.main_con_features_button{

margin-top: 1px;
left: 10%;
  width: 160px;
  height: 50px;
  font-size: 14px;
}
.main_con_features_partition{
   top: 50px;
}
.main_con_features_partition img{
 width: 30px;
}

}







/* エンジニアの皆さんへ */

.main_con_to-all-engineers{
  position: relative;
top: 280px;

}


.main_con_to-all-engineers_copy_1{
   position: relative;
width: 700px;
margin-left: auto;
  margin-right: 0;
background: linear-gradient(transparent 90%, #fff000 0%);

}


.main_con_to-all-engineers_copy_1 p{
 position: relative;
text-align: right;
font-size: 34px;
font-weight: bold;
 letter-spacing : 0.08em; /* 文字間の調整 */
margin-right: 80px;
}

.main_con_to-all-engineerss_copy_img{
   position: relative;
margin-left: 120px;
  margin-top: -90px;
  z-index: 10;
}

.main_con_to-all-engineerss_copy_img img{
width: 40%;
text-align: left;


}


.main_con_to-all-engineers_content{
 position: relative;
}


.main_con_to-all-engineers_content_img{
margin-top: -120px;
margin-left: 80px;
text-align: left;
z-index: 1;
}

.main_con_to-all-engineers_content_img img{
width: 60%;

}

.main_con_to-all-engineers_text{
   position: relative;
  -webkit-text-stroke: 2px #ffffff;
text-stroke: 2px #ffffff;
 paint-order: stroke; /* 白フチを文字の下に */
   font-weight: 500;
font-size: min(2.4vw, 32px);
margin-top: -450px;
text-align: right;
margin-right: 80px;
 line-height: 2em;
letter-spacing : 0.08em; /* 文字間の調整 */
}





.main_con_to-all-engineers_button{
 position: relative;
margin-top: 50px;
left: 60%;
 display: flex;
justify-content: center;
  align-items: center;
  width: 300px;
  height: 80px;
  font-size: 20px;
  transition: 0.3s;
background-color: rgb(0 180 245 / 0.8);

}


.main_con_to-all-engineers_button a{
 text-decoration: none;
letter-spacing : 0.08em; /* 文字間の調整 */
  color: #ffffff;

}

.main_con_to-all-engineers_button:hover {
  color: #f2f2f2;
  background-color: #269ae2;
 
}




@media screen and (max-width: 1024px) {

.main_con_to-all-engineers_content_img{
margin-top: -150px;
margin-left: 80px;
}


.main_con_to-all-engineerss_copy_img img{
margin-top: 60px;

}

.main_con_to-all-engineers_text{
margin-top: -320px;

}


.main_con_to-all-engineers_button{
margin-top: 10px;
  width: 280px;
  height: 70px;
  font-size: 20px;
  left: 60%;
}

}



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

.main_con_to-all-engineers_copy_1{
width: 70%;

}

.main_con_to-all-engineers_copy_1 p{
font-size: 3.4vw;
margin-right: 30px;
letter-spacing : 0.03em; /* 文字間の調整 */
}

.main_con_to-all-engineers_content_img{
margin-top: -80px;
margin-left: 20px;
text-align: left;
}

.main_con_to-all-engineers_text{
margin-top: -280px;
margin-right: 30px;
 line-height: 1.8em;
font-size: 3.4vw;
}

.main_con_to-all-engineers_button{
left: 50%;
}

}



@media screen and (max-width: 500px) {

.main_con_to-all-engineers{
top: 110px;

}

.main_con_to-all-engineers_copy_1{
width: 95%;
}

.main_con_to-all-engineers_copy_1 p{
font-size: 20px;
margin-right: 20px;
}

.main_con_to-all-engineers_text{
margin-top: -160px;
margin-right: 20px;
  line-height: 1.8em;
font-size: 3.8vw;
}

.main_con_to-all-engineers_content_img{
margin-top: -30px;
margin-left: 20px;
text-align: left;
}

.main_con_to-all-engineers_button{

margin-top: 1px;
left: 40%;
  width: 200px;
  height: 50px;
  font-size: 14px;
}

}




.under_st{
 background-image: repeating-linear-gradient(-45deg,
        #ffa696 0, #ffa696 3px,
        transparent 3px, transparent 6px);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 25%;
  
}




/* エンジニアの声 */

.main_con_voice{
position: relative;
top: 450px;
background-color: rgb(37 167 225 / 0.2);
width: 100%;
height: auto;
padding-bottom: 100px;
}


.main_con_voice_copy{
position: relative;
top: -100px;
width: 60%;
margin-left: 100px;
background: linear-gradient(transparent 90%, #fff000 0%);
z-index: 1;
}


.main_con_voice_copy p{
 position: relative;
font-size: 34px;
font-weight:bold;
text-align:left;
 letter-spacing : 0.08em; /* 文字間の調整 */
}

.main_con_voice_copy_img{
position: relative;
width: 200px;
left: 65%;
top: 100px;
z-index: 10;
}


* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
 
.main_con_voice_card-cell {
  width:750px;
  height: 350px;
  margin-right: 20px;
  background: #ffffff;
  counter-increment: main_con_voice_card-cell;
}
 

.main_con_voice_card {
 top: -60px;
}

.main_con_voice_card_img{
position: relative;
margin-top: 50px;
left: 20px;
}

.main_con_voice_card_img img{
width: 250px;

}
 
.main_con_voice_card_name{
  position: relative;
    font-size: 20px;
  font-weight: bold;
  width: 400px;
  left: 50%;
 top: -350px;
}

.main_con_voice_card_text{
  position: relative;
   width: 400px;
  left: 50%;
  right: 20px;
   top: -430px;
  font-size: 20px;
}

.main_con_voice_card_button{
  position: relative;
   left: 50%;
  top: -430px;

display: flex;
justify-content: center;
  align-items: center;
  width: 250px;
  height: 70px;
  font-size: 20px;
  transition: 0.3s;
background-color: rgb(0 180 245 / 0.8);

}

.main_con_voice_card_button a{
 text-decoration: none;
 letter-spacing : 0.06em; /* 文字間の調整 */
  color: #ffffff;
}

.main_con_voice_card_button:hover {
  color: #f2f2f2;
  background-color: #269ae2;
}


.main_con_voice_card_img2,.main_con_voice_card_img3,.main_con_voice_card_img4,.main_con_voice_card_img5,.main_con_voice_card_img6,.main_con_voice_card_img7{
  margin-left: 50px;
}

.main_con_voice_card_name2,.main_con_voice_card_name3,.main_con_voice_card_name4,.main_con_voice_card_name5,.main_con_voice_card_name6,.main_con_voice_card_name7{
  margin-top: 30px;
}


.main_con_voice_card_text2{
  
}




@media screen and (max-width: 1024px) {
.main_con_voice_copy{
width: 70%;
margin-left: 80px;
}
.main_con_voice{
padding-bottom: 60px;
}

}



@media screen and (max-width: 768px) {
.main_con_voice{
top: 350px;
}

.main_con_voice_copy{
width: 70%;
top: -70px;
margin-left: 30px;
}

.main_con_voice_copy_img{
width: 130px;
}

.main_con_voice_copy_img img{
width: 130px;
}

.main_con_voice_copy p{
font-size: 3.4vw;
}

.main_con_voice{
padding-bottom: 30px;
}

.main_con_voice_card-cell {
  width:510px;
  height: 300px;
  margin-right: 20px;

}
 

.main_con_voice_card_img{
margin-top: 50px;
left: -30px;
}


 .main_con_voice_card_img img{
width: 210px;

}

.main_con_voice_card_name{
    font-size: 16px;
  width: 270px;
  left: 48%;
 top: -300px;
}

.main_con_voice_card_text{
   width: 270px;
  left: 48%;
  right: 20px;
   top: -370px;
  font-size: 15px;
}

.main_con_voice_card_button{
   left: 50%;
  top: -370px;
  width: 200px;
  height: 65px;
  font-size: 17px;

}

}



@media screen and (max-width: 500px) {

.main_con_voice{
top: 180px;
}


.main_con_voice_copy_img img{
width: 90px;
}

.main_con_voice_copy {
  margin-left: 20px;
width: 90%;
top: -50px;

}

.main_con_voice_copy p{
font-size: 20px;
}

.main_con_voice_card-cell {
  width:300px;
  height: 250px;
  margin-right: 20px;
}

.main_con_voice_card_img{
margin-top:32%;
left: -40px;
}

 .main_con_voice_card_img img{
width:140px;
}

.main_con_voice_card_name{
    font-size: 16px;
  width: 270px;
  left: 10px;
 top: -300px;
}

.main_con_voice_card_text{
   width: 130px;
  left: 53%;
  right: 20px;
   top: -365px;
font-size: 3.6vw;
line-height: 1.2rem;　/* 行間の調整 */
}

.br-sp_m{
  display: none;
}


.main_con_voice_card_button{
   left: 52%;
  top: -375px;
  width: 130px;
  height: 50px;
  font-size: 15px;

}

.main_con_voice_card_img2,.main_con_voice_card_img3,.main_con_voice_card_img4,.main_con_voice_card_img5,.main_con_voice_card_img6,.main_con_voice_card_img7{
  margin-left: 50px;
  top: 0px;
}

.main_con_voice_card_name2,.main_con_voice_card_name3,.main_con_voice_card_name4,.main_con_voice_card_name5,.main_con_voice_card_name6,.main_con_voice_card_name7{
  margin-top: 30px;
}

}



/* お問い合わせ */

.main_con_contact{
  position: relative;
  top: 500px;
  margin-bottom:-400px;
  text-align: center;
}

.main_con_contact_text{
    position: relative;
  font-size: 33px;
  font-weight: bold;
   letter-spacing : 0.05em; /* 文字間の調整 */
}

.main_con_contact_button{
  position: relative;
 margin:  0 auto;  
display: flex;
justify-content: center;
  align-items: center;
  width: 250px;
  height: 70px;
  font-size: 20px;
  transition: 0.3s;
background-color: rgb(255 240 0 / 1);
}

.main_con_contact_button a{
 text-decoration: none;
 letter-spacing : 0.06em; /* 文字間の調整 */
  color: #000000;
}

.main_con_contact_button:hover {
border: solid 1px;
  background-color:rgb(255 240 0 / 0.5);
}



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

.main_con_contact{
  top: 350px;
}

}


@media screen and (max-width: 500px) {
.main_con_contact{
  top: 200px;
}

.main_con_contact_text{
font-size: 20px;
}

.main_con_contact_button{
  width: 210px;
  height: 60px;
  font-size: 20px;
}


}




/* --------------------------
フッター
 -------------------------- */



.tts_footer{
  position: relative;
	  width: 100%;
  background-color: #00b4f5;
  color: #ffffff;
padding: 30px;
top: 1000px;
display: flex;
        align-items: center;
        justify-content: center;
}

.tts_footer_con{
        text-align: center;
}

.tts_footer img{
width: 320px;

}
.tts_footer_address{
 font-size:15px; 
}


.tts_footer_item{
  font-size:18px; 
  letter-spacing : 0.06em; /* 文字間の調整 */

}

.tts_footer_item a{
    text-decoration: none;
    color: inherit;

}
.tts_footer_item a:hover{

  color: rgb(255  255 255 / 0.5);

}


.tts_footer_copyright{
font-size: 13px;
}




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

.tts_footer{
top: 790px;
padding-bottom: 60px;

}

}



@media screen and (max-width: 500px) {
.tts_footer{
top: 650px;
}

.tts_footer img{
width: 250px;

}

.tts_footer_address{
 font-size:13px; 
}

.tts_footer_item{
  font-size:15px; 
  letter-spacing : 0.06em; /* 文字間の調整 */
}
}





/* --------------------------
TTSの特徴ページ、エンジニアの皆さんへ、エンジニアの声　共通項目
 -------------------------- */


/* トップイメージ */
.tts_common_main{
position: relative;


}

.tts_common_main_top{
  position: relative;
  top: 50px;
}



.tts_common_main_top img{
width: 85%;
margin-left: auto; 
display:block;

}

.tts_common_main_top_textbox{
  position: relative;
  top: -210px;
left: 45%;
  color: #FFFFFF;
  width: 250px;
  height: 250px;
background-color: rgb(0 180 245 / 0.8);
text-align: center;
display: table-cell; /* インライン要素をテーブルセル化する */
vertical-align: middle; /* インライン要素の上下のセンタリングを指定する */
}


.tts_common_main_top_text{
  position: relative;


}

.tts_common_main_top_text_1{
  position: relative;
  font-size: 18px;
    letter-spacing : 0.08em; /* 文字間の調整 */
     top: -10px;

}


.tts_common_main_top_text_2{
  position: relative;
  font-size: 40px;
top: 10px;
    letter-spacing : 0.07em; /* 文字間の調整 */
    text-shadow: 3px 4px 0px #3b91a7;　/* 文字の影 */
}


/* パンくずリスト */
.breadcrumb {
  position: relative;
  top: -250px;
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
   justify-content: flex-end; /* flexの要素を右寄せ */
  color: #808080;
     letter-spacing : 0.07em; /* 文字間の調整 */
}

.breadcrumb a{
  color: #00b4f5;
text-decoration: none;
}

.breadcrumb a:hover{
color: rgb(37 167 225 / 0.5);
}

.breadcrumb li:not(:last-of-type)::after {
  content: ">";
  margin: 0 .6em; /* 記号の左右の余白 */
  color: #00b4f5; /* 記号の色 */
}




/* メインキャッチ */
.tts_common_main_copy{
position: relative;
text-align: center;
margin-left: 90px;
font-size: 35px;
font-weight: bold;
top: -300px;
line-height: 5rem;　/* 行間の調整 */
}

.tts_common_main_copy p{
  letter-spacing : 0.08em; /* 文字間の調整 */
}


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

.tts_common_main_top_textbox{
  top: -130px;
left: 10%;
  width: 180px;
  height: 180px;
}

.tts_common_main_top_text_1{
  font-size: 15px;
     top: -10px;

}


.tts_common_main_top_text_2{
  font-size: 30px;
top: 5px;

}


.breadcrumb {
  top: -180px;
  font-size: 0.8rem;

}

.tts_common_main_copy{
font-size: 32px;
margin-left: 0px;
top: -200px;
line-height: 4rem;　/* 行間の調整 */

}

}





@media screen and (max-width: 500px) {

.tts_common_main_top_textbox{
  top: -80px;
left: 0%;
  width: 130px;
  height: 130px;
}

.tts_common_main_top_text_1{
  font-size: 11px;
     top: -5px;
}


.tts_common_main_top_text_2{
  font-size: 23px;
top: 0px;

}

.breadcrumb {
  top: -130px;
  font-size: 10px;
}

.tts_common_main_copy{
font-size: 25px;
top: -150px;
line-height: 3rem;　/* 行間の調整 */

}

}



/* --------------------------
 TTSの特徴ページ コンテンツ
 -------------------------- */


.tts_features_evidence_1{

 background-color: rgb(37 167 225 / 0.2);
}

.tts_features_evidence{
  position: relative;
  top: -290px;
  left :15%;
  width: 80%;
  padding: 40px 60px;
}


.tts_features_evi_deco{
   position: absolute;
   background-color: rgb(37 167 225 / 0.9);
   height: 70%;
   padding: 5px;
     margin-left: -10px;
}

.tts_features_evi_num{
  color: #00b4f5;
  margin-left: 30px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing : 0.1em; /* 文字間の調整 */

}

.tts_features_evi_title{
    margin-left: 70px;
    font-size: 33px;
    font-weight: bold;
   letter-spacing : 0.05em; /* 文字間の調整 */
}


.tts_features_evi_text{
      margin-left: 70px;
     font-size: 18px;
     letter-spacing : 0.03em; /* 文字間の調整 */
}



.tts_features_evidence_2{
  position: relative;
  background-color: #ffffff;
  margin-top: 30px;
}


.tts_features_evidence_img{
  position: relative;
  top: -250px;

}

.tts_features_evidence_img img{
  width: 80%;
}


.tts_features_evidence_3{
    position: relative;
   background-color: rgb(37 167 225 / 0.2);
  margin-top: 100px;
	margin-bottom:-600px;
}


/* TTSの特徴ページ、エンジニアの声、問い合わせ、フッター調整 */
.tts_features_voice{
 top: 100px;

}

.tts_features_contact{
  margin-top: 550px;

}

.tts_features_footer{
 

}



@media screen and (max-width: 768px) {
.tts_features_evidence{
  top: -190px;
  left: 5%;
  width: 90%;
  padding: 40px 50px;
}

.tts_features_evi_deco{
   height: 75%;
   padding: 5px;
     margin-left: -15px;
}

.tts_features_evi_num{
  margin-left: 22px;
  font-size: 32px;
}

.tts_features_evi_title{
    margin-left: 32px;
    font-size: 30px;
}

.tts_features_evi_text{
      margin-left: 35px;
     font-size: 15px;
}

.tts_features_evidence_img{
  top: -150px;

}

}



@media screen and (max-width: 500px) {
.tts_features_evidence{
  top: -120px;
  left: 5%;
  width: 90%;
  padding: 10px 50px;
}


.tts_features_evi_deco{
   height: 80%;
   padding: 3px;
     margin-left: -25px;
}

.tts_features_evi_num{
  margin-left: 10px;
  font-size: 25px;
}

.tts_features_evi_title{
    margin-left: 10px;
    font-size: 23px;
}


.tts_features_evi_text{
      margin-left: 10px;
font-size: 3.7vw;
line-height: 1.2rem;　/* 行間の調整 */
}


.tts_features_evidence_img{
  position: relative;
  top: -70px;
}

.tts_features_evidence_img img{
  width: 100%;
}
.tts_features_evidence_3{
	margin-bottom:-50px;
}
	
	
.tts_features_voice{
  top: -10px;
}
.tts_features_contact{
  top: 15px;
}
.tts_features_footer{
 top: 70px;

}

}





/* --------------------------
 エンジニアの皆さんへ コンテンツ
 -------------------------- */

/* エンジニアの皆さんへ トップコンテンツ */

.tts_tae_support{
position: relative;
top: -300px;
}

.tts_tae_support img{
  position: absolute;
 right: 0;
width: 400px;

}

.tts_tae_support_textbox{
margin-top: 100px;
width: 80%;
background-color: rgb(37 167 225 / 0.2);
padding: 50px;

}

.tts_tae_support_num{
  margin-left: 80px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing : 0.1em; /* 文字間の調整 */
  color: #00b4f5;
}

.tts_tae_support_title{
    margin-left: 80px;
  font-size: 33px;
  font-weight: bold;
  letter-spacing : 0.05em; /* 文字間の調整 */

}
.tts_tae_support_text{
  margin-left: 80px;
  font-size: 18px;
  letter-spacing : 0.03em; /* 文字間の調整 */
}


.tts_tae_support_2{
margin-top: 100px;
}

.tts_tae_support_2_textbox{
 position: absolute;
 right: 0;
 z-index: 0;
}

.tts_tae_support_2 img{
  left: 0;
  z-index: 10;
}


.tts_tae_support_2_num{
  margin-left: 200px;
}

.tts_tae_support_2_title{
  margin-left: 200px;
}





@media screen and (max-width: 768px) {
.tts_tae_support{
top: -200px;
}

.tts_tae_support img{
width: 340px;
}
.tts_tae_support_textbox{
margin-top: 200px;
width: 80%;
padding: 30px;

}
.tts_tae_support_num{
  margin-left: 30px;
  font-size: 30px;

}

.tts_tae_support_title{
    margin-left: 30px;
  font-size: 30px;

}
.tts_tae_support_text{
  margin-left: 30px;
  font-size: 15px;
}
.tts_tae_support_2{
  margin-top: 40px;

}

}


@media screen and (max-width: 500px) {

.tts_tae_support{
top: -150px;
}

.tts_tae_support img{
width: 240px;
}
.tts_tae_support_textbox{
margin-top: 100px;
width: 100%;
padding: 70px 30px 30px 30px;

}
.tts_tae_support_num{
  margin-left: 20px;
  font-size: 25px;

}

.tts_tae_support_title{
    margin-left: 20px;
  font-size: 23px;

}
.tts_tae_support_text{
  margin-left: 20px;
  font-size: 3.6vw;
}

}




/* エンジニアの皆さんへ　ライフスタイルを応援 */
.tts_tyourlifestyle{
  position: relative;
    top: 360px;
    width: 75%;
height: auto;
    padding: 0px 60px 40px 60px;
    border: 1px solid #00b4f5;
margin-right: auto;
  margin-left: auto;
  left: 30px;
}


.tts_tyourlifestyle_title{
font-size: 33px;
font-weight: bold;
text-align: center;
 letter-spacing : 0.08em; /* 文字間の調整 */
line-height: 4rem;　/* 行間の調整 */
}

.tts_tyourlifestyle img{
  width: 100%;
}


.tts_tyourlifestyle_text{
  position: relative;
 font-size: 20px;
   letter-spacing : 0.04em; /* 文字間の調整 */
    line-height: 2rem;　/* 行間の調整 */
}




/* エンジニアの皆さんへ　エンジニア募集中 */

.tts_recruit{
  position: relative;
  background-image: url(images/31922197_l_toallengineers_recruit_img.jpg);
  background-size: cover;
 width: 100%;
 height: 100%;
  top: 500px;
  padding: 5px 40px 80px 40px;
margin-bottom:300px;
}

.tts_recruit_title{
  position: relative;
  width: 90%;
   left: 70px;
  font-size: 39px;
  font-weight: bold;
    line-height: 3rem;　/* 行間の調整 */

}

.tts_recruit_title p{
     letter-spacing : 0.08em; /* 文字間の調整 */
        color: #ffffff;
}

.tts_recruit_copy{
  position: relative;
      width: 90%;
     left: 70px;
     color: #fff000;
   letter-spacing : 0.08em; /* 文字間の調整 */
  font-size: 28px;
    font-weight: bold;
    line-height:2.5rem;　/* 行間の調整 */
}



.tts_recruit_text_1{
  position: relative;
        width: 90%;
       left: 70px;
  font-size: 30px;
    font-weight: bold;
       letter-spacing : 0.08em; /* 文字間の調整 */
    line-height: 4.3rem;　/* 行間の調整 */

}


.tts_recruit_text_1_1{
        width: 90%;
background-color: #ffffff;
  padding: 9px;
}

.tts_recruit_text_2{
position: relative;
      width: 90%;
left: 70px;
font-size: 30px;
color: #ffffff;
font-weight: bold;
letter-spacing : 0.08em; /* 文字間の調整 */
line-height: 2.5rem;　/* 行間の調整 */
}

.tts_recruit_skill_box{
  position:relative;
        width: 90%;
left: 70px;
padding: 10px 40px;

  top: 20px;
  background-color: rgb(255 255 225 / 0.7);


}

.tts_recruit_skill-title{
  position: relative;
  font-size: 25px;
  font-weight: bold;
letter-spacing : 0.08em; /* 文字間の調整 */
}

.tts_recruit_skill{
position: relative;
overflow-wrap: anywhere;
  font-size: 20px;
 letter-spacing : 0.08em; /* 文字間の調整 */
 line-height: 1.9rem;　/* 行間の調整 */
}




.tts_tae_voice{
  top: 100px;
}

.tts_tae_contact{
  top: 530px;
}




@media screen and (max-width: 768px) {
.tts_tyourlifestyle{
 top: 460px;
    width: 85%;
height: auto;
    padding: 0px 60px 40px 60px;;
  left: 0;
}

.tts_tyourlifestyle_title{
font-size: 30px;
}

.tts_tyourlifestyle_text{
 font-size: 16px;
}



.tts_recruit{
  background-image: url(images/31922197_l_toallengineers_recruit_img_m.jpg);
  top: 500px;
    padding: 0px 30px 70px 30px;
}

.tts_recruit_title{
   left: 10px;
  font-size: 39px;
  width: 100%;
}


.tts_recruit_copy{
  left: 10px;
  font-size: 25px;
    width: 100%;
}


.tts_recruit_text_1{
left: 10px;  
width: 100%;
  font-size: 25px;
      line-height: 3.5rem;　/* 行間の調整 */
}

.tts_recruit_text_1_1{
  width: 100%;
  padding: 7px;
}

.tts_recruit_text_2{
    width: 100%;
left: 10px;
font-size: 28px;
}

.tts_recruit_skill_box{
    width: 95%;
  position:relative;
left: 10px;
padding: 10px 30px;
  top: 20px;

}

.tts_recruit_skill-title{
  font-size: 23px;
letter-spacing : 0.08em; /* 文字間の調整 */
}

.tts_recruit_skill{
overflow-wrap: anywhere;
  font-size: 18px;
 letter-spacing : 0.08em; /* 文字間の調整 */
 line-height: 1.9rem;　/* 行間の調整 */
}




.tts_tae_voice{
  top: 160px;
}
.tts_tae_contact{
  top: 650px;

}
.tts_tae_footer{
  top: 720px;
}

}



@media screen and (max-width: 500px) {
.tts_tyourlifestyle{
 top: 400px;
    width: 90%;
    padding: 0px 20px 20px 20px;
}

.tts_tyourlifestyle_title{
font-size: 30px;
    line-height: 2.5rem;　/* 行間の調整 */
}

.tts_tyourlifestyle_text{
 font-size: 15px;
}



.tts_recruit{
  background-image: url(images/31922197_l_toallengineers_recruit_img_m.jpg);
  top: 430px;
}

.tts_recruit_title{
   left: 0;
  font-size: 30px;
      line-height: 2.5rem;　/* 行間の調整 */
}


.tts_recruit_copy{
 left: 0;
  font-size: 21px;
        line-height: 2rem;　/* 行間の調整 */
}


.tts_recruit_text_1{
 left: 0;
  font-size: 18px;
      line-height: 2.8rem;　/* 行間の調整 */
}

.tts_recruit_text_1_1{

  padding: 7px;
}

.tts_recruit_text_2{
 left: 0;
  font-size: 20px;
  line-height: 2rem;　/* 行間の調整 */
}

.tts_recruit_skill_box{
    width: 100%;
 left: 0;
padding: 10px 20px;
  top: 20px;

}

.tts_recruit_skill-title{
  font-size: 20px;
  line-height: 2rem;　/* 行間の調整 */
 
}

.tts_recruit_skill{
position: relative;
overflow-wrap: anywhere;
  font-size: 15px;
 letter-spacing : 0.08em; /* 文字間の調整 */
 line-height: 1.9rem;　/* 行間の調整 */
}


.tts_tae_voice{
  top: 50px;
}
.tts_tae_contact{
  top: -20px;
}
.tts_tae_footer{
  top: 170px;
}

}







/* --------------------------
 エンジニアの声 コンテンツ
 -------------------------- */

.tts_voice_con{
  position: relative;
  width: 100%;
  top: -280px;

}

.tts_voice_con_1{
  background-color: rgb(251 154 20 / 0.2);
}
.tts_voice_con_2{
  top:-180px;
  background-color: rgb(57 181 74 / 0.2);
}

.tts_voice_con_3{
  top:-90px;
  background-color: rgb(41 171 226 / 0.2);
}

.tts_voice_con_4{
	top:10px;
  background-color: rgb(251 154 20 / 0.2);
}

.tts_voice_con_5{
  top:100px;
  background-color: rgb(57 181 74 / 0.2);
}

.tts_voice_con_6{
  top:180px;
  background-color: rgb(41 171 226 / 0.2);
}

.tts_voice_con_7{
  top:260px;
  background-color: rgb(57 181 74 / 0.2);
	
}


.tts_voice_con_inner{
  position: relative;
  padding: 70px;
  margin-left: 50px;
}

.tts_voice_con_num{
  position: relative;
  font-size: 28px;
  font-weight: bold;
  top: -80px;
  color: #00b4f5;
  display: inline-block;
    width: 140px;
    height: 140px; 
    background-color: #ffffff;
    border-radius: 50%;/* ←円を作る */
    text-align: center;
    line-height: 140px;
}

.tts_voice_con_title{
  position: relative;
  margin-top: -120px;
  font-size: 25px;
  font-weight: bold;
  letter-spacing : 0.08em; /* 文字間の調整 */

}

.tts_voice_con img{
  width: 300px;
  margin: 20px;
}

.tts_voice_con_1 img{
  float:right;
  margin-top: -30px;
}
.tts_voice_con_2 img{
  float:left;
}
.tts_voice_con_3 img{
  float:right;
	  margin-top: -20px;
}
.tts_voice_con_4 img{
  float:left;
}
.tts_voice_con_5 img{
  float:right;
	  margin-top: -80px;
}
.tts_voice_con_6 img{
  float:left;
}
.tts_voice_con_7 img{
  float:right;
	  margin-top: -100px;
}

.tts_voice_con_name{
  font-size: 20px;
  font-weight: bold;

}

.tts_voice_con_name_2{
 position: relative;
  top: -10px;
  font-size: 18px;
 font-weight: bold;

}


.tts_voice_con_text{
font-size: 18px;
 line-height: 2.2rem;　/* 行間の調整 */
  letter-spacing : 0.08em; /* 文字間の調整 */
}

.br-m{
 display:block;
}


.main_con_contact_voice{
	top:330px;

}

.tts_footer_voice{
	top:100px;
}

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

.tts_voice_con{
  top: -180px;
}

.tts_voice_con_2{
  top:-150px;
}
.tts_voice_con_3{
  top:-120px;
}
.tts_voice_con_4{
  top:-90px;
}
.tts_voice_con_5{
  top:-60px;
}
.tts_voice_con_6{
  top:-30px;
}
.tts_voice_con_7{
  top:0px;
}
	
.tts_voice_con_inner{
  padding: 50px;
  margin-left: 0px;
}

.tts_voice_con_num{
  font-size: 25px;
  top: -70px;
    width: 120px;
    height: 120px; 
    line-height: 120px;
}


.tts_voice_con_title{
  font-size: 23px;

}

.tts_voice_con img{
  width: 250px;
}


.tts_voice_con_name{
  font-size: 18px;
}

.tts_voice_con_name_2{
  font-size: 17px;

}
.br-m{
 display: none;
}
.main_con_contact_voice{
	top:20px;

}
	.tts_voice_con_1 img{
  margin-top: 0px;
}

.tts_voice_con_3 img{
	  margin-top:0px;
}

.tts_voice_con_5 img{
	 margin-top: 0px;
}

.tts_voice_con_7 img{
	  margin-top: 0px;
}
	
}




@media screen and (max-width: 500px) {
.tts_common_main_copy_voice p{
  font-size: 23px;
  letter-spacing : 0.03em; /* 文字間の調整 */
}

.tts_voice_con{
  top: -150px;

}

.tts_voice_con_2{
  top:-120px;
}

.tts_voice_con_3{
  top:-90px;
}
.tts_voice_con_4{
  top:-60px;
}
.tts_voice_con_5{
  top:-30px;
}
.tts_voice_con_6{
  top:0px;
}
.tts_voice_con_7{
  top:30px;
}
	
	
.tts_voice_con_inner{
  padding: 20px;
}

.tts_voice_con img{
  width: 200px;
}

.main_con_contact_voice{
  top: 130px;
}

}






/* --------------------------
 イベント情報 コンテンツ
 -------------------------- */

.tts_event{
  position: relative;

  top: -330px;
  margin-left: 100px;
  right: 0;
    margin-bottom: -510px;

}

.tts_event img{
  width: 100%;
  
}

.main_con_contact_event{
  top: 400px;
}




@media screen and (max-width: 768px) {
.tts_event{
  top: -150px;
  margin-left: 10px;

}
}




@media screen and (max-width: 500px) {

.tts_common_main_copy_event{
font-size: 23px;
  letter-spacing : 0.03em; /* 文字間の調整 */
}

.tts_event{
	  top: -30px;
    margin-bottom: -310px;

}


.main_con_contact_event{
  top: 210px;

}
}



/* --------------------------
 お問い合わせページ コンテンツ
 -------------------------- */


.tts_contact{
  position: relative;

  top: -270px;
  margin-left: 120px;
  right: 0;
  margin-bottom: -1510px;

}

.tts_contact img{
  width: 90%;
  
}


@media screen and (max-width: 768px) {
.tts_contact{
  top: -150px;
  margin-left: 10px;

}
}




@media screen and (max-width: 500px) {
.tts_contact{
    margin-left: 30px;
    margin-bottom: -310px;

}



}











/* ----使っていない　スライドイン　スクロール対応できてない---- */

.slide_right{
position: relative;
width: 200px;
top: 20px;

}

.slide_right p{

  animation-duration: 2s;
  animation-name: slide-in;
}


@keyframes slide-in {
  from {
    translate: 40vw 0;
    scale: 100% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}




/* ----スクロールでスライドイン 未使用---- */

.boxes-wrapper{
  position: relative;
  top: 600px;
}
.box-01{
width: auto;
overflow:hidden;
}

.box-02{
width: auto;
overflow:hidden;

}

.box-01.displayed{
  animation: fadeInLeft 1s forwards;
}

.box-02.displayed{
  animation: fadeInRight 1s forwards;
}

@keyframes fadeInLeft{
  0%{transform: translateX(-100px);}
100%{transform: translateX(0);}
}
@keyframes fadeInRight{
  0%{transform: translateX(100px);}
100%{transform: translateX(0);}
}








/* トップページ以外のスクロールダウン 色の変更*/

.scroll_down_2 a{
 color:rgb(37 167 225 / 0.6);
}

.scroll_down_2:before {
    background: rgb(37 167 225 / 0.6);
}

.scroll_down_2:after{

  background:rgb(37 167 225 / 0.6);
}



/* --------------------------
アニメーション設定
 -------------------------- */
.animate {
    opacity: 0; /* 初期状態では非表示 */
    transition: opacity 1s ease-out, transform 1s ease-out; /* 透明度と変形を3秒かけてスムーズに変化 */
}

/* フェードインアニメーション（下から上に移動しながら表示） */
.fade-in {
    transform: translateY(100px); /* 初期状態では下方向に120pxずらす */
}

/* ズームインアニメーション（拡大しながら表示） */
.zoom-in {
    transform: scale(0.05); /* 初期状態では10%のサイズ */
}

/* スライドインアニメーション（左から右へ移動しながら表示） */
.slide-in {
    transform: translateX(-150px); /* 初期状態では右に150pxずらす */
}

/* 3D回転アニメーション（Y軸を中心に回転しながら表示） */
.rotate {
    transform: rotateY(90deg); /* 初期状態ではY軸方向に90度回転 */
}

/* --------------------------
 【最終状態】要素が画面内に入ったとき（アニメーション完了時）
 -------------------------- */
.show {
    opacity: 1; /* 完全に表示 */
    transform: translateY(0) scale(1) translateX(0) rotateY(0); /* 元の位置・サイズ・回転に戻す */
}






/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0);
  border: none;
  color: #00b4f5;
}

.flickity-button:hover {
  color: rgb(37 167 225 / 0.2);
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 50px; }
.flickity-prev-next-button.next { right: 50px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}


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

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }

}


/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background:#00b4f5;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}